https://m3.material.io/components

스캔 ID:: 715cce74-af7d-44b9-b4cd-c26bff84884c완료
제출된 URL:: https://m3.material.io/components
보고서 완료:: 2024년 11월 1일 17:33:31
링크 · 10개 결과

페이지에서 식별된 외부 링크
링크	텍스트
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 변수 · 187개 결과

페이지의 창 개체에 로드된 전역 JavaScript 변수는 함수 외부에서 선언된 변수로, 현재 범위 내에서 코드의 어느 부분에서나 액세스할 수 있습니다
이름	유형
0	object
onbeforetoggle	object
documentPictureInPicture	object
onscrollend	object
gtag	function
dataLayer	object
GoogleAnalyticsObject	string
ga	function
userfeedback	object
google_tag_data	object
콘솔 로그 메시지 · 2개 결과

웹 콘솔에 기록된 메시지
유형	카테고리	로그
error	security	URL https://m3.material.io/components 텍스트 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 텍스트 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

페이지의 원시 HTML 본문
<!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>