https://m3.material.io/components

Scan-ID:: 715cce74-af7d-44b9-b4cd-c26bff84884cBeendet
Eingereichte URL:: https://m3.material.io/components
Bericht beendet:: 1. Nov. 2024, 17:33:31
Links · 10 gefunden

Die von der Seite ausgehenden identifizierten Links
Link	Text
https://www.github.com/material-components	Find us on GithubGitHub
https://www.twitter.com/materialdesign	Find us on TwitterTwitter
https://www.youtube.com/materialdesign	Find us on YoutubeYouTube
https://material.io/feed.xml	Blog RSS
https://m1.material.io	Material Design 1Material Design 1
https://m2.material.io	Material Design 2Material Design 2
https://www.google.com	Google
https://policies.google.com/privacy	Privacy Policy
https://policies.google.com/terms	Terms of Service
https://google.qualtrics.com/jfe/form/SV_3NMIMtX0F2zkakR?utm_source=Website&Q_Language=en&utm_campaign=Q2&campaignDate=June2022&referral_code=UXRgbtM2422655&productTag=b2d	Join research studies
JavaScript-Variablen · 187 gefunden

Globale JavaScript-Variablen, die in das Window Object einer Seite geladen werden, sind Variablen, die außerhalb von Funktionen deklariert werden und von jeder Stelle des Codes innerhalb des aktuellen Bereichs zugänglich sind
Name	Typ
0	object
onbeforetoggle	object
documentPictureInPicture	object
onscrollend	object
gtag	function
dataLayer	object
GoogleAnalyticsObject	string
ga	function
userfeedback	object
google_tag_data	object
Konsolenprotokoll-Meldungen · 2 gefunden

In der Web-Konsole protokollierte Meldungen
Typ	Kategorie	Protokoll
error	security	URL https://m3.material.io/components Text The Content-Security-Policy directive name 'feedback-pa.clients6.google.com' contains one or more invalid characters. Only ASCII alphanumeric characters or dashes '-' are allowed in directive names.
error	security	URL https://apis.google.com/_/scs/abc-static/_/js/k=gapi.lb.en.N4A9eqvTwsI.O/m=client/rt=j/sv=1/d=1/ed=1/am=AACA/rs=AHpOoo_O6fwbR1aR8YHQkB3I0FTV0L0UIA/cb=gapi.loaded_0?le=scs Text The Content-Security-Policy directive name 'feedback-pa.clients6.google.com' contains one or more invalid characters. Only ASCII alphanumeric characters or dashes '-' are allowed in directive names.
HTML

Der HTML-Rohtext der Seite
<!DOCTYPE html><html lang="en"><head>
  <meta charset="utf-8">
  <meta content="initial-scale=1, width=device-width" name="viewport">
   
  <title>Components — Material Design 3</title>
  <meta content="Components – Material Design 3" name="og:title">
  <meta content="Components — Material Design 3" name="twitter:title" property="og:title">
  <meta content="Components are interactive building blocks for creating a user interface. They can be organized into categories based on their purpose: Action, containment, communication, navigation, selection, and text input." name="description">
  <meta content="Components are interactive building blocks for creating a user interface. They can be organized into categories based on their purpose: Action, containment, communication, navigation, selection, and text input." name="twitter:description" property="og:description">
  <meta content="https://lh3.googleusercontent.com/Qc711elOuAZEB87E_WVLPP0VA6NMbtOftvrvuwc8XQZj6W3Zrf_wH0sKFhbfick4zqAf8qpYSPDVihLYOJSrppaeYRNap6Wkuwn7UCmIB2NcSyyL76eI" name="twitter:image" property="og:image">
  <meta content="https://m3.material.io//components" itemprop="url" name="twitter:url" property="og:url">
  <meta content="Material Design" property="og:site_name">
  <meta content="article" property="og:type">
  <meta content="summary_large_image" name="twitter:card">
  <meta content="#ffffff" name="theme-color">
  <meta content="telephone=no" name="format-detection">
  <link href="https://m3.material.io/components" rel="canonical">
  <link href="/static/assets/m3-favicon.ico" rel="icon" sizes="any">
  <link href="/static/assets/m3-favicon.svg" rel="icon" sizes="any" type="image/svg+xml">
  <link href="/static/assets/m3-favicon-apple-touch.png" rel="apple-touch-icon">
  <link href="https://lh3.googleusercontent.com" rel="preconnect">
  <link href="https://firebasestorage.googleapis.com" rel="preconnect">
  <link href="https://fonts.googleapis.com" rel="preconnect">
  <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect">
  <link href="https://www.googletagmanager.com" rel="dns-prefetch">
  <link href="https://www.google.com" rel="dns-prefetch">
  <style type="text/css">
   @font-face{font-family:'Google Material Icons';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/googlematerialicons/v143/Gw6kwdfw6UnXLJCcmafZyFRXb3BL9rvi0QZG3Sy7X00.woff2) format('woff2');}@font-face{font-family:'Google Sans Mono';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/googlesansmono/v24/P5sUzYWFYtnZ_Cg-t0Uq_rfivrdYH4RE8-pZ5gQ1abT53wU-Gr-VZS26DMAM_Q.woff) format('woff');unicode-range:U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;}@font-face{font-family:'Google Sans Mono';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/googlesansmono/v24/P5sUzYWFYtnZ_Cg-t0Uq_rfivrdYH4RE8-pZ5gQ1abT53wVeGr-VZS26DMAM_Q.woff) format('woff');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Google Sans Mono';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/googlesansmono/v24/P5sUzYWFYtnZ_Cg-t0Uq_rfivrdYH4RE8-pZ5gQ1abT53wVQGr-VZS26DMA.woff) format('woff');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Google Sans Text';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/googlesanstext/v22/5aUu9-KzpRiLCAt4Unrc-xIKmCU5qE52i0VBuxOCBA.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}@font-face{font-family:'Google Sans Text';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/googlesanstext/v22/5aUu9-KzpRiLCAt4Unrc-xIKmCU5qEl2i0VBuxOCBA.woff2) format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}@font-face{font-family:'Google Sans Text';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/googlesanstext/v22/5aUu9-KzpRiLCAt4Unrc-xIKmCU5qEV2i0VBuxOCBA.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}@font-face{font-family:'Google Sans Text';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/googlesanstext/v22/5aUu9-KzpRiLCAt4Unrc-xIKmCU5qER2i0VBuxOCBA.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Google Sans Text';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/googlesanstext/v22/5aUu9-KzpRiLCAt4Unrc-xIKmCU5qEp2i0VBuxM.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Google Sans Text';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/googlesanstext/v22/5aUp9-KzpRiLCAt4Unrc-xIKmCU5oLlVnmxjtjm4DZzFQQ.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}@font-face{font-family:'Google Sans Text';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/googlesanstext/v22/5aUp9-KzpRiLCAt4Unrc-xIKmCU5oLlVnmtjtjm4DZzFQQ.woff2) format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}@font-face{font-family:'Google Sans Text';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/googlesanstext/v22/5aUp9-KzpRiLCAt4Unrc-xIKmCU5oLlVnmdjtjm4DZzFQQ.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}@font-face{font-family:'Google Sans Text';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/googlesanstext/v22/5aUp9-KzpRiLCAt4Unrc-xIKmCU5oLlVnmZjtjm4DZzFQQ.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Google Sans Text';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/googlesanstext/v22/5aUp9-KzpRiLCAt4Unrc-xIKmCU5oLlVnmhjtjm4DZw.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Google Sans Text';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/googlesanstext/v22/5aUp9-KzpRiLCAt4Unrc-xIKmCU5oPFTnmxjtjm4DZzFQQ.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}@font-face{font-family:'Google Sans Text';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/googlesanstext/v22/5aUp9-KzpRiLCAt4Unrc-xIKmCU5oPFTnmtjtjm4DZzFQQ.woff2) format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}@font-face{font-family:'Google Sans Text';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/googlesanstext/v22/5aUp9-KzpRiLCAt4Unrc-xIKmCU5oPFTnmdjtjm4DZzFQQ.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}@font-face{font-family:'Google Sans Text';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/googlesanstext/v22/5aUp9-KzpRiLCAt4Unrc-xIKmCU5oPFTnmZjtjm4DZzFQQ.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Google Sans Text';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/googlesanstext/v22/5aUp9-KzpRiLCAt4Unrc-xIKmCU5oPFTnmhjtjm4DZw.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/materialicons/v142/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');}.google-material-icons{font-family:'Google Material Icons';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;}.material-icons{font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;}
  </style>
  <style type="text/css">
   @font-face{font-family:'Google Sans';font-style:normal;font-weight:475;font-display:block;src:url(https://fonts.gstatic.com/s/googlesans/v61/4UaRrENHsxJlGDuGo1OIlJfC6mGS6vhAK1YobMu2rgCIhM907-0x.woff2) format('woff2');unicode-range:U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17;}@font-face{font-family:'Google Sans';font-style:normal;font-weight:475;font-display:block;src:url(https://fonts.gstatic.com/s/googlesans/v61/4UaRrENHsxJlGDuGo1OIlJfC6mGS6vhAK1YobMu2rACIhM907-0x.woff2) format('woff2');unicode-range:U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1;}@font-face{font-family:'Google Sans';font-style:normal;font-weight:475;font-display:block;src:url(https://fonts.gstatic.com/s/googlesans/v61/4UaRrENHsxJlGDuGo1OIlJfC6mGS6vhAK1YobMu2swCIhM907-0x.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}@font-face{font-family:'Google Sans';font-style:normal;font-weight:475;font-display:block;src:url(https://fonts.gstatic.com/s/googlesans/v61/4UaRrENHsxJlGDuGo1OIlJfC6mGS6vhAK1YobMu2ugCIhM907-0x.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}@font-face{font-family:'Google Sans';font-style:normal;font-weight:475;font-display:block;src:url(https://fonts.gstatic.com/s/googlesans/v61/4UaRrENHsxJlGDuGo1OIlJfC6mGS6vhAK1YobMu2vwCIhM907-0x.woff2) format('woff2');unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;}@font-face{font-family:'Google Sans';font-style:normal;font-weight:475;font-display:block;src:url(https://fonts.gstatic.com/s/googlesans/v61/4UaRrENHsxJlGDuGo1OIlJfC6mGS6vhAK1YobMu2rwCIhM907-0x.woff2) format('woff2');unicode-range:U+030E, U+1200-1399, U+2D80-2DDE, U+AB01-AB2E, U+1E7E0-1E7E6, U+1E7E8-1E7EB, U+1E7ED-1E7EE, U+1E7F0-1E7FE;}@font-face{font-family:'Google Sans';font-style:normal;font-weight:475;font-display:block;src:url(https://fonts.gstatic.com/s/googlesans/v61/4UaRrENHsxJlGDuGo1OIlJfC6mGS6vhAK1YobMu2oQCIhM907-0x.woff2) format('woff2');unicode-range:U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31;}@font-face{font-family:'Google Sans';font-style:normal;font-weight:475;font-display:block;src:url(https://fonts.gstatic.com/s/googlesans/v61/4UaRrENHsxJlGDuGo1OIlJfC6mGS6vhAK1YobMu2vQCIhM907-0x.woff2) format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}@font-face{font-family:'Google Sans';font-style:normal;font-weight:475;font-display:block;src:url(https://fonts.gstatic.com/s/googlesans/v61/4UaRrENHsxJlGDuGo1OIlJfC6mGS6vhAK1YobMu2pQCIhM907-0x.woff2) format('woff2');unicode-range:U+0951-0952, U+0964-0965, U+0A80-0AFF, U+200C-200D, U+20B9, U+25CC, U+A830-A839;}@font-face{font-family:'Google Sans';font-style:normal;font-weight:475;font-display:block;src:url(https://fonts.gstatic.com/s/googlesans/v61/4UaRrENHsxJlGDuGo1OIlJfC6mGS6vhAK1YobMu2nQCIhM907-0x.woff2) format('woff2');unicode-range:U+0951-0952, U+0964-0965, U+0A01-0A76, U+200C-200D, U+20B9, U+25CC, U+262C, U+A830-A839;}@font-face{font-family:'Google Sans';font-style:normal;font-weight:475;font-display:block;src:url(https://fonts.gstatic.com/s/googlesans/v61/4UaRrENHsxJlGDuGo1OIlJfC6mGS6vhAK1YobMu2vACIhM907-0x.woff2) format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;}@font-face{font-family:'Google Sans';font-style:normal;font-weight:475;font-display:block;src:url(https://fonts.gstatic.com/s/googlesans/v61/4UaRrENHsxJlGDuGo1OIlJfC6mGS6vhAK1YobMu2tQCIhM907-0x.woff2) format('woff2');unicode-range:U+1780-17FF, U+19E0-19FF, U+200C-200D, U+25CC;}@font-face{font-family:'Google Sans';font-style:normal;font-weight:475;font-display:block;src:url(https://fonts.gstatic.com/s/googlesans/v61/4UaRrENHsxJlGDuGo1OIlJfC6mGS6vhAK1YobMu2twCIhM907-0x.woff2) format('woff2');unicode-range:U+0E81-0EDF, U+200C-200D, U+25CC;}@font-face{font-family:'Google Sans';font-style:normal;font-weight:475;font-display:block;src:url(https://fonts.gstatic.com/s/googlesans/v61/4UaRrENHsxJlGDuGo1OIlJfC6mGS6vhAK1YobMu2pwCIhM907-0x.woff2) format('woff2');unicode-range:U+0951-0952, U+0964-0965, U+0B01-0B77, U+1CDA, U+1CF2, U+200C-200D, U+20B9, U+25CC;}@font-face{font-family:'Google Sans';font-style:normal;font-weight:475;font-display:block;src:url(https://fonts.gstatic.com/s/googlesans/v61/4UaRrENHsxJlGDuGo1OIlJfC6mGS6vhAK1YobMu2owCIhM907-0x.woff2) format('woff2');unicode-range:U+0964-0965, U+0D81-0DF4, U+1CF2, U+200C-200D, U+25CC, U+111E1-111F4;}@font-face{font-family:'Google Sans';font-style:normal;font-weight:475;font-display:block;src:url(https://fonts.gstatic.com/s/googlesans/v61/4UaRrENHsxJlGDuGo1OIlJfC6mGS6vhAK1YobMu20ACIhM907-0x.woff2) format('woff2');unicode-range:U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;}@font-face{font-family:'Google Sans';font-style:normal;font-weight:475;font-display:block;src:url(https://fonts.gstatic.com/s/googlesans/v61/4UaRrENHsxJlGDuGo1OIlJfC6mGS6vhAK1YobMu2qACIhM907-0x.woff2) format('woff2');unicode-range:U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC;}@font-face{font-family:'Google Sans';font-style:normal;font-weight:475;font-display:block;src:url(https://fonts.gstatic.com/s/googlesans/v61/4UaRrENHsxJlGDuGo1OIlJfC6mGS6vhAK1YobMu2ogCIhM907-0x.woff2) format('woff2');unicode-range:U+0951-0952, U+0964-0965, U+0C00-0C7F, U+1CDA, U+1CF2, U+200C-200D, U+25CC;}@font-face{font-family:'Google Sans';font-style:normal;font-weight:475;font-display:block;src:url(https://fonts.gstatic.com/s/googlesans/v61/4UaRrENHsxJlGDuGo1OIlJfC6mGS6vhAK1YobMu2qgCIhM907-0x.woff2) format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;}@font-face{font-family:'Google Sans';font-style:normal;font-weight:475;font-display:block;src:url(https://fonts.gstatic.com/s/googlesans/v61/4UaRrENHsxJlGDuGo1OIlJfC6mGS6vhAK1YobMu2sQCIhM907-0x.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}@font-face{font-family:'Google Sans';font-style:normal;font-weight:475;font-display:block;src:url(https://fonts.gstatic.com/s/googlesans/v61/4UaRrENHsxJlGDuGo1OIlJfC6mGS6vhAK1YobMu2sACIhM907-0x.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Google Sans';font-style:normal;font-weight:475;font-display:block;src:url(https://fonts.gstatic.com/s/googlesans/v61/4UaRrENHsxJlGDuGo1OIlJfC6mGS6vhAK1YobMu2vgCIhM907w.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Google Symbols';font-style:normal;font-weight:300 600;font-display:block;src:url(https://fonts.gstatic.com/s/googlesymbols/v300/HhyqU5Ak9u-oMExPeInvcuEmPosC9zS3FYkFU68cPrjdKM1XMoDZlWmzc3IiWvF1SbxVhQidBnv_C-yl9mm4Tw.woff2) format('woff2');}.google-symbols{font-family:'Google Symbols';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;}
  </style>
  <script src="https://apis.google.com/_/scs/abc-static/_/js/k=gapi.lb.en.N4A9eqvTwsI.O/m=client/rt=j/sv=1/d=1/ed=1/am=AACA/rs=AHpOoo_O6fwbR1aR8YHQkB3I0FTV0L0UIA/cb=gapi.loaded_0?le=scs" async=""></script><script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script><script type="text/javascript" async="" src="https://www.googletagmanager.com/gtag/js?id=UA-90255304-1&amp;l=dataLayer&amp;cx=c"></script><script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-NHRPF8"></script><script async="" src="https://www.google-analytics.com/analytics.js"></script><script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-NHRPF8" type="text/javascript">
  </script>
  <script async="" defer="" src="https://www.gstatic.com/feedback/api.js" type="text/javascript">
  </script>
  <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-QPQ2NRV856">
  </script>
  <script>
   window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-QPQ2NRV856');
  </script>
  <script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-90255304-1', 'auto');
    ga('set', 'anonymizeIp', true);
  </script>
  <script>
   (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-NHRPF8');
  </script>
  <script>
   const _customElementsDefine = window.customElements.define;
    window.customElements.define = (name, cl, conf) => {
      if (!customElements.get(name)) {
        _customElementsDefine.call(window.customElements, name, cl, conf);
      }
    };
  </script>
  <script type="application/ld+json">
   {
  "@context": "http://schema.org",
  "@type": "WebPage",
  "url": "https://m3.material.io/components",
  "name": "Material Design Components - Material Design",
  "description": "Explore Material Design components. Get the full set of Material components available to use in your projects and applications.",
  "breadcrumb": {
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Home",
        "item": "https://m3.material.io/"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "Components",
        "item": "https://m3.material.io/components"
      }
    ]
  },
  "mainEntityOfPage": {
    "@type": "CreativeWork",
    "@id": "https://m3.material.io/components#webpage"
  }
}
  </script>
  <style>
   html,body{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}body{line-height:1}:root{--mio-theme-color-white:#fff;--mio-theme-color-on-surface:#1f1f1f;--mio-theme-color-scrim-video-container:rgb(31 31 31 / 64%);--mio-theme-color-scrim-video-control:rgb(255 255 255 / 12%);--mio-theme-color-scrim-video-control-pressed:rgb(255 255 255 / 24%);--mio-theme-display-font-family:"Google Sans", sans-serif;--mio-theme-text-font-family:"Google Sans Text", sans-serif;--mio-theme-mono-font-family:"Google Sans Mono", sans-serif;--mio-theme-google-symbol-font-family:"Google Symbols";--mio-theme-v2-hero-font-family:var(--mio-theme-display-font-family);--mio-theme-v2-hero-font-size:96px;--mio-theme-v2-hero-line-height:1;--mio-theme-v2-hero-font-weight:475;--mio-theme-v2-hero-font-variation-GRAD:0;--mio-theme-v2-hero-font-variation-opsz:18;--mio-theme-v2-hero-letter-spacing:0;--mio-theme-v2-display-xl-font-family:var(--mio-theme-display-font-family);--mio-theme-v2-display-xl-font-size:88px;--mio-theme-v2-display-xl-line-height:96px;--mio-theme-v2-display-xl-font-weight:475;--mio-theme-v2-display-xl-font-variation-GRAD:0;--mio-theme-v2-display-xl-font-variation-opsz:18;--mio-theme-v2-display-xl-letter-spacing:0;--mio-theme-v2-display-l-font-family:var(--mio-theme-display-font-family);--mio-theme-v2-display-l-font-size:57px;--mio-theme-v2-display-l-line-height:64px;--mio-theme-v2-display-l-font-weight:475;--mio-theme-v2-display-l-font-variation-GRAD:0;--mio-theme-v2-display-l-font-variation-opsz:18;--mio-theme-v2-display-l-letter-spacing:0;--mio-theme-v2-display-m-font-family:var(--mio-theme-display-font-family);--mio-theme-v2-display-m-font-size:45px;--mio-theme-v2-display-m-line-height:52px;--mio-theme-v2-display-m-font-weight:475;--mio-theme-v2-display-m-font-variation-GRAD:0;--mio-theme-v2-display-m-font-variation-opsz:18;--mio-theme-v2-display-m-letter-spacing:0;--mio-theme-v2-display-s-font-family:var(--mio-theme-display-font-family);--mio-theme-v2-display-s-font-size:36px;--mio-theme-v2-display-s-line-height:44px;--mio-theme-v2-display-s-font-weight:475;--mio-theme-v2-display-s-font-variation-GRAD:0;--mio-theme-v2-display-s-font-variation-opsz:18;--mio-theme-v2-display-s-letter-spacing:0;--mio-theme-v2-headline-l-font-family:var(--mio-theme-display-font-family);--mio-theme-v2-headline-l-font-size:32px;--mio-theme-v2-headline-l-line-height:40px;--mio-theme-v2-headline-l-font-weight:475;--mio-theme-v2-headline-l-font-variation-GRAD:0;--mio-theme-v2-headline-l-font-variation-opsz:18;--mio-theme-v2-headline-l-letter-spacing:0;--mio-theme-v2-headline-m-font-family:var(--mio-theme-display-font-family);--mio-theme-v2-headline-m-font-size:28px;--mio-theme-v2-headline-m-line-height:36px;--mio-theme-v2-headline-m-font-weight:475;--mio-theme-v2-headline-m-font-variation-GRAD:0;--mio-theme-v2-headline-m-font-variation-opsz:18;--mio-theme-v2-headline-m-letter-spacing:0;--mio-theme-v2-headline-s-font-family:var(--mio-theme-display-font-family);--mio-theme-v2-headline-s-font-size:24px;--mio-theme-v2-headline-s-line-height:32px;--mio-theme-v2-headline-s-font-weight:475;--mio-theme-v2-headline-s-font-variation-GRAD:0;--mio-theme-v2-headline-s-font-variation-opsz:18;--mio-theme-v2-headline-s-letter-spacing:0;--mio-theme-v2-title-l-font-family:var(--mio-theme-text-font-family);--mio-theme-v2-title-l-font-size:22px;--mio-theme-v2-title-l-line-height:30px;--mio-theme-v2-title-l-font-weight:400;--mio-theme-v2-title-l-font-variation-GRAD:0;--mio-theme-v2-title-l-font-variation-opsz:17;--mio-theme-v2-title-l-letter-spacing:0;--mio-theme-v2-title-m-font-family:var(--mio-theme-text-font-family);--mio-theme-v2-title-m-font-size:16px;--mio-theme-v2-title-m-line-height:24px;--mio-theme-v2-title-m-font-weight:500;--mio-theme-v2-title-m-font-variation-GRAD:0;--mio-theme-v2-title-m-font-variation-opsz:17;--mio-theme-v2-title-m-letter-spacing:0;--mio-theme-v2-title-s-font-family:var(--mio-theme-text-font-family);--mio-theme-v2-title-s-font-size:14px;--mio-theme-v2-title-s-line-height:20px;--mio-theme-v2-title-s-font-weight:500;--mio-theme-v2-title-s-font-variation-GRAD:0;--mio-theme-v2-title-s-font-variation-opsz:17;--mio-theme-v2-title-s-letter-spacing:0;--mio-theme-v2-label-l-font-family:var(--mio-theme-text-font-family);--mio-theme-v2-label-l-font-size:14px;--mio-theme-v2-label-l-line-height:20px;--mio-theme-v2-label-l-font-weight:500;--mio-theme-v2-label-l-font-variation-GRAD:0;--mio-theme-v2-label-l-font-variation-opsz:17;--mio-theme-v2-label-l-letter-spacing:0;--mio-theme-v2-label-m-font-family:var(--mio-theme-text-font-family);--mio-theme-v2-label-m-font-size:12px;--mio-theme-v2-label-m-line-height:16px;--mio-theme-v2-label-m-font-weight:500;--mio-theme-v2-label-m-font-variation-GRAD:0;--mio-theme-v2-label-m-font-variation-opsz:17;--mio-theme-v2-label-m-letter-spacing:.1px;--mio-theme-v2-label-s-font-family:var(--mio-theme-text-font-family);--mio-theme-v2-label-s-font-size:11px;--mio-theme-v2-label-s-line-height:16px;--mio-theme-v2-label-s-font-weight:500;--mio-theme-v2-label-s-font-variation-GRAD:0;--mio-theme-v2-label-s-font-variation-opsz:17;--mio-theme-v2-label-s-letter-spacing:.1px;--mio-theme-v2-body-l-font-family:var(--mio-theme-text-font-family);--mio-theme-v2-body-l-font-size:16px;--mio-theme-v2-body-l-line-height:24px;--mio-theme-v2-body-l-font-weight:400;--mio-theme-v2-body-l-font-variation-GRAD:0;--mio-theme-v2-body-l-font-variation-opsz:17;--mio-theme-v2-body-l-letter-spacing:0;--mio-theme-v2-body-m-font-family:var(--mio-theme-text-font-family);--mio-theme-v2-body-m-font-size:14px;--mio-theme-v2-body-m-line-height:20px;--mio-theme-v2-body-m-font-weight:400;--mio-theme-v2-body-m-font-variation-GRAD:0;--mio-theme-v2-body-m-font-variation-opsz:17;--mio-theme-v2-body-m-letter-spacing:0;--mio-theme-v2-body-s-font-family:var(--mio-theme-text-font-family);--mio-theme-v2-body-s-font-size:12px;--mio-theme-v2-body-s-line-height:16px;--mio-theme-v2-body-s-font-weight:400;--mio-theme-v2-body-s-font-variation-GRAD:0;--mio-theme-v2-body-s-font-variation-opsz:17;--mio-theme-v2-body-s-letter-spacing:.1px;--mio-theme-v2-code-l-font-family:var(--mio-theme-mono-font-family);--mio-theme-v2-code-l-font-size:16px;--mio-theme-v2-code-l-line-height:24px;--mio-theme-v2-code-l-font-weight:400;--mio-theme-v2-code-l-letter-spacing:0;--mio-theme-v2-code-m-font-family:var(--mio-theme-mono-font-family);--mio-theme-v2-code-m-font-size:14px;--mio-theme-v2-code-m-line-height:20px;--mio-theme-v2-code-m-font-weight:400;--mio-theme-v2-code-m-letter-spacing:0;--mio-theme-v2-code-snippet-font-family:var(--mio-theme-mono-font-family);--mio-theme-v2-code-snippet-font-size:15px;--mio-theme-v2-code-snippet-line-height:32px;--mio-theme-v2-code-snippet-font-weight:500;-webkit-font-smoothing:antialiased}mio-root{--mio-theme-color-on-surface-variant-2:linear-gradient(0deg, rgba(77, 66, 86, .08), rgba(77, 66, 86, .08));--mio-theme-color-on-surface-variant-4:linear-gradient(0deg, rgba(77, 66, 86, .12), rgba(77, 66, 86, .12));--mio-theme-color-on-surface-2:linear-gradient(0deg, rgba(28, 27, 29, .08), rgba(28, 27, 29, .08)), var(--mio-theme-color-secondary-container);--mio-theme-color-on-surface-4:linear-gradient(0deg, rgba(28, 27, 29, .12), rgba(28, 27, 29, .12)), var(--mio-theme-color-secondary-container);--mio-theme-color-white:#fff;--mio-theme-color-on-background:#1c1b1d;--mio-theme-color-background:#fefbff;--mio-theme-color-on-surface:#1c1b1d;--mio-theme-color-on-surface-variant:#4d4256;--mio-theme-color-surface-0:#fff;--mio-theme-color-on-surface-2:linear-gradient(0deg, rgb(31 25 35 / 8%), rgb(31 25 35 / 8%)), var(--mio-theme-color-secondary-container);--mio-theme-color-on-surface-4:linear-gradient(0deg, rgb(31 25 35 / 12%), rgb(31 25 35 / 12%)), var(--mio-theme-color-secondary-container);--mio-theme-color-on-surface-variant-2:linear-gradient(0deg, rgb(77 66 86 / 8%), rgb(77 66 86 / 8%));--mio-theme-color-on-surface-variant-4:linear-gradient(0deg, rgb(77 66 86 / 12%), rgb(77 66 86 / 12%));--mio-theme-color-surface-variant:#e8e0e8;--mio-theme-color-inverse-surface:#303030;--mio-theme-color-inverse-on-surface:#f5eff1;--mio-theme-color-primary:#6442d6;--mio-theme-color-primary-80:#cbbeff;--mio-theme-color-primary-30:#4b21bd;--mio-theme-color-primary-20:#340098;--mio-theme-color-on-primary:#fff;--mio-theme-color-neutral-10:#1c1b1d;--mio-theme-color-neutral-90:#e6e1e3;--mio-theme-color-primary-container:#9f86ff;--mio-theme-color-on-primary-container:#1e0060;--mio-theme-color-secondary:#5d5d74;--mio-theme-color-on-secondary:#fff;--mio-theme-color-secondary-container:#dcdaf5;--mio-theme-color-on-secondary-container:#21182b;--mio-theme-color-tertiary-container:#f1d3f9;--mio-theme-color-on-tertiary-container:#271430;--mio-theme-color-utility-error:#ff6240;--mio-theme-color-utility-error-variant:#ff6240;--mio-theme-color-utility-on-error:#490909;--mio-theme-color-utility-error-container:#f9dedc;--mio-theme-color-utility-outline:#787579;--mio-theme-color-utility-list-hover:rgb(31 25 35 / 8%);--mio-theme-color-utility-list-active:rgb(31 25 35 / 10%);--mio-theme-color-surface-1:#f8f1f6;--mio-theme-color-surface-2:#f2ecee;--mio-theme-color-surface-3:#ece7e9;--mio-theme-color-surface-4:#e6e1e3;--mio-theme-color-surface-5:#e6e1e3;--mio-theme-color-extensions-do-container:#34be4d;--mio-theme-color-extensions-on-do-container:#11371d;--mio-theme-color-extensions-dont-container:#ff6240;--mio-theme-color-extensions-on-dont-container:#490909;--mio-theme-color-extensions-caution-container:#ffce22;--mio-theme-color-extensions-on-caution-container:#3a2900;--mio-theme-color-ref-secondary-200:#c6c4de;--mio-theme-color-ref-secondary-300:#aaa9c2;--mio-theme-color-ref-neutral-100:#e6e1e3;--mio-theme-color-ref-neutral-200:#cac5c7;--mio-theme-color-scrim-video-container:rgb(31 31 31 / 64%);--mio-theme-color-scrim-video-control:rgb(255 255 255 / 12%);--mio-theme-color-scrim-video-control-pressed:rgb(255 255 255 / 24%);--mio-theme-color-copy-link-tooltip:#f2f2f2;--mio-theme-color-warning-icon:#e37402;--mio-theme-elevation-1:0px 1px 2px 0px rgb(0 0 0 / 30%), 0px 1px 3px 1px rgb(0 0 0 / 15%);--mio-theme-elevation-2:0px 1px 2px 0px rgb(0 0 0 / 30%), 0px 2px 6px 2px rgb(0 0 0 / 15%);--mio-theme-elevation-3:0px 1px 3px 0px rgb(0 0 0 / 30%), 0px 4px 8px 3px rgb(0 0 0 / 15%)}*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:Google Sans Text,sans-serif;font-family:var(--mio-theme-v2-body-l-font-family);font-size:16px;font-size:var(--mio-theme-v2-body-l-font-size);font-weight:400;font-weight:var(--mio-theme-v2-body-l-font-weight);letter-spacing:0;letter-spacing:var(--mio-theme-v2-body-l-letter-spacing);line-height:24px;line-height:var(--mio-theme-v2-body-l-line-height);font-variation-settings:"GRAD" 0,"opsz" 17;font-variation-settings:"GRAD" var(--mio-theme-v2-body-l-font-variation-GRAD),"opsz" var(--mio-theme-v2-body-l-font-variation-opsz);color:#1f1f1f;color:var(--mio-theme-color-on-surface)}@media screen and (max-width: 600px){body{font-family:Google Sans Text,sans-serif;font-family:var(--mio-theme-v2-body-m-font-family);font-size:14px;font-size:var(--mio-theme-v2-body-m-font-size);font-weight:400;font-weight:var(--mio-theme-v2-body-m-font-weight);letter-spacing:0;letter-spacing:var(--mio-theme-v2-body-m-letter-spacing);line-height:20px;line-height:var(--mio-theme-v2-body-m-line-height);font-variation-settings:"GRAD" 0,"opsz" 17;font-variation-settings:"GRAD" var(--mio-theme-v2-body-m-font-variation-GRAD),"opsz" var(--mio-theme-v2-body-m-font-variation-opsz)}}@media screen and (min-width: 601px) and (max-width: 1294px){body{font-family:Google Sans Text,sans-serif;font-family:var(--mio-theme-v2-body-l-font-family);font-size:16px;font-size:var(--mio-theme-v2-body-l-font-size);font-weight:400;font-weight:var(--mio-theme-v2-body-l-font-weight);letter-spacing:0;letter-spacing:var(--mio-theme-v2-body-l-letter-spacing);line-height:24px;line-height:var(--mio-theme-v2-body-l-line-height);font-variation-settings:"GRAD" 0,"opsz" 17;font-variation-settings:"GRAD" var(--mio-theme-v2-body-l-font-variation-GRAD),"opsz" var(--mio-theme-v2-body-l-font-variation-opsz)}}
  </style>
  <link href="/static/angular/styles.62b2ed64cad69aaa.css" media="all" onload="this.media='all'" rel="stylesheet">
  <noscript>
   <link href="/static/angular/styles.62b2ed64cad69aaa.css" rel="stylesheet"/>
  </noscript>
  <base href="/">
 <style>[_nghost-urv-c35]{display:flex;flex-direction:column;min-height:100%;background:var(--mio-theme-color-background)}.content-container[_ngcontent-urv-c35]{display:flex;flex-grow:1;justify-content:center;width:100%}.navigation[_ngcontent-urv-c35]{display:flex}.skip-link[_ngcontent-urv-c35]{position:fixed;width:1px;height:1px;white-space:nowrap;overflow:hidden;clip-path:polygon(0 0,0 0,0 0)}.skip-link[_ngcontent-urv-c35]:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;clip-path:none;padding:8px 16px;border-radius:8px;outline:auto;background-color:var(--mio-theme-color-tertiary-container);color:var(--mio-theme-color-on-surface);font-family:var(--mio-theme-v2-body-l-font-family);font-size:var(--mio-theme-v2-body-l-font-size);font-weight:var(--mio-theme-v2-body-l-font-weight);text-decoration:none;z-index:10}</style><style>[_nghost-urv-c33]{width:100%}@media screen and (min-width: 961px){[_nghost-urv-c33]{padding-left:88px}}mwc-drawer[_ngcontent-urv-c33]{--mdc-drawer-width: 240px}@media screen and (max-width: 960px){mwc-drawer[_ngcontent-urv-c33]{--mdc-drawer-width: 320px}}mwc-drawer[type=dismissible][_ngcontent-urv-c33]   nav[_ngcontent-urv-c33]{padding-top:8px}mwc-drawer[type=modal][_ngcontent-urv-c33]   nav[_ngcontent-urv-c33]{overflow:hidden}mwc-drawer[type=modal][_ngcontent-urv-c33]   .nav-drawer-section[_ngcontent-urv-c33]{height:calc(100% - 80px)}mwc-drawer[type=dismissible][_ngcontent-urv-c33]   nav[_ngcontent-urv-c33], mwc-drawer[type=modal][_ngcontent-urv-c33]   nav[_ngcontent-urv-c33]{height:100%}mio-icon-button[_ngcontent-urv-c33]{margin-bottom:8px;margin-left:12px}.nav-drawer-section[_ngcontent-urv-c33]{padding-bottom:24px;overflow-y:auto}@media screen and (max-width: 960px){.nav-drawer-section[_ngcontent-urv-c33]{margin:8px 0 auto}}.topic-wrapper[_ngcontent-urv-c33]{margin:0 8px}.page-content[_ngcontent-urv-c33]{display:flex;flex-direction:column;min-height:calc(100vh - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch}.page-content-height[_ngcontent-urv-c33]{height:100vh;height:calc(var(--vh, 1vh) * 100)}.section-title[_ngcontent-urv-c33]{margin-bottom:8px;margin-left:24px;color:var(--mio-theme-color-on-surface-variant);font-size:var(--mio-theme-v2-label-l-font-size);font-weight:var(--mio-theme-v2-label-l-font-weight);line-height:var(--mio-theme-v2-label-l-line-height)}.item[_ngcontent-urv-c33]{font-family:var(--mio-theme-v2-title-m-font-family);font-size:var(--mio-theme-v2-title-m-font-size);font-weight:var(--mio-theme-v2-title-m-font-weight);letter-spacing:var(--mio-theme-v2-title-m-letter-spacing);line-height:var(--mio-theme-v2-title-m-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-title-m-font-variation-GRAD),"opsz" var(--mio-theme-v2-title-m-font-variation-opsz);display:flex;position:relative;align-items:center;height:48px;padding:2px 16px;border-radius:100px;color:var(--mio-theme-color-on-surface-variant);font-family:var(--mio-theme-display-font-family);text-decoration:none;cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent}.item[_ngcontent-urv-c33]:before{position:absolute;bottom:0;left:0;width:100%;height:100%;opacity:0;transform:scaleX(.32);transition-duration:.2s;transition-property:transform,opacity;transition-timing-function:linear;border-radius:100px;background:var(--mio-theme-color-secondary-container);content:"";z-index:-1}.item[_ngcontent-urv-c33]:focus{margin:0;border:none;outline:none;box-shadow:none}.item[_ngcontent-urv-c33]:hover{background:var(--mio-theme-color-on-surface-variant-2)}.item[_ngcontent-urv-c33]:hover   .label[_ngcontent-urv-c33]{font-variation-settings:"GRAD" 50}.item[_ngcontent-urv-c33]:hover   .google-symbols[_ngcontent-urv-c33]{font-variation-settings:"FILL" 1,"wght" 600,"opsz" 24}.item[_ngcontent-urv-c33]:active{background:var(--mio-theme-color-on-surface-variant-4)}.item[_ngcontent-urv-c33]:active   .label[_ngcontent-urv-c33]{font-variation-settings:"GRAD" -50}.item[_ngcontent-urv-c33]:active   .google-symbols[_ngcontent-urv-c33]{font-variation-settings:"FILL" 1,"wght" 300,"opsz" 24}.item.active[_ngcontent-urv-c33]{color:var(--mio-theme-color-on-secondary-container)}.item.active[_ngcontent-urv-c33]:before{opacity:1;transform:scaleX(1)}.item[_ngcontent-urv-c33]   .section-icon[_ngcontent-urv-c33]{margin-right:16px}.item[_ngcontent-urv-c33]   .arrow-right-icon[_ngcontent-urv-c33]{margin-left:auto}.main-menu[_ngcontent-urv-c33]{font-family:var(--mio-theme-v2-title-m-font-family);font-size:var(--mio-theme-v2-title-m-font-size);font-weight:var(--mio-theme-v2-title-m-font-weight);letter-spacing:var(--mio-theme-v2-title-m-letter-spacing);line-height:var(--mio-theme-v2-title-m-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-title-m-font-variation-GRAD),"opsz" var(--mio-theme-v2-title-m-font-variation-opsz);display:flex;position:relative;align-items:center;height:48px;padding:0 16px;border-radius:100px;color:var(--mio-theme-color-on-surface-variant);font-family:var(--mio-theme-display-font-family);cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent}.main-menu[_ngcontent-urv-c33]:hover{background:var(--mio-theme-color-on-surface-variant-2);color:var(--mio-theme-color-on-surface)}.main-menu[_ngcontent-urv-c33]:hover   .label[_ngcontent-urv-c33]{font-variation-settings:"GRAD" 50}.main-menu[_ngcontent-urv-c33]:hover   .google-symbols[_ngcontent-urv-c33]{font-variation-settings:"wght" 600,"opsz" 24}.main-menu[_ngcontent-urv-c33]:active{background:var(--mio-theme-color-on-surface-variant-4);color:var(--mio-theme-color-on-surface)}.main-menu[_ngcontent-urv-c33]:active   .label[_ngcontent-urv-c33]{font-variation-settings:"GRAD" -50}.main-menu[_ngcontent-urv-c33]:active   .google-symbols[_ngcontent-urv-c33]{font-variation-settings:"wght" 300,"opsz" 24}.main-menu[_ngcontent-urv-c33]   .arrow-back-icon[_ngcontent-urv-c33]{margin-right:16px}.google-symbols[_ngcontent-urv-c33]{font-variation-settings:"wght" 400,"opsz" 24;transition:font-variation-settings .2s cubic-bezier(.2,0,0,1)}.label[_ngcontent-urv-c33]{font-variation-settings:"GRAD" 0;transition:font-variation-settings .2s cubic-bezier(.2,0,0,1)}.main-menu[_ngcontent-urv-c33]:focus-visible, .item[_ngcontent-urv-c33]:focus-visible{margin:0 -2px;border:2px solid var(--mio-theme-color-on-surface);border-radius:24px;outline:0;box-shadow:inset 0 0 0 2px var(--mio-theme-color-surface-0)}.dark-mode-switch-container[_ngcontent-urv-c33]{display:flex;position:absolute;bottom:0;align-items:center;justify-content:center;width:100%;height:80px}@media screen and (max-width: 960px){.element-hide[_ngcontent-urv-c33]{display:none}}</style><style>[_nghost-urv-c34]{position:fixed;bottom:0;align-self:center;margin:8px;z-index:10}.cookie-notice[_ngcontent-urv-c34]{font-family:var(--mio-theme-v2-body-m-font-family);font-size:var(--mio-theme-v2-body-m-font-size);font-weight:var(--mio-theme-v2-body-m-font-weight);letter-spacing:var(--mio-theme-v2-body-m-letter-spacing);line-height:var(--mio-theme-v2-body-m-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-body-m-font-variation-GRAD),"opsz" var(--mio-theme-v2-body-m-font-variation-opsz);display:flex;align-items:center;padding:8px 8px 8px 16px;border-radius:8px;background:var(--mio-theme-color-inverse-surface);color:var(--mio-theme-color-inverse-on-surface)}.cookie-notice[_ngcontent-urv-c34]   a[_ngcontent-urv-c34]{font-family:var(--mio-theme-v2-body-m-font-family);font-size:var(--mio-theme-v2-body-m-font-size);font-weight:var(--mio-theme-v2-body-m-font-weight);letter-spacing:var(--mio-theme-v2-body-m-letter-spacing);line-height:var(--mio-theme-v2-body-m-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-body-m-font-variation-GRAD),"opsz" var(--mio-theme-v2-body-m-font-variation-opsz);padding:0 2px;color:var(--mio-theme-color-primary-container)}.cookie-notice[_ngcontent-urv-c34]   a[_ngcontent-urv-c34]:focus-visible{margin:-2px;border:2px solid var(--mio-theme-color-surface-0);border-radius:4px;outline:0;box-shadow:inset 0 0 0 2px var(--mio-theme-on-color-surface)}@media screen and (max-width: 960px){.cookie-notice[_ngcontent-urv-c34]{padding:14px 8px 14px 16px}}@media screen and (max-width: 600px){.cookie-notice[_ngcontent-urv-c34]{flex-flow:column;align-items:flex-end;justify-content:space-around;padding:16px 8px 8px 16px}}.cookie-notice-message[_ngcontent-urv-c34]   .cookie-notice-message-content[_ngcontent-urv-c34]{margin:0}@media screen and (min-width: 600px){.cookie-notice-message[_ngcontent-urv-c34]   .cookie-notice-message-content[_ngcontent-urv-c34]{margin-right:40px}}@media screen and (max-width: 600px){.cookie-notice-message[_ngcontent-urv-c34]   .cookie-notice-message-content[_ngcontent-urv-c34]{margin-bottom:8px}}.cookie-notice-confirm[_ngcontent-urv-c34]{border-radius:22px}.cookie-notice-confirm[_ngcontent-urv-c34]:hover{background:var(--mio-theme-color-inverse-surface)}.cookie-notice-confirm[_ngcontent-urv-c34]:focus-visible{margin:-2px;border:2px solid var(--mio-theme-color-surface-0);outline:0;box-shadow:inset 0 0 0 2px var(--mio-theme-on-color-surface)}mwc-button[_ngcontent-urv-c34]{--mdc-theme-primary: var(--mio-theme-color-primary-container);--mdc-theme-on-primary: transparent;--mdc-typography-button-white-space: nowrap;--mdc-shape-small: 100px;--mdc-button-horizontal-padding: 12px;--mdc-typography-button-font-size: var(--mio-theme-v2-label-l-font-size);--mdc-typography-button-font-weight: var(--mio-theme-v2-label-l-font-weight)}</style><style>[_nghost-urv-c27]{font-family:var(--mio-theme-v2-title-m-font-family);font-size:var(--mio-theme-v2-title-m-font-size);font-weight:var(--mio-theme-v2-title-m-font-weight);letter-spacing:var(--mio-theme-v2-title-m-letter-spacing);line-height:var(--mio-theme-v2-title-m-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-title-m-font-variation-GRAD),"opsz" var(--mio-theme-v2-title-m-font-variation-opsz);display:flex;position:relative;align-items:center;justify-content:center;width:48px;height:48px;border-radius:100px;color:var(--mio-theme-color-on-surface-variant);font-family:var(--mio-theme-display-font-family);cursor:pointer}[_nghost-urv-c27]:focus-visible{border:2px solid var(--mio-theme-color-on-surface);border-radius:24px;outline:0;box-shadow:inset 0 0 0 2px var(--mio-theme-color-surface-0)}[_nghost-urv-c27]:hover{background:var(--mio-theme-color-on-surface-variant-2);color:var(--mio-theme-color-on-surface)}[_nghost-urv-c27]:hover   .google-symbols[_ngcontent-urv-c27]{font-variation-settings:"wght" 600,"opsz" 24}[_nghost-urv-c27]:hover   .font-filled[_ngcontent-urv-c27]{font-variation-settings:"FILL" 1,"wght" 600,"opsz" 24}[_nghost-urv-c27]:active{background:var(--mio-theme-color-on-surface-variant-4);color:var(--mio-theme-color-on-surface)}[_nghost-urv-c27]:active   .google-symbols[_ngcontent-urv-c27]{font-variation-settings:"wght" 300,"opsz" 24}[_nghost-urv-c27]:active   .font-filled[_ngcontent-urv-c27]{font-variation-settings:"FILL" 1,"wght" 300,"opsz" 24}.google-symbols[_ngcontent-urv-c27]{font-variation-settings:"wght" 400,"opsz" 24;transition:font-variation-settings .2s cubic-bezier(.2,0,0,1);-webkit-user-select:none;-moz-user-select:none;user-select:none}.font-filled[_ngcontent-urv-c27]{font-variation-settings:"FILL" 1,"wght" 400,"opsz" 24}.material-icon[_ngcontent-urv-c27]{font-family:Google Material Icons}</style><style>[_nghost-urv-c29]{height:48px;transition:background-color .3s cubic-bezier(.2,0,0,1);border:2px solid transparent;border-radius:32px;outline:1px solid var(--mio-theme-color-utility-outline);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden}.is-dark-mode[_nghost-urv-c29]   .track[_ngcontent-urv-c29]{transform:translateY(-48px)}[_nghost-urv-c29]:focus-visible{margin:0 -2px;border:2px solid var(--mio-theme-color-on-surface);border-radius:24px;outline:0;background:var(--mio-theme-color-on-surface-variant-2);box-shadow:inset 0 0 0 2px var(--mio-theme-color-surface-0)}[_nghost-urv-c29]:hover{background:var(--mio-theme-color-on-surface-variant-2)}[_nghost-urv-c29]:hover   .google-symbols[_ngcontent-urv-c29]{font-variation-settings:"FILL" 1,"wght" 600,"opsz" 24}[_nghost-urv-c29]:active{background:var(--mio-theme-color-on-surface-variant-4)}[_nghost-urv-c29]:active   .google-symbols[_ngcontent-urv-c29]{font-variation-settings:"FILL" 1,"wght" 300,"opsz" 24}@media (forced-colors: active){[_nghost-urv-c29]{border:1px solid transparent;outline:none}[_nghost-urv-c29]:focus-visible{border:1px solid var(--mio-theme-color-on-surface);outline:3px solid Highlight}}[variant=compact][_nghost-urv-c29], [variant=compact][_nghost-urv-c29]   .switch[_ngcontent-urv-c29]{width:48px;height:48px}[variant=full][_nghost-urv-c29]   .switch[_ngcontent-urv-c29]{padding:12px 16px}[variant=full][_nghost-urv-c29]   .switch[_ngcontent-urv-c29]   .google-symbols[_ngcontent-urv-c29]{margin-right:8px}.switch[_ngcontent-urv-c29]{display:flex;align-items:center;justify-content:center;margin-top:0;margin-left:-2px;color:var(--mio-theme-color-on-surface-variant)}.dark-mode[_ngcontent-urv-c29]{margin-top:-2px}.track[_ngcontent-urv-c29]{transition:transform .3s cubic-bezier(.2,0,0,1)}.google-symbols[_ngcontent-urv-c29]{transition:font-variation-settings .2s cubic-bezier(.2,0,0,1)}</style><style>[_nghost-urv-c32]{z-index:4}.skip-link[_ngcontent-urv-c32]{position:absolute;width:1px;height:1px;white-space:nowrap;overflow:hidden;clip-path:polygon(0 0,0 0,0 0)}.google-symbols[_ngcontent-urv-c32]{transition:font-variation-settings .2s cubic-bezier(.2,0,0,1);font-size:22px}mwc-top-app-bar-fixed[_ngcontent-urv-c32]{--mdc-theme-primary: var(--mio-theme-color-surface-0);--mdc-theme-on-primary: var(--mio-theme-color-on-surface);--mdc-top-app-bar-fixed-box-shadow: 0}mwc-top-app-bar-fixed.search-page-empty[_ngcontent-urv-c32]{--mdc-theme-primary: var(--mio-theme-color-surface-2)}mwc-top-app-bar-fixed.search-page-result[_ngcontent-urv-c32]{--mdc-theme-primary: var(--mio-theme-color-background)}.home-page-link[_ngcontent-urv-c32]{display:flex;position:relative;align-items:center;justify-content:space-between;height:40px;margin-left:-14px;padding:0 11px 0 8px;border-radius:20px;color:var(--mio-theme-color-on-surface);font-family:var(--mio-theme-display-font-family);font-size:16px;font-weight:500;letter-spacing:0;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}@media screen and (max-width: 600px){.home-page-link[_ngcontent-urv-c32]{padding-right:8px}}.home-page-link[_ngcontent-urv-c32]   [_ngcontent-urv-c32]:nth-child(2){margin-left:16px}.home-page-link[_ngcontent-urv-c32]:focus{border:medium none currentColor;border:initial}.home-page-link[_ngcontent-urv-c32]:focus-visible{margin:0 0 0 -18px;border:2px solid var(--mio-theme-color-on-surface);outline:0;color:var(--mio-theme-color-on-surface);box-shadow:inset 0 0 0 2px var(--mio-theme-color-surface-0)}.home-page-link[_ngcontent-urv-c32]:hover{background:var(--mio-theme-color-on-surface-variant-2);color:var(--mio-theme-color-on-surface)}.home-page-link[_ngcontent-urv-c32]:hover   .google-symbols[_ngcontent-urv-c32]{font-variation-settings:"wght" 600,"opsz" 24}.home-page-link[_ngcontent-urv-c32]:active{background:var(--mio-theme-color-on-surface-variant-4);color:var(--mio-theme-color-on-surface)}.home-page-link[_ngcontent-urv-c32]:active   .google-symbols[_ngcontent-urv-c32]{font-variation-settings:"wght" 300,"opsz" 24}</style><style>[_nghost-urv-c23]{display:flex;flex-direction:column;align-items:center;width:100%;margin:8px 8px 0;color:var(--mio-theme-color-on-background)}main[_ngcontent-urv-c23]{display:flex;flex-direction:column;align-items:center;width:100%;outline:none}.content-container[_ngcontent-urv-c23]{width:100%;max-width:1200px}.category[_ngcontent-urv-c23]{padding:24px}.category[_ngcontent-urv-c23]   h2[_ngcontent-urv-c23]{font-family:var(--mio-theme-v2-display-l-font-family);font-size:var(--mio-theme-v2-display-l-font-size);font-weight:var(--mio-theme-v2-display-l-font-weight);letter-spacing:var(--mio-theme-v2-display-l-letter-spacing);line-height:var(--mio-theme-v2-display-l-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-display-l-font-variation-GRAD),"opsz" var(--mio-theme-v2-display-l-font-variation-opsz);margin:0 0 8px}@media screen and (max-width: 600px){.category[_ngcontent-urv-c23]   h2[_ngcontent-urv-c23]{font-family:var(--mio-theme-v2-display-s-font-family);font-size:var(--mio-theme-v2-display-s-font-size);font-weight:var(--mio-theme-v2-display-s-font-weight);letter-spacing:var(--mio-theme-v2-display-s-letter-spacing);line-height:var(--mio-theme-v2-display-s-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-display-s-font-variation-GRAD),"opsz" var(--mio-theme-v2-display-s-font-variation-opsz)}}@media screen and (min-width: 601px) and (max-width: 1294px){.category[_ngcontent-urv-c23]   h2[_ngcontent-urv-c23]{font-family:var(--mio-theme-v2-display-m-font-family);font-size:var(--mio-theme-v2-display-m-font-size);font-weight:var(--mio-theme-v2-display-m-font-weight);letter-spacing:var(--mio-theme-v2-display-m-letter-spacing);line-height:var(--mio-theme-v2-display-m-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-display-m-font-variation-GRAD),"opsz" var(--mio-theme-v2-display-m-font-variation-opsz)}}.category[_ngcontent-urv-c23]   p[_ngcontent-urv-c23]{font-family:var(--mio-theme-v2-title-l-font-family);font-size:var(--mio-theme-v2-title-l-font-size);font-weight:var(--mio-theme-v2-title-l-font-weight);letter-spacing:var(--mio-theme-v2-title-l-letter-spacing);line-height:var(--mio-theme-v2-title-l-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-title-l-font-variation-GRAD),"opsz" var(--mio-theme-v2-title-l-font-variation-opsz);max-width:760px;margin:0;color:var(--mio-theme-color-on-surface-variant)}@media screen and (max-width: 600px){.category[_ngcontent-urv-c23]   p[_ngcontent-urv-c23]{font-family:var(--mio-theme-v2-body-l-font-family);font-size:var(--mio-theme-v2-body-l-font-size);font-weight:var(--mio-theme-v2-body-l-font-weight);letter-spacing:var(--mio-theme-v2-body-l-letter-spacing);line-height:var(--mio-theme-v2-body-l-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-body-l-font-variation-GRAD),"opsz" var(--mio-theme-v2-body-l-font-variation-opsz)}}mio-header[_ngcontent-urv-c23]{width:100%;max-width:1760px;margin-bottom:56px}@media screen and (max-width: 960px){mio-header[_ngcontent-urv-c23]{margin-bottom:40px}}mio-card-set[_ngcontent-urv-c23]{margin-bottom:80px;padding-top:8px}@media screen and (max-width: 960px){mio-card-set[_ngcontent-urv-c23]{margin-bottom:64px}}</style><style>[_nghost-urv-c21]{display:block;color:var(--mio-theme-color-neutral-10)}.dark-mode[_nghost-urv-c21]{color:var(--mio-theme-color-neutral-90)}.primary-container[_ngcontent-urv-c21]{display:flex;margin:0;padding:56px;border-radius:24px;background:var(--mio-theme-color-surface-1);background-repeat:no-repeat;background-position:0 50%;background-size:cover}.primary-container.background[_ngcontent-urv-c21]   .wrapper[_ngcontent-urv-c21]{min-height:unset}.primary-container.background[_ngcontent-urv-c21]   .title[_ngcontent-urv-c21]{width:100%}.primary-container[_ngcontent-urv-c21], .split-asset-image[_ngcontent-urv-c21]{min-height:544px}@media screen and (max-width: 1294px){.primary-container[_ngcontent-urv-c21], .split-asset-image[_ngcontent-urv-c21]{min-height:unset}}header.homepage[_ngcontent-urv-c21]   .primary-container[_ngcontent-urv-c21]{min-height:calc(100vh - 64px)}.wrapper[_ngcontent-urv-c21]{display:flex;flex-direction:column;justify-content:center;max-width:840px;margin:0}.wrapper.text-sm[_ngcontent-urv-c21]   h1[_ngcontent-urv-c21]{font-family:var(--mio-theme-v2-display-m-font-family);font-size:var(--mio-theme-v2-display-m-font-size);font-weight:var(--mio-theme-v2-display-m-font-weight);letter-spacing:var(--mio-theme-v2-display-m-letter-spacing);line-height:var(--mio-theme-v2-display-m-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-display-m-font-variation-GRAD),"opsz" var(--mio-theme-v2-display-m-font-variation-opsz)}@media screen and (max-width: 600px){.wrapper.text-sm[_ngcontent-urv-c21]   h1[_ngcontent-urv-c21]{font-family:var(--mio-theme-v2-headline-l-font-family);font-size:var(--mio-theme-v2-headline-l-font-size);font-weight:var(--mio-theme-v2-headline-l-font-weight);letter-spacing:var(--mio-theme-v2-headline-l-letter-spacing);line-height:var(--mio-theme-v2-headline-l-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-headline-l-font-variation-GRAD),"opsz" var(--mio-theme-v2-headline-l-font-variation-opsz)}}@media screen and (min-width: 601px) and (max-width: 1294px){.wrapper.text-sm[_ngcontent-urv-c21]   h1[_ngcontent-urv-c21]{font-family:var(--mio-theme-v2-display-s-font-family);font-size:var(--mio-theme-v2-display-s-font-size);font-weight:var(--mio-theme-v2-display-s-font-weight);letter-spacing:var(--mio-theme-v2-display-s-letter-spacing);line-height:var(--mio-theme-v2-display-s-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-display-s-font-variation-GRAD),"opsz" var(--mio-theme-v2-display-s-font-variation-opsz)}}.wrapper.text-sm[_ngcontent-urv-c21]   .date[_ngcontent-urv-c21]{margin-bottom:16px}@media screen and (max-width: 600px){.wrapper.text-sm[_ngcontent-urv-c21]   h1[_ngcontent-urv-c21]{font-family:var(--mio-theme-v2-display-l-font-family);font-size:var(--mio-theme-v2-display-l-font-size);font-weight:var(--mio-theme-v2-display-l-font-weight);letter-spacing:var(--mio-theme-v2-display-l-letter-spacing);line-height:var(--mio-theme-v2-display-l-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-display-l-font-variation-GRAD),"opsz" var(--mio-theme-v2-display-l-font-variation-opsz)}}@media screen and (max-width: 600px) and (max-width: 600px){.wrapper.text-sm[_ngcontent-urv-c21]   h1[_ngcontent-urv-c21]{font-family:var(--mio-theme-v2-display-s-font-family);font-size:var(--mio-theme-v2-display-s-font-size);font-weight:var(--mio-theme-v2-display-s-font-weight);letter-spacing:var(--mio-theme-v2-display-s-letter-spacing);line-height:var(--mio-theme-v2-display-s-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-display-s-font-variation-GRAD),"opsz" var(--mio-theme-v2-display-s-font-variation-opsz)}}@media screen and (max-width: 600px) and (min-width: 601px) and (max-width: 1294px){.wrapper.text-sm[_ngcontent-urv-c21]   h1[_ngcontent-urv-c21]{font-family:var(--mio-theme-v2-display-m-font-family);font-size:var(--mio-theme-v2-display-m-font-size);font-weight:var(--mio-theme-v2-display-m-font-weight);letter-spacing:var(--mio-theme-v2-display-m-letter-spacing);line-height:var(--mio-theme-v2-display-m-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-display-m-font-variation-GRAD),"opsz" var(--mio-theme-v2-display-m-font-variation-opsz)}}@media screen and (min-width: 1295px){.wrapper.text-sm[_ngcontent-urv-c21]   .description[_ngcontent-urv-c21], .wrapper.text-sm[_ngcontent-urv-c21]   .date[_ngcontent-urv-c21]{font-family:var(--mio-theme-v2-title-m-font-family);font-size:var(--mio-theme-v2-title-m-font-size);font-weight:var(--mio-theme-v2-title-m-font-weight);letter-spacing:var(--mio-theme-v2-title-m-letter-spacing);line-height:var(--mio-theme-v2-title-m-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-title-m-font-variation-GRAD),"opsz" var(--mio-theme-v2-title-m-font-variation-opsz)}}@media screen and (min-width: 1295px) and (max-width: 600px){.wrapper.text-sm[_ngcontent-urv-c21]   .description[_ngcontent-urv-c21], .wrapper.text-sm[_ngcontent-urv-c21]   .date[_ngcontent-urv-c21]{font-family:var(--mio-theme-v2-title-m-font-family);font-size:var(--mio-theme-v2-title-m-font-size);font-weight:var(--mio-theme-v2-title-m-font-weight);letter-spacing:var(--mio-theme-v2-title-m-letter-spacing);line-height:var(--mio-theme-v2-title-m-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-title-m-font-variation-GRAD),"opsz" var(--mio-theme-v2-title-m-font-variation-opsz)}}@media screen and (min-width: 1295px) and (min-width: 601px) and (max-width: 1294px){.wrapper.text-sm[_ngcontent-urv-c21]   .description[_ngcontent-urv-c21], .wrapper.text-sm[_ngcontent-urv-c21]   .date[_ngcontent-urv-c21]{font-family:var(--mio-theme-v2-title-m-font-family);font-size:var(--mio-theme-v2-title-m-font-size);font-weight:var(--mio-theme-v2-title-m-font-weight);letter-spacing:var(--mio-theme-v2-title-m-letter-spacing);line-height:var(--mio-theme-v2-title-m-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-title-m-font-variation-GRAD),"opsz" var(--mio-theme-v2-title-m-font-variation-opsz)}}.primary-container[_ngcontent-urv-c21], .cards[_ngcontent-urv-c21], .resources[_ngcontent-urv-c21]{grid-column:span 1}@media screen and (max-width: 1294px){.primary-container[_ngcontent-urv-c21], .cards[_ngcontent-urv-c21], .resources[_ngcontent-urv-c21]{grid-column:span 2}}.full-width[_ngcontent-urv-c21]   .primary-container[_ngcontent-urv-c21]{grid-column:span 2}.content-centered[_ngcontent-urv-c21]   .primary-container[_ngcontent-urv-c21]{justify-content:center;text-align:center}.content-centered[_ngcontent-urv-c21]   .primary-container[_ngcontent-urv-c21]   .wrapper[_ngcontent-urv-c21]{max-width:1200px}.content-centered[_ngcontent-urv-c21]   .primary-container[_ngcontent-urv-c21]   mwc-button[_ngcontent-urv-c21]{--mdc-button-horizontal-padding: 48px;width:unset}.content-centered[_ngcontent-urv-c21]   .primary-container[_ngcontent-urv-c21]   .title[_ngcontent-urv-c21]{display:flex;flex-direction:column;align-items:center}.content-centered[_ngcontent-urv-c21]   .primary-container[_ngcontent-urv-c21]   .description[_ngcontent-urv-c21], .content-centered[_ngcontent-urv-c21]   .primary-container[_ngcontent-urv-c21]   .date[_ngcontent-urv-c21]{max-width:840px}.title[_ngcontent-urv-c21]{padding:0}.title[_ngcontent-urv-c21]   .description[_ngcontent-urv-c21]{font-family:var(--mio-theme-v2-title-l-font-family);font-size:var(--mio-theme-v2-title-l-font-size);font-weight:var(--mio-theme-v2-title-l-font-weight);letter-spacing:var(--mio-theme-v2-title-l-letter-spacing);line-height:var(--mio-theme-v2-title-l-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-title-l-font-variation-GRAD),"opsz" var(--mio-theme-v2-title-l-font-variation-opsz);margin:0}@media screen and (max-width: 600px){.title[_ngcontent-urv-c21]   .description[_ngcontent-urv-c21]{font-family:var(--mio-theme-v2-body-l-font-family);font-size:var(--mio-theme-v2-body-l-font-size);font-weight:var(--mio-theme-v2-body-l-font-weight);letter-spacing:var(--mio-theme-v2-body-l-letter-spacing);line-height:var(--mio-theme-v2-body-l-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-body-l-font-variation-GRAD),"opsz" var(--mio-theme-v2-body-l-font-variation-opsz)}}@media screen and (min-width: 601px) and (max-width: 1294px){.title[_ngcontent-urv-c21]   .description[_ngcontent-urv-c21]{font-family:var(--mio-theme-v2-title-l-font-family);font-size:var(--mio-theme-v2-title-l-font-size);font-weight:var(--mio-theme-v2-title-l-font-weight);letter-spacing:var(--mio-theme-v2-title-l-letter-spacing);line-height:var(--mio-theme-v2-title-l-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-title-l-font-variation-GRAD),"opsz" var(--mio-theme-v2-title-l-font-variation-opsz)}}h1[_ngcontent-urv-c21]{font-family:var(--mio-theme-v2-display-xl-font-family);font-size:var(--mio-theme-v2-display-xl-font-size);font-weight:var(--mio-theme-v2-display-xl-font-weight);letter-spacing:var(--mio-theme-v2-display-xl-letter-spacing);line-height:var(--mio-theme-v2-display-xl-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-display-xl-font-variation-GRAD),"opsz" var(--mio-theme-v2-display-xl-font-variation-opsz);margin:0 0 8px}@media screen and (max-width: 600px){h1[_ngcontent-urv-c21]{font-family:var(--mio-theme-v2-display-m-font-family);font-size:var(--mio-theme-v2-display-m-font-size);font-weight:var(--mio-theme-v2-display-m-font-weight);letter-spacing:var(--mio-theme-v2-display-m-letter-spacing);line-height:var(--mio-theme-v2-display-m-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-display-m-font-variation-GRAD),"opsz" var(--mio-theme-v2-display-m-font-variation-opsz)}}@media screen and (min-width: 601px) and (max-width: 1294px){h1[_ngcontent-urv-c21]{font-family:var(--mio-theme-v2-display-l-font-family);font-size:var(--mio-theme-v2-display-l-font-size);font-weight:var(--mio-theme-v2-display-l-font-weight);letter-spacing:var(--mio-theme-v2-display-l-letter-spacing);line-height:var(--mio-theme-v2-display-l-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-display-l-font-variation-GRAD),"opsz" var(--mio-theme-v2-display-l-font-variation-opsz)}}@media screen and (min-width: 601px){h1[_ngcontent-urv-c21]{font-family:var(--mio-theme-v2-hero-font-family);font-size:var(--mio-theme-v2-hero-font-size);font-weight:var(--mio-theme-v2-hero-font-weight);letter-spacing:var(--mio-theme-v2-hero-letter-spacing);line-height:var(--mio-theme-v2-hero-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-hero-font-variation-GRAD),"opsz" var(--mio-theme-v2-hero-font-variation-opsz)}}@media screen and (min-width: 601px) and (max-width: 600px){h1[_ngcontent-urv-c21]{font-family:var(--mio-theme-v2-display-l-font-family);font-size:var(--mio-theme-v2-display-l-font-size);font-weight:var(--mio-theme-v2-display-l-font-weight);letter-spacing:var(--mio-theme-v2-display-l-letter-spacing);line-height:var(--mio-theme-v2-display-l-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-display-l-font-variation-GRAD),"opsz" var(--mio-theme-v2-display-l-font-variation-opsz)}}@media screen and (min-width: 601px) and (min-width: 601px) and (max-width: 1294px){h1[_ngcontent-urv-c21]{font-family:var(--mio-theme-v2-display-xl-font-family);font-size:var(--mio-theme-v2-display-xl-font-size);font-weight:var(--mio-theme-v2-display-xl-font-weight);letter-spacing:var(--mio-theme-v2-display-xl-letter-spacing);line-height:var(--mio-theme-v2-display-xl-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-display-xl-font-variation-GRAD),"opsz" var(--mio-theme-v2-display-xl-font-variation-opsz)}}.wrapper[_ngcontent-urv-c21]:not(.text-sm)   h1[_ngcontent-urv-c21]{margin:0 0 16px}@media screen and (max-width: 1294px){.wrapper[_ngcontent-urv-c21]{max-width:none}}@media screen and (max-width: 600px){.primary-container[_ngcontent-urv-c21]{padding:32px}}h3[_ngcontent-urv-c21]{font-family:var(--mio-theme-v2-title-l-font-family);font-size:var(--mio-theme-v2-title-l-font-size);font-weight:var(--mio-theme-v2-title-l-font-weight);letter-spacing:var(--mio-theme-v2-title-l-letter-spacing);line-height:var(--mio-theme-v2-title-l-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-title-l-font-variation-GRAD),"opsz" var(--mio-theme-v2-title-l-font-variation-opsz);height:40px;margin:8px 0 8px 24px;color:var(--mio-theme-color-on-surface)}@media screen and (max-width: 600px){h3[_ngcontent-urv-c21]{font-family:var(--mio-theme-v2-body-l-font-family);font-size:var(--mio-theme-v2-body-l-font-size);font-weight:var(--mio-theme-v2-body-l-font-weight);letter-spacing:var(--mio-theme-v2-body-l-letter-spacing);line-height:var(--mio-theme-v2-body-l-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-body-l-font-variation-GRAD),"opsz" var(--mio-theme-v2-body-l-font-variation-opsz)}}@media screen and (min-width: 601px) and (max-width: 1294px){h3[_ngcontent-urv-c21]{font-family:var(--mio-theme-v2-title-l-font-family);font-size:var(--mio-theme-v2-title-l-font-size);font-weight:var(--mio-theme-v2-title-l-font-weight);letter-spacing:var(--mio-theme-v2-title-l-letter-spacing);line-height:var(--mio-theme-v2-title-l-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-title-l-font-variation-GRAD),"opsz" var(--mio-theme-v2-title-l-font-variation-opsz)}}.card-container[_ngcontent-urv-c21]{height:calc(100% - 56px)}header[_ngcontent-urv-c21]{display:grid;grid-gap:8px;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row}.split-asset-video[_ngcontent-urv-c21]{position:relative;overflow:hidden}@media screen and (max-width: 1294px){.split-asset-video[_ngcontent-urv-c21]{grid-column:span 2}}.split-asset-video[_ngcontent-urv-c21]   mio-video[_ngcontent-urv-c21]{height:100%}.split-asset-video[_ngcontent-urv-c21]     video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}@media screen and (max-width: 1294px){.split-asset-video[_ngcontent-urv-c21]     video{aspect-ratio:2/1}}.split-asset-video[_ngcontent-urv-c21]     .video-container button{z-index:2}.split-asset-video[_ngcontent-urv-c21]     figure{display:block;height:100%}.split-asset-video[_ngcontent-urv-c21]     figure div{height:100%;max-height:542px;border-radius:24px}.split-asset-image[_ngcontent-urv-c21]{display:flex;position:relative;justify-content:center;border:1px solid var(--mio-theme-color-surface-variant);border-radius:24px;background-repeat:no-repeat;background-size:cover;overflow:hidden}@media screen and (max-width: 1294px){.split-asset-image[_ngcontent-urv-c21]{padding-bottom:50%;grid-column:span 2}}.split-asset-image.position-right[_ngcontent-urv-c21]   .foreground[_ngcontent-urv-c21]{background-position-x:100%}.split-asset-image.position-left[_ngcontent-urv-c21]   .foreground[_ngcontent-urv-c21]{background-position-x:0%}.split-asset-image.position-top[_ngcontent-urv-c21]   .foreground[_ngcontent-urv-c21]{background-position-y:0%}.split-asset-image.position-bottom[_ngcontent-urv-c21]   .foreground[_ngcontent-urv-c21]{background-position-y:100%}.ctas[_ngcontent-urv-c21]{display:grid;width:100%;margin-top:24px;grid-gap:8px}.ctas[_ngcontent-urv-c21]   a[_ngcontent-urv-c21]{display:inline-block;transition:border-radius .2s cubic-bezier(.2,0,0,1);border-radius:48px;text-decoration:none;cursor:pointer}.ctas[_ngcontent-urv-c21]   a[_ngcontent-urv-c21]:focus-visible, .ctas[_ngcontent-urv-c21]   a[_ngcontent-urv-c21]:hover:focus-visible{margin:-2px;border:2px solid var(--mio-theme-color-on-surface);outline:0;box-shadow:inset 0 0 0 2px var(--mio-theme-color-surface-0)}.ctas[_ngcontent-urv-c21]   a[_ngcontent-urv-c21]:active, .ctas[_ngcontent-urv-c21]   a[_ngcontent-urv-c21]:active   .mio-button[_ngcontent-urv-c21], .ctas[_ngcontent-urv-c21]   a[_ngcontent-urv-c21]:active   .mio-button[_ngcontent-urv-c21]   .state-overlay[_ngcontent-urv-c21]{border-radius:16px}.ctas[_ngcontent-urv-c21]   a[_ngcontent-urv-c21]:active   .mio-button[_ngcontent-urv-c21]{font-variation-settings:"GRAD" -50}.ctas[_ngcontent-urv-c21]   a[_ngcontent-urv-c21]:active   .state-overlay[_ngcontent-urv-c21]{opacity:.12}.ctas[_ngcontent-urv-c21]   a[_ngcontent-urv-c21]:focus   .state-overlay[_ngcontent-urv-c21], .ctas[_ngcontent-urv-c21]   a[_ngcontent-urv-c21]:hover   .state-overlay[_ngcontent-urv-c21]{opacity:.08}.mio-button[_ngcontent-urv-c21]{font-family:var(--mio-theme-v2-headline-s-font-family);font-size:var(--mio-theme-v2-headline-s-font-size);font-weight:var(--mio-theme-v2-headline-s-font-weight);letter-spacing:var(--mio-theme-v2-headline-s-letter-spacing);line-height:var(--mio-theme-v2-headline-s-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-headline-s-font-variation-GRAD),"opsz" var(--mio-theme-v2-headline-s-font-variation-opsz);position:relative;width:100%;height:80px;padding:0 48px;transition:all .2s cubic-bezier(.2,0,0,1);border:0;border-radius:48px;background-color:var(--mio-theme-color-primary);color:var(--mio-theme-color-on-primary);white-space:nowrap;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden}@media screen and (max-width: 600px){.mio-button[_ngcontent-urv-c21]{font-family:var(--mio-theme-v2-headline-s-font-family);font-size:var(--mio-theme-v2-headline-s-font-size);font-weight:var(--mio-theme-v2-headline-s-font-weight);letter-spacing:var(--mio-theme-v2-headline-s-letter-spacing);line-height:var(--mio-theme-v2-headline-s-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-headline-s-font-variation-GRAD),"opsz" var(--mio-theme-v2-headline-s-font-variation-opsz)}}@media screen and (min-width: 601px) and (max-width: 1294px){.mio-button[_ngcontent-urv-c21]{font-family:var(--mio-theme-v2-headline-s-font-family);font-size:var(--mio-theme-v2-headline-s-font-size);font-weight:var(--mio-theme-v2-headline-s-font-weight);letter-spacing:var(--mio-theme-v2-headline-s-letter-spacing);line-height:var(--mio-theme-v2-headline-s-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-headline-s-font-variation-GRAD),"opsz" var(--mio-theme-v2-headline-s-font-variation-opsz)}}.mio-button[_ngcontent-urv-c21]   .label[_ngcontent-urv-c21]{position:relative;z-index:1}.mio-button[_ngcontent-urv-c21]   .state-overlay[_ngcontent-urv-c21]{position:absolute;top:0;left:0;width:100%;height:100%;transition:border-radius .2s cubic-bezier(.2,0,0,1);transition:opacity .2s cubic-bezier(.2,0,0,1);border-radius:48px;background:var(--mio-theme-color-white);opacity:0}@media (forced-colors: active){.mio-button[_ngcontent-urv-c21]{border:1px solid Highlight}}.foreground[_ngcontent-urv-c21]{display:flex;position:absolute;align-self:stretch;justify-content:center;width:100%;height:100%;background-repeat:no-repeat;background-position:50% 50%;background-size:contain}@media screen and (max-width: 1294px){.foreground.foreground-1x1[_ngcontent-urv-c21]{display:none}}@media screen and (min-width: 1295px){.foreground.foreground-2x1[_ngcontent-urv-c21]{display:none}}.split-asset-center[_nghost-urv-c21]   .split-asset-image[_ngcontent-urv-c21]{background-position:center center}</style><style>[_nghost-urv-c22]{display:flex;flex-direction:column;align-items:center;width:calc(100% - 16px);margin:120px 8px 0}@media screen and (max-width: 960px){[_nghost-urv-c22]{margin-top:120px}}.squiggle[_ngcontent-urv-c22]{position:relative;width:100%;height:8px}.squiggle[_ngcontent-urv-c22]   svg[_ngcontent-urv-c22]{position:absolute;top:0}.squiggle[_ngcontent-urv-c22]   svg[_ngcontent-urv-c22]   path[_ngcontent-urv-c22]{stroke:var(--mio-theme-color-surface-variant)}footer[_ngcontent-urv-c22]{padding:64px 40px}@media screen and (max-width: 600px){footer[_ngcontent-urv-c22]{padding:64px 24px}}@media screen and (min-width: 601px) and (max-width: 960px){footer[_ngcontent-urv-c22]{padding:64px 32px}}.about[_ngcontent-urv-c22]{display:grid;justify-content:space-between;max-width:1200px;grid-column-gap:20px;-moz-column-gap:20px;column-gap:20px;grid-template-columns:3fr 1fr 1fr 1fr}@media screen and (max-width: 960px){.about[_ngcontent-urv-c22]{grid-template-columns:1fr 1fr 1fr}}@media screen and (max-width: 960px){.about[_ngcontent-urv-c22]   .about-material[_ngcontent-urv-c22]{grid-column:span 3}}.about[_ngcontent-urv-c22]   .about-material[_ngcontent-urv-c22]   a[_ngcontent-urv-c22]:nth-child(1){text-decoration:none}.about[_ngcontent-urv-c22]   .google-symbols[_ngcontent-urv-c22]{color:var(--mio-theme-color-on-surface);font-size:40px}.about[_ngcontent-urv-c22]   p[_ngcontent-urv-c22]{font-family:var(--mio-theme-v2-body-l-font-family);font-size:var(--mio-theme-v2-body-l-font-size);font-weight:var(--mio-theme-v2-body-l-font-weight);letter-spacing:var(--mio-theme-v2-body-l-letter-spacing);line-height:var(--mio-theme-v2-body-l-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-body-l-font-variation-GRAD),"opsz" var(--mio-theme-v2-body-l-font-variation-opsz);margin-top:24px;margin-right:64px;color:var(--mio-theme-color-on-surface)}@media screen and (max-width: 600px){.about[_ngcontent-urv-c22]   p[_ngcontent-urv-c22]{font-family:var(--mio-theme-v2-body-m-font-family);font-size:var(--mio-theme-v2-body-m-font-size);font-weight:var(--mio-theme-v2-body-m-font-weight);letter-spacing:var(--mio-theme-v2-body-m-letter-spacing);line-height:var(--mio-theme-v2-body-m-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-body-m-font-variation-GRAD),"opsz" var(--mio-theme-v2-body-m-font-variation-opsz)}}@media screen and (min-width: 601px) and (max-width: 1294px){.about[_ngcontent-urv-c22]   p[_ngcontent-urv-c22]{font-family:var(--mio-theme-v2-body-l-font-family);font-size:var(--mio-theme-v2-body-l-font-size);font-weight:var(--mio-theme-v2-body-l-font-weight);letter-spacing:var(--mio-theme-v2-body-l-letter-spacing);line-height:var(--mio-theme-v2-body-l-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-body-l-font-variation-GRAD),"opsz" var(--mio-theme-v2-body-l-font-variation-opsz)}}@media screen and (max-width: 960px){.about[_ngcontent-urv-c22]   p[_ngcontent-urv-c22]{margin-right:0}}.about[_ngcontent-urv-c22]   ul[_ngcontent-urv-c22]{display:flex;flex-flow:column wrap;margin-top:24px;row-gap:20px}@media screen and (max-width: 960px){.about[_ngcontent-urv-c22]   ul[_ngcontent-urv-c22]{grid-column:span 1}}@media screen and (max-width: 600px){.about[_ngcontent-urv-c22]   ul[_ngcontent-urv-c22]{row-gap:24px}}.about[_ngcontent-urv-c22]   li[_ngcontent-urv-c22]{font-family:var(--mio-theme-v2-title-s-font-family);font-size:var(--mio-theme-v2-title-s-font-size);font-weight:var(--mio-theme-v2-title-s-font-weight);letter-spacing:var(--mio-theme-v2-title-s-letter-spacing);line-height:var(--mio-theme-v2-title-s-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-title-s-font-variation-GRAD),"opsz" var(--mio-theme-v2-title-s-font-variation-opsz);display:inline-block;color:var(--mio-theme-color-on-surface-variant)}@media screen and (max-width: 600px){.about[_ngcontent-urv-c22]   li[_ngcontent-urv-c22]{font-family:var(--mio-theme-v2-title-s-font-family);font-size:var(--mio-theme-v2-title-s-font-size);font-weight:var(--mio-theme-v2-title-s-font-weight);letter-spacing:var(--mio-theme-v2-title-s-letter-spacing);line-height:var(--mio-theme-v2-title-s-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-title-s-font-variation-GRAD),"opsz" var(--mio-theme-v2-title-s-font-variation-opsz)}}@media screen and (min-width: 601px) and (max-width: 1294px){.about[_ngcontent-urv-c22]   li[_ngcontent-urv-c22]{font-family:var(--mio-theme-v2-title-s-font-family);font-size:var(--mio-theme-v2-title-s-font-size);font-weight:var(--mio-theme-v2-title-s-font-weight);letter-spacing:var(--mio-theme-v2-title-s-letter-spacing);line-height:var(--mio-theme-v2-title-s-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-title-s-font-variation-GRAD),"opsz" var(--mio-theme-v2-title-s-font-variation-opsz)}}.about[_ngcontent-urv-c22]   li[_ngcontent-urv-c22]   h3[_ngcontent-urv-c22]{font-family:var(--mio-theme-v2-title-s-font-family);font-size:var(--mio-theme-v2-title-s-font-size);font-weight:var(--mio-theme-v2-title-s-font-weight);letter-spacing:var(--mio-theme-v2-title-s-letter-spacing);line-height:var(--mio-theme-v2-title-s-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-title-s-font-variation-GRAD),"opsz" var(--mio-theme-v2-title-s-font-variation-opsz);margin:0}@media screen and (max-width: 600px){.about[_ngcontent-urv-c22]   li[_ngcontent-urv-c22]   h3[_ngcontent-urv-c22]{font-family:var(--mio-theme-v2-title-s-font-family);font-size:var(--mio-theme-v2-title-s-font-size);font-weight:var(--mio-theme-v2-title-s-font-weight);letter-spacing:var(--mio-theme-v2-title-s-letter-spacing);line-height:var(--mio-theme-v2-title-s-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-title-s-font-variation-GRAD),"opsz" var(--mio-theme-v2-title-s-font-variation-opsz)}}@media screen and (min-width: 601px) and (max-width: 1294px){.about[_ngcontent-urv-c22]   li[_ngcontent-urv-c22]   h3[_ngcontent-urv-c22]{font-family:var(--mio-theme-v2-title-s-font-family);font-size:var(--mio-theme-v2-title-s-font-size);font-weight:var(--mio-theme-v2-title-s-font-weight);letter-spacing:var(--mio-theme-v2-title-s-letter-spacing);line-height:var(--mio-theme-v2-title-s-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-title-s-font-variation-GRAD),"opsz" var(--mio-theme-v2-title-s-font-variation-opsz)}}.about[_ngcontent-urv-c22]   a[_ngcontent-urv-c22]{font-family:var(--mio-theme-v2-title-m-font-family);font-size:var(--mio-theme-v2-title-m-font-size);font-weight:var(--mio-theme-v2-title-m-font-weight);letter-spacing:var(--mio-theme-v2-title-m-letter-spacing);line-height:var(--mio-theme-v2-title-m-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-title-m-font-variation-GRAD),"opsz" var(--mio-theme-v2-title-m-font-variation-opsz);display:flex;position:relative;width:-moz-fit-content;width:fit-content}@media screen and (max-width: 600px){.about[_ngcontent-urv-c22]   a[_ngcontent-urv-c22]{font-family:var(--mio-theme-v2-title-m-font-family);font-size:var(--mio-theme-v2-title-m-font-size);font-weight:var(--mio-theme-v2-title-m-font-weight);letter-spacing:var(--mio-theme-v2-title-m-letter-spacing);line-height:var(--mio-theme-v2-title-m-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-title-m-font-variation-GRAD),"opsz" var(--mio-theme-v2-title-m-font-variation-opsz)}}@media screen and (min-width: 601px) and (max-width: 1294px){.about[_ngcontent-urv-c22]   a[_ngcontent-urv-c22]{font-family:var(--mio-theme-v2-title-m-font-family);font-size:var(--mio-theme-v2-title-m-font-size);font-weight:var(--mio-theme-v2-title-m-font-weight);letter-spacing:var(--mio-theme-v2-title-m-letter-spacing);line-height:var(--mio-theme-v2-title-m-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-title-m-font-variation-GRAD),"opsz" var(--mio-theme-v2-title-m-font-variation-opsz)}}.legal[_ngcontent-urv-c22]{display:flex;flex-direction:row;margin-top:64px}@media screen and (max-width: 600px){.legal[_ngcontent-urv-c22]   .legal-link[_ngcontent-urv-c22]{-moz-column-gap:16px;column-gap:16px}}.legal[_ngcontent-urv-c22]   li[_ngcontent-urv-c22]{display:inline-block}.legal[_ngcontent-urv-c22]   .google-logo[_ngcontent-urv-c22]{margin-right:8px}.legal[_ngcontent-urv-c22]   .google-logo[_ngcontent-urv-c22]   a[_ngcontent-urv-c22]{display:block;width:73px;height:26px;margin:0}.legal[_ngcontent-urv-c22]   .google-logo[_ngcontent-urv-c22]   svg[_ngcontent-urv-c22]{fill:var(--mio-theme-color-on-surface)}.legal[_ngcontent-urv-c22]   a[_ngcontent-urv-c22]{color:var(--mio-theme-color-on-surface);white-space:nowrap}.legal[_ngcontent-urv-c22]   ul[_ngcontent-urv-c22]{display:flex;flex-wrap:wrap;row-gap:16px;-moz-column-gap:24px;column-gap:24px}.legal[_ngcontent-urv-c22]   ul[_ngcontent-urv-c22]   a[_ngcontent-urv-c22]{text-decoration:none}.legal[_ngcontent-urv-c22]   ul[_ngcontent-urv-c22]   a[_ngcontent-urv-c22]:hover{text-decoration:underline}ul[_ngcontent-urv-c22]   li[_ngcontent-urv-c22]{position:relative;width:-moz-fit-content;width:fit-content}</style><style>[_nghost-urv-c14]{--min-row-height: 320px;--stacked-col-max-height: 198px;display:grid;grid-gap:8px;gap:8px;grid-template-columns:repeat(6,1fr);grid-auto-flow:row;grid-auto-rows:minmax(var(--min-row-height),auto)}@media screen and (max-width: 1294px){[_nghost-urv-c14]{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width: 600px){[_nghost-urv-c14]{grid-template-columns:1fr}}.stack[_nghost-urv-c14]{grid-auto-rows:fit-content(var(--stacked-col-max-height));grid-template-columns:1fr}.stretch[_nghost-urv-c14]{grid-auto-rows:1fr;grid-template-columns:1fr}.col-2[_nghost-urv-c14]{grid-template-columns:repeat(2,1fr)}@media screen and (max-width: 960px){.col-2[_nghost-urv-c14]{grid-template-columns:1fr}}.grid-toggle-view[_nghost-urv-c14]{--min-row-height: 0;grid-template-columns:1fr}</style><style>mio-card-set.stack[_nghost-urv-c18], mio-card-set.stack   [_nghost-urv-c18], mio-card-set.stretch[_nghost-urv-c18], mio-card-set.stretch   [_nghost-urv-c18]{grid-column:span 1}mio-card-set.stack[_nghost-urv-c18]   a[_ngcontent-urv-c18], mio-card-set.stack   [_nghost-urv-c18]   a[_ngcontent-urv-c18], mio-card-set.stretch[_nghost-urv-c18]   a[_ngcontent-urv-c18], mio-card-set.stretch   [_nghost-urv-c18]   a[_ngcontent-urv-c18]{flex-direction:initial}mio-card-set.stack[_nghost-urv-c18]   a.thumbnail[_ngcontent-urv-c18], mio-card-set.stack   [_nghost-urv-c18]   a.thumbnail[_ngcontent-urv-c18], mio-card-set.stretch[_nghost-urv-c18]   a.thumbnail[_ngcontent-urv-c18], mio-card-set.stretch   [_nghost-urv-c18]   a.thumbnail[_ngcontent-urv-c18]{justify-content:space-between}mio-card-set.stack[_nghost-urv-c18]   .content-container[_ngcontent-urv-c18], mio-card-set.stack   [_nghost-urv-c18]   .content-container[_ngcontent-urv-c18], mio-card-set.stack[_nghost-urv-c18]   .description[_ngcontent-urv-c18], mio-card-set.stack   [_nghost-urv-c18]   .description[_ngcontent-urv-c18], mio-card-set.stretch[_nghost-urv-c18]   .content-container[_ngcontent-urv-c18], mio-card-set.stretch   [_nghost-urv-c18]   .content-container[_ngcontent-urv-c18], mio-card-set.stretch[_nghost-urv-c18]   .description[_ngcontent-urv-c18], mio-card-set.stretch   [_nghost-urv-c18]   .description[_ngcontent-urv-c18]{align-self:end;overflow:hidden}mio-card-set.stack[_nghost-urv-c18]   mio-thumbnail[_ngcontent-urv-c18] + mio-icon-badge[_ngcontent-urv-c18], mio-card-set.stack   [_nghost-urv-c18]   mio-thumbnail[_ngcontent-urv-c18] + mio-icon-badge[_ngcontent-urv-c18], mio-card-set.stretch[_nghost-urv-c18]   mio-thumbnail[_ngcontent-urv-c18] + mio-icon-badge[_ngcontent-urv-c18], mio-card-set.stretch   [_nghost-urv-c18]   mio-thumbnail[_ngcontent-urv-c18] + mio-icon-badge[_ngcontent-urv-c18]{right:200px}[badgeicon][_nghost-urv-c18]   mio-card-set.stack[_nghost-urv-c18]   mio-icon-badge[_ngcontent-urv-c18], mio-card-set.stack   [_nghost-urv-c18]   mio-icon-badge[_ngcontent-urv-c18], [badgeicon][_nghost-urv-c18]   mio-card-set.col-2[_nghost-urv-c18]   mio-icon-badge[_ngcontent-urv-c18], mio-card-set.col-2   [_nghost-urv-c18]   mio-icon-badge[_ngcontent-urv-c18], [badgeicon][_nghost-urv-c18]   mio-card-set.stretch[_nghost-urv-c18]   mio-icon-badge[_ngcontent-urv-c18], mio-card-set.stretch   [_nghost-urv-c18]   mio-icon-badge[_ngcontent-urv-c18]{--symbol-size: 24px;width:40px;height:40px}[badgeicon][_nghost-urv-c18]   mio-card-set.stack[_nghost-urv-c18]   .title[_ngcontent-urv-c18], mio-card-set.stack   [_nghost-urv-c18]   .title[_ngcontent-urv-c18], [badgeicon][_nghost-urv-c18]   mio-card-set.col-2[_nghost-urv-c18]   .title[_ngcontent-urv-c18], mio-card-set.col-2   [_nghost-urv-c18]   .title[_ngcontent-urv-c18], [badgeicon][_nghost-urv-c18]   mio-card-set.stretch[_nghost-urv-c18]   .title[_ngcontent-urv-c18], mio-card-set.stretch   [_nghost-urv-c18]   .title[_ngcontent-urv-c18]{margin-right:56px}@media screen and (max-width: 600px){[badgeicon][_nghost-urv-c18]   mio-card-set.stack[_nghost-urv-c18]   .title[_ngcontent-urv-c18], mio-card-set.stack   [_nghost-urv-c18]   .title[_ngcontent-urv-c18], [badgeicon][_nghost-urv-c18]   mio-card-set.col-2[_nghost-urv-c18]   .title[_ngcontent-urv-c18], mio-card-set.col-2   [_nghost-urv-c18]   .title[_ngcontent-urv-c18], [badgeicon][_nghost-urv-c18]   mio-card-set.stretch[_nghost-urv-c18]   .title[_ngcontent-urv-c18], mio-card-set.stretch   [_nghost-urv-c18]   .title[_ngcontent-urv-c18]{font-family:var(--mio-theme-v2-headline-s-font-family);font-size:var(--mio-theme-v2-headline-s-font-size);font-weight:var(--mio-theme-v2-headline-s-font-weight);letter-spacing:var(--mio-theme-v2-headline-s-letter-spacing);line-height:var(--mio-theme-v2-headline-s-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-headline-s-font-variation-GRAD),"opsz" var(--mio-theme-v2-headline-s-font-variation-opsz)}}[size=small][_nghost-urv-c18]   a[_ngcontent-urv-c18], [size=medium][_nghost-urv-c18]   a[_ngcontent-urv-c18], [size=large][_nghost-urv-c18]   a[_ngcontent-urv-c18]{flex-direction:column-reverse}[size=small][_nghost-urv-c18]   a.thumbnail[_ngcontent-urv-c18], [size=small][_nghost-urv-c18]   a.overline[_ngcontent-urv-c18], [size=small][_nghost-urv-c18]   a.align-text-top[_ngcontent-urv-c18], [size=medium][_nghost-urv-c18]   a.thumbnail[_ngcontent-urv-c18], [size=medium][_nghost-urv-c18]   a.overline[_ngcontent-urv-c18], [size=medium][_nghost-urv-c18]   a.align-text-top[_ngcontent-urv-c18], [size=large][_nghost-urv-c18]   a.thumbnail[_ngcontent-urv-c18], [size=large][_nghost-urv-c18]   a.overline[_ngcontent-urv-c18], [size=large][_nghost-urv-c18]   a.align-text-top[_ngcontent-urv-c18]{justify-content:start}[size=small][_nghost-urv-c18]{grid-column:span 2}[size=small][_nghost-urv-c18]   mio-icon-badge[_ngcontent-urv-c18]{--symbol-size: 32px;width:56px;height:56px}[size=medium][_nghost-urv-c18]{grid-column:span 3}[size=medium][_nghost-urv-c18]   mio-icon-badge[_ngcontent-urv-c18]{--symbol-size: 32px;width:64px;height:64px}[size=large][_nghost-urv-c18]{grid-column:span 4}[size=large][_nghost-urv-c18]   mio-icon-badge[_ngcontent-urv-c18]{--symbol-size: 40px;width:72px;height:72px}[_nghost-urv-c18]{vertical-align:middle;grid-column:span 6}@media screen and (max-width: 1294px){[_nghost-urv-c18]{grid-column:span 2}[size=xsmall][_nghost-urv-c18]{grid-column:span 1}[size=small][_nghost-urv-c18]{grid-column:span 1}[size=medium][_nghost-urv-c18]{grid-column:span 1}[size=large][_nghost-urv-c18]{grid-column:span 2}}@media screen and (max-width: 600px){[_nghost-urv-c18]{grid-column:span 1}[size=small][_nghost-urv-c18], [size=medium][_nghost-urv-c18], [size=large][_nghost-urv-c18]{grid-column:span 1}}a[_ngcontent-urv-c18]{display:inline-flex;position:relative;align-items:center;justify-content:space-between;width:100%;height:100%;padding:0;transition:border-radius .3s cubic-bezier(.2,0,0,1),background-color .3s cubic-bezier(.2,0,0,1);border-radius:24px;background:var(--mio-theme-color-surface-1);color:var(--mio-theme-color-on-surface);text-decoration:none;overflow:hidden;-webkit-tap-highlight-color:transparent;font-variation-settings:"GRAD" 0}a[_ngcontent-urv-c18]:hover{color:var(--mio-theme-color-on-secondary-container)}a[_ngcontent-urv-c18]:hover   .title[_ngcontent-urv-c18]{font-variation-settings:"GRAD" 50}a[_ngcontent-urv-c18]:hover   .overline[_ngcontent-urv-c18]{color:var(--mio-theme-color-on-secondary-container)}a[_ngcontent-urv-c18]:focus{margin:0;margin:initial;border:medium none currentColor;border:initial;border-radius:48px;outline:2px solid var(--mio-theme-color-on-surface);color:var(--mio-theme-color-on-secondary-container);box-shadow:none;box-shadow:initial}a[_ngcontent-urv-c18]:focus   .overline[_ngcontent-urv-c18]{color:var(--mio-theme-color-on-secondary-container)}a[_ngcontent-urv-c18]:active{border-radius:48px;outline:medium none invert;outline:initial;color:var(--mio-theme-color-on-secondary-container)}a[_ngcontent-urv-c18]:active   .title[_ngcontent-urv-c18]{font-variation-settings:"GRAD" -50}a[_ngcontent-urv-c18]:active   .overline[_ngcontent-urv-c18]{color:var(--mio-theme-color-on-secondary-container)}a[_ngcontent-urv-c18]:hover, a[_ngcontent-urv-c18]:focus, a[_ngcontent-urv-c18]:active{background:var(--mio-theme-color-secondary-container)}a[_ngcontent-urv-c18]:hover   .overline[_ngcontent-urv-c18], a[_ngcontent-urv-c18]:focus   .overline[_ngcontent-urv-c18], a[_ngcontent-urv-c18]:active   .overline[_ngcontent-urv-c18]{color:var(--mio-theme-color-on-secondary-container)}a[_ngcontent-urv-c18]:hover   .mio-title-button[_ngcontent-urv-c18], a[_ngcontent-urv-c18]:focus   .mio-title-button[_ngcontent-urv-c18], a[_ngcontent-urv-c18]:active   .mio-title-button[_ngcontent-urv-c18]{box-shadow:var(--mio-theme-elevation-1)}a[_ngcontent-urv-c18], a[_ngcontent-urv-c18]:hover, a[_ngcontent-urv-c18]:focus, a[_ngcontent-urv-c18]:active{background-repeat:no-repeat;background-position:50% 50%;background-size:cover}.scrim[_ngcontent-urv-c18]   .overline[_ngcontent-urv-c18], .scrim[_ngcontent-urv-c18]   .title[_ngcontent-urv-c18], .scrim[_ngcontent-urv-c18]   .description[_ngcontent-urv-c18], .scrim[_ngcontent-urv-c18]   .date[_ngcontent-urv-c18]{color:var(--mio-theme-color-on-secondary)}.scrim[_ngcontent-urv-c18]:before{display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--mio-theme-color-on-surface);opacity:.8;content:""}.scrim[_ngcontent-urv-c18]:hover:before{background-color:var(--mio-theme-color-on-secondary-container);opacity:.8}.scrim[_ngcontent-urv-c18]:focus:before{background-color:var(--mio-theme-color-on-secondary-container);opacity:.88}.scrim[_ngcontent-urv-c18]:active:before{background-color:var(--mio-theme-color-on-secondary-container);opacity:.88}.content-container[_ngcontent-urv-c18]{display:grid;position:relative;align-self:start;min-width:calc(100% - 48px);margin:24px;grid-gap:8px;gap:8px}.content-container[_ngcontent-urv-c18]   .card-tab[_ngcontent-urv-c18]{display:flex;flex-wrap:wrap;color:var(--mio-theme-color-secondary);text-transform:capitalize;gap:4px}.content-container[_ngcontent-urv-c18]   .card-tab[_ngcontent-urv-c18]   .google-symbols[_ngcontent-urv-c18]{width:16px;height:16px;margin-right:4px;margin-left:-4px}.overline[_ngcontent-urv-c18]{font-family:var(--mio-theme-v2-title-m-font-family);font-size:var(--mio-theme-v2-title-m-font-size);font-weight:var(--mio-theme-v2-title-m-font-weight);letter-spacing:var(--mio-theme-v2-title-m-letter-spacing);line-height:var(--mio-theme-v2-title-m-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-title-m-font-variation-GRAD),"opsz" var(--mio-theme-v2-title-m-font-variation-opsz);display:inline-flex;align-items:center;color:var(--mio-theme-color-on-surface-variant)}@media screen and (max-width: 600px){.overline[_ngcontent-urv-c18]{font-family:var(--mio-theme-v2-title-m-font-family);font-size:var(--mio-theme-v2-title-m-font-size);font-weight:var(--mio-theme-v2-title-m-font-weight);letter-spacing:var(--mio-theme-v2-title-m-letter-spacing);line-height:var(--mio-theme-v2-title-m-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-title-m-font-variation-GRAD),"opsz" var(--mio-theme-v2-title-m-font-variation-opsz)}}@media screen and (min-width: 601px) and (max-width: 1294px){.overline[_ngcontent-urv-c18]{font-family:var(--mio-theme-v2-title-m-font-family);font-size:var(--mio-theme-v2-title-m-font-size);font-weight:var(--mio-theme-v2-title-m-font-weight);letter-spacing:var(--mio-theme-v2-title-m-letter-spacing);line-height:var(--mio-theme-v2-title-m-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-title-m-font-variation-GRAD),"opsz" var(--mio-theme-v2-title-m-font-variation-opsz)}}.title[_ngcontent-urv-c18]{font-family:var(--mio-theme-v2-headline-s-font-family);font-size:var(--mio-theme-v2-headline-s-font-size);font-weight:var(--mio-theme-v2-headline-s-font-weight);letter-spacing:var(--mio-theme-v2-headline-s-letter-spacing);line-height:var(--mio-theme-v2-headline-s-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-headline-s-font-variation-GRAD),"opsz" var(--mio-theme-v2-headline-s-font-variation-opsz);transition:font-variation-settings .3s cubic-bezier(.2,0,0,1)}@media screen and (max-width: 600px){.title[_ngcontent-urv-c18]{font-family:var(--mio-theme-v2-headline-s-font-family);font-size:var(--mio-theme-v2-headline-s-font-size);font-weight:var(--mio-theme-v2-headline-s-font-weight);letter-spacing:var(--mio-theme-v2-headline-s-letter-spacing);line-height:var(--mio-theme-v2-headline-s-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-headline-s-font-variation-GRAD),"opsz" var(--mio-theme-v2-headline-s-font-variation-opsz)}}@media screen and (min-width: 601px) and (max-width: 1294px){.title[_ngcontent-urv-c18]{font-family:var(--mio-theme-v2-headline-s-font-family);font-size:var(--mio-theme-v2-headline-s-font-size);font-weight:var(--mio-theme-v2-headline-s-font-weight);letter-spacing:var(--mio-theme-v2-headline-s-letter-spacing);line-height:var(--mio-theme-v2-headline-s-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-headline-s-font-variation-GRAD),"opsz" var(--mio-theme-v2-headline-s-font-variation-opsz)}}.mio-title-button[_ngcontent-urv-c18]{font-family:var(--mio-theme-v2-body-m-font-family);font-size:var(--mio-theme-v2-body-m-font-size);font-weight:var(--mio-theme-v2-body-m-font-weight);letter-spacing:var(--mio-theme-v2-body-m-letter-spacing);line-height:var(--mio-theme-v2-body-m-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-body-m-font-variation-GRAD),"opsz" var(--mio-theme-v2-body-m-font-variation-opsz);display:flex;align-items:center;padding:6px 12px 6px 16px;transition:all .2s ease-in-out;border:none;border-radius:24px;background:var(--mio-theme-color-tertiary-container);color:var(--mio-theme-color-on-tertiary-container);text-align:left;cursor:pointer;gap:4px}@media screen and (max-width: 600px){.mio-title-button[_ngcontent-urv-c18]{font-family:var(--mio-theme-v2-body-m-font-family);font-size:var(--mio-theme-v2-body-m-font-size);font-weight:var(--mio-theme-v2-body-m-font-weight);letter-spacing:var(--mio-theme-v2-body-m-letter-spacing);line-height:var(--mio-theme-v2-body-m-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-body-m-font-variation-GRAD),"opsz" var(--mio-theme-v2-body-m-font-variation-opsz)}}@media screen and (min-width: 601px) and (max-width: 1294px){.mio-title-button[_ngcontent-urv-c18]{font-family:var(--mio-theme-v2-body-m-font-family);font-size:var(--mio-theme-v2-body-m-font-size);font-weight:var(--mio-theme-v2-body-m-font-weight);letter-spacing:var(--mio-theme-v2-body-m-letter-spacing);line-height:var(--mio-theme-v2-body-m-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-body-m-font-variation-GRAD),"opsz" var(--mio-theme-v2-body-m-font-variation-opsz)}}.mio-title-button[_ngcontent-urv-c18]:hover{box-shadow:var(--mio-theme-elevation-1)}.mio-title-button[_ngcontent-urv-c18]   .google-symbols[_ngcontent-urv-c18]{font-size:20px}.mio-title-row[_ngcontent-urv-c18]{display:flex;align-items:center;justify-content:space-between}.description[_ngcontent-urv-c18], .date[_ngcontent-urv-c18]{font-family:var(--mio-theme-v2-body-l-font-family);font-size:var(--mio-theme-v2-body-l-font-size);font-weight:var(--mio-theme-v2-body-l-font-weight);letter-spacing:var(--mio-theme-v2-body-l-letter-spacing);line-height:var(--mio-theme-v2-body-l-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-body-l-font-variation-GRAD),"opsz" var(--mio-theme-v2-body-l-font-variation-opsz);width:auto}@media screen and (max-width: 600px){.description[_ngcontent-urv-c18], .date[_ngcontent-urv-c18]{font-family:var(--mio-theme-v2-body-m-font-family);font-size:var(--mio-theme-v2-body-m-font-size);font-weight:var(--mio-theme-v2-body-m-font-weight);letter-spacing:var(--mio-theme-v2-body-m-letter-spacing);line-height:var(--mio-theme-v2-body-m-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-body-m-font-variation-GRAD),"opsz" var(--mio-theme-v2-body-m-font-variation-opsz)}}@media screen and (min-width: 601px) and (max-width: 1294px){.description[_ngcontent-urv-c18], .date[_ngcontent-urv-c18]{font-family:var(--mio-theme-v2-body-l-font-family);font-size:var(--mio-theme-v2-body-l-font-size);font-weight:var(--mio-theme-v2-body-l-font-weight);letter-spacing:var(--mio-theme-v2-body-l-letter-spacing);line-height:var(--mio-theme-v2-body-l-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-body-l-font-variation-GRAD),"opsz" var(--mio-theme-v2-body-l-font-variation-opsz)}}.rich-description[_ngcontent-urv-c18]{word-break:break-word}.title[_ngcontent-urv-c18], .description[_ngcontent-urv-c18], .date[_ngcontent-urv-c18]{color:var(--mio-theme-color-on-surface)}.date[_ngcontent-urv-c18]{margin-bottom:8px}mio-icon-badge[_ngcontent-urv-c18]{position:absolute;top:0;right:0;width:48px;height:48px;margin:24px;z-index:1}@media screen and (min-width: 601px){.feature-block[_nghost-urv-c18]{display:grid;grid-column:span 6;grid-gap:0;gap:0;padding:0}.feature-block[_nghost-urv-c18]   a[_ngcontent-urv-c18]{display:grid;flex-direction:row-reverse;grid-template-columns:1fr 1fr;grid-auto-flow:column}.feature-block[_nghost-urv-c18]   .content-container[_ngcontent-urv-c18]{min-width:calc(50% - 48px)}.feature-block[_nghost-urv-c18]   .content-container[_ngcontent-urv-c18], .feature-block[_nghost-urv-c18]   .description[_ngcontent-urv-c18]{display:grid;align-self:center;grid-template-columns:1fr}.feature-block[_nghost-urv-c18]   mio-thumbnail[_ngcontent-urv-c18]{order:-1;height:298px}}@media screen and (min-width: 601px) and (max-width: 1294px){.feature-block[_nghost-urv-c18]{grid-column:span 2}}</style><style>mio-card-set.stack[_nghost-urv-c16]   .thumb-container[_ngcontent-urv-c16], mio-card-set.stack   [_nghost-urv-c16]   .thumb-container[_ngcontent-urv-c16], mio-card-set.stretch[_nghost-urv-c16]   .thumb-container[_ngcontent-urv-c16], mio-card-set.stretch   [_nghost-urv-c16]   .thumb-container[_ngcontent-urv-c16]{width:200px}[size=small][_nghost-urv-c16], [size=medium][_nghost-urv-c16], [size=large][_nghost-urv-c16]{width:100%}[size=small][_nghost-urv-c16]   .thumb-container[_ngcontent-urv-c16], [size=medium][_nghost-urv-c16]   .thumb-container[_ngcontent-urv-c16], [size=large][_nghost-urv-c16]   .thumb-container[_ngcontent-urv-c16]{width:100%}[size=medium][_nghost-urv-c16]   .thumb-container[_ngcontent-urv-c16]{height:298px}[size=large][_nghost-urv-c16]   .thumb-container[_ngcontent-urv-c16]{height:398px}@media screen and (max-width: 1294px){[size=small][_nghost-urv-c16]   .thumb-container[_ngcontent-urv-c16]{height:200px}[size=medium][_nghost-urv-c16]   .thumb-container[_ngcontent-urv-c16]{height:298px}[size=large][_nghost-urv-c16]   .thumb-container[_ngcontent-urv-c16]{height:298px}}@media screen and (max-width: 600px){[size=small][_nghost-urv-c16]   .thumb-container[_ngcontent-urv-c16], [size=medium][_nghost-urv-c16]   .thumb-container[_ngcontent-urv-c16], [size=large][_nghost-urv-c16]   .thumb-container[_ngcontent-urv-c16]{height:200px}}.has-hover[_ngcontent-urv-c16]   .hover-image[_ngcontent-urv-c16]{opacity:1}.thumb-container[_ngcontent-urv-c16]{display:flex;position:relative;align-items:center;justify-content:center;min-width:200px;height:200px;border-radius:24px;background-color:var(--mio-theme-color-secondary-container);background-repeat:no-repeat;background-position:50%;background-size:cover;overflow:hidden;z-index:1}.thumb-container.blur-bg[_ngcontent-urv-c16]{position:relative}.thumb-container.blur-bg[_ngcontent-urv-c16]:after{display:block;position:absolute;width:100%;height:100%;animation:blur 3s;border-radius:24px;content:"";-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.foreground[_ngcontent-urv-c16]{width:100%;height:100%;background-repeat:no-repeat;background-position:50%;background-size:cover;backface-visibility:hidden}.hover-image[_ngcontent-urv-c16]{position:absolute;width:100%;height:100%;transform-style:preserve-3d;transition:opacity .3s cubic-bezier(.2,0,0,1);background-repeat:no-repeat;background-position:50%;background-size:cover;opacity:0;z-index:-1}.grid-thumbnail-view[_ngcontent-urv-c16]{display:none}.hidden-img[_ngcontent-urv-c16]{position:absolute;width:1px;height:1px;visibility:hidden;z-index:-1}@keyframes blur{0%{filter:blur(50px)}to{filter:blur(8px)}}</style><style>[_nghost-urv-c20]{--mio-theme-light-outline: #747775;--mio-theme-light-surface-variant: #f2f2f2;--mio-theme-dark-surface-variant: #44474614;--mio-theme-secondary-container: #3c4043;display:block}video[_ngcontent-urv-c20]{max-width:100%;height:auto;background-color:var(--mio-theme-color-inverse-on-surface)}.video-container[_ngcontent-urv-c20]{display:flex;position:relative}.video-container[_ngcontent-urv-c20]   button[_ngcontent-urv-c20]{display:flex;position:absolute;right:0;bottom:0;flex-shrink:0;align-items:center;justify-content:center;width:40px;min-width:0;height:40px;margin:4px;padding:0;transition-duration:.2s;transition-property:transform;transition-timing-function:linear;border:none;border-radius:50%;background:var(--mio-theme-color-tertiary-container);color:var(--mio-theme-color-on-surface-variant);line-height:40px;cursor:pointer;box-shadow:var(--mio-theme-elevation-1)}.video-container[_ngcontent-urv-c20]   button[_ngcontent-urv-c20]:focus-visible, .video-container[_ngcontent-urv-c20]   button[_ngcontent-urv-c20]:hover:focus-visible{border:2px solid var(--mio-theme-color-on-surface);outline:0;box-shadow:inset 0 0 0 2px var(--mio-theme-color-surface-0)}.video-container[_ngcontent-urv-c20]   button[_ngcontent-urv-c20]:hover, .video-container[_ngcontent-urv-c20]   button.hovered[_ngcontent-urv-c20]{color:var(--mio-theme-color-on-tertiary-container);filter:brightness(.95)}.video-container[_ngcontent-urv-c20]   button[_ngcontent-urv-c20]:active{color:var(--mio-theme-color-on-tertiary-container)}.video-container[_ngcontent-urv-c20]   .paused[_ngcontent-urv-c20]{background:var(--mio-theme-color-primary-container);color:var(--mio-theme-color-on-primary-container)}.video-container[_ngcontent-urv-c20]   .paused[_ngcontent-urv-c20]   .google-symbols[_ngcontent-urv-c20]{color:var(--mio-theme-color-on-tertiary-container);font-variation-settings:"wght" 600,"opsz" 24}.video-container[_ngcontent-urv-c20]   .paused[_ngcontent-urv-c20]:hover, .video-container[_ngcontent-urv-c20]   .paused.hovered[_ngcontent-urv-c20]{border:transparent;color:var(--mio-theme-color-on-tertiary-container);filter:brightness(.95)}.google-symbols[_ngcontent-urv-c20]{font-family:Google Symbols;font-size:20px}</style><style>.full-width[_nghost-urv-c19]   figure[_ngcontent-urv-c19]{width:100%}figure[_ngcontent-urv-c19]{display:inline-flex;flex-direction:column}figure[_ngcontent-urv-c19]   div[_ngcontent-urv-c19]{display:flex;flex-direction:column;border-radius:16px;overflow:hidden}figure[_ngcontent-urv-c19]   div.with-modifier[_ngcontent-urv-c19]{border-radius:16px 16px 2px 2px}figure[_ngcontent-urv-c19]   div.bordered[_ngcontent-urv-c19]{border:1px solid var(--mio-theme-color-surface-variant)}figcaption[_ngcontent-urv-c19]{display:flex;flex-direction:column;white-space:break-spaces}.caption[_ngcontent-urv-c19]{font-family:var(--mio-theme-v2-body-m-font-family);font-size:var(--mio-theme-v2-body-m-font-size);font-weight:var(--mio-theme-v2-body-m-font-weight);letter-spacing:var(--mio-theme-v2-body-m-letter-spacing);line-height:var(--mio-theme-v2-body-m-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-body-m-font-variation-GRAD),"opsz" var(--mio-theme-v2-body-m-font-variation-opsz);margin:8px 10px 0;color:var(--mio-theme-color-on-surface-variant)}@media screen and (max-width: 600px){.caption[_ngcontent-urv-c19]{font-family:var(--mio-theme-v2-body-m-font-family);font-size:var(--mio-theme-v2-body-m-font-size);font-weight:var(--mio-theme-v2-body-m-font-weight);letter-spacing:var(--mio-theme-v2-body-m-letter-spacing);line-height:var(--mio-theme-v2-body-m-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-body-m-font-variation-GRAD),"opsz" var(--mio-theme-v2-body-m-font-variation-opsz)}}@media screen and (min-width: 601px) and (max-width: 1294px){.caption[_ngcontent-urv-c19]{font-family:var(--mio-theme-v2-body-m-font-family);font-size:var(--mio-theme-v2-body-m-font-size);font-weight:var(--mio-theme-v2-body-m-font-weight);letter-spacing:var(--mio-theme-v2-body-m-letter-spacing);line-height:var(--mio-theme-v2-body-m-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-body-m-font-variation-GRAD),"opsz" var(--mio-theme-v2-body-m-font-variation-opsz)}}.caption-label[_ngcontent-urv-c19]{font-family:var(--mio-theme-v2-title-s-font-family);font-size:var(--mio-theme-v2-title-s-font-size);font-weight:var(--mio-theme-v2-title-s-font-weight);letter-spacing:var(--mio-theme-v2-title-s-letter-spacing);line-height:var(--mio-theme-v2-title-s-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-title-s-font-variation-GRAD),"opsz" var(--mio-theme-v2-title-s-font-variation-opsz);display:flex;align-items:center;margin-top:4px;padding:8px;border-radius:2px 2px 16px 16px;white-space:nowrap}@media screen and (max-width: 600px){.caption-label[_ngcontent-urv-c19]{font-family:var(--mio-theme-v2-title-s-font-family);font-size:var(--mio-theme-v2-title-s-font-size);font-weight:var(--mio-theme-v2-title-s-font-weight);letter-spacing:var(--mio-theme-v2-title-s-letter-spacing);line-height:var(--mio-theme-v2-title-s-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-title-s-font-variation-GRAD),"opsz" var(--mio-theme-v2-title-s-font-variation-opsz)}}@media screen and (min-width: 601px) and (max-width: 1294px){.caption-label[_ngcontent-urv-c19]{font-family:var(--mio-theme-v2-title-s-font-family);font-size:var(--mio-theme-v2-title-s-font-size);font-weight:var(--mio-theme-v2-title-s-font-weight);letter-spacing:var(--mio-theme-v2-title-s-letter-spacing);line-height:var(--mio-theme-v2-title-s-line-height);font-variation-settings:"GRAD" var(--mio-theme-v2-title-s-font-variation-GRAD),"opsz" var(--mio-theme-v2-title-s-font-variation-opsz)}}.caption-label.caution[_ngcontent-urv-c19]{background-color:var(--mio-theme-color-extensions-caution-container);color:var(--mio-theme-color-extensions-on-caution-container)}.caption-label.do[_ngcontent-urv-c19]{background-color:var(--mio-theme-color-extensions-do-container);color:var(--mio-theme-color-extensions-on-do-container)}.caption-label.dont[_ngcontent-urv-c19]{background-color:var(--mio-theme-color-extensions-dont-container);color:var(--mio-theme-color-extensions-on-dont-container)}.caption-label[_ngcontent-urv-c19]   .google-symbols[_ngcontent-urv-c19]{margin-right:4px;font-family:Google Symbols;font-size:20px}</style><script type="text/javascript" charset="UTF-8" src="https://apis.google.com/js/client.js" gapi_processed="true"></script></head>
 <body class="ng-tns-0-1">
  <mio-root _nghost-urv-c35="" ng-version="13.4.0" class=""><div _ngcontent-urv-c35="" class="navigation"><a _ngcontent-urv-c35="" aria-label="skip to main content" class="skip-link" href="/components#main_content"> Skip to main content </a><!----><mio-navigation-drawer _ngcontent-urv-c35="" _nghost-urv-c33="" class="ng-tns-c33-0" style="--vh: 6px;"><mwc-drawer _ngcontent-urv-c33="" class="ng-tns-c33-0" type="modal"><nav _ngcontent-urv-c33="" aria-label="navigation drawer" id="navigationDrawer" class="ng-tns-c33-0"><div _ngcontent-urv-c33="" class="nav-drawer-section ng-tns-c33-0"><mio-icon-button _ngcontent-urv-c33="" mioanalyticstracking="" mioripple="" icon="menu_open" _nghost-urv-c27="" class="ng-tns-c33-0 ng-star-inserted" role="button" aria-label="close menu" tabindex="0"><span _ngcontent-urv-c27="" aria-hidden="true" class="google-symbols btn-icon ally-container ng-star-inserted">menu_open</span><!----><!----><div class="ripple"></div></mio-icon-button><div _ngcontent-urv-c33="" class="topic-wrapper ng-tns-c33-0 ng-trigger ng-trigger-fadeInOutSectionModal ng-star-inserted"><!----><a _ngcontent-urv-c33="" mioanalyticstracking="" routerlinkactive="" class="item ng-tns-c33-0 element-hide ng-star-inserted" tabindex="-1" aria-label="Search" href="/search.html" style=""><span _ngcontent-urv-c33="" class="section-icon google-symbols ng-tns-c33-0">search</span><div _ngcontent-urv-c33="" class="label ng-tns-c33-0">Search</div></a><!----><!----><!----><!----><a _ngcontent-urv-c33="" mioanalyticstracking="" routerlinkactive="" class="item ng-tns-c33-0 ng-star-inserted" tabindex="-1" aria-label="Home" href="/" style=""><span _ngcontent-urv-c33="" class="section-icon google-symbols ng-tns-c33-0">material_design</span><div _ngcontent-urv-c33="" class="label ng-tns-c33-0">Home</div></a><!----><!----><!----><!----><a _ngcontent-urv-c33="" mioanalyticstracking="" routerlinkactive="" class="item ng-tns-c33-0 ng-star-inserted" tabindex="-1" aria-label="Get started" href="/get-started" style=""><span _ngcontent-urv-c33="" class="section-icon google-symbols ng-tns-c33-0">apps</span><div _ngcontent-urv-c33="" class="label ng-tns-c33-0">Get started</div></a><!----><!----><!----><div _ngcontent-urv-c33="" mioanalyticstracking="" role="button" class="item ng-tns-c33-0 ng-star-inserted" tabindex="-1" aria-label="Develop" style=""><span _ngcontent-urv-c33="" class="section-icon google-symbols ng-tns-c33-0">code</span><div _ngcontent-urv-c33="" class="label ng-tns-c33-0">Develop</div><span _ngcontent-urv-c33="" class="arrow-right-icon google-symbols ng-tns-c33-0">arrow_forward</span></div><!----><!----><!----><!----><div _ngcontent-urv-c33="" mioanalyticstracking="" role="button" class="item ng-tns-c33-0 ng-star-inserted" tabindex="-1" aria-label="Foundations" style=""><span _ngcontent-urv-c33="" class="section-icon google-symbols ng-tns-c33-0">book</span><div _ngcontent-urv-c33="" class="label ng-tns-c33-0">Foundations</div><span _ngcontent-urv-c33="" class="arrow-right-icon google-symbols ng-tns-c33-0">arrow_forward</span></div><!----><!----><!----><!----><div _ngcontent-urv-c33="" mioanalyticstracking="" role="button" class="item ng-tns-c33-0 ng-star-inserted" tabindex="-1" aria-label="Styles" style=""><span _ngcontent-urv-c33="" class="section-icon google-symbols ng-tns-c33-0">palette</span><div _ngcontent-urv-c33="" class="label ng-tns-c33-0">Styles</div><span _ngcontent-urv-c33="" class="arrow-right-icon google-symbols ng-tns-c33-0">arrow_forward</span></div><!----><!----><!----><!----><div _ngcontent-urv-c33="" mioanalyticstracking="" role="button" class="item ng-tns-c33-0 active ng-star-inserted" tabindex="0" aria-label="Components" style=""><span _ngcontent-urv-c33="" class="section-icon google-symbols ng-tns-c33-0">add_circle</span><div _ngcontent-urv-c33="" class="label ng-tns-c33-0">Components</div><span _ngcontent-urv-c33="" class="arrow-right-icon google-symbols ng-tns-c33-0">arrow_forward</span></div><!----><!----><!----><!----><!----><a _ngcontent-urv-c33="" mioanalyticstracking="" routerlinkactive="" class="item ng-tns-c33-0 ng-star-inserted" tabindex="-1" aria-label="Blog" href="/blog" style=""><span _ngcontent-urv-c33="" class="section-icon google-symbols ng-tns-c33-0">pages</span><div _ngcontent-urv-c33="" class="label ng-tns-c33-0">Blog</div></a><!----><!----><!----><!----></div><!----><!----><!----><!----><!----><!----></div><div _ngcontent-urv-c33="" class="dark-mode-switch-container ng-tns-c33-0 ng-star-inserted"><mio-dark-mode-switch _ngcontent-urv-c33="" variant="full" class="ng-tns-c33-0" _nghost-urv-c29="" role="switch" aria-checked="false" aria-label="Switch to Dark Mode" tabindex="0"><!----><div _ngcontent-urv-c29="" class="dark-mode switch ng-star-inserted"><span _ngcontent-urv-c29="" aria-hidden="true" class="google-symbols">dark_mode</span> Switch to dark mode </div><!----><!----><!----><!----></mio-dark-mode-switch></div><!----></nav><div _ngcontent-urv-c33="" slot="appContent" class="page-content page-content-height ng-tns-c33-0"><mio-toolbar _ngcontent-urv-c33="" role="banner" _nghost-urv-c32="" class="ng-tns-c33-0 ng-star-inserted"><a _ngcontent-urv-c32="" aria-label="skip to main content" class="skip-link" href="/components#main_content"></a><mwc-top-app-bar-fixed _ngcontent-urv-c32="" class=""><mio-icon-button _ngcontent-urv-c32="" slot="navigationIcon" mioanalyticstracking="" mioripple="" _nghost-urv-c27="" role="button" aria-label="open menu" tabindex="0"><span _ngcontent-urv-c27="" aria-hidden="true" class="google-symbols btn-icon ally-container ng-star-inserted">menu</span><!----><!----><div class="ripple"></div></mio-icon-button><a _ngcontent-urv-c32="" mioanalyticstracking="" analyticslabel="/" slot="title" routerlink="/" aria-label="go to Material Design 3 homepage" class="home-page-link ally-container ally-container-align" href="/"><span _ngcontent-urv-c32="" class="google-symbols">material_design</span><span _ngcontent-urv-c32="" class="ng-star-inserted">Material Design 3</span><!----></a><mio-icon-button _ngcontent-urv-c32="" slot="actionItems" mioripple="" _nghost-urv-c27="" role="button" aria-label="search" tabindex="0" class="ng-star-inserted"><span _ngcontent-urv-c27="" aria-hidden="true" class="google-symbols btn-icon ally-container ng-star-inserted">search</span><!----><!----><div class="ripple"></div></mio-icon-button><!----></mwc-top-app-bar-fixed></mio-toolbar><!----><div _ngcontent-urv-c35="" class="content-container ng-star-inserted"><router-outlet _ngcontent-urv-c35=""></router-outlet><mio-components-landing-page _nghost-urv-c23="" class="ng-tns-c23-2 ng-star-inserted"><div _ngcontent-urv-c23="" class="animation-container ng-tns-c23-2 ng-trigger ng-trigger-fadeIn ng-star-inserted"><main _ngcontent-urv-c23="" id="main_content" role="main" aria-label="Main Content" tabindex="-1" class="ng-tns-c23-2"><mio-header _ngcontent-urv-c23="" class="ng-tns-c23-2" _nghost-urv-c21=""><header _ngcontent-urv-c21=""><div _ngcontent-urv-c21="" class="primary-container description"><div _ngcontent-urv-c21="" class="wrapper"><!----><div _ngcontent-urv-c21="" class="title"><h1 _ngcontent-urv-c21="" tabindex="-1">Components</h1><div _ngcontent-urv-c21="" class="description ng-star-inserted" style="">Components are interactive building blocks for creating a user interface. They can be organized into categories based on their purpose: Action, containment, communication, navigation, selection, and text input.</div><!----></div><!----></div></div><!----><!----><div _ngcontent-urv-c21="" class="split-asset-video ng-star-inserted" style=""><mio-video _ngcontent-urv-c21="" _nghost-urv-c20=""><mio-figure _ngcontent-urv-c20="" _nghost-urv-c19=""><figure _ngcontent-urv-c19=""><div _ngcontent-urv-c19=""><div _ngcontent-urv-c20="" class="video-container"><video _ngcontent-urv-c20="" preload="auto" autoplay="" loop="" playsinline="true"><source _ngcontent-urv-c20="" src="https://kstatic.googleusercontent.com/files/957183d66ec5fd675f9aad6974f12fcf231bb370922c3719b74ee95d5b9def6efe2f8ebdff687440c688fd14ffc3da460013010ad90dffd34e05b525acbb65f8"></video><button _ngcontent-urv-c20="" mioripple="" mioanalyticstracking="" id="btnToggleVideo" class="ally-container ally-container-align ng-star-inserted" aria-label="Pause Video"><span _ngcontent-urv-c20="" class="google-symbols">pause</span><div class="ripple"></div></button><!----></div></div><!----></figure></mio-figure></mio-video></div><!----></header></mio-header><div _ngcontent-urv-c23="" class="content-container ng-tns-c23-2"><div _ngcontent-urv-c23="" class="category ng-tns-c23-2 ng-star-inserted" style=""><h2 _ngcontent-urv-c23="" class="ng-tns-c23-2">Actions</h2><p _ngcontent-urv-c23="" class="ng-tns-c23-2">Action components help people achieve an aim.</p></div><mio-card-set _ngcontent-urv-c23="" _nghost-urv-c14="" class="ng-tns-c23-2 ng-star-inserted" style=""><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 action ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/buttons" target="_self" aria-label="Common Buttons component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Common Buttons</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Common buttons prompt most actions in a UI</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/VReYP2JWh78Mz_cj03k17AF9feV2hGUyhbOv0vPpEmRHGNajc-cMbHujgQXi21G24yEFK5RRNmirQQ3gjqVyzOA3yw7BZRpPw1ToR7X3c26gLzFdbg=s0&quot;); background-position: center top;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-action-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 action ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/extended-fab" target="_self" aria-label="Extended FAB component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Extended FAB</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Extended floating action buttons (extended FABs) help people take primary actions</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/icezCBGgwcgzDvvqwHASxbgwCOL4DFXtNI0FMZonsYilQlGk44VPmg-HnsxlSQPhQAg5DnOc96adNmJ7l5OS528tyg5LphrxRr67vbNxYZbvKL6njhE=s0&quot;); background-position: center center;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-action-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 action ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/floating-action-button" target="_self" aria-label="Floating action buttons component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Floating action buttons</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Floating action buttons (FABs) help people take primary actions</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/FAKL8WWz2EgU0zXGd74OapBcO_udxkxNHo5uzWL91qX5K_ayHhCtaJThP7LIA5VYaLCh056u58oB_1EjnkpS_xfxnRzjzBceXIc1dT172DiIcb5FQ8E=s0&quot;); background-position: center center;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-action-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 action ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/icon-buttons" target="_self" aria-label="Icon buttons component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Icon buttons</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Icon buttons help people take minor actions with one tap</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/Xvelzzzuz1UtnWQ8l85p6xuYAXTCotbNYqFHRnPl4tUZTdSZuoMGdyo0w3-eY5MWZY8fW-IZOmzAKzu6UG_9BpIfeYzUhht1JMaiFk8v8TofDvgf9Q=s0&quot;); background-position: center bottom;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-action-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 action ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/segmented-buttons" target="_self" aria-label="Segmented button component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Segmented button</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Segmented buttons help people select options, switch views, or sort elements</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/GbJR-Tuk8k6rpR7-ZwPyLujqvNqTqyi1TDSv6xWS8h3FKYnJDezpxPtQQDX7G9ppiYsooOD8k751wE--lJCljPQAGw6zywyjf-OczyZcdvqPMrh7N2Gt=s0&quot;); background-position: center bottom;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-action-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><!----></mio-card-set><!----><div _ngcontent-urv-c23="" class="category ng-tns-c23-2 ng-star-inserted" style=""><h2 _ngcontent-urv-c23="" class="ng-tns-c23-2">Communication</h2><p _ngcontent-urv-c23="" class="ng-tns-c23-2">Communication components provide helpful information.</p></div><mio-card-set _ngcontent-urv-c23="" _nghost-urv-c14="" class="ng-tns-c23-2 ng-star-inserted" style=""><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 communication ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/badges" target="_self" aria-label="Badges component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Badges</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Badges show notifications, counts, or status information on navigation items and icons</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/ZAEwaQxWLuyoeWeJF0ZbhZsGBD89Bv2wJFA81uh64qPtjpiujqKK-6XK_5EBZnRtcJH1tQGzaOVxXhI3wDY6r8zvs_8_RJI8yUypknOKSdV4a-vJqpLs=s0&quot;); background-position: center center;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-communication-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 communication ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/progress-indicators" target="_self" aria-label="Progress indicators component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Progress indicators</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Progress indicators show the status of a process in real time</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/Bd1UEHXUxzaeWRioaL1tKUyoPUqEQhpJs0TNxBfp0Q0LSzKke3F0VrOiCbC7xwwYBO_QyJXOi_mO3hGsf-pF4ai0qKU_rR8qF-zzhItcLljAQofNHSg=s0&quot;); background-position: center center;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-communication-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 communication ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/snackbar" target="_self" aria-label="Snackbar component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Snackbar</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Snackbars show short updates about app processes at the bottom of the screen</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/GG3IePsK3D7hGm0z8i66aLh-m-2bSrDgtShMG32JIZTyHzqr4Z-AyLYUe-clzL95tpAJvoBnQo-uvISdSw454DdKHbQJhaH1NXxNfQHr4NtPqQduCPw=s0&quot;); background-position: center center;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-communication-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 communication ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/tooltips" target="_self" aria-label="Tooltips component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Tooltips</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Tooltips display brief labels or messages</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/6zQzHGeVuv--CdfzBrEyAdWQXU97PiIn1tUHAL74c-L7dxtvu1Zd623GCBlNxePg5mIIdebHz0_Xy3DZSHI13es3yJnpdzZnbK0yAUDjfY5t7K8OEQE=s0&quot;); background-position: left top;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-communication-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><!----></mio-card-set><!----><div _ngcontent-urv-c23="" class="category ng-tns-c23-2 ng-star-inserted" style=""><h2 _ngcontent-urv-c23="" class="ng-tns-c23-2">Containment</h2><p _ngcontent-urv-c23="" class="ng-tns-c23-2">Containment components hold information and actions – including other components like buttons, menus, or chips.</p></div><mio-card-set _ngcontent-urv-c23="" _nghost-urv-c14="" class="ng-tns-c23-2 ng-star-inserted" style=""><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 containment ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/bottom-sheets" target="_self" aria-label="Bottom sheets component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Bottom sheets</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Bottom sheets show secondary content anchored to the bottom of the screen</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/vkbGjssFeiTQEv7MkxgPSkaWFCbC3VlmGsTajQdN4egvRYJ8_t0OEFtHHi8_SH_FlO9BCy-A4RYxVFXKrlPVLi2D4fY98Fk7vRiuR8T_pl22_phd7kLY=s0&quot;); background-position: center top;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-containment-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 containment ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/cards" target="_self" aria-label="Cards component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Cards</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Cards display content and actions about a single subject</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/n_4aNsJuuiyg_sr2_uw8Q8G2oUOOvY6ICtuUHBg6HAvICeHxZRynFpHVVkQS1TteV9vKQRVX7DMe0NU7k-lWMWYTBChDePs9NtzYJTScRZkg54Zsce0=s0&quot;); background-position: center center;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-containment-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 containment ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/carousel" target="_self" aria-label="Carousel component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Carousel</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Carousels show a collection of items that can be scrolled on and off the screen</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/upiNwG4eX_60jklYacwvBizzElShHsnkxVsJDZI0W9VtRPo_czilCrfyaMDWDsTWkbCwitevcrg9EDfjGgRRhlA5OaBnTDJd6FaOtqOSzcw3U5v3_Q=s0&quot;); background-position: center center;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-containment-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 containment ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/dialogs" target="_self" aria-label="Dialogs component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Dialogs</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Dialogs provide important prompts in a user flow</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/M3idEmsw4YRoThty6JUy3jdEU4AReim8cp3SOnbtR8iy4B-sHhttjd2mtHu4xcqlL42tPbwTmYwAQcchS834nv2tC8kcvMuevNDdtVnVmjAu0m8oeVyz=s0&quot;); background-position: center center;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-containment-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 containment ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/divider" target="_self" aria-label="Divider component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Divider</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Dividers are thin lines that group content in lists or other containers</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/a9K_DZgVXzzXYtJhMzggPh8Q_GH939fVO0EfHHPc5JAn8TXA1VG8kjDJr2AWdFPeuMdb7SBVmULYGV0OIT9c7wmzFXtdSFoN3d85cme_NximgRRok20=s0&quot;); background-position: center center;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-containment-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 containment ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/lists" target="_self" aria-label="Lists component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Lists</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Lists are continuous, vertical indexes of text and images</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/9hlUNJDaGqH7lp0p1yrILHeeWVDyC6Gq5w-MC43J4r2MqCifSbXhhquiB3P38NZMlAEbBG75MBpiWZPiycEacNfqcdFYTDycwwLa0ogNGCEcsy0NHQq7=s0&quot;); background-position: center center;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-containment-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 containment ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/side-sheets" target="_self" aria-label="Side sheets component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Side sheets</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Side sheets show secondary content anchored to the side of the screen</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/Vs46g8j-KEI8Em22_bxJtx3UtKz1hPjqQ7SXxk13jJneZxa5bJ7unZ7EzTuihoqgu9nk9xjqsLiD3lU5uY8vbmRo4FD8p8lDWWEcYYInW81rrVw-zlk0=s0&quot;); background-position: center center;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-containment-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><!----></mio-card-set><!----><div _ngcontent-urv-c23="" class="category ng-tns-c23-2 ng-star-inserted" style=""><h2 _ngcontent-urv-c23="" class="ng-tns-c23-2">Navigation</h2><p _ngcontent-urv-c23="" class="ng-tns-c23-2">Navigation components help people move through the UI.</p></div><mio-card-set _ngcontent-urv-c23="" _nghost-urv-c14="" class="ng-tns-c23-2 ng-star-inserted" style=""><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 navigation ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/bottom-app-bar" target="_self" aria-label="Bottom app bar component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Bottom app bar</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Bottom app bars display navigation and key actions at the bottom of mobile and tablet screens</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/w8L06Sogr7XXXHjpHVyE7-b7um_jRISqepEGqf-6s5oanQwixC2efk6LYQU-RHZ4ReNAdKk50KGndtsZZlyIExQXQXZJ3M8Ph5Kr71iPRIn2rPr3met_=s0&quot;); background-position: center top;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-navigation-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 navigation ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/navigation-bar" target="_self" aria-label="Navigation bar component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Navigation bar</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Navigation bars let people switch between UI views on smaller devices</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/Ja2FXzNGLoZ4W2Z6XQBrjxfy7q_Ib1-Q8ytQRx2w12pJGrVeFBjjhtRHTDkSaBEd78lKd1xJbm3wkyBUEfV1hml7ic2sWjWPALY3ovb2GOXrF0sQJ5Q=s0&quot;); background-position: center top;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-navigation-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 navigation ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/navigation-drawer" target="_self" aria-label="Navigation drawer component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Navigation drawer</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Navigation drawers let people switch between UI views on larger devices</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/QAhkt1OFxAIIfDeDTarQQFMmR0nlBM4MOiIg2PhXJonfVgLk_EWrOzoU6ytZ2LcFCjshuxEzyFjRNLzvTqhMYLKmjzjejGOTcnWEhLxd9ZdMZ99ToGw=s0&quot;); background-position: center bottom;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-navigation-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 navigation ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/navigation-rail" target="_self" aria-label="Navigation rail component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Navigation rail</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Navigation rails let people switch between UI views on mid-sized devices</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/de3K_gVUszkstxDq0TSVIIQmkwBSOVnG_fi_pGgUld3fpcy_WSVl8tmc899a9cT7Ra5kWCPICjYNFvhQg1zm8c6vi4RNyy7h-pJ0HzDl9wDvXcJlv3g=s0&quot;); background-position: center center;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-navigation-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 navigation ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/search" target="_self" aria-label="Search component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Search</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Search lets people enter a keyword or phrase to get relevant information</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/tYbeB7gUUgUnTcas75LlAWkO4-GwMGeFXLw1MZQpbWbPBK98bo9PeW7yxS22Dqk5n5oLmPFEv9yAcg12DHQ2U58KQuHkUfVT1cBk1jCP6L4Axa4kEk8=s0&quot;); background-position: center top;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-navigation-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 navigation ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/tabs" target="_self" aria-label="Tabs component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Tabs</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Tabs organize content across different screens and views</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/THMeUmkSRyTap8ly3Z9SQSFoxxuio8oFIrCIv2jMN_K9lA8HNzgEXrfevBXBiBk0ESfjbyIT4sXa8KMd8jnUqa6K6dMDBwUYDFHRKW16b2Nf1Av1kQk=s0&quot;); background-position: center center;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-navigation-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 navigation ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/top-app-bar" target="_self" aria-label="Top app bar component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Top app bar</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Top app bars display navigation, actions, and text at the top of a screen</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/y_HHMGS4SqA2X6Ktcbb2mmroVZ5TiVW7rZ_pjody4Mdj8KmdM6NNvv2gDbCemd9bzR4SWeH4inun7yDy-r-T9D-wYON-b4gHof4kz0FDTZItQQyv7wk=s0&quot;); background-position: center bottom;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-navigation-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><!----></mio-card-set><!----><div _ngcontent-urv-c23="" class="category ng-tns-c23-2 ng-star-inserted" style=""><h2 _ngcontent-urv-c23="" class="ng-tns-c23-2">Selection</h2><p _ngcontent-urv-c23="" class="ng-tns-c23-2">Selection components let people specify choices.</p></div><mio-card-set _ngcontent-urv-c23="" _nghost-urv-c14="" class="ng-tns-c23-2 ng-star-inserted" style=""><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 selection ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/checkbox" target="_self" aria-label="Checkbox component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Checkbox</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Checkboxes let users select one or more items from a list, or turn an item on or off</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/a8oEbc6APO_sOKJ_kQlz4nzxOMP9zrP4R2NyPtumbSQexcxO3Qmf23_14XRREYlgao1FtGGga3lgePq7IZU-A1ATB99Ft5KbGSsTqJ0Nch-IoU1lyiA=s0&quot;); background-position: center center;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-selection-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 selection ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/chips" target="_self" aria-label="Chips component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Chips</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Chips help people enter information, make selections, filter content, or trigger actions</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/gY9gbMTUWuCZP-R_5Koa-QoKw9OISwa0Rloax8LMDVSz-2TZLKGtBypUsugt6O9sFrkUdOpYkglDtRffy_AckXm1yQ0F0OMN0cPZumx00_HuuFSRfZc=s0&quot;); background-position: center top;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-selection-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 selection ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/date-pickers" target="_self" aria-label="Date pickers component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Date pickers</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Date pickers let people select a date, or a range of dates</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/46ymYjuHWeewlwMlW_GH5C7wi2fK31TIt4ZycVFNYD4TLiWq3I3OEVMYiHrozYae4hgrZiyoItORRzkRFIi3nq_O4P5DXuhJH9g_5bgAO41DPP2aJlo=s0&quot;); background-position: center center;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-selection-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 selection ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/menus" target="_self" aria-label="Menus component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Menus</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Menus display a list of choices on a temporary surface</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/joNwOjX84SSVI5w0YPrqQcUVgrxjMWJXSBr0ID3aEsmlHguq2CfnPoxqK-7wXJ4Ip6Ei9MGjrf_T8eFi3sxlmiNdlbMJDTIeO39TPkQvQ4KAGRWjMZE=s0&quot;); background-position: center center;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-selection-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 selection ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/radio-button" target="_self" aria-label="Radio button component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Radio button</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Radio buttons let people select one option from a set of options</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/DiuwbjKMcWE0nSmb3ScUye0iHHkRkTGbASPnNQW3KD9Vtcv7AvhkabHoKA-XSmTaFZdmYchqABypdX0w0kM_uaHHOStkdt9rXnNwqf1bfwSCXPvAQheo=s0&quot;); background-position: center center;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-selection-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 selection ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/sliders" target="_self" aria-label="Sliders component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Sliders</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Sliders let users make selections from a range of values</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/FPY73G1dC98_kbVj_A6HlM67otrXCHic5PQ95RgthUYzGp9qr7JZFkAR-4Z3QsrT7DobNSorb0EyVLTD9fsj721QLrinMlJSEX9eUkQ3299bodjjIbA=s0&quot;); background-position: center center;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-selection-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 selection ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/switch" target="_self" aria-label="Switch component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Switch</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Switches toggle the selection of an item on or off</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/RGCrbGJi4c1TxaNOs2bt2OJAG4wkGPmIapgyKrrcLB_EWrNbSkuDzvQEgqlYc6sjDQL5RMHpaONWWXa5Dyybx4jfoXDrCzuiPA2A-98oumgUfA3atoo=s0&quot;); background-position: center center;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-selection-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 selection ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/time-pickers" target="_self" aria-label="Time pickers component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Time pickers</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Time pickers help users select and set a specific time</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/_dx3XskNs2VRzHMttrEUBZINV_5dftQi0bvsFXxisbnVIUV-SXEgkpuwW8jZ7xMfd4lr_dI_CbZbSh1D1ZrfVMt_Jrmzpi83-EQUM0DSqgOLNPw4xgk=s0&quot;); background-position: center center;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-selection-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><!----></mio-card-set><!----><div _ngcontent-urv-c23="" class="category ng-tns-c23-2 ng-star-inserted" style=""><h2 _ngcontent-urv-c23="" class="ng-tns-c23-2">Text inputs</h2><p _ngcontent-urv-c23="" class="ng-tns-c23-2">Text input components let people enter and edit text.</p></div><mio-card-set _ngcontent-urv-c23="" _nghost-urv-c14="" class="ng-tns-c23-2 ng-star-inserted" style=""><mio-card _ngcontent-urv-c23="" size="small" _nghost-urv-c18="" class="ng-tns-c23-2 selection ng-star-inserted"><a _ngcontent-urv-c18="" mioanalyticstracking="" mioripple="" class="thumbnail" href="/components/text-fields" target="_self" aria-label="Text fields component"><div _ngcontent-urv-c18="" class="content-container"><!----><!----><span _ngcontent-urv-c18="" class="mio-title-row"><span _ngcontent-urv-c18="" class="title">Text fields</span><!----></span><!----><span _ngcontent-urv-c18="" class="description ng-star-inserted">Text fields let users enter text into a UI</span><!----><!----></div><mio-thumbnail _ngcontent-urv-c18="" _nghost-urv-c16="" size="small" class="ng-star-inserted"><div _ngcontent-urv-c16="" class="thumb-container" style="background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(220, 218, 245);"><div _ngcontent-urv-c16="" class="foreground ng-star-inserted" style="background-image: url(&quot;https://lh3.googleusercontent.com/pqGY8YeYB2zRXzEoN-V2-2eqwmINKC0PvJJiOLRy1QxM3phdgbARDzNbmSE1dNiOlLKFxEdMQMGDcDG-ltvHVSwcwSiaaIAh9HQf2SKZdTiXs045pMA=s0&quot;); background-position: center center;"></div><!----><div _ngcontent-urv-c16="" class="hover-image ng-star-inserted" style="background-image: url(&quot;static/assets/m3-textInput-theming-thumbnail.jpg&quot;);"></div><!----><!----></div></mio-thumbnail><!----><!----><div class="ripple"></div></a></mio-card><!----><!----><!----></mio-card-set><!----><!----></div></main><mio-footer _ngcontent-urv-c23="" class="ng-tns-c23-2" _nghost-urv-c22=""><div _ngcontent-urv-c22="" class="squiggle"><svg _ngcontent-urv-c22="" aria-hidden="true" width="100%" height="8" fill="none" xmlns="http://www.w3.org/2000/svg"><pattern _ngcontent-urv-c22="" id="a" width="91" height="8" patternUnits="userSpaceOnUse"><g _ngcontent-urv-c22="" clip-path="url(#clip0_2426_11367)"><path _ngcontent-urv-c22="" d="M114 4c-5.067 4.667-10.133 4.667-15.2 0S88.667-.667 83.6 4 73.467 8.667 68.4 4 58.267-.667 53.2 4 43.067 8.667 38 4 27.867-.667 22.8 4 12.667 8.667 7.6 4-2.533-.667-7.6 4s-10.133 4.667-15.2 0S-32.933-.667-38 4s-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0" stroke="#E1E3E1" stroke-linecap="square"></path></g></pattern><rect _ngcontent-urv-c22="" width="100%" height="100%" fill="url(#a)"></rect></svg></div><footer _ngcontent-urv-c22=""><section _ngcontent-urv-c22="" class="about"><div _ngcontent-urv-c22="" class="about-material"><a _ngcontent-urv-c22="" mioanalyticstracking="" analyticslabel="/" href="/" aria-label="Material Design"><span _ngcontent-urv-c22="" class="google-symbols ally-container">material_design</span></a><p _ngcontent-urv-c22="">Material Design is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Backed by open-source code, Material Design streamlines collaboration between designers and developers, and helps teams quickly build beautiful products.</p></div><ul _ngcontent-urv-c22="" class="social-links"><li _ngcontent-urv-c22=""><h3 _ngcontent-urv-c22="">Social</h3></li><li _ngcontent-urv-c22="" class="ng-star-inserted" style=""><a _ngcontent-urv-c22="" mioanalyticstracking="" rel="noopener" class="ally-container" href="https://www.github.com/material-components" target="_blank" aria-label="Find us on Github">GitHub </a></li><li _ngcontent-urv-c22="" class="ng-star-inserted" style=""><a _ngcontent-urv-c22="" mioanalyticstracking="" rel="noopener" class="ally-container" href="https://www.twitter.com/materialdesign" target="_blank" aria-label="Find us on Twitter">Twitter </a></li><li _ngcontent-urv-c22="" class="ng-star-inserted" style=""><a _ngcontent-urv-c22="" mioanalyticstracking="" rel="noopener" class="ally-container" href="https://www.youtube.com/materialdesign" target="_blank" aria-label="Find us on Youtube">YouTube </a></li><li _ngcontent-urv-c22="" class="ng-star-inserted" style=""><a _ngcontent-urv-c22="" mioanalyticstracking="" rel="noopener" class="ally-container" href="https://material.io/feed.xml" target="_blank">Blog RSS </a></li><!----></ul><ul _ngcontent-urv-c22="" class="library-links"><li _ngcontent-urv-c22=""><h3 _ngcontent-urv-c22="">Libraries</h3></li><li _ngcontent-urv-c22="" class="ng-star-inserted" style=""><a _ngcontent-urv-c22="" mioanalyticstracking="" rel="noopener" class="ally-container" href="/develop/android/mdc-android" target="" aria-label="Android">Android </a></li><li _ngcontent-urv-c22="" class="ng-star-inserted" style=""><a _ngcontent-urv-c22="" mioanalyticstracking="" rel="noopener" class="ally-container" href="/develop/android/jetpack-compose" target="" aria-label="Compose">Compose </a></li><li _ngcontent-urv-c22="" class="ng-star-inserted" style=""><a _ngcontent-urv-c22="" mioanalyticstracking="" rel="noopener" class="ally-container" href="/develop/flutter" target="" aria-label="Flutter">Flutter </a></li><li _ngcontent-urv-c22="" class="ng-star-inserted" style=""><a _ngcontent-urv-c22="" mioanalyticstracking="" rel="noopener" class="ally-container" href="/develop/web" target="" aria-label="web">Web </a></li><!----></ul><ul _ngcontent-urv-c22="" class="versions"><li _ngcontent-urv-c22=""><h3 _ngcontent-urv-c22="">Archived versions</h3></li><li _ngcontent-urv-c22=""><a _ngcontent-urv-c22="" mioanalyticstracking="" analyticslabel="https://m1.material.io" href="https://m1.material.io" target="_blank" rel="noopener" aria-label="Material Design 1" class="ally-container">Material Design 1 </a></li><li _ngcontent-urv-c22=""><a _ngcontent-urv-c22="" mioanalyticstracking="" analyticslabel="https://m2.material.io" href="https://m2.material.io" target="_blank" rel="noopener" aria-label="Material Design 2" class="ally-container">Material Design 2 </a></li></ul></section><section _ngcontent-urv-c22="" class="legal"><ul _ngcontent-urv-c22=""><li _ngcontent-urv-c22="" class="google-logo"><a _ngcontent-urv-c22="" mioanalyticstracking="" analyticslabel="https://www.google.com" href="https://www.google.com" rel="noopener" target="_blank" aria-label="Google"><svg _ngcontent-urv-c22="" width="71" height="23" xmlns="http://www.w3.org/2000/svg"><path _ngcontent-urv-c22="" d="M0 8.773C0 3.937 4.083 0 8.938 0c2.684 0 4.595 1.047 6.034 2.415l-1.695 1.693c-1.032-.962-2.429-1.712-4.339-1.712-3.545 0-6.317 2.847-6.317 6.377s2.772 6.381 6.317 6.381c2.297 0 3.607-.921 4.446-1.756.687-.686 1.137-1.67 1.307-3.02H8.938V7.982h8.097c.085.43.129.946.129 1.5 0 1.797-.494 4.025-2.084 5.608-1.547 1.603-3.524 2.462-6.142 2.462C4.083 17.55 0 13.61 0 8.773zm23.693 6.303c-1.719 0-3.198-1.413-3.198-3.425 0-2.032 1.479-3.423 3.198-3.423 1.718 0 3.201 1.391 3.201 3.423 0 2.012-1.483 3.425-3.201 3.425m0-9.076C20.557 6 18 8.375 18 11.65c0 3.257 2.557 5.652 5.693 5.652 3.137 0 5.692-2.395 5.692-5.651C29.385 8.375 26.83 6 23.693 6m13.003 9.076c-1.719 0-3.2-1.413-3.2-3.425 0-2.032 1.481-3.423 3.2-3.423 1.718 0 3.2 1.391 3.2 3.423 0 2.012-1.482 3.425-3.2 3.425m0-9.076C33.559 6 31 8.375 31 11.65c0 3.257 2.559 5.652 5.696 5.652 3.135 0 5.692-2.395 5.692-5.651C42.388 8.375 39.831 6 36.696 6m11.952 9.076c-1.716 0-3.156-1.432-3.156-3.403 0-1.991 1.44-3.445 3.156-3.445 1.697 0 3.031 1.454 3.031 3.445 0 1.971-1.334 3.403-3.031 3.403zm2.858-8.732v.918h-.085C50.861 6.601 49.789 6 48.434 6 45.6 6 43 8.485 43 11.673c0 3.168 2.6 5.63 5.434 5.63 1.355 0 2.427-.6 2.987-1.287h.085v.816c0 2.162-1.161 3.316-3.028 3.316-1.526 0-2.471-1.092-2.857-2.01l-2.171.9c.624 1.498 2.278 3.336 5.028 3.336 2.922 0 5.391-1.713 5.391-5.885V6.344h-2.363zM56 16.608h2.49V0H56zm9.434-8.425c.987 0 1.825.494 2.104 1.199l-5.069 2.096c-.065-2.182 1.697-3.295 2.965-3.295m.192 6.891c-1.267 0-2.169-.578-2.748-1.71l7.582-3.125-.259-.643C69.729 8.333 68.29 6 65.347 6 62.427 6 60 8.292 60 11.65c0 3.167 2.404 5.65 5.626 5.65 2.599 0 4.103-1.583 4.727-2.504l-1.934-1.284c-.643.942-1.525 1.562-2.793 1.562" fill-rule="evenodd"></path></svg></a></li><li _ngcontent-urv-c22="" class="legal-link ng-star-inserted" style=""><a _ngcontent-urv-c22="" mioanalyticstracking="" rel="noopener" href="https://policies.google.com/privacy" target="">Privacy Policy </a></li><li _ngcontent-urv-c22="" class="legal-link ng-star-inserted" style=""><a _ngcontent-urv-c22="" mioanalyticstracking="" rel="noopener" href="https://policies.google.com/terms" target="">Terms of Service </a></li><li _ngcontent-urv-c22="" class="legal-link ng-star-inserted" style=""><a _ngcontent-urv-c22="" mioanalyticstracking="" rel="noopener" href="https://google.qualtrics.com/jfe/form/SV_3NMIMtX0F2zkakR?utm_source=Website&amp;Q_Language=en&amp;utm_campaign=Q2&amp;campaignDate=June2022&amp;referral_code=UXRgbtM2422655&amp;productTag=b2d" target="">Join research studies </a></li><!----><li _ngcontent-urv-c22="" class="legal-link"><a _ngcontent-urv-c22="" href="javascript:void(0)">Feedback</a></li></ul></section></footer></mio-footer></div><!----></mio-components-landing-page><!----></div><!----></div></mwc-drawer><!----></mio-navigation-drawer></div><!----><!----><!----><!----></mio-root>
  <script src="/site_meta.js">
  </script>
  <noscript>
   This website requires JavaScript.
  </noscript>
  <script src="https://www.gstatic.com/feedback/js/help/prod/service/lazy.min.js" type="text/javascript">
  </script>
  <script src="/static/angular/runtime.a72295d5971a6f8c.js" type="module">
  </script>
  <script src="/static/angular/polyfills.1987b276f32a5d59.js" type="module">
  </script>
  <script src="/static/angular/vendor.9ffe523c13c1fb2b.js" type="module">
  </script>
  <script src="/static/angular/main.1ca10721f57d4146.js" type="module">
  </script>
 
<iframe id="apiproxy92ba6ea522d3d96106c337a553413233fbd0fb520.1365013766" name="apiproxy92ba6ea522d3d96106c337a553413233fbd0fb520.1365013766" src="https://scone-pa.clients6.google.com/static/proxy.html?usegapi=1&amp;jsh=m%3B%2F_%2Fscs%2Fabc-static%2F_%2Fjs%2Fk%3Dgapi.lb.en.N4A9eqvTwsI.O%2Fam%3DAACA%2Fd%3D1%2Frs%3DAHpOoo_O6fwbR1aR8YHQkB3I0FTV0L0UIA%2Fm%3D__features__#parent=https%3A%2F%2Fm3.material.io&amp;rpctoken=357373421" tabindex="-1" aria-hidden="true" style="width: 1px; height: 1px; position: absolute; top: -100px; display: none;"></iframe></body></html>