') center center no-repeat;}.css-1bzsqls.focusVisible{background-color:#79b;}.css-1bzsqls.checked{-webkit-transform:translateX(24px);-moz-transform:translateX(24px);-ms-transform:translateX(24px);transform:translateX(24px);}.css-1bzsqls.checked::before{background-image:url('data:image/svg+xml;utf8, ');}.css-u9fjb1{position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;z-index:1;margin:0;cursor:pointer;}.css-1abi6xj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-top:48px;margin-bottom:48px;}.css-1abi6xj>:not(style):not(style){margin:0;}.css-1abi6xj>:not(style)~:not(style){margin-top:20px;}.css-28r57m{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}@media (min-width:0px){.css-28r57m{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.css-28r57m>:not(style):not(style){margin:0;}.css-28r57m>:not(style)~:not(style){margin-top:24px;}}@media (min-width:600px){.css-28r57m{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.css-28r57m>:not(style):not(style){margin:0;}.css-28r57m>:not(style)~:not(style){margin-left:8px;}}.css-1ta7zwo{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;background-color:transparent;outline:0;border:0;margin:0;border-radius:0;padding:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;-moz-appearance:none;-webkit-appearance:none;-webkit-text-decoration:none;text-decoration:none;color:inherit;-webkit-transition:all 100ms ease-in;transition:all 100ms ease-in;text-transform:initial;font-weight:700;letter-spacing:0;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:0.8125rem;line-height:1.75;scroll-snap-margin-top:calc(var(--MuiDocs-header-height) + 32px);scroll-margin-top:calc(var(--MuiDocs-header-height) + 32px);min-width:64px;padding:3px 9px;border-radius:12px;-webkit-transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;border:1px solid rgba(0, 127, 255, 0.5);color:#007FFF;box-shadow:none;-webkit-transition:all 120ms ease-in;transition:all 120ms ease-in;padding:6px 8px;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:0.8125rem;font-weight:600;border-radius:8px;color:#0066CC;background-color:rgba(235, 245, 255, 0.3);border-color:#CCE5FF;box-shadow:#EBF5FF 0 2px 0.5px inset,rgba(204, 229, 255, 0.2) 0 -3px 0 inset,rgba(204, 229, 255, 0.3) 0 1px 2px 0;}.css-1ta7zwo::-moz-focus-inner{border-style:none;}.css-1ta7zwo.Mui-disabled{pointer-events:none;cursor:default;}@media print{.css-1ta7zwo{-webkit-print-color-adjust:exact;color-adjust:exact;}}.css-1ta7zwo:focus-visible{outline:3px solid rgba(0, 127, 255, 0.5);outline-offset:2px;}.css-1ta7zwo:hover{-webkit-text-decoration:none;text-decoration:none;background-color:rgba(0, 127, 255, 0.04);border:1px solid #007FFF;}@media (hover: none){.css-1ta7zwo:hover{background-color:transparent;}}.css-1ta7zwo.Mui-disabled{color:rgba(0, 0, 0, 0.26);border:1px solid rgba(0, 0, 0, 0.12);}.css-1ta7zwo:hover{box-shadow:none;}.css-1ta7zwo.Mui-focusVisible{box-shadow:none;}.css-1ta7zwo:active{box-shadow:none;}.css-1ta7zwo.Mui-disabled{box-shadow:none;}.css-1ta7zwo .MuiButton-startIcon{-webkit-transition:0.15s;transition:0.15s;margin-right:4px;margin-left:-1px;}.css-1ta7zwo .MuiButton-endIcon{-webkit-transition:0.15s;transition:0.15s;margin-left:4px;}.css-1ta7zwo:hover{background:#EBF5FF;border-color:#66B2FF;}.css-1ta7zwo:hover>span{-webkit-transform:translateX(-2px);-moz-transform:translateX(-2px);-ms-transform:translateX(-2px);transform:translateX(-2px);}.css-16rzsu1{display:inherit;margin-right:8px;margin-left:-2px;}.css-16rzsu1>*:nth-of-type(1){font-size:18px;}.css-do1tfz{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:1em;height:1em;display:inline-block;fill:currentColor;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-transition:fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;font-size:1.5rem;margin-right:4px;}.css-csffzd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.css-csffzd>:not(style):not(style){margin:0;}.css-csffzd>:not(style)~:not(style){margin-left:8px;}.css-9q8mec{margin:0;font-size:0.875rem;line-height:1.5;letter-spacing:0;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-weight:400;scroll-snap-margin-top:calc(var(--MuiDocs-header-height) + 32px);scroll-margin-top:calc(var(--MuiDocs-header-height) + 32px);font-weight:500;color:#434D5B;}.css-dgcsjh{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;background-color:transparent;outline:0;border:0;margin:0;border-radius:0;padding:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;-moz-appearance:none;-webkit-appearance:none;-webkit-text-decoration:none;text-decoration:none;color:inherit;-webkit-transition:all 100ms ease-in;transition:all 100ms ease-in;text-align:center;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;font-size:1.5rem;padding:8px;border-radius:50%;overflow:visible;color:rgba(0, 0, 0, 0.54);-webkit-transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;color:#0288d1;height:34px;width:34px;border:1px solid;border-color:#DAE2ED;color:#6B7A90;border-radius:12px;box-shadow:inset 0 1px 2px #F3F6F9,0 1px 0.5px rgba(229, 234, 242, 0.6);}.css-dgcsjh::-moz-focus-inner{border-style:none;}.css-dgcsjh.Mui-disabled{pointer-events:none;cursor:default;}@media print{.css-dgcsjh{-webkit-print-color-adjust:exact;color-adjust:exact;}}.css-dgcsjh:focus-visible{outline:3px solid rgba(0, 127, 255, 0.5);outline-offset:2px;}.css-dgcsjh:hover{background-color:rgba(0, 0, 0, 0.04);}@media (hover: none){.css-dgcsjh:hover{background-color:transparent;}}.css-dgcsjh:hover{background-color:rgba(2, 136, 209, 0.04);}@media (hover: none){.css-dgcsjh:hover{background-color:transparent;}}.css-dgcsjh.Mui-disabled{background-color:transparent;color:rgba(0, 0, 0, 0.26);}.css-dgcsjh:hover{color:#007FFF;border-color:#C7D0DD;background:#F3F6F9;}.css-1bdxnx3{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:1em;height:1em;display:inline-block;fill:currentColor;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-transition:fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;font-size:1.5rem;font-size:15px;}.css-t71n5l{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-top:16px;margin-bottom:16px;}.css-6zntoz{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;background-color:transparent;outline:0;border:0;margin:0;border-radius:0;padding:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;-moz-appearance:none;-webkit-appearance:none;-webkit-text-decoration:none;text-decoration:none;color:inherit;-webkit-transition:all 100ms ease-in;transition:all 100ms ease-in;text-transform:initial;font-weight:700;letter-spacing:0;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:0.8125rem;line-height:1.75;scroll-snap-margin-top:calc(var(--MuiDocs-header-height) + 32px);scroll-margin-top:calc(var(--MuiDocs-header-height) + 32px);min-width:64px;padding:4px 5px;border-radius:12px;-webkit-transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;color:#007FFF;box-shadow:none;-webkit-transition:all 120ms ease-in;transition:all 120ms ease-in;padding:6px 8px;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:0.8125rem;font-weight:600;border-radius:8px;}.css-6zntoz::-moz-focus-inner{border-style:none;}.css-6zntoz.Mui-disabled{pointer-events:none;cursor:default;}@media print{.css-6zntoz{-webkit-print-color-adjust:exact;color-adjust:exact;}}.css-6zntoz:focus-visible{outline:3px solid rgba(0, 127, 255, 0.5);outline-offset:2px;}.css-6zntoz:hover{-webkit-text-decoration:none;text-decoration:none;background-color:rgba(0, 127, 255, 0.04);}@media (hover: none){.css-6zntoz:hover{background-color:transparent;}}.css-6zntoz.Mui-disabled{color:rgba(0, 0, 0, 0.26);}.css-6zntoz:hover{box-shadow:none;}.css-6zntoz.Mui-focusVisible{box-shadow:none;}.css-6zntoz:active{box-shadow:none;}.css-6zntoz.Mui-disabled{box-shadow:none;}.css-6zntoz .MuiButton-startIcon{-webkit-transition:0.15s;transition:0.15s;margin-right:4px;margin-left:-1px;}.css-6zntoz .MuiButton-endIcon{-webkit-transition:0.15s;transition:0.15s;margin-left:4px;}.css-6zntoz:hover .MuiButton-startIcon{-webkit-transform:translateX(-2px);-moz-transform:translateX(-2px);-ms-transform:translateX(-2px);transform:translateX(-2px);}.css-6zntoz:hover .MuiButton-endIcon{-webkit-transform:translateX(2px);-moz-transform:translateX(2px);-ms-transform:translateX(2px);transform:translateX(2px);}.css-vubbuv{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:1em;height:1em;display:inline-block;fill:currentColor;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-transition:fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;font-size:1.5rem;}.css-kcxyz4{display:inherit;margin-right:-2px;margin-left:8px;}.css-kcxyz4>*:nth-of-type(1){font-size:18px;}.css-dpal3j{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}@media (min-width:0px){.css-dpal3j{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.css-dpal3j>:not(style):not(style){margin:0;}.css-dpal3j>:not(style)~:not(style){margin-top:24px;}}@media (min-width:600px){.css-dpal3j{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.css-dpal3j>:not(style):not(style){margin:0;}.css-dpal3j>:not(style)~:not(style){margin-left:8px;}}.css-13j1pu0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}.css-13j1pu0>:not(style):not(style){margin:0;}.css-13j1pu0>:not(style)~:not(style){margin-left:9.6px;}.css-jojn6a{margin:0;font:inherit;color:#007FFF;-webkit-text-decoration:none;text-decoration:none;font-weight:600;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#0066CC;margin-bottom:16px;}.css-jojn6a.MuiTypography-body1>svg{margin-top:2px;}.css-jojn6a svg:last-child{margin-left:2px;}.css-jojn6a:focus-visible{outline:3px solid rgba(0, 127, 255, 0.5);outline-offset:2px;}.css-jojn6a:hover{color:#004C99;}.css-unwszx{vertical-align:bottom;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:#0B0D0E;}.css-4712ze{margin:0;font-size:1rem;line-height:1.5;letter-spacing:0;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-weight:400;scroll-snap-margin-top:calc(var(--MuiDocs-header-height) + 32px);scroll-margin-top:calc(var(--MuiDocs-header-height) + 32px);color:#9DA8B7;font-size:13px;opacity:70%;}.css-16fsg5i{margin:0;font:inherit;color:#007FFF;-webkit-text-decoration:none;text-decoration:none;font-weight:600;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#0066CC;}.css-16fsg5i.MuiTypography-body1>svg{margin-top:2px;}.css-16fsg5i svg:last-child{margin-left:2px;}.css-16fsg5i:focus-visible{outline:3px solid rgba(0, 127, 255, 0.5);outline-offset:2px;}.css-16fsg5i:hover{color:#004C99;}.css-1s16jae{margin:0;font-size:1rem;line-height:1.5;letter-spacing:0;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-weight:400;scroll-snap-margin-top:calc(var(--MuiDocs-header-height) + 32px);scroll-margin-top:calc(var(--MuiDocs-header-height) + 32px);font-size:0.875rem;line-height:1.5;letter-spacing:0;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-weight:600;scroll-snap-margin-top:calc(var(--MuiDocs-header-height) + 32px);scroll-margin-top:calc(var(--MuiDocs-header-height) + 32px);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:4px;color:#007FFF;}.css-1s16jae>svg{-webkit-transition:0.2s;transition:0.2s;}.css-1s16jae:hover>svg{-webkit-transform:translateX(2px);-moz-transform:translateX(2px);-ms-transform:translateX(2px);transform:translateX(2px);}.css-1yls13q{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:1em;height:1em;display:inline-block;fill:currentColor;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-transition:fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;font-size:1.5rem;font-size:14px;}.css-1mzerio{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.css-1mzerio>:not(style):not(style){margin:0;}.css-1mzerio>:not(style)~:not(style){margin-left:8px;}.css-1p6m098{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;background-color:transparent;outline:0;border:0;margin:0;border-radius:0;padding:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;-moz-appearance:none;-webkit-appearance:none;-webkit-text-decoration:none;text-decoration:none;color:inherit;-webkit-transition:all 100ms ease-in;transition:all 100ms ease-in;text-align:center;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;font-size:1.5rem;padding:8px;border-radius:50%;overflow:visible;color:rgba(0, 0, 0, 0.54);-webkit-transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;padding:5px;font-size:1.125rem;}.css-1p6m098::-moz-focus-inner{border-style:none;}.css-1p6m098.Mui-disabled{pointer-events:none;cursor:default;}@media print{.css-1p6m098{-webkit-print-color-adjust:exact;color-adjust:exact;}}.css-1p6m098:focus-visible{outline:3px solid rgba(0, 127, 255, 0.5);outline-offset:2px;}.css-1p6m098:hover{background-color:rgba(0, 0, 0, 0.04);}@media (hover: none){.css-1p6m098:hover{background-color:transparent;}}.css-1p6m098.Mui-disabled{background-color:transparent;color:rgba(0, 0, 0, 0.26);}.css-opaoez{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:1em;height:1em;display:inline-block;fill:currentColor;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-transition:fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;font-size:1.25rem;color:#9DA8B7;}.css-ly1r2q{top:var(--MuiDocs-header-height);margin-top:var(--MuiDocs-header-height);padding-left:2px;position:-webkit-sticky;position:sticky;height:calc(100vh - var(--MuiDocs-header-height));overflow-y:auto;padding-top:32px;padding-bottom:56px;padding-right:32px;display:none;}@media (min-width:900px){.css-ly1r2q{display:block;}}.css-1yaq0io{margin:0;font:inherit;color:#007FFF;-webkit-text-decoration:none;text-decoration:none;font-weight:600;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#0066CC;margin-bottom:16px;margin-left:4px;margin-right:4px;padding:8px;padding-left:10px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px;background-color:rgba(243, 246, 249, 0.4);border:1px solid;border-color:#E5EAF2;border-radius:12px;transition-property:all;transition-timing:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.css-1yaq0io.MuiTypography-body1>svg{margin-top:2px;}.css-1yaq0io svg:last-child{margin-left:2px;}.css-1yaq0io:focus-visible{outline:3px solid rgba(0, 127, 255, 0.5);outline-offset:2px;}.css-1yaq0io:hover{color:#004C99;}.css-1yaq0io:hover,.css-1yaq0io:focus-visible{background-color:#EBF5FF;border-color:#99CCFF;}.css-1yuqj86{border-radius:3px;overflow:auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-spfw6s{height:6px;width:16px;background-color:#0057B7;}.css-1u18uw9{height:6px;width:16px;background-color:#FFD700;}.css-193blm8{margin:0;display:inline-block;font-size:0.75rem;line-height:1.5;letter-spacing:0;font-weight:700;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";scroll-snap-margin-top:calc(var(--MuiDocs-header-height) + 32px);scroll-margin-top:calc(var(--MuiDocs-header-height) + 32px);font-weight:500;color:#434D5B;}.css-967ein{margin:0;font-size:1rem;line-height:1.5;letter-spacing:0;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-weight:400;scroll-snap-margin-top:calc(var(--MuiDocs-header-height) + 32px);scroll-margin-top:calc(var(--MuiDocs-header-height) + 32px);padding:8px 0px 8px 11.2px;font-size:0.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.08rem;color:#6B7A90;}.css-17mrx6g{padding:0;margin:0;list-style:none;}.css-utqcip{margin:0;font-size:1rem;line-height:1.5;letter-spacing:0;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-weight:400;scroll-snap-margin-top:calc(var(--MuiDocs-header-height) + 32px);scroll-margin-top:calc(var(--MuiDocs-header-height) + 32px);padding:0;margin:0;list-style:none;}.css-vpo3ro{margin:0;font:inherit;color:#007FFF;display:block;-webkit-text-decoration:none;text-decoration:none;font-weight:600;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#0066CC;box-sizing:border-box;padding:6px 0px 6px 12px;border-left:1px solid transparent;display:block;font-size:0.8125rem;font-weight:500;text-overflow:ellipsis;overflow:hidden;color:#1C2025;}.css-vpo3ro.MuiTypography-body1>svg{margin-top:2px;}.css-vpo3ro svg:last-child{margin-left:2px;}.css-vpo3ro:focus-visible{outline:3px solid rgba(0, 127, 255, 0.5);outline-offset:2px;}.css-vpo3ro:hover{color:#004C99;}.css-vpo3ro:hover{border-left-color:#B0B8C4;color:#6B7A90;}.css-vpo3ro:active{border-left-color:#99CCFF;color:#0066CC;}.css-vpo3ro:active:hover{border-left-color:#0066CC;color:#0066CC;}.css-1p623o5{margin:0;font:inherit;color:#007FFF;display:block;-webkit-text-decoration:none;text-decoration:none;font-weight:600;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#0066CC;box-sizing:border-box;padding:6px 0px 6px 24px;border-left:1px solid transparent;display:block;font-size:0.8125rem;font-weight:500;text-overflow:ellipsis;overflow:hidden;color:#1C2025;}.css-1p623o5.MuiTypography-body1>svg{margin-top:2px;}.css-1p623o5 svg:last-child{margin-left:2px;}.css-1p623o5:focus-visible{outline:3px solid rgba(0, 127, 255, 0.5);outline-offset:2px;}.css-1p623o5:hover{color:#004C99;}.css-1p623o5:hover{border-left-color:#B0B8C4;color:#6B7A90;}.css-1p623o5:active{border-left-color:#99CCFF;color:#0066CC;}.css-1p623o5:active:hover{border-left-color:#0066CC;color:#0066CC;}.css-14m5so{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-top:12px;padding-top:12px;border-top:1px solid;border-color:#E5EAF2;}.css-14m5so>:not(style):not(style){margin:0;}.css-14m5so>:not(style)~:not(style){margin-top:4px;}.css-baozuo{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;background-color:transparent;outline:0;border:0;margin:0;border-radius:0;padding:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;-moz-appearance:none;-webkit-appearance:none;-webkit-text-decoration:none;text-decoration:none;color:inherit;-webkit-transition:all 100ms ease-in;transition:all 100ms ease-in;text-transform:initial;font-weight:700;letter-spacing:0;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:0.8125rem;line-height:1.75;scroll-snap-margin-top:calc(var(--MuiDocs-header-height) + 32px);scroll-margin-top:calc(var(--MuiDocs-header-height) + 32px);min-width:64px;padding:4px 5px;border-radius:12px;-webkit-transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;color:#007FFF;box-shadow:none;-webkit-transition:all 120ms ease-in;transition:all 120ms ease-in;padding:6px 8px;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:0.8125rem;font-weight:600;border-radius:8px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;font-size:0.78125rem;}.css-baozuo::-moz-focus-inner{border-style:none;}.css-baozuo.Mui-disabled{pointer-events:none;cursor:default;}@media print{.css-baozuo{-webkit-print-color-adjust:exact;color-adjust:exact;}}.css-baozuo:focus-visible{outline:3px solid rgba(0, 127, 255, 0.5);outline-offset:2px;}.css-baozuo:hover{-webkit-text-decoration:none;text-decoration:none;background-color:rgba(0, 127, 255, 0.04);}@media (hover: none){.css-baozuo:hover{background-color:transparent;}}.css-baozuo.Mui-disabled{color:rgba(0, 0, 0, 0.26);}.css-baozuo:hover{box-shadow:none;}.css-baozuo.Mui-focusVisible{box-shadow:none;}.css-baozuo:active{box-shadow:none;}.css-baozuo.Mui-disabled{box-shadow:none;}.css-baozuo .MuiButton-startIcon{-webkit-transition:0.15s;transition:0.15s;margin-right:4px;margin-left:-1px;}.css-baozuo .MuiButton-endIcon{-webkit-transition:0.15s;transition:0.15s;margin-left:4px;}.css-baozuo:hover .MuiButton-startIcon{-webkit-transform:translateX(-2px);-moz-transform:translateX(-2px);-ms-transform:translateX(-2px);transform:translateX(-2px);}.css-baozuo:hover .MuiButton-endIcon{-webkit-transform:translateX(2px);-moz-transform:translateX(2px);-ms-transform:translateX(2px);transform:translateX(2px);}.css-baozuo svg{margin-right:4px;width:16px;height:16px;}.css-18zsr3k{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.css-18zsr3k>:not(style):not(style){margin:0;}.css-18zsr3k>:not(style)~:not(style){margin-top:8px;}.css-7fdl0i{box-sizing:border-box;width:100%;height:45px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;border-radius:12px;border:1px solid;border-color:#E5EAF2;-webkit-transition:color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;box-shadow:inset 0 1px 1px #F3F6F9,0 1px 2px rgba(229, 234, 242, 0.6);}.css-7fdl0i:hover{background-color:#F3F6F9;}.css-7fdl0i img{display:inline-block;}.css-kihmet{height:25px;width:116px;}.css-18iki3b{height:28px;width:68px;}.css-q21xj2{margin:0;font:inherit;color:#007FFF;-webkit-text-decoration:none;text-decoration:none;font-weight:600;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#0066CC;width:100%;padding:8px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;border-radius:12px;border:1px dashed;-webkit-transition:color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;background-color:rgba(235, 245, 255, 0.5);border-color:#99CCFF;box-shadow:inset 0 1px 1px #F3F6F9,0 1px 2px rgba(204, 229, 255, 0.8);}.css-q21xj2.MuiTypography-body1>svg{margin-top:2px;}.css-q21xj2 svg:last-child{margin-left:2px;}.css-q21xj2:focus-visible{outline:3px solid rgba(0, 127, 255, 0.5);outline-offset:2px;}.css-q21xj2:hover{color:#004C99;}.css-q21xj2:hover{background-color:rgba(204, 229, 255, 0.5);border-color:#66B2FF;}.css-1pkjr9{margin:0;display:inline-block;font-size:0.75rem;line-height:1.5;letter-spacing:0;font-weight:700;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";scroll-snap-margin-top:calc(var(--MuiDocs-header-height) + 32px);scroll-margin-top:calc(var(--MuiDocs-header-height) + 32px);font-weight:600;text-align:center;}.css-2dc6k2{margin:0;display:inline-block;font-size:0.75rem;line-height:1.5;letter-spacing:0;font-weight:700;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";scroll-snap-margin-top:calc(var(--MuiDocs-header-height) + 32px);scroll-margin-top:calc(var(--MuiDocs-header-height) + 32px);font-weight:400;color:#434D5B;}.css-1f23llj{position:fixed;bottom:24px;right:24px;z-index:10;}.css-1q89r9i{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;background-color:transparent;outline:0;border:0;margin:0;border-radius:0;padding:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;-moz-appearance:none;-webkit-appearance:none;-webkit-text-decoration:none;text-decoration:none;color:inherit;-webkit-transition:all 100ms ease-in;transition:all 100ms ease-in;text-transform:initial;font-weight:700;letter-spacing:0;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:0.875rem;line-height:1.75;scroll-snap-margin-top:calc(var(--MuiDocs-header-height) + 32px);scroll-margin-top:calc(var(--MuiDocs-header-height) + 32px);min-height:36px;-webkit-transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;border-radius:50%;padding:0;min-width:0;width:40px;height:40px;z-index:1050;box-shadow:0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);color:rgba(0, 0, 0, 0.87);background-color:#C7D0DD;background-color:#CCE5FF;box-shadow:0px 4px 20px rgba(170, 180, 190, 0.3);}.css-1q89r9i::-moz-focus-inner{border-style:none;}.css-1q89r9i.Mui-disabled{pointer-events:none;cursor:default;}@media print{.css-1q89r9i{-webkit-print-color-adjust:exact;color-adjust:exact;}}.css-1q89r9i:focus-visible{outline:3px solid rgba(0, 127, 255, 0.5);outline-offset:2px;}.css-1q89r9i:active{box-shadow:0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12);}.css-1q89r9i:hover{background-color:#f5f5f5;-webkit-text-decoration:none;text-decoration:none;}@media (hover: none){.css-1q89r9i:hover{background-color:#C7D0DD;}}.css-1q89r9i.Mui-focusVisible{box-shadow:0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);}.css-1q89r9i.Mui-disabled{color:rgba(0, 0, 0, 0.26);box-shadow:none;background-color:rgba(0, 0, 0, 0.12);}.css-1q89r9i:hover{background-color:#99CCFF;}.css-1q89r9i:active{box-shadow:0px 4px 20px rgba(170, 180, 190, 0.6);}.css-14rkw53{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:1em;height:1em;display:inline-block;fill:currentColor;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-transition:fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;font-size:1.5rem;color:#004C99;}
React Switch component and hook - Base UI Skip to content
Switch Switches are UI elements that let users choose between two states—most commonly on/off.
Introduction The Switch component provides users with a switch for toggling between two mutually exclusive states.
Component import { Switch } from '@mui/base/Switch' ;
(or Ctrl + C)
Anatomy The Switch component is composed of a root <span>
that houses three interior slots—a track, a thumb, and an input:
< span class = " base-Switch-root" >
< span class = " base-Switch-track" > </ span>
< span class = " base-Switch-thumb" > </ span>
< input type = " checkbox" class = " base-Switch-input" />
</ span>
(or Ctrl + C)
Custom structure Use the slots
prop to override the root or any other interior slot:
< Switch slots = { { root : 'div' , track : 'div' } } />
(or Ctrl + C)
Use the slotProps
prop to pass custom props to internal slots.
The following code snippet applies a CSS class called my-thumb
to the thumb slot:
< Switch slotProps = { { thumb : { className : 'my-thumb' } } } />
(or Ctrl + C)
Usage with TypeScript In TypeScript, you can specify the custom component type used in the slots.root
as a generic parameter of the unstyled component.
This way, you can safely provide the custom root's props directly on the component:
< Switch< typeof CustomComponent> slots= { { root: CustomComponent } } customProp / >
(or Ctrl + C)
The same applies for props specific to custom primitive elements:
< Switch< 'input' > slots= { { root: 'input' } } autoFocus= { true } / >
(or Ctrl + C)
Hook import { useSwitch } from '@mui/base/useSwitch' ;
(or Ctrl + C)
The useSwitch
hook lets you apply the functionality of a Switch to a fully custom component.
It returns props to be placed on the custom component, along with fields representing the component's internal state.
Hooks do not support slot props , but they do support customization props .
Hooks give you the most room for customization, but require more work to implement.
With hooks, you can take full control over how your component is rendered, and define all the custom props and CSS classes you need.
You may not need to use hooks unless you find that you're limited by the customization options of their component counterparts—for instance, if your component requires significantly different HTML structure .
Basic example
Press Enter to start editing
Press Enter to start editing
Accessibility To make the Switch component accessible, you should ensure that the corresponding labels reflect the Switch's current state.
MUI stands in solidarity with Ukraine. Contents