');}.css-6hlssl .MuiSwitch-switchBase.Mui-checked+.MuiSwitch-track{opacity:1;background-color:#aab4be;}.css-6hlssl .MuiSwitch-thumb{background-color:#001e3c;width:32px;height:32px;}.css-6hlssl .MuiSwitch-thumb::before{content:'';position:absolute;width:100%;height:100%;left:0;top:0;background-repeat:no-repeat;-webkit-background-position:center;background-position:center;background-image:url('data:image/svg+xml;utf8, ');}.css-6hlssl .MuiSwitch-track{opacity:1;background-color:#aab4be;border-radius:10px;}.css-wlky12{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:58px;height:38px;overflow:hidden;padding:12px;box-sizing:border-box;position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;z-index:0;vertical-align:middle;padding:8px;}@media print{.css-wlky12{-webkit-print-color-adjust:exact;color-adjust:exact;}}.css-wlky12 .MuiSwitch-track{border-radius:11px;}.css-wlky12 .MuiSwitch-track::before,.css-wlky12 .MuiSwitch-track::after{content:"";position:absolute;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:16px;height:16px;}.css-wlky12 .MuiSwitch-track::before{background-image:url('data:image/svg+xml;utf8, ');left:12px;}.css-wlky12 .MuiSwitch-track::after{background-image:url('data:image/svg+xml;utf8, ');right:12px;}.css-wlky12 .MuiSwitch-thumb{box-shadow:none;width:16px;height:16px;margin:2px;}.css-pvxxzy{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:58px;height:38px;overflow:hidden;padding:12px;box-sizing:border-box;position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;z-index:0;vertical-align:middle;width:42px;height:26px;padding:0;margin:8px;}@media print{.css-pvxxzy{-webkit-print-color-adjust:exact;color-adjust:exact;}}.css-pvxxzy .MuiSwitch-switchBase{padding:0;margin:2px;transition-duration:300ms;}.css-pvxxzy .MuiSwitch-switchBase.Mui-checked{-webkit-transform:translateX(16px);-moz-transform:translateX(16px);-ms-transform:translateX(16px);transform:translateX(16px);color:#fff;}.css-pvxxzy .MuiSwitch-switchBase.Mui-checked+.MuiSwitch-track{background-color:#65C466;opacity:1;border:0;}.css-pvxxzy .MuiSwitch-switchBase.Mui-checked.Mui-disabled+.MuiSwitch-track{opacity:0.5;}.css-pvxxzy .MuiSwitch-switchBase.Mui-focusVisible .MuiSwitch-thumb{color:#33cf4d;border:6px solid #fff;}.css-pvxxzy .MuiSwitch-switchBase.Mui-disabled .MuiSwitch-thumb{color:#f5f5f5;}.css-pvxxzy .MuiSwitch-switchBase.Mui-disabled+.MuiSwitch-track{opacity:0.7;}.css-pvxxzy .MuiSwitch-thumb{box-sizing:border-box;width:22px;height:22px;}.css-pvxxzy .MuiSwitch-track{border-radius:13px;background-color:#E9E9EA;opacity:1;-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;}.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-15mzeq5{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:58px;height:38px;overflow:hidden;padding:12px;box-sizing:border-box;position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;z-index:0;vertical-align:middle;width:28px;height:16px;padding:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}@media print{.css-15mzeq5{-webkit-print-color-adjust:exact;color-adjust:exact;}}.css-15mzeq5:active .MuiSwitch-thumb{width:15px;}.css-15mzeq5:active .MuiSwitch-switchBase.Mui-checked{-webkit-transform:translateX(9px);-moz-transform:translateX(9px);-ms-transform:translateX(9px);transform:translateX(9px);}.css-15mzeq5 .MuiSwitch-switchBase{padding:2px;}.css-15mzeq5 .MuiSwitch-switchBase.Mui-checked{-webkit-transform:translateX(12px);-moz-transform:translateX(12px);-ms-transform:translateX(12px);transform:translateX(12px);color:#fff;}.css-15mzeq5 .MuiSwitch-switchBase.Mui-checked+.MuiSwitch-track{opacity:1;background-color:#1890ff;}.css-15mzeq5 .MuiSwitch-thumb{box-shadow:0 2px 4px 0 rgb(0 35 11 / 20%);width:12px;height:12px;border-radius:6px;-webkit-transition:width 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:width 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;}.css-15mzeq5 .MuiSwitch-track{border-radius:8px;opacity:1;background-color:rgba(0,0,0,.25);box-sizing:border-box;}.css-bhi5xm{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.css-m11v7m{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;cursor:pointer;vertical-align:middle;-webkit-tap-highlight-color:transparent;margin-left:-11px;margin-right:16px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-left:16px;}.css-m11v7m.Mui-disabled{cursor:default;}.css-m11v7m .MuiFormControlLabel-label.Mui-disabled{color:rgba(0, 0, 0, 0.38);}.css-46az0k{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-top:32px;margin-bottom:32px;}.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-128wqv7{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-width:64px;padding:6px 16px;border:0;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;padding:6px 8px;color:var(--variant-textColor);background-color:var(--variant-textBg);--variant-textColor:hsl(210, 14%, 87%);--variant-outlinedColor:hsl(210, 14%, 87%);--variant-outlinedBorder:hsla(210, 14%, 87%, 0.5);--variant-containedColor:hsl(210, 14%, 22%);--variant-containedBg:hsl(210, 14%, 87%);padding:4px 5px;font-size:0.8125rem;box-shadow:none;-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;-webkit-transition:all 120ms ease-in;transition:all 120ms ease-in;padding:6px 10px;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:500;border-radius:10px;color:hsl(215, 15%, 22%);}.css-128wqv7::-moz-focus-inner{border-style:none;}.css-128wqv7.Mui-disabled{pointer-events:none;cursor:default;}@media print{.css-128wqv7{-webkit-print-color-adjust:exact;color-adjust:exact;}}.css-128wqv7:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-128wqv7:hover{-webkit-text-decoration:none;text-decoration:none;}.css-128wqv7.Mui-disabled{color:rgba(0, 0, 0, 0.26);}@media (hover: hover){.css-128wqv7:hover{--variant-containedBg:hsl(210, 14%, 60.9%);--variant-textBg:hsla(210, 14%, 87%, 0.04);--variant-outlinedBorder:hsl(210, 14%, 87%);--variant-outlinedBg:hsla(210, 14%, 87%, 0.04);}}.css-128wqv7:hover{box-shadow:none;}.css-128wqv7.Mui-focusVisible{box-shadow:none;}.css-128wqv7:active{box-shadow:none;}.css-128wqv7.Mui-disabled{box-shadow:none;}.css-128wqv7.MuiButton-loading{color:transparent;}.css-128wqv7 .MuiButton-startIcon{-webkit-transition:0.15s;transition:0.15s;margin-right:4px;margin-left:-1px;}.css-128wqv7 .MuiButton-endIcon{-webkit-transition:0.15s;transition:0.15s;margin-left:4px;}.css-128wqv7:hover{background-color:hsl(215, 15%, 97%);}.css-128wqv7:active{background-color:hsl(215, 15%, 89%);}.css-1siv2hp{display:inherit;margin-right:8px;margin-left:-4px;margin-left:-2px;}.css-1siv2hp>*:nth-of-type(1){font-size:18px;}.css-1drcvtn{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:1em;height:1em;display:inline-block;-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;fill:currentColor;font-size:1.5rem;margin-right:4px;}.css-1r9kwv0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:4px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.css-1uu3wz3{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);color:hsl(215, 15%, 22%);}.css-3z0pvq{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%;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;--IconButton-hoverBg:rgba(0, 0, 0, 0.04);border-radius:12px;-webkit-transition:all 100ms ease-in;transition:all 100ms ease-in;}.css-3z0pvq::-moz-focus-inner{border-style:none;}.css-3z0pvq.Mui-disabled{pointer-events:none;cursor:default;}@media print{.css-3z0pvq{-webkit-print-color-adjust:exact;color-adjust:exact;}}.css-3z0pvq:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-3z0pvq:hover{background-color:var(--IconButton-hoverBg);}@media (hover: none){.css-3z0pvq:hover{background-color:transparent;}}.css-3z0pvq.Mui-disabled{background-color:transparent;color:rgba(0, 0, 0, 0.26);}.css-3z0pvq.MuiIconButton-loading{color:transparent;}.css-3z0pvq:hover{border-color:hsl(215, 15%, 82%);background:hsl(215, 15%, 97%);}.css-3z0pvq:active{background:hsl(215, 15%, 92%);}.css-cgbyev{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:1em;height:1em;display:inline-block;-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;fill:currentColor;font-size:1.5rem;font-size:15px;color:hsl(215, 15%, 22%);}.css-1n7d4b{margin:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;border-width:0;border-style:solid;border-color:hsl(215, 15%, 92%);border-bottom-width:thin;border-color:hsl(215, 15%, 92%);margin-top:16px;margin-bottom:16px;}.css-9jay18{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;}.css-65oz8c{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-width:64px;padding:6px 16px;border:0;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;padding:6px 8px;color:var(--variant-textColor);background-color:var(--variant-textBg);--variant-textColor:hsl(210, 100%, 45%);--variant-outlinedColor:hsl(210, 100%, 45%);--variant-outlinedBorder:hsla(210, 100%, 45%, 0.5);--variant-containedColor:#fff;--variant-containedBg:hsl(210, 100%, 45%);padding:4px 5px;font-size:0.8125rem;box-shadow:none;-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;-webkit-transition:all 120ms ease-in;transition:all 120ms ease-in;padding:6px 10px;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:500;border-radius:10px;color:hsl(210, 100%, 42%);}.css-65oz8c::-moz-focus-inner{border-style:none;}.css-65oz8c.Mui-disabled{pointer-events:none;cursor:default;}@media print{.css-65oz8c{-webkit-print-color-adjust:exact;color-adjust:exact;}}.css-65oz8c:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-65oz8c:hover{-webkit-text-decoration:none;text-decoration:none;}.css-65oz8c.Mui-disabled{color:rgba(0, 0, 0, 0.26);}@media (hover: hover){.css-65oz8c:hover{--variant-containedBg:hsl(210, 100%, 38%);--variant-textBg:hsla(210, 100%, 45%, 0.04);--variant-outlinedBorder:hsl(210, 100%, 45%);--variant-outlinedBg:hsla(210, 100%, 45%, 0.04);}}.css-65oz8c:hover{box-shadow:none;}.css-65oz8c.Mui-focusVisible{box-shadow:none;}.css-65oz8c:active{box-shadow:none;}.css-65oz8c.Mui-disabled{box-shadow:none;}.css-65oz8c.MuiButton-loading{color:transparent;}.css-65oz8c .MuiButton-startIcon{-webkit-transition:0.15s;transition:0.15s;margin-right:4px;margin-left:-1px;}.css-65oz8c .MuiButton-endIcon{-webkit-transition:0.15s;transition:0.15s;margin-left:4px;}.css-65oz8c:hover{background-color:hsla(210, 100%, 90%, 0.3);}.css-65oz8c:active{background-color:hsla(210, 100%, 90%, 0.5);}.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-1icctab{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:8px;-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-173idsg{margin:0;font:inherit;line-height:inherit;letter-spacing:inherit;color:hsl(210, 100%, 45%);-webkit-text-decoration:none;text-decoration:none;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;font-weight:600;color:hsl(210, 100%, 42%);}.css-173idsg.MuiTypography-body1>svg{margin-top:2px;}.css-173idsg svg:last-child{margin-left:2px;}.css-173idsg:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-173idsg:hover{color:hsl(210, 100%, 38%);}.css-1quk7ah{vertical-align:bottom;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:hsl(200, 10%, 4%);}.css-1aqg8hk{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:hsl(215, 15%, 65%);font-size:13px;opacity:70%;}.css-irypel{margin:0;font:inherit;line-height:inherit;letter-spacing:inherit;color:hsl(210, 100%, 45%);-webkit-text-decoration:none;text-decoration:none;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;font-weight:600;color:hsl(210, 100%, 42%);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:2px;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:500;color:hsl(210, 100%, 42%);}.css-irypel.MuiTypography-body1>svg{margin-top:2px;}.css-irypel svg:last-child{margin-left:2px;}.css-irypel:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-irypel:hover{color:hsl(210, 100%, 38%);}.css-irypel>svg{font-size:13px;-webkit-transition:0.2s;transition:0.2s;}.css-irypel:hover>svg{-webkit-transform:translateX(2px);-moz-transform:translateX(2px);-ms-transform:translateX(2px);transform:translateX(2px);}.css-5ax1kt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:8px;}.css-q8575k{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%;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;--IconButton-hoverBg:rgba(0, 0, 0, 0.04);padding:5px;font-size:1.125rem;border-radius:12px;-webkit-transition:all 100ms ease-in;transition:all 100ms ease-in;height:32px;width:32px;}.css-q8575k::-moz-focus-inner{border-style:none;}.css-q8575k.Mui-disabled{pointer-events:none;cursor:default;}@media print{.css-q8575k{-webkit-print-color-adjust:exact;color-adjust:exact;}}.css-q8575k:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-q8575k:hover{background-color:var(--IconButton-hoverBg);}@media (hover: none){.css-q8575k:hover{background-color:transparent;}}.css-q8575k.Mui-disabled{background-color:transparent;color:rgba(0, 0, 0, 0.26);}.css-q8575k.MuiIconButton-loading{color:transparent;}.css-q8575k:hover{border-color:hsl(215, 15%, 82%);background:hsl(215, 15%, 97%);}.css-q8575k:active{background:hsl(215, 15%, 92%);}.css-q8575k .MuiSvgIcon-root{font-size:1.125rem;}.css-xf0l99{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:1em;height:1em;display:inline-block;-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;fill:currentColor;font-size:1.25rem;color:hsl(215, 15%, 65%);}.css-1bqobp2{top:var(--MuiDocs-header-height);margin-top:var(--MuiDocs-header-height);padding-left:6px;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;scrollbar-width:thin;}@media (min-width:900px){.css-1bqobp2{display:block;}}.css-14e31vo{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:600;text-transform:uppercase;letter-spacing:.1rem;color:hsl(215, 15%, 40%);}.css-1bokhcy{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-1532b6q{margin:0;font:inherit;line-height:inherit;letter-spacing:inherit;color:hsl(210, 100%, 45%);display:block;-webkit-text-decoration:none;text-decoration:none;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;font-weight:600;color:hsl(210, 100%, 42%);box-sizing:border-box;padding:6px 0 6px 12px;border-left:1px solid transparent;display:block;font-size:0.8125rem;font-weight:500;text-overflow:ellipsis;overflow:hidden;color:hsl(215, 15%, 12%);}.css-1532b6q.MuiTypography-body1>svg{margin-top:2px;}.css-1532b6q svg:last-child{margin-left:2px;}.css-1532b6q:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-1532b6q:hover{color:hsl(210, 100%, 38%);}.css-1532b6q:hover{border-left-color:hsl(215, 15%, 75%);color:hsl(215, 15%, 50%);}.css-1532b6q:active{border-left-color:hsl(210, 100%, 80%);color:hsl(210, 100%, 42%);}.css-1532b6q:active:hover{border-left-color:hsl(210, 100%, 42%);color:hsl(210, 100%, 42%);}.css-1exy4yq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-top:16px;margin-left:4px;margin-right:4px;}.css-s18vc2{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-left:1px solid;border-right:1px solid;border-bottom:0;border-color:hsl(215, 15%, 92%);-webkit-transition:background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;}.css-s18vc2:first-of-type{border-top:1px solid hsl(215, 15%, 92%);border-radius:12px 12px 0 0;}.css-s18vc2:hover{background-color:hsl(215, 15%, 97%);}.css-s18vc2:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:-3px;}.css-s18vc2 img{display:inline-block;}.css-12rnmal{height:25px;width:116px;}.css-25nckq{margin:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;border-width:0;border-style:solid;border-color:hsl(215, 15%, 92%);border-bottom-width:thin;border-color:hsl(215, 15%, 92%);}.css-1h9x0ym{height:29px;width:70px;}.css-es0i9d{margin:0;font:inherit;line-height:inherit;letter-spacing:inherit;color:hsl(210, 100%, 45%);-webkit-text-decoration:none;text-decoration:none;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;font-weight:600;color:hsl(210, 100%, 42%);height:45px;width:100%;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:1px dashed;border-color:hsl(215, 15%, 82%);border-radius:0 0 12px 12px;background-color:hsla(210, 100%, 96%, 0.4);-webkit-transition: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,background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;}.css-es0i9d.MuiTypography-body1>svg{margin-top:2px;}.css-es0i9d svg:last-child{margin-left:2px;}.css-es0i9d:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-es0i9d:hover{color:hsl(210, 100%, 38%);}.css-es0i9d:hover{background-color:hsl(210, 100%, 96%);border-color:hsl(210, 100%, 80%);}.css-es0i9d:focus-visible{outline-offset:-3px;}.css-4xnl8u{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;}.css-x8hyjl{margin:0;font:inherit;line-height:inherit;letter-spacing:inherit;color:hsl(210, 100%, 45%);-webkit-text-decoration:none;text-decoration:none;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;font-weight:600;color:hsl(210, 100%, 42%);margin-top:16px;margin-left:4px;margin-right:4px;margin-bottom:16px;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;border:1px solid;border-color:hsl(215, 15%, 92%);border-radius:12px;transition-property:all;transition-timing:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.css-x8hyjl.MuiTypography-body1>svg{margin-top:2px;}.css-x8hyjl svg:last-child{margin-left:2px;}.css-x8hyjl:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-x8hyjl:hover{color:hsl(210, 100%, 38%);}.css-x8hyjl:hover,.css-x8hyjl:focus-visible{background-color:hsl(210, 100%, 96%);border-color:hsl(210, 100%, 80%);}.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-pq6m89{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);color:hsl(215, 15%, 22%);font-weight:500;}.css-1f23llj{position:fixed;bottom:24px;right:24px;z-index:10;}.css-10tto1t{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:56px;height:56px;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:hsl(215, 15%, 82%);width:40px;height:40px;background-color:hsl(210, 100%, 96%);border:1px solid hsl(210, 100%, 80%);box-shadow:0px 4px 12px rgba(0, 0, 0, 0.1);}.css-10tto1t::-moz-focus-inner{border-style:none;}.css-10tto1t.Mui-disabled{pointer-events:none;cursor:default;}@media print{.css-10tto1t{-webkit-print-color-adjust:exact;color-adjust:exact;}}.css-10tto1t:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-10tto1t: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-10tto1t:hover{background-color:#f5f5f5;-webkit-text-decoration:none;text-decoration:none;}@media (hover: none){.css-10tto1t:hover{background-color:hsl(215, 15%, 82%);}}.css-10tto1t.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-10tto1t.Mui-disabled{color:rgba(0, 0, 0, 0.26);box-shadow:none;background-color:rgba(0, 0, 0, 0.12);}.css-10tto1t:hover{background-color:hsl(210, 100%, 80%);}.css-8fsf1z{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:1em;height:1em;display:inline-block;-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;fill:currentColor;font-size:1.5rem;color:hsl(210, 100%, 30%);}
React Switch component - Material UI Skip to content
Switch Switches toggle the state of a single setting on or off.
Switches are the preferred way to adjust settings on mobile.
The option that the switch controls, as well as the state it's in,
should be made clear from the corresponding inline label.
Press Enter to start editing
You can provide a label to the Switch
thanks to the FormControlLabel
component.
Press Enter to start editing
Use the size
prop to change the size of the switch.
Press Enter to start editing
Press Enter to start editing
You can control the switch with the checked
and onChange
props:
Press Enter to start editing
FormGroup
is a helpful wrapper used to group selection controls components that provides an easier API.
However, you are encouraged to use Checkboxes instead if multiple related controls are required. (See: When to use ).
Here are some examples of customizing the component.
You can learn more about this in the overrides documentation page .
🎨 If you are looking for inspiration, you can check MUI Treasury's customization examples .
You can change the placement of the label:
It will render an element with the checkbox
role not switch
role since this
role isn't widely supported yet. Please test first if assistive technology of your
target audience supports this role properly. Then you can change the role with
<Switch inputProps={{ role: 'switch' }}>
All form controls should have labels, and this includes radio buttons, checkboxes, and switches. In most cases, this is done by using the <label>
element (FormControlLabel ).
When a label can't be used, it's necessary to add an attribute directly to the input component.
In this case, you can apply the additional attribute (for example aria-label
, aria-labelledby
, title
) via the inputProps
prop.
< Switch value = " checkedA" inputProps = { { 'aria-label' : 'Switch A' } } />
Copy Copied (or $keyC)
Use the Base UI Switch for complete ownership of the component's design, with no Material UI or Joy UI styles to override.
This unstyled version of the component is the ideal choice for heavy customization with a smaller bundle size.
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.
Contents
MUI stands in solidarity with Ukraine.