CINXE.COM

<!DOCTYPE html><html lang="en-us" data-amplify-theme="amplify-docs"><head><meta charSet="utf-8"/><link rel="canonical" href="https://ui.docs.amplify.aws"/><title>Amplify UI - Build UI fast with Amplify on React</title><meta name="viewport" content="width=device-width, initial-scale=1"/><meta name="description" content="Amplify UI simplifies building accessible, performant, and beautiful applications with cloud-connected capabilities, building blocks, theming, and utilities."/><meta property="og:title" content="Amplify UI - Build UI fast with Amplify on React"/><meta property="og:description" content="Amplify UI simplifies building accessible, performant, and beautiful applications with cloud-connected capabilities, building blocks, theming, and utilities."/><meta property="og:type" content="website"/><meta property="og:site_name" content="Amplify UI"/><meta property="og:url" content="https://ui.docs.amplify.aws/"/><meta property="og:image" content="https://ui.docs.amplify.aws/previews/react-4.png"/><meta property="og:image:width" content="1280"/><meta property="og:image:height" content="640"/><meta property="og:image:secure_url" content="https://ui.docs.amplify.aws/previews/react-4.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:alt" content="Amplify UI simplifies building accessible, performant, and beautiful applications with cloud-connected capabilities, building blocks, theming, and utilities."/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Amplify UI - Build UI fast with Amplify on React"/><meta name="twitter:site" content="@AWSAmplify"/><meta name="twitter:url" content="https://ui.docs.amplify.aws/"/><meta name="twitter:description" content="Amplify UI simplifies building accessible, performant, and beautiful applications with cloud-connected capabilities, building blocks, theming, and utilities."/><meta name="twitter:image" content="https://ui.docs.amplify.aws/previews/react-4.png"/><meta name="next-head-count" content="22"/><meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; font-src 'self'; frame-src 'self' *.aws.demdex.net dpm.demdex.net *.youtube.com https://snack.expo.dev; img-src 'self' blob: amazonwebservices.d2.sc.omtrdc.net aws.demdex.net dpm.demdex.net cm.everesttech.net images.unsplash.com a0.awsstatic.com; connect-src 'self' *.shortbread.aws.dev amazonwebservices.d2.sc.omtrdc.net aws.demdex.net dpm.demdex.net cm.everesttech.net d2c.aws.amazon.com vs.aws.amazon.com a0.awsstatic.com https://*.algolia.net https://*.algolianet.com; script-src 'unsafe-eval' 'self' 'sha256-ndzUVXQ1ah/OWNxu7wsSr8PNZafmaptRNA2VmMRiqSQ=' a0.awsstatic.com aa0.awsstatic.com; "/><link rel="icon" type="image/svg+xml" href="/svg/favicon.svg"/><link rel="apple-touch-icon" href="/svg/favicon.svg"/><link rel="preload" href="/fonts/AmazonEmber_W_Rg.woff2" as="font" type="font/woff2" crossorigin="anonymous"/><link rel="preload" href="/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous"/><link rel="preload" href="/fonts/Inter.var.woff2" as="font" type="font/woff2" crossorigin="anonymous"/><link rel="preload" href="/fonts/Inter-italic.var.woff2" as="font" type="font/woff2" crossorigin="anonymous"/><link rel="preload" href="/_next/static/css/830f7c6d291c343b.css" as="style"/><link rel="stylesheet" href="/_next/static/css/830f7c6d291c343b.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"></script><script src="/_next/static/chunks/webpack-5f3c334a3ef514cc.js" defer=""></script><script src="/_next/static/chunks/framework-d57fa332274b7d65.js" defer=""></script><script src="/_next/static/chunks/main-b300e1aa5b1ce03a.js" defer=""></script><script src="/_next/static/chunks/pages/_app-8d0178ed882b6c47.js" defer=""></script><script src="/_next/static/chunks/abba1267-fffe45d53b09fa44.js" defer=""></script><script src="/_next/static/chunks/90e476e5-5033421c5c8b7247.js" defer=""></script><script src="/_next/static/chunks/9664-c0a421658afb3a86.js" defer=""></script><script src="/_next/static/chunks/1697-9702d58e69da6f74.js" defer=""></script><script src="/_next/static/chunks/5171-c71b44dd25e94d54.js" defer=""></script><script src="/_next/static/chunks/3987-8da00b4930453ede.js" defer=""></script><script src="/_next/static/chunks/3482-cbbed4649abdebee.js" defer=""></script><script src="/_next/static/chunks/5288-332899caf91e1a9f.js" defer=""></script><script src="/_next/static/chunks/5072-0f0ec7de90de4ab9.js" defer=""></script><script src="/_next/static/chunks/pages/index-d195c9f64b2ce7cd.js" defer=""></script><script src="/_next/static/-WIT3zg9fx60YQufP5mRY/_buildManifest.js" defer=""></script><script src="/_next/static/-WIT3zg9fx60YQufP5mRY/_ssgManifest.js" defer=""></script></head><body><div id="__next"><div class="docs-home"><div data-amplify-theme="amplify-docs" data-amplify-color-mode="system" dir="ltr"><nav aria-label="Amplify Dev Center - External links to additional Amplify resources" class="GlobalNav_navbar__rKvoa "><a class="amplify-button amplify-field-group__control amplify-button--small GlobalNav_skip-to-main__XMJfx" type="button" href="#docs-content">Skip to main content</a><div class="amplify-flex GlobalNav_nav-links-container__yEBob"><div style="height:100%" class="amplify-flex GlobalNav_left-nav-links__COtFv" id="left-nav"><div style="justify-content:space-between" class="amplify-flex GlobalNav_logo-container__mHVj3"><div style="gap:var(--amplify-space-xs);align-items:center;flex-direction:row" class="amplify-flex GlobalNav_desktop-only__kk82R"><svg style="width:20px;height:20px;color:var(--amplify-colors-primary-60)" class="amplify-icon" viewBox="0 0 24 22" aria-hidden="true"><path d="M14.3128 20.0394C14.3651 20.1298 14.4618 20.1855 14.5664 20.1855H16.8444C17.0698 20.1855 17.2107 19.942 17.098 19.7472L8.82308 5.44278C8.71037 5.24795 8.4286 5.24795 8.31589 5.44278L7.09981 7.54494C7.09518 7.55294 7.09518 7.56281 7.09981 7.57081L7.10128 7.57334C7.1106 7.58946 7.09894 7.60961 7.08029 7.60961C7.07163 7.60961 7.06363 7.61422 7.0593 7.62171L0.0396396 19.7616C-0.0730193 19.9565 0.0678714 20.2 0.293265 20.2H10.9633C11.1887 20.2 11.3296 19.9564 11.2169 19.7616L10.1254 17.8749C10.0731 17.7845 9.97646 17.7288 9.87184 17.7288H4.4145C4.3018 17.7288 4.23135 17.607 4.28771 17.5096L8.4417 10.3288C8.49805 10.2314 8.63894 10.2314 8.6953 10.3288L14.3128 20.0394Z"></path><path d="M10.1282 2.30989C10.0759 2.40032 10.0759 2.51172 10.1282 2.60214L20.2155 20.0394C20.2678 20.1298 20.3645 20.1855 20.4691 20.1855H22.7412C22.9666 20.1855 23.1075 19.942 22.9948 19.7472L11.7715 0.346077C11.6588 0.151242 11.377 0.151243 11.2643 0.346077L10.1282 2.30989Z"></path></svg><span class="amplify-text GlobalNav_dev-center-logo__2MCYI">Amplify Dev Center<span class="GlobalNav_mobile-only__s7Y_2"> <svg style="transform:rotate(270deg);width:10px;height:9px" class="amplify-icon GlobalNav_chevron-icon__AWCXb" viewBox="2 -1.5 11 12" aria-hidden="true"><path d="M14.12 0.0599976L8 6.16667L1.88 0.0599976L0 1.94L8 9.94L16 1.94L14.12 0.0599976Z"></path></svg> UI Library</span></span></div><a style="text-decoration:none;cursor:pointer;gap:var(--amplify-space-xs);align-items:center;flex-direction:row" class="amplify-flex GlobalNav_mobile-only__s7Y_2 GlobalNav_mobile-current-link__hQZYC" href="/"><svg style="width:20px;height:20px;color:var(--amplify-colors-primary-60)" class="amplify-icon" viewBox="0 0 24 22" aria-hidden="true"><path d="M14.3128 20.0394C14.3651 20.1298 14.4618 20.1855 14.5664 20.1855H16.8444C17.0698 20.1855 17.2107 19.942 17.098 19.7472L8.82308 5.44278C8.71037 5.24795 8.4286 5.24795 8.31589 5.44278L7.09981 7.54494C7.09518 7.55294 7.09518 7.56281 7.09981 7.57081L7.10128 7.57334C7.1106 7.58946 7.09894 7.60961 7.08029 7.60961C7.07163 7.60961 7.06363 7.61422 7.0593 7.62171L0.0396396 19.7616C-0.0730193 19.9565 0.0678714 20.2 0.293265 20.2H10.9633C11.1887 20.2 11.3296 19.9564 11.2169 19.7616L10.1254 17.8749C10.0731 17.7845 9.97646 17.7288 9.87184 17.7288H4.4145C4.3018 17.7288 4.23135 17.607 4.28771 17.5096L8.4417 10.3288C8.49805 10.2314 8.63894 10.2314 8.6953 10.3288L14.3128 20.0394Z"></path><path d="M10.1282 2.30989C10.0759 2.40032 10.0759 2.51172 10.1282 2.60214L20.2155 20.0394C20.2678 20.1298 20.3645 20.1855 20.4691 20.1855H22.7412C22.9666 20.1855 23.1075 19.942 22.9948 19.7472L11.7715 0.346077C11.6588 0.151242 11.377 0.151243 11.2643 0.346077L10.1282 2.30989Z"></path></svg><span class="amplify-text GlobalNav_dev-center-logo__2MCYI">Amplify Dev Center<span class="GlobalNav_mobile-only__s7Y_2"> <svg style="transform:rotate(270deg);width:10px;height:9px" class="amplify-icon GlobalNav_chevron-icon__AWCXb" viewBox="2 -1.5 11 12" aria-hidden="true"><path d="M14.12 0.0599976L8 6.16667L1.88 0.0599976L0 1.94L8 9.94L16 1.94L14.12 0.0599976Z"></path></svg> UI Library</span></span></a><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--large GlobalNav_mobile-only__s7Y_2 GlobalNav_nav-expander___P1K6" type="button" aria-expanded="false" aria-controls="mobile-nav-links"><span class="amplify-visually-hidden">Open Dev Center menu</span><svg style="transform:rotate(0deg);width:10px;height:9px" class="amplify-icon GlobalNav_chevron-icon__AWCXb" viewBox="2 -1.5 11 12" aria-hidden="true"><path d="M14.12 0.0599976L8 6.16667L1.88 0.0599976L0 1.94L8 9.94L16 1.94L14.12 0.0599976Z"></path></svg></button></div><div class="amplify-flex GlobalNav_left-nav-links__COtFv GlobalNav_collapsed-menu__DZKMg"><div class="GlobalNav_mobile-border__ssz74"><a class="amplify-link GlobalNav_nav-menu-item__j3csT " href="https://docs.amplify.aws/">Docs</a></div><div class="GlobalNav_mobile-border__ssz74"><a class="amplify-link GlobalNav_nav-menu-item__j3csT GlobalNav_current-nav-menu-item__PMv7u" href="https://ui.docs.amplify.aws/">UI Library</a></div><div class="GlobalNav_mobile-border__ssz74"><a class="amplify-link GlobalNav_nav-menu-item__j3csT " href="https://docs.amplify.aws/contribute/">Contribute</a></div></div></div><div class="amplify-flex GlobalNav_right-nav-links__jLl5J GlobalNav_collapsed-menu__DZKMg" id="right-nav"><div class="GlobalNav_mobile-border__ssz74"><a class="amplify-link GlobalNav_nav-menu-item__j3csT" rel="noopener noreferrer" target="_blank" href="https://aws.amazon.com/amplify/"><div style="align-items:center;gap:var(--amplify-space-xs)" class="amplify-flex">About AWS Amplify<svg class="amplify-icon" viewBox="0 0 16 16" aria-hidden="true"><path class="GlobalNav_custom-path-stroke__LzN5t" d="M9.79505 1.59277L16.3138 1.59278M16.3138 1.59278L16.3138 8.11155M16.3138 1.59278L9.79504 8.11156" stroke-width="1.5" stroke-linecap="round"></path><path d="M17.0834 12.3333C17.0834 11.9191 16.7476 11.5833 16.3334 11.5833C15.9192 11.5833 15.5834 11.9191 15.5834 12.3333H17.0834ZM5.66675 2.41663C6.08096 2.41663 6.41675 2.08084 6.41675 1.66663C6.41675 1.25241 6.08096 0.916626 5.66675 0.916626V2.41663ZM15.5834 12.3333V13.6666H17.0834V12.3333H15.5834ZM13.6667 15.5833H4.33341V17.0833H13.6667V15.5833ZM4.33341 15.5833C3.27487 15.5833 2.41675 14.7252 2.41675 13.6666H0.916748C0.916748 15.5536 2.44644 17.0833 4.33341 17.0833V15.5833ZM15.5834 13.6666C15.5834 14.7252 14.7253 15.5833 13.6667 15.5833V17.0833C15.5537 17.0833 17.0834 15.5536 17.0834 13.6666H15.5834ZM4.33341 2.41663H5.66675V0.916626H4.33341V2.41663ZM2.41675 4.33329C2.41675 3.27475 3.27487 2.41663 4.33341 2.41663V0.916626C2.44644 0.916626 0.916748 2.44632 0.916748 4.33329H2.41675ZM2.41675 13.6666V4.33329H0.916748V13.6666H2.41675Z"></path></svg></div></a></div><div class="GlobalNav_mobile-border__ssz74"><a class="amplify-link GlobalNav_nav-menu-item__j3csT" rel="noopener noreferrer" target="_blank" href="https://aws.amazon.com/amplify/pricing/"><div style="align-items:center;gap:var(--amplify-space-xs)" class="amplify-flex">Pricing<svg class="amplify-icon" viewBox="0 0 16 16" aria-hidden="true"><path class="GlobalNav_custom-path-stroke__LzN5t" d="M9.79505 1.59277L16.3138 1.59278M16.3138 1.59278L16.3138 8.11155M16.3138 1.59278L9.79504 8.11156" stroke-width="1.5" stroke-linecap="round"></path><path d="M17.0834 12.3333C17.0834 11.9191 16.7476 11.5833 16.3334 11.5833C15.9192 11.5833 15.5834 11.9191 15.5834 12.3333H17.0834ZM5.66675 2.41663C6.08096 2.41663 6.41675 2.08084 6.41675 1.66663C6.41675 1.25241 6.08096 0.916626 5.66675 0.916626V2.41663ZM15.5834 12.3333V13.6666H17.0834V12.3333H15.5834ZM13.6667 15.5833H4.33341V17.0833H13.6667V15.5833ZM4.33341 15.5833C3.27487 15.5833 2.41675 14.7252 2.41675 13.6666H0.916748C0.916748 15.5536 2.44644 17.0833 4.33341 17.0833V15.5833ZM15.5834 13.6666C15.5834 14.7252 14.7253 15.5833 13.6667 15.5833V17.0833C15.5537 17.0833 17.0834 15.5536 17.0834 13.6666H15.5834ZM4.33341 2.41663H5.66675V0.916626H4.33341V2.41663ZM2.41675 4.33329C2.41675 3.27475 3.27487 2.41663 4.33341 2.41663V0.916626C2.44644 0.916626 0.916748 2.44632 0.916748 4.33329H2.41675ZM2.41675 13.6666V4.33329H0.916748V13.6666H2.41675Z"></path></svg></div></a></div></div></div><div class=""></div></nav><header class="amplify-flex docs-header"><button class="amplify-button amplify-field-group__control amplify-button--small docs-header-menu-button open" type="button" aria-expanded="false" aria-controls="docs-sidebar"><span class="amplify-visually-hidden">Open menu</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="docs-header-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></button><aside aria-label="Main navigation" id="docs-sidebar" class="docs-sidebar collapsed"><div class="docs-sidebar-overlay"></div><div class="docs-sidebar-inner"><div style="flex-direction:column" class="amplify-flex docs-sidebar-nav"><nav style="flex-direction:row;align-items:center;justify-content:space-between" class="amplify-flex"><a class="docs-logo-link" href="/react">Amplify UI</a><button class="amplify-button amplify-field-group__control amplify-button--small docs-header-menu-button open" type="button" aria-expanded="false" aria-controls="docs-sidebar"><span class="amplify-visually-hidden">Open menu</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="docs-header-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></button></nav><div class="amplify-flex docs-framework-chooser"><a class="amplify-button amplify-field-group__control amplify-button--small docs-framework-link " type="button" href="/android"><svg class="amplify-icon docs-framework-img" viewBox="0 0 40 34"><g transform="scale(0.03, 0.036) translate(0,75)"><path d="M930.77,536.42a53.07,53.07,0,1,1,53.06-53.08,53.14,53.14,0,0,1-53.06,53.08m-586.54,0a53.07,53.07,0,1,1,53.06-53.08,53.13,53.13,0,0,1-53.06,53.08M949.8,216.77,1055.85,33.09A22.06,22.06,0,1,0,1017.64,11L910.25,197c-82.12-37.48-174.35-58.35-272.76-58.35S446.86,159.55,364.74,197L257.36,11a22.06,22.06,0,1,0-38.22,22.06L325.2,216.77C143.09,315.82,18.53,500.18.31,718H1274.69c-18.24-217.82-142.79-402.18-324.89-501.23" fill="#3ddc84"></path></g></svg>Android</a><a class="amplify-button amplify-field-group__control amplify-button--small docs-framework-link " type="button" href="/angular"><svg class="amplify-icon docs-framework-img" viewBox="0 0 70 70"><g transform="translate(10.000000, 8.000000)"><polygon fill="#000000" points="25.2197802 -0.000168131868 0 8.96686484 3.92307692 42.0333593 25.2197802 53.8020297 46.7967033 41.892689 51 8.82675495"></polygon><polygon fill="#DE3641" points="25.2197802 -0.000168131868 0 8.96686484 3.92307692 42.0333593 25.2197802 53.8020297"></polygon><polygon fill="#B13138" points="25.2197802 -0.000168131868 25.2197802 53.8020297 46.7967033 41.892689 51 8.82675495"></polygon><polygon fill="#FFFFFF" points="25.2197802 6.02472527 41.6126374 41.0521978 36.0082418 41.0521978 32.5054945 33.0659341 25.2197802 33.0659341 25.2197802 28.3021978 30.543956 28.3021978 25.2197802 17.2895604 20.7362637 28.3021978 25.2197802 28.3021978 25.2197802 33.0659341 18.5505495 33.0659341 15.4120879 41.0521978 9.38736264 41.0521978"></polygon></g></svg>Angular</a><a class="amplify-button amplify-field-group__control amplify-button--small docs-framework-link " type="button" href="/flutter"><svg class="amplify-icon docs-framework-img" viewBox="0 0 44 44"><g transform="scale(0.8) translate(5,5)"><path d="M37.0631 20.0376H23.7056L12.0195 31.7265L18.6969 38.4038L37.0631 20.0376Z" fill="#54C5F8"></path><path d="M8.68014 28.3864L2 21.7063L23.7063 0H37.0638L8.68014 28.3864Z" fill="#54C5F8"></path><path d="M18.6975 38.4039L23.7062 43.4126H37.0637L25.3749 31.7266L18.6975 38.4039Z" fill="#01579B"></path><path d="M18.6966 25.0456L12.019 31.7231L18.6966 38.4007L25.3741 31.7231L18.6966 25.0456Z" fill="#29B6F6"></path></g></svg>Flutter</a><a class="amplify-button amplify-field-group__control amplify-button--small docs-framework-link " type="button" href="/react"><svg class="amplify-icon docs-framework-img" viewBox="0 0 70 70"><path d="M23.9381606,8.33333333 C23.9952526,8.36500885 24.0500692,8.41873301 24.1098503,8.42504741 C25.8858045,8.61240913 27.5036179,9.26838219 29.0614433,10.0983636 C31.4167985,11.353273 33.5117231,12.9699666 35.4737433,14.7655337 C35.734691,15.0044457 35.9078286,15.0086898 36.1660872,14.7697778 C36.7596578,14.220839 37.3629506,13.6798708 37.9911694,13.1711993 C40.2231355,11.363935 42.5842825,9.76939364 45.3432119,8.8632254 C45.9569508,8.66157865 46.5868245,8.50868734 47.2093548,8.33333333 L49.2779054,8.33333333 C49.4366667,8.38136418 49.5934628,8.4375727 49.7544995,8.47608019 C51.7478582,8.95235162 52.9516512,10.3068423 53.684849,12.1186612 C54.6356583,14.4680322 54.8064171,16.9408964 54.5817725,19.4330143 C54.4016018,21.4320914 54.0968009,23.4197819 53.8434034,25.4445307 C54.9392181,25.8537245 56.1365986,26.2699574 57.3101908,26.7451937 C59.8480955,27.7728882 62.2518547,29.0453952 64.2383873,30.9676643 C65.6857521,32.3683226 66.7701898,33.9776666 66.6587983,36.1301526 C66.5858819,37.5377463 65.9558014,38.7052893 65.085769,39.7621751 C63.4482009,41.7513148 61.3192487,43.0861376 59.019641,44.1388828 C57.4121703,44.8748727 55.7301284,45.448034 54.081597,46.0941731 C54.0037161,46.12471 53.9269729,46.1582488 53.8192014,46.2031742 C53.9803415,47.0578956 54.1625808,47.8954335 54.2931063,48.7410456 C54.7762163,51.8691582 55.0428525,55.0001693 54.2408754,58.1206218 C53.8936692,59.472007 53.3557426,60.7310571 52.3458762,61.7383592 C51.0525149,63.0283602 49.4673846,63.4245112 47.7030144,63.230421 C44.747159,62.9051776 42.2457642,61.4973769 39.8857549,59.8212658 C38.611114,58.9159257 37.4366944,57.8690809 36.2168701,56.8862082 C36.112098,56.8017402 36.0064985,56.7181003 35.9005887,56.6334252 C34.9124421,57.452848 33.9680453,58.2811732 32.9768993,59.0489422 C30.7164907,60.7997909 28.3175925,62.311624 25.5072597,63.0242196 C23.9811865,63.4111578 22.4440466,63.5204694 20.956345,62.8440004 C19.1093361,62.0040816 18.1917271,60.4106789 17.6462503,58.5734989 C16.9090189,56.0911113 16.8683719,53.5478571 17.194272,50.9990131 C17.3859232,49.4998088 17.6420098,48.0081611 17.9047157,46.5195153 C17.9802178,46.0916888 17.6738655,46.1252275 17.463287,46.0375505 C15.4954748,45.2189558 13.4784312,44.5024266 11.5672973,43.5682059 C9.41972803,42.5182556 7.47953101,41.132193 6.10342773,39.1042352 C4.57487227,36.8513399 4.63651507,34.468016 6.27532428,32.2912041 C7.54324236,30.6072259 9.20563305,29.3896853 11.0175799,28.3619907 C13.0014234,27.2367853 15.0933486,26.3556676 17.2732906,25.692552 C17.7657091,25.5427662 17.9025437,25.3547834 17.7792581,24.8184734 C17.1312846,22.0020437 16.8325859,19.1417238 17.0262023,16.2552146 C17.1715179,14.0867874 17.6126364,11.9859553 19.0529681,10.2388331 C19.8918688,9.22138648 20.9799264,8.65412558 22.2689437,8.44336953 C22.3801283,8.42525444 22.485521,8.37090919 22.5936028,8.33333333 L23.9381606,8.33333333 Z M20.6427527,47.026013 C20.0319097,49.8918192 19.5623487,52.7800881 19.9362392,55.716802 C20.0754527,56.8096073 20.3964918,57.9047935 20.8055476,58.9306248 C21.2462523,60.0355414 22.1892011,60.6122221 23.4011649,60.4938012 C24.23024,60.4127492 25.0744155,60.2600649 25.8582927,59.9860613 C28.1132197,59.1981069 30.0425569,57.8386476 31.8778784,56.3422382 C32.5394009,55.8029262 33.1729979,55.2293509 33.7930459,54.6940761 C33.7500201,54.5725498 33.746607,54.5343528 33.7263352,54.5100269 C32.0830786,52.5205766 30.4420974,50.5290561 28.785809,48.5504749 C28.6710044,48.4134214 28.4480146,48.326469 28.2625691,48.2967602 C27.5849119,48.1884838 26.897636,48.1386932 26.2216336,48.0225496 C24.3787619,47.7057945 22.5400273,47.3665766 20.6427527,47.026013 Z M51.0746484,47.0291185 C48.8315122,47.4157461 46.6885972,47.8189361 44.5333743,48.140453 C43.6378988,48.2740905 42.9171123,48.4119722 42.3004774,49.2696955 C40.9669863,51.1248871 39.4385342,52.8396091 37.9088411,54.7108455 C39.0017598,55.5847171 40.0977813,56.5260804 41.2607204,57.375626 C43.0903534,58.7124157 45.0185529,59.8996265 47.2867186,60.3294198 C49.2293979,60.6974148 50.4519113,60.4188565 51.2097248,58.2469098 C51.5671703,57.2223207 51.7539605,56.1109862 51.8407362,55.0247023 C51.9892581,53.1674404 51.8599737,51.3060379 51.5461745,49.4652349 C51.4031343,48.6257302 51.2234807,47.7925398 51.0746484,47.0291185 Z M39.334693,48.6527475 L32.3443365,48.6527475 C33.5497844,50.0378786 34.6738348,51.3291217 35.868733,52.702245 C37.0591839,51.3113172 38.1661688,50.0179002 39.334693,48.6527475 Z M35.8572526,25.7391337 C34.0795402,25.8334356 32.2928296,25.9200775 30.5077739,26.0343578 C30.3188118,26.0463655 30.0715166,26.1728605 29.9668479,26.3255448 C27.9562167,29.2578075 26.1927774,32.3339557 24.6793223,35.5517121 C24.6033031,35.7132986 24.584893,35.968359 24.6581197,36.1241487 C26.1774701,39.3589851 27.9665595,42.4399985 30.0036681,45.3751596 C30.112267,45.5316739 30.3553217,45.6704872 30.5446975,45.6830125 C31.9345567,45.774623 33.3272084,45.8945967 34.7181018,45.8854874 C36.8508809,45.8718234 38.9834531,45.7716211 41.1148876,45.6773192 C41.328362,45.6678993 41.605341,45.4965824 41.730178,45.3156386 C43.7089535,42.4451742 45.4221271,39.4200588 46.9432358,36.2835615 C47.1123398,35.9349238 47.0874137,35.6498441 46.9253428,35.3141457 C45.4153009,32.1901737 43.676891,29.1995287 41.7078377,26.3441775 C41.6004799,26.1883877 41.3645617,26.0433636 41.1796333,26.0314594 C39.4118499,25.9172826 37.6423083,25.8330216 35.8572526,25.7391337 Z M48.6607533,39.2260721 C47.4864372,41.2792874 46.3831757,43.2085956 45.2120658,45.2562211 C46.9768497,44.9105853 48.6343793,44.5856525 50.4055758,44.2385675 C49.8025933,42.506455 49.244912,40.9044605 48.6607533,39.2260721 Z M23.0016244,39.2754487 C22.4318421,40.946798 21.8814008,42.5620424 21.3046889,44.2540947 C23.0675077,44.5924845 24.715522,44.9088256 26.4601375,45.2436958 C25.2771334,43.2022812 24.174596,41.2996798 23.0016244,39.2754487 Z M53.1183764,28.1695568 C53.0396681,28.2686204 53.0099844,28.2919112 52.9988142,28.322034 C52.1169911,30.7281312 51.2310309,33.1326756 50.3668939,35.5451907 C50.3010105,35.7291364 50.3420712,35.9871987 50.4157116,36.1793221 C50.7483346,37.0469828 51.135981,37.8938371 51.4568132,38.7656385 C52.0204932,40.2974499 52.5497319,41.8419937 53.1454744,43.5280421 C54.7559445,42.8682391 56.3699311,42.27541 57.923516,41.5525664 C59.6933679,40.729003 61.3520352,39.7033787 62.6879052,38.2409221 C63.3470488,37.5193207 63.9216922,36.7360245 63.8629453,35.6856602 C63.8108179,34.7528887 63.2862334,34.0373946 62.6792173,33.3922906 C60.9036769,31.5050095 58.6534041,30.3515445 56.3092191,29.3652558 C55.2542583,28.9213845 54.1649596,28.5589793 53.1183764,28.1695568 Z M18.5304523,28.1543401 C17.2413315,28.6559727 15.929043,29.1155782 14.6593667,29.6722806 C12.5853344,30.5819683 10.6210388,31.6799494 9.03042681,33.3423965 C7.68586893,34.7476094 7.45512211,35.9831616 8.31346718,37.3760563 C8.52828616,37.724694 8.79823201,38.047039 9.08162344,38.3444369 C10.769147,40.1146428 12.8901354,41.2185243 15.0935555,42.1726198 C16.2250526,42.6626587 17.3999894,43.0521848 18.5797872,43.4963666 C18.6635635,43.299171 18.7213795,43.1777482 18.7675082,43.0519778 C19.6026855,40.7759987 20.4429307,38.5017793 21.2596979,36.2192788 C21.3376823,36.0014837 21.3348897,35.7057421 21.2542163,35.4890857 C20.9304881,34.6187335 20.5351881,33.7747777 20.2144593,32.9033904 C19.645401,31.3578115 19.1114047,29.7991897 18.5304523,28.1543401 Z M35.9197634,30.083602 C39.1034726,30.0946538 41.6452631,32.6639526 41.6291233,35.8555002 C41.6129332,39.0429297 39.063866,41.5322338 35.8227738,41.5131943 C32.7804427,41.4950677 30.0964425,39.1061429 30.1172334,35.7841537 C30.1389599,32.3255456 32.980451,30.0732396 35.9197634,30.083602 Z M26.4512428,26.4049406 C24.6884239,26.7467464 23.021379,27.0699195 21.2673515,27.410069 C21.8597844,29.124998 22.4128114,30.7258539 22.9988318,32.4228749 C24.1809051,30.36231 25.2864419,28.4352792 26.4512428,26.4049406 Z M45.2019299,26.3979016 C46.3786249,28.4326913 47.492436,30.3585835 48.6637527,32.3842639 C49.2406715,30.6878639 49.7862517,29.0837992 50.3593436,27.3990964 C48.6149349,27.0603961 46.9581293,26.7387757 45.2019299,26.3979016 Z M47.0888617,11.293545 C45.3745504,11.6381457 43.8643016,12.464504 42.4107311,13.3986212 C40.7859881,14.4425676 39.2924946,15.6538974 37.8552656,17.0058002 C37.9640714,17.1602442 38.0263347,17.2629308 38.1021471,17.3542309 C39.6848986,19.2596271 41.2655815,21.1666796 42.8601238,23.0621384 C42.9773071,23.2014693 43.1863342,23.308193 43.3684701,23.339972 C43.9937929,23.4489731 44.6292517,23.4990742 45.2549882,23.6059014 C47.1642604,23.9318694 49.0708435,24.2739857 51.0190044,24.6170336 C51.0532389,24.4774957 51.1133303,24.2988293 51.1397044,24.1155046 C51.3783117,22.4499521 51.6961445,20.7901964 51.8235672,19.1159486 C51.9742611,17.1365393 51.855216,15.1552667 51.1408421,13.2637415 C50.7219606,12.1542703 50.0544393,11.2764651 48.7737996,11.1691203 C48.2184972,11.1226421 47.6380619,11.1830948 47.0888617,11.293545 Z M20.4426204,13.4766714 C20.0861057,14.519065 19.8528767,15.6544149 19.837466,16.7514644 C19.8124365,18.5337816 19.9767828,20.3224132 20.132855,22.1021425 C20.2084605,22.9646275 20.446861,23.8128275 20.5968309,24.5908444 C23.1906899,24.1687112 25.660229,23.7523748 28.1362841,23.3786865 C28.5235167,23.3200972 28.734302,23.1544736 28.9592569,22.8678412 C30.0112183,21.5278426 31.0796247,20.2004728 32.1599253,18.8831439 C32.6785109,18.2509792 33.2368127,17.6514217 33.8328655,16.9738141 C32.6456209,16.0282067 31.5339818,15.0763885 30.3540806,14.2185617 C28.5360315,12.8968852 26.6226222,11.7017037 24.3675917,11.3106249 C22.2957315,10.9513252 21.1977448,11.2694261 20.4426204,13.4766714 Z M35.7991263,18.9529129 C34.6101234,20.339079 33.5034489,21.6291835 32.3376138,22.9884359 L39.3099738,22.9884359 C38.1091802,21.60817 36.9859572,20.3171339 35.7991263,18.9529129 Z" fill="#04B5E5"></path></svg>React</a><a class="amplify-button amplify-field-group__control amplify-button--small docs-framework-link " type="button" href="/react-native"><svg class="amplify-icon docs-framework-img" viewBox="0 0 70 70"><path d="M23.9381606,8.33333333 C23.9952526,8.36500885 24.0500692,8.41873301 24.1098503,8.42504741 C25.8858045,8.61240913 27.5036179,9.26838219 29.0614433,10.0983636 C31.4167985,11.353273 33.5117231,12.9699666 35.4737433,14.7655337 C35.734691,15.0044457 35.9078286,15.0086898 36.1660872,14.7697778 C36.7596578,14.220839 37.3629506,13.6798708 37.9911694,13.1711993 C40.2231355,11.363935 42.5842825,9.76939364 45.3432119,8.8632254 C45.9569508,8.66157865 46.5868245,8.50868734 47.2093548,8.33333333 L49.2779054,8.33333333 C49.4366667,8.38136418 49.5934628,8.4375727 49.7544995,8.47608019 C51.7478582,8.95235162 52.9516512,10.3068423 53.684849,12.1186612 C54.6356583,14.4680322 54.8064171,16.9408964 54.5817725,19.4330143 C54.4016018,21.4320914 54.0968009,23.4197819 53.8434034,25.4445307 C54.9392181,25.8537245 56.1365986,26.2699574 57.3101908,26.7451937 C59.8480955,27.7728882 62.2518547,29.0453952 64.2383873,30.9676643 C65.6857521,32.3683226 66.7701898,33.9776666 66.6587983,36.1301526 C66.5858819,37.5377463 65.9558014,38.7052893 65.085769,39.7621751 C63.4482009,41.7513148 61.3192487,43.0861376 59.019641,44.1388828 C57.4121703,44.8748727 55.7301284,45.448034 54.081597,46.0941731 C54.0037161,46.12471 53.9269729,46.1582488 53.8192014,46.2031742 C53.9803415,47.0578956 54.1625808,47.8954335 54.2931063,48.7410456 C54.7762163,51.8691582 55.0428525,55.0001693 54.2408754,58.1206218 C53.8936692,59.472007 53.3557426,60.7310571 52.3458762,61.7383592 C51.0525149,63.0283602 49.4673846,63.4245112 47.7030144,63.230421 C44.747159,62.9051776 42.2457642,61.4973769 39.8857549,59.8212658 C38.611114,58.9159257 37.4366944,57.8690809 36.2168701,56.8862082 C36.112098,56.8017402 36.0064985,56.7181003 35.9005887,56.6334252 C34.9124421,57.452848 33.9680453,58.2811732 32.9768993,59.0489422 C30.7164907,60.7997909 28.3175925,62.311624 25.5072597,63.0242196 C23.9811865,63.4111578 22.4440466,63.5204694 20.956345,62.8440004 C19.1093361,62.0040816 18.1917271,60.4106789 17.6462503,58.5734989 C16.9090189,56.0911113 16.8683719,53.5478571 17.194272,50.9990131 C17.3859232,49.4998088 17.6420098,48.0081611 17.9047157,46.5195153 C17.9802178,46.0916888 17.6738655,46.1252275 17.463287,46.0375505 C15.4954748,45.2189558 13.4784312,44.5024266 11.5672973,43.5682059 C9.41972803,42.5182556 7.47953101,41.132193 6.10342773,39.1042352 C4.57487227,36.8513399 4.63651507,34.468016 6.27532428,32.2912041 C7.54324236,30.6072259 9.20563305,29.3896853 11.0175799,28.3619907 C13.0014234,27.2367853 15.0933486,26.3556676 17.2732906,25.692552 C17.7657091,25.5427662 17.9025437,25.3547834 17.7792581,24.8184734 C17.1312846,22.0020437 16.8325859,19.1417238 17.0262023,16.2552146 C17.1715179,14.0867874 17.6126364,11.9859553 19.0529681,10.2388331 C19.8918688,9.22138648 20.9799264,8.65412558 22.2689437,8.44336953 C22.3801283,8.42525444 22.485521,8.37090919 22.5936028,8.33333333 L23.9381606,8.33333333 Z M20.6427527,47.026013 C20.0319097,49.8918192 19.5623487,52.7800881 19.9362392,55.716802 C20.0754527,56.8096073 20.3964918,57.9047935 20.8055476,58.9306248 C21.2462523,60.0355414 22.1892011,60.6122221 23.4011649,60.4938012 C24.23024,60.4127492 25.0744155,60.2600649 25.8582927,59.9860613 C28.1132197,59.1981069 30.0425569,57.8386476 31.8778784,56.3422382 C32.5394009,55.8029262 33.1729979,55.2293509 33.7930459,54.6940761 C33.7500201,54.5725498 33.746607,54.5343528 33.7263352,54.5100269 C32.0830786,52.5205766 30.4420974,50.5290561 28.785809,48.5504749 C28.6710044,48.4134214 28.4480146,48.326469 28.2625691,48.2967602 C27.5849119,48.1884838 26.897636,48.1386932 26.2216336,48.0225496 C24.3787619,47.7057945 22.5400273,47.3665766 20.6427527,47.026013 Z M51.0746484,47.0291185 C48.8315122,47.4157461 46.6885972,47.8189361 44.5333743,48.140453 C43.6378988,48.2740905 42.9171123,48.4119722 42.3004774,49.2696955 C40.9669863,51.1248871 39.4385342,52.8396091 37.9088411,54.7108455 C39.0017598,55.5847171 40.0977813,56.5260804 41.2607204,57.375626 C43.0903534,58.7124157 45.0185529,59.8996265 47.2867186,60.3294198 C49.2293979,60.6974148 50.4519113,60.4188565 51.2097248,58.2469098 C51.5671703,57.2223207 51.7539605,56.1109862 51.8407362,55.0247023 C51.9892581,53.1674404 51.8599737,51.3060379 51.5461745,49.4652349 C51.4031343,48.6257302 51.2234807,47.7925398 51.0746484,47.0291185 Z M39.334693,48.6527475 L32.3443365,48.6527475 C33.5497844,50.0378786 34.6738348,51.3291217 35.868733,52.702245 C37.0591839,51.3113172 38.1661688,50.0179002 39.334693,48.6527475 Z M35.8572526,25.7391337 C34.0795402,25.8334356 32.2928296,25.9200775 30.5077739,26.0343578 C30.3188118,26.0463655 30.0715166,26.1728605 29.9668479,26.3255448 C27.9562167,29.2578075 26.1927774,32.3339557 24.6793223,35.5517121 C24.6033031,35.7132986 24.584893,35.968359 24.6581197,36.1241487 C26.1774701,39.3589851 27.9665595,42.4399985 30.0036681,45.3751596 C30.112267,45.5316739 30.3553217,45.6704872 30.5446975,45.6830125 C31.9345567,45.774623 33.3272084,45.8945967 34.7181018,45.8854874 C36.8508809,45.8718234 38.9834531,45.7716211 41.1148876,45.6773192 C41.328362,45.6678993 41.605341,45.4965824 41.730178,45.3156386 C43.7089535,42.4451742 45.4221271,39.4200588 46.9432358,36.2835615 C47.1123398,35.9349238 47.0874137,35.6498441 46.9253428,35.3141457 C45.4153009,32.1901737 43.676891,29.1995287 41.7078377,26.3441775 C41.6004799,26.1883877 41.3645617,26.0433636 41.1796333,26.0314594 C39.4118499,25.9172826 37.6423083,25.8330216 35.8572526,25.7391337 Z M48.6607533,39.2260721 C47.4864372,41.2792874 46.3831757,43.2085956 45.2120658,45.2562211 C46.9768497,44.9105853 48.6343793,44.5856525 50.4055758,44.2385675 C49.8025933,42.506455 49.244912,40.9044605 48.6607533,39.2260721 Z M23.0016244,39.2754487 C22.4318421,40.946798 21.8814008,42.5620424 21.3046889,44.2540947 C23.0675077,44.5924845 24.715522,44.9088256 26.4601375,45.2436958 C25.2771334,43.2022812 24.174596,41.2996798 23.0016244,39.2754487 Z M53.1183764,28.1695568 C53.0396681,28.2686204 53.0099844,28.2919112 52.9988142,28.322034 C52.1169911,30.7281312 51.2310309,33.1326756 50.3668939,35.5451907 C50.3010105,35.7291364 50.3420712,35.9871987 50.4157116,36.1793221 C50.7483346,37.0469828 51.135981,37.8938371 51.4568132,38.7656385 C52.0204932,40.2974499 52.5497319,41.8419937 53.1454744,43.5280421 C54.7559445,42.8682391 56.3699311,42.27541 57.923516,41.5525664 C59.6933679,40.729003 61.3520352,39.7033787 62.6879052,38.2409221 C63.3470488,37.5193207 63.9216922,36.7360245 63.8629453,35.6856602 C63.8108179,34.7528887 63.2862334,34.0373946 62.6792173,33.3922906 C60.9036769,31.5050095 58.6534041,30.3515445 56.3092191,29.3652558 C55.2542583,28.9213845 54.1649596,28.5589793 53.1183764,28.1695568 Z M18.5304523,28.1543401 C17.2413315,28.6559727 15.929043,29.1155782 14.6593667,29.6722806 C12.5853344,30.5819683 10.6210388,31.6799494 9.03042681,33.3423965 C7.68586893,34.7476094 7.45512211,35.9831616 8.31346718,37.3760563 C8.52828616,37.724694 8.79823201,38.047039 9.08162344,38.3444369 C10.769147,40.1146428 12.8901354,41.2185243 15.0935555,42.1726198 C16.2250526,42.6626587 17.3999894,43.0521848 18.5797872,43.4963666 C18.6635635,43.299171 18.7213795,43.1777482 18.7675082,43.0519778 C19.6026855,40.7759987 20.4429307,38.5017793 21.2596979,36.2192788 C21.3376823,36.0014837 21.3348897,35.7057421 21.2542163,35.4890857 C20.9304881,34.6187335 20.5351881,33.7747777 20.2144593,32.9033904 C19.645401,31.3578115 19.1114047,29.7991897 18.5304523,28.1543401 Z M35.9197634,30.083602 C39.1034726,30.0946538 41.6452631,32.6639526 41.6291233,35.8555002 C41.6129332,39.0429297 39.063866,41.5322338 35.8227738,41.5131943 C32.7804427,41.4950677 30.0964425,39.1061429 30.1172334,35.7841537 C30.1389599,32.3255456 32.980451,30.0732396 35.9197634,30.083602 Z M26.4512428,26.4049406 C24.6884239,26.7467464 23.021379,27.0699195 21.2673515,27.410069 C21.8597844,29.124998 22.4128114,30.7258539 22.9988318,32.4228749 C24.1809051,30.36231 25.2864419,28.4352792 26.4512428,26.4049406 Z M45.2019299,26.3979016 C46.3786249,28.4326913 47.492436,30.3585835 48.6637527,32.3842639 C49.2406715,30.6878639 49.7862517,29.0837992 50.3593436,27.3990964 C48.6149349,27.0603961 46.9581293,26.7387757 45.2019299,26.3979016 Z M47.0888617,11.293545 C45.3745504,11.6381457 43.8643016,12.464504 42.4107311,13.3986212 C40.7859881,14.4425676 39.2924946,15.6538974 37.8552656,17.0058002 C37.9640714,17.1602442 38.0263347,17.2629308 38.1021471,17.3542309 C39.6848986,19.2596271 41.2655815,21.1666796 42.8601238,23.0621384 C42.9773071,23.2014693 43.1863342,23.308193 43.3684701,23.339972 C43.9937929,23.4489731 44.6292517,23.4990742 45.2549882,23.6059014 C47.1642604,23.9318694 49.0708435,24.2739857 51.0190044,24.6170336 C51.0532389,24.4774957 51.1133303,24.2988293 51.1397044,24.1155046 C51.3783117,22.4499521 51.6961445,20.7901964 51.8235672,19.1159486 C51.9742611,17.1365393 51.855216,15.1552667 51.1408421,13.2637415 C50.7219606,12.1542703 50.0544393,11.2764651 48.7737996,11.1691203 C48.2184972,11.1226421 47.6380619,11.1830948 47.0888617,11.293545 Z M20.4426204,13.4766714 C20.0861057,14.519065 19.8528767,15.6544149 19.837466,16.7514644 C19.8124365,18.5337816 19.9767828,20.3224132 20.132855,22.1021425 C20.2084605,22.9646275 20.446861,23.8128275 20.5968309,24.5908444 C23.1906899,24.1687112 25.660229,23.7523748 28.1362841,23.3786865 C28.5235167,23.3200972 28.734302,23.1544736 28.9592569,22.8678412 C30.0112183,21.5278426 31.0796247,20.2004728 32.1599253,18.8831439 C32.6785109,18.2509792 33.2368127,17.6514217 33.8328655,16.9738141 C32.6456209,16.0282067 31.5339818,15.0763885 30.3540806,14.2185617 C28.5360315,12.8968852 26.6226222,11.7017037 24.3675917,11.3106249 C22.2957315,10.9513252 21.1977448,11.2694261 20.4426204,13.4766714 Z M35.7991263,18.9529129 C34.6101234,20.339079 33.5034489,21.6291835 32.3376138,22.9884359 L39.3099738,22.9884359 C38.1091802,21.60817 36.9859572,20.3171339 35.7991263,18.9529129 Z" fill="#04B5E5"></path></svg>React Native</a><a class="amplify-button amplify-field-group__control amplify-button--small docs-framework-link " type="button" href="/swift"><svg class="amplify-icon docs-framework-img" viewBox="0 0 70 70"><g transform="matrix(0.535411, 0, 0, 0.535917, 141.51651, -177.655396)"><path fill="#F05138" d="M-145.9,373.3c0-1.1,0-2.1,0-3.2c-0.1-2.3-0.2-4.7-0.6-7c-0.4-2.3-1.1-4.5-2.2-6.6c-1.1-2.1-2.4-4-4.1-5.6 c-1.7-1.7-3.6-3-5.6-4.1c-2.1-1.1-4.3-1.8-6.6-2.2c-2.3-0.4-4.6-0.6-7-0.6c-1.1,0-2.1,0-3.2,0c-1.3,0-2.5,0-3.8,0h-28.1h-11.6 c-1.3,0-2.5,0-3.8,0c-1.1,0-2.1,0-3.2,0c-0.6,0-1.2,0-1.7,0.1c-1.7,0.1-3.5,0.2-5.2,0.5c-1.7,0.3-3.4,0.8-5,1.4 c-0.5,0.2-1.1,0.5-1.6,0.7c-1.6,0.8-3,1.8-4.4,2.9c-0.4,0.4-0.9,0.8-1.3,1.2c-1.7,1.7-3,3.6-4.1,5.6c-1.1,2.1-1.8,4.3-2.2,6.6 c-0.4,2.3-0.5,4.6-0.6,7c0,1.1,0,2.1,0,3.2c0,1.3,0,2.5,0,3.8v17.3v22.4c0,1.3,0,2.5,0,3.8c0,1.1,0,2.1,0,3.2 c0.1,2.3,0.2,4.7,0.6,7c0.4,2.3,1.1,4.5,2.2,6.6c1.1,2.1,2.4,4,4.1,5.6c1.7,1.7,3.6,3,5.6,4.1c2.1,1.1,4.3,1.8,6.6,2.2 c2.3,0.4,4.6,0.6,7,0.6c1.1,0,2.1,0,3.2,0c1.3,0,2.5,0,3.8,0h39.7c1.3,0,2.5,0,3.8,0c1.1,0,2.1,0,3.2,0c2.3-0.1,4.7-0.2,7-0.6 c2.3-0.4,4.5-1.1,6.6-2.2c2.1-1.1,4-2.4,5.6-4.1c1.7-1.7,3-3.6,4.1-5.6c1.1-2.1,1.8-4.3,2.2-6.6c0.4-2.3,0.6-4.6,0.6-7 c0-1.1,0-2.1,0-3.2c0-1.3,0-2.5,0-3.8v-39.7C-145.9,375.8-145.9,374.6-145.9,373.3z"></path><path fill="#FFFFFF" d="M-168,409.4c0.1-0.4,0.2-0.8,0.3-1.2c4.4-17.5-6.3-38.3-24.5-49.2c8,10.8,11.5,23.9,8.4,35.3 c-0.3,1-0.6,2-1,3c-0.4-0.3-0.9-0.6-1.6-0.9c0,0-18.1-11.2-37.7-30.9c-0.5-0.5,10.5,15.7,22.9,28.8c-5.9-3.3-22.2-15.2-32.6-24.6 c1.3,2.1,2.8,4.2,4.4,6.1c8.6,11,19.9,24.5,33.4,34.9c-9.5,5.8-22.9,6.3-36.2,0c-3.3-1.5-6.4-3.4-9.3-5.5 c5.6,9,14.3,16.8,24.9,21.4c12.6,5.4,25.2,5.1,34.5,0.1l0,0c0,0,0.1,0,0.1-0.1c0.4-0.2,0.8-0.5,1.2-0.7c4.5-2.3,13.3-4.6,18.1,4.6 C-161.3,432.6-158.8,420.6-168,409.4C-168,409.4-168,409.4-168,409.4z"></path></g></svg>Swift</a><a class="amplify-button amplify-field-group__control amplify-button--small docs-framework-link " type="button" href="/vue"><svg class="amplify-icon docs-framework-img" viewBox="0 0 70 70"><g transform="translate(5.000000, 9.000000)"><polygon fill="#3D5269" points="36.8637539 1.171875e-05 29.7655898 12.1603242 22.777582 1.171875e-05 -3.515625e-05 1.171875e-05 29.7655898 51.7968867 59.9999648 1.171875e-05"></polygon><polygon fill="#4AC08E" points="47.8591875 1.171875e-05 29.7655547 30.9975117 11.9527031 1.171875e-05 4.6875e-05 1.171875e-05 29.7655547 51.7968867 59.9999297 1.171875e-05"></polygon></g></svg>Vue</a></div><div class="amplify-accordion"><details class="amplify-accordion__item"><summary class="amplify-accordion__item__trigger"><div style="flex-direction:row;align-items:center;gap:var(--amplify-space-small);padding:var(--amplify-space-small) var(--amplify-space-xs)" class="amplify-flex"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" style="color:var(--amplify-colors-primary-60);height:var(--amplify-font-sizes-large);width:var(--amplify-font-sizes-large)" color="var(--amplify-colors-primary-60)" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M22 7h-9v2h9V7zm0 8h-9v2h9v-2zM5.54 11L2 7.46l1.41-1.41 2.12 2.12 4.24-4.24 1.41 1.41L5.54 11zm0 8L2 15.46l1.41-1.41 2.12 2.12 4.24-4.24 1.41 1.41L5.54 19z"></path></svg><span class="amplify-text">Getting started</span></div><span class="amplify-accordion__item__icon" aria-hidden="true"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z" fill="currentColor"></path></svg></span></span></summary><div class="amplify-accordion__item__content"><a class="docs-secondary-nav-link " href="/react/getting-started/introduction">Introduction</a><a class="docs-secondary-nav-link " href="/react/getting-started/installation">Installation</a><a class="docs-secondary-nav-link " href="/react/getting-started/usage">Usage</a><a class="docs-tertiary-nav-link " href="/react/getting-started/usage/nextjs">Next.js</a><a class="docs-tertiary-nav-link " href="/react/getting-started/usage/vite">Vite</a><a class="docs-secondary-nav-link " href="/react/getting-started/figma">Figma</a><a class="docs-secondary-nav-link " href="/react/getting-started/accessibility">Accessibility</a><a class="docs-secondary-nav-link " href="/react/getting-started/internationalization">Internationalization (i18n)</a><a class="docs-secondary-nav-link " href="/react/getting-started/migration">Migration</a><a class="docs-secondary-nav-link " href="/react/getting-started/troubleshooting">Troubleshooting</a></div></details><details class="amplify-accordion__item"><summary class="amplify-accordion__item__trigger"><div style="flex-direction:row;align-items:center;gap:var(--amplify-space-small);padding:var(--amplify-space-small) var(--amplify-space-xs)" class="amplify-flex"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" style="color:var(--amplify-colors-primary-60);height:var(--amplify-font-sizes-large);width:var(--amplify-font-sizes-large)" color="var(--amplify-colors-primary-60)" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M16.66 4.52l2.83 2.83-2.83 2.83-2.83-2.83 2.83-2.83M9 5v4H5V5h4m10 10v4h-4v-4h4M9 15v4H5v-4h4m7.66-13.31L11 7.34 16.66 13l5.66-5.66-5.66-5.65zM11 3H3v8h8V3zm10 10h-8v8h8v-8zm-10 0H3v8h8v-8z"></path></svg><span class="amplify-text">Components</span></div><span class="amplify-accordion__item__icon" aria-hidden="true"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z" fill="currentColor"></path></svg></span></span></summary><div class="amplify-accordion__item__content"><div class="amplify-flex amplify-collection"><div style="flex-direction:column;gap:0" class="amplify-flex amplify-collection-items"><a class="docs-secondary-nav-link " href="/react/components">Overview</a></div></div><p style="font-size:var(--amplify-font-sizes-xs);font-weight:var(--amplify-font-weights-semibold);text-transform:uppercase;letter-spacing:0.125em;color:var(--amplify-colors-font-tertiary);padding:var(--amplify-space-large) var(--amplify-space-medium) var(--amplify-space-xs) var(--secondary-nav-indent)" class="amplify-text">Base</p><div class="amplify-flex amplify-collection"><div style="flex-direction:column;gap:0" class="amplify-flex amplify-collection-items"><a class="docs-secondary-nav-link " href="/react/components/divider">Divider</a><a class="docs-secondary-nav-link " href="/react/components/heading">Heading</a><a class="docs-secondary-nav-link " href="/react/components/icon">Icon</a><a class="docs-secondary-nav-link " href="/react/components/image">Image</a><a class="docs-secondary-nav-link " href="/react/components/scrollview">ScrollView</a><a class="docs-secondary-nav-link " href="/react/components/text">Text</a><a class="docs-secondary-nav-link " href="/react/components/view">View</a></div></div><p style="font-size:var(--amplify-font-sizes-xs);font-weight:var(--amplify-font-weights-semibold);text-transform:uppercase;letter-spacing:0.125em;color:var(--amplify-colors-font-tertiary);padding:var(--amplify-space-large) var(--amplify-space-medium) var(--amplify-space-xs) var(--secondary-nav-indent)" class="amplify-text">Feedback</p><div class="amplify-flex amplify-collection"><div style="flex-direction:column;gap:0" class="amplify-flex amplify-collection-items"><a class="docs-secondary-nav-link " href="/react/components/alert">Alert</a><a class="docs-secondary-nav-link " href="/react/components/loader">Loader</a><a class="docs-secondary-nav-link " href="/react/components/message">Message</a><a class="docs-secondary-nav-link " href="/react/components/placeholder">Placeholder</a></div></div><p style="font-size:var(--amplify-font-sizes-xs);font-weight:var(--amplify-font-weights-semibold);text-transform:uppercase;letter-spacing:0.125em;color:var(--amplify-colors-font-tertiary);padding:var(--amplify-space-large) var(--amplify-space-medium) var(--amplify-space-xs) var(--secondary-nav-indent)" class="amplify-text">Navigation</p><div class="amplify-flex amplify-collection"><div style="flex-direction:column;gap:0" class="amplify-flex amplify-collection-items"><a class="docs-secondary-nav-link " href="/react/components/breadcrumbs">Breadcrumbs</a><a class="docs-secondary-nav-link " href="/react/components/link">Link</a><a class="docs-secondary-nav-link " href="/react/components/menu">Menu</a><a class="docs-secondary-nav-link " href="/react/components/tabs">Tabs</a></div></div><p style="font-size:var(--amplify-font-sizes-xs);font-weight:var(--amplify-font-weights-semibold);text-transform:uppercase;letter-spacing:0.125em;color:var(--amplify-colors-font-tertiary);padding:var(--amplify-space-large) var(--amplify-space-medium) var(--amplify-space-xs) var(--secondary-nav-indent)" class="amplify-text">Inputs</p><div class="amplify-flex amplify-collection"><div style="flex-direction:column;gap:0" class="amplify-flex amplify-collection-items"><a class="docs-secondary-nav-link " href="/react/components/autocomplete">Autocomplete</a><a class="docs-secondary-nav-link " href="/react/components/button">Button</a><a class="docs-secondary-nav-link " href="/react/components/checkboxfield">Checkbox Field</a><a class="docs-secondary-nav-link " href="/react/components/dropzone">DropZone</a><a class="docs-secondary-nav-link " href="/react/components/fieldset">Fieldset</a><a class="docs-secondary-nav-link " href="/react/components/input">Input</a><a class="docs-secondary-nav-link " href="/react/components/label">Label</a><a class="docs-secondary-nav-link " href="/react/components/passwordfield">Password Field</a><a class="docs-secondary-nav-link " href="/react/components/phonenumberfield">Phone Number Field</a><a class="docs-secondary-nav-link " href="/react/components/radiogroupfield">Radio Group Field</a><a class="docs-secondary-nav-link " href="/react/components/searchfield">Search Field</a><a class="docs-secondary-nav-link " href="/react/components/selectfield">Select Field</a><a class="docs-secondary-nav-link " href="/react/components/sliderfield">Slider Field</a><a class="docs-secondary-nav-link " href="/react/components/stepperfield">Stepper Field</a><a class="docs-secondary-nav-link " href="/react/components/switchfield">Switch Field</a><a class="docs-secondary-nav-link " href="/react/components/textfield">Text Field</a><a class="docs-secondary-nav-link " href="/react/components/textareafield">TextArea Field</a><a class="docs-secondary-nav-link " href="/react/components/togglebutton">Toggle Button</a></div></div><p style="font-size:var(--amplify-font-sizes-xs);font-weight:var(--amplify-font-weights-semibold);text-transform:uppercase;letter-spacing:0.125em;color:var(--amplify-colors-font-tertiary);padding:var(--amplify-space-large) var(--amplify-space-medium) var(--amplify-space-xs) var(--secondary-nav-indent)" class="amplify-text">Layout</p><div class="amplify-flex amplify-collection"><div style="flex-direction:column;gap:0" class="amplify-flex amplify-collection-items"><a class="docs-secondary-nav-link " href="/react/components/accordion">Accordion</a><a class="docs-secondary-nav-link " href="/react/components/card">Card</a><a class="docs-secondary-nav-link " href="/react/components/collection">Collection</a><a class="docs-secondary-nav-link " href="/react/components/flex">Flex</a><a class="docs-secondary-nav-link " href="/react/components/grid">Grid</a><a class="docs-secondary-nav-link " href="/react/components/pagination">Pagination</a><a class="docs-secondary-nav-link " href="/react/components/table">Table</a></div></div><p style="font-size:var(--amplify-font-sizes-xs);font-weight:var(--amplify-font-weights-semibold);text-transform:uppercase;letter-spacing:0.125em;color:var(--amplify-colors-font-tertiary);padding:var(--amplify-space-large) var(--amplify-space-medium) var(--amplify-space-xs) var(--secondary-nav-indent)" class="amplify-text">Data display</p><div class="amplify-flex amplify-collection"><div style="flex-direction:column;gap:0" class="amplify-flex amplify-collection-items"><a class="docs-secondary-nav-link " href="/react/components/avatar">Avatar</a><a class="docs-secondary-nav-link " href="/react/components/badge">Badge</a><a class="docs-secondary-nav-link " href="/react/components/rating">Rating</a></div></div><p style="font-size:var(--amplify-font-sizes-xs);font-weight:var(--amplify-font-weights-semibold);text-transform:uppercase;letter-spacing:0.125em;color:var(--amplify-colors-font-tertiary);padding:var(--amplify-space-large) var(--amplify-space-medium) var(--amplify-space-xs) var(--secondary-nav-indent)" class="amplify-text">Utilities</p><div class="amplify-flex amplify-collection"><div style="flex-direction:column;gap:0" class="amplify-flex amplify-collection-items"><a class="docs-secondary-nav-link " href="/react/components/highlightmatch">Highlight Match</a><a class="docs-secondary-nav-link " href="/react/components/visuallyhidden">Visually Hidden</a></div></div></div></details><details class="amplify-accordion__item"><summary class="amplify-accordion__item__trigger"><div style="flex-direction:row;align-items:center;gap:var(--amplify-space-small);padding:var(--amplify-space-small) var(--amplify-space-xs)" class="amplify-flex"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" style="color:var(--amplify-colors-primary-60);height:var(--amplify-font-sizes-large);width:var(--amplify-font-sizes-large)" color="var(--amplify-colors-primary-60)" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M16 9v4.66l-3.5 3.51V19h-1v-1.83L8 13.65V9h8m0-6h-2v4h-4V3H8v4h-.01C6.9 6.99 6 7.89 6 8.98v5.52L9.5 18v3h5v-3l3.5-3.51V9c0-1.1-.9-2-2-2V3z"></path></svg><span class="amplify-text">Connected components</span></div><span class="amplify-accordion__item__icon" aria-hidden="true"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z" fill="currentColor"></path></svg></span></span></summary><div class="amplify-accordion__item__content"><a class="docs-secondary-nav-link " href="/react/connected-components/authenticator">Authenticator</a><a class="docs-tertiary-nav-link " href="/react/connected-components/authenticator/configuration">Configuration</a><a class="docs-tertiary-nav-link " href="/react/connected-components/authenticator/customization">Customization</a><a class="docs-tertiary-nav-link " href="/react/connected-components/authenticator/advanced">Advanced Usage</a><a class="docs-secondary-nav-link " href="/react/connected-components/account-settings">Account Settings</a><a class="docs-tertiary-nav-link " href="/react/connected-components/account-settings/change-password">Change Password</a><a class="docs-tertiary-nav-link " href="/react/connected-components/account-settings/delete-user">Delete User</a><a class="docs-secondary-nav-link " href="/react/connected-components/liveness">Face Liveness</a><a class="docs-tertiary-nav-link " href="/react/connected-components/liveness/customization">Customization</a><a class="docs-tertiary-nav-link " href="/react/connected-components/liveness/troubleshooting">Troubleshooting</a><a class="docs-secondary-nav-link " href="/react/connected-components/geo">Geo</a><a class="docs-secondary-nav-link " href="/react/connected-components/storage">Storage</a><a class="docs-tertiary-nav-link " href="/react/connected-components/storage/storageimage">Storage Image</a><a class="docs-tertiary-nav-link " href="/react/connected-components/storage/fileuploader">File Uploader</a><a class="docs-secondary-nav-link " href="/react/connected-components/in-app-messaging">In-App Messaging</a></div></details><details class="amplify-accordion__item"><summary class="amplify-accordion__item__trigger"><div style="flex-direction:row;align-items:center;gap:var(--amplify-space-small);padding:var(--amplify-space-small) var(--amplify-space-xs)" class="amplify-flex"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" style="color:var(--amplify-colors-primary-60);height:var(--amplify-font-sizes-large);width:var(--amplify-font-sizes-large)" color="var(--amplify-colors-primary-60)" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M19 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25zM11.5 9.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zm-1.51 3.49L9 15.17l-.99-2.18L5.83 12l2.18-.99L9 8.83l.99 2.18 2.18.99-2.18.99z"></path></svg><span class="amplify-text">Theming</span></div><span class="amplify-accordion__item__icon" aria-hidden="true"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z" fill="currentColor"></path></svg></span></span></summary><div class="amplify-accordion__item__content"><a class="docs-secondary-nav-link " href="/react/theming">Overview</a><a class="docs-secondary-nav-link " href="/react/theming/responsive">Responsive</a><a class="docs-secondary-nav-link " href="/react/theming/default-theme">Default Theme</a><a class="docs-tertiary-nav-link " href="/react/theming/default-theme/colors">Colors</a><a class="docs-tertiary-nav-link " href="/react/theming/default-theme/typography">Typography</a><a class="docs-tertiary-nav-link " href="/react/theming/default-theme/sizes">Sizes</a><a class="docs-secondary-nav-link " href="/react/theming/icons">Icons</a><a class="docs-secondary-nav-link " href="/react/theming/theme-provider">ThemeProvider</a><a class="docs-secondary-nav-link " href="/react/theming/dark-mode">Dark mode</a><a class="docs-secondary-nav-link " href="/react/theming/css-variables">CSS variables</a><a class="docs-secondary-nav-link " href="/react/theming/style-props">Style Props</a></div></details><details class="amplify-accordion__item"><summary class="amplify-accordion__item__trigger"><div style="flex-direction:row;align-items:center;gap:var(--amplify-space-small);padding:var(--amplify-space-small) var(--amplify-space-xs)" class="amplify-flex"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" style="color:var(--amplify-colors-primary-60);height:var(--amplify-font-sizes-large);width:var(--amplify-font-sizes-large)" color="var(--amplify-colors-primary-60)" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path><path d="M14 17H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"></path></svg><span class="amplify-text">Guides</span></div><span class="amplify-accordion__item__icon" aria-hidden="true"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z" fill="currentColor"></path></svg></span></span></summary><div class="amplify-accordion__item__content"><a class="docs-secondary-nav-link " href="/react/guides">Overview</a><a class="docs-secondary-nav-link " href="/react/guides/css-in-js">CSS in JS</a></div></details></div></div></div></aside><a class="docs-logo-link" href="/react">Amplify UI</a><svg style="height:1.5rem;width:1.5rem" class="amplify-icon docs-logo-framework" viewBox="0 0 70 70" alt="react"><path d="M23.9381606,8.33333333 C23.9952526,8.36500885 24.0500692,8.41873301 24.1098503,8.42504741 C25.8858045,8.61240913 27.5036179,9.26838219 29.0614433,10.0983636 C31.4167985,11.353273 33.5117231,12.9699666 35.4737433,14.7655337 C35.734691,15.0044457 35.9078286,15.0086898 36.1660872,14.7697778 C36.7596578,14.220839 37.3629506,13.6798708 37.9911694,13.1711993 C40.2231355,11.363935 42.5842825,9.76939364 45.3432119,8.8632254 C45.9569508,8.66157865 46.5868245,8.50868734 47.2093548,8.33333333 L49.2779054,8.33333333 C49.4366667,8.38136418 49.5934628,8.4375727 49.7544995,8.47608019 C51.7478582,8.95235162 52.9516512,10.3068423 53.684849,12.1186612 C54.6356583,14.4680322 54.8064171,16.9408964 54.5817725,19.4330143 C54.4016018,21.4320914 54.0968009,23.4197819 53.8434034,25.4445307 C54.9392181,25.8537245 56.1365986,26.2699574 57.3101908,26.7451937 C59.8480955,27.7728882 62.2518547,29.0453952 64.2383873,30.9676643 C65.6857521,32.3683226 66.7701898,33.9776666 66.6587983,36.1301526 C66.5858819,37.5377463 65.9558014,38.7052893 65.085769,39.7621751 C63.4482009,41.7513148 61.3192487,43.0861376 59.019641,44.1388828 C57.4121703,44.8748727 55.7301284,45.448034 54.081597,46.0941731 C54.0037161,46.12471 53.9269729,46.1582488 53.8192014,46.2031742 C53.9803415,47.0578956 54.1625808,47.8954335 54.2931063,48.7410456 C54.7762163,51.8691582 55.0428525,55.0001693 54.2408754,58.1206218 C53.8936692,59.472007 53.3557426,60.7310571 52.3458762,61.7383592 C51.0525149,63.0283602 49.4673846,63.4245112 47.7030144,63.230421 C44.747159,62.9051776 42.2457642,61.4973769 39.8857549,59.8212658 C38.611114,58.9159257 37.4366944,57.8690809 36.2168701,56.8862082 C36.112098,56.8017402 36.0064985,56.7181003 35.9005887,56.6334252 C34.9124421,57.452848 33.9680453,58.2811732 32.9768993,59.0489422 C30.7164907,60.7997909 28.3175925,62.311624 25.5072597,63.0242196 C23.9811865,63.4111578 22.4440466,63.5204694 20.956345,62.8440004 C19.1093361,62.0040816 18.1917271,60.4106789 17.6462503,58.5734989 C16.9090189,56.0911113 16.8683719,53.5478571 17.194272,50.9990131 C17.3859232,49.4998088 17.6420098,48.0081611 17.9047157,46.5195153 C17.9802178,46.0916888 17.6738655,46.1252275 17.463287,46.0375505 C15.4954748,45.2189558 13.4784312,44.5024266 11.5672973,43.5682059 C9.41972803,42.5182556 7.47953101,41.132193 6.10342773,39.1042352 C4.57487227,36.8513399 4.63651507,34.468016 6.27532428,32.2912041 C7.54324236,30.6072259 9.20563305,29.3896853 11.0175799,28.3619907 C13.0014234,27.2367853 15.0933486,26.3556676 17.2732906,25.692552 C17.7657091,25.5427662 17.9025437,25.3547834 17.7792581,24.8184734 C17.1312846,22.0020437 16.8325859,19.1417238 17.0262023,16.2552146 C17.1715179,14.0867874 17.6126364,11.9859553 19.0529681,10.2388331 C19.8918688,9.22138648 20.9799264,8.65412558 22.2689437,8.44336953 C22.3801283,8.42525444 22.485521,8.37090919 22.5936028,8.33333333 L23.9381606,8.33333333 Z M20.6427527,47.026013 C20.0319097,49.8918192 19.5623487,52.7800881 19.9362392,55.716802 C20.0754527,56.8096073 20.3964918,57.9047935 20.8055476,58.9306248 C21.2462523,60.0355414 22.1892011,60.6122221 23.4011649,60.4938012 C24.23024,60.4127492 25.0744155,60.2600649 25.8582927,59.9860613 C28.1132197,59.1981069 30.0425569,57.8386476 31.8778784,56.3422382 C32.5394009,55.8029262 33.1729979,55.2293509 33.7930459,54.6940761 C33.7500201,54.5725498 33.746607,54.5343528 33.7263352,54.5100269 C32.0830786,52.5205766 30.4420974,50.5290561 28.785809,48.5504749 C28.6710044,48.4134214 28.4480146,48.326469 28.2625691,48.2967602 C27.5849119,48.1884838 26.897636,48.1386932 26.2216336,48.0225496 C24.3787619,47.7057945 22.5400273,47.3665766 20.6427527,47.026013 Z M51.0746484,47.0291185 C48.8315122,47.4157461 46.6885972,47.8189361 44.5333743,48.140453 C43.6378988,48.2740905 42.9171123,48.4119722 42.3004774,49.2696955 C40.9669863,51.1248871 39.4385342,52.8396091 37.9088411,54.7108455 C39.0017598,55.5847171 40.0977813,56.5260804 41.2607204,57.375626 C43.0903534,58.7124157 45.0185529,59.8996265 47.2867186,60.3294198 C49.2293979,60.6974148 50.4519113,60.4188565 51.2097248,58.2469098 C51.5671703,57.2223207 51.7539605,56.1109862 51.8407362,55.0247023 C51.9892581,53.1674404 51.8599737,51.3060379 51.5461745,49.4652349 C51.4031343,48.6257302 51.2234807,47.7925398 51.0746484,47.0291185 Z M39.334693,48.6527475 L32.3443365,48.6527475 C33.5497844,50.0378786 34.6738348,51.3291217 35.868733,52.702245 C37.0591839,51.3113172 38.1661688,50.0179002 39.334693,48.6527475 Z M35.8572526,25.7391337 C34.0795402,25.8334356 32.2928296,25.9200775 30.5077739,26.0343578 C30.3188118,26.0463655 30.0715166,26.1728605 29.9668479,26.3255448 C27.9562167,29.2578075 26.1927774,32.3339557 24.6793223,35.5517121 C24.6033031,35.7132986 24.584893,35.968359 24.6581197,36.1241487 C26.1774701,39.3589851 27.9665595,42.4399985 30.0036681,45.3751596 C30.112267,45.5316739 30.3553217,45.6704872 30.5446975,45.6830125 C31.9345567,45.774623 33.3272084,45.8945967 34.7181018,45.8854874 C36.8508809,45.8718234 38.9834531,45.7716211 41.1148876,45.6773192 C41.328362,45.6678993 41.605341,45.4965824 41.730178,45.3156386 C43.7089535,42.4451742 45.4221271,39.4200588 46.9432358,36.2835615 C47.1123398,35.9349238 47.0874137,35.6498441 46.9253428,35.3141457 C45.4153009,32.1901737 43.676891,29.1995287 41.7078377,26.3441775 C41.6004799,26.1883877 41.3645617,26.0433636 41.1796333,26.0314594 C39.4118499,25.9172826 37.6423083,25.8330216 35.8572526,25.7391337 Z M48.6607533,39.2260721 C47.4864372,41.2792874 46.3831757,43.2085956 45.2120658,45.2562211 C46.9768497,44.9105853 48.6343793,44.5856525 50.4055758,44.2385675 C49.8025933,42.506455 49.244912,40.9044605 48.6607533,39.2260721 Z M23.0016244,39.2754487 C22.4318421,40.946798 21.8814008,42.5620424 21.3046889,44.2540947 C23.0675077,44.5924845 24.715522,44.9088256 26.4601375,45.2436958 C25.2771334,43.2022812 24.174596,41.2996798 23.0016244,39.2754487 Z M53.1183764,28.1695568 C53.0396681,28.2686204 53.0099844,28.2919112 52.9988142,28.322034 C52.1169911,30.7281312 51.2310309,33.1326756 50.3668939,35.5451907 C50.3010105,35.7291364 50.3420712,35.9871987 50.4157116,36.1793221 C50.7483346,37.0469828 51.135981,37.8938371 51.4568132,38.7656385 C52.0204932,40.2974499 52.5497319,41.8419937 53.1454744,43.5280421 C54.7559445,42.8682391 56.3699311,42.27541 57.923516,41.5525664 C59.6933679,40.729003 61.3520352,39.7033787 62.6879052,38.2409221 C63.3470488,37.5193207 63.9216922,36.7360245 63.8629453,35.6856602 C63.8108179,34.7528887 63.2862334,34.0373946 62.6792173,33.3922906 C60.9036769,31.5050095 58.6534041,30.3515445 56.3092191,29.3652558 C55.2542583,28.9213845 54.1649596,28.5589793 53.1183764,28.1695568 Z M18.5304523,28.1543401 C17.2413315,28.6559727 15.929043,29.1155782 14.6593667,29.6722806 C12.5853344,30.5819683 10.6210388,31.6799494 9.03042681,33.3423965 C7.68586893,34.7476094 7.45512211,35.9831616 8.31346718,37.3760563 C8.52828616,37.724694 8.79823201,38.047039 9.08162344,38.3444369 C10.769147,40.1146428 12.8901354,41.2185243 15.0935555,42.1726198 C16.2250526,42.6626587 17.3999894,43.0521848 18.5797872,43.4963666 C18.6635635,43.299171 18.7213795,43.1777482 18.7675082,43.0519778 C19.6026855,40.7759987 20.4429307,38.5017793 21.2596979,36.2192788 C21.3376823,36.0014837 21.3348897,35.7057421 21.2542163,35.4890857 C20.9304881,34.6187335 20.5351881,33.7747777 20.2144593,32.9033904 C19.645401,31.3578115 19.1114047,29.7991897 18.5304523,28.1543401 Z M35.9197634,30.083602 C39.1034726,30.0946538 41.6452631,32.6639526 41.6291233,35.8555002 C41.6129332,39.0429297 39.063866,41.5322338 35.8227738,41.5131943 C32.7804427,41.4950677 30.0964425,39.1061429 30.1172334,35.7841537 C30.1389599,32.3255456 32.980451,30.0732396 35.9197634,30.083602 Z M26.4512428,26.4049406 C24.6884239,26.7467464 23.021379,27.0699195 21.2673515,27.410069 C21.8597844,29.124998 22.4128114,30.7258539 22.9988318,32.4228749 C24.1809051,30.36231 25.2864419,28.4352792 26.4512428,26.4049406 Z M45.2019299,26.3979016 C46.3786249,28.4326913 47.492436,30.3585835 48.6637527,32.3842639 C49.2406715,30.6878639 49.7862517,29.0837992 50.3593436,27.3990964 C48.6149349,27.0603961 46.9581293,26.7387757 45.2019299,26.3979016 Z M47.0888617,11.293545 C45.3745504,11.6381457 43.8643016,12.464504 42.4107311,13.3986212 C40.7859881,14.4425676 39.2924946,15.6538974 37.8552656,17.0058002 C37.9640714,17.1602442 38.0263347,17.2629308 38.1021471,17.3542309 C39.6848986,19.2596271 41.2655815,21.1666796 42.8601238,23.0621384 C42.9773071,23.2014693 43.1863342,23.308193 43.3684701,23.339972 C43.9937929,23.4489731 44.6292517,23.4990742 45.2549882,23.6059014 C47.1642604,23.9318694 49.0708435,24.2739857 51.0190044,24.6170336 C51.0532389,24.4774957 51.1133303,24.2988293 51.1397044,24.1155046 C51.3783117,22.4499521 51.6961445,20.7901964 51.8235672,19.1159486 C51.9742611,17.1365393 51.855216,15.1552667 51.1408421,13.2637415 C50.7219606,12.1542703 50.0544393,11.2764651 48.7737996,11.1691203 C48.2184972,11.1226421 47.6380619,11.1830948 47.0888617,11.293545 Z M20.4426204,13.4766714 C20.0861057,14.519065 19.8528767,15.6544149 19.837466,16.7514644 C19.8124365,18.5337816 19.9767828,20.3224132 20.132855,22.1021425 C20.2084605,22.9646275 20.446861,23.8128275 20.5968309,24.5908444 C23.1906899,24.1687112 25.660229,23.7523748 28.1362841,23.3786865 C28.5235167,23.3200972 28.734302,23.1544736 28.9592569,22.8678412 C30.0112183,21.5278426 31.0796247,20.2004728 32.1599253,18.8831439 C32.6785109,18.2509792 33.2368127,17.6514217 33.8328655,16.9738141 C32.6456209,16.0282067 31.5339818,15.0763885 30.3540806,14.2185617 C28.5360315,12.8968852 26.6226222,11.7017037 24.3675917,11.3106249 C22.2957315,10.9513252 21.1977448,11.2694261 20.4426204,13.4766714 Z M35.7991263,18.9529129 C34.6101234,20.339079 33.5034489,21.6291835 32.3376138,22.9884359 L39.3099738,22.9884359 C38.1091802,21.60817 36.9859572,20.3171339 35.7991263,18.9529129 Z" fill="#04B5E5"></path></svg><div style="flex:1;justify-content:flex-end;gap:var(--amplify-space-small)" class="amplify-flex"><div aria-label="color-switcher" style="align-items:stretch" class="amplify-flex amplify-togglebuttongroup color-switcher" role="group"><button class="amplify-button amplify-field-group__control amplify-button--small amplify-togglebutton" type="button" aria-pressed="false" title="Light mode"><span class="amplify-visually-hidden">Light mode</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="docs-header-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"></path></svg></button><button class="amplify-button amplify-field-group__control amplify-button--small amplify-togglebutton" type="button" aria-pressed="false" title="Dark mode"><span class="amplify-visually-hidden">Dark mode</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="docs-header-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12.34 2.02C6.59 1.82 2 6.42 2 12c0 5.52 4.48 10 10 10 3.71 0 6.93-2.02 8.66-5.02-7.51-.25-12.09-8.43-8.32-14.96z"></path></svg></button><button class="amplify-button amplify-field-group__control amplify-button--small amplify-togglebutton amplify-togglebutton--pressed" type="button" aria-pressed="true" title="System preferences"><span class="amplify-visually-hidden">System preference</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="docs-header-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93s3.05-7.44 7-7.93v15.86zm2-15.86c1.03.13 2 .45 2.87.93H13v-.93zM13 7h5.24c.25.31.48.65.68 1H13V7zm0 3h6.74c.08.33.15.66.19 1H13v-1zm0 9.93V19h2.87c-.87.48-1.84.8-2.87.93zM18.24 17H13v-1h5.92c-.2.35-.43.69-.68 1zm1.5-3H13v-1h6.93c-.04.34-.11.67-.19 1z"></path></svg></button></div></div></header><div class="docs-main"><div class="docs-sidebar-spacer collapsed"></div><main class="docs-content-body" id="docs-content" tabindex="-1" aria-label="Main content"><section class="docs-hero"><div style="justify-content:center;text-align:center" class="amplify-flex"><div style="flex-direction:column;align-items:center" class="amplify-flex docs-home-subsection--thin"><h1 style="margin-block-end:0" class="amplify-heading amplify-heading--1 expand-out shown">Themeable, accessible components<br/><strong>Ready to connect to the cloud</strong></h1><p style="font-size:var(--amplify-font-sizes-large)" class="amplify-text">Amplify UI is a collection of accessible, themeable, performant React <span style="display:inline-block">(and more!<a href="/android"><svg style="margin-inline-start:var(--amplify-space-xxs)" class="amplify-icon" viewBox="0 0 40 34"><g transform="scale(0.03, 0.036) translate(0,75)"><path d="M930.77,536.42a53.07,53.07,0,1,1,53.06-53.08,53.14,53.14,0,0,1-53.06,53.08m-586.54,0a53.07,53.07,0,1,1,53.06-53.08,53.13,53.13,0,0,1-53.06,53.08M949.8,216.77,1055.85,33.09A22.06,22.06,0,1,0,1017.64,11L910.25,197c-82.12-37.48-174.35-58.35-272.76-58.35S446.86,159.55,364.74,197L257.36,11a22.06,22.06,0,1,0-38.22,22.06L325.2,216.77C143.09,315.82,18.53,500.18.31,718H1274.69c-18.24-217.82-142.79-402.18-324.89-501.23" fill="#3ddc84"></path></g></svg></a><a href="/angular"><svg style="margin-inline-start:var(--amplify-space-xxs)" class="amplify-icon" viewBox="0 0 70 70"><g transform="translate(10.000000, 8.000000)"><polygon fill="#000000" points="25.2197802 -0.000168131868 0 8.96686484 3.92307692 42.0333593 25.2197802 53.8020297 46.7967033 41.892689 51 8.82675495"></polygon><polygon fill="#DE3641" points="25.2197802 -0.000168131868 0 8.96686484 3.92307692 42.0333593 25.2197802 53.8020297"></polygon><polygon fill="#B13138" points="25.2197802 -0.000168131868 25.2197802 53.8020297 46.7967033 41.892689 51 8.82675495"></polygon><polygon fill="#FFFFFF" points="25.2197802 6.02472527 41.6126374 41.0521978 36.0082418 41.0521978 32.5054945 33.0659341 25.2197802 33.0659341 25.2197802 28.3021978 30.543956 28.3021978 25.2197802 17.2895604 20.7362637 28.3021978 25.2197802 28.3021978 25.2197802 33.0659341 18.5505495 33.0659341 15.4120879 41.0521978 9.38736264 41.0521978"></polygon></g></svg></a><a href="/flutter"><svg style="margin-inline-start:var(--amplify-space-xxs)" class="amplify-icon" viewBox="0 0 44 44"><g transform="scale(0.8) translate(5,5)"><path d="M37.0631 20.0376H23.7056L12.0195 31.7265L18.6969 38.4038L37.0631 20.0376Z" fill="#54C5F8"></path><path d="M8.68014 28.3864L2 21.7063L23.7063 0H37.0638L8.68014 28.3864Z" fill="#54C5F8"></path><path d="M18.6975 38.4039L23.7062 43.4126H37.0637L25.3749 31.7266L18.6975 38.4039Z" fill="#01579B"></path><path d="M18.6966 25.0456L12.019 31.7231L18.6966 38.4007L25.3741 31.7231L18.6966 25.0456Z" fill="#29B6F6"></path></g></svg></a><a href="/react"><svg style="margin-inline-start:var(--amplify-space-xxs)" class="amplify-icon" viewBox="0 0 70 70"><path d="M23.9381606,8.33333333 C23.9952526,8.36500885 24.0500692,8.41873301 24.1098503,8.42504741 C25.8858045,8.61240913 27.5036179,9.26838219 29.0614433,10.0983636 C31.4167985,11.353273 33.5117231,12.9699666 35.4737433,14.7655337 C35.734691,15.0044457 35.9078286,15.0086898 36.1660872,14.7697778 C36.7596578,14.220839 37.3629506,13.6798708 37.9911694,13.1711993 C40.2231355,11.363935 42.5842825,9.76939364 45.3432119,8.8632254 C45.9569508,8.66157865 46.5868245,8.50868734 47.2093548,8.33333333 L49.2779054,8.33333333 C49.4366667,8.38136418 49.5934628,8.4375727 49.7544995,8.47608019 C51.7478582,8.95235162 52.9516512,10.3068423 53.684849,12.1186612 C54.6356583,14.4680322 54.8064171,16.9408964 54.5817725,19.4330143 C54.4016018,21.4320914 54.0968009,23.4197819 53.8434034,25.4445307 C54.9392181,25.8537245 56.1365986,26.2699574 57.3101908,26.7451937 C59.8480955,27.7728882 62.2518547,29.0453952 64.2383873,30.9676643 C65.6857521,32.3683226 66.7701898,33.9776666 66.6587983,36.1301526 C66.5858819,37.5377463 65.9558014,38.7052893 65.085769,39.7621751 C63.4482009,41.7513148 61.3192487,43.0861376 59.019641,44.1388828 C57.4121703,44.8748727 55.7301284,45.448034 54.081597,46.0941731 C54.0037161,46.12471 53.9269729,46.1582488 53.8192014,46.2031742 C53.9803415,47.0578956 54.1625808,47.8954335 54.2931063,48.7410456 C54.7762163,51.8691582 55.0428525,55.0001693 54.2408754,58.1206218 C53.8936692,59.472007 53.3557426,60.7310571 52.3458762,61.7383592 C51.0525149,63.0283602 49.4673846,63.4245112 47.7030144,63.230421 C44.747159,62.9051776 42.2457642,61.4973769 39.8857549,59.8212658 C38.611114,58.9159257 37.4366944,57.8690809 36.2168701,56.8862082 C36.112098,56.8017402 36.0064985,56.7181003 35.9005887,56.6334252 C34.9124421,57.452848 33.9680453,58.2811732 32.9768993,59.0489422 C30.7164907,60.7997909 28.3175925,62.311624 25.5072597,63.0242196 C23.9811865,63.4111578 22.4440466,63.5204694 20.956345,62.8440004 C19.1093361,62.0040816 18.1917271,60.4106789 17.6462503,58.5734989 C16.9090189,56.0911113 16.8683719,53.5478571 17.194272,50.9990131 C17.3859232,49.4998088 17.6420098,48.0081611 17.9047157,46.5195153 C17.9802178,46.0916888 17.6738655,46.1252275 17.463287,46.0375505 C15.4954748,45.2189558 13.4784312,44.5024266 11.5672973,43.5682059 C9.41972803,42.5182556 7.47953101,41.132193 6.10342773,39.1042352 C4.57487227,36.8513399 4.63651507,34.468016 6.27532428,32.2912041 C7.54324236,30.6072259 9.20563305,29.3896853 11.0175799,28.3619907 C13.0014234,27.2367853 15.0933486,26.3556676 17.2732906,25.692552 C17.7657091,25.5427662 17.9025437,25.3547834 17.7792581,24.8184734 C17.1312846,22.0020437 16.8325859,19.1417238 17.0262023,16.2552146 C17.1715179,14.0867874 17.6126364,11.9859553 19.0529681,10.2388331 C19.8918688,9.22138648 20.9799264,8.65412558 22.2689437,8.44336953 C22.3801283,8.42525444 22.485521,8.37090919 22.5936028,8.33333333 L23.9381606,8.33333333 Z M20.6427527,47.026013 C20.0319097,49.8918192 19.5623487,52.7800881 19.9362392,55.716802 C20.0754527,56.8096073 20.3964918,57.9047935 20.8055476,58.9306248 C21.2462523,60.0355414 22.1892011,60.6122221 23.4011649,60.4938012 C24.23024,60.4127492 25.0744155,60.2600649 25.8582927,59.9860613 C28.1132197,59.1981069 30.0425569,57.8386476 31.8778784,56.3422382 C32.5394009,55.8029262 33.1729979,55.2293509 33.7930459,54.6940761 C33.7500201,54.5725498 33.746607,54.5343528 33.7263352,54.5100269 C32.0830786,52.5205766 30.4420974,50.5290561 28.785809,48.5504749 C28.6710044,48.4134214 28.4480146,48.326469 28.2625691,48.2967602 C27.5849119,48.1884838 26.897636,48.1386932 26.2216336,48.0225496 C24.3787619,47.7057945 22.5400273,47.3665766 20.6427527,47.026013 Z M51.0746484,47.0291185 C48.8315122,47.4157461 46.6885972,47.8189361 44.5333743,48.140453 C43.6378988,48.2740905 42.9171123,48.4119722 42.3004774,49.2696955 C40.9669863,51.1248871 39.4385342,52.8396091 37.9088411,54.7108455 C39.0017598,55.5847171 40.0977813,56.5260804 41.2607204,57.375626 C43.0903534,58.7124157 45.0185529,59.8996265 47.2867186,60.3294198 C49.2293979,60.6974148 50.4519113,60.4188565 51.2097248,58.2469098 C51.5671703,57.2223207 51.7539605,56.1109862 51.8407362,55.0247023 C51.9892581,53.1674404 51.8599737,51.3060379 51.5461745,49.4652349 C51.4031343,48.6257302 51.2234807,47.7925398 51.0746484,47.0291185 Z M39.334693,48.6527475 L32.3443365,48.6527475 C33.5497844,50.0378786 34.6738348,51.3291217 35.868733,52.702245 C37.0591839,51.3113172 38.1661688,50.0179002 39.334693,48.6527475 Z M35.8572526,25.7391337 C34.0795402,25.8334356 32.2928296,25.9200775 30.5077739,26.0343578 C30.3188118,26.0463655 30.0715166,26.1728605 29.9668479,26.3255448 C27.9562167,29.2578075 26.1927774,32.3339557 24.6793223,35.5517121 C24.6033031,35.7132986 24.584893,35.968359 24.6581197,36.1241487 C26.1774701,39.3589851 27.9665595,42.4399985 30.0036681,45.3751596 C30.112267,45.5316739 30.3553217,45.6704872 30.5446975,45.6830125 C31.9345567,45.774623 33.3272084,45.8945967 34.7181018,45.8854874 C36.8508809,45.8718234 38.9834531,45.7716211 41.1148876,45.6773192 C41.328362,45.6678993 41.605341,45.4965824 41.730178,45.3156386 C43.7089535,42.4451742 45.4221271,39.4200588 46.9432358,36.2835615 C47.1123398,35.9349238 47.0874137,35.6498441 46.9253428,35.3141457 C45.4153009,32.1901737 43.676891,29.1995287 41.7078377,26.3441775 C41.6004799,26.1883877 41.3645617,26.0433636 41.1796333,26.0314594 C39.4118499,25.9172826 37.6423083,25.8330216 35.8572526,25.7391337 Z M48.6607533,39.2260721 C47.4864372,41.2792874 46.3831757,43.2085956 45.2120658,45.2562211 C46.9768497,44.9105853 48.6343793,44.5856525 50.4055758,44.2385675 C49.8025933,42.506455 49.244912,40.9044605 48.6607533,39.2260721 Z M23.0016244,39.2754487 C22.4318421,40.946798 21.8814008,42.5620424 21.3046889,44.2540947 C23.0675077,44.5924845 24.715522,44.9088256 26.4601375,45.2436958 C25.2771334,43.2022812 24.174596,41.2996798 23.0016244,39.2754487 Z M53.1183764,28.1695568 C53.0396681,28.2686204 53.0099844,28.2919112 52.9988142,28.322034 C52.1169911,30.7281312 51.2310309,33.1326756 50.3668939,35.5451907 C50.3010105,35.7291364 50.3420712,35.9871987 50.4157116,36.1793221 C50.7483346,37.0469828 51.135981,37.8938371 51.4568132,38.7656385 C52.0204932,40.2974499 52.5497319,41.8419937 53.1454744,43.5280421 C54.7559445,42.8682391 56.3699311,42.27541 57.923516,41.5525664 C59.6933679,40.729003 61.3520352,39.7033787 62.6879052,38.2409221 C63.3470488,37.5193207 63.9216922,36.7360245 63.8629453,35.6856602 C63.8108179,34.7528887 63.2862334,34.0373946 62.6792173,33.3922906 C60.9036769,31.5050095 58.6534041,30.3515445 56.3092191,29.3652558 C55.2542583,28.9213845 54.1649596,28.5589793 53.1183764,28.1695568 Z M18.5304523,28.1543401 C17.2413315,28.6559727 15.929043,29.1155782 14.6593667,29.6722806 C12.5853344,30.5819683 10.6210388,31.6799494 9.03042681,33.3423965 C7.68586893,34.7476094 7.45512211,35.9831616 8.31346718,37.3760563 C8.52828616,37.724694 8.79823201,38.047039 9.08162344,38.3444369 C10.769147,40.1146428 12.8901354,41.2185243 15.0935555,42.1726198 C16.2250526,42.6626587 17.3999894,43.0521848 18.5797872,43.4963666 C18.6635635,43.299171 18.7213795,43.1777482 18.7675082,43.0519778 C19.6026855,40.7759987 20.4429307,38.5017793 21.2596979,36.2192788 C21.3376823,36.0014837 21.3348897,35.7057421 21.2542163,35.4890857 C20.9304881,34.6187335 20.5351881,33.7747777 20.2144593,32.9033904 C19.645401,31.3578115 19.1114047,29.7991897 18.5304523,28.1543401 Z M35.9197634,30.083602 C39.1034726,30.0946538 41.6452631,32.6639526 41.6291233,35.8555002 C41.6129332,39.0429297 39.063866,41.5322338 35.8227738,41.5131943 C32.7804427,41.4950677 30.0964425,39.1061429 30.1172334,35.7841537 C30.1389599,32.3255456 32.980451,30.0732396 35.9197634,30.083602 Z M26.4512428,26.4049406 C24.6884239,26.7467464 23.021379,27.0699195 21.2673515,27.410069 C21.8597844,29.124998 22.4128114,30.7258539 22.9988318,32.4228749 C24.1809051,30.36231 25.2864419,28.4352792 26.4512428,26.4049406 Z M45.2019299,26.3979016 C46.3786249,28.4326913 47.492436,30.3585835 48.6637527,32.3842639 C49.2406715,30.6878639 49.7862517,29.0837992 50.3593436,27.3990964 C48.6149349,27.0603961 46.9581293,26.7387757 45.2019299,26.3979016 Z M47.0888617,11.293545 C45.3745504,11.6381457 43.8643016,12.464504 42.4107311,13.3986212 C40.7859881,14.4425676 39.2924946,15.6538974 37.8552656,17.0058002 C37.9640714,17.1602442 38.0263347,17.2629308 38.1021471,17.3542309 C39.6848986,19.2596271 41.2655815,21.1666796 42.8601238,23.0621384 C42.9773071,23.2014693 43.1863342,23.308193 43.3684701,23.339972 C43.9937929,23.4489731 44.6292517,23.4990742 45.2549882,23.6059014 C47.1642604,23.9318694 49.0708435,24.2739857 51.0190044,24.6170336 C51.0532389,24.4774957 51.1133303,24.2988293 51.1397044,24.1155046 C51.3783117,22.4499521 51.6961445,20.7901964 51.8235672,19.1159486 C51.9742611,17.1365393 51.855216,15.1552667 51.1408421,13.2637415 C50.7219606,12.1542703 50.0544393,11.2764651 48.7737996,11.1691203 C48.2184972,11.1226421 47.6380619,11.1830948 47.0888617,11.293545 Z M20.4426204,13.4766714 C20.0861057,14.519065 19.8528767,15.6544149 19.837466,16.7514644 C19.8124365,18.5337816 19.9767828,20.3224132 20.132855,22.1021425 C20.2084605,22.9646275 20.446861,23.8128275 20.5968309,24.5908444 C23.1906899,24.1687112 25.660229,23.7523748 28.1362841,23.3786865 C28.5235167,23.3200972 28.734302,23.1544736 28.9592569,22.8678412 C30.0112183,21.5278426 31.0796247,20.2004728 32.1599253,18.8831439 C32.6785109,18.2509792 33.2368127,17.6514217 33.8328655,16.9738141 C32.6456209,16.0282067 31.5339818,15.0763885 30.3540806,14.2185617 C28.5360315,12.8968852 26.6226222,11.7017037 24.3675917,11.3106249 C22.2957315,10.9513252 21.1977448,11.2694261 20.4426204,13.4766714 Z M35.7991263,18.9529129 C34.6101234,20.339079 33.5034489,21.6291835 32.3376138,22.9884359 L39.3099738,22.9884359 C38.1091802,21.60817 36.9859572,20.3171339 35.7991263,18.9529129 Z" fill="#04B5E5"></path></svg></a><a href="/react-native"><svg style="margin-inline-start:var(--amplify-space-xxs)" class="amplify-icon" viewBox="0 0 70 70"><path d="M23.9381606,8.33333333 C23.9952526,8.36500885 24.0500692,8.41873301 24.1098503,8.42504741 C25.8858045,8.61240913 27.5036179,9.26838219 29.0614433,10.0983636 C31.4167985,11.353273 33.5117231,12.9699666 35.4737433,14.7655337 C35.734691,15.0044457 35.9078286,15.0086898 36.1660872,14.7697778 C36.7596578,14.220839 37.3629506,13.6798708 37.9911694,13.1711993 C40.2231355,11.363935 42.5842825,9.76939364 45.3432119,8.8632254 C45.9569508,8.66157865 46.5868245,8.50868734 47.2093548,8.33333333 L49.2779054,8.33333333 C49.4366667,8.38136418 49.5934628,8.4375727 49.7544995,8.47608019 C51.7478582,8.95235162 52.9516512,10.3068423 53.684849,12.1186612 C54.6356583,14.4680322 54.8064171,16.9408964 54.5817725,19.4330143 C54.4016018,21.4320914 54.0968009,23.4197819 53.8434034,25.4445307 C54.9392181,25.8537245 56.1365986,26.2699574 57.3101908,26.7451937 C59.8480955,27.7728882 62.2518547,29.0453952 64.2383873,30.9676643 C65.6857521,32.3683226 66.7701898,33.9776666 66.6587983,36.1301526 C66.5858819,37.5377463 65.9558014,38.7052893 65.085769,39.7621751 C63.4482009,41.7513148 61.3192487,43.0861376 59.019641,44.1388828 C57.4121703,44.8748727 55.7301284,45.448034 54.081597,46.0941731 C54.0037161,46.12471 53.9269729,46.1582488 53.8192014,46.2031742 C53.9803415,47.0578956 54.1625808,47.8954335 54.2931063,48.7410456 C54.7762163,51.8691582 55.0428525,55.0001693 54.2408754,58.1206218 C53.8936692,59.472007 53.3557426,60.7310571 52.3458762,61.7383592 C51.0525149,63.0283602 49.4673846,63.4245112 47.7030144,63.230421 C44.747159,62.9051776 42.2457642,61.4973769 39.8857549,59.8212658 C38.611114,58.9159257 37.4366944,57.8690809 36.2168701,56.8862082 C36.112098,56.8017402 36.0064985,56.7181003 35.9005887,56.6334252 C34.9124421,57.452848 33.9680453,58.2811732 32.9768993,59.0489422 C30.7164907,60.7997909 28.3175925,62.311624 25.5072597,63.0242196 C23.9811865,63.4111578 22.4440466,63.5204694 20.956345,62.8440004 C19.1093361,62.0040816 18.1917271,60.4106789 17.6462503,58.5734989 C16.9090189,56.0911113 16.8683719,53.5478571 17.194272,50.9990131 C17.3859232,49.4998088 17.6420098,48.0081611 17.9047157,46.5195153 C17.9802178,46.0916888 17.6738655,46.1252275 17.463287,46.0375505 C15.4954748,45.2189558 13.4784312,44.5024266 11.5672973,43.5682059 C9.41972803,42.5182556 7.47953101,41.132193 6.10342773,39.1042352 C4.57487227,36.8513399 4.63651507,34.468016 6.27532428,32.2912041 C7.54324236,30.6072259 9.20563305,29.3896853 11.0175799,28.3619907 C13.0014234,27.2367853 15.0933486,26.3556676 17.2732906,25.692552 C17.7657091,25.5427662 17.9025437,25.3547834 17.7792581,24.8184734 C17.1312846,22.0020437 16.8325859,19.1417238 17.0262023,16.2552146 C17.1715179,14.0867874 17.6126364,11.9859553 19.0529681,10.2388331 C19.8918688,9.22138648 20.9799264,8.65412558 22.2689437,8.44336953 C22.3801283,8.42525444 22.485521,8.37090919 22.5936028,8.33333333 L23.9381606,8.33333333 Z M20.6427527,47.026013 C20.0319097,49.8918192 19.5623487,52.7800881 19.9362392,55.716802 C20.0754527,56.8096073 20.3964918,57.9047935 20.8055476,58.9306248 C21.2462523,60.0355414 22.1892011,60.6122221 23.4011649,60.4938012 C24.23024,60.4127492 25.0744155,60.2600649 25.8582927,59.9860613 C28.1132197,59.1981069 30.0425569,57.8386476 31.8778784,56.3422382 C32.5394009,55.8029262 33.1729979,55.2293509 33.7930459,54.6940761 C33.7500201,54.5725498 33.746607,54.5343528 33.7263352,54.5100269 C32.0830786,52.5205766 30.4420974,50.5290561 28.785809,48.5504749 C28.6710044,48.4134214 28.4480146,48.326469 28.2625691,48.2967602 C27.5849119,48.1884838 26.897636,48.1386932 26.2216336,48.0225496 C24.3787619,47.7057945 22.5400273,47.3665766 20.6427527,47.026013 Z M51.0746484,47.0291185 C48.8315122,47.4157461 46.6885972,47.8189361 44.5333743,48.140453 C43.6378988,48.2740905 42.9171123,48.4119722 42.3004774,49.2696955 C40.9669863,51.1248871 39.4385342,52.8396091 37.9088411,54.7108455 C39.0017598,55.5847171 40.0977813,56.5260804 41.2607204,57.375626 C43.0903534,58.7124157 45.0185529,59.8996265 47.2867186,60.3294198 C49.2293979,60.6974148 50.4519113,60.4188565 51.2097248,58.2469098 C51.5671703,57.2223207 51.7539605,56.1109862 51.8407362,55.0247023 C51.9892581,53.1674404 51.8599737,51.3060379 51.5461745,49.4652349 C51.4031343,48.6257302 51.2234807,47.7925398 51.0746484,47.0291185 Z M39.334693,48.6527475 L32.3443365,48.6527475 C33.5497844,50.0378786 34.6738348,51.3291217 35.868733,52.702245 C37.0591839,51.3113172 38.1661688,50.0179002 39.334693,48.6527475 Z M35.8572526,25.7391337 C34.0795402,25.8334356 32.2928296,25.9200775 30.5077739,26.0343578 C30.3188118,26.0463655 30.0715166,26.1728605 29.9668479,26.3255448 C27.9562167,29.2578075 26.1927774,32.3339557 24.6793223,35.5517121 C24.6033031,35.7132986 24.584893,35.968359 24.6581197,36.1241487 C26.1774701,39.3589851 27.9665595,42.4399985 30.0036681,45.3751596 C30.112267,45.5316739 30.3553217,45.6704872 30.5446975,45.6830125 C31.9345567,45.774623 33.3272084,45.8945967 34.7181018,45.8854874 C36.8508809,45.8718234 38.9834531,45.7716211 41.1148876,45.6773192 C41.328362,45.6678993 41.605341,45.4965824 41.730178,45.3156386 C43.7089535,42.4451742 45.4221271,39.4200588 46.9432358,36.2835615 C47.1123398,35.9349238 47.0874137,35.6498441 46.9253428,35.3141457 C45.4153009,32.1901737 43.676891,29.1995287 41.7078377,26.3441775 C41.6004799,26.1883877 41.3645617,26.0433636 41.1796333,26.0314594 C39.4118499,25.9172826 37.6423083,25.8330216 35.8572526,25.7391337 Z M48.6607533,39.2260721 C47.4864372,41.2792874 46.3831757,43.2085956 45.2120658,45.2562211 C46.9768497,44.9105853 48.6343793,44.5856525 50.4055758,44.2385675 C49.8025933,42.506455 49.244912,40.9044605 48.6607533,39.2260721 Z M23.0016244,39.2754487 C22.4318421,40.946798 21.8814008,42.5620424 21.3046889,44.2540947 C23.0675077,44.5924845 24.715522,44.9088256 26.4601375,45.2436958 C25.2771334,43.2022812 24.174596,41.2996798 23.0016244,39.2754487 Z M53.1183764,28.1695568 C53.0396681,28.2686204 53.0099844,28.2919112 52.9988142,28.322034 C52.1169911,30.7281312 51.2310309,33.1326756 50.3668939,35.5451907 C50.3010105,35.7291364 50.3420712,35.9871987 50.4157116,36.1793221 C50.7483346,37.0469828 51.135981,37.8938371 51.4568132,38.7656385 C52.0204932,40.2974499 52.5497319,41.8419937 53.1454744,43.5280421 C54.7559445,42.8682391 56.3699311,42.27541 57.923516,41.5525664 C59.6933679,40.729003 61.3520352,39.7033787 62.6879052,38.2409221 C63.3470488,37.5193207 63.9216922,36.7360245 63.8629453,35.6856602 C63.8108179,34.7528887 63.2862334,34.0373946 62.6792173,33.3922906 C60.9036769,31.5050095 58.6534041,30.3515445 56.3092191,29.3652558 C55.2542583,28.9213845 54.1649596,28.5589793 53.1183764,28.1695568 Z M18.5304523,28.1543401 C17.2413315,28.6559727 15.929043,29.1155782 14.6593667,29.6722806 C12.5853344,30.5819683 10.6210388,31.6799494 9.03042681,33.3423965 C7.68586893,34.7476094 7.45512211,35.9831616 8.31346718,37.3760563 C8.52828616,37.724694 8.79823201,38.047039 9.08162344,38.3444369 C10.769147,40.1146428 12.8901354,41.2185243 15.0935555,42.1726198 C16.2250526,42.6626587 17.3999894,43.0521848 18.5797872,43.4963666 C18.6635635,43.299171 18.7213795,43.1777482 18.7675082,43.0519778 C19.6026855,40.7759987 20.4429307,38.5017793 21.2596979,36.2192788 C21.3376823,36.0014837 21.3348897,35.7057421 21.2542163,35.4890857 C20.9304881,34.6187335 20.5351881,33.7747777 20.2144593,32.9033904 C19.645401,31.3578115 19.1114047,29.7991897 18.5304523,28.1543401 Z M35.9197634,30.083602 C39.1034726,30.0946538 41.6452631,32.6639526 41.6291233,35.8555002 C41.6129332,39.0429297 39.063866,41.5322338 35.8227738,41.5131943 C32.7804427,41.4950677 30.0964425,39.1061429 30.1172334,35.7841537 C30.1389599,32.3255456 32.980451,30.0732396 35.9197634,30.083602 Z M26.4512428,26.4049406 C24.6884239,26.7467464 23.021379,27.0699195 21.2673515,27.410069 C21.8597844,29.124998 22.4128114,30.7258539 22.9988318,32.4228749 C24.1809051,30.36231 25.2864419,28.4352792 26.4512428,26.4049406 Z M45.2019299,26.3979016 C46.3786249,28.4326913 47.492436,30.3585835 48.6637527,32.3842639 C49.2406715,30.6878639 49.7862517,29.0837992 50.3593436,27.3990964 C48.6149349,27.0603961 46.9581293,26.7387757 45.2019299,26.3979016 Z M47.0888617,11.293545 C45.3745504,11.6381457 43.8643016,12.464504 42.4107311,13.3986212 C40.7859881,14.4425676 39.2924946,15.6538974 37.8552656,17.0058002 C37.9640714,17.1602442 38.0263347,17.2629308 38.1021471,17.3542309 C39.6848986,19.2596271 41.2655815,21.1666796 42.8601238,23.0621384 C42.9773071,23.2014693 43.1863342,23.308193 43.3684701,23.339972 C43.9937929,23.4489731 44.6292517,23.4990742 45.2549882,23.6059014 C47.1642604,23.9318694 49.0708435,24.2739857 51.0190044,24.6170336 C51.0532389,24.4774957 51.1133303,24.2988293 51.1397044,24.1155046 C51.3783117,22.4499521 51.6961445,20.7901964 51.8235672,19.1159486 C51.9742611,17.1365393 51.855216,15.1552667 51.1408421,13.2637415 C50.7219606,12.1542703 50.0544393,11.2764651 48.7737996,11.1691203 C48.2184972,11.1226421 47.6380619,11.1830948 47.0888617,11.293545 Z M20.4426204,13.4766714 C20.0861057,14.519065 19.8528767,15.6544149 19.837466,16.7514644 C19.8124365,18.5337816 19.9767828,20.3224132 20.132855,22.1021425 C20.2084605,22.9646275 20.446861,23.8128275 20.5968309,24.5908444 C23.1906899,24.1687112 25.660229,23.7523748 28.1362841,23.3786865 C28.5235167,23.3200972 28.734302,23.1544736 28.9592569,22.8678412 C30.0112183,21.5278426 31.0796247,20.2004728 32.1599253,18.8831439 C32.6785109,18.2509792 33.2368127,17.6514217 33.8328655,16.9738141 C32.6456209,16.0282067 31.5339818,15.0763885 30.3540806,14.2185617 C28.5360315,12.8968852 26.6226222,11.7017037 24.3675917,11.3106249 C22.2957315,10.9513252 21.1977448,11.2694261 20.4426204,13.4766714 Z M35.7991263,18.9529129 C34.6101234,20.339079 33.5034489,21.6291835 32.3376138,22.9884359 L39.3099738,22.9884359 C38.1091802,21.60817 36.9859572,20.3171339 35.7991263,18.9529129 Z" fill="#04B5E5"></path></svg></a><a href="/swift"><svg style="margin-inline-start:var(--amplify-space-xxs)" class="amplify-icon" viewBox="0 0 70 70"><g transform="matrix(0.535411, 0, 0, 0.535917, 141.51651, -177.655396)"><path fill="#F05138" d="M-145.9,373.3c0-1.1,0-2.1,0-3.2c-0.1-2.3-0.2-4.7-0.6-7c-0.4-2.3-1.1-4.5-2.2-6.6c-1.1-2.1-2.4-4-4.1-5.6 c-1.7-1.7-3.6-3-5.6-4.1c-2.1-1.1-4.3-1.8-6.6-2.2c-2.3-0.4-4.6-0.6-7-0.6c-1.1,0-2.1,0-3.2,0c-1.3,0-2.5,0-3.8,0h-28.1h-11.6 c-1.3,0-2.5,0-3.8,0c-1.1,0-2.1,0-3.2,0c-0.6,0-1.2,0-1.7,0.1c-1.7,0.1-3.5,0.2-5.2,0.5c-1.7,0.3-3.4,0.8-5,1.4 c-0.5,0.2-1.1,0.5-1.6,0.7c-1.6,0.8-3,1.8-4.4,2.9c-0.4,0.4-0.9,0.8-1.3,1.2c-1.7,1.7-3,3.6-4.1,5.6c-1.1,2.1-1.8,4.3-2.2,6.6 c-0.4,2.3-0.5,4.6-0.6,7c0,1.1,0,2.1,0,3.2c0,1.3,0,2.5,0,3.8v17.3v22.4c0,1.3,0,2.5,0,3.8c0,1.1,0,2.1,0,3.2 c0.1,2.3,0.2,4.7,0.6,7c0.4,2.3,1.1,4.5,2.2,6.6c1.1,2.1,2.4,4,4.1,5.6c1.7,1.7,3.6,3,5.6,4.1c2.1,1.1,4.3,1.8,6.6,2.2 c2.3,0.4,4.6,0.6,7,0.6c1.1,0,2.1,0,3.2,0c1.3,0,2.5,0,3.8,0h39.7c1.3,0,2.5,0,3.8,0c1.1,0,2.1,0,3.2,0c2.3-0.1,4.7-0.2,7-0.6 c2.3-0.4,4.5-1.1,6.6-2.2c2.1-1.1,4-2.4,5.6-4.1c1.7-1.7,3-3.6,4.1-5.6c1.1-2.1,1.8-4.3,2.2-6.6c0.4-2.3,0.6-4.6,0.6-7 c0-1.1,0-2.1,0-3.2c0-1.3,0-2.5,0-3.8v-39.7C-145.9,375.8-145.9,374.6-145.9,373.3z"></path><path fill="#FFFFFF" d="M-168,409.4c0.1-0.4,0.2-0.8,0.3-1.2c4.4-17.5-6.3-38.3-24.5-49.2c8,10.8,11.5,23.9,8.4,35.3 c-0.3,1-0.6,2-1,3c-0.4-0.3-0.9-0.6-1.6-0.9c0,0-18.1-11.2-37.7-30.9c-0.5-0.5,10.5,15.7,22.9,28.8c-5.9-3.3-22.2-15.2-32.6-24.6 c1.3,2.1,2.8,4.2,4.4,6.1c8.6,11,19.9,24.5,33.4,34.9c-9.5,5.8-22.9,6.3-36.2,0c-3.3-1.5-6.4-3.4-9.3-5.5 c5.6,9,14.3,16.8,24.9,21.4c12.6,5.4,25.2,5.1,34.5,0.1l0,0c0,0,0.1,0,0.1-0.1c0.4-0.2,0.8-0.5,1.2-0.7c4.5-2.3,13.3-4.6,18.1,4.6 C-161.3,432.6-158.8,420.6-168,409.4C-168,409.4-168,409.4-168,409.4z"></path></g></svg></a><a href="/vue"><svg style="margin-inline-start:var(--amplify-space-xxs)" class="amplify-icon" viewBox="0 0 70 70"><g transform="translate(5.000000, 9.000000)"><polygon fill="#3D5269" points="36.8637539 1.171875e-05 29.7655898 12.1603242 22.777582 1.171875e-05 -3.515625e-05 1.171875e-05 29.7655898 51.7968867 59.9999648 1.171875e-05"></polygon><polygon fill="#4AC08E" points="47.8591875 1.171875e-05 29.7655547 30.9975117 11.9527031 1.171875e-05 4.6875e-05 1.171875e-05 29.7655547 51.7968867 59.9999297 1.171875e-05"></polygon></g></svg></a>)</span> components that can connect directly to the cloud.</p><div style="gap:var(--amplify-space-medium);grid-template-columns:1fr" class="amplify-grid"><a class="amplify-link docs-cardLink docs-cardLink--home" href="#authentication"><div class="docs-cardLink-icon"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><g><path fill="none" d="M0 0h24v24H0z"></path><path d="M14 18v-2h3.5a3.5 3.5 0 1 0-2.5-5.95V10a6 6 0 1 0-12 0v.007H1V10a8 8 0 0 1 15.458-2.901A5.5 5.5 0 1 1 17.5 18H14zm-8 2h10v2H6v-2zm0-8h8v2H6v-2zm-4 4h10v2H2v-2z"></path></g></svg></div><div class="docs-cardLink-details"><div class="docs-cardLink-title">Cloud connected</div><div class="docs-cardLink-desc">Focus on your UI and let us take care of the rest</div></div></a><a class="amplify-link docs-cardLink docs-cardLink--home" href="#figma"><div class="docs-cardLink-icon"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><g><path fill="none" d="M0 0h24v24H0z"></path><path fill-rule="nonzero" d="M16 13l6.964 4.062-2.973.85 2.125 3.681-1.732 1-2.125-3.68-2.223 2.15L16 13zm-2-7h2v2h5a1 1 0 0 1 1 1v4h-2v-3H10v10h4v2H9a1 1 0 0 1-1-1v-5H6v-2h2V9a1 1 0 0 1 1-1h5V6zM4 14v2H2v-2h2zm0-4v2H2v-2h2zm0-4v2H2V6h2zm0-4v2H2V2h2zm4 0v2H6V2h2zm4 0v2h-2V2h2zm4 0v2h-2V2h2z"></path></g></svg></div><div class="docs-cardLink-details"><div class="docs-cardLink-title">Build visually</div><div class="docs-cardLink-desc">Compose in your IDE—or visually with Amplify Studio</div></div></a><a class="amplify-link docs-cardLink docs-cardLink--home" href="#themeable"><div class="docs-cardLink-icon"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><g><path fill="none" d="M0 0h24v24H0z"></path><path d="M7.05 14.121L4.93 16.243l2.828 2.828L19.071 7.757 16.243 4.93 14.12 7.05l1.415 1.414L14.12 9.88l-1.414-1.415-1.414 1.415 1.414 1.414-1.414 1.414-1.414-1.414-1.415 1.414 1.415 1.414-1.415 1.415L7.05 14.12zm9.9-11.313l4.242 4.242a1 1 0 0 1 0 1.414L8.464 21.192a1 1 0 0 1-1.414 0L2.808 16.95a1 1 0 0 1 0-1.414L15.536 2.808a1 1 0 0 1 1.414 0zM14.12 18.363l1.415-1.414 2.242 2.243h1.414v-1.414l-2.242-2.243 1.414-1.414L21 16.757V21h-4.242l-2.637-2.637zM5.636 9.878L2.807 7.05a1 1 0 0 1 0-1.415l2.829-2.828a1 1 0 0 1 1.414 0L9.88 5.635 8.464 7.05 6.343 4.928 4.929 6.343l2.121 2.12-1.414 1.415z"></path></g></svg></div><div class="docs-cardLink-details"><div class="docs-cardLink-title">Styling your way</div><div class="docs-cardLink-desc">Use plain CSS, design tokens, or with your favorite CSS-in-JS library</div></div></a></div><div class="install-code__container hero"><code class="install-code__content">npm i @aws-amplify/ui-react aws-amplify</code><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small install-code__button" type="button">Copy</button></div><div style="flex-direction:row" class="amplify-flex"><a class="amplify-button amplify-field-group__control amplify-button--primary amplify-button--large docs-home-cta" type="button" href="/react/getting-started/installation">Get started building<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" aria-label="" style="font-size:var(--amplify-font-sizes-xl)" class="amplify-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg></a></div></div></div></section><section style="background-color:var(--amplify-colors-background-secondary)" class="docs-home-section docs-grid-bg fade-in"><div style="flex-direction:column;gap:var(--amplify-space-large)" class="amplify-flex docs-home-subsection"><h2 class="amplify-heading amplify-heading--2 expand-out">Speed up development with over <br/><strong>40 production-ready components</strong></h2><div style="flex-direction:column;gap:var(--amplify-space-xl);align-items:stretch" class="amplify-flex"><div style="flex-direction:column;flex:1" class="amplify-flex"><p class="amplify-text docs-home-text">Amplify UI components are built with plain React and CSS to provide a solid foundation for building UIs and design systems. These components are themeable, responsive, composable, and accessible. They play nicely with other UI components or styling frameworks.</p></div><div style="flex:1"><div style="flex-direction:column;width:100%" class="amplify-flex"><div style="flex-direction:column" class="amplify-flex"><div class="amplify-card amplify-card--elevated"><div style="justify-content:center;align-items:center;width:100%;height:100%" class="amplify-flex"><div class="amplify-flex amplify-switchfield amplify-label-end"><span class="amplify-visually-hidden"><input aria-invalid="false" class="amplify-input amplify-field-group__control" id="amplify-id-:R2d2ll6:" type="checkbox" role="switch"/></span><label class="amplify-label amplify-switch__wrapper amplify-switch__wrapper--end" for="amplify-id-:R2d2ll6:"><span class="amplify-switch__label">Switch</span><span class="amplify-switch__track"><span class="amplify-switch__thumb" data-checked="false"></span></span></label></div></div></div><div style="flex:1;display:none" class="amplify-card amplify-card--elevated"><div style="justify-content:center;align-items:center;width:100%;height:100%" class="amplify-flex"><nav class="amplify-pagination"><ol style="justify-content:center;align-items:center;gap:inherit" class="amplify-flex"><li><button aria-label="Go to previous page" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item amplify-pagination__item--link" type="button"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 7.41L14 6L8 12L14 18L15.41 16.59L10.83 12L15.41 7.41Z" fill="currentColor"></path></svg></span></button></li><li><button aria-label="Go to page 1" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">1</button></li><li><span data-testid="ellipsis" class="amplify-flex amplify-pagination__item--ellipsis">…</span></li><li><button aria-label="Go to page 11" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">11</button></li><li><button data-testid="current" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item amplify-pagination__item--current" type="button" aria-current="page"><span class="amplify-visually-hidden">Page:</span>12</button></li><li><button aria-label="Go to page 13" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">13</button></li><li><span data-testid="ellipsis" class="amplify-flex amplify-pagination__item--ellipsis">…</span></li><li><button aria-label="Go to page 99" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">99</button></li><li><button aria-label="Go to next page" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item amplify-pagination__item--link" type="button"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.99984 6L8.58984 7.41L13.1698 12L8.58984 16.59L9.99984 18L15.9998 12L9.99984 6Z" fill="currentColor"></path></svg></span></button></li></ol></nav></div></div></div><div style="flex-direction:column" class="amplify-flex"><div style="flex:1" class="amplify-card amplify-card--elevated"><div style="justify-content:center;align-items:center;width:100%;height:100%" class="amplify-flex"><button class="amplify-button amplify-field-group__control" type="button">Button</button><button class="amplify-button amplify-field-group__control amplify-button--primary" type="button">Button</button><button class="amplify-button amplify-field-group__control amplify-button--link" type="button">Button</button></div></div><div style="flex:1" class="amplify-card amplify-card--elevated"><div style="flex-direction:row;justify-content:center;align-content:center;height:100%" class="amplify-flex"><div class="amplify-flex amplify-togglebuttongroup" role="group"><button aria-label="align left" class="amplify-button amplify-field-group__control amplify-togglebutton amplify-togglebutton--pressed" type="button" aria-pressed="true"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z"></path></svg></button><button aria-label="align center" class="amplify-button amplify-field-group__control amplify-togglebutton" type="button" aria-pressed="false"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z"></path></svg></button><button aria-label="align right" class="amplify-button amplify-field-group__control amplify-togglebutton" type="button" aria-pressed="false"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z"></path></svg></button><button aria-label="align justify" class="amplify-button amplify-field-group__control amplify-togglebutton" type="button" aria-pressed="false"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z"></path></svg></button></div></div></div></div><div style="flex-direction:column" class="amplify-flex"><div style="flex:2" class="amplify-card amplify-card--elevated"><div class="amplify-tabs"><div role="tablist" class="amplify-tabs__list"><button role="tab" id="amplify-id-:R2t2ll6:-tab-sports" aria-selected="true" aria-controls="amplify-id-:R2t2ll6:-panel-sports" class="amplify-tabs__item amplify-tabs__item--active">Sports</button><button role="tab" id="amplify-id-:R2t2ll6:-tab-donuts" aria-selected="false" aria-controls="amplify-id-:R2t2ll6:-panel-donuts" tabindex="-1" class="amplify-tabs__item">Donuts <span class="amplify-badge amplify-badge--success amplify-badge--small">new</span></button></div></div></div><div style="flex:1" class="amplify-card amplify-card--elevated"><div style="justify-content:center;align-items:center;width:100%;height:100%" class="amplify-flex"><div class="amplify-flex amplify-field amplify-textfield amplify-searchfield"><label class="amplify-label amplify-visually-hidden" for="amplify-id-:R4t2ll6:">Search</label><div class="amplify-flex amplify-field-group amplify-field-group--has-inner-end amplify-field-group--horizontal"><div class="amplify-field-group__field-wrapper amplify-field-group__field-wrapper--horizontal"><input aria-invalid="false" autoComplete="off" class="amplify-input amplify-field-group__control" id="amplify-id-:R4t2ll6:" type="text" name="q" placeholder="Search" value=""/><div class="amplify-field-group__inner-end"></div></div><div class="amplify-field-group__outer-end"><button aria-label="Search" class="amplify-button amplify-field-group__control amplify-field-group__icon amplify-field-group__icon-button amplify-searchfield__search" type="submit"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14V14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z" fill="currentColor"></path></svg></span></button></div></div></div></div></div></div><div style="flex-direction:column" class="amplify-flex"><div style="flex:1" class="amplify-card amplify-card--elevated"><div style="justify-content:center;align-items:center;width:100%;height:100%" class="amplify-flex"><fieldset style="flex-direction:row;gap:var(--amplify-space-small)" class="amplify-flex amplify-fieldset amplify-fieldset--plain amplify-field amplify-radiogroupfield" role="radiogroup"><legend class="amplify-visually-hidden">Language</legend><div aria-hidden="true" class="amplify-fieldset__legend amplify-visually-hidden">Language</div><div class="amplify-flex amplify-radiogroup" id="amplify-id-:R352ll6:"><label class="amplify-flex amplify-radio"><span class="amplify-text amplify-radio__label">HTML</span><input aria-invalid="false" class="amplify-input amplify-field-group__control amplify-visually-hidden amplify-radio__input" type="radio" name="primitive-language" value="html"/><span class="amplify-flex amplify-radio__button" aria-hidden="true"></span></label><label class="amplify-flex amplify-radio"><span class="amplify-text amplify-radio__label">CSS</span><input aria-invalid="false" class="amplify-input amplify-field-group__control amplify-visually-hidden amplify-radio__input" type="radio" name="primitive-language" checked="" value="css"/><span class="amplify-flex amplify-radio__button" aria-hidden="true"></span></label><label class="amplify-flex amplify-radio"><span class="amplify-text amplify-radio__label">javascript</span><input aria-invalid="false" class="amplify-input amplify-field-group__control amplify-visually-hidden amplify-radio__input" type="radio" name="primitive-language" value="javascript"/><span class="amplify-flex amplify-radio__button" aria-hidden="true"></span></label></div></fieldset></div></div><div style="flex:1" class="amplify-card amplify-card--elevated"><div style="justify-content:center;align-items:center;width:100%;height:100%" class="amplify-flex"><div class="amplify-flex amplify-field amplify-sliderfield"><label data-testid="slider-label" class="amplify-label amplify-sliderfield__label amplify-visually-hidden" id="amplify-id-:R552ll6H1:"><span>Slider</span>50</label><div class="amplify-flex amplify-field-group amplify-field-group--horizontal amplify-sliderfield__group" id="amplify-id-:R552ll6:"><div class="amplify-field-group__field-wrapper amplify-field-group__field-wrapper--horizontal"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" class="amplify-sliderfield__root amplify-sliderfield__root--horizontal" data-testid="slider-root" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" class="amplify-sliderfield__track amplify-sliderfield__track--horizontal" data-testid="slider-track" style="background-color:undefined"><span data-orientation="horizontal" class="amplify-sliderfield__range amplify-sliderfield__range--horizontal" data-testid="slider-range" style="background-color:undefined;left:0%;right:50%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" aria-labelledby="amplify-id-:R552ll6H1:" class="amplify-sliderfield__thumb" style="display:none" data-radix-collection-item=""></span></span></span><input style="display:none" value="50"/></div></div></div></div></div><div style="flex:1" class="amplify-card amplify-card--elevated"><div style="justify-content:center;align-items:center;width:100%;height:100%" class="amplify-flex"><div class="amplify-flex amplify-field amplify-checkboxfield"><label class="amplify-flex amplify-checkbox"><span class="amplify-visually-hidden"><input aria-invalid="false" class="amplify-input amplify-field-group__control amplify-checkbox__input" type="checkbox" data-id="amplify-id-:Rf52ll6:" name="topping" checked="" value="Sprinkles"/></span><span class="amplify-text amplify-checkbox__label">Sprinkles</span><span class="amplify-flex amplify-checkbox__button" aria-hidden="true" data-checked="true" data-focus="false" data-error="false"><span style="width:1em;height:1em" class="amplify-icon amplify-checkbox__icon amplify-checkbox__icon--checked" data-checked="true"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.00016 16.1698L4.83016 11.9998L3.41016 13.4098L9.00016 18.9998L21.0002 6.99984L19.5902 5.58984L9.00016 16.1698Z" fill="currentColor"></path></svg></span></span></label></div></div></div></div></div></div></div><div style="justify-content:center" class="amplify-flex"><a class="amplify-button amplify-field-group__control amplify-button--primary amplify-button--large docs-home-cta" type="button" href="/react/components"><span>View all components</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M16.66 4.52l2.83 2.83-2.83 2.83-2.83-2.83 2.83-2.83M9 5v4H5V5h4m10 10v4h-4v-4h4M9 15v4H5v-4h4m7.66-13.31L11 7.34 16.66 13l5.66-5.66-5.66-5.65zM11 3H3v8h8V3zm10 10h-8v8h8v-8zm-10 0H3v8h8v-8z"></path></svg></a></div></div></section><section id="authentication" class="docs-home-section fade-in"><div style="flex-direction:column" class="amplify-flex"><div style="flex-direction:column" class="amplify-flex docs-home-subsection--thin"><h2 class="amplify-heading amplify-heading--2 expand-out"><strong>Authentication</strong> made easy</h2><p class="amplify-text docs-home-text">Add authentication to your app in under 10 lines of code using the Authenticator component. The Authenticator works seamlessly with the <a class="amplify-link" href="https://docs.amplify.aws/cli/start/install/">Amplify CLI</a> to <strong>automatically</strong> work with your backend, no extra configuration needed! Customize every detail of the authentication flow with themes, overrides, or bring your own UI with a headless mode.</p></div><div style="flex-direction:column;align-items:center;gap:var(--amplify-space-xxl)" class="amplify-flex docs-home-subsection"><div style="flex:1" class="docs-home-browser"><div class="docs-home-browser__nav-bar">https://localhost</div><div class="docs-home-browser__page"></div></div></div><div style="justify-content:center" class="amplify-flex"><a class="amplify-button amplify-field-group__control amplify-button--primary amplify-button--large docs-home-cta" type="button" href="/react/connected-components/authenticator">Get started with the Authenticator</a></div></div></section><section data-testid="docs-home-section-themable" id="themeable" class="docs-home-section docs-gradient-bg fade-in"><div style="flex-direction:column" class="amplify-flex docs-home-subsection--thin"><h2 class="amplify-heading amplify-heading--2 expand-out"><strong>Theming</strong> controls to match your brand</h2><p class="amplify-text docs-home-text">Create a unique look-and-feel for your application in minutes. Amplify UI uses design tokens and plain CSS so every detail can be customized. Dynamic theming for dark mode, responsive, and user preferences is easy with theme overrides.</p></div><div style="flex-direction:column;align-items:center" class="amplify-flex docs-home-subsection"><div class="amplify-flex amplify-togglebuttongroup" role="group"><button style="gap:var(--amplify-space-xs)" class="amplify-button amplify-field-group__control amplify-togglebutton amplify-togglebutton--pressed" type="button" aria-pressed="true"><svg aria-label="Default" class="amplify-icon" viewBox="0 0 24 24"><path d="M5.22274 17.8571H11.9827L13.7143 20.9048H13.6655H0L4.8154 12.5604L6.83337 9.06616L8.56591 12.0683L5.22274 17.8571ZM7.74389 7.48595L9.40738 4.60353L18.8218 20.9047H15.4878L7.74389 7.48595ZM10.3333 3H13.6628L24 20.9048H20.6662L10.3333 3Z" fill-rule="evenodd"></path></svg><span class="amplify-visually-hidden">Default</span></button><button style="gap:var(--amplify-space-xs)" class="amplify-button amplify-field-group__control amplify-togglebutton" type="button" aria-pressed="false"><svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24" aria-label="" class="amplify-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M5.0333 14.8284L6.44751 16.2426L10.6902 12L6.44751 7.75733L5.0333 9.17155L7.86172 12L5.0333 14.8284Z" fill="currentColor"></path><path d="M15 14H11V16H15V14Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M2 2C0.895431 2 0 2.89543 0 4V20C0 21.1046 0.89543 22 2 22H22C23.1046 22 24 21.1046 24 20V4C24 2.89543 23.1046 2 22 2H2ZM22 4H2L2 20H22V4Z" fill="currentColor"></path></svg><span class="amplify-visually-hidden">Terminal</span></button><button style="gap:var(--amplify-space-xs)" class="amplify-button amplify-field-group__control amplify-togglebutton" type="button" aria-pressed="false"><svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24" aria-label="" class="amplify-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M3.03509 12.9431C3.24245 14.9227 4.10472 16.8468 5.62188 18.364C7.13904 19.8811 9.0631 20.7434 11.0428 20.9508L3.03509 12.9431Z" fill="currentColor"></path><path d="M3 11.4938L12.4921 20.9858C13.2976 20.9407 14.0981 20.7879 14.8704 20.5273L3.4585 9.11548C3.19793 9.88771 3.0451 10.6883 3 11.4938Z" fill="currentColor"></path><path d="M3.86722 8.10999L15.8758 20.1186C16.4988 19.8201 17.0946 19.4458 17.6493 18.9956L4.99021 6.33659C4.54006 6.89125 4.16573 7.487 3.86722 8.10999Z" fill="currentColor"></path><path d="M5.66301 5.59517C9.18091 2.12137 14.8488 2.135 18.3498 5.63604C21.8508 9.13708 21.8645 14.8049 18.3907 18.3228L5.66301 5.59517Z" fill="currentColor"></path></svg><span class="amplify-visually-hidden">Synthwave</span></button><button style="gap:var(--amplify-space-xs)" class="amplify-button amplify-field-group__control amplify-togglebutton" type="button" aria-pressed="false"><svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24" aria-label="" class="amplify-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M13.392 10.4362L14.8106 9.0176C14.1031 8.38476 13.169 8 12.145 8C9.93588 8 8.14502 9.79086 8.14502 12C8.14502 14.2091 9.93588 16 12.145 16C13.2563 16 14.2617 15.5468 14.9866 14.8152L13.674 13.5026L13.4646 13.503C13.1124 13.8124 12.6506 14 12.145 14C11.0405 14 10.145 13.1046 10.145 12C10.145 10.8954 11.0405 10 12.145 10C12.6166 10 13.0501 10.1632 13.392 10.4362Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3ZM12 5C15.866 5 19 8.13401 19 12C19 15.866 15.866 19 12 19C8.13401 19 5 15.866 5 12C5 8.13401 8.13401 5 12 5Z" fill="currentColor"></path></svg><span class="amplify-visually-hidden">Classic</span></button></div><div style="flex-direction:row;width:100%;gap:var(--amplify-space-xl)" class="amplify-flex"><div style="flex:1"><div data-amplify-theme="default-theme" data-amplify-color-mode="system" dir="ltr"><div style="column-gap:var(--amplify-space-small);row-gap:var(--amplify-space-small);grid-template-columns:1fr" class="amplify-grid"><div style="grid-column-start:1;grid-column-end:4" class="amplify-card amplify-card--elevated"><div style="flex-direction:column" class="amplify-flex"><div class="amplify-flex amplify-alert amplify-alert--info" role="alert"><span class="amplify-alert__icon"><span style="width:1em;height:1em" class="amplify-icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 7H13V9H11V7ZM11 11H13V17H11V11ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z" fill="currentColor"></path></svg></span></span><div style="flex:1"><div class="amplify-alert__heading">Flash sale!</div><div class="amplify-alert__body"></div></div></div><div style="flex-direction:column" class="amplify-flex"><img style="width:100px" class="amplify-image" alt="" src="/amplify-placeholder.svg"/><div style="flex-direction:column" class="amplify-flex"><div class="amplify-flex amplify-togglebuttongroup" role="group"><button aria-label="align left" class="amplify-button amplify-field-group__control amplify-button--small amplify-togglebutton amplify-togglebutton--pressed" type="button" aria-pressed="true">Sm</button><button aria-label="align center" class="amplify-button amplify-field-group__control amplify-button--small amplify-togglebutton" type="button" aria-pressed="false">Md</button><button aria-label="align right" class="amplify-button amplify-field-group__control amplify-button--small amplify-togglebutton" type="button" aria-pressed="false">Lg</button><button aria-label="align justify" class="amplify-button amplify-field-group__control amplify-button--small amplify-togglebutton" type="button" aria-pressed="false">XL</button></div><div style="flex-direction:row;align-items:center" class="amplify-flex"><span style="font-size:var(--amplify-font-sizes-xl)" class="amplify-text">$29.99</span><span style="color:var(--amplify-colors-font-success)" class="amplify-text">20% off</span></div><button class="amplify-button amplify-field-group__control amplify-button--primary" type="button">Add to cart</button></div></div></div></div></div></div><style id="amplify-theme-default-theme">[data-amplify-theme="default-theme"] { --amplify-components-accordion-background-color: var(--amplify-colors-background-primary); --amplify-components-accordion-item-border-color: var(--amplify-colors-border-secondary); --amplify-components-accordion-item-border-width: var(--amplify-border-widths-small); --amplify-components-accordion-item-border-style: solid; --amplify-components-accordion-item-border-radius: var(--amplify-radii-small); --amplify-components-accordion-item-trigger-align-items: center; --amplify-components-accordion-item-trigger-background-color: var(--amplify-colors-background-primary); --amplify-components-accordion-item-trigger-color: inherit; --amplify-components-accordion-item-trigger-gap: var(--amplify-space-small); --amplify-components-accordion-item-trigger-justify-content: space-between; --amplify-components-accordion-item-trigger-padding-block: var(--amplify-space-xs); --amplify-components-accordion-item-trigger-padding-inline: var(--amplify-space-small); --amplify-components-accordion-item-trigger-hover-color: inherit; --amplify-components-accordion-item-trigger-hover-background-color: var(--amplify-colors-overlay-5); --amplify-components-accordion-item-trigger-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-accordion-item-trigger-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus); --amplify-components-accordion-item-content-color: inherit; --amplify-components-accordion-item-content-padding-inline: var(--amplify-space-small); --amplify-components-accordion-item-content-padding-block-end: var(--amplify-space-small); --amplify-components-accordion-item-content-padding-block-start: var(--amplify-space-xxxs); --amplify-components-accordion-item-icon-color: var(--amplify-colors-font-tertiary); --amplify-components-accordion-item-icon-transition-duration: var(--amplify-time-medium); --amplify-components-accordion-item-icon-transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1); --amplify-components-ai-conversation-message-background-color: var(--amplify-colors-background-secondary); --amplify-components-ai-conversation-message-border-radius: var(--amplify-radii-large); --amplify-components-ai-conversation-message-gap: var(--amplify-space-small); --amplify-components-ai-conversation-message-padding-block: var(--amplify-space-small); --amplify-components-ai-conversation-message-padding-inline: var(--amplify-space-small); --amplify-components-ai-conversation-message-user-background-color: var(--amplify-colors-background-secondary); --amplify-components-ai-conversation-message-assistant-background-color: var(--amplify-colors-primary-10); --amplify-components-ai-conversation-message-sender-gap: var(--amplify-space-small); --amplify-components-ai-conversation-message-sender-username-color: var(--amplify-colors-font-primary); --amplify-components-ai-conversation-message-sender-username-font-size: inherit; --amplify-components-ai-conversation-message-sender-username-font-weight: var(--amplify-font-weights-bold); --amplify-components-ai-conversation-message-sender-timestamp-color: var(--amplify-colors-font-tertiary); --amplify-components-ai-conversation-message-sender-timestamp-font-size: inherit; --amplify-components-ai-conversation-message-sender-timestamp-font-weight: inherit; --amplify-components-ai-conversation-message-body-gap: var(--amplify-space-xs); --amplify-components-ai-conversation-form-gap: var(--amplify-space-small); --amplify-components-ai-conversation-form-padding: var(--amplify-space-small); --amplify-components-ai-conversation-attachment-border-color: var(--amplify-colors-border-secondary); --amplify-components-ai-conversation-attachment-border-width: var(--amplify-border-widths-small); --amplify-components-ai-conversation-attachment-border-radius: var(--amplify-radii-small); --amplify-components-ai-conversation-attachment-font-size: var(--amplify-font-sizes-small); --amplify-components-ai-conversation-attachment-padding-block: var(--amplify-space-xxxs); --amplify-components-ai-conversation-attachment-padding-inline: var(--amplify-space-xs); --amplify-components-ai-conversation-attachment-gap: var(--amplify-space-xs); --amplify-components-ai-conversation-attachment-list-padding-block-start: var(--amplify-space-xs); --amplify-components-ai-conversation-attachment-list-gap: var(--amplify-space-xxs); --amplify-components-ai-conversation-attachment-name-color: var(--amplify-colors-font-primary); --amplify-components-ai-conversation-attachment-name-font-size: var(--amplify-font-sizes-small); --amplify-components-ai-conversation-attachment-name-font-weight: var(--amplify-font-weights-normal); --amplify-components-ai-conversation-attachment-size-color: var(--amplify-colors-font-tertiary); --amplify-components-ai-conversation-attachment-size-font-size: var(--amplify-font-sizes-small); --amplify-components-ai-conversation-attachment-size-font-weight: var(--amplify-font-weights-normal); --amplify-components-ai-conversation-attachment-remove-padding: var(--amplify-space-xxs); --amplify-components-ai-conversation-attachment-image-width: var(--amplify-font-sizes-medium); --amplify-components-ai-conversation-attachment-image-height: var(--amplify-font-sizes-medium); --amplify-components-alert-align-items: center; --amplify-components-alert-justify-content: space-between; --amplify-components-alert-color: var(--amplify-colors-font-primary); --amplify-components-alert-background-color: var(--amplify-colors-background-tertiary); --amplify-components-alert-padding-block: var(--amplify-space-small); --amplify-components-alert-padding-inline: var(--amplify-space-medium); --amplify-components-alert-icon-size: var(--amplify-font-sizes-xl); --amplify-components-alert-heading-font-size: var(--amplify-font-sizes-medium); --amplify-components-alert-heading-font-weight: var(--amplify-font-weights-bold); --amplify-components-alert-info-color: var(--amplify-colors-font-info); --amplify-components-alert-info-background-color: var(--amplify-colors-background-info); --amplify-components-alert-error-color: var(--amplify-colors-font-error); --amplify-components-alert-error-background-color: var(--amplify-colors-background-error); --amplify-components-alert-warning-color: var(--amplify-colors-font-warning); --amplify-components-alert-warning-background-color: var(--amplify-colors-background-warning); --amplify-components-alert-success-color: var(--amplify-colors-font-success); --amplify-components-alert-success-background-color: var(--amplify-colors-background-success); --amplify-components-authenticator-max-width: 60rem; --amplify-components-authenticator-modal-width: var(--amplify-space-relative-full); --amplify-components-authenticator-modal-height: var(--amplify-space-relative-full); --amplify-components-authenticator-modal-background-color: var(--amplify-colors-overlay-50); --amplify-components-authenticator-modal-top: var(--amplify-space-zero); --amplify-components-authenticator-modal-left: var(--amplify-space-zero); --amplify-components-authenticator-container-width-max: 30rem; --amplify-components-authenticator-router-border-width: var(--amplify-border-widths-small); --amplify-components-authenticator-router-border-style: solid; --amplify-components-authenticator-router-border-color: var(--amplify-colors-border-primary); --amplify-components-authenticator-router-background-color: var(--amplify-colors-background-primary); --amplify-components-authenticator-router-box-shadow: var(--amplify-shadows-medium); --amplify-components-authenticator-footer-padding-bottom: var(--amplify-space-medium); --amplify-components-authenticator-form-padding: var(--amplify-space-xl); --amplify-components-authenticator-state-inactive-background-color: var(--amplify-colors-background-secondary); --amplify-components-authenticator-or-container-color: var(--amplify-colors-neutral-80); --amplify-components-authenticator-or-container-or-line-background-color: var(--amplify-colors-background-primary); --amplify-components-autocomplete-menu-width: 100%; --amplify-components-autocomplete-menu-margin-block-start: var(--amplify-space-xxxs); --amplify-components-autocomplete-menu-background-color: var(--amplify-colors-background-primary); --amplify-components-autocomplete-menu-border-color: var(--amplify-colors-border-primary); --amplify-components-autocomplete-menu-border-width: var(--amplify-border-widths-small); --amplify-components-autocomplete-menu-border-style: solid; --amplify-components-autocomplete-menu-border-radius: var(--amplify-radii-small); --amplify-components-autocomplete-menu-options-display: flex; --amplify-components-autocomplete-menu-options-flex-direction: column; --amplify-components-autocomplete-menu-options-max-height: 300px; --amplify-components-autocomplete-menu-option-background-color: var(--amplify-colors-background-primary); --amplify-components-autocomplete-menu-option-color: currentcolor; --amplify-components-autocomplete-menu-option-cursor: pointer; --amplify-components-autocomplete-menu-option-transition-duration: var(--amplify-time-short); --amplify-components-autocomplete-menu-option-transition-property: background-color, color; --amplify-components-autocomplete-menu-option-transition-timing-function: ease; --amplify-components-autocomplete-menu-option-active-background-color: var(--amplify-colors-primary-80); --amplify-components-autocomplete-menu-option-active-color: var(--amplify-colors-white); --amplify-components-autocomplete-menu-empty-display: flex; --amplify-components-autocomplete-menu-loading-align-items: center; --amplify-components-autocomplete-menu-loading-display: flex; --amplify-components-autocomplete-menu-loading-gap: var(--amplify-space-xxxs); --amplify-components-autocomplete-menu-space-shared-padding-block: var(--amplify-space-xs); --amplify-components-autocomplete-menu-space-shared-padding-inline: var(--amplify-space-small); --amplify-components-avatar-color: var(--amplify-colors-font-tertiary); --amplify-components-avatar-line-height: 1; --amplify-components-avatar-font-weight: var(--amplify-font-weights-semibold); --amplify-components-avatar-font-size: var(--amplify-font-sizes-small); --amplify-components-avatar-text-align: center; --amplify-components-avatar-width: var(--amplify-font-sizes-xxl); --amplify-components-avatar-height: var(--amplify-font-sizes-xxl); --amplify-components-avatar-background-color: var(--amplify-colors-background-tertiary); --amplify-components-avatar-border-radius: 100%; --amplify-components-avatar-border-color: var(--amplify-colors-border-primary); --amplify-components-avatar-border-width: var(--amplify-border-widths-medium); --amplify-components-avatar-info-color: var(--amplify-colors-font-info); --amplify-components-avatar-info-background-color: var(--amplify-colors-background-info); --amplify-components-avatar-info-border-color: var(--amplify-colors-border-info); --amplify-components-avatar-warning-color: var(--amplify-colors-font-warning); --amplify-components-avatar-warning-background-color: var(--amplify-colors-background-warning); --amplify-components-avatar-warning-border-color: var(--amplify-colors-border-warning); --amplify-components-avatar-success-color: var(--amplify-colors-font-success); --amplify-components-avatar-success-background-color: var(--amplify-colors-background-success); --amplify-components-avatar-success-border-color: var(--amplify-colors-border-success); --amplify-components-avatar-error-color: var(--amplify-colors-font-error); --amplify-components-avatar-error-background-color: var(--amplify-colors-background-error); --amplify-components-avatar-error-border-color: var(--amplify-colors-border-error); --amplify-components-avatar-small-font-size: var(--amplify-font-sizes-xs); --amplify-components-avatar-small-width: var(--amplify-font-sizes-xl); --amplify-components-avatar-small-height: var(--amplify-font-sizes-xl); --amplify-components-avatar-large-font-size: var(--amplify-font-sizes-medium); --amplify-components-avatar-large-width: var(--amplify-font-sizes-xxxl); --amplify-components-avatar-large-height: var(--amplify-font-sizes-xxxl); --amplify-components-badge-color: var(--amplify-colors-font-primary); --amplify-components-badge-line-height: 1; --amplify-components-badge-font-weight: var(--amplify-font-weights-semibold); --amplify-components-badge-font-size: var(--amplify-font-sizes-small); --amplify-components-badge-text-align: center; --amplify-components-badge-padding-vertical: var(--amplify-space-xs); --amplify-components-badge-padding-horizontal: var(--amplify-space-small); --amplify-components-badge-background-color: var(--amplify-colors-background-tertiary); --amplify-components-badge-border-radius: var(--amplify-radii-xl); --amplify-components-badge-info-color: var(--amplify-colors-font-info); --amplify-components-badge-info-background-color: var(--amplify-colors-background-info); --amplify-components-badge-warning-color: var(--amplify-colors-font-warning); --amplify-components-badge-warning-background-color: var(--amplify-colors-background-warning); --amplify-components-badge-success-color: var(--amplify-colors-font-success); --amplify-components-badge-success-background-color: var(--amplify-colors-background-success); --amplify-components-badge-error-color: var(--amplify-colors-font-error); --amplify-components-badge-error-background-color: var(--amplify-colors-background-error); --amplify-components-badge-small-font-size: var(--amplify-font-sizes-xs); --amplify-components-badge-small-padding-vertical: var(--amplify-space-xxs); --amplify-components-badge-small-padding-horizontal: var(--amplify-space-xs); --amplify-components-badge-large-font-size: var(--amplify-font-sizes-medium); --amplify-components-badge-large-padding-vertical: var(--amplify-space-small); --amplify-components-badge-large-padding-horizontal: var(--amplify-space-medium); --amplify-components-breadcrumbs-flex-direction: row; --amplify-components-breadcrumbs-flex-wrap: wrap; --amplify-components-breadcrumbs-gap: 0; --amplify-components-breadcrumbs-color: var(--amplify-colors-font-tertiary); --amplify-components-breadcrumbs-item-flex-direction: row; --amplify-components-breadcrumbs-item-color: inherit; --amplify-components-breadcrumbs-item-font-size: inherit; --amplify-components-breadcrumbs-item-align-items: center; --amplify-components-breadcrumbs-item-line-height: 1; --amplify-components-breadcrumbs-separator-color: inherit; --amplify-components-breadcrumbs-separator-font-size: inherit; --amplify-components-breadcrumbs-separator-padding-inline: var(--amplify-space-xxs); --amplify-components-breadcrumbs-link-color: var(--amplify-components-link-color); --amplify-components-breadcrumbs-link-font-size: inherit; --amplify-components-breadcrumbs-link-font-weight: normal; --amplify-components-breadcrumbs-link-text-decoration: none; --amplify-components-breadcrumbs-link-padding-inline: var(--amplify-space-xs); --amplify-components-breadcrumbs-link-padding-block: var(--amplify-space-xxs); --amplify-components-breadcrumbs-link-current-color: inherit; --amplify-components-breadcrumbs-link-current-font-size: inherit; --amplify-components-breadcrumbs-link-current-font-weight: normal; --amplify-components-breadcrumbs-link-current-text-decoration: none; --amplify-components-button-font-weight: var(--amplify-font-weights-bold); --amplify-components-button-transition-duration: var(--amplify-components-fieldcontrol-transition-duration); --amplify-components-button-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-button-line-height: var(--amplify-components-fieldcontrol-line-height); --amplify-components-button-padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start); --amplify-components-button-padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end); --amplify-components-button-padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start); --amplify-components-button-padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end); --amplify-components-button-background-color: transparent; --amplify-components-button-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-button-border-width: var(--amplify-components-fieldcontrol-border-width); --amplify-components-button-border-style: var(--amplify-components-fieldcontrol-border-style); --amplify-components-button-border-radius: var(--amplify-components-fieldcontrol-border-radius); --amplify-components-button-color: var(--amplify-colors-font-primary); --amplify-components-button-hover-color: var(--amplify-colors-font-focus); --amplify-components-button-hover-background-color: var(--amplify-colors-primary-10); --amplify-components-button-hover-border-color: var(--amplify-colors-primary-60); --amplify-components-button-focus-color: var(--amplify-colors-font-focus); --amplify-components-button-focus-background-color: var(--amplify-colors-primary-10); --amplify-components-button-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-button-active-color: var(--amplify-colors-font-active); --amplify-components-button-active-background-color: var(--amplify-colors-primary-20); --amplify-components-button-active-border-color: var(--amplify-colors-primary-100); --amplify-components-button-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-loading-background-color: transparent; --amplify-components-button-loading-border-color: var(--amplify-colors-border-tertiary); --amplify-components-button-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-disabled-background-color: transparent; --amplify-components-button-disabled-border-color: var(--amplify-colors-border-tertiary); --amplify-components-button-outlined-info-border-color: var(--amplify-colors-blue-60); --amplify-components-button-outlined-info-background-color: transparent; --amplify-components-button-outlined-info-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-hover-border-color: var(--amplify-colors-blue-60); --amplify-components-button-outlined-info-hover-background-color: var(--amplify-colors-blue-10); --amplify-components-button-outlined-info-hover-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-focus-border-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-focus-background-color: var(--amplify-colors-blue-10); --amplify-components-button-outlined-info-focus-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow); --amplify-components-button-outlined-info-active-border-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-active-background-color: var(--amplify-colors-blue-20); --amplify-components-button-outlined-info-active-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-warning-border-color: var(--amplify-colors-orange-60); --amplify-components-button-outlined-warning-background-color: transparent; --amplify-components-button-outlined-warning-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-hover-border-color: var(--amplify-colors-orange-60); --amplify-components-button-outlined-warning-hover-background-color: var(--amplify-colors-orange-10); --amplify-components-button-outlined-warning-hover-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-focus-border-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-focus-background-color: var(--amplify-colors-orange-10); --amplify-components-button-outlined-warning-focus-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow); --amplify-components-button-outlined-warning-active-border-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-active-background-color: var(--amplify-colors-orange-20); --amplify-components-button-outlined-warning-active-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-success-border-color: var(--amplify-colors-green-60); --amplify-components-button-outlined-success-background-color: transparent; --amplify-components-button-outlined-success-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-hover-border-color: var(--amplify-colors-green-60); --amplify-components-button-outlined-success-hover-background-color: var(--amplify-colors-green-10); --amplify-components-button-outlined-success-hover-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-focus-border-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-focus-background-color: var(--amplify-colors-green-10); --amplify-components-button-outlined-success-focus-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow); --amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20); --amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-80); --amplify-components-button-outlined-error-background-color: transparent; --amplify-components-button-outlined-error-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-80); --amplify-components-button-outlined-error-hover-background-color: var(--amplify-colors-red-10); --amplify-components-button-outlined-error-hover-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-focus-background-color: var(--amplify-colors-red-10); --amplify-components-button-outlined-error-focus-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-outlined-error-active-border-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-active-background-color: var(--amplify-colors-red-20); --amplify-components-button-outlined-error-active-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-overlay-border-color: var(--amplify-colors-overlay-60); --amplify-components-button-outlined-overlay-background-color: transparent; --amplify-components-button-outlined-overlay-color: var(--amplify-colors-font-primary); --amplify-components-button-outlined-overlay-hover-border-color: var(--amplify-colors-overlay-60); --amplify-components-button-outlined-overlay-hover-background-color: var(--amplify-colors-overlay-5); --amplify-components-button-outlined-overlay-hover-color: var(--amplify-colors-neutral-90); --amplify-components-button-outlined-overlay-focus-border-color: var(--amplify-colors-overlay-90); --amplify-components-button-outlined-overlay-focus-background-color: var(--amplify-colors-overlay-5); --amplify-components-button-outlined-overlay-focus-color: var(--amplify-colors-neutral-90); --amplify-components-button-outlined-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow); --amplify-components-button-outlined-overlay-active-border-color: var(--amplify-colors-overlay-90); --amplify-components-button-outlined-overlay-active-background-color: var(--amplify-colors-overlay-10); --amplify-components-button-outlined-overlay-active-color: var(--amplify-colors-neutral-100); --amplify-components-button-primary-border-color: transparent; --amplify-components-button-primary-border-width: var(--amplify-border-widths-small); --amplify-components-button-primary-border-style: solid; --amplify-components-button-primary-background-color: var(--amplify-colors-primary-80); --amplify-components-button-primary-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-disabled-border-color: transparent; --amplify-components-button-primary-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-button-primary-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-primary-loading-border-color: transparent; --amplify-components-button-primary-loading-background-color: var(--amplify-colors-background-disabled); --amplify-components-button-primary-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-primary-hover-border-color: transparent; --amplify-components-button-primary-hover-background-color: var(--amplify-colors-primary-90); --amplify-components-button-primary-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-focus-border-color: transparent; --amplify-components-button-primary-focus-background-color: var(--amplify-colors-primary-90); --amplify-components-button-primary-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-button-primary-active-border-color: transparent; --amplify-components-button-primary-active-background-color: var(--amplify-colors-primary-100); --amplify-components-button-primary-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-info-border-color: transparent; --amplify-components-button-primary-info-background-color: var(--amplify-colors-blue-80); --amplify-components-button-primary-info-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-info-hover-border-color: transparent; --amplify-components-button-primary-info-hover-background-color: var(--amplify-colors-blue-90); --amplify-components-button-primary-info-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-info-focus-border-color: transparent; --amplify-components-button-primary-info-focus-background-color: var(--amplify-colors-blue-90); --amplify-components-button-primary-info-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow); --amplify-components-button-primary-info-active-border-color: transparent; --amplify-components-button-primary-info-active-background-color: var(--amplify-colors-blue-100); --amplify-components-button-primary-info-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-warning-border-color: transparent; --amplify-components-button-primary-warning-background-color: var(--amplify-colors-orange-80); --amplify-components-button-primary-warning-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-warning-hover-border-color: transparent; --amplify-components-button-primary-warning-hover-background-color: var(--amplify-colors-orange-90); --amplify-components-button-primary-warning-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-warning-focus-border-color: transparent; --amplify-components-button-primary-warning-focus-background-color: var(--amplify-colors-orange-90); --amplify-components-button-primary-warning-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow); --amplify-components-button-primary-warning-active-border-color: transparent; --amplify-components-button-primary-warning-active-background-color: var(--amplify-colors-orange-100); --amplify-components-button-primary-warning-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-error-border-color: transparent; --amplify-components-button-primary-error-background-color: var(--amplify-colors-red-80); --amplify-components-button-primary-error-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-error-hover-border-color: transparent; --amplify-components-button-primary-error-hover-background-color: var(--amplify-colors-red-90); --amplify-components-button-primary-error-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-error-focus-border-color: transparent; --amplify-components-button-primary-error-focus-background-color: var(--amplify-colors-red-90); --amplify-components-button-primary-error-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-primary-error-active-border-color: transparent; --amplify-components-button-primary-error-active-background-color: var(--amplify-colors-red-100); --amplify-components-button-primary-error-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-success-border-color: transparent; --amplify-components-button-primary-success-background-color: var(--amplify-colors-green-80); --amplify-components-button-primary-success-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-success-hover-border-color: transparent; --amplify-components-button-primary-success-hover-background-color: var(--amplify-colors-green-90); --amplify-components-button-primary-success-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-success-focus-border-color: transparent; --amplify-components-button-primary-success-focus-background-color: var(--amplify-colors-green-90); --amplify-components-button-primary-success-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow); --amplify-components-button-primary-success-active-border-color: transparent; --amplify-components-button-primary-success-active-background-color: var(--amplify-colors-green-100); --amplify-components-button-primary-success-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-overlay-border-color: transparent; --amplify-components-button-primary-overlay-background-color: var(--amplify-colors-overlay-70); --amplify-components-button-primary-overlay-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-overlay-hover-border-color: transparent; --amplify-components-button-primary-overlay-hover-background-color: var(--amplify-colors-overlay-90); --amplify-components-button-primary-overlay-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-overlay-focus-border-color: transparent; --amplify-components-button-primary-overlay-focus-background-color: var(--amplify-colors-overlay-90); --amplify-components-button-primary-overlay-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow); --amplify-components-button-primary-overlay-active-border-color: transparent; --amplify-components-button-primary-overlay-active-background-color: var(--amplify-colors-overlay-90); --amplify-components-button-primary-overlay-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-menu-border-width: var(--amplify-space-zero); --amplify-components-button-menu-background-color: transparent; --amplify-components-button-menu-justify-content: start; --amplify-components-button-menu-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-menu-hover-background-color: var(--amplify-colors-primary-80); --amplify-components-button-menu-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-menu-focus-background-color: var(--amplify-colors-primary-80); --amplify-components-button-menu-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-menu-active-background-color: var(--amplify-colors-primary-90); --amplify-components-button-menu-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-link-background-color: transparent; --amplify-components-button-link-border-color: transparent; --amplify-components-button-link-border-width: var(--amplify-border-widths-small); --amplify-components-button-link-color: var(--amplify-colors-font-interactive); --amplify-components-button-link-hover-border-color: transparent; --amplify-components-button-link-hover-background-color: var(--amplify-colors-primary-10); --amplify-components-button-link-hover-color: var(--amplify-colors-font-hover); --amplify-components-button-link-focus-border-color: transparent; --amplify-components-button-link-focus-background-color: var(--amplify-colors-primary-10); --amplify-components-button-link-focus-color: var(--amplify-colors-font-focus); --amplify-components-button-link-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-button-link-active-border-color: transparent; --amplify-components-button-link-active-background-color: var(--amplify-colors-primary-20); --amplify-components-button-link-active-color: var(--amplify-colors-font-active); --amplify-components-button-link-disabled-border-color: transparent; --amplify-components-button-link-disabled-background-color: transparent; --amplify-components-button-link-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-link-loading-border-color: transparent; --amplify-components-button-link-loading-background-color: transparent; --amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-link-info-border-color: transparent; --amplify-components-button-link-info-background-color: transparent; --amplify-components-button-link-info-color: var(--amplify-colors-blue-100); --amplify-components-button-link-info-hover-border-color: transparent; --amplify-components-button-link-info-hover-background-color: var(--amplify-colors-blue-10); --amplify-components-button-link-info-hover-color: var(--amplify-colors-blue-90); --amplify-components-button-link-info-focus-border-color: transparent; --amplify-components-button-link-info-focus-background-color: var(--amplify-colors-blue-10); --amplify-components-button-link-info-focus-color: var(--amplify-colors-blue-100); --amplify-components-button-link-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow); --amplify-components-button-link-info-active-border-color: transparent; --amplify-components-button-link-info-active-background-color: var(--amplify-colors-blue-20); --amplify-components-button-link-info-active-color: var(--amplify-colors-blue-100); --amplify-components-button-link-warning-border-color: transparent; --amplify-components-button-link-warning-background-color: transparent; --amplify-components-button-link-warning-color: var(--amplify-colors-orange-100); --amplify-components-button-link-warning-hover-border-color: transparent; --amplify-components-button-link-warning-hover-background-color: var(--amplify-colors-orange-10); --amplify-components-button-link-warning-hover-color: var(--amplify-colors-orange-90); --amplify-components-button-link-warning-focus-border-color: transparent; --amplify-components-button-link-warning-focus-background-color: var(--amplify-colors-orange-10); --amplify-components-button-link-warning-focus-color: var(--amplify-colors-orange-100); --amplify-components-button-link-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow); --amplify-components-button-link-warning-active-border-color: transparent; --amplify-components-button-link-warning-active-background-color: var(--amplify-colors-orange-20); --amplify-components-button-link-warning-active-color: var(--amplify-colors-orange-100); --amplify-components-button-link-success-border-color: transparent; --amplify-components-button-link-success-background-color: transparent; --amplify-components-button-link-success-color: var(--amplify-colors-green-100); --amplify-components-button-link-success-hover-border-color: transparent; --amplify-components-button-link-success-hover-background-color: var(--amplify-colors-green-10); --amplify-components-button-link-success-hover-color: var(--amplify-colors-green-90); --amplify-components-button-link-success-focus-border-color: transparent; --amplify-components-button-link-success-focus-background-color: var(--amplify-colors-green-10); --amplify-components-button-link-success-focus-color: var(--amplify-colors-green-100); --amplify-components-button-link-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow); --amplify-components-button-link-success-active-border-color: transparent; --amplify-components-button-link-success-active-background-color: var(--amplify-colors-green-20); --amplify-components-button-link-success-active-color: var(--amplify-colors-green-100); --amplify-components-button-link-error-border-color: transparent; --amplify-components-button-link-error-background-color: transparent; --amplify-components-button-link-error-color: var(--amplify-colors-red-100); --amplify-components-button-link-error-hover-border-color: transparent; --amplify-components-button-link-error-hover-background-color: var(--amplify-colors-red-10); --amplify-components-button-link-error-hover-color: var(--amplify-colors-red-90); --amplify-components-button-link-error-focus-border-color: transparent; --amplify-components-button-link-error-focus-background-color: var(--amplify-colors-red-10); --amplify-components-button-link-error-focus-color: var(--amplify-colors-red-100); --amplify-components-button-link-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-link-error-active-border-color: transparent; --amplify-components-button-link-error-active-background-color: var(--amplify-colors-red-20); --amplify-components-button-link-error-active-color: var(--amplify-colors-red-100); --amplify-components-button-link-overlay-border-color: transparent; --amplify-components-button-link-overlay-background-color: transparent; --amplify-components-button-link-overlay-color: var(--amplify-colors-neutral-100); --amplify-components-button-link-overlay-hover-border-color: transparent; --amplify-components-button-link-overlay-hover-background-color: var(--amplify-colors-overlay-5); --amplify-components-button-link-overlay-hover-color: var(--amplify-colors-overlay-80); --amplify-components-button-link-overlay-focus-border-color: transparent; --amplify-components-button-link-overlay-focus-background-color: var(--amplify-colors-overlay-5); --amplify-components-button-link-overlay-focus-color: var(--amplify-colors-overlay-90); --amplify-components-button-link-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow); --amplify-components-button-link-overlay-active-border-color: transparent; --amplify-components-button-link-overlay-active-background-color: var(--amplify-colors-overlay-10); --amplify-components-button-link-overlay-active-color: var(--amplify-colors-overlay-90); --amplify-components-button-warning-background-color: transparent; --amplify-components-button-warning-border-color: var(--amplify-colors-red-60); --amplify-components-button-warning-border-width: var(--amplify-border-widths-small); --amplify-components-button-warning-color: var(--amplify-colors-red-60); --amplify-components-button-warning-hover-border-color: var(--amplify-colors-red-80); --amplify-components-button-warning-hover-background-color: var(--amplify-colors-red-10); --amplify-components-button-warning-hover-color: var(--amplify-colors-font-error); --amplify-components-button-warning-focus-border-color: var(--amplify-colors-red-80); --amplify-components-button-warning-focus-background-color: var(--amplify-colors-red-10); --amplify-components-button-warning-focus-color: var(--amplify-colors-red-80); --amplify-components-button-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-warning-active-border-color: var(--amplify-colors-red-100); --amplify-components-button-warning-active-background-color: var(--amplify-colors-red-20); --amplify-components-button-warning-active-color: var(--amplify-colors-red-100); --amplify-components-button-warning-disabled-border-color: var(--amplify-colors-border-tertiary); --amplify-components-button-warning-disabled-background-color: transparent; --amplify-components-button-warning-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-warning-loading-border-color: var(--amplify-colors-border-tertiary); --amplify-components-button-warning-loading-background-color: transparent; --amplify-components-button-warning-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-destructive-border-color: transparent; --amplify-components-button-destructive-border-width: var(--amplify-border-widths-small); --amplify-components-button-destructive-border-style: solid; --amplify-components-button-destructive-background-color: var(--amplify-colors-red-60); --amplify-components-button-destructive-color: var(--amplify-colors-font-inverse); --amplify-components-button-destructive-disabled-border-color: transparent; --amplify-components-button-destructive-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-button-destructive-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-destructive-loading-border-color: transparent; --amplify-components-button-destructive-loading-background-color: var(--amplify-colors-background-disabled); --amplify-components-button-destructive-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-destructive-hover-border-color: transparent; --amplify-components-button-destructive-hover-background-color: var(--amplify-colors-red-80); --amplify-components-button-destructive-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-destructive-focus-border-color: transparent; --amplify-components-button-destructive-focus-background-color: var(--amplify-colors-red-80); --amplify-components-button-destructive-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-destructive-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-destructive-active-border-color: transparent; --amplify-components-button-destructive-active-background-color: var(--amplify-colors-red-100); --amplify-components-button-destructive-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-small-font-size: var(--amplify-components-fieldcontrol-small-font-size); --amplify-components-button-small-padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start); --amplify-components-button-small-padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end); --amplify-components-button-small-padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start); --amplify-components-button-small-padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end); --amplify-components-button-large-font-size: var(--amplify-components-fieldcontrol-large-font-size); --amplify-components-button-large-padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start); --amplify-components-button-large-padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end); --amplify-components-button-large-padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start); --amplify-components-button-large-padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end); --amplify-components-button-loader-wrapper-align-items: center; --amplify-components-button-loader-wrapper-gap: var(--amplify-space-xs); --amplify-components-card-background-color: var(--amplify-colors-background-primary); --amplify-components-card-border-radius: var(--amplify-radii-xs); --amplify-components-card-border-width: 0; --amplify-components-card-border-style: solid; --amplify-components-card-border-color: transparent; --amplify-components-card-box-shadow: none; --amplify-components-card-padding: var(--amplify-space-medium); --amplify-components-card-outlined-background-color: var(--amplify-components-card-background-color); --amplify-components-card-outlined-border-radius: var(--amplify-radii-xs); --amplify-components-card-outlined-border-width: var(--amplify-border-widths-small); --amplify-components-card-outlined-border-style: solid; --amplify-components-card-outlined-border-color: var(--amplify-colors-border-primary); --amplify-components-card-outlined-box-shadow: var(--amplify-components-card-box-shadow); --amplify-components-card-elevated-background-color: var(--amplify-components-card-background-color); --amplify-components-card-elevated-border-radius: var(--amplify-radii-xs); --amplify-components-card-elevated-border-width: 0; --amplify-components-card-elevated-border-style: solid; --amplify-components-card-elevated-border-color: transparent; --amplify-components-card-elevated-box-shadow: var(--amplify-shadows-medium); --amplify-components-checkbox-cursor: pointer; --amplify-components-checkbox-align-items: center; --amplify-components-checkbox-disabled-cursor: not-allowed; --amplify-components-checkbox-button-position: relative; --amplify-components-checkbox-button-align-items: center; --amplify-components-checkbox-button-justify-content: center; --amplify-components-checkbox-button-color: var(--amplify-colors-font-inverse); --amplify-components-checkbox-button-before-width: 100%; --amplify-components-checkbox-button-before-height: 100%; --amplify-components-checkbox-button-before-border-width: var(--amplify-border-widths-medium); --amplify-components-checkbox-button-before-border-radius: 20%; --amplify-components-checkbox-button-before-border-style: solid; --amplify-components-checkbox-button-before-border-color: var(--amplify-colors-border-primary); --amplify-components-checkbox-button-focus-outline-color: var(--amplify-colors-transparent); --amplify-components-checkbox-button-focus-outline-style: solid; --amplify-components-checkbox-button-focus-outline-width: var(--amplify-outline-widths-medium); --amplify-components-checkbox-button-focus-outline-offset: var(--amplify-outline-offsets-medium); --amplify-components-checkbox-button-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-checkbox-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-checkbox-button-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-checkbox-button-error-border-color: var(--amplify-colors-border-error); --amplify-components-checkbox-button-error-focus-border-color: var(--amplify-colors-border-error); --amplify-components-checkbox-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-checkbox-icon-background-color: var(--amplify-colors-primary-80); --amplify-components-checkbox-icon-border-radius: 20%; --amplify-components-checkbox-icon-opacity: var(--amplify-opacities-0); --amplify-components-checkbox-icon-transform: scale(0); --amplify-components-checkbox-icon-transition-property: all; --amplify-components-checkbox-icon-transition-duration: var(--amplify-time-short); --amplify-components-checkbox-icon-transition-timing-function: ease-in-out; --amplify-components-checkbox-icon-checked-opacity: var(--amplify-opacities-100); --amplify-components-checkbox-icon-checked-transform: scale(1); --amplify-components-checkbox-icon-checked-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-checkbox-icon-indeterminate-opacity: var(--amplify-opacities-100); --amplify-components-checkbox-icon-indeterminate-transform: scale(1); --amplify-components-checkbox-icon-indeterminate-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-checkbox-label-color: var(--amplify-components-text-color); --amplify-components-checkbox-label-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-checkboxfield-align-items: flex-start; --amplify-components-checkboxfield-align-content: center; --amplify-components-checkboxfield-flex-direction: column; --amplify-components-checkboxfield-justify-content: center; --amplify-components-collection-pagination-current-color: var(--amplify-components-pagination-current-color); --amplify-components-collection-pagination-current-background-color: var(--amplify-components-pagination-current-background-color); --amplify-components-collection-pagination-button-color: var(--amplify-components-pagination-button-color); --amplify-components-collection-pagination-button-hover-background-color: var(--amplify-components-pagination-button-hover-background-color); --amplify-components-collection-pagination-button-hover-color: var(--amplify-components-pagination-button-hover-color); --amplify-components-collection-pagination-button-disabled-color: var(--amplify-components-pagination-button-disabled-color); --amplify-components-collection-search-input-color: var(--amplify-components-searchfield-color); --amplify-components-collection-search-button-color: var(--amplify-components-searchfield-button-color); --amplify-components-collection-search-button-active-background-color: var(--amplify-components-searchfield-button-active-background-color); --amplify-components-collection-search-button-active-border-color: var(--amplify-components-searchfield-button-active-border-color); --amplify-components-collection-search-button-active-color: var(--amplify-components-searchfield-button-active-color); --amplify-components-collection-search-button-disabled-background-color: var(--amplify-components-searchfield-button-disabled-background-color); --amplify-components-collection-search-button-disabled-border-color: var(--amplify-components-searchfield-button-disabled-border-color); --amplify-components-collection-search-button-disabled-color: var(--amplify-components-searchfield-button-disabled-color); --amplify-components-collection-search-button-focus-background-color: var(--amplify-components-searchfield-button-focus-background-color); --amplify-components-collection-search-button-focus-border-color: var(--amplify-components-searchfield-button-focus-border-color); --amplify-components-collection-search-button-focus-color: var(--amplify-components-searchfield-button-focus-color); --amplify-components-collection-search-button-hover-background-color: var(--amplify-components-searchfield-button-hover-background-color); --amplify-components-collection-search-button-hover-border-color: var(--amplify-components-searchfield-button-hover-border-color); --amplify-components-collection-search-button-hover-color: var(--amplify-components-searchfield-button-hover-color); --amplify-components-copy-font-size: var(--amplify-font-sizes-xs); --amplify-components-copy-gap: var(--amplify-space-relative-medium); --amplify-components-copy-svg-path-fill: var(--amplify-colors-font-primary); --amplify-components-copy-tool-tip-bottom: var(--amplify-space-large); --amplify-components-copy-tool-tip-color: var(--amplify-colors-teal-100); --amplify-components-copy-tool-tip-font-size: var(--amplify-font-sizes-xxs); --amplify-components-countrycodeselect-height: var(--amplify-space-relative-full); --amplify-components-divider-border-style: solid; --amplify-components-divider-border-color: var(--amplify-colors-border-primary); --amplify-components-divider-border-width: var(--amplify-border-widths-medium); --amplify-components-divider-label-color: var(--amplify-colors-font-tertiary); --amplify-components-divider-label-padding-inline: var(--amplify-space-medium); --amplify-components-divider-label-font-size: var(--amplify-font-sizes-small); --amplify-components-divider-label-background-color: var(--amplify-colors-background-primary); --amplify-components-divider-small-border-width: var(--amplify-border-widths-small); --amplify-components-divider-large-border-width: var(--amplify-border-widths-large); --amplify-components-divider-opacity: var(--amplify-opacities-60); --amplify-components-dropzone-background-color: var(--amplify-colors-background-primary); --amplify-components-dropzone-border-radius: var(--amplify-radii-small); --amplify-components-dropzone-border-color: var(--amplify-colors-border-primary); --amplify-components-dropzone-border-style: dashed; --amplify-components-dropzone-border-width: var(--amplify-border-widths-small); --amplify-components-dropzone-color: var(--amplify-colors-font-primary); --amplify-components-dropzone-gap: var(--amplify-space-small); --amplify-components-dropzone-padding-block: var(--amplify-space-xl); --amplify-components-dropzone-padding-inline: var(--amplify-space-large); --amplify-components-dropzone-text-align: center; --amplify-components-dropzone-active-background-color: var(--amplify-colors-primary-10); --amplify-components-dropzone-active-border-radius: var(--amplify-components-dropzone-border-radius); --amplify-components-dropzone-active-border-color: var(--amplify-colors-border-pressed); --amplify-components-dropzone-active-border-style: var(--amplify-components-dropzone-border-style); --amplify-components-dropzone-active-border-width: var(--amplify-components-dropzone-border-width); --amplify-components-dropzone-active-color: var(--amplify-colors-font-primary); --amplify-components-dropzone-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-dropzone-disabled-border-radius: var(--amplify-components-dropzone-border-radius); --amplify-components-dropzone-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-dropzone-disabled-border-style: var(--amplify-components-dropzone-border-style); --amplify-components-dropzone-disabled-border-width: var(--amplify-components-dropzone-border-width); --amplify-components-dropzone-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-dropzone-accepted-background-color: var(--amplify-colors-background-success); --amplify-components-dropzone-accepted-border-radius: var(--amplify-components-dropzone-border-radius); --amplify-components-dropzone-accepted-border-color: var(--amplify-colors-border-success); --amplify-components-dropzone-accepted-border-style: var(--amplify-components-dropzone-border-style); --amplify-components-dropzone-accepted-border-width: var(--amplify-components-dropzone-border-width); --amplify-components-dropzone-accepted-color: var(--amplify-colors-font-success); --amplify-components-dropzone-rejected-background-color: var(--amplify-colors-background-error); --amplify-components-dropzone-rejected-border-radius: var(--amplify-components-dropzone-border-radius); --amplify-components-dropzone-rejected-border-color: var(--amplify-colors-border-pressed); --amplify-components-dropzone-rejected-border-style: var(--amplify-components-dropzone-border-style); --amplify-components-dropzone-rejected-border-width: var(--amplify-components-dropzone-border-width); --amplify-components-dropzone-rejected-color: var(--amplify-colors-font-error); --amplify-components-field-gap: var(--amplify-space-xs); --amplify-components-field-font-size: var(--amplify-font-sizes-medium); --amplify-components-field-flex-direction: column; --amplify-components-field-small-gap: var(--amplify-space-xxxs); --amplify-components-field-small-font-size: var(--amplify-font-sizes-small); --amplify-components-field-large-gap: var(--amplify-space-small); --amplify-components-field-large-font-size: var(--amplify-font-sizes-large); --amplify-components-field-label-color: var(--amplify-colors-font-secondary); --amplify-components-fieldcontrol-border-style: solid; --amplify-components-fieldcontrol-border-color: var(--amplify-colors-border-primary); --amplify-components-fieldcontrol-border-width: var(--amplify-border-widths-small); --amplify-components-fieldcontrol-border-radius: var(--amplify-radii-small); --amplify-components-fieldcontrol-color: var(--amplify-colors-font-primary); --amplify-components-fieldcontrol-padding-block-start: var(--amplify-space-xs); --amplify-components-fieldcontrol-padding-block-end: var(--amplify-space-xs); --amplify-components-fieldcontrol-padding-inline-start: var(--amplify-space-medium); --amplify-components-fieldcontrol-padding-inline-end: var(--amplify-space-medium); --amplify-components-fieldcontrol-font-size: var(--amplify-components-field-font-size); --amplify-components-fieldcontrol-line-height: var(--amplify-line-heights-medium); --amplify-components-fieldcontrol-transition-duration: var(--amplify-time-medium); --amplify-components-fieldcontrol-outline-color: var(--amplify-colors-transparent); --amplify-components-fieldcontrol-outline-style: solid; --amplify-components-fieldcontrol-outline-width: var(--amplify-outline-widths-medium); --amplify-components-fieldcontrol-outline-offset: var(--amplify-outline-offsets-medium); --amplify-components-fieldcontrol-small-font-size: var(--amplify-components-field-small-font-size); --amplify-components-fieldcontrol-small-padding-block-start: var(--amplify-space-xxs); --amplify-components-fieldcontrol-small-padding-block-end: var(--amplify-space-xxs); --amplify-components-fieldcontrol-small-padding-inline-start: var(--amplify-space-small); --amplify-components-fieldcontrol-small-padding-inline-end: var(--amplify-space-small); --amplify-components-fieldcontrol-large-font-size: var(--amplify-components-field-large-font-size); --amplify-components-fieldcontrol-large-padding-block-start: var(--amplify-space-xs); --amplify-components-fieldcontrol-large-padding-block-end: var(--amplify-space-xs); --amplify-components-fieldcontrol-large-padding-inline-start: var(--amplify-space-medium); --amplify-components-fieldcontrol-large-padding-inline-end: var(--amplify-space-medium); --amplify-components-fieldcontrol-quiet-border-style: none; --amplify-components-fieldcontrol-quiet-border-inline-start: none; --amplify-components-fieldcontrol-quiet-border-inline-end: none; --amplify-components-fieldcontrol-quiet-border-block-start: none; --amplify-components-fieldcontrol-quiet-border-radius: 0; --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: transparent; --amplify-components-fieldcontrol-quiet-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-fieldcontrol-quiet-error-border-block-end-color: var(--amplify-colors-border-error); --amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color: transparent; --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-fieldcontrol-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus); --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-fieldcontrol-disabled-cursor: not-allowed; --amplify-components-fieldcontrol-disabled-border-color: var(--amplify-colors-transparent); --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error); --amplify-components-fieldcontrol-error-color: var(--amplify-colors-font-error); --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error); --amplify-components-fieldcontrol-info-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-blue-100); --amplify-components-fieldcontrol-warning-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-orange-100); --amplify-components-fieldcontrol-success-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-green-100); --amplify-components-fieldcontrol-overlay-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-overlay-90); --amplify-components-fieldgroup-gap: var(--amplify-space-zero); --amplify-components-fieldgroup-vertical-align-items: center; --amplify-components-fieldgroup-outer-align-items: center; --amplify-components-fieldmessages-error-color: var(--amplify-colors-font-error); --amplify-components-fieldmessages-error-font-size: var(--amplify-font-sizes-small); --amplify-components-fieldmessages-description-color: var(--amplify-colors-font-secondary); --amplify-components-fieldmessages-description-font-style: italic; --amplify-components-fieldmessages-description-font-size: var(--amplify-font-sizes-small); --amplify-components-fieldset-background-color: transparent; --amplify-components-fieldset-border-radius: var(--amplify-radii-xs); --amplify-components-fieldset-flex-direction: column; --amplify-components-fieldset-gap: var(--amplify-components-field-gap); --amplify-components-fieldset-legend-color: var(--amplify-colors-font-primary); --amplify-components-fieldset-legend-font-size: var(--amplify-components-field-font-size); --amplify-components-fieldset-legend-font-weight: var(--amplify-font-weights-bold); --amplify-components-fieldset-legend-line-height: var(--amplify-line-heights-medium); --amplify-components-fieldset-legend-small-font-size: var(--amplify-components-field-small-font-size); --amplify-components-fieldset-legend-large-font-size: var(--amplify-components-field-large-font-size); --amplify-components-fieldset-outlined-padding: var(--amplify-space-medium); --amplify-components-fieldset-outlined-border-color: var(--amplify-colors-neutral-40); --amplify-components-fieldset-outlined-border-width: var(--amplify-border-widths-small); --amplify-components-fieldset-outlined-border-style: solid; --amplify-components-fieldset-outlined-small-padding: var(--amplify-space-small); --amplify-components-fieldset-outlined-large-padding: var(--amplify-space-large); --amplify-components-fieldset-small-gap: var(--amplify-components-field-small-gap); --amplify-components-fieldset-large-gap: var(--amplify-components-field-large-gap); --amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary); --amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small); --amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary); --amplify-components-fileuploader-dropzone-border-style: dashed; --amplify-components-fileuploader-dropzone-border-width: var(--amplify-border-widths-small); --amplify-components-fileuploader-dropzone-gap: var(--amplify-space-small); --amplify-components-fileuploader-dropzone-padding-block: var(--amplify-space-xl); --amplify-components-fileuploader-dropzone-padding-inline: var(--amplify-space-large); --amplify-components-fileuploader-dropzone-text-align: center; --amplify-components-fileuploader-dropzone-active-background-color: var(--amplify-colors-primary-10); --amplify-components-fileuploader-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius); --amplify-components-fileuploader-dropzone-active-border-color: var(--amplify-colors-border-pressed); --amplify-components-fileuploader-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style); --amplify-components-fileuploader-dropzone-active-border-width: var(--amplify-border-widths-medium); --amplify-components-fileuploader-dropzone-icon-color: var(--amplify-colors-border-primary); --amplify-components-fileuploader-dropzone-icon-font-size: var(--amplify-font-sizes-xxl); --amplify-components-fileuploader-dropzone-text-color: var(--amplify-colors-font-tertiary); --amplify-components-fileuploader-dropzone-text-font-size: var(--amplify-font-sizes-medium); --amplify-components-fileuploader-dropzone-text-font-weight: var(--amplify-font-weights-bold); --amplify-components-fileuploader-file-background-color: var(--amplify-colors-background-primary); --amplify-components-fileuploader-file-border-radius: var(--amplify-radii-small); --amplify-components-fileuploader-file-border-color: var(--amplify-colors-border-primary); --amplify-components-fileuploader-file-border-style: solid; --amplify-components-fileuploader-file-border-width: var(--amplify-border-widths-small); --amplify-components-fileuploader-file-padding-block: var(--amplify-space-xs); --amplify-components-fileuploader-file-padding-inline: var(--amplify-space-small); --amplify-components-fileuploader-file-gap: var(--amplify-space-small); --amplify-components-fileuploader-file-align-items: baseline; --amplify-components-fileuploader-file-name-font-size: var(--amplify-font-sizes-medium); --amplify-components-fileuploader-file-name-font-weight: var(--amplify-font-weights-bold); --amplify-components-fileuploader-file-name-color: var(--amplify-colors-font-primary); --amplify-components-fileuploader-file-size-font-size: var(--amplify-font-sizes-small); --amplify-components-fileuploader-file-size-font-weight: var(--amplify-font-weights-normal); --amplify-components-fileuploader-file-size-color: var(--amplify-colors-font-tertiary); --amplify-components-fileuploader-file-image-width: var(--amplify-space-xxl); --amplify-components-fileuploader-file-image-height: var(--amplify-space-xxl); --amplify-components-fileuploader-file-image-background-color: var(--amplify-colors-background-secondary); --amplify-components-fileuploader-file-image-color: var(--amplify-colors-font-tertiary); --amplify-components-fileuploader-file-image-border-radius: var(--amplify-radii-small); --amplify-components-fileuploader-filelist-flex-direction: column; --amplify-components-fileuploader-filelist-gap: var(--amplify-space-small); --amplify-components-fileuploader-loader-stroke-linecap: round; --amplify-components-fileuploader-loader-stroke-empty: var(--amplify-colors-border-secondary); --amplify-components-fileuploader-loader-stroke-filled: var(--amplify-components-loader-stroke-filled); --amplify-components-fileuploader-loader-stroke-width: var(--amplify-border-widths-large); --amplify-components-fileuploader-previewer-background-color: var(--amplify-colors-background-primary); --amplify-components-fileuploader-previewer-border-color: var(--amplify-colors-border-primary); --amplify-components-fileuploader-previewer-border-style: solid; --amplify-components-fileuploader-previewer-border-width: var(--amplify-border-widths-small); --amplify-components-fileuploader-previewer-border-radius: var(--amplify-radii-small); --amplify-components-fileuploader-previewer-padding-block: var(--amplify-space-zero); --amplify-components-fileuploader-previewer-padding-inline: var(--amplify-space-zero); --amplify-components-fileuploader-previewer-max-height: 40rem; --amplify-components-fileuploader-previewer-max-width: auto; --amplify-components-fileuploader-previewer-text-font-size: var(--amplify-font-sizes-medium); --amplify-components-fileuploader-previewer-text-font-weight: var(--amplify-font-weights-bold); --amplify-components-fileuploader-previewer-text-color: var(--amplify-colors-font-primary); --amplify-components-fileuploader-previewer-body-padding-block: var(--amplify-space-medium); --amplify-components-fileuploader-previewer-body-padding-inline: var(--amplify-space-medium); --amplify-components-fileuploader-previewer-body-gap: var(--amplify-space-small); --amplify-components-fileuploader-previewer-footer-justify-content: flex-end; --amplify-components-flex-gap: var(--amplify-space-medium); --amplify-components-flex-justify-content: normal; --amplify-components-flex-align-items: stretch; --amplify-components-flex-align-content: normal; --amplify-components-flex-flex-wrap: nowrap; --amplify-components-heading-1-font-size: var(--amplify-font-sizes-xxxxl); --amplify-components-heading-1-font-weight: var(--amplify-font-weights-light); --amplify-components-heading-2-font-size: var(--amplify-font-sizes-xxxl); --amplify-components-heading-2-font-weight: var(--amplify-font-weights-normal); --amplify-components-heading-3-font-size: var(--amplify-font-sizes-xxl); --amplify-components-heading-3-font-weight: var(--amplify-font-weights-medium); --amplify-components-heading-4-font-size: var(--amplify-font-sizes-xl); --amplify-components-heading-4-font-weight: var(--amplify-font-weights-semibold); --amplify-components-heading-5-font-size: var(--amplify-font-sizes-large); --amplify-components-heading-5-font-weight: var(--amplify-font-weights-bold); --amplify-components-heading-6-font-size: var(--amplify-font-sizes-medium); --amplify-components-heading-6-font-weight: var(--amplify-font-weights-extrabold); --amplify-components-heading-color: var(--amplify-colors-font-primary); --amplify-components-heading-line-height: var(--amplify-line-heights-small); --amplify-components-icon-line-height: 1; --amplify-components-icon-height: 1em; --amplify-components-highlightmatch-highlighted-font-weight: var(--amplify-font-weights-bold); --amplify-components-image-max-width: 100%; --amplify-components-image-height: auto; --amplify-components-image-object-fit: initial; --amplify-components-image-object-position: initial; --amplify-components-inappmessaging-banner-height: 150px ; --amplify-components-inappmessaging-banner-width: 400px ; --amplify-components-inappmessaging-button-background-color: #e8e8e8; --amplify-components-inappmessaging-button-border-radius: 5px; --amplify-components-inappmessaging-button-color: black; --amplify-components-inappmessaging-dialog-height: 50vh; --amplify-components-inappmessaging-dialog-min-height: 400px; --amplify-components-inappmessaging-dialog-min-width: 400px; --amplify-components-inappmessaging-dialog-width: 30vw; --amplify-components-inappmessaging-header-font-size: var(--amplify-font-sizes-medium); --amplify-components-inappmessaging-header-font-weight: var(--amplify-font-weights-extrabold); --amplify-components-input-color: var(--amplify-components-fieldcontrol-color); --amplify-components-input-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-input-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-input-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-link-active-color: var(--amplify-colors-font-active); --amplify-components-link-color: var(--amplify-colors-font-interactive); --amplify-components-link-focus-color: var(--amplify-colors-font-focus); --amplify-components-link-hover-color: var(--amplify-colors-font-hover); --amplify-components-link-visited-color: var(--amplify-colors-font-interactive); --amplify-components-liveness-camera-module-background-color: var(--amplify-colors-background-primary); --amplify-components-loader-width: var(--amplify-font-sizes-medium); --amplify-components-loader-height: var(--amplify-font-sizes-medium); --amplify-components-loader-font-size: var(--amplify-font-sizes-xs); --amplify-components-loader-stroke-empty: var(--amplify-colors-neutral-20); --amplify-components-loader-stroke-filled: var(--amplify-colors-primary-80); --amplify-components-loader-stroke-linecap: round; --amplify-components-loader-animation-duration: 1s; --amplify-components-loader-small-width: var(--amplify-font-sizes-small); --amplify-components-loader-small-height: var(--amplify-font-sizes-small); --amplify-components-loader-small-font-size: var(--amplify-font-sizes-xxs); --amplify-components-loader-large-width: var(--amplify-font-sizes-large); --amplify-components-loader-large-height: var(--amplify-font-sizes-large); --amplify-components-loader-large-font-size: var(--amplify-font-sizes-small); --amplify-components-loader-linear-width: 100%; --amplify-components-loader-linear-min-width: 5rem; --amplify-components-loader-linear-font-size: var(--amplify-font-sizes-xxs); --amplify-components-loader-linear-stroke-width: var(--amplify-font-sizes-xxs); --amplify-components-loader-linear-stroke-filled: var(--amplify-colors-primary-80); --amplify-components-loader-linear-stroke-empty: var(--amplify-colors-neutral-20); --amplify-components-loader-linear-stroke-linecap: round; --amplify-components-loader-linear-animation-duration: 1s; --amplify-components-loader-linear-small-stroke-width: var(--amplify-font-sizes-xxxs); --amplify-components-loader-linear-small-font-size: var(--amplify-font-sizes-xxxs); --amplify-components-loader-linear-large-stroke-width: var(--amplify-font-sizes-xs); --amplify-components-loader-linear-large-font-size: var(--amplify-font-sizes-xs); --amplify-components-loader-text-fill: var(--amplify-colors-font-primary); --amplify-components-menu-background-color: var(--amplify-colors-background-primary); --amplify-components-menu-border-radius: var(--amplify-radii-medium); --amplify-components-menu-border-width: var(--amplify-border-widths-small); --amplify-components-menu-border-style: solid; --amplify-components-menu-border-color: var(--amplify-colors-border-primary); --amplify-components-menu-box-shadow: var(--amplify-shadows-large); --amplify-components-menu-flex-direction: column; --amplify-components-menu-gap: var(--amplify-space-zero); --amplify-components-menu-max-width: 30rem; --amplify-components-menu-min-width: 14rem; --amplify-components-menu-small-width: var(--amplify-font-sizes-medium); --amplify-components-menu-small-height: var(--amplify-font-sizes-medium); --amplify-components-menu-large-width: var(--amplify-font-sizes-xxxl); --amplify-components-menu-large-height: var(--amplify-font-sizes-xxxl); --amplify-components-menu-item-min-height: 2.5rem; --amplify-components-menu-item-padding-inline-start: var(--amplify-space-medium); --amplify-components-menu-item-padding-inline-end: var(--amplify-space-medium); --amplify-components-message-align-items: center; --amplify-components-message-background-color: var(--amplify-colors-background-tertiary); --amplify-components-message-border-color: transparent; --amplify-components-message-border-style: solid; --amplify-components-message-border-width: var(--amplify-border-widths-small); --amplify-components-message-border-radius: var(--amplify-radii-xs); --amplify-components-message-color: var(--amplify-colors-font-primary); --amplify-components-message-justify-content: flex-start; --amplify-components-message-padding-block: var(--amplify-space-small); --amplify-components-message-padding-inline: var(--amplify-space-medium); --amplify-components-message-line-height: var(--amplify-line-heights-small); --amplify-components-message-icon-size: var(--amplify-font-sizes-xl); --amplify-components-message-heading-font-size: var(--amplify-font-sizes-medium); --amplify-components-message-heading-font-weight: var(--amplify-font-weights-bold); --amplify-components-message-dismiss-gap: var(--amplify-space-xxs); --amplify-components-message-plain-color: var(--amplify-colors-font-primary); --amplify-components-message-plain-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-border-color: transparent; --amplify-components-message-plain-info-color: var(--amplify-colors-font-info); --amplify-components-message-plain-info-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-info-border-color: transparent; --amplify-components-message-plain-error-color: var(--amplify-colors-font-error); --amplify-components-message-plain-error-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-error-border-color: transparent; --amplify-components-message-plain-success-color: var(--amplify-colors-font-success); --amplify-components-message-plain-success-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-success-border-color: transparent; --amplify-components-message-plain-warning-color: var(--amplify-colors-font-warning); --amplify-components-message-plain-warning-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-warning-border-color: transparent; --amplify-components-message-outlined-color: var(--amplify-colors-font-primary); --amplify-components-message-outlined-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-border-color: var(--amplify-colors-border-primary); --amplify-components-message-outlined-info-color: var(--amplify-colors-font-info); --amplify-components-message-outlined-info-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-info-border-color: var(--amplify-colors-border-info); --amplify-components-message-outlined-error-color: var(--amplify-colors-font-error); --amplify-components-message-outlined-error-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-error-border-color: var(--amplify-colors-border-error); --amplify-components-message-outlined-success-color: var(--amplify-colors-font-success); --amplify-components-message-outlined-success-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-success-border-color: var(--amplify-colors-border-success); --amplify-components-message-outlined-warning-color: var(--amplify-colors-font-warning); --amplify-components-message-outlined-warning-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-warning-border-color: var(--amplify-colors-border-warning); --amplify-components-message-filled-color: var(--amplify-colors-font-primary); --amplify-components-message-filled-background-color: var(--amplify-colors-background-secondary); --amplify-components-message-filled-border-color: transparent; --amplify-components-message-filled-info-color: var(--amplify-colors-font-info); --amplify-components-message-filled-info-background-color: var(--amplify-colors-background-info); --amplify-components-message-filled-info-border-color: transparent; --amplify-components-message-filled-error-color: var(--amplify-colors-font-error); --amplify-components-message-filled-error-background-color: var(--amplify-colors-background-error); --amplify-components-message-filled-error-border-color: transparent; --amplify-components-message-filled-success-color: var(--amplify-colors-font-success); --amplify-components-message-filled-success-background-color: var(--amplify-colors-background-success); --amplify-components-message-filled-success-border-color: transparent; --amplify-components-message-filled-warning-color: var(--amplify-colors-font-warning); --amplify-components-message-filled-warning-background-color: var(--amplify-colors-background-warning); --amplify-components-message-filled-warning-border-color: transparent; --amplify-components-pagination-current-align-items: center; --amplify-components-pagination-current-justify-content: center; --amplify-components-pagination-current-color: var(--amplify-colors-font-inverse); --amplify-components-pagination-current-font-size: var(--amplify-font-sizes-small); --amplify-components-pagination-current-background-color: var(--amplify-colors-overlay-40); --amplify-components-pagination-button-color: var(--amplify-colors-font-primary); --amplify-components-pagination-button-padding-inline-start: var(--amplify-space-xxs); --amplify-components-pagination-button-padding-inline-end: var(--amplify-space-xxs); --amplify-components-pagination-button-transition-property: background-color; --amplify-components-pagination-button-transition-duration: var(--amplify-time-medium); --amplify-components-pagination-button-hover-background-color: var(--amplify-colors-overlay-10); --amplify-components-pagination-button-hover-color: var(--amplify-colors-font-primary); --amplify-components-pagination-button-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-pagination-ellipsis-align-items: baseline; --amplify-components-pagination-ellipsis-justify-content: center; --amplify-components-pagination-ellipsis-padding-inline-start: var(--amplify-space-xs); --amplify-components-pagination-ellipsis-padding-inline-end: var(--amplify-space-xs); --amplify-components-pagination-item-container-margin-left: var(--amplify-space-xxxs); --amplify-components-pagination-item-container-margin-right: var(--amplify-space-xxxs); --amplify-components-pagination-item-shared-height: var(--amplify-font-sizes-xxl); --amplify-components-pagination-item-shared-min-width: var(--amplify-font-sizes-xxl); --amplify-components-pagination-item-shared-border-radius: var(--amplify-font-sizes-medium); --amplify-components-passwordfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-passwordfield-button-color: var(--amplify-components-button-color); --amplify-components-passwordfield-button-active-background-color: var(--amplify-components-button-active-background-color); --amplify-components-passwordfield-button-active-border-color: var(--amplify-components-button-active-border-color); --amplify-components-passwordfield-button-active-color: var(--amplify-components-button-active-color); --amplify-components-passwordfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color); --amplify-components-passwordfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color); --amplify-components-passwordfield-button-disabled-color: var(--amplify-components-button-disabled-color); --amplify-components-passwordfield-button-error-color: var(--amplify-components-button-outlined-error-color); --amplify-components-passwordfield-button-error-background-color: var(--amplify-components-button-outlined-error-background-color); --amplify-components-passwordfield-button-error-border-color: var(--amplify-components-button-outlined-error-border-color); --amplify-components-passwordfield-button-error-active-border-color: var(--amplify-components-button-outlined-error-active-border-color); --amplify-components-passwordfield-button-error-active-background-color: var(--amplify-components-button-outlined-error-active-background-color); --amplify-components-passwordfield-button-error-active-color: var(--amplify-components-button-outlined-error-active-color); --amplify-components-passwordfield-button-error-focus-border-color: var(--amplify-components-button-outlined-error-focus-border-color); --amplify-components-passwordfield-button-error-focus-background-color: var(--amplify-components-button-outlined-error-focus-background-color); --amplify-components-passwordfield-button-error-focus-color: var(--amplify-components-button-outlined-error-focus-color); --amplify-components-passwordfield-button-error-focus-box-shadow: var(--amplify-components-button-outlined-error-focus-box-shadow); --amplify-components-passwordfield-button-error-hover-border-color: var(--amplify-components-button-outlined-error-hover-border-color); --amplify-components-passwordfield-button-error-hover-background-color: var(--amplify-components-button-outlined-error-hover-background-color); --amplify-components-passwordfield-button-error-hover-color: var(--amplify-components-button-outlined-error-hover-color); --amplify-components-passwordfield-button-focus-background-color: var(--amplify-components-button-focus-background-color); --amplify-components-passwordfield-button-focus-border-color: var(--amplify-components-button-focus-border-color); --amplify-components-passwordfield-button-focus-color: var(--amplify-components-button-focus-color); --amplify-components-passwordfield-button-hover-background-color: var(--amplify-components-button-hover-background-color); --amplify-components-passwordfield-button-hover-border-color: var(--amplify-components-button-hover-border-color); --amplify-components-passwordfield-button-hover-color: var(--amplify-components-button-hover-color); --amplify-components-phonenumberfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-phonenumberfield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-phonenumberfield-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-phonenumberfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-placeholder-border-radius: var(--amplify-radii-small); --amplify-components-placeholder-transition-duration: var(--amplify-time-long); --amplify-components-placeholder-start-color: var(--amplify-colors-background-secondary); --amplify-components-placeholder-end-color: var(--amplify-colors-background-tertiary); --amplify-components-placeholder-small-height: var(--amplify-space-small); --amplify-components-placeholder-default-height: var(--amplify-space-medium); --amplify-components-placeholder-large-height: var(--amplify-space-large); --amplify-components-radio-align-items: center; --amplify-components-radio-justify-content: flex-start; --amplify-components-radio-gap: inherit; --amplify-components-radio-disabled-cursor: not-allowed; --amplify-components-radio-button-align-items: center; --amplify-components-radio-button-justify-content: center; --amplify-components-radio-button-width: var(--amplify-font-sizes-medium); --amplify-components-radio-button-height: var(--amplify-font-sizes-medium); --amplify-components-radio-button-box-sizing: border-box; --amplify-components-radio-button-border-width: var(--amplify-border-widths-medium); --amplify-components-radio-button-border-style: solid; --amplify-components-radio-button-border-radius: 50%; --amplify-components-radio-button-border-color: var(--amplify-colors-border-primary); --amplify-components-radio-button-color: var(--amplify-colors-background-primary); --amplify-components-radio-button-background-color: var(--amplify-colors-background-primary); --amplify-components-radio-button-transition-property: all; --amplify-components-radio-button-transition-duration: var(--amplify-time-medium); --amplify-components-radio-button-outline-color: var(--amplify-colors-transparent); --amplify-components-radio-button-outline-style: solid; --amplify-components-radio-button-outline-width: var(--amplify-outline-widths-medium); --amplify-components-radio-button-outline-offset: var(--amplify-outline-offsets-medium); --amplify-components-radio-button-padding: var(--amplify-border-widths-medium); --amplify-components-radio-button-small-width: var(--amplify-font-sizes-small); --amplify-components-radio-button-small-height: var(--amplify-font-sizes-small); --amplify-components-radio-button-large-width: var(--amplify-font-sizes-large); --amplify-components-radio-button-large-height: var(--amplify-font-sizes-large); --amplify-components-radio-button-checked-color: var(--amplify-colors-primary-80); --amplify-components-radio-button-checked-disabled-color: var(--amplify-colors-background-disabled); --amplify-components-radio-button-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-radio-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-radio-button-error-border-color: var(--amplify-colors-border-error); --amplify-components-radio-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-radio-button-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-radio-button-disabled-background-color: var(--amplify-colors-background-primary); --amplify-components-radio-label-color: var(--amplify-components-text-color); --amplify-components-radio-label-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-radiogroup-radio-border-width: var(--amplify-components-radio-button-border-width); --amplify-components-radiogroup-radio-border-color: var(--amplify-components-radio-button-border-color); --amplify-components-radiogroup-radio-background-color: var(--amplify-components-radio-button-background-color); --amplify-components-radiogroup-radio-checked-color: var(--amplify-components-radio-button-checked-color); --amplify-components-radiogroup-radio-label-color: var(--amplify-components-radio-label-color); --amplify-components-radiogroup-legend-color: var(--amplify-components-fieldset-legend-color); --amplify-components-radiogroup-legend-font-weight: var(--amplify-font-weights-normal); --amplify-components-rating-large-size: var(--amplify-font-sizes-xxxl); --amplify-components-rating-default-size: var(--amplify-font-sizes-xl); --amplify-components-rating-small-size: var(--amplify-font-sizes-small); --amplify-components-rating-filled-color: var(--amplify-colors-secondary-80); --amplify-components-rating-empty-color: var(--amplify-colors-background-tertiary); --amplify-components-searchfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-searchfield-button-color: var(--amplify-components-button-color); --amplify-components-searchfield-button-background-color: var(--amplify-colors-background-primary); --amplify-components-searchfield-button-active-background-color: var(--amplify-components-button-active-background-color); --amplify-components-searchfield-button-active-border-color: var(--amplify-components-button-active-border-color); --amplify-components-searchfield-button-active-color: var(--amplify-components-button-active-color); --amplify-components-searchfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color); --amplify-components-searchfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color); --amplify-components-searchfield-button-disabled-color: var(--amplify-components-button-disabled-color); --amplify-components-searchfield-button-focus-background-color: var(--amplify-components-button-focus-background-color); --amplify-components-searchfield-button-focus-border-color: var(--amplify-components-button-focus-border-color); --amplify-components-searchfield-button-focus-color: var(--amplify-components-button-focus-color); --amplify-components-searchfield-button-hover-background-color: var(--amplify-components-button-hover-background-color); --amplify-components-searchfield-button-hover-border-color: var(--amplify-components-button-hover-border-color); --amplify-components-searchfield-button-hover-color: var(--amplify-components-button-hover-color); --amplify-components-select-color: var(--amplify-components-fieldcontrol-color); --amplify-components-select-background-color: var(--amplify-colors-background-primary); --amplify-components-select-padding-inline-end: var(--amplify-space-xxl); --amplify-components-select-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-select-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-select-wrapper-flex: 1; --amplify-components-select-wrapper-display: block; --amplify-components-select-wrapper-position: relative; --amplify-components-select-wrapper-cursor: pointer; --amplify-components-select-icon-wrapper-align-items: center; --amplify-components-select-icon-wrapper-position: absolute; --amplify-components-select-icon-wrapper-top: 50%; --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium); --amplify-components-select-icon-wrapper-transform: translateY(-50%); --amplify-components-select-icon-wrapper-pointer-events: none; --amplify-components-select-icon-wrapper-small-right: var(--amplify-space-xs); --amplify-components-select-icon-wrapper-large-right: var(--amplify-space-medium); --amplify-components-select-option-background-color: transparent; --amplify-components-select-option-color: var(--amplify-colors-font-primary); --amplify-components-select-option-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-select-option-disabled-background-color: transparent; --amplify-components-select-white-space: nowrap; --amplify-components-select-min-width: 6.5rem; --amplify-components-select-small-min-width: 5.5rem; --amplify-components-select-small-padding-inline-end: var(--amplify-space-xl); --amplify-components-select-large-min-width: 7.5rem; --amplify-components-select-large-padding-inline-end: var(--amplify-space-xxl); --amplify-components-select-expanded-padding-block: var(--amplify-space-xs); --amplify-components-select-expanded-padding-inline: var(--amplify-space-small); --amplify-components-select-expanded-option-padding-block: var(--amplify-space-xs); --amplify-components-select-expanded-option-padding-inline: var(--amplify-space-small); --amplify-components-selectfield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-selectfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-selectfield-flex-direction: column; --amplify-components-selectfield-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-selectfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-selectfield-label-color: var(--amplify-components-field-label-color); --amplify-components-sliderfield-padding-block: var(--amplify-space-xs); --amplify-components-sliderfield-track-background-color: var(--amplify-colors-background-quaternary); --amplify-components-sliderfield-track-border-radius: 9999px; --amplify-components-sliderfield-track-height: 0.375rem; --amplify-components-sliderfield-track-min-width: 10rem; --amplify-components-sliderfield-range-background-color: var(--amplify-colors-primary-80); --amplify-components-sliderfield-range-border-radius: 9999px; --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-sliderfield-thumb-width: 1.25rem; --amplify-components-sliderfield-thumb-height: 1.25rem; --amplify-components-sliderfield-thumb-background-color: var(--amplify-colors-background-primary); --amplify-components-sliderfield-thumb-box-shadow: var(--amplify-shadows-small); --amplify-components-sliderfield-thumb-border-radius: 50%; --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-medium); --amplify-components-sliderfield-thumb-border-color: var(--amplify-colors-border-primary); --amplify-components-sliderfield-thumb-border-style: solid; --amplify-components-sliderfield-thumb-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-sliderfield-thumb-disabled-border-color: transparent; --amplify-components-sliderfield-thumb-disabled-box-shadow: none; --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-primary); --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus); --amplify-components-sliderfield-thumb-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-sliderfield-thumb-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-sliderfield-small-track-height: 0.25rem; --amplify-components-sliderfield-small-thumb-width: 1rem; --amplify-components-sliderfield-small-thumb-height: 1rem; --amplify-components-sliderfield-large-track-height: 0.625rem; --amplify-components-sliderfield-large-thumb-width: 1.5rem; --amplify-components-sliderfield-large-thumb-height: 1.5rem; --amplify-components-stepperfield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-stepperfield-flex-direction: column; --amplify-components-stepperfield-input-color: var(--amplify-components-fieldcontrol-color); --amplify-components-stepperfield-input-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-stepperfield-input-text-align: center; --amplify-components-stepperfield-button-color: var(--amplify-components-button-color); --amplify-components-stepperfield-button-background-color: var(--amplify-colors-transparent); --amplify-components-stepperfield-button-active-color: var(--amplify-components-button-active-color); --amplify-components-stepperfield-button-active-background-color: var(--amplify-components-button-active-background-color); --amplify-components-stepperfield-button-focus-color: var(--amplify-components-button-focus-color); --amplify-components-stepperfield-button-focus-background-color: var(--amplify-components-button-focus-background-color); --amplify-components-stepperfield-button-disabled-color: var(--amplify-components-button-disabled-color); --amplify-components-stepperfield-button-disabled-background-color: var(--amplify-components-fieldcontrol-disabled-background-color); --amplify-components-stepperfield-button-hover-color: var(--amplify-components-button-hover-color); --amplify-components-stepperfield-button-hover-background-color: var(--amplify-components-button-hover-background-color); --amplify-components-storagemanager-dropzone-background-color: var(--amplify-colors-background-primary); --amplify-components-storagemanager-dropzone-border-radius: var(--amplify-radii-small); --amplify-components-storagemanager-dropzone-border-color: var(--amplify-colors-border-primary); --amplify-components-storagemanager-dropzone-border-style: dashed; --amplify-components-storagemanager-dropzone-border-width: var(--amplify-border-widths-small); --amplify-components-storagemanager-dropzone-gap: var(--amplify-space-small); --amplify-components-storagemanager-dropzone-padding-block: var(--amplify-space-xl); --amplify-components-storagemanager-dropzone-padding-inline: var(--amplify-space-large); --amplify-components-storagemanager-dropzone-text-align: center; --amplify-components-storagemanager-dropzone-active-background-color: var(--amplify-colors-primary-10); --amplify-components-storagemanager-dropzone-active-border-radius: var(--amplify-components-storagemanager-dropzone-border-radius); --amplify-components-storagemanager-dropzone-active-border-color: var(--amplify-colors-border-pressed); --amplify-components-storagemanager-dropzone-active-border-style: var(--amplify-components-storagemanager-dropzone-border-style); --amplify-components-storagemanager-dropzone-active-border-width: var(--amplify-border-widths-medium); --amplify-components-storagemanager-dropzone-icon-color: var(--amplify-colors-border-primary); --amplify-components-storagemanager-dropzone-icon-font-size: var(--amplify-font-sizes-xxl); --amplify-components-storagemanager-dropzone-text-color: var(--amplify-colors-font-tertiary); --amplify-components-storagemanager-dropzone-text-font-size: var(--amplify-font-sizes-medium); --amplify-components-storagemanager-dropzone-text-font-weight: var(--amplify-font-weights-bold); --amplify-components-storagemanager-file-background-color: var(--amplify-colors-background-primary); --amplify-components-storagemanager-file-border-radius: var(--amplify-radii-small); --amplify-components-storagemanager-file-border-color: var(--amplify-colors-border-primary); --amplify-components-storagemanager-file-border-style: solid; --amplify-components-storagemanager-file-border-width: var(--amplify-border-widths-small); --amplify-components-storagemanager-file-padding-block: var(--amplify-space-xs); --amplify-components-storagemanager-file-padding-inline: var(--amplify-space-small); --amplify-components-storagemanager-file-gap: var(--amplify-space-small); --amplify-components-storagemanager-file-align-items: baseline; --amplify-components-storagemanager-file-name-font-size: var(--amplify-font-sizes-medium); --amplify-components-storagemanager-file-name-font-weight: var(--amplify-font-weights-bold); --amplify-components-storagemanager-file-name-color: var(--amplify-colors-font-primary); --amplify-components-storagemanager-file-size-font-size: var(--amplify-font-sizes-small); --amplify-components-storagemanager-file-size-font-weight: var(--amplify-font-weights-normal); --amplify-components-storagemanager-file-size-color: var(--amplify-colors-font-tertiary); --amplify-components-storagemanager-file-image-width: var(--amplify-space-xxl); --amplify-components-storagemanager-file-image-height: var(--amplify-space-xxl); --amplify-components-storagemanager-file-image-background-color: var(--amplify-colors-background-secondary); --amplify-components-storagemanager-file-image-color: var(--amplify-colors-font-tertiary); --amplify-components-storagemanager-file-image-border-radius: var(--amplify-radii-small); --amplify-components-storagemanager-filelist-flex-direction: column; --amplify-components-storagemanager-filelist-gap: var(--amplify-space-small); --amplify-components-storagemanager-loader-stroke-linecap: round; --amplify-components-storagemanager-loader-stroke-empty: var(--amplify-colors-border-secondary); --amplify-components-storagemanager-loader-stroke-filled: var(--amplify-components-loader-stroke-filled); --amplify-components-storagemanager-loader-stroke-width: var(--amplify-border-widths-large); --amplify-components-storagemanager-previewer-background-color: var(--amplify-colors-background-primary); --amplify-components-storagemanager-previewer-border-color: var(--amplify-colors-border-primary); --amplify-components-storagemanager-previewer-border-style: solid; --amplify-components-storagemanager-previewer-border-width: var(--amplify-border-widths-small); --amplify-components-storagemanager-previewer-border-radius: var(--amplify-radii-small); --amplify-components-storagemanager-previewer-padding-block: var(--amplify-space-zero); --amplify-components-storagemanager-previewer-padding-inline: var(--amplify-space-zero); --amplify-components-storagemanager-previewer-max-height: 40rem; --amplify-components-storagemanager-previewer-max-width: auto; --amplify-components-storagemanager-previewer-text-font-size: var(--amplify-font-sizes-medium); --amplify-components-storagemanager-previewer-text-font-weight: var(--amplify-font-weights-bold); --amplify-components-storagemanager-previewer-text-color: var(--amplify-colors-font-primary); --amplify-components-storagemanager-previewer-body-padding-block: var(--amplify-space-medium); --amplify-components-storagemanager-previewer-body-padding-inline: var(--amplify-space-medium); --amplify-components-storagemanager-previewer-body-gap: var(--amplify-space-small); --amplify-components-storagemanager-previewer-footer-justify-content: flex-end; --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60); --amplify-components-switchfield-focused-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-switchfield-font-size: var(--amplify-font-sizes-medium); --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large); --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small); --amplify-components-switchfield-label-padding: var(--amplify-space-xs); --amplify-components-switchfield-thumb-background-color: var(--amplify-colors-background-primary); --amplify-components-switchfield-thumb-border-color: transparent; --amplify-components-switchfield-thumb-border-width: var(--amplify-border-widths-small); --amplify-components-switchfield-thumb-border-style: solid; --amplify-components-switchfield-thumb-border-radius: var(--amplify-radii-xxxl); --amplify-components-switchfield-thumb-checked-transform: var(--amplify-transforms-slide-x-medium); --amplify-components-switchfield-thumb-transition-duration: var(--amplify-time-medium); --amplify-components-switchfield-thumb-width: var(--amplify-space-relative-medium); --amplify-components-switchfield-track-background-color: var(--amplify-colors-background-quaternary); --amplify-components-switchfield-track-border-radius: var(--amplify-radii-xxxl); --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-primary-80); --amplify-components-switchfield-track-height: var(--amplify-space-relative-medium); --amplify-components-switchfield-track-padding: var(--amplify-outline-widths-medium); --amplify-components-switchfield-track-transition-duration: var(--amplify-time-short); --amplify-components-switchfield-track-width: var(--amplify-space-relative-xl); --amplify-components-switchfield-track-error-background-color: var(--amplify-colors-background-error); --amplify-components-table-border-collapse: collapse; --amplify-components-table-display: table; --amplify-components-table-width: 100%; --amplify-components-table-head-display: table-header-group; --amplify-components-table-head-vertical-align: middle; --amplify-components-table-body-display: table-row-group; --amplify-components-table-body-vertical-align: middle; --amplify-components-table-foot-display: table-footer-group; --amplify-components-table-foot-vertical-align: middle; --amplify-components-table-row-display: table-row; --amplify-components-table-row-vertical-align: middle; --amplify-components-table-row-hover-background-color: var(--amplify-colors-background-tertiary); --amplify-components-table-row-striped-background-color: var(--amplify-colors-background-secondary); --amplify-components-table-header-border-color: var(--amplify-colors-border-tertiary); --amplify-components-table-header-border-style: solid; --amplify-components-table-header-border-width: var(--amplify-border-widths-small); --amplify-components-table-header-color: var(--amplify-colors-font-primary); --amplify-components-table-header-display: table-cell; --amplify-components-table-header-font-size: var(--amplify-font-sizes-medium); --amplify-components-table-header-font-weight: var(--amplify-font-weights-bold); --amplify-components-table-header-padding: var(--amplify-space-medium); --amplify-components-table-header-vertical-align: middle; --amplify-components-table-header-large-font-size: var(--amplify-font-sizes-large); --amplify-components-table-header-large-padding: var(--amplify-space-large); --amplify-components-table-header-small-font-size: var(--amplify-font-sizes-small); --amplify-components-table-header-small-padding: var(--amplify-space-xs); --amplify-components-table-data-border-color: var(--amplify-colors-border-tertiary); --amplify-components-table-data-border-style: solid; --amplify-components-table-data-border-width: var(--amplify-border-widths-small); --amplify-components-table-data-color: var(--amplify-colors-font-primary); --amplify-components-table-data-display: table-cell; --amplify-components-table-data-font-size: var(--amplify-font-sizes-medium); --amplify-components-table-data-font-weight: var(--amplify-font-weights-normal); --amplify-components-table-data-padding: var(--amplify-space-medium); --amplify-components-table-data-vertical-align: middle; --amplify-components-table-data-large-font-size: var(--amplify-font-sizes-large); --amplify-components-table-data-large-padding: var(--amplify-space-large); --amplify-components-table-data-small-font-size: var(--amplify-font-sizes-small); --amplify-components-table-data-small-padding: var(--amplify-space-xs); --amplify-components-table-caption-caption-side: bottom; --amplify-components-table-caption-color: var(--amplify-colors-font-primary); --amplify-components-table-caption-display: table-caption; --amplify-components-table-caption-font-size: var(--amplify-font-sizes-medium); --amplify-components-table-caption-text-align: center; --amplify-components-table-caption-word-break: break-all; --amplify-components-table-caption-large-font-size: var(--amplify-font-sizes-large); --amplify-components-table-caption-small-font-size: var(--amplify-font-sizes-small); --amplify-components-tabs-background-color: transparent; --amplify-components-tabs-border-color: var(--amplify-colors-border-secondary); --amplify-components-tabs-border-style: solid; --amplify-components-tabs-border-width: var(--amplify-border-widths-medium); --amplify-components-tabs-gap: 0; --amplify-components-tabs-item-background-color: transparent; --amplify-components-tabs-item-border-color: var(--amplify-colors-border-secondary); --amplify-components-tabs-item-border-style: solid; --amplify-components-tabs-item-border-width: var(--amplify-border-widths-medium); --amplify-components-tabs-item-color: var(--amplify-colors-font-secondary); --amplify-components-tabs-item-font-size: var(--amplify-font-sizes-medium); --amplify-components-tabs-item-font-weight: var(--amplify-font-weights-bold); --amplify-components-tabs-item-padding-vertical: var(--amplify-space-small); --amplify-components-tabs-item-padding-horizontal: var(--amplify-space-medium); --amplify-components-tabs-item-text-align: center; --amplify-components-tabs-item-transition-duration: var(--amplify-time-medium); --amplify-components-tabs-item-hover-background-color: transparent; --amplify-components-tabs-item-hover-border-color: var(--amplify-colors-border-focus); --amplify-components-tabs-item-hover-box-shadow: none; --amplify-components-tabs-item-hover-color: var(--amplify-colors-font-hover); --amplify-components-tabs-item-focus-background-color: transparent; --amplify-components-tabs-item-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-tabs-item-focus-box-shadow: 0px 0px 0px var(--amplify-border-widths-medium) var(--amplify-colors-border-focus); --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus); --amplify-components-tabs-item-active-background-color: transparent; --amplify-components-tabs-item-active-border-color: var(--amplify-colors-font-interactive); --amplify-components-tabs-item-active-box-shadow: none; --amplify-components-tabs-item-active-color: var(--amplify-colors-font-interactive); --amplify-components-tabs-item-disabled-background-color: transparent; --amplify-components-tabs-item-disabled-border-color: var(--amplify-colors-border-tertiary); --amplify-components-tabs-item-disabled-box-shadow: none; --amplify-components-tabs-item-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-tabs-panel-background-color: transparent; --amplify-components-tabs-panel-padding-inline: 0; --amplify-components-tabs-panel-padding-block: var(--amplify-space-small); --amplify-components-text-color: var(--amplify-colors-font-primary); --amplify-components-text-primary-color: var(--amplify-colors-font-primary); --amplify-components-text-secondary-color: var(--amplify-colors-font-secondary); --amplify-components-text-tertiary-color: var(--amplify-colors-font-tertiary); --amplify-components-text-error-color: var(--amplify-colors-font-error); --amplify-components-text-warning-color: var(--amplify-colors-font-warning); --amplify-components-text-success-color: var(--amplify-colors-font-success); --amplify-components-text-info-color: var(--amplify-colors-font-info); --amplify-components-textareafield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-textareafield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-textareafield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-textfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-textfield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-textfield-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-textfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-togglebutton-border-color: var(--amplify-colors-border-primary); --amplify-components-togglebutton-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-hover-background-color: var(--amplify-colors-overlay-10); --amplify-components-togglebutton-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-togglebutton-focus-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-active-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-disabled-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-togglebutton-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-togglebutton-pressed-border-color: var(--amplify-colors-border-pressed); --amplify-components-togglebutton-pressed-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-pressed-background-color: var(--amplify-colors-overlay-20); --amplify-components-togglebutton-pressed-hover-background-color: var(--amplify-colors-overlay-30); --amplify-components-togglebutton-primary-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-primary-border-width: var(--amplify-border-widths-small); --amplify-components-togglebutton-primary-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-togglebutton-primary-focus-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-togglebutton-primary-focus-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-primary-hover-background-color: var(--amplify-colors-overlay-10); --amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-primary-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-togglebutton-primary-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-togglebutton-primary-pressed-background-color: var(--amplify-colors-primary-80); --amplify-components-togglebutton-primary-pressed-border-color: var(--amplify-colors-primary-80); --amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-background-primary); --amplify-components-togglebutton-primary-pressed-focus-background-color: var(--amplify-colors-border-focus); --amplify-components-togglebutton-primary-pressed-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-togglebutton-primary-pressed-focus-color: var(--amplify-colors-background-primary); --amplify-components-togglebutton-primary-pressed-hover-border-color: var(--amplify-colors-primary-60); --amplify-components-togglebutton-primary-pressed-hover-background-color: var(--amplify-colors-primary-60); --amplify-components-togglebutton-primary-pressed-hover-box-shadow: var(--amplify-colors-primary-60); --amplify-components-togglebutton-primary-pressed-hover-color: var(--amplify-colors-background-primary); --amplify-components-togglebutton-link-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-color: var(--amplify-colors-overlay-50); --amplify-components-togglebutton-link-hover-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-hover-color: var(--amplify-colors-overlay-50); --amplify-components-togglebutton-link-focus-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-focus-color: var(--amplify-colors-overlay-50); --amplify-components-togglebutton-link-disabled-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-togglebutton-link-pressed-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-pressed-color: var(--amplify-colors-overlay-90); --amplify-components-togglebutton-link-pressed-focus-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-pressed-focus-color: var(--amplify-colors-overlay-90); --amplify-components-togglebutton-link-pressed-hover-color: var(--amplify-colors-overlay-90); --amplify-components-togglebutton-link-pressed-hover-background-color: var(--amplify-colors-transparent); --amplify-components-togglebuttongroup-align-items: center; --amplify-components-togglebuttongroup-align-content: center; --amplify-components-togglebuttongroup-justify-content: flex-start; --amplify-border-widths-small: 1px; --amplify-border-widths-medium: 2px; --amplify-border-widths-large: 3px; --amplify-colors-red-10: hsl(0, 75%, 95%); --amplify-colors-red-20: hsl(0, 75%, 85%); --amplify-colors-red-40: hsl(0, 75%, 75%); --amplify-colors-red-60: hsl(0, 50%, 50%); --amplify-colors-red-80: hsl(0, 95%, 30%); --amplify-colors-red-90: hsl(0, 100%, 20%); --amplify-colors-red-100: hsl(0, 100%, 15%); --amplify-colors-orange-10: hsl(30, 75%, 95%); --amplify-colors-orange-20: hsl(30, 75%, 85%); --amplify-colors-orange-40: hsl(30, 75%, 75%); --amplify-colors-orange-60: hsl(30, 50%, 50%); --amplify-colors-orange-80: hsl(30, 95%, 30%); --amplify-colors-orange-90: hsl(30, 100%, 20%); --amplify-colors-orange-100: hsl(30, 100%, 15%); --amplify-colors-yellow-10: hsl(60, 75%, 95%); --amplify-colors-yellow-20: hsl(60, 75%, 85%); --amplify-colors-yellow-40: hsl(60, 75%, 75%); --amplify-colors-yellow-60: hsl(60, 50%, 50%); --amplify-colors-yellow-80: hsl(60, 95%, 30%); --amplify-colors-yellow-90: hsl(60, 100%, 20%); --amplify-colors-yellow-100: hsl(60, 100%, 15%); --amplify-colors-green-10: hsl(130, 60%, 95%); --amplify-colors-green-20: hsl(130, 60%, 90%); --amplify-colors-green-40: hsl(130, 44%, 63%); --amplify-colors-green-60: hsl(130, 43%, 46%); --amplify-colors-green-80: hsl(130, 33%, 37%); --amplify-colors-green-90: hsl(130, 27%, 29%); --amplify-colors-green-100: hsl(130, 22%, 23%); --amplify-colors-teal-10: hsl(190, 75%, 95%); --amplify-colors-teal-20: hsl(190, 75%, 85%); --amplify-colors-teal-40: hsl(190, 70%, 70%); --amplify-colors-teal-60: hsl(190, 50%, 50%); --amplify-colors-teal-80: hsl(190, 95%, 30%); --amplify-colors-teal-90: hsl(190, 100%, 20%); --amplify-colors-teal-100: hsl(190, 100%, 15%); --amplify-colors-blue-10: hsl(220, 95%, 95%); --amplify-colors-blue-20: hsl(220, 85%, 85%); --amplify-colors-blue-40: hsl(220, 70%, 70%); --amplify-colors-blue-60: hsl(220, 50%, 50%); --amplify-colors-blue-80: hsl(220, 95%, 30%); --amplify-colors-blue-90: hsl(220, 100%, 20%); --amplify-colors-blue-100: hsl(220, 100%, 15%); --amplify-colors-purple-10: hsl(300, 95%, 95%); --amplify-colors-purple-20: hsl(300, 85%, 85%); --amplify-colors-purple-40: hsl(300, 70%, 70%); --amplify-colors-purple-60: hsl(300, 50%, 50%); --amplify-colors-purple-80: hsl(300, 95%, 30%); --amplify-colors-purple-90: hsl(300, 100%, 20%); --amplify-colors-purple-100: hsl(300, 100%, 15%); --amplify-colors-pink-10: hsl(340, 95%, 95%); --amplify-colors-pink-20: hsl(340, 90%, 85%); --amplify-colors-pink-40: hsl(340, 70%, 70%); --amplify-colors-pink-60: hsl(340, 50%, 50%); --amplify-colors-pink-80: hsl(340, 95%, 30%); --amplify-colors-pink-90: hsl(340, 100%, 20%); --amplify-colors-pink-100: hsl(340, 100%, 15%); --amplify-colors-neutral-10: hsl(210, 5%, 98%); --amplify-colors-neutral-20: hsl(210, 5%, 94%); --amplify-colors-neutral-40: hsl(210, 5%, 87%); --amplify-colors-neutral-60: hsl(210, 10%, 58%); --amplify-colors-neutral-80: hsl(210, 10%, 40%); --amplify-colors-neutral-90: hsl(210, 25%, 25%); --amplify-colors-neutral-100: hsl(210, 50%, 10%); --amplify-colors-primary-10: var(--amplify-colors-teal-10); --amplify-colors-primary-20: var(--amplify-colors-teal-20); --amplify-colors-primary-40: var(--amplify-colors-teal-40); --amplify-colors-primary-60: var(--amplify-colors-teal-60); --amplify-colors-primary-80: var(--amplify-colors-teal-80); --amplify-colors-primary-90: var(--amplify-colors-teal-90); --amplify-colors-primary-100: var(--amplify-colors-teal-100); --amplify-colors-secondary-10: var(--amplify-colors-purple-10); --amplify-colors-secondary-20: var(--amplify-colors-purple-20); --amplify-colors-secondary-40: var(--amplify-colors-purple-40); --amplify-colors-secondary-60: var(--amplify-colors-purple-60); --amplify-colors-secondary-80: var(--amplify-colors-purple-80); --amplify-colors-secondary-90: var(--amplify-colors-purple-90); --amplify-colors-secondary-100: var(--amplify-colors-purple-100); --amplify-colors-font-primary: var(--amplify-colors-neutral-100); --amplify-colors-font-secondary: var(--amplify-colors-neutral-90); --amplify-colors-font-tertiary: var(--amplify-colors-neutral-80); --amplify-colors-font-disabled: var(--amplify-colors-neutral-60); --amplify-colors-font-inverse: var(--amplify-colors-white); --amplify-colors-font-interactive: var(--amplify-colors-primary-80); --amplify-colors-font-hover: var(--amplify-colors-primary-90); --amplify-colors-font-focus: var(--amplify-colors-primary-100); --amplify-colors-font-active: var(--amplify-colors-primary-100); --amplify-colors-font-info: var(--amplify-colors-blue-90); --amplify-colors-font-warning: var(--amplify-colors-orange-90); --amplify-colors-font-error: var(--amplify-colors-red-90); --amplify-colors-font-success: var(--amplify-colors-green-90); --amplify-colors-background-primary: var(--amplify-colors-white); --amplify-colors-background-secondary: var(--amplify-colors-neutral-10); --amplify-colors-background-tertiary: var(--amplify-colors-neutral-20); --amplify-colors-background-quaternary: var(--amplify-colors-neutral-60); --amplify-colors-background-disabled: var(--amplify-colors-background-tertiary); --amplify-colors-background-info: var(--amplify-colors-blue-10); --amplify-colors-background-warning: var(--amplify-colors-orange-10); --amplify-colors-background-error: var(--amplify-colors-red-10); --amplify-colors-background-success: var(--amplify-colors-green-10); --amplify-colors-border-primary: var(--amplify-colors-neutral-60); --amplify-colors-border-secondary: var(--amplify-colors-neutral-40); --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20); --amplify-colors-border-disabled: var(--amplify-colors-border-tertiary); --amplify-colors-border-pressed: var(--amplify-colors-primary-100); --amplify-colors-border-focus: var(--amplify-colors-primary-100); --amplify-colors-border-error: var(--amplify-colors-red-80); --amplify-colors-border-info: var(--amplify-colors-blue-80); --amplify-colors-border-success: var(--amplify-colors-green-80); --amplify-colors-border-warning: var(--amplify-colors-orange-80); --amplify-colors-shadow-primary: hsla(210, 50%, 10%, 0.25); --amplify-colors-shadow-secondary: hsla(210, 50%, 10%, 0.15); --amplify-colors-shadow-tertiary: hsla(210, 50%, 10%, 0.05); --amplify-colors-overlay-5: hsla(0, 0%, 0%, 0.05); --amplify-colors-overlay-10: hsla(0, 0%, 0%, 0.1); --amplify-colors-overlay-20: hsla(0, 0%, 0%, 0.2); --amplify-colors-overlay-30: hsla(0, 0%, 0%, 0.3); --amplify-colors-overlay-40: hsla(0, 0%, 0%, 0.4); --amplify-colors-overlay-50: hsla(0, 0%, 0%, 0.5); --amplify-colors-overlay-60: hsla(0, 0%, 0%, 0.6); --amplify-colors-overlay-70: hsla(0, 0%, 0%, 0.7); --amplify-colors-overlay-80: hsla(0, 0%, 0%, 0.8); --amplify-colors-overlay-90: hsla(0, 0%, 0%, 0.9); --amplify-colors-black: hsl(0, 0%, 0%); --amplify-colors-white: hsl(0, 0%, 100%); --amplify-colors-transparent: transparent; --amplify-fonts-default-variable: 'InterVariable', 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif; --amplify-fonts-default-static: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif; --amplify-font-sizes-xxxs: 0.375rem; --amplify-font-sizes-xxs: 0.5rem; --amplify-font-sizes-xs: 0.75rem; --amplify-font-sizes-small: 0.875rem; --amplify-font-sizes-medium: 1rem; --amplify-font-sizes-large: 1.25rem; --amplify-font-sizes-xl: 1.5rem; --amplify-font-sizes-xxl: 2rem; --amplify-font-sizes-xxxl: 2.5rem; --amplify-font-sizes-xxxxl: 3rem; --amplify-font-weights-hairline: 100; --amplify-font-weights-thin: 200; --amplify-font-weights-light: 300; --amplify-font-weights-normal: 400; --amplify-font-weights-medium: 500; --amplify-font-weights-semibold: 600; --amplify-font-weights-bold: 700; --amplify-font-weights-extrabold: 800; --amplify-font-weights-black: 900; --amplify-line-heights-small: 1.25; --amplify-line-heights-medium: 1.5; --amplify-line-heights-large: 2; --amplify-opacities-0: 0; --amplify-opacities-10: 0.1; --amplify-opacities-20: 0.2; --amplify-opacities-30: 0.3; --amplify-opacities-40: 0.4; --amplify-opacities-50: 0.5; --amplify-opacities-60: 0.6; --amplify-opacities-70: 0.7; --amplify-opacities-80: 0.8; --amplify-opacities-90: 0.9; --amplify-opacities-100: 1; --amplify-outline-offsets-small: 1px; --amplify-outline-offsets-medium: 2px; --amplify-outline-offsets-large: 3px; --amplify-outline-widths-small: 1px; --amplify-outline-widths-medium: 2px; --amplify-outline-widths-large: 3px; --amplify-radii-xs: 0.125rem; --amplify-radii-small: 0.25rem; --amplify-radii-medium: 0.5rem; --amplify-radii-large: 1rem; --amplify-radii-xl: 2rem; --amplify-radii-xxl: 4rem; --amplify-radii-xxxl: 8rem; --amplify-shadows-small: 0px 2px 4px var(--amplify-colors-shadow-tertiary); --amplify-shadows-medium: 0px 2px 6px var(--amplify-colors-shadow-secondary); --amplify-shadows-large: 0px 4px 12px var(--amplify-colors-shadow-primary); --amplify-space-zero: 0; --amplify-space-xxxs: 0.25rem; --amplify-space-xxs: 0.375rem; --amplify-space-xs: 0.5rem; --amplify-space-small: 0.75rem; --amplify-space-medium: 1rem; --amplify-space-large: 1.5rem; --amplify-space-xl: 2.0rem; --amplify-space-xxl: 3.0rem; --amplify-space-xxxl: 4.5rem; --amplify-space-relative-xxxs: 0.25em; --amplify-space-relative-xxs: 0.375em; --amplify-space-relative-xs: 0.5em; --amplify-space-relative-small: 0.75em; --amplify-space-relative-medium: 1em; --amplify-space-relative-large: 1.5em; --amplify-space-relative-xl: 2.0em; --amplify-space-relative-xxl: 3.0em; --amplify-space-relative-xxxl: 4.5em; --amplify-space-relative-full: 100%; --amplify-time-short: 100ms; --amplify-time-medium: 250ms; --amplify-time-long: 500ms; --amplify-transforms-slide-x-small: translateX(0.5em); --amplify-transforms-slide-x-medium: translateX(1em); --amplify-transforms-slide-x-large: translateX(2em); } @media (prefers-color-scheme: dark) { [data-amplify-theme="default-theme"][data-amplify-color-mode="system"] { --amplify-colors-red-10: hsl(0, 100%, 15%); --amplify-colors-red-20: hsl(0, 100%, 20%); --amplify-colors-red-40: hsl(0, 95%, 30%); --amplify-colors-red-80: hsl(0, 75%, 75%); --amplify-colors-red-90: hsl(0, 75%, 85%); --amplify-colors-red-100: hsl(0, 75%, 95%); --amplify-colors-orange-10: hsl(30, 100%, 15%); --amplify-colors-orange-20: hsl(30, 100%, 20%); --amplify-colors-orange-40: hsl(30, 95%, 30%); --amplify-colors-orange-80: hsl(30, 75%, 75%); --amplify-colors-orange-90: hsl(30, 75%, 85%); --amplify-colors-orange-100: hsl(30, 75%, 95%); --amplify-colors-yellow-10: hsl(60, 100%, 15%); --amplify-colors-yellow-20: hsl(60, 100%, 20%); --amplify-colors-yellow-40: hsl(60, 95%, 30%); --amplify-colors-yellow-80: hsl(60, 75%, 75%); --amplify-colors-yellow-90: hsl(60, 75%, 85%); --amplify-colors-yellow-100: hsl(60, 75%, 95%); --amplify-colors-green-10: hsl(130, 22%, 23%); --amplify-colors-green-20: hsl(130, 27%, 29%); --amplify-colors-green-40: hsl(130, 33%, 37%); --amplify-colors-green-80: hsl(130, 44%, 63%); --amplify-colors-green-90: hsl(130, 60%, 90%); --amplify-colors-green-100: hsl(130, 60%, 95%); --amplify-colors-teal-10: hsl(190, 100%, 15%); --amplify-colors-teal-20: hsl(190, 100%, 20%); --amplify-colors-teal-40: hsl(190, 95%, 30%); --amplify-colors-teal-80: hsl(190, 70%, 70%); --amplify-colors-teal-90: hsl(190, 75%, 85%); --amplify-colors-teal-100: hsl(190, 75%, 95%); --amplify-colors-blue-10: hsl(220, 100%, 15%); --amplify-colors-blue-20: hsl(220, 100%, 20%); --amplify-colors-blue-40: hsl(220, 95%, 30%); --amplify-colors-blue-80: hsl(220, 70%, 70%); --amplify-colors-blue-90: hsl(220, 85%, 85%); --amplify-colors-blue-100: hsl(220, 95%, 95%); --amplify-colors-purple-10: hsl(300, 100%, 15%); --amplify-colors-purple-20: hsl(300, 100%, 20%); --amplify-colors-purple-40: hsl(300, 95%, 30%); --amplify-colors-purple-80: hsl(300, 70%, 70%); --amplify-colors-purple-90: hsl(300, 85%, 85%); --amplify-colors-purple-100: hsl(300, 95%, 95%); --amplify-colors-pink-10: hsl(340, 100%, 15%); --amplify-colors-pink-20: hsl(340, 100%, 20%); --amplify-colors-pink-40: hsl(340, 95%, 30%); --amplify-colors-pink-80: hsl(340, 70%, 70%); --amplify-colors-pink-90: hsl(340, 90%, 85%); --amplify-colors-pink-100: hsl(340, 95%, 95%); --amplify-colors-neutral-10: hsl(210, 50%, 10%); --amplify-colors-neutral-20: hsl(210, 25%, 25%); --amplify-colors-neutral-40: hsl(210, 10%, 40%); --amplify-colors-neutral-80: hsl(210, 5%, 87%); --amplify-colors-neutral-90: hsl(210, 5%, 94%); --amplify-colors-neutral-100: hsl(210, 5%, 98%); --amplify-colors-font-primary: var(--amplify-colors-white); --amplify-colors-font-secondary: var(--amplify-colors-neutral-100); --amplify-colors-font-tertiary: var(--amplify-colors-neutral-90); --amplify-colors-font-inverse: var(--amplify-colors-neutral-10); --amplify-colors-background-primary: var(--amplify-colors-neutral-10); --amplify-colors-background-secondary: var(--amplify-colors-neutral-20); --amplify-colors-background-tertiary: var(--amplify-colors-neutral-40); --amplify-colors-border-primary: var(--amplify-colors-neutral-60); --amplify-colors-border-secondary: var(--amplify-colors-neutral-40); --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20); --amplify-colors-overlay-5: hsla(0, 0%, 100%, 0.05); --amplify-colors-overlay-10: hsla(0, 0%, 100%, 0.1); --amplify-colors-overlay-20: hsla(0, 0%, 100%, 0.2); --amplify-colors-overlay-30: hsla(0, 0%, 100%, 0.3); --amplify-colors-overlay-40: hsla(0, 0%, 100%, 0.4); --amplify-colors-overlay-50: hsla(0, 0%, 100%, 0.5); --amplify-colors-overlay-60: hsla(0, 0%, 100%, 0.6); --amplify-colors-overlay-70: hsla(0, 0%, 100%, 0.7); --amplify-colors-overlay-80: hsla(0, 0%, 100%, 0.8); --amplify-colors-overlay-90: hsla(0, 0%, 100%, 0.9); color-scheme: dark; } } [data-amplify-theme="default-theme"][data-amplify-color-mode="dark"] { --amplify-colors-red-10: hsl(0, 100%, 15%); --amplify-colors-red-20: hsl(0, 100%, 20%); --amplify-colors-red-40: hsl(0, 95%, 30%); --amplify-colors-red-80: hsl(0, 75%, 75%); --amplify-colors-red-90: hsl(0, 75%, 85%); --amplify-colors-red-100: hsl(0, 75%, 95%); --amplify-colors-orange-10: hsl(30, 100%, 15%); --amplify-colors-orange-20: hsl(30, 100%, 20%); --amplify-colors-orange-40: hsl(30, 95%, 30%); --amplify-colors-orange-80: hsl(30, 75%, 75%); --amplify-colors-orange-90: hsl(30, 75%, 85%); --amplify-colors-orange-100: hsl(30, 75%, 95%); --amplify-colors-yellow-10: hsl(60, 100%, 15%); --amplify-colors-yellow-20: hsl(60, 100%, 20%); --amplify-colors-yellow-40: hsl(60, 95%, 30%); --amplify-colors-yellow-80: hsl(60, 75%, 75%); --amplify-colors-yellow-90: hsl(60, 75%, 85%); --amplify-colors-yellow-100: hsl(60, 75%, 95%); --amplify-colors-green-10: hsl(130, 22%, 23%); --amplify-colors-green-20: hsl(130, 27%, 29%); --amplify-colors-green-40: hsl(130, 33%, 37%); --amplify-colors-green-80: hsl(130, 44%, 63%); --amplify-colors-green-90: hsl(130, 60%, 90%); --amplify-colors-green-100: hsl(130, 60%, 95%); --amplify-colors-teal-10: hsl(190, 100%, 15%); --amplify-colors-teal-20: hsl(190, 100%, 20%); --amplify-colors-teal-40: hsl(190, 95%, 30%); --amplify-colors-teal-80: hsl(190, 70%, 70%); --amplify-colors-teal-90: hsl(190, 75%, 85%); --amplify-colors-teal-100: hsl(190, 75%, 95%); --amplify-colors-blue-10: hsl(220, 100%, 15%); --amplify-colors-blue-20: hsl(220, 100%, 20%); --amplify-colors-blue-40: hsl(220, 95%, 30%); --amplify-colors-blue-80: hsl(220, 70%, 70%); --amplify-colors-blue-90: hsl(220, 85%, 85%); --amplify-colors-blue-100: hsl(220, 95%, 95%); --amplify-colors-purple-10: hsl(300, 100%, 15%); --amplify-colors-purple-20: hsl(300, 100%, 20%); --amplify-colors-purple-40: hsl(300, 95%, 30%); --amplify-colors-purple-80: hsl(300, 70%, 70%); --amplify-colors-purple-90: hsl(300, 85%, 85%); --amplify-colors-purple-100: hsl(300, 95%, 95%); --amplify-colors-pink-10: hsl(340, 100%, 15%); --amplify-colors-pink-20: hsl(340, 100%, 20%); --amplify-colors-pink-40: hsl(340, 95%, 30%); --amplify-colors-pink-80: hsl(340, 70%, 70%); --amplify-colors-pink-90: hsl(340, 90%, 85%); --amplify-colors-pink-100: hsl(340, 95%, 95%); --amplify-colors-neutral-10: hsl(210, 50%, 10%); --amplify-colors-neutral-20: hsl(210, 25%, 25%); --amplify-colors-neutral-40: hsl(210, 10%, 40%); --amplify-colors-neutral-80: hsl(210, 5%, 87%); --amplify-colors-neutral-90: hsl(210, 5%, 94%); --amplify-colors-neutral-100: hsl(210, 5%, 98%); --amplify-colors-font-primary: var(--amplify-colors-white); --amplify-colors-font-secondary: var(--amplify-colors-neutral-100); --amplify-colors-font-tertiary: var(--amplify-colors-neutral-90); --amplify-colors-font-inverse: var(--amplify-colors-neutral-10); --amplify-colors-background-primary: var(--amplify-colors-neutral-10); --amplify-colors-background-secondary: var(--amplify-colors-neutral-20); --amplify-colors-background-tertiary: var(--amplify-colors-neutral-40); --amplify-colors-border-primary: var(--amplify-colors-neutral-60); --amplify-colors-border-secondary: var(--amplify-colors-neutral-40); --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20); --amplify-colors-overlay-5: hsla(0, 0%, 100%, 0.05); --amplify-colors-overlay-10: hsla(0, 0%, 100%, 0.1); --amplify-colors-overlay-20: hsla(0, 0%, 100%, 0.2); --amplify-colors-overlay-30: hsla(0, 0%, 100%, 0.3); --amplify-colors-overlay-40: hsla(0, 0%, 100%, 0.4); --amplify-colors-overlay-50: hsla(0, 0%, 100%, 0.5); --amplify-colors-overlay-60: hsla(0, 0%, 100%, 0.6); --amplify-colors-overlay-70: hsla(0, 0%, 100%, 0.7); --amplify-colors-overlay-80: hsla(0, 0%, 100%, 0.8); --amplify-colors-overlay-90: hsla(0, 0%, 100%, 0.9); color-scheme: dark; } </style></div></div></div><div style="justify-content:center" class="amplify-flex"><a class="amplify-button amplify-field-group__control amplify-button--primary amplify-button--large docs-home-cta" type="button" href="/react/theming"><span>Learn more about theming</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M19 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25zM11.5 9.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zm-1.51 3.49L9 15.17l-.99-2.18L5.83 12l2.18-.99L9 8.83l.99 2.18 2.18.99-2.18.99z"></path></svg></a></div></section><section id="figma" class="docs-home-section docs-burst-bg fade-in"><div style="flex-direction:column;gap:var(--amplify-space-large)" class="amplify-flex docs-home-subsection"><h2 class="amplify-heading amplify-heading--2 expand-out">Build UI <strong>visually</strong> in Figma</h2><div style="flex-direction:column;gap:var(--amplify-space-large)" class="amplify-flex"><div style="gap:var(--amplify-space-large);flex-direction:column;align-items:flex-start;flex:1" class="amplify-flex"><p class="amplify-text docs-home-text">With Amplify Studio you can design components in Figma, bind them to your data, and generate production-ready React code. Go from design to production-ready code in minutes and eliminate the design-development gap.</p></div><div style="flex:1;align-items:center;justify-content:center" class="amplify-flex docs-home-figma"><div class="docs-home-figma__node"><div class="docs-home-figma__node-label"><svg aria-label="" class="amplify-icon" viewBox="0 0 12 12"><path d="M3.743 2.748L6 .5l2.257 2.248L6 4.996 3.743 2.748zm-.995 5.51L.5 6l2.248-2.257L4.996 6 2.748 8.257zm5.51.994L6 11.5 3.743 9.252 6 7.004l2.257 2.248zM11.5 6L9.252 3.743 7.004 6l2.248 2.257L11.5 6z" fill="currentColor"></path></svg>ProductCard</div><div class="docs-home-figma__node-handles"></div><div class="docs-home-figma__node-handles"></div><div class="amplify-card amplify-card--elevated"><div style="flex-direction:column" class="amplify-flex"><p style="font-size:var(--amplify-font-sizes-large);font-weight:var(--amplify-font-weights-bold)" class="amplify-text docs-home-figma__data">AWS Amplify</p><div class="amplify-flex amplify-rating docs-home-figma__data"><span class="amplify-rating__item" aria-hidden="true"><span class="amplify-rating__icon amplify-rating__icon--filled"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z" fill="currentColor"></path></svg></span></span></span><span class="amplify-rating__item" aria-hidden="true"><span class="amplify-rating__icon amplify-rating__icon--filled"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z" fill="currentColor"></path></svg></span></span></span><span class="amplify-rating__item" aria-hidden="true"><span class="amplify-rating__icon amplify-rating__icon--filled"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z" fill="currentColor"></path></svg></span></span></span><span class="amplify-rating__item" aria-hidden="true"><span class="amplify-rating__icon amplify-rating__icon--empty"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z" fill="currentColor"></path></svg></span></span><span style="width:50%" class="amplify-rating__icon amplify-rating__icon--filled"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z" fill="currentColor"></path></svg></span></span></span><span class="amplify-rating__item" aria-hidden="true"><span class="amplify-rating__icon amplify-rating__icon--empty"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z" fill="currentColor"></path></svg></span></span></span><span class="amplify-visually-hidden">3.5 out of 5 rating</span></div><p style="font-size:var(--amplify-font-sizes-xl);color:var(--amplify-colors-font-tertiary)" class="amplify-text docs-home-figma__data">$99</p><button class="amplify-button amplify-field-group__control amplify-button--primary" type="button">Add to cart</button></div></div></div><div class="amplify-card docs-home-figma__studio"><p style="font-size:var(--amplify-font-sizes-xl)" class="amplify-text"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" aria-label="" style="color:var(--amplify-colors-font-disabled)" class="amplify-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 1h13l.5.5v12l-.5.5h-13l-.5-.5v-12l.5-.5zM2 5v8h12V5H2zm0-1h12V2H2v2z"></path></svg><code>Product</code></p><p class="amplify-text docs-home-figma__data"><code>Product.title</code></p><p class="amplify-text docs-home-figma__data"><code>Product.rating</code></p><p class="amplify-text docs-home-figma__data"><code>Product.price</code></p></div><div class="docs-home-figma__code"><pre class="docs-home-code prism-code language-jsx"><code class="docs-home-code prism-code language-jsx"><div class="token-line"><span class="amplify-text token tag punctuation"><</span><span class="amplify-text token tag class-name">ProductCard</span><span class="amplify-text token tag"> </span><span class="amplify-text token tag punctuation">/></span></div></code></pre></div></div></div><div style="flex-direction:column" class="amplify-flex docs-home-subsection--thin"><div class="amplify-card amplify-card--elevated"><video controls="" width="100%"><source src="/studio-demo.mp4" type="video/mp4"/></video></div><div style="justify-content:center" class="amplify-flex"><a class="amplify-button amplify-field-group__control amplify-button--primary amplify-button--large docs-home-cta" type="button" href="/react/getting-started/figma"><span>Learn more about Figma integration</span><svg class="amplify-icon" viewBox="0 0 172 247" alt=""><path fill="transparent" d="M164 46.5C164 67.763 146.763 85 125.5 85L86 85L86 8.0001L125.5 8.0001C146.763 8.0001 164 25.2371 164 46.5V46.5Z" stroke="currentColor" stroke-width="15.081"></path><path fill="transparent" d="M8 46.5C8 67.763 25.237 85 46.5 85L86 85L86 8.0001L46.5 8.0001C25.237 8.0001 8 25.2371 8 46.5V46.5Z" stroke="currentColor" stroke-width="15.081"></path><path fill="transparent" d="M8 123.501C8 144.764 25.237 162.001 46.5 162.001H86L86 85.0011L46.5 85.0011C25.237 85.0011 8 102.238 8 123.501V123.501Z" stroke="currentColor" stroke-width="15.081"></path><path fill="transparent" d="M8 200.5C8 221.763 25.4854 239 46.7484 239V239C68.2875 239 86 221.539 86 200L86 162H46.5C25.237 162 8 179.237 8 200.5V200.5Z" stroke="currentColor" stroke-width="15.081"></path><path fill="transparent" d="M86 123.501C86 144.764 103.237 162.001 124.5 162.001H125.5C146.763 162.001 164 144.764 164 123.501V123.501C164 102.238 146.763 85.0011 125.5 85.0011H124.5C103.237 85.0011 86 102.238 86 123.501V123.501Z" stroke="currentColor" stroke-width="15.081"></path></svg></a></div></div></div></section><section data-testid="docs-home-section" class="docs-home-section fade-in"><div style="flex-direction:column" class="amplify-flex docs-home-subsection--thin"><h2 class="amplify-heading amplify-heading--2 expand-out">Better <strong>together</strong> with AWS Amplify</h2><div style="flex-direction:column;flex:1;align-items:center;text-align:center" class="amplify-flex"><span style="padding:1rem;background-color:var(--amplify-colors-secondary-10);border-radius:var(--amplify-radii-small)"><svg aria-label="" style="font-size:var(--amplify-font-sizes-xl);color:var(--amplify-colors-secondary-60)" class="amplify-icon amplify-icon" viewBox="0 0 24 22"><path d="M14.3128 20.0394C14.3651 20.1298 14.4618 20.1855 14.5664 20.1855H16.8444C17.0698 20.1855 17.2107 19.942 17.098 19.7472L8.82308 5.44278C8.71037 5.24795 8.4286 5.24795 8.31589 5.44278L7.09981 7.54494C7.09518 7.55294 7.09518 7.56281 7.09981 7.57081L7.10128 7.57334C7.1106 7.58946 7.09894 7.60961 7.08029 7.60961C7.07163 7.60961 7.06363 7.61422 7.0593 7.62171L0.0396396 19.7616C-0.0730193 19.9565 0.0678714 20.2 0.293265 20.2H10.9633C11.1887 20.2 11.3296 19.9564 11.2169 19.7616L10.1254 17.8749C10.0731 17.7845 9.97646 17.7288 9.87184 17.7288H4.4145C4.3018 17.7288 4.23135 17.607 4.28771 17.5096L8.4417 10.3288C8.49805 10.2314 8.63894 10.2314 8.6953 10.3288L14.3128 20.0394Z"></path><path d="M10.1282 2.30989C10.0759 2.40032 10.0759 2.51172 10.1282 2.60214L20.2155 20.0394C20.2678 20.1298 20.3645 20.1855 20.4691 20.1855H22.7412C22.9666 20.1855 23.1075 19.942 22.9948 19.7472L11.7715 0.346077C11.6588 0.151242 11.377 0.151243 11.2643 0.346077L10.1282 2.30989Z"></path></svg></span><div><p style="font-weight:var(--amplify-font-weights-semibold);font-size:var(--amplify-font-sizes-large)" class="amplify-text">Build your application visually in Amplify Studio</p><p class="amplify-text">Deploy and manage your app backend with a GraphQL API, User login, File storage and more in minutes. Start small and build to the full scale of AWS! Build components visually in Figma, bind them to your data, and use them in your codebase.<br/><a class="amplify-link" href="https://docs.amplify.aws/console/">Learn more about Amplify Studio</a></p></div></div><div style="flex-direction:column;flex:1;align-items:center;text-align:center" class="amplify-flex"><span style="padding:1rem;background-color:var(--amplify-colors-secondary-10);border-radius:var(--amplify-radii-small)"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" aria-label="" style="color:var(--amplify-colors-secondary-60);font-size:var(--amplify-font-sizes-xl)" class="amplify-icon amplify-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 2.5l.5-.5h2l.5.5v11l-.5.5h-2l-.5-.5v-11zM6 3v10h1V3H6zm3.171.345l.299-.641 1.88-.684.64.299 3.762 10.336-.299.641-1.879.684-.64-.299L9.17 3.345zm1.11.128l3.42 9.396.94-.341-3.42-9.397-.94.342zM1 2.5l.5-.5h2l.5.5v11l-.5.5h-2l-.5-.5v-11zM2 3v10h1V3H2z"></path></svg></span><div><p style="font-weight:var(--amplify-font-weights-semibold);font-size:var(--amplify-font-sizes-large)" class="amplify-text">Connect your UI to your backend with Amplify libraries.</p><p class="amplify-text">Amplify Libraries offer an opinionated and declarative interfaces to connect to your backend. The libraries are pluggable and can be extended to use other providers.<br/><a class="amplify-link" href="https://docs.amplify.aws/lib/q/platform/js/">Learn more about Amplify Libraries</a></p></div></div><div style="flex-direction:column;flex:1;align-items:center;text-align:center" class="amplify-flex"><span style="padding:1rem;background-color:var(--amplify-colors-secondary-10);border-radius:var(--amplify-radii-small)"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" aria-label="" style="color:var(--amplify-colors-secondary-60);font-size:var(--amplify-font-sizes-xl)" class="amplify-icon amplify-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 5L2 4.5v-3l.5-.5h11l.5.5v3l-.5.5h-11zM10 2H9v1H8V2H7v1H6V2H5v1H4V2H3v2h10V2h-2v1h-1V2zm-7.5 8L2 9.5v-3l.5-.5h11l.5.5v3l-.5.5h-11zM6 7H5v1H4V7H3v2h10V7h-2v1h-1V7H9v1H8V7H7v1H6V7zm7.5 8l.5-.5v-3l-.5-.5h-11l-.5.5v3l.5.5h11zM3 14v-2h1v1h1v-1h1v1h1v-1h1v1h1v-1h1v1h1v-1h2v2H3z"></path></svg></span><div><p style="font-weight:var(--amplify-font-weights-semibold);font-size:var(--amplify-font-sizes-large)" class="amplify-text">Deploy your front-end in minutes with Amplify Hosting.</p><p class="amplify-text">Fully managed web hosting with full-stack CI/CD. Amplify Hosting has support for common SPA and SSG frameworks like Next.js, Gatsby, and Eleventy.<br/><a class="amplify-link" rel="noopener noreferrer" target="_blank" href="https://docs.aws.amazon.com/amplify/latest/userguide/getting-started.html">Learn more about Amplify Hosting</a></p></div></div></div></section><section id="accessibility" class="docs-home-section fade-in"><div style="flex-direction:column;text-align:center" class="amplify-flex docs-home-subsection--thin"><h2 class="amplify-heading amplify-heading--2 expand-out"><strong>Accessibility</strong> built-in</h2><p class="amplify-text docs-home-text">Amplify UI components follow <a class="amplify-link" rel="noopener noreferrer" target="_blank" href="https://www.w3.org/WAI/standards-guidelines/wcag/">WCAG</a> and <a class="amplify-link" rel="noopener noreferrer" target="_blank" href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA</a> best practices to ensure <em>all</em> users can use your application.</p><div style="flex-direction:column;flex-wrap:wrap;gap:var(--amplify-space-xxl)" class="amplify-flex"><div style="min-width:40%;flex-direction:column;flex:1;align-items:center;text-align:center" class="amplify-flex"><span style="padding:1rem;background-color:var(--amplify-colors-secondary-10);border-radius:var(--amplify-radii-small)"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" aria-label="" style="color:var(--amplify-colors-secondary-60);font-size:var(--amplify-font-sizes-xl)" class="amplify-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M12 4.81V19c-3.31 0-6-2.63-6-5.87 0-1.56.62-3.03 1.75-4.14L12 4.81M6.35 7.56C4.9 8.99 4 10.96 4 13.13 4 17.48 7.58 21 12 21s8-3.52 8-7.87c0-2.17-.9-4.14-2.35-5.57L12 2 6.35 7.56z"></path></svg></span><div><p style="font-weight:var(--amplify-font-weights-semibold);font-size:var(--amplify-font-sizes-large)" class="amplify-text">Color contrast</p><p class="amplify-text">All components have AA or higher contrast in both light and dark mode</p></div></div><div style="min-width:40%;flex-direction:column;flex:1;align-items:center;text-align:center" class="amplify-flex"><span style="padding:1rem;background-color:var(--amplify-colors-secondary-10);border-radius:var(--amplify-radii-small)"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" aria-label="" style="color:var(--amplify-colors-secondary-60);font-size:var(--amplify-font-sizes-xl)" class="amplify-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M20 5H4c-1.1 0-1.99.9-1.99 2L2 17c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-9 3h2v2h-2V8zm0 3h2v2h-2v-2zM8 8h2v2H8V8zm0 3h2v2H8v-2zm-1 2H5v-2h2v2zm0-3H5V8h2v2zm9 7H8v-2h8v2zm0-4h-2v-2h2v2zm0-3h-2V8h2v2zm3 3h-2v-2h2v2zm0-3h-2V8h2v2z"></path><path fill="none" d="M0 0h24v24H0zm0 0h24v24H0z"></path></svg></span><div><p style="font-weight:var(--amplify-font-weights-semibold);font-size:var(--amplify-font-sizes-large)" class="amplify-text">Keyboard navigation</p><p class="amplify-text">Interactive components support keyboard navigation users would expect</p></div></div><div style="min-width:40%;flex-direction:column;flex:1;align-items:center;text-align:center" class="amplify-flex"><span style="padding:1rem;background-color:var(--amplify-colors-secondary-10);border-radius:var(--amplify-radii-small)"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" aria-label="" style="color:var(--amplify-colors-secondary-60);font-size:var(--amplify-font-sizes-xl)" class="amplify-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M22 9v6c0 1.1-.9 2-2 2h-1v-2h1V9H4v6h6v2H4c-1.1 0-2-.9-2-2V9c0-1.1.9-2 2-2h16c1.1 0 2 .9 2 2zm-7.5 10l1.09-2.41L18 15.5l-2.41-1.09L14.5 12l-1.09 2.41L11 15.5l2.41 1.09L14.5 19zm2.5-5l.62-1.38L19 12l-1.38-.62L17 10l-.62 1.38L15 12l1.38.62L17 14zm-2.5 5l1.09-2.41L18 15.5l-2.41-1.09L14.5 12l-1.09 2.41L11 15.5l2.41 1.09L14.5 19zm2.5-5l.62-1.38L19 12l-1.38-.62L17 10l-.62 1.38L15 12l1.38.62L17 14z"></path></svg></span><div><p style="font-weight:var(--amplify-font-weights-semibold);font-size:var(--amplify-font-sizes-large)" class="amplify-text">Focus management</p><p class="amplify-text">Focusable components have proper focus states and interactivity</p></div></div><div style="min-width:40%;flex-direction:column;flex:1;align-items:center;text-align:center" class="amplify-flex"><span style="padding:1rem;background-color:var(--amplify-colors-secondary-10);border-radius:var(--amplify-radii-small)"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" aria-label="" style="color:var(--amplify-colors-secondary-60);font-size:var(--amplify-font-sizes-xl)" class="amplify-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 1.99 2 1.99L16 19c.67 0 1.27-.33 1.63-.84L22 12l-4.37-6.16z"></path></svg></span><div><p style="font-weight:var(--amplify-font-weights-semibold);font-size:var(--amplify-font-sizes-large)" class="amplify-text">Accessible labels</p><p class="amplify-text">Form fields and icons have accessible labels, plus there are utilities to help make sure your application is labelled.</p></div></div></div><div style="justify-content:center" class="amplify-flex"><a class="amplify-button amplify-field-group__control amplify-button--primary amplify-button--large docs-home-cta" type="button" href="/react/getting-started/accessibility"><span>View our accessibility guidelines</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M20.5 6c-2.61.7-5.67 1-8.5 1s-5.89-.3-8.5-1L3 8c1.86.5 4 .83 6 1v13h2v-6h2v6h2V9c2-.17 4.14-.5 6-1l-.5-2zM12 6c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"></path></svg></a></div></div></section><section id="compatible" class="docs-home-section fade-in"><div style="flex-direction:column" class="amplify-flex docs-home-subsection"><h2 style="text-align:center" class="amplify-heading amplify-heading--2 expand-out"><strong>Compatible</strong> with your front-end</h2><div style="flex-direction:column;gap:var(--amplify-space-xxl)" class="amplify-flex"><div style="flex-direction:column;flex:1;align-items:center;text-align:center" class="amplify-flex"><span style="padding:1rem;background-color:var(--amplify-colors-secondary-10);border-radius:var(--amplify-radii-small)"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" aria-label="" style="color:var(--amplify-colors-secondary-60);font-size:var(--amplify-font-sizes-xl)" class="amplify-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm7.46 7.12l-2.78 1.15a4.982 4.982 0 00-2.95-2.94l1.15-2.78c2.1.8 3.77 2.47 4.58 4.57zM12 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zM9.13 4.54l1.17 2.78a5 5 0 00-2.98 2.97L4.54 9.13a7.984 7.984 0 014.59-4.59zM4.54 14.87l2.78-1.15a4.968 4.968 0 002.97 2.96l-1.17 2.78a7.996 7.996 0 01-4.58-4.59zm10.34 4.59l-1.15-2.78a4.978 4.978 0 002.95-2.97l2.78 1.17a8.007 8.007 0 01-4.58 4.58z"></path></svg></span><div><p style="font-weight:var(--amplify-font-weights-semibold);font-size:var(--amplify-font-sizes-large)" class="amplify-text">Escape hatches</p><p class="amplify-text">Connected components like the Authenticator have headless, or UI-less, implementations that handle complex state management and leave the UI up to you.</p></div></div><div style="flex-direction:column;flex:1;align-items:center;text-align:center" class="amplify-flex"><span style="padding:1rem;background-color:var(--amplify-colors-secondary-10);border-radius:var(--amplify-radii-small)"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" aria-label="" style="color:var(--amplify-colors-secondary-60);font-size:var(--amplify-font-sizes-xl)" class="amplify-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M17 10h-3.61l2.28 2.28zm0-8H7v1.61l6.13 6.13zm-13.59.86L2 4.27l5 5V13h3v9l3.58-6.15L17.73 20l1.41-1.41z"></path></svg></span><div><p style="font-weight:var(--amplify-font-weights-semibold);font-size:var(--amplify-font-sizes-large)" class="amplify-text">Styling optional</p><p class="amplify-text">Don‘t like our style? Throw it out and use your own! Amplify UI components use plain CSS so you have complete control over the styling.</p></div></div><div style="flex-direction:column;flex:1;align-items:center;text-align:center" class="amplify-flex"><span style="padding:1rem;background-color:var(--amplify-colors-secondary-10);border-radius:var(--amplify-radii-small)"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" aria-label="" style="color:var(--amplify-colors-secondary-60);font-size:var(--amplify-font-sizes-xl)" class="amplify-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><title></title><path d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z"></path></svg></span><div><p style="font-weight:var(--amplify-font-weights-semibold);font-size:var(--amplify-font-sizes-large)" class="amplify-text">TypeScript & IntelliSense</p><p class="amplify-text">Let your IDE do the work for you and make UI development a breeze with strongly typed interfaces and inline documentation.</p></div></div></div><div style="justify-content:center" class="amplify-flex"><a class="amplify-button amplify-field-group__control amplify-button--primary amplify-button--large docs-home-cta" type="button" href="/react/getting-started/introduction">Learn more about Amplify UI‘s design philosophy</a></div></div></section><footer style="flex-direction:column" class="amplify-flex docs-footer"><div style="flex-direction:row;justify-content:center" class="amplify-flex"><svg class="docs-logo-svg" viewBox="0 0 644 125" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M108.727 98.4091H128.091V56.5C128.091 48.7727 133 43.6364 139.455 43.6364C145.818 43.6364 150.091 48 150.091 54.8636V98.4091H168.864V55.7727C168.864 48.5455 173 43.6364 180.045 43.6364C186.227 43.6364 190.864 47.5 190.864 55.2727V98.4091H210.182V51.4546C210.182 36.3182 201.182 27.6818 188.182 27.6818C177.955 27.6818 170 32.9091 167.136 40.9091H166.409C164.182 32.8182 157.045 27.6818 147.455 27.6818C138.045 27.6818 130.909 32.6818 128 40.9091H127.182V28.5909H108.727V98.4091Z" fill="var(--amplify-colors-font-primary)"></path><path d="M225.477 124.591H244.841V87.2273H245.432C248.114 93.0455 253.977 99.5455 265.25 99.5455C281.159 99.5455 293.568 86.9545 293.568 63.5909C293.568 39.5909 280.614 27.6818 265.295 27.6818C253.614 27.6818 248.023 34.6364 245.432 40.3182H244.568V28.5909H225.477V124.591ZM244.432 63.5C244.432 51.0455 249.705 43.0909 259.114 43.0909C268.705 43.0909 273.795 51.4091 273.795 63.5C273.795 75.6818 268.614 84.1364 259.114 84.1364C249.795 84.1364 244.432 75.9546 244.432 63.5Z" fill="var(--amplify-colors-font-primary)"></path><path d="M325.841 5.31818H306.477V98.4091H325.841V5.31818Z" fill="var(--amplify-colors-font-primary)"></path><path d="M341.352 98.4091H360.716V28.5909H341.352V98.4091ZM351.08 19.5909C356.852 19.5909 361.58 15.1818 361.58 9.77273C361.58 4.4091 356.852 0 351.08 0C345.352 0 340.625 4.4091 340.625 9.77273C340.625 15.1818 345.352 19.5909 351.08 19.5909Z" fill="var(--amplify-colors-font-primary)"></path><path d="M413.773 28.5909H399.909V23.9091C399.909 19.1818 401.818 16.4091 407.5 16.4091C409.818 16.4091 412.182 16.9091 413.727 17.4091L417.136 2.86364C414.727 2.13637 409.409 0.954544 403.455 0.954544C390.318 0.954544 380.545 8.36364 380.545 23.5455V28.5909H370.682V43.1364H380.545V98.4091H399.909V43.1364H413.773V28.5909Z" fill="var(--amplify-colors-font-primary)"></path><path d="M437.557 124.591C451.966 124.591 459.602 117.227 463.557 105.955L490.693 28.6818L470.193 28.5909L455.602 79.8636H454.875L440.421 28.5909H420.057L445.102 100.409L443.966 103.364C441.42 109.909 436.557 110.227 429.739 108.136L425.375 122.591C428.148 123.773 432.648 124.591 437.557 124.591Z" fill="var(--amplify-colors-font-primary)"></path><path d="M588.091 5.31818V64.0909C588.091 74.7273 580.636 82.4091 569.182 82.4091C557.773 82.4091 550.273 74.7273 550.273 64.0909V5.31818H530.591V65.7727C530.591 86.1364 545.955 99.7273 569.182 99.7273C592.318 99.7273 607.773 86.1364 607.773 65.7727V5.31818H588.091Z" fill="var(--amplify-colors-font-primary)"></path><path d="M643.648 5.31818H623.966V98.4091H643.648V5.31818Z" fill="var(--amplify-colors-font-primary)"></path><path d="M27.4194 82.4091H62.9094L72 98.4091H71.7439H0L25.2809 54.6012L35.8752 36.2564L44.971 52.0175L27.4194 82.4091ZM40.6554 27.9603L49.3888 12.8276L98.8145 98.4088H81.3109L40.6554 27.9603ZM54.2496 4.40906H71.7299L126 98.4091H108.498L54.2496 4.40906Z" fill="var(--amplify-colors-primary-60)"></path></svg></div><div style="justify-content:center;align-items:center;flex-direction:column;gap:var(--amplify-space-xs)" class="amplify-flex"><a style="gap:var(--amplify-space-xs)" class="amplify-button amplify-field-group__control amplify-button--link" type="button" href="https://github.com/aws-amplify/amplify-ui/" rel="noopener noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" aria-label="" class="amplify-icon" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><title></title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg>Contribute on GitHub</a><a style="gap:var(--amplify-space-xs)" class="amplify-button amplify-field-group__control amplify-button--link" type="button" href="https://discord.com/invite/amplify" rel="noopener noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" aria-label="" class="amplify-icon" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><title></title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"></path></svg>Discuss on Discord</a></div><div style="font-size:var(--amplify-font-sizes-small)"><p class="amplify-text">Amplify open source software, documentation and community are supported by Amazon Web Services.</p><p class="amplify-text"> © 2024 Amazon Web Services, Inc. and its affiliates. All rights reserved. View the <a class="amplify-link" rel="noopener noreferrer" target="_blank" href="https://aws.amazon.com/terms/">site terms</a> and <a class="amplify-link" rel="noopener noreferrer" target="_blank" href="https://aws.amazon.com/privacy/">privacy policy</a>.</p><p style="margin-block-start:var(--amplify-space-medium)" class="amplify-text">Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.</p></div></footer></main></div></div><style id="amplify-theme-amplify-docs">[data-amplify-theme="amplify-docs"] { --amplify-components-accordion-background-color: var(--amplify-colors-background-primary); --amplify-components-accordion-item-border-color: var(--amplify-colors-border-secondary); --amplify-components-accordion-item-border-width: var(--amplify-border-widths-small); --amplify-components-accordion-item-border-style: solid; --amplify-components-accordion-item-border-radius: var(--amplify-radii-small); --amplify-components-accordion-item-trigger-align-items: center; --amplify-components-accordion-item-trigger-background-color: var(--amplify-colors-background-primary); --amplify-components-accordion-item-trigger-color: inherit; --amplify-components-accordion-item-trigger-gap: var(--amplify-space-small); --amplify-components-accordion-item-trigger-justify-content: space-between; --amplify-components-accordion-item-trigger-padding-block: var(--amplify-space-xs); --amplify-components-accordion-item-trigger-padding-inline: var(--amplify-space-small); --amplify-components-accordion-item-trigger-hover-color: inherit; --amplify-components-accordion-item-trigger-hover-background-color: var(--amplify-colors-overlay-5); --amplify-components-accordion-item-trigger-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-accordion-item-trigger-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus); --amplify-components-accordion-item-content-color: inherit; --amplify-components-accordion-item-content-padding-inline: var(--amplify-space-small); --amplify-components-accordion-item-content-padding-block-end: var(--amplify-space-small); --amplify-components-accordion-item-content-padding-block-start: var(--amplify-space-xxxs); --amplify-components-accordion-item-icon-color: var(--amplify-colors-font-tertiary); --amplify-components-accordion-item-icon-transition-duration: var(--amplify-time-medium); --amplify-components-accordion-item-icon-transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1); --amplify-components-ai-conversation-message-background-color: var(--amplify-colors-background-secondary); --amplify-components-ai-conversation-message-border-radius: var(--amplify-radii-large); --amplify-components-ai-conversation-message-gap: var(--amplify-space-small); --amplify-components-ai-conversation-message-padding-block: var(--amplify-space-small); --amplify-components-ai-conversation-message-padding-inline: var(--amplify-space-small); --amplify-components-ai-conversation-message-user-background-color: var(--amplify-colors-background-secondary); --amplify-components-ai-conversation-message-assistant-background-color: var(--amplify-colors-primary-10); --amplify-components-ai-conversation-message-sender-gap: var(--amplify-space-small); --amplify-components-ai-conversation-message-sender-username-color: var(--amplify-colors-font-primary); --amplify-components-ai-conversation-message-sender-username-font-size: inherit; --amplify-components-ai-conversation-message-sender-username-font-weight: var(--amplify-font-weights-bold); --amplify-components-ai-conversation-message-sender-timestamp-color: var(--amplify-colors-font-tertiary); --amplify-components-ai-conversation-message-sender-timestamp-font-size: inherit; --amplify-components-ai-conversation-message-sender-timestamp-font-weight: inherit; --amplify-components-ai-conversation-message-body-gap: var(--amplify-space-xs); --amplify-components-ai-conversation-form-gap: var(--amplify-space-small); --amplify-components-ai-conversation-form-padding: var(--amplify-space-small); --amplify-components-ai-conversation-attachment-border-color: var(--amplify-colors-border-secondary); --amplify-components-ai-conversation-attachment-border-width: var(--amplify-border-widths-small); --amplify-components-ai-conversation-attachment-border-radius: var(--amplify-radii-small); --amplify-components-ai-conversation-attachment-font-size: var(--amplify-font-sizes-small); --amplify-components-ai-conversation-attachment-padding-block: var(--amplify-space-xxxs); --amplify-components-ai-conversation-attachment-padding-inline: var(--amplify-space-xs); --amplify-components-ai-conversation-attachment-gap: var(--amplify-space-xs); --amplify-components-ai-conversation-attachment-list-padding-block-start: var(--amplify-space-xs); --amplify-components-ai-conversation-attachment-list-gap: var(--amplify-space-xxs); --amplify-components-ai-conversation-attachment-name-color: var(--amplify-colors-font-primary); --amplify-components-ai-conversation-attachment-name-font-size: var(--amplify-font-sizes-small); --amplify-components-ai-conversation-attachment-name-font-weight: var(--amplify-font-weights-normal); --amplify-components-ai-conversation-attachment-size-color: var(--amplify-colors-font-tertiary); --amplify-components-ai-conversation-attachment-size-font-size: var(--amplify-font-sizes-small); --amplify-components-ai-conversation-attachment-size-font-weight: var(--amplify-font-weights-normal); --amplify-components-ai-conversation-attachment-remove-padding: var(--amplify-space-xxs); --amplify-components-ai-conversation-attachment-image-width: var(--amplify-font-sizes-medium); --amplify-components-ai-conversation-attachment-image-height: var(--amplify-font-sizes-medium); --amplify-components-alert-align-items: center; --amplify-components-alert-justify-content: space-between; --amplify-components-alert-color: var(--amplify-colors-font-primary); --amplify-components-alert-background-color: var(--amplify-colors-background-tertiary); --amplify-components-alert-padding-block: var(--amplify-space-small); --amplify-components-alert-padding-inline: var(--amplify-space-medium); --amplify-components-alert-icon-size: var(--amplify-font-sizes-xl); --amplify-components-alert-heading-font-size: var(--amplify-font-sizes-medium); --amplify-components-alert-heading-font-weight: var(--amplify-font-weights-bold); --amplify-components-alert-info-color: var(--amplify-colors-font-info); --amplify-components-alert-info-background-color: var(--amplify-colors-background-info); --amplify-components-alert-error-color: var(--amplify-colors-font-error); --amplify-components-alert-error-background-color: var(--amplify-colors-background-error); --amplify-components-alert-warning-color: var(--amplify-colors-font-warning); --amplify-components-alert-warning-background-color: var(--amplify-colors-background-warning); --amplify-components-alert-success-color: var(--amplify-colors-font-success); --amplify-components-alert-success-background-color: var(--amplify-colors-background-success); --amplify-components-authenticator-max-width: 60rem; --amplify-components-authenticator-modal-width: var(--amplify-space-relative-full); --amplify-components-authenticator-modal-height: var(--amplify-space-relative-full); --amplify-components-authenticator-modal-background-color: var(--amplify-colors-overlay-50); --amplify-components-authenticator-modal-top: var(--amplify-space-zero); --amplify-components-authenticator-modal-left: var(--amplify-space-zero); --amplify-components-authenticator-container-width-max: 30rem; --amplify-components-authenticator-router-border-width: var(--amplify-border-widths-small); --amplify-components-authenticator-router-border-style: solid; --amplify-components-authenticator-router-border-color: var(--amplify-colors-border-primary); --amplify-components-authenticator-router-background-color: var(--amplify-colors-background-primary); --amplify-components-authenticator-router-box-shadow: var(--amplify-shadows-medium); --amplify-components-authenticator-footer-padding-bottom: var(--amplify-space-medium); --amplify-components-authenticator-form-padding: var(--amplify-space-xl); --amplify-components-authenticator-state-inactive-background-color: var(--amplify-colors-background-secondary); --amplify-components-authenticator-or-container-color: var(--amplify-colors-neutral-80); --amplify-components-authenticator-or-container-or-line-background-color: var(--amplify-colors-background-primary); --amplify-components-autocomplete-menu-width: 100%; --amplify-components-autocomplete-menu-margin-block-start: var(--amplify-space-xxxs); --amplify-components-autocomplete-menu-background-color: var(--amplify-colors-background-primary); --amplify-components-autocomplete-menu-border-color: var(--amplify-colors-border-primary); --amplify-components-autocomplete-menu-border-width: var(--amplify-border-widths-small); --amplify-components-autocomplete-menu-border-style: solid; --amplify-components-autocomplete-menu-border-radius: var(--amplify-radii-small); --amplify-components-autocomplete-menu-options-display: flex; --amplify-components-autocomplete-menu-options-flex-direction: column; --amplify-components-autocomplete-menu-options-max-height: 300px; --amplify-components-autocomplete-menu-option-background-color: var(--amplify-colors-background-primary); --amplify-components-autocomplete-menu-option-color: currentcolor; --amplify-components-autocomplete-menu-option-cursor: pointer; --amplify-components-autocomplete-menu-option-transition-duration: var(--amplify-time-short); --amplify-components-autocomplete-menu-option-transition-property: background-color, color; --amplify-components-autocomplete-menu-option-transition-timing-function: ease; --amplify-components-autocomplete-menu-option-active-background-color: var(--amplify-colors-primary-80); --amplify-components-autocomplete-menu-option-active-color: var(--amplify-colors-white); --amplify-components-autocomplete-menu-empty-display: flex; --amplify-components-autocomplete-menu-loading-align-items: center; --amplify-components-autocomplete-menu-loading-display: flex; --amplify-components-autocomplete-menu-loading-gap: var(--amplify-space-xxxs); --amplify-components-autocomplete-menu-space-shared-padding-block: var(--amplify-space-xs); --amplify-components-autocomplete-menu-space-shared-padding-inline: var(--amplify-space-small); --amplify-components-avatar-color: var(--amplify-colors-font-tertiary); --amplify-components-avatar-line-height: 1; --amplify-components-avatar-font-weight: var(--amplify-font-weights-semibold); --amplify-components-avatar-font-size: var(--amplify-font-sizes-small); --amplify-components-avatar-text-align: center; --amplify-components-avatar-width: var(--amplify-font-sizes-xxl); --amplify-components-avatar-height: var(--amplify-font-sizes-xxl); --amplify-components-avatar-background-color: var(--amplify-colors-background-tertiary); --amplify-components-avatar-border-radius: 100%; --amplify-components-avatar-border-color: var(--amplify-colors-border-primary); --amplify-components-avatar-border-width: var(--amplify-border-widths-medium); --amplify-components-avatar-info-color: var(--amplify-colors-font-info); --amplify-components-avatar-info-background-color: var(--amplify-colors-background-info); --amplify-components-avatar-info-border-color: var(--amplify-colors-border-info); --amplify-components-avatar-warning-color: var(--amplify-colors-font-warning); --amplify-components-avatar-warning-background-color: var(--amplify-colors-background-warning); --amplify-components-avatar-warning-border-color: var(--amplify-colors-border-warning); --amplify-components-avatar-success-color: var(--amplify-colors-font-success); --amplify-components-avatar-success-background-color: var(--amplify-colors-background-success); --amplify-components-avatar-success-border-color: var(--amplify-colors-border-success); --amplify-components-avatar-error-color: var(--amplify-colors-font-error); --amplify-components-avatar-error-background-color: var(--amplify-colors-background-error); --amplify-components-avatar-error-border-color: var(--amplify-colors-border-error); --amplify-components-avatar-small-font-size: var(--amplify-font-sizes-xs); --amplify-components-avatar-small-width: var(--amplify-font-sizes-xl); --amplify-components-avatar-small-height: var(--amplify-font-sizes-xl); --amplify-components-avatar-large-font-size: var(--amplify-font-sizes-medium); --amplify-components-avatar-large-width: var(--amplify-font-sizes-xxxl); --amplify-components-avatar-large-height: var(--amplify-font-sizes-xxxl); --amplify-components-badge-color: var(--amplify-colors-font-primary); --amplify-components-badge-line-height: 1; --amplify-components-badge-font-weight: var(--amplify-font-weights-semibold); --amplify-components-badge-font-size: var(--amplify-font-sizes-small); --amplify-components-badge-text-align: center; --amplify-components-badge-padding-vertical: var(--amplify-space-xs); --amplify-components-badge-padding-horizontal: var(--amplify-space-small); --amplify-components-badge-background-color: var(--amplify-colors-background-tertiary); --amplify-components-badge-border-radius: var(--amplify-radii-xl); --amplify-components-badge-info-color: var(--amplify-colors-font-info); --amplify-components-badge-info-background-color: var(--amplify-colors-background-info); --amplify-components-badge-warning-color: var(--amplify-colors-font-warning); --amplify-components-badge-warning-background-color: var(--amplify-colors-background-warning); --amplify-components-badge-success-color: var(--amplify-colors-font-success); --amplify-components-badge-success-background-color: var(--amplify-colors-background-success); --amplify-components-badge-error-color: var(--amplify-colors-font-error); --amplify-components-badge-error-background-color: var(--amplify-colors-background-error); --amplify-components-badge-small-font-size: var(--amplify-font-sizes-xs); --amplify-components-badge-small-padding-vertical: var(--amplify-space-xxs); --amplify-components-badge-small-padding-horizontal: var(--amplify-space-xs); --amplify-components-badge-large-font-size: var(--amplify-font-sizes-medium); --amplify-components-badge-large-padding-vertical: var(--amplify-space-small); --amplify-components-badge-large-padding-horizontal: var(--amplify-space-medium); --amplify-components-breadcrumbs-flex-direction: row; --amplify-components-breadcrumbs-flex-wrap: wrap; --amplify-components-breadcrumbs-gap: 0; --amplify-components-breadcrumbs-color: var(--amplify-colors-font-tertiary); --amplify-components-breadcrumbs-item-flex-direction: row; --amplify-components-breadcrumbs-item-color: inherit; --amplify-components-breadcrumbs-item-font-size: inherit; --amplify-components-breadcrumbs-item-align-items: center; --amplify-components-breadcrumbs-item-line-height: 1; --amplify-components-breadcrumbs-separator-color: inherit; --amplify-components-breadcrumbs-separator-font-size: inherit; --amplify-components-breadcrumbs-separator-padding-inline: var(--amplify-space-xxs); --amplify-components-breadcrumbs-link-color: var(--amplify-components-link-color); --amplify-components-breadcrumbs-link-font-size: inherit; --amplify-components-breadcrumbs-link-font-weight: normal; --amplify-components-breadcrumbs-link-text-decoration: none; --amplify-components-breadcrumbs-link-padding-inline: var(--amplify-space-xs); --amplify-components-breadcrumbs-link-padding-block: var(--amplify-space-xxs); --amplify-components-breadcrumbs-link-current-color: inherit; --amplify-components-breadcrumbs-link-current-font-size: inherit; --amplify-components-breadcrumbs-link-current-font-weight: normal; --amplify-components-breadcrumbs-link-current-text-decoration: none; --amplify-components-button-font-weight: var(--amplify-font-weights-bold); --amplify-components-button-transition-duration: var(--amplify-components-fieldcontrol-transition-duration); --amplify-components-button-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-button-line-height: var(--amplify-components-fieldcontrol-line-height); --amplify-components-button-padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start); --amplify-components-button-padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end); --amplify-components-button-padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start); --amplify-components-button-padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end); --amplify-components-button-background-color: transparent; --amplify-components-button-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-button-border-width: var(--amplify-components-fieldcontrol-border-width); --amplify-components-button-border-style: var(--amplify-components-fieldcontrol-border-style); --amplify-components-button-border-radius: var(--amplify-components-fieldcontrol-border-radius); --amplify-components-button-color: var(--amplify-colors-font-primary); --amplify-components-button-hover-color: var(--amplify-colors-font-focus); --amplify-components-button-hover-background-color: var(--amplify-colors-primary-10); --amplify-components-button-hover-border-color: var(--amplify-colors-primary-60); --amplify-components-button-focus-color: var(--amplify-colors-font-focus); --amplify-components-button-focus-background-color: var(--amplify-colors-primary-10); --amplify-components-button-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-button-active-color: var(--amplify-colors-font-active); --amplify-components-button-active-background-color: var(--amplify-colors-primary-20); --amplify-components-button-active-border-color: var(--amplify-colors-primary-100); --amplify-components-button-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-loading-background-color: transparent; --amplify-components-button-loading-border-color: var(--amplify-colors-border-tertiary); --amplify-components-button-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-disabled-background-color: transparent; --amplify-components-button-disabled-border-color: var(--amplify-colors-border-tertiary); --amplify-components-button-outlined-info-border-color: var(--amplify-colors-blue-60); --amplify-components-button-outlined-info-background-color: transparent; --amplify-components-button-outlined-info-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-hover-border-color: var(--amplify-colors-blue-60); --amplify-components-button-outlined-info-hover-background-color: var(--amplify-colors-blue-10); --amplify-components-button-outlined-info-hover-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-focus-border-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-focus-background-color: var(--amplify-colors-blue-10); --amplify-components-button-outlined-info-focus-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow); --amplify-components-button-outlined-info-active-border-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-active-background-color: var(--amplify-colors-blue-20); --amplify-components-button-outlined-info-active-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-warning-border-color: var(--amplify-colors-orange-60); --amplify-components-button-outlined-warning-background-color: transparent; --amplify-components-button-outlined-warning-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-hover-border-color: var(--amplify-colors-orange-60); --amplify-components-button-outlined-warning-hover-background-color: var(--amplify-colors-orange-10); --amplify-components-button-outlined-warning-hover-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-focus-border-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-focus-background-color: var(--amplify-colors-orange-10); --amplify-components-button-outlined-warning-focus-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow); --amplify-components-button-outlined-warning-active-border-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-active-background-color: var(--amplify-colors-orange-20); --amplify-components-button-outlined-warning-active-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-success-border-color: var(--amplify-colors-green-60); --amplify-components-button-outlined-success-background-color: transparent; --amplify-components-button-outlined-success-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-hover-border-color: var(--amplify-colors-green-60); --amplify-components-button-outlined-success-hover-background-color: var(--amplify-colors-green-10); --amplify-components-button-outlined-success-hover-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-focus-border-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-focus-background-color: var(--amplify-colors-green-10); --amplify-components-button-outlined-success-focus-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow); --amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20); --amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-80); --amplify-components-button-outlined-error-background-color: transparent; --amplify-components-button-outlined-error-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-80); --amplify-components-button-outlined-error-hover-background-color: var(--amplify-colors-red-10); --amplify-components-button-outlined-error-hover-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-focus-background-color: var(--amplify-colors-red-10); --amplify-components-button-outlined-error-focus-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-outlined-error-active-border-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-active-background-color: var(--amplify-colors-red-20); --amplify-components-button-outlined-error-active-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-overlay-border-color: var(--amplify-colors-overlay-60); --amplify-components-button-outlined-overlay-background-color: transparent; --amplify-components-button-outlined-overlay-color: var(--amplify-colors-font-primary); --amplify-components-button-outlined-overlay-hover-border-color: var(--amplify-colors-overlay-60); --amplify-components-button-outlined-overlay-hover-background-color: var(--amplify-colors-overlay-5); --amplify-components-button-outlined-overlay-hover-color: var(--amplify-colors-neutral-90); --amplify-components-button-outlined-overlay-focus-border-color: var(--amplify-colors-overlay-90); --amplify-components-button-outlined-overlay-focus-background-color: var(--amplify-colors-overlay-5); --amplify-components-button-outlined-overlay-focus-color: var(--amplify-colors-neutral-90); --amplify-components-button-outlined-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow); --amplify-components-button-outlined-overlay-active-border-color: var(--amplify-colors-overlay-90); --amplify-components-button-outlined-overlay-active-background-color: var(--amplify-colors-overlay-10); --amplify-components-button-outlined-overlay-active-color: var(--amplify-colors-neutral-100); --amplify-components-button-primary-border-color: transparent; --amplify-components-button-primary-border-width: var(--amplify-border-widths-small); --amplify-components-button-primary-border-style: solid; --amplify-components-button-primary-background-color: var(--amplify-colors-primary-80); --amplify-components-button-primary-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-disabled-border-color: transparent; --amplify-components-button-primary-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-button-primary-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-primary-loading-border-color: transparent; --amplify-components-button-primary-loading-background-color: var(--amplify-colors-background-disabled); --amplify-components-button-primary-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-primary-hover-border-color: transparent; --amplify-components-button-primary-hover-background-color: var(--amplify-colors-primary-90); --amplify-components-button-primary-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-focus-border-color: transparent; --amplify-components-button-primary-focus-background-color: var(--amplify-colors-primary-90); --amplify-components-button-primary-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-button-primary-active-border-color: transparent; --amplify-components-button-primary-active-background-color: var(--amplify-colors-primary-100); --amplify-components-button-primary-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-info-border-color: transparent; --amplify-components-button-primary-info-background-color: var(--amplify-colors-blue-80); --amplify-components-button-primary-info-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-info-hover-border-color: transparent; --amplify-components-button-primary-info-hover-background-color: var(--amplify-colors-blue-90); --amplify-components-button-primary-info-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-info-focus-border-color: transparent; --amplify-components-button-primary-info-focus-background-color: var(--amplify-colors-blue-90); --amplify-components-button-primary-info-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow); --amplify-components-button-primary-info-active-border-color: transparent; --amplify-components-button-primary-info-active-background-color: var(--amplify-colors-blue-100); --amplify-components-button-primary-info-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-warning-border-color: transparent; --amplify-components-button-primary-warning-background-color: var(--amplify-colors-orange-80); --amplify-components-button-primary-warning-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-warning-hover-border-color: transparent; --amplify-components-button-primary-warning-hover-background-color: var(--amplify-colors-orange-90); --amplify-components-button-primary-warning-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-warning-focus-border-color: transparent; --amplify-components-button-primary-warning-focus-background-color: var(--amplify-colors-orange-90); --amplify-components-button-primary-warning-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow); --amplify-components-button-primary-warning-active-border-color: transparent; --amplify-components-button-primary-warning-active-background-color: var(--amplify-colors-orange-100); --amplify-components-button-primary-warning-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-error-border-color: transparent; --amplify-components-button-primary-error-background-color: var(--amplify-colors-red-80); --amplify-components-button-primary-error-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-error-hover-border-color: transparent; --amplify-components-button-primary-error-hover-background-color: var(--amplify-colors-red-90); --amplify-components-button-primary-error-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-error-focus-border-color: transparent; --amplify-components-button-primary-error-focus-background-color: var(--amplify-colors-red-90); --amplify-components-button-primary-error-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-primary-error-active-border-color: transparent; --amplify-components-button-primary-error-active-background-color: var(--amplify-colors-red-100); --amplify-components-button-primary-error-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-success-border-color: transparent; --amplify-components-button-primary-success-background-color: var(--amplify-colors-green-80); --amplify-components-button-primary-success-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-success-hover-border-color: transparent; --amplify-components-button-primary-success-hover-background-color: var(--amplify-colors-green-90); --amplify-components-button-primary-success-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-success-focus-border-color: transparent; --amplify-components-button-primary-success-focus-background-color: var(--amplify-colors-green-90); --amplify-components-button-primary-success-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow); --amplify-components-button-primary-success-active-border-color: transparent; --amplify-components-button-primary-success-active-background-color: var(--amplify-colors-green-100); --amplify-components-button-primary-success-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-overlay-border-color: transparent; --amplify-components-button-primary-overlay-background-color: var(--amplify-colors-overlay-70); --amplify-components-button-primary-overlay-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-overlay-hover-border-color: transparent; --amplify-components-button-primary-overlay-hover-background-color: var(--amplify-colors-overlay-90); --amplify-components-button-primary-overlay-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-overlay-focus-border-color: transparent; --amplify-components-button-primary-overlay-focus-background-color: var(--amplify-colors-overlay-90); --amplify-components-button-primary-overlay-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow); --amplify-components-button-primary-overlay-active-border-color: transparent; --amplify-components-button-primary-overlay-active-background-color: var(--amplify-colors-overlay-90); --amplify-components-button-primary-overlay-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-menu-border-width: var(--amplify-space-zero); --amplify-components-button-menu-background-color: transparent; --amplify-components-button-menu-justify-content: start; --amplify-components-button-menu-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-menu-hover-background-color: var(--amplify-colors-primary-80); --amplify-components-button-menu-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-menu-focus-background-color: var(--amplify-colors-primary-80); --amplify-components-button-menu-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-menu-active-background-color: var(--amplify-colors-primary-90); --amplify-components-button-menu-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-link-background-color: transparent; --amplify-components-button-link-border-color: transparent; --amplify-components-button-link-border-width: var(--amplify-border-widths-small); --amplify-components-button-link-color: var(--amplify-colors-font-interactive); --amplify-components-button-link-hover-border-color: transparent; --amplify-components-button-link-hover-background-color: var(--amplify-colors-primary-10); --amplify-components-button-link-hover-color: var(--amplify-colors-font-hover); --amplify-components-button-link-focus-border-color: transparent; --amplify-components-button-link-focus-background-color: var(--amplify-colors-primary-10); --amplify-components-button-link-focus-color: var(--amplify-colors-font-focus); --amplify-components-button-link-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-button-link-active-border-color: transparent; --amplify-components-button-link-active-background-color: var(--amplify-colors-primary-20); --amplify-components-button-link-active-color: var(--amplify-colors-font-active); --amplify-components-button-link-disabled-border-color: transparent; --amplify-components-button-link-disabled-background-color: transparent; --amplify-components-button-link-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-link-loading-border-color: transparent; --amplify-components-button-link-loading-background-color: transparent; --amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-link-info-border-color: transparent; --amplify-components-button-link-info-background-color: transparent; --amplify-components-button-link-info-color: var(--amplify-colors-blue-100); --amplify-components-button-link-info-hover-border-color: transparent; --amplify-components-button-link-info-hover-background-color: var(--amplify-colors-blue-10); --amplify-components-button-link-info-hover-color: var(--amplify-colors-blue-90); --amplify-components-button-link-info-focus-border-color: transparent; --amplify-components-button-link-info-focus-background-color: var(--amplify-colors-blue-10); --amplify-components-button-link-info-focus-color: var(--amplify-colors-blue-100); --amplify-components-button-link-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow); --amplify-components-button-link-info-active-border-color: transparent; --amplify-components-button-link-info-active-background-color: var(--amplify-colors-blue-20); --amplify-components-button-link-info-active-color: var(--amplify-colors-blue-100); --amplify-components-button-link-warning-border-color: transparent; --amplify-components-button-link-warning-background-color: transparent; --amplify-components-button-link-warning-color: var(--amplify-colors-orange-100); --amplify-components-button-link-warning-hover-border-color: transparent; --amplify-components-button-link-warning-hover-background-color: var(--amplify-colors-orange-10); --amplify-components-button-link-warning-hover-color: var(--amplify-colors-orange-90); --amplify-components-button-link-warning-focus-border-color: transparent; --amplify-components-button-link-warning-focus-background-color: var(--amplify-colors-orange-10); --amplify-components-button-link-warning-focus-color: var(--amplify-colors-orange-100); --amplify-components-button-link-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow); --amplify-components-button-link-warning-active-border-color: transparent; --amplify-components-button-link-warning-active-background-color: var(--amplify-colors-orange-20); --amplify-components-button-link-warning-active-color: var(--amplify-colors-orange-100); --amplify-components-button-link-success-border-color: transparent; --amplify-components-button-link-success-background-color: transparent; --amplify-components-button-link-success-color: var(--amplify-colors-green-100); --amplify-components-button-link-success-hover-border-color: transparent; --amplify-components-button-link-success-hover-background-color: var(--amplify-colors-green-10); --amplify-components-button-link-success-hover-color: var(--amplify-colors-green-90); --amplify-components-button-link-success-focus-border-color: transparent; --amplify-components-button-link-success-focus-background-color: var(--amplify-colors-green-10); --amplify-components-button-link-success-focus-color: var(--amplify-colors-green-100); --amplify-components-button-link-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow); --amplify-components-button-link-success-active-border-color: transparent; --amplify-components-button-link-success-active-background-color: var(--amplify-colors-green-20); --amplify-components-button-link-success-active-color: var(--amplify-colors-green-100); --amplify-components-button-link-error-border-color: transparent; --amplify-components-button-link-error-background-color: transparent; --amplify-components-button-link-error-color: var(--amplify-colors-red-100); --amplify-components-button-link-error-hover-border-color: transparent; --amplify-components-button-link-error-hover-background-color: var(--amplify-colors-red-10); --amplify-components-button-link-error-hover-color: var(--amplify-colors-red-90); --amplify-components-button-link-error-focus-border-color: transparent; --amplify-components-button-link-error-focus-background-color: var(--amplify-colors-red-10); --amplify-components-button-link-error-focus-color: var(--amplify-colors-red-100); --amplify-components-button-link-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-link-error-active-border-color: transparent; --amplify-components-button-link-error-active-background-color: var(--amplify-colors-red-20); --amplify-components-button-link-error-active-color: var(--amplify-colors-red-100); --amplify-components-button-link-overlay-border-color: transparent; --amplify-components-button-link-overlay-background-color: transparent; --amplify-components-button-link-overlay-color: var(--amplify-colors-neutral-100); --amplify-components-button-link-overlay-hover-border-color: transparent; --amplify-components-button-link-overlay-hover-background-color: var(--amplify-colors-overlay-5); --amplify-components-button-link-overlay-hover-color: var(--amplify-colors-overlay-80); --amplify-components-button-link-overlay-focus-border-color: transparent; --amplify-components-button-link-overlay-focus-background-color: var(--amplify-colors-overlay-5); --amplify-components-button-link-overlay-focus-color: var(--amplify-colors-overlay-90); --amplify-components-button-link-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow); --amplify-components-button-link-overlay-active-border-color: transparent; --amplify-components-button-link-overlay-active-background-color: var(--amplify-colors-overlay-10); --amplify-components-button-link-overlay-active-color: var(--amplify-colors-overlay-90); --amplify-components-button-warning-background-color: transparent; --amplify-components-button-warning-border-color: var(--amplify-colors-red-60); --amplify-components-button-warning-border-width: var(--amplify-border-widths-small); --amplify-components-button-warning-color: var(--amplify-colors-red-60); --amplify-components-button-warning-hover-border-color: var(--amplify-colors-red-80); --amplify-components-button-warning-hover-background-color: var(--amplify-colors-red-10); --amplify-components-button-warning-hover-color: var(--amplify-colors-font-error); --amplify-components-button-warning-focus-border-color: var(--amplify-colors-red-80); --amplify-components-button-warning-focus-background-color: var(--amplify-colors-red-10); --amplify-components-button-warning-focus-color: var(--amplify-colors-red-80); --amplify-components-button-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-warning-active-border-color: var(--amplify-colors-red-100); --amplify-components-button-warning-active-background-color: var(--amplify-colors-red-20); --amplify-components-button-warning-active-color: var(--amplify-colors-red-100); --amplify-components-button-warning-disabled-border-color: var(--amplify-colors-border-tertiary); --amplify-components-button-warning-disabled-background-color: transparent; --amplify-components-button-warning-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-warning-loading-border-color: var(--amplify-colors-border-tertiary); --amplify-components-button-warning-loading-background-color: transparent; --amplify-components-button-warning-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-destructive-border-color: transparent; --amplify-components-button-destructive-border-width: var(--amplify-border-widths-small); --amplify-components-button-destructive-border-style: solid; --amplify-components-button-destructive-background-color: var(--amplify-colors-red-60); --amplify-components-button-destructive-color: var(--amplify-colors-font-inverse); --amplify-components-button-destructive-disabled-border-color: transparent; --amplify-components-button-destructive-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-button-destructive-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-destructive-loading-border-color: transparent; --amplify-components-button-destructive-loading-background-color: var(--amplify-colors-background-disabled); --amplify-components-button-destructive-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-destructive-hover-border-color: transparent; --amplify-components-button-destructive-hover-background-color: var(--amplify-colors-red-80); --amplify-components-button-destructive-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-destructive-focus-border-color: transparent; --amplify-components-button-destructive-focus-background-color: var(--amplify-colors-red-80); --amplify-components-button-destructive-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-destructive-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-destructive-active-border-color: transparent; --amplify-components-button-destructive-active-background-color: var(--amplify-colors-red-100); --amplify-components-button-destructive-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-small-font-size: var(--amplify-components-fieldcontrol-small-font-size); --amplify-components-button-small-padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start); --amplify-components-button-small-padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end); --amplify-components-button-small-padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start); --amplify-components-button-small-padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end); --amplify-components-button-large-font-size: var(--amplify-components-fieldcontrol-large-font-size); --amplify-components-button-large-padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start); --amplify-components-button-large-padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end); --amplify-components-button-large-padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start); --amplify-components-button-large-padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end); --amplify-components-button-loader-wrapper-align-items: center; --amplify-components-button-loader-wrapper-gap: var(--amplify-space-xs); --amplify-components-card-background-color: var(--amplify-colors-background-primary); --amplify-components-card-border-radius: var(--amplify-radii-xs); --amplify-components-card-border-width: 0; --amplify-components-card-border-style: solid; --amplify-components-card-border-color: transparent; --amplify-components-card-box-shadow: none; --amplify-components-card-padding: var(--amplify-space-medium); --amplify-components-card-outlined-background-color: var(--amplify-components-card-background-color); --amplify-components-card-outlined-border-radius: var(--amplify-radii-xs); --amplify-components-card-outlined-border-width: var(--amplify-border-widths-small); --amplify-components-card-outlined-border-style: solid; --amplify-components-card-outlined-border-color: var(--amplify-colors-border-primary); --amplify-components-card-outlined-box-shadow: var(--amplify-components-card-box-shadow); --amplify-components-card-elevated-background-color: var(--amplify-components-card-background-color); --amplify-components-card-elevated-border-radius: var(--amplify-radii-xs); --amplify-components-card-elevated-border-width: 0; --amplify-components-card-elevated-border-style: solid; --amplify-components-card-elevated-border-color: transparent; --amplify-components-card-elevated-box-shadow: var(--amplify-shadows-medium); --amplify-components-checkbox-cursor: pointer; --amplify-components-checkbox-align-items: center; --amplify-components-checkbox-disabled-cursor: not-allowed; --amplify-components-checkbox-button-position: relative; --amplify-components-checkbox-button-align-items: center; --amplify-components-checkbox-button-justify-content: center; --amplify-components-checkbox-button-color: var(--amplify-colors-font-inverse); --amplify-components-checkbox-button-before-width: 100%; --amplify-components-checkbox-button-before-height: 100%; --amplify-components-checkbox-button-before-border-width: var(--amplify-border-widths-medium); --amplify-components-checkbox-button-before-border-radius: 20%; --amplify-components-checkbox-button-before-border-style: solid; --amplify-components-checkbox-button-before-border-color: var(--amplify-colors-border-primary); --amplify-components-checkbox-button-focus-outline-color: var(--amplify-colors-transparent); --amplify-components-checkbox-button-focus-outline-style: solid; --amplify-components-checkbox-button-focus-outline-width: var(--amplify-outline-widths-medium); --amplify-components-checkbox-button-focus-outline-offset: var(--amplify-outline-offsets-medium); --amplify-components-checkbox-button-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-checkbox-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-checkbox-button-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-checkbox-button-error-border-color: var(--amplify-colors-border-error); --amplify-components-checkbox-button-error-focus-border-color: var(--amplify-colors-border-error); --amplify-components-checkbox-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-checkbox-icon-background-color: var(--amplify-colors-primary-80); --amplify-components-checkbox-icon-border-radius: 20%; --amplify-components-checkbox-icon-opacity: var(--amplify-opacities-0); --amplify-components-checkbox-icon-transform: scale(0); --amplify-components-checkbox-icon-transition-property: all; --amplify-components-checkbox-icon-transition-duration: var(--amplify-time-short); --amplify-components-checkbox-icon-transition-timing-function: ease-in-out; --amplify-components-checkbox-icon-checked-opacity: var(--amplify-opacities-100); --amplify-components-checkbox-icon-checked-transform: scale(1); --amplify-components-checkbox-icon-checked-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-checkbox-icon-indeterminate-opacity: var(--amplify-opacities-100); --amplify-components-checkbox-icon-indeterminate-transform: scale(1); --amplify-components-checkbox-icon-indeterminate-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-checkbox-label-color: var(--amplify-components-text-color); --amplify-components-checkbox-label-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-checkboxfield-align-items: flex-start; --amplify-components-checkboxfield-align-content: center; --amplify-components-checkboxfield-flex-direction: column; --amplify-components-checkboxfield-justify-content: center; --amplify-components-collection-pagination-current-color: var(--amplify-components-pagination-current-color); --amplify-components-collection-pagination-current-background-color: var(--amplify-components-pagination-current-background-color); --amplify-components-collection-pagination-button-color: var(--amplify-components-pagination-button-color); --amplify-components-collection-pagination-button-hover-background-color: var(--amplify-components-pagination-button-hover-background-color); --amplify-components-collection-pagination-button-hover-color: var(--amplify-components-pagination-button-hover-color); --amplify-components-collection-pagination-button-disabled-color: var(--amplify-components-pagination-button-disabled-color); --amplify-components-collection-search-input-color: var(--amplify-components-searchfield-color); --amplify-components-collection-search-button-color: var(--amplify-components-searchfield-button-color); --amplify-components-collection-search-button-active-background-color: var(--amplify-components-searchfield-button-active-background-color); --amplify-components-collection-search-button-active-border-color: var(--amplify-components-searchfield-button-active-border-color); --amplify-components-collection-search-button-active-color: var(--amplify-components-searchfield-button-active-color); --amplify-components-collection-search-button-disabled-background-color: var(--amplify-components-searchfield-button-disabled-background-color); --amplify-components-collection-search-button-disabled-border-color: var(--amplify-components-searchfield-button-disabled-border-color); --amplify-components-collection-search-button-disabled-color: var(--amplify-components-searchfield-button-disabled-color); --amplify-components-collection-search-button-focus-background-color: var(--amplify-components-searchfield-button-focus-background-color); --amplify-components-collection-search-button-focus-border-color: var(--amplify-components-searchfield-button-focus-border-color); --amplify-components-collection-search-button-focus-color: var(--amplify-components-searchfield-button-focus-color); --amplify-components-collection-search-button-hover-background-color: var(--amplify-components-searchfield-button-hover-background-color); --amplify-components-collection-search-button-hover-border-color: var(--amplify-components-searchfield-button-hover-border-color); --amplify-components-collection-search-button-hover-color: var(--amplify-components-searchfield-button-hover-color); --amplify-components-copy-font-size: var(--amplify-font-sizes-xs); --amplify-components-copy-gap: var(--amplify-space-relative-medium); --amplify-components-copy-svg-path-fill: var(--amplify-colors-font-primary); --amplify-components-copy-tool-tip-bottom: var(--amplify-space-large); --amplify-components-copy-tool-tip-color: var(--amplify-colors-teal-100); --amplify-components-copy-tool-tip-font-size: var(--amplify-font-sizes-xxs); --amplify-components-countrycodeselect-height: var(--amplify-space-relative-full); --amplify-components-divider-border-style: solid; --amplify-components-divider-border-color: var(--amplify-colors-border-primary); --amplify-components-divider-border-width: var(--amplify-border-widths-medium); --amplify-components-divider-label-color: var(--amplify-colors-font-tertiary); --amplify-components-divider-label-padding-inline: var(--amplify-space-medium); --amplify-components-divider-label-font-size: var(--amplify-font-sizes-small); --amplify-components-divider-label-background-color: var(--amplify-colors-background-primary); --amplify-components-divider-small-border-width: var(--amplify-border-widths-small); --amplify-components-divider-large-border-width: var(--amplify-border-widths-large); --amplify-components-divider-opacity: var(--amplify-opacities-60); --amplify-components-dropzone-background-color: var(--amplify-colors-background-primary); --amplify-components-dropzone-border-radius: var(--amplify-radii-small); --amplify-components-dropzone-border-color: var(--amplify-colors-border-primary); --amplify-components-dropzone-border-style: dashed; --amplify-components-dropzone-border-width: var(--amplify-border-widths-small); --amplify-components-dropzone-color: var(--amplify-colors-font-primary); --amplify-components-dropzone-gap: var(--amplify-space-small); --amplify-components-dropzone-padding-block: var(--amplify-space-xl); --amplify-components-dropzone-padding-inline: var(--amplify-space-large); --amplify-components-dropzone-text-align: center; --amplify-components-dropzone-active-background-color: var(--amplify-colors-primary-10); --amplify-components-dropzone-active-border-radius: var(--amplify-components-dropzone-border-radius); --amplify-components-dropzone-active-border-color: var(--amplify-colors-border-pressed); --amplify-components-dropzone-active-border-style: var(--amplify-components-dropzone-border-style); --amplify-components-dropzone-active-border-width: var(--amplify-components-dropzone-border-width); --amplify-components-dropzone-active-color: var(--amplify-colors-font-primary); --amplify-components-dropzone-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-dropzone-disabled-border-radius: var(--amplify-components-dropzone-border-radius); --amplify-components-dropzone-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-dropzone-disabled-border-style: var(--amplify-components-dropzone-border-style); --amplify-components-dropzone-disabled-border-width: var(--amplify-components-dropzone-border-width); --amplify-components-dropzone-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-dropzone-accepted-background-color: var(--amplify-colors-background-success); --amplify-components-dropzone-accepted-border-radius: var(--amplify-components-dropzone-border-radius); --amplify-components-dropzone-accepted-border-color: var(--amplify-colors-border-success); --amplify-components-dropzone-accepted-border-style: var(--amplify-components-dropzone-border-style); --amplify-components-dropzone-accepted-border-width: var(--amplify-components-dropzone-border-width); --amplify-components-dropzone-accepted-color: var(--amplify-colors-font-success); --amplify-components-dropzone-rejected-background-color: var(--amplify-colors-background-error); --amplify-components-dropzone-rejected-border-radius: var(--amplify-components-dropzone-border-radius); --amplify-components-dropzone-rejected-border-color: var(--amplify-colors-border-pressed); --amplify-components-dropzone-rejected-border-style: var(--amplify-components-dropzone-border-style); --amplify-components-dropzone-rejected-border-width: var(--amplify-components-dropzone-border-width); --amplify-components-dropzone-rejected-color: var(--amplify-colors-font-error); --amplify-components-field-gap: var(--amplify-space-xs); --amplify-components-field-font-size: var(--amplify-font-sizes-medium); --amplify-components-field-flex-direction: column; --amplify-components-field-small-gap: var(--amplify-space-xxxs); --amplify-components-field-small-font-size: var(--amplify-font-sizes-small); --amplify-components-field-large-gap: var(--amplify-space-small); --amplify-components-field-large-font-size: var(--amplify-font-sizes-large); --amplify-components-field-label-color: var(--amplify-colors-font-secondary); --amplify-components-fieldcontrol-border-style: solid; --amplify-components-fieldcontrol-border-color: var(--amplify-colors-border-primary); --amplify-components-fieldcontrol-border-width: var(--amplify-border-widths-small); --amplify-components-fieldcontrol-border-radius: var(--amplify-radii-small); --amplify-components-fieldcontrol-color: var(--amplify-colors-font-primary); --amplify-components-fieldcontrol-padding-block-start: var(--amplify-space-xs); --amplify-components-fieldcontrol-padding-block-end: var(--amplify-space-xs); --amplify-components-fieldcontrol-padding-inline-start: var(--amplify-space-medium); --amplify-components-fieldcontrol-padding-inline-end: var(--amplify-space-medium); --amplify-components-fieldcontrol-font-size: var(--amplify-components-field-font-size); --amplify-components-fieldcontrol-line-height: var(--amplify-line-heights-medium); --amplify-components-fieldcontrol-transition-duration: var(--amplify-time-medium); --amplify-components-fieldcontrol-outline-color: var(--amplify-colors-transparent); --amplify-components-fieldcontrol-outline-style: solid; --amplify-components-fieldcontrol-outline-width: var(--amplify-outline-widths-medium); --amplify-components-fieldcontrol-outline-offset: var(--amplify-outline-offsets-medium); --amplify-components-fieldcontrol-small-font-size: var(--amplify-components-field-small-font-size); --amplify-components-fieldcontrol-small-padding-block-start: var(--amplify-space-xxs); --amplify-components-fieldcontrol-small-padding-block-end: var(--amplify-space-xxs); --amplify-components-fieldcontrol-small-padding-inline-start: var(--amplify-space-small); --amplify-components-fieldcontrol-small-padding-inline-end: var(--amplify-space-small); --amplify-components-fieldcontrol-large-font-size: var(--amplify-components-field-large-font-size); --amplify-components-fieldcontrol-large-padding-block-start: var(--amplify-space-xs); --amplify-components-fieldcontrol-large-padding-block-end: var(--amplify-space-xs); --amplify-components-fieldcontrol-large-padding-inline-start: var(--amplify-space-medium); --amplify-components-fieldcontrol-large-padding-inline-end: var(--amplify-space-medium); --amplify-components-fieldcontrol-quiet-border-style: none; --amplify-components-fieldcontrol-quiet-border-inline-start: none; --amplify-components-fieldcontrol-quiet-border-inline-end: none; --amplify-components-fieldcontrol-quiet-border-block-start: none; --amplify-components-fieldcontrol-quiet-border-radius: 0; --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: transparent; --amplify-components-fieldcontrol-quiet-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-fieldcontrol-quiet-error-border-block-end-color: var(--amplify-colors-border-error); --amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color: transparent; --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-fieldcontrol-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus); --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-fieldcontrol-disabled-cursor: not-allowed; --amplify-components-fieldcontrol-disabled-border-color: var(--amplify-colors-transparent); --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error); --amplify-components-fieldcontrol-error-color: var(--amplify-colors-font-error); --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error); --amplify-components-fieldcontrol-info-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-blue-100); --amplify-components-fieldcontrol-warning-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-orange-100); --amplify-components-fieldcontrol-success-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-green-100); --amplify-components-fieldcontrol-overlay-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-overlay-90); --amplify-components-fieldgroup-gap: var(--amplify-space-zero); --amplify-components-fieldgroup-vertical-align-items: center; --amplify-components-fieldgroup-outer-align-items: center; --amplify-components-fieldmessages-error-color: var(--amplify-colors-font-error); --amplify-components-fieldmessages-error-font-size: var(--amplify-font-sizes-small); --amplify-components-fieldmessages-description-color: var(--amplify-colors-font-secondary); --amplify-components-fieldmessages-description-font-style: italic; --amplify-components-fieldmessages-description-font-size: var(--amplify-font-sizes-small); --amplify-components-fieldset-background-color: transparent; --amplify-components-fieldset-border-radius: var(--amplify-radii-xs); --amplify-components-fieldset-flex-direction: column; --amplify-components-fieldset-gap: var(--amplify-components-field-gap); --amplify-components-fieldset-legend-color: var(--amplify-colors-font-primary); --amplify-components-fieldset-legend-font-size: var(--amplify-components-field-font-size); --amplify-components-fieldset-legend-font-weight: var(--amplify-font-weights-bold); --amplify-components-fieldset-legend-line-height: var(--amplify-line-heights-medium); --amplify-components-fieldset-legend-small-font-size: var(--amplify-components-field-small-font-size); --amplify-components-fieldset-legend-large-font-size: var(--amplify-components-field-large-font-size); --amplify-components-fieldset-outlined-padding: var(--amplify-space-medium); --amplify-components-fieldset-outlined-border-color: var(--amplify-colors-neutral-40); --amplify-components-fieldset-outlined-border-width: var(--amplify-border-widths-small); --amplify-components-fieldset-outlined-border-style: solid; --amplify-components-fieldset-outlined-small-padding: var(--amplify-space-small); --amplify-components-fieldset-outlined-large-padding: var(--amplify-space-large); --amplify-components-fieldset-small-gap: var(--amplify-components-field-small-gap); --amplify-components-fieldset-large-gap: var(--amplify-components-field-large-gap); --amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary); --amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small); --amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary); --amplify-components-fileuploader-dropzone-border-style: dashed; --amplify-components-fileuploader-dropzone-border-width: var(--amplify-border-widths-small); --amplify-components-fileuploader-dropzone-gap: var(--amplify-space-small); --amplify-components-fileuploader-dropzone-padding-block: var(--amplify-space-xl); --amplify-components-fileuploader-dropzone-padding-inline: var(--amplify-space-large); --amplify-components-fileuploader-dropzone-text-align: center; --amplify-components-fileuploader-dropzone-active-background-color: var(--amplify-colors-primary-10); --amplify-components-fileuploader-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius); --amplify-components-fileuploader-dropzone-active-border-color: var(--amplify-colors-border-pressed); --amplify-components-fileuploader-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style); --amplify-components-fileuploader-dropzone-active-border-width: var(--amplify-border-widths-medium); --amplify-components-fileuploader-dropzone-icon-color: var(--amplify-colors-border-primary); --amplify-components-fileuploader-dropzone-icon-font-size: var(--amplify-font-sizes-xxl); --amplify-components-fileuploader-dropzone-text-color: var(--amplify-colors-font-tertiary); --amplify-components-fileuploader-dropzone-text-font-size: var(--amplify-font-sizes-medium); --amplify-components-fileuploader-dropzone-text-font-weight: var(--amplify-font-weights-bold); --amplify-components-fileuploader-file-background-color: var(--amplify-colors-background-primary); --amplify-components-fileuploader-file-border-radius: var(--amplify-radii-small); --amplify-components-fileuploader-file-border-color: var(--amplify-colors-border-primary); --amplify-components-fileuploader-file-border-style: solid; --amplify-components-fileuploader-file-border-width: var(--amplify-border-widths-small); --amplify-components-fileuploader-file-padding-block: var(--amplify-space-xs); --amplify-components-fileuploader-file-padding-inline: var(--amplify-space-small); --amplify-components-fileuploader-file-gap: var(--amplify-space-small); --amplify-components-fileuploader-file-align-items: baseline; --amplify-components-fileuploader-file-name-font-size: var(--amplify-font-sizes-medium); --amplify-components-fileuploader-file-name-font-weight: var(--amplify-font-weights-bold); --amplify-components-fileuploader-file-name-color: var(--amplify-colors-font-primary); --amplify-components-fileuploader-file-size-font-size: var(--amplify-font-sizes-small); --amplify-components-fileuploader-file-size-font-weight: var(--amplify-font-weights-normal); --amplify-components-fileuploader-file-size-color: var(--amplify-colors-font-tertiary); --amplify-components-fileuploader-file-image-width: var(--amplify-space-xxl); --amplify-components-fileuploader-file-image-height: var(--amplify-space-xxl); --amplify-components-fileuploader-file-image-background-color: var(--amplify-colors-background-secondary); --amplify-components-fileuploader-file-image-color: var(--amplify-colors-font-tertiary); --amplify-components-fileuploader-file-image-border-radius: var(--amplify-radii-small); --amplify-components-fileuploader-filelist-flex-direction: column; --amplify-components-fileuploader-filelist-gap: var(--amplify-space-small); --amplify-components-fileuploader-loader-stroke-linecap: round; --amplify-components-fileuploader-loader-stroke-empty: var(--amplify-colors-border-secondary); --amplify-components-fileuploader-loader-stroke-filled: var(--amplify-components-loader-stroke-filled); --amplify-components-fileuploader-loader-stroke-width: var(--amplify-border-widths-large); --amplify-components-fileuploader-previewer-background-color: var(--amplify-colors-background-primary); --amplify-components-fileuploader-previewer-border-color: var(--amplify-colors-border-primary); --amplify-components-fileuploader-previewer-border-style: solid; --amplify-components-fileuploader-previewer-border-width: var(--amplify-border-widths-small); --amplify-components-fileuploader-previewer-border-radius: var(--amplify-radii-small); --amplify-components-fileuploader-previewer-padding-block: var(--amplify-space-zero); --amplify-components-fileuploader-previewer-padding-inline: var(--amplify-space-zero); --amplify-components-fileuploader-previewer-max-height: 40rem; --amplify-components-fileuploader-previewer-max-width: auto; --amplify-components-fileuploader-previewer-text-font-size: var(--amplify-font-sizes-medium); --amplify-components-fileuploader-previewer-text-font-weight: var(--amplify-font-weights-bold); --amplify-components-fileuploader-previewer-text-color: var(--amplify-colors-font-primary); --amplify-components-fileuploader-previewer-body-padding-block: var(--amplify-space-medium); --amplify-components-fileuploader-previewer-body-padding-inline: var(--amplify-space-medium); --amplify-components-fileuploader-previewer-body-gap: var(--amplify-space-small); --amplify-components-fileuploader-previewer-footer-justify-content: flex-end; --amplify-components-flex-gap: var(--amplify-space-medium); --amplify-components-flex-justify-content: normal; --amplify-components-flex-align-items: stretch; --amplify-components-flex-align-content: normal; --amplify-components-flex-flex-wrap: nowrap; --amplify-components-heading-1-font-size: var(--amplify-font-sizes-xxxxl); --amplify-components-heading-1-font-weight: var(--amplify-font-weights-light); --amplify-components-heading-2-font-size: var(--amplify-font-sizes-xxxl); --amplify-components-heading-2-font-weight: var(--amplify-font-weights-normal); --amplify-components-heading-3-font-size: var(--amplify-font-sizes-xxl); --amplify-components-heading-3-font-weight: var(--amplify-font-weights-medium); --amplify-components-heading-4-font-size: var(--amplify-font-sizes-xl); --amplify-components-heading-4-font-weight: var(--amplify-font-weights-semibold); --amplify-components-heading-5-font-size: var(--amplify-font-sizes-large); --amplify-components-heading-5-font-weight: var(--amplify-font-weights-bold); --amplify-components-heading-6-font-size: var(--amplify-font-sizes-medium); --amplify-components-heading-6-font-weight: var(--amplify-font-weights-extrabold); --amplify-components-heading-color: var(--amplify-colors-font-primary); --amplify-components-heading-line-height: var(--amplify-line-heights-small); --amplify-components-icon-line-height: 1; --amplify-components-icon-height: 1em; --amplify-components-highlightmatch-highlighted-font-weight: var(--amplify-font-weights-bold); --amplify-components-image-max-width: 100%; --amplify-components-image-height: auto; --amplify-components-image-object-fit: initial; --amplify-components-image-object-position: initial; --amplify-components-inappmessaging-banner-height: 150px ; --amplify-components-inappmessaging-banner-width: 400px ; --amplify-components-inappmessaging-button-background-color: #e8e8e8; --amplify-components-inappmessaging-button-border-radius: 5px; --amplify-components-inappmessaging-button-color: black; --amplify-components-inappmessaging-dialog-height: 50vh; --amplify-components-inappmessaging-dialog-min-height: 400px; --amplify-components-inappmessaging-dialog-min-width: 400px; --amplify-components-inappmessaging-dialog-width: 30vw; --amplify-components-inappmessaging-header-font-size: var(--amplify-font-sizes-medium); --amplify-components-inappmessaging-header-font-weight: var(--amplify-font-weights-extrabold); --amplify-components-input-color: var(--amplify-components-fieldcontrol-color); --amplify-components-input-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-input-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-input-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-link-active-color: var(--amplify-colors-font-active); --amplify-components-link-color: var(--amplify-colors-font-interactive); --amplify-components-link-focus-color: var(--amplify-colors-font-focus); --amplify-components-link-hover-color: var(--amplify-colors-font-hover); --amplify-components-link-visited-color: var(--amplify-colors-font-interactive); --amplify-components-liveness-camera-module-background-color: var(--amplify-colors-background-primary); --amplify-components-loader-width: var(--amplify-font-sizes-medium); --amplify-components-loader-height: var(--amplify-font-sizes-medium); --amplify-components-loader-font-size: var(--amplify-font-sizes-xs); --amplify-components-loader-stroke-empty: var(--amplify-colors-neutral-20); --amplify-components-loader-stroke-filled: var(--amplify-colors-primary-80); --amplify-components-loader-stroke-linecap: round; --amplify-components-loader-animation-duration: 1s; --amplify-components-loader-small-width: var(--amplify-font-sizes-small); --amplify-components-loader-small-height: var(--amplify-font-sizes-small); --amplify-components-loader-small-font-size: var(--amplify-font-sizes-xxs); --amplify-components-loader-large-width: var(--amplify-font-sizes-large); --amplify-components-loader-large-height: var(--amplify-font-sizes-large); --amplify-components-loader-large-font-size: var(--amplify-font-sizes-small); --amplify-components-loader-linear-width: 100%; --amplify-components-loader-linear-min-width: 5rem; --amplify-components-loader-linear-font-size: var(--amplify-font-sizes-xxs); --amplify-components-loader-linear-stroke-width: var(--amplify-font-sizes-xxs); --amplify-components-loader-linear-stroke-filled: var(--amplify-colors-primary-80); --amplify-components-loader-linear-stroke-empty: var(--amplify-colors-neutral-20); --amplify-components-loader-linear-stroke-linecap: round; --amplify-components-loader-linear-animation-duration: 1s; --amplify-components-loader-linear-small-stroke-width: var(--amplify-font-sizes-xxxs); --amplify-components-loader-linear-small-font-size: var(--amplify-font-sizes-xxxs); --amplify-components-loader-linear-large-stroke-width: var(--amplify-font-sizes-xs); --amplify-components-loader-linear-large-font-size: var(--amplify-font-sizes-xs); --amplify-components-loader-text-fill: var(--amplify-colors-font-primary); --amplify-components-menu-background-color: var(--amplify-colors-background-primary); --amplify-components-menu-border-radius: var(--amplify-radii-medium); --amplify-components-menu-border-width: var(--amplify-border-widths-small); --amplify-components-menu-border-style: solid; --amplify-components-menu-border-color: var(--amplify-colors-border-primary); --amplify-components-menu-box-shadow: var(--amplify-shadows-large); --amplify-components-menu-flex-direction: column; --amplify-components-menu-gap: var(--amplify-space-zero); --amplify-components-menu-max-width: 30rem; --amplify-components-menu-min-width: 14rem; --amplify-components-menu-small-width: var(--amplify-font-sizes-medium); --amplify-components-menu-small-height: var(--amplify-font-sizes-medium); --amplify-components-menu-large-width: var(--amplify-font-sizes-xxxl); --amplify-components-menu-large-height: var(--amplify-font-sizes-xxxl); --amplify-components-menu-item-min-height: 2.5rem; --amplify-components-menu-item-padding-inline-start: var(--amplify-space-medium); --amplify-components-menu-item-padding-inline-end: var(--amplify-space-medium); --amplify-components-message-align-items: center; --amplify-components-message-background-color: var(--amplify-colors-background-tertiary); --amplify-components-message-border-color: transparent; --amplify-components-message-border-style: solid; --amplify-components-message-border-width: var(--amplify-border-widths-small); --amplify-components-message-border-radius: var(--amplify-radii-xs); --amplify-components-message-color: var(--amplify-colors-font-primary); --amplify-components-message-justify-content: flex-start; --amplify-components-message-padding-block: var(--amplify-space-small); --amplify-components-message-padding-inline: var(--amplify-space-medium); --amplify-components-message-line-height: var(--amplify-line-heights-small); --amplify-components-message-icon-size: var(--amplify-font-sizes-xl); --amplify-components-message-heading-font-size: var(--amplify-font-sizes-medium); --amplify-components-message-heading-font-weight: var(--amplify-font-weights-bold); --amplify-components-message-dismiss-gap: var(--amplify-space-xxs); --amplify-components-message-plain-color: var(--amplify-colors-font-primary); --amplify-components-message-plain-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-border-color: transparent; --amplify-components-message-plain-info-color: var(--amplify-colors-font-info); --amplify-components-message-plain-info-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-info-border-color: transparent; --amplify-components-message-plain-error-color: var(--amplify-colors-font-error); --amplify-components-message-plain-error-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-error-border-color: transparent; --amplify-components-message-plain-success-color: var(--amplify-colors-font-success); --amplify-components-message-plain-success-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-success-border-color: transparent; --amplify-components-message-plain-warning-color: var(--amplify-colors-font-warning); --amplify-components-message-plain-warning-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-warning-border-color: transparent; --amplify-components-message-outlined-color: var(--amplify-colors-font-primary); --amplify-components-message-outlined-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-border-color: var(--amplify-colors-border-primary); --amplify-components-message-outlined-info-color: var(--amplify-colors-font-info); --amplify-components-message-outlined-info-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-info-border-color: var(--amplify-colors-border-info); --amplify-components-message-outlined-error-color: var(--amplify-colors-font-error); --amplify-components-message-outlined-error-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-error-border-color: var(--amplify-colors-border-error); --amplify-components-message-outlined-success-color: var(--amplify-colors-font-success); --amplify-components-message-outlined-success-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-success-border-color: var(--amplify-colors-border-success); --amplify-components-message-outlined-warning-color: var(--amplify-colors-font-warning); --amplify-components-message-outlined-warning-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-warning-border-color: var(--amplify-colors-border-warning); --amplify-components-message-filled-color: var(--amplify-colors-font-primary); --amplify-components-message-filled-background-color: var(--amplify-colors-background-secondary); --amplify-components-message-filled-border-color: transparent; --amplify-components-message-filled-info-color: var(--amplify-colors-font-info); --amplify-components-message-filled-info-background-color: var(--amplify-colors-background-info); --amplify-components-message-filled-info-border-color: transparent; --amplify-components-message-filled-error-color: var(--amplify-colors-font-error); --amplify-components-message-filled-error-background-color: var(--amplify-colors-background-error); --amplify-components-message-filled-error-border-color: transparent; --amplify-components-message-filled-success-color: var(--amplify-colors-font-success); --amplify-components-message-filled-success-background-color: var(--amplify-colors-background-success); --amplify-components-message-filled-success-border-color: transparent; --amplify-components-message-filled-warning-color: var(--amplify-colors-font-warning); --amplify-components-message-filled-warning-background-color: var(--amplify-colors-background-warning); --amplify-components-message-filled-warning-border-color: transparent; --amplify-components-pagination-current-align-items: center; --amplify-components-pagination-current-justify-content: center; --amplify-components-pagination-current-color: var(--amplify-colors-font-inverse); --amplify-components-pagination-current-font-size: var(--amplify-font-sizes-small); --amplify-components-pagination-current-background-color: var(--amplify-colors-overlay-40); --amplify-components-pagination-button-color: var(--amplify-colors-font-primary); --amplify-components-pagination-button-padding-inline-start: var(--amplify-space-xxs); --amplify-components-pagination-button-padding-inline-end: var(--amplify-space-xxs); --amplify-components-pagination-button-transition-property: background-color; --amplify-components-pagination-button-transition-duration: var(--amplify-time-medium); --amplify-components-pagination-button-hover-background-color: var(--amplify-colors-overlay-10); --amplify-components-pagination-button-hover-color: var(--amplify-colors-font-primary); --amplify-components-pagination-button-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-pagination-ellipsis-align-items: baseline; --amplify-components-pagination-ellipsis-justify-content: center; --amplify-components-pagination-ellipsis-padding-inline-start: var(--amplify-space-xs); --amplify-components-pagination-ellipsis-padding-inline-end: var(--amplify-space-xs); --amplify-components-pagination-item-container-margin-left: var(--amplify-space-xxxs); --amplify-components-pagination-item-container-margin-right: var(--amplify-space-xxxs); --amplify-components-pagination-item-shared-height: var(--amplify-font-sizes-xxl); --amplify-components-pagination-item-shared-min-width: var(--amplify-font-sizes-xxl); --amplify-components-pagination-item-shared-border-radius: var(--amplify-font-sizes-medium); --amplify-components-passwordfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-passwordfield-button-color: var(--amplify-components-button-color); --amplify-components-passwordfield-button-active-background-color: var(--amplify-components-button-active-background-color); --amplify-components-passwordfield-button-active-border-color: var(--amplify-components-button-active-border-color); --amplify-components-passwordfield-button-active-color: var(--amplify-components-button-active-color); --amplify-components-passwordfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color); --amplify-components-passwordfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color); --amplify-components-passwordfield-button-disabled-color: var(--amplify-components-button-disabled-color); --amplify-components-passwordfield-button-error-color: var(--amplify-components-button-outlined-error-color); --amplify-components-passwordfield-button-error-background-color: var(--amplify-components-button-outlined-error-background-color); --amplify-components-passwordfield-button-error-border-color: var(--amplify-components-button-outlined-error-border-color); --amplify-components-passwordfield-button-error-active-border-color: var(--amplify-components-button-outlined-error-active-border-color); --amplify-components-passwordfield-button-error-active-background-color: var(--amplify-components-button-outlined-error-active-background-color); --amplify-components-passwordfield-button-error-active-color: var(--amplify-components-button-outlined-error-active-color); --amplify-components-passwordfield-button-error-focus-border-color: var(--amplify-components-button-outlined-error-focus-border-color); --amplify-components-passwordfield-button-error-focus-background-color: var(--amplify-components-button-outlined-error-focus-background-color); --amplify-components-passwordfield-button-error-focus-color: var(--amplify-components-button-outlined-error-focus-color); --amplify-components-passwordfield-button-error-focus-box-shadow: var(--amplify-components-button-outlined-error-focus-box-shadow); --amplify-components-passwordfield-button-error-hover-border-color: var(--amplify-components-button-outlined-error-hover-border-color); --amplify-components-passwordfield-button-error-hover-background-color: var(--amplify-components-button-outlined-error-hover-background-color); --amplify-components-passwordfield-button-error-hover-color: var(--amplify-components-button-outlined-error-hover-color); --amplify-components-passwordfield-button-focus-background-color: var(--amplify-components-button-focus-background-color); --amplify-components-passwordfield-button-focus-border-color: var(--amplify-components-button-focus-border-color); --amplify-components-passwordfield-button-focus-color: var(--amplify-components-button-focus-color); --amplify-components-passwordfield-button-hover-background-color: var(--amplify-components-button-hover-background-color); --amplify-components-passwordfield-button-hover-border-color: var(--amplify-components-button-hover-border-color); --amplify-components-passwordfield-button-hover-color: var(--amplify-components-button-hover-color); --amplify-components-phonenumberfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-phonenumberfield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-phonenumberfield-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-phonenumberfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-placeholder-border-radius: var(--amplify-radii-small); --amplify-components-placeholder-transition-duration: var(--amplify-time-long); --amplify-components-placeholder-start-color: var(--amplify-colors-background-secondary); --amplify-components-placeholder-end-color: var(--amplify-colors-background-tertiary); --amplify-components-placeholder-small-height: var(--amplify-space-small); --amplify-components-placeholder-default-height: var(--amplify-space-medium); --amplify-components-placeholder-large-height: var(--amplify-space-large); --amplify-components-radio-align-items: center; --amplify-components-radio-justify-content: flex-start; --amplify-components-radio-gap: inherit; --amplify-components-radio-disabled-cursor: not-allowed; --amplify-components-radio-button-align-items: center; --amplify-components-radio-button-justify-content: center; --amplify-components-radio-button-width: var(--amplify-font-sizes-medium); --amplify-components-radio-button-height: var(--amplify-font-sizes-medium); --amplify-components-radio-button-box-sizing: border-box; --amplify-components-radio-button-border-width: var(--amplify-border-widths-medium); --amplify-components-radio-button-border-style: solid; --amplify-components-radio-button-border-radius: 50%; --amplify-components-radio-button-border-color: var(--amplify-colors-border-primary); --amplify-components-radio-button-color: var(--amplify-colors-background-primary); --amplify-components-radio-button-background-color: var(--amplify-colors-background-primary); --amplify-components-radio-button-transition-property: all; --amplify-components-radio-button-transition-duration: var(--amplify-time-medium); --amplify-components-radio-button-outline-color: var(--amplify-colors-transparent); --amplify-components-radio-button-outline-style: solid; --amplify-components-radio-button-outline-width: var(--amplify-outline-widths-medium); --amplify-components-radio-button-outline-offset: var(--amplify-outline-offsets-medium); --amplify-components-radio-button-padding: var(--amplify-border-widths-medium); --amplify-components-radio-button-small-width: var(--amplify-font-sizes-small); --amplify-components-radio-button-small-height: var(--amplify-font-sizes-small); --amplify-components-radio-button-large-width: var(--amplify-font-sizes-large); --amplify-components-radio-button-large-height: var(--amplify-font-sizes-large); --amplify-components-radio-button-checked-color: var(--amplify-colors-primary-80); --amplify-components-radio-button-checked-disabled-color: var(--amplify-colors-background-disabled); --amplify-components-radio-button-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-radio-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-radio-button-error-border-color: var(--amplify-colors-border-error); --amplify-components-radio-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-radio-button-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-radio-button-disabled-background-color: var(--amplify-colors-background-primary); --amplify-components-radio-label-color: var(--amplify-components-text-color); --amplify-components-radio-label-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-radiogroup-radio-border-width: var(--amplify-components-radio-button-border-width); --amplify-components-radiogroup-radio-border-color: var(--amplify-components-radio-button-border-color); --amplify-components-radiogroup-radio-background-color: var(--amplify-components-radio-button-background-color); --amplify-components-radiogroup-radio-checked-color: var(--amplify-components-radio-button-checked-color); --amplify-components-radiogroup-radio-label-color: var(--amplify-components-radio-label-color); --amplify-components-radiogroup-legend-color: var(--amplify-components-fieldset-legend-color); --amplify-components-radiogroup-legend-font-weight: var(--amplify-font-weights-normal); --amplify-components-rating-large-size: var(--amplify-font-sizes-xxxl); --amplify-components-rating-default-size: var(--amplify-font-sizes-xl); --amplify-components-rating-small-size: var(--amplify-font-sizes-small); --amplify-components-rating-filled-color: var(--amplify-colors-secondary-80); --amplify-components-rating-empty-color: var(--amplify-colors-background-tertiary); --amplify-components-searchfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-searchfield-button-color: var(--amplify-components-button-color); --amplify-components-searchfield-button-background-color: var(--amplify-colors-background-primary); --amplify-components-searchfield-button-active-background-color: var(--amplify-components-button-active-background-color); --amplify-components-searchfield-button-active-border-color: var(--amplify-components-button-active-border-color); --amplify-components-searchfield-button-active-color: var(--amplify-components-button-active-color); --amplify-components-searchfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color); --amplify-components-searchfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color); --amplify-components-searchfield-button-disabled-color: var(--amplify-components-button-disabled-color); --amplify-components-searchfield-button-focus-background-color: var(--amplify-components-button-focus-background-color); --amplify-components-searchfield-button-focus-border-color: var(--amplify-components-button-focus-border-color); --amplify-components-searchfield-button-focus-color: var(--amplify-components-button-focus-color); --amplify-components-searchfield-button-hover-background-color: var(--amplify-components-button-hover-background-color); --amplify-components-searchfield-button-hover-border-color: var(--amplify-components-button-hover-border-color); --amplify-components-searchfield-button-hover-color: var(--amplify-components-button-hover-color); --amplify-components-select-color: var(--amplify-components-fieldcontrol-color); --amplify-components-select-background-color: var(--amplify-colors-background-primary); --amplify-components-select-padding-inline-end: var(--amplify-space-xxl); --amplify-components-select-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-select-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-select-wrapper-flex: 1; --amplify-components-select-wrapper-display: block; --amplify-components-select-wrapper-position: relative; --amplify-components-select-wrapper-cursor: pointer; --amplify-components-select-icon-wrapper-align-items: center; --amplify-components-select-icon-wrapper-position: absolute; --amplify-components-select-icon-wrapper-top: 50%; --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium); --amplify-components-select-icon-wrapper-transform: translateY(-50%); --amplify-components-select-icon-wrapper-pointer-events: none; --amplify-components-select-icon-wrapper-small-right: var(--amplify-space-xs); --amplify-components-select-icon-wrapper-large-right: var(--amplify-space-medium); --amplify-components-select-option-background-color: transparent; --amplify-components-select-option-color: var(--amplify-colors-font-primary); --amplify-components-select-option-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-select-option-disabled-background-color: transparent; --amplify-components-select-white-space: nowrap; --amplify-components-select-min-width: 6.5rem; --amplify-components-select-small-min-width: 5.5rem; --amplify-components-select-small-padding-inline-end: var(--amplify-space-xl); --amplify-components-select-large-min-width: 7.5rem; --amplify-components-select-large-padding-inline-end: var(--amplify-space-xxl); --amplify-components-select-expanded-padding-block: var(--amplify-space-xs); --amplify-components-select-expanded-padding-inline: var(--amplify-space-small); --amplify-components-select-expanded-option-padding-block: var(--amplify-space-xs); --amplify-components-select-expanded-option-padding-inline: var(--amplify-space-small); --amplify-components-selectfield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-selectfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-selectfield-flex-direction: column; --amplify-components-selectfield-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-selectfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-selectfield-label-color: var(--amplify-components-field-label-color); --amplify-components-sliderfield-padding-block: var(--amplify-space-xs); --amplify-components-sliderfield-track-background-color: var(--amplify-colors-background-quaternary); --amplify-components-sliderfield-track-border-radius: 9999px; --amplify-components-sliderfield-track-height: 0.375rem; --amplify-components-sliderfield-track-min-width: 10rem; --amplify-components-sliderfield-range-background-color: var(--amplify-colors-primary-80); --amplify-components-sliderfield-range-border-radius: 9999px; --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-sliderfield-thumb-width: 1.25rem; --amplify-components-sliderfield-thumb-height: 1.25rem; --amplify-components-sliderfield-thumb-background-color: var(--amplify-colors-background-primary); --amplify-components-sliderfield-thumb-box-shadow: var(--amplify-shadows-small); --amplify-components-sliderfield-thumb-border-radius: 50%; --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-medium); --amplify-components-sliderfield-thumb-border-color: var(--amplify-colors-border-primary); --amplify-components-sliderfield-thumb-border-style: solid; --amplify-components-sliderfield-thumb-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-sliderfield-thumb-disabled-border-color: transparent; --amplify-components-sliderfield-thumb-disabled-box-shadow: none; --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-primary); --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus); --amplify-components-sliderfield-thumb-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-sliderfield-thumb-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-sliderfield-small-track-height: 0.25rem; --amplify-components-sliderfield-small-thumb-width: 1rem; --amplify-components-sliderfield-small-thumb-height: 1rem; --amplify-components-sliderfield-large-track-height: 0.625rem; --amplify-components-sliderfield-large-thumb-width: 1.5rem; --amplify-components-sliderfield-large-thumb-height: 1.5rem; --amplify-components-stepperfield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-stepperfield-flex-direction: column; --amplify-components-stepperfield-input-color: var(--amplify-components-fieldcontrol-color); --amplify-components-stepperfield-input-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-stepperfield-input-text-align: center; --amplify-components-stepperfield-button-color: var(--amplify-components-button-color); --amplify-components-stepperfield-button-background-color: var(--amplify-colors-transparent); --amplify-components-stepperfield-button-active-color: var(--amplify-components-button-active-color); --amplify-components-stepperfield-button-active-background-color: var(--amplify-components-button-active-background-color); --amplify-components-stepperfield-button-focus-color: var(--amplify-components-button-focus-color); --amplify-components-stepperfield-button-focus-background-color: var(--amplify-components-button-focus-background-color); --amplify-components-stepperfield-button-disabled-color: var(--amplify-components-button-disabled-color); --amplify-components-stepperfield-button-disabled-background-color: var(--amplify-components-fieldcontrol-disabled-background-color); --amplify-components-stepperfield-button-hover-color: var(--amplify-components-button-hover-color); --amplify-components-stepperfield-button-hover-background-color: var(--amplify-components-button-hover-background-color); --amplify-components-storagemanager-dropzone-background-color: var(--amplify-colors-background-primary); --amplify-components-storagemanager-dropzone-border-radius: var(--amplify-radii-small); --amplify-components-storagemanager-dropzone-border-color: var(--amplify-colors-border-primary); --amplify-components-storagemanager-dropzone-border-style: dashed; --amplify-components-storagemanager-dropzone-border-width: var(--amplify-border-widths-small); --amplify-components-storagemanager-dropzone-gap: var(--amplify-space-small); --amplify-components-storagemanager-dropzone-padding-block: var(--amplify-space-xl); --amplify-components-storagemanager-dropzone-padding-inline: var(--amplify-space-large); --amplify-components-storagemanager-dropzone-text-align: center; --amplify-components-storagemanager-dropzone-active-background-color: var(--amplify-colors-primary-10); --amplify-components-storagemanager-dropzone-active-border-radius: var(--amplify-components-storagemanager-dropzone-border-radius); --amplify-components-storagemanager-dropzone-active-border-color: var(--amplify-colors-border-pressed); --amplify-components-storagemanager-dropzone-active-border-style: var(--amplify-components-storagemanager-dropzone-border-style); --amplify-components-storagemanager-dropzone-active-border-width: var(--amplify-border-widths-medium); --amplify-components-storagemanager-dropzone-icon-color: var(--amplify-colors-border-primary); --amplify-components-storagemanager-dropzone-icon-font-size: var(--amplify-font-sizes-xxl); --amplify-components-storagemanager-dropzone-text-color: var(--amplify-colors-font-tertiary); --amplify-components-storagemanager-dropzone-text-font-size: var(--amplify-font-sizes-medium); --amplify-components-storagemanager-dropzone-text-font-weight: var(--amplify-font-weights-bold); --amplify-components-storagemanager-file-background-color: var(--amplify-colors-background-primary); --amplify-components-storagemanager-file-border-radius: var(--amplify-radii-small); --amplify-components-storagemanager-file-border-color: var(--amplify-colors-border-primary); --amplify-components-storagemanager-file-border-style: solid; --amplify-components-storagemanager-file-border-width: var(--amplify-border-widths-small); --amplify-components-storagemanager-file-padding-block: var(--amplify-space-xs); --amplify-components-storagemanager-file-padding-inline: var(--amplify-space-small); --amplify-components-storagemanager-file-gap: var(--amplify-space-small); --amplify-components-storagemanager-file-align-items: baseline; --amplify-components-storagemanager-file-name-font-size: var(--amplify-font-sizes-medium); --amplify-components-storagemanager-file-name-font-weight: var(--amplify-font-weights-bold); --amplify-components-storagemanager-file-name-color: var(--amplify-colors-font-primary); --amplify-components-storagemanager-file-size-font-size: var(--amplify-font-sizes-small); --amplify-components-storagemanager-file-size-font-weight: var(--amplify-font-weights-normal); --amplify-components-storagemanager-file-size-color: var(--amplify-colors-font-tertiary); --amplify-components-storagemanager-file-image-width: var(--amplify-space-xxl); --amplify-components-storagemanager-file-image-height: var(--amplify-space-xxl); --amplify-components-storagemanager-file-image-background-color: var(--amplify-colors-background-secondary); --amplify-components-storagemanager-file-image-color: var(--amplify-colors-font-tertiary); --amplify-components-storagemanager-file-image-border-radius: var(--amplify-radii-small); --amplify-components-storagemanager-filelist-flex-direction: column; --amplify-components-storagemanager-filelist-gap: var(--amplify-space-small); --amplify-components-storagemanager-loader-stroke-linecap: round; --amplify-components-storagemanager-loader-stroke-empty: var(--amplify-colors-border-secondary); --amplify-components-storagemanager-loader-stroke-filled: var(--amplify-components-loader-stroke-filled); --amplify-components-storagemanager-loader-stroke-width: var(--amplify-border-widths-large); --amplify-components-storagemanager-previewer-background-color: var(--amplify-colors-background-primary); --amplify-components-storagemanager-previewer-border-color: var(--amplify-colors-border-primary); --amplify-components-storagemanager-previewer-border-style: solid; --amplify-components-storagemanager-previewer-border-width: var(--amplify-border-widths-small); --amplify-components-storagemanager-previewer-border-radius: var(--amplify-radii-small); --amplify-components-storagemanager-previewer-padding-block: var(--amplify-space-zero); --amplify-components-storagemanager-previewer-padding-inline: var(--amplify-space-zero); --amplify-components-storagemanager-previewer-max-height: 40rem; --amplify-components-storagemanager-previewer-max-width: auto; --amplify-components-storagemanager-previewer-text-font-size: var(--amplify-font-sizes-medium); --amplify-components-storagemanager-previewer-text-font-weight: var(--amplify-font-weights-bold); --amplify-components-storagemanager-previewer-text-color: var(--amplify-colors-font-primary); --amplify-components-storagemanager-previewer-body-padding-block: var(--amplify-space-medium); --amplify-components-storagemanager-previewer-body-padding-inline: var(--amplify-space-medium); --amplify-components-storagemanager-previewer-body-gap: var(--amplify-space-small); --amplify-components-storagemanager-previewer-footer-justify-content: flex-end; --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60); --amplify-components-switchfield-focused-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-switchfield-font-size: var(--amplify-font-sizes-medium); --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large); --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small); --amplify-components-switchfield-label-padding: var(--amplify-space-xs); --amplify-components-switchfield-thumb-background-color: var(--amplify-colors-background-primary); --amplify-components-switchfield-thumb-border-color: transparent; --amplify-components-switchfield-thumb-border-width: var(--amplify-border-widths-small); --amplify-components-switchfield-thumb-border-style: solid; --amplify-components-switchfield-thumb-border-radius: var(--amplify-radii-xxxl); --amplify-components-switchfield-thumb-checked-transform: var(--amplify-transforms-slide-x-medium); --amplify-components-switchfield-thumb-transition-duration: var(--amplify-time-medium); --amplify-components-switchfield-thumb-width: var(--amplify-space-relative-medium); --amplify-components-switchfield-track-background-color: var(--amplify-colors-background-quaternary); --amplify-components-switchfield-track-border-radius: var(--amplify-radii-xxxl); --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-primary-80); --amplify-components-switchfield-track-height: var(--amplify-space-relative-medium); --amplify-components-switchfield-track-padding: var(--amplify-outline-widths-medium); --amplify-components-switchfield-track-transition-duration: var(--amplify-time-short); --amplify-components-switchfield-track-width: var(--amplify-space-relative-xl); --amplify-components-switchfield-track-error-background-color: var(--amplify-colors-background-error); --amplify-components-table-border-collapse: collapse; --amplify-components-table-display: table; --amplify-components-table-width: 100%; --amplify-components-table-head-display: table-header-group; --amplify-components-table-head-vertical-align: middle; --amplify-components-table-body-display: table-row-group; --amplify-components-table-body-vertical-align: middle; --amplify-components-table-foot-display: table-footer-group; --amplify-components-table-foot-vertical-align: middle; --amplify-components-table-row-display: table-row; --amplify-components-table-row-vertical-align: middle; --amplify-components-table-row-hover-background-color: var(--amplify-colors-background-tertiary); --amplify-components-table-row-striped-background-color: var(--amplify-colors-background-secondary); --amplify-components-table-header-border-color: var(--amplify-colors-border-tertiary); --amplify-components-table-header-border-style: solid; --amplify-components-table-header-border-width: var(--amplify-border-widths-small); --amplify-components-table-header-color: var(--amplify-colors-font-primary); --amplify-components-table-header-display: table-cell; --amplify-components-table-header-font-size: var(--amplify-font-sizes-medium); --amplify-components-table-header-font-weight: var(--amplify-font-weights-bold); --amplify-components-table-header-padding: var(--amplify-space-medium); --amplify-components-table-header-vertical-align: middle; --amplify-components-table-header-large-font-size: var(--amplify-font-sizes-large); --amplify-components-table-header-large-padding: var(--amplify-space-large); --amplify-components-table-header-small-font-size: var(--amplify-font-sizes-small); --amplify-components-table-header-small-padding: var(--amplify-space-xs); --amplify-components-table-data-border-color: var(--amplify-colors-border-tertiary); --amplify-components-table-data-border-style: solid; --amplify-components-table-data-border-width: var(--amplify-border-widths-small); --amplify-components-table-data-color: var(--amplify-colors-font-primary); --amplify-components-table-data-display: table-cell; --amplify-components-table-data-font-size: var(--amplify-font-sizes-medium); --amplify-components-table-data-font-weight: var(--amplify-font-weights-normal); --amplify-components-table-data-padding: var(--amplify-space-medium); --amplify-components-table-data-vertical-align: middle; --amplify-components-table-data-large-font-size: var(--amplify-font-sizes-large); --amplify-components-table-data-large-padding: var(--amplify-space-large); --amplify-components-table-data-small-font-size: var(--amplify-font-sizes-small); --amplify-components-table-data-small-padding: var(--amplify-space-xs); --amplify-components-table-caption-caption-side: bottom; --amplify-components-table-caption-color: var(--amplify-colors-font-primary); --amplify-components-table-caption-display: table-caption; --amplify-components-table-caption-font-size: var(--amplify-font-sizes-medium); --amplify-components-table-caption-text-align: center; --amplify-components-table-caption-word-break: break-all; --amplify-components-table-caption-large-font-size: var(--amplify-font-sizes-large); --amplify-components-table-caption-small-font-size: var(--amplify-font-sizes-small); --amplify-components-tabs-background-color: transparent; --amplify-components-tabs-border-color: var(--amplify-colors-border-secondary); --amplify-components-tabs-border-style: solid; --amplify-components-tabs-border-width: var(--amplify-border-widths-medium); --amplify-components-tabs-gap: 0; --amplify-components-tabs-item-background-color: transparent; --amplify-components-tabs-item-border-color: var(--amplify-colors-border-secondary); --amplify-components-tabs-item-border-style: solid; --amplify-components-tabs-item-border-width: var(--amplify-border-widths-medium); --amplify-components-tabs-item-color: var(--amplify-colors-font-secondary); --amplify-components-tabs-item-font-size: var(--amplify-font-sizes-medium); --amplify-components-tabs-item-font-weight: var(--amplify-font-weights-bold); --amplify-components-tabs-item-padding-vertical: var(--amplify-space-small); --amplify-components-tabs-item-padding-horizontal: var(--amplify-space-medium); --amplify-components-tabs-item-text-align: center; --amplify-components-tabs-item-transition-duration: var(--amplify-time-medium); --amplify-components-tabs-item-hover-background-color: transparent; --amplify-components-tabs-item-hover-border-color: var(--amplify-colors-border-focus); --amplify-components-tabs-item-hover-box-shadow: none; --amplify-components-tabs-item-hover-color: var(--amplify-colors-font-hover); --amplify-components-tabs-item-focus-background-color: transparent; --amplify-components-tabs-item-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-tabs-item-focus-box-shadow: 0px 0px 0px var(--amplify-border-widths-medium) var(--amplify-colors-border-focus); --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus); --amplify-components-tabs-item-active-background-color: transparent; --amplify-components-tabs-item-active-border-color: var(--amplify-colors-font-interactive); --amplify-components-tabs-item-active-box-shadow: none; --amplify-components-tabs-item-active-color: var(--amplify-colors-font-interactive); --amplify-components-tabs-item-disabled-background-color: transparent; --amplify-components-tabs-item-disabled-border-color: var(--amplify-colors-border-tertiary); --amplify-components-tabs-item-disabled-box-shadow: none; --amplify-components-tabs-item-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-tabs-panel-background-color: transparent; --amplify-components-tabs-panel-padding-inline: 0; --amplify-components-tabs-panel-padding-block: var(--amplify-space-small); --amplify-components-text-color: var(--amplify-colors-font-primary); --amplify-components-text-primary-color: var(--amplify-colors-font-primary); --amplify-components-text-secondary-color: var(--amplify-colors-font-secondary); --amplify-components-text-tertiary-color: var(--amplify-colors-font-tertiary); --amplify-components-text-error-color: var(--amplify-colors-font-error); --amplify-components-text-warning-color: var(--amplify-colors-font-warning); --amplify-components-text-success-color: var(--amplify-colors-font-success); --amplify-components-text-info-color: var(--amplify-colors-font-info); --amplify-components-textareafield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-textareafield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-textareafield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-textfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-textfield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-textfield-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-textfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-togglebutton-border-color: var(--amplify-colors-border-primary); --amplify-components-togglebutton-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-hover-background-color: var(--amplify-colors-overlay-10); --amplify-components-togglebutton-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-togglebutton-focus-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-active-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-disabled-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-togglebutton-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-togglebutton-pressed-border-color: var(--amplify-colors-border-pressed); --amplify-components-togglebutton-pressed-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-pressed-background-color: var(--amplify-colors-overlay-20); --amplify-components-togglebutton-pressed-hover-background-color: var(--amplify-colors-overlay-30); --amplify-components-togglebutton-primary-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-primary-border-width: var(--amplify-border-widths-small); --amplify-components-togglebutton-primary-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-togglebutton-primary-focus-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-togglebutton-primary-focus-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-primary-hover-background-color: var(--amplify-colors-overlay-10); --amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-primary-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-togglebutton-primary-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-togglebutton-primary-pressed-background-color: var(--amplify-colors-primary-80); --amplify-components-togglebutton-primary-pressed-border-color: var(--amplify-colors-primary-80); --amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-background-primary); --amplify-components-togglebutton-primary-pressed-focus-background-color: var(--amplify-colors-border-focus); --amplify-components-togglebutton-primary-pressed-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-togglebutton-primary-pressed-focus-color: var(--amplify-colors-background-primary); --amplify-components-togglebutton-primary-pressed-hover-border-color: var(--amplify-colors-primary-60); --amplify-components-togglebutton-primary-pressed-hover-background-color: var(--amplify-colors-primary-60); --amplify-components-togglebutton-primary-pressed-hover-box-shadow: var(--amplify-colors-primary-60); --amplify-components-togglebutton-primary-pressed-hover-color: var(--amplify-colors-background-primary); --amplify-components-togglebutton-link-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-color: var(--amplify-colors-overlay-50); --amplify-components-togglebutton-link-hover-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-hover-color: var(--amplify-colors-overlay-50); --amplify-components-togglebutton-link-focus-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-focus-color: var(--amplify-colors-overlay-50); --amplify-components-togglebutton-link-disabled-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-togglebutton-link-pressed-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-pressed-color: var(--amplify-colors-overlay-90); --amplify-components-togglebutton-link-pressed-focus-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-pressed-focus-color: var(--amplify-colors-overlay-90); --amplify-components-togglebutton-link-pressed-hover-color: var(--amplify-colors-overlay-90); --amplify-components-togglebutton-link-pressed-hover-background-color: var(--amplify-colors-transparent); --amplify-components-togglebuttongroup-align-items: center; --amplify-components-togglebuttongroup-align-content: center; --amplify-components-togglebuttongroup-justify-content: flex-start; --amplify-border-widths-small: 1px; --amplify-border-widths-medium: 2px; --amplify-border-widths-large: 3px; --amplify-colors-red-10: hsl(0, 75%, 95%); --amplify-colors-red-20: hsl(0, 75%, 85%); --amplify-colors-red-40: hsl(0, 75%, 75%); --amplify-colors-red-60: hsl(0, 50%, 50%); --amplify-colors-red-80: hsl(0, 95%, 30%); --amplify-colors-red-90: hsl(0, 100%, 20%); --amplify-colors-red-100: hsl(0, 100%, 15%); --amplify-colors-orange-10: hsl(30, 75%, 95%); --amplify-colors-orange-20: hsl(30, 75%, 85%); --amplify-colors-orange-40: hsl(30, 75%, 75%); --amplify-colors-orange-60: hsl(30, 50%, 50%); --amplify-colors-orange-80: hsl(30, 95%, 30%); --amplify-colors-orange-90: hsl(30, 100%, 20%); --amplify-colors-orange-100: hsl(30, 100%, 15%); --amplify-colors-yellow-10: hsl(60, 75%, 95%); --amplify-colors-yellow-20: hsl(60, 75%, 85%); --amplify-colors-yellow-40: hsl(60, 75%, 75%); --amplify-colors-yellow-60: hsl(60, 50%, 50%); --amplify-colors-yellow-80: hsl(60, 95%, 30%); --amplify-colors-yellow-90: hsl(60, 100%, 20%); --amplify-colors-yellow-100: hsl(60, 100%, 15%); --amplify-colors-green-10: hsl(130, 60%, 95%); --amplify-colors-green-20: hsl(130, 60%, 90%); --amplify-colors-green-40: hsl(130, 44%, 63%); --amplify-colors-green-60: hsl(130, 43%, 46%); --amplify-colors-green-80: hsl(130, 33%, 37%); --amplify-colors-green-90: hsl(130, 27%, 29%); --amplify-colors-green-100: hsl(130, 22%, 23%); --amplify-colors-teal-10: hsl(190, 75%, 95%); --amplify-colors-teal-20: hsl(190, 75%, 85%); --amplify-colors-teal-40: hsl(190, 70%, 70%); --amplify-colors-teal-60: hsl(190, 50%, 50%); --amplify-colors-teal-80: hsl(190, 95%, 30%); --amplify-colors-teal-90: hsl(190, 100%, 20%); --amplify-colors-teal-100: hsl(190, 100%, 15%); --amplify-colors-blue-10: hsl(220, 95%, 95%); --amplify-colors-blue-20: hsl(220, 85%, 85%); --amplify-colors-blue-40: hsl(220, 70%, 70%); --amplify-colors-blue-60: hsl(220, 50%, 50%); --amplify-colors-blue-80: hsl(220, 95%, 30%); --amplify-colors-blue-90: hsl(220, 100%, 20%); --amplify-colors-blue-100: hsl(220, 100%, 15%); --amplify-colors-purple-10: hsl(300, 95%, 95%); --amplify-colors-purple-20: hsl(300, 85%, 85%); --amplify-colors-purple-40: hsl(300, 70%, 70%); --amplify-colors-purple-60: hsl(300, 50%, 50%); --amplify-colors-purple-80: hsl(300, 95%, 30%); --amplify-colors-purple-90: hsl(300, 100%, 20%); --amplify-colors-purple-100: hsl(300, 100%, 15%); --amplify-colors-pink-10: hsl(340, 95%, 95%); --amplify-colors-pink-20: hsl(340, 90%, 85%); --amplify-colors-pink-40: hsl(340, 70%, 70%); --amplify-colors-pink-60: hsl(340, 50%, 50%); --amplify-colors-pink-80: hsl(340, 95%, 30%); --amplify-colors-pink-90: hsl(340, 100%, 20%); --amplify-colors-pink-100: hsl(340, 100%, 15%); --amplify-colors-neutral-10: hsl(210, 5%, 98%); --amplify-colors-neutral-20: hsl(210, 5%, 94%); --amplify-colors-neutral-40: hsl(210, 5%, 87%); --amplify-colors-neutral-60: hsl(210, 10%, 58%); --amplify-colors-neutral-80: hsl(210, 10%, 40%); --amplify-colors-neutral-90: hsl(210, 25%, 25%); --amplify-colors-neutral-100: hsl(210, 50%, 10%); --amplify-colors-primary-10: var(--amplify-colors-teal-10); --amplify-colors-primary-20: var(--amplify-colors-teal-20); --amplify-colors-primary-40: var(--amplify-colors-teal-40); --amplify-colors-primary-60: var(--amplify-colors-teal-60); --amplify-colors-primary-80: var(--amplify-colors-teal-80); --amplify-colors-primary-90: var(--amplify-colors-teal-90); --amplify-colors-primary-100: var(--amplify-colors-teal-100); --amplify-colors-secondary-10: var(--amplify-colors-purple-10); --amplify-colors-secondary-20: var(--amplify-colors-purple-20); --amplify-colors-secondary-40: var(--amplify-colors-purple-40); --amplify-colors-secondary-60: var(--amplify-colors-purple-60); --amplify-colors-secondary-80: var(--amplify-colors-purple-80); --amplify-colors-secondary-90: var(--amplify-colors-purple-90); --amplify-colors-secondary-100: var(--amplify-colors-purple-100); --amplify-colors-font-primary: var(--amplify-colors-neutral-100); --amplify-colors-font-secondary: var(--amplify-colors-neutral-90); --amplify-colors-font-tertiary: var(--amplify-colors-neutral-80); --amplify-colors-font-disabled: var(--amplify-colors-neutral-60); --amplify-colors-font-inverse: var(--amplify-colors-white); --amplify-colors-font-interactive: var(--amplify-colors-primary-80); --amplify-colors-font-hover: var(--amplify-colors-primary-90); --amplify-colors-font-focus: var(--amplify-colors-primary-100); --amplify-colors-font-active: var(--amplify-colors-primary-100); --amplify-colors-font-info: var(--amplify-colors-blue-90); --amplify-colors-font-warning: var(--amplify-colors-orange-90); --amplify-colors-font-error: var(--amplify-colors-red-90); --amplify-colors-font-success: var(--amplify-colors-green-90); --amplify-colors-background-primary: var(--amplify-colors-white); --amplify-colors-background-secondary: var(--amplify-colors-neutral-10); --amplify-colors-background-tertiary: var(--amplify-colors-neutral-20); --amplify-colors-background-quaternary: var(--amplify-colors-neutral-60); --amplify-colors-background-disabled: var(--amplify-colors-background-tertiary); --amplify-colors-background-info: var(--amplify-colors-blue-10); --amplify-colors-background-warning: var(--amplify-colors-orange-10); --amplify-colors-background-error: var(--amplify-colors-red-10); --amplify-colors-background-success: var(--amplify-colors-green-10); --amplify-colors-border-primary: var(--amplify-colors-neutral-60); --amplify-colors-border-secondary: var(--amplify-colors-neutral-40); --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20); --amplify-colors-border-disabled: var(--amplify-colors-border-tertiary); --amplify-colors-border-pressed: var(--amplify-colors-primary-100); --amplify-colors-border-focus: var(--amplify-colors-primary-100); --amplify-colors-border-error: var(--amplify-colors-red-80); --amplify-colors-border-info: var(--amplify-colors-blue-80); --amplify-colors-border-success: var(--amplify-colors-green-80); --amplify-colors-border-warning: var(--amplify-colors-orange-80); --amplify-colors-shadow-primary: hsla(210, 50%, 10%, 0.25); --amplify-colors-shadow-secondary: hsla(210, 50%, 10%, 0.15); --amplify-colors-shadow-tertiary: hsla(210, 50%, 10%, 0.05); --amplify-colors-overlay-5: hsla(0, 0%, 0%, 0.05); --amplify-colors-overlay-10: hsla(0, 0%, 0%, 0.1); --amplify-colors-overlay-20: hsla(0, 0%, 0%, 0.2); --amplify-colors-overlay-30: hsla(0, 0%, 0%, 0.3); --amplify-colors-overlay-40: hsla(0, 0%, 0%, 0.4); --amplify-colors-overlay-50: hsla(0, 0%, 0%, 0.5); --amplify-colors-overlay-60: hsla(0, 0%, 0%, 0.6); --amplify-colors-overlay-70: hsla(0, 0%, 0%, 0.7); --amplify-colors-overlay-80: hsla(0, 0%, 0%, 0.8); --amplify-colors-overlay-90: hsla(0, 0%, 0%, 0.9); --amplify-colors-black: hsl(0, 0%, 0%); --amplify-colors-white: hsl(0, 0%, 100%); --amplify-colors-transparent: transparent; --amplify-fonts-default-variable: 'InterVariable', 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif; --amplify-fonts-default-static: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif; --amplify-font-sizes-xxxs: 0.375rem; --amplify-font-sizes-xxs: 0.5rem; --amplify-font-sizes-xs: 0.75rem; --amplify-font-sizes-small: 0.875rem; --amplify-font-sizes-medium: 1rem; --amplify-font-sizes-large: 1.25rem; --amplify-font-sizes-xl: 1.5rem; --amplify-font-sizes-xxl: 2rem; --amplify-font-sizes-xxxl: 2.5rem; --amplify-font-sizes-xxxxl: 3rem; --amplify-font-weights-hairline: 100; --amplify-font-weights-thin: 200; --amplify-font-weights-light: 300; --amplify-font-weights-normal: 400; --amplify-font-weights-medium: 500; --amplify-font-weights-semibold: 600; --amplify-font-weights-bold: 700; --amplify-font-weights-extrabold: 800; --amplify-font-weights-black: 900; --amplify-line-heights-small: 1.25; --amplify-line-heights-medium: 1.5; --amplify-line-heights-large: 2; --amplify-opacities-0: 0; --amplify-opacities-10: 0.1; --amplify-opacities-20: 0.2; --amplify-opacities-30: 0.3; --amplify-opacities-40: 0.4; --amplify-opacities-50: 0.5; --amplify-opacities-60: 0.6; --amplify-opacities-70: 0.7; --amplify-opacities-80: 0.8; --amplify-opacities-90: 0.9; --amplify-opacities-100: 1; --amplify-outline-offsets-small: 1px; --amplify-outline-offsets-medium: 2px; --amplify-outline-offsets-large: 3px; --amplify-outline-widths-small: 1px; --amplify-outline-widths-medium: 2px; --amplify-outline-widths-large: 3px; --amplify-radii-xs: 0.125rem; --amplify-radii-small: 0.25rem; --amplify-radii-medium: 0.5rem; --amplify-radii-large: 1rem; --amplify-radii-xl: 2rem; --amplify-radii-xxl: 4rem; --amplify-radii-xxxl: 8rem; --amplify-shadows-small: 0px 2px 4px var(--amplify-colors-shadow-tertiary); --amplify-shadows-medium: 0px 2px 6px var(--amplify-colors-shadow-secondary); --amplify-shadows-large: 0px 4px 12px var(--amplify-colors-shadow-primary); --amplify-space-zero: 0; --amplify-space-xxxs: 0.25rem; --amplify-space-xxs: 0.375rem; --amplify-space-xs: 0.5rem; --amplify-space-small: 0.75rem; --amplify-space-medium: 1rem; --amplify-space-large: 1.5rem; --amplify-space-xl: 2.0rem; --amplify-space-xxl: 3.0rem; --amplify-space-xxxl: 4.5rem; --amplify-space-relative-xxxs: 0.25em; --amplify-space-relative-xxs: 0.375em; --amplify-space-relative-xs: 0.5em; --amplify-space-relative-small: 0.75em; --amplify-space-relative-medium: 1em; --amplify-space-relative-large: 1.5em; --amplify-space-relative-xl: 2.0em; --amplify-space-relative-xxl: 3.0em; --amplify-space-relative-xxxl: 4.5em; --amplify-space-relative-full: 100%; --amplify-time-short: 100ms; --amplify-time-medium: 250ms; --amplify-time-long: 500ms; --amplify-transforms-slide-x-small: translateX(0.5em); --amplify-transforms-slide-x-medium: translateX(1em); --amplify-transforms-slide-x-large: translateX(2em); } @media (prefers-color-scheme: dark) { [data-amplify-theme="amplify-docs"][data-amplify-color-mode="system"] { --amplify-colors-red-10: hsl(0, 100%, 15%); --amplify-colors-red-20: hsl(0, 100%, 20%); --amplify-colors-red-40: hsl(0, 95%, 30%); --amplify-colors-red-80: hsl(0, 75%, 75%); --amplify-colors-red-90: hsl(0, 75%, 85%); --amplify-colors-red-100: hsl(0, 75%, 95%); --amplify-colors-orange-10: hsl(30, 100%, 15%); --amplify-colors-orange-20: hsl(30, 100%, 20%); --amplify-colors-orange-40: hsl(30, 95%, 30%); --amplify-colors-orange-80: hsl(30, 75%, 75%); --amplify-colors-orange-90: hsl(30, 75%, 85%); --amplify-colors-orange-100: hsl(30, 75%, 95%); --amplify-colors-yellow-10: hsl(60, 100%, 15%); --amplify-colors-yellow-20: hsl(60, 100%, 20%); --amplify-colors-yellow-40: hsl(60, 95%, 30%); --amplify-colors-yellow-80: hsl(60, 75%, 75%); --amplify-colors-yellow-90: hsl(60, 75%, 85%); --amplify-colors-yellow-100: hsl(60, 75%, 95%); --amplify-colors-green-10: hsl(130, 22%, 23%); --amplify-colors-green-20: hsl(130, 27%, 29%); --amplify-colors-green-40: hsl(130, 33%, 37%); --amplify-colors-green-80: hsl(130, 44%, 63%); --amplify-colors-green-90: hsl(130, 60%, 90%); --amplify-colors-green-100: hsl(130, 60%, 95%); --amplify-colors-teal-10: hsl(190, 100%, 15%); --amplify-colors-teal-20: hsl(190, 100%, 20%); --amplify-colors-teal-40: hsl(190, 95%, 30%); --amplify-colors-teal-80: hsl(190, 70%, 70%); --amplify-colors-teal-90: hsl(190, 75%, 85%); --amplify-colors-teal-100: hsl(190, 75%, 95%); --amplify-colors-blue-10: hsl(220, 100%, 15%); --amplify-colors-blue-20: hsl(220, 100%, 20%); --amplify-colors-blue-40: hsl(220, 95%, 30%); --amplify-colors-blue-80: hsl(220, 70%, 70%); --amplify-colors-blue-90: hsl(220, 85%, 85%); --amplify-colors-blue-100: hsl(220, 95%, 95%); --amplify-colors-purple-10: hsl(300, 100%, 15%); --amplify-colors-purple-20: hsl(300, 100%, 20%); --amplify-colors-purple-40: hsl(300, 95%, 30%); --amplify-colors-purple-80: hsl(300, 70%, 70%); --amplify-colors-purple-90: hsl(300, 85%, 85%); --amplify-colors-purple-100: hsl(300, 95%, 95%); --amplify-colors-pink-10: hsl(340, 100%, 15%); --amplify-colors-pink-20: hsl(340, 100%, 20%); --amplify-colors-pink-40: hsl(340, 95%, 30%); --amplify-colors-pink-80: hsl(340, 70%, 70%); --amplify-colors-pink-90: hsl(340, 90%, 85%); --amplify-colors-pink-100: hsl(340, 95%, 95%); --amplify-colors-neutral-10: hsl(210, 50%, 10%); --amplify-colors-neutral-20: hsl(210, 25%, 25%); --amplify-colors-neutral-40: hsl(210, 10%, 40%); --amplify-colors-neutral-80: hsl(210, 5%, 87%); --amplify-colors-neutral-90: hsl(210, 5%, 94%); --amplify-colors-neutral-100: hsl(210, 5%, 98%); --amplify-colors-font-primary: var(--amplify-colors-white); --amplify-colors-font-secondary: var(--amplify-colors-neutral-100); --amplify-colors-font-tertiary: var(--amplify-colors-neutral-90); --amplify-colors-font-inverse: var(--amplify-colors-neutral-10); --amplify-colors-background-primary: var(--amplify-colors-neutral-10); --amplify-colors-background-secondary: var(--amplify-colors-neutral-20); --amplify-colors-background-tertiary: var(--amplify-colors-neutral-40); --amplify-colors-border-primary: var(--amplify-colors-neutral-60); --amplify-colors-border-secondary: var(--amplify-colors-neutral-40); --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20); --amplify-colors-overlay-5: hsla(0, 0%, 100%, 0.05); --amplify-colors-overlay-10: hsla(0, 0%, 100%, 0.1); --amplify-colors-overlay-20: hsla(0, 0%, 100%, 0.2); --amplify-colors-overlay-30: hsla(0, 0%, 100%, 0.3); --amplify-colors-overlay-40: hsla(0, 0%, 100%, 0.4); --amplify-colors-overlay-50: hsla(0, 0%, 100%, 0.5); --amplify-colors-overlay-60: hsla(0, 0%, 100%, 0.6); --amplify-colors-overlay-70: hsla(0, 0%, 100%, 0.7); --amplify-colors-overlay-80: hsla(0, 0%, 100%, 0.8); --amplify-colors-overlay-90: hsla(0, 0%, 100%, 0.9); color-scheme: dark; } } [data-amplify-theme="amplify-docs"][data-amplify-color-mode="dark"] { --amplify-colors-red-10: hsl(0, 100%, 15%); --amplify-colors-red-20: hsl(0, 100%, 20%); --amplify-colors-red-40: hsl(0, 95%, 30%); --amplify-colors-red-80: hsl(0, 75%, 75%); --amplify-colors-red-90: hsl(0, 75%, 85%); --amplify-colors-red-100: hsl(0, 75%, 95%); --amplify-colors-orange-10: hsl(30, 100%, 15%); --amplify-colors-orange-20: hsl(30, 100%, 20%); --amplify-colors-orange-40: hsl(30, 95%, 30%); --amplify-colors-orange-80: hsl(30, 75%, 75%); --amplify-colors-orange-90: hsl(30, 75%, 85%); --amplify-colors-orange-100: hsl(30, 75%, 95%); --amplify-colors-yellow-10: hsl(60, 100%, 15%); --amplify-colors-yellow-20: hsl(60, 100%, 20%); --amplify-colors-yellow-40: hsl(60, 95%, 30%); --amplify-colors-yellow-80: hsl(60, 75%, 75%); --amplify-colors-yellow-90: hsl(60, 75%, 85%); --amplify-colors-yellow-100: hsl(60, 75%, 95%); --amplify-colors-green-10: hsl(130, 22%, 23%); --amplify-colors-green-20: hsl(130, 27%, 29%); --amplify-colors-green-40: hsl(130, 33%, 37%); --amplify-colors-green-80: hsl(130, 44%, 63%); --amplify-colors-green-90: hsl(130, 60%, 90%); --amplify-colors-green-100: hsl(130, 60%, 95%); --amplify-colors-teal-10: hsl(190, 100%, 15%); --amplify-colors-teal-20: hsl(190, 100%, 20%); --amplify-colors-teal-40: hsl(190, 95%, 30%); --amplify-colors-teal-80: hsl(190, 70%, 70%); --amplify-colors-teal-90: hsl(190, 75%, 85%); --amplify-colors-teal-100: hsl(190, 75%, 95%); --amplify-colors-blue-10: hsl(220, 100%, 15%); --amplify-colors-blue-20: hsl(220, 100%, 20%); --amplify-colors-blue-40: hsl(220, 95%, 30%); --amplify-colors-blue-80: hsl(220, 70%, 70%); --amplify-colors-blue-90: hsl(220, 85%, 85%); --amplify-colors-blue-100: hsl(220, 95%, 95%); --amplify-colors-purple-10: hsl(300, 100%, 15%); --amplify-colors-purple-20: hsl(300, 100%, 20%); --amplify-colors-purple-40: hsl(300, 95%, 30%); --amplify-colors-purple-80: hsl(300, 70%, 70%); --amplify-colors-purple-90: hsl(300, 85%, 85%); --amplify-colors-purple-100: hsl(300, 95%, 95%); --amplify-colors-pink-10: hsl(340, 100%, 15%); --amplify-colors-pink-20: hsl(340, 100%, 20%); --amplify-colors-pink-40: hsl(340, 95%, 30%); --amplify-colors-pink-80: hsl(340, 70%, 70%); --amplify-colors-pink-90: hsl(340, 90%, 85%); --amplify-colors-pink-100: hsl(340, 95%, 95%); --amplify-colors-neutral-10: hsl(210, 50%, 10%); --amplify-colors-neutral-20: hsl(210, 25%, 25%); --amplify-colors-neutral-40: hsl(210, 10%, 40%); --amplify-colors-neutral-80: hsl(210, 5%, 87%); --amplify-colors-neutral-90: hsl(210, 5%, 94%); --amplify-colors-neutral-100: hsl(210, 5%, 98%); --amplify-colors-font-primary: var(--amplify-colors-white); --amplify-colors-font-secondary: var(--amplify-colors-neutral-100); --amplify-colors-font-tertiary: var(--amplify-colors-neutral-90); --amplify-colors-font-inverse: var(--amplify-colors-neutral-10); --amplify-colors-background-primary: var(--amplify-colors-neutral-10); --amplify-colors-background-secondary: var(--amplify-colors-neutral-20); --amplify-colors-background-tertiary: var(--amplify-colors-neutral-40); --amplify-colors-border-primary: var(--amplify-colors-neutral-60); --amplify-colors-border-secondary: var(--amplify-colors-neutral-40); --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20); --amplify-colors-overlay-5: hsla(0, 0%, 100%, 0.05); --amplify-colors-overlay-10: hsla(0, 0%, 100%, 0.1); --amplify-colors-overlay-20: hsla(0, 0%, 100%, 0.2); --amplify-colors-overlay-30: hsla(0, 0%, 100%, 0.3); --amplify-colors-overlay-40: hsla(0, 0%, 100%, 0.4); --amplify-colors-overlay-50: hsla(0, 0%, 100%, 0.5); --amplify-colors-overlay-60: hsla(0, 0%, 100%, 0.6); --amplify-colors-overlay-70: hsla(0, 0%, 100%, 0.7); --amplify-colors-overlay-80: hsla(0, 0%, 100%, 0.8); --amplify-colors-overlay-90: hsla(0, 0%, 100%, 0.9); color-scheme: dark; } </style></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"-WIT3zg9fx60YQufP5mRY","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>