/* inter-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/static/media/inter-cyrillic-ext-400-normal.39fbf8d2c4abc46f721f.woff2') format('woff2'), url('/static/media/inter-cyrillic-ext-400-normal.818b84180553acc613f3.woff') format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* inter-cyrillic-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/static/media/inter-cyrillic-400-normal.89455522650c3fb3654c.woff2') format('woff2'), url('/static/media/inter-cyrillic-400-normal.dd21c71421d58232ef03.woff') format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* inter-greek-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/static/media/inter-greek-ext-400-normal.f2ef63e732b18d636044.woff2') format('woff2'), url('/static/media/inter-greek-ext-400-normal.fc80974ec6969ee03fd2.woff') format('woff');
  unicode-range: U+1F00-1FFF;
}
/* inter-greek-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/static/media/inter-greek-400-normal.e685387f69602567b1da.woff2') format('woff2'), url('/static/media/inter-greek-400-normal.b412faded087fbcfa4ff.woff') format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
/* inter-vietnamese-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/static/media/inter-vietnamese-400-normal.44c9df135eec470b0ab6.woff2') format('woff2'), url('/static/media/inter-vietnamese-400-normal.aaa15d735e3826061950.woff') format('woff');
  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;
}
/* inter-latin-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/static/media/inter-latin-ext-400-normal.210fb826cb25acbd4094.woff2') format('woff2'), url('/static/media/inter-latin-ext-400-normal.c616205185f0d3677df9.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;
}
/* inter-latin-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/static/media/inter-latin-400-normal.eca1e21531598d5db58f.woff2') format('woff2'), url('/static/media/inter-latin-400-normal.2ea1079c0069eb040a52.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;
}
/* inter-cyrillic-ext-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/static/media/inter-cyrillic-ext-500-normal.b2740f247d3be4a05ca0.woff2') format('woff2'), url('/static/media/inter-cyrillic-ext-500-normal.e9974e820735012b025b.woff') format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* inter-cyrillic-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/static/media/inter-cyrillic-500-normal.33a76a7cbcfcb7076534.woff2') format('woff2'), url('/static/media/inter-cyrillic-500-normal.72f7a9db87626ca30c76.woff') format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* inter-greek-ext-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/static/media/inter-greek-ext-500-normal.4c6d520b97e3bb4ef613.woff2') format('woff2'), url('/static/media/inter-greek-ext-500-normal.47cc2391a7edf82cf4e1.woff') format('woff');
  unicode-range: U+1F00-1FFF;
}
/* inter-greek-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/static/media/inter-greek-500-normal.e7cec4ef4f6780e90a52.woff2') format('woff2'), url('/static/media/inter-greek-500-normal.6d34bacda2be54829b97.woff') format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
/* inter-vietnamese-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/static/media/inter-vietnamese-500-normal.63d02ea896a7406849b6.woff2') format('woff2'), url('/static/media/inter-vietnamese-500-normal.296d66c0bba9086788b9.woff') format('woff');
  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;
}
/* inter-latin-ext-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/static/media/inter-latin-ext-500-normal.cdb4dd5dc508fe6e7398.woff2') format('woff2'), url('/static/media/inter-latin-ext-500-normal.2f93aaa35e870cec4704.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;
}
/* inter-latin-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/static/media/inter-latin-500-normal.b7c27c60f848f2083f45.woff2') format('woff2'), url('/static/media/inter-latin-500-normal.5014db633e71a7741bf5.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;
}
/* inter-cyrillic-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('/static/media/inter-cyrillic-ext-600-normal.8c6413cdd8004fde0a19.woff2') format('woff2'), url('/static/media/inter-cyrillic-ext-600-normal.d6d44e8705a633436dfe.woff') format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* inter-cyrillic-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('/static/media/inter-cyrillic-600-normal.fdee7b66c2d88216b75f.woff2') format('woff2'), url('/static/media/inter-cyrillic-600-normal.8609e1b95284125f21cb.woff') format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* inter-greek-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('/static/media/inter-greek-ext-600-normal.c3c138d889b8c929822c.woff2') format('woff2'), url('/static/media/inter-greek-ext-600-normal.c7983dac0ad6a359aef0.woff') format('woff');
  unicode-range: U+1F00-1FFF;
}
/* inter-greek-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('/static/media/inter-greek-600-normal.984050ecee12eabe9366.woff2') format('woff2'), url('/static/media/inter-greek-600-normal.d8b0044cf6afdd52b07b.woff') format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
/* inter-vietnamese-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('/static/media/inter-vietnamese-600-normal.6984cf5e8583fac83be3.woff2') format('woff2'), url('/static/media/inter-vietnamese-600-normal.04bb56ffa463ab55708d.woff') format('woff');
  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;
}
/* inter-latin-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('/static/media/inter-latin-ext-600-normal.8148c3ae14dfaefc62ca.woff2') format('woff2'), url('/static/media/inter-latin-ext-600-normal.4d0d5017d71ea1750fc1.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;
}
/* inter-latin-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('/static/media/inter-latin-600-normal.69a8d1d484967aba2389.woff2') format('woff2'), url('/static/media/inter-latin-600-normal.f10265da6bd8d66999ac.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;
}
/* inter-cyrillic-ext-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/static/media/inter-cyrillic-ext-700-normal.b0c28c6752a13fa5abaf.woff2') format('woff2'), url('/static/media/inter-cyrillic-ext-700-normal.43f6f7e8a4205f05e58c.woff') format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* inter-cyrillic-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/static/media/inter-cyrillic-700-normal.533055ff3700190d8dfa.woff2') format('woff2'), url('/static/media/inter-cyrillic-700-normal.9f2de06ca9a7c8458434.woff') format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* inter-greek-ext-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/static/media/inter-greek-ext-700-normal.c9429f4b77b1f85e999d.woff2') format('woff2'), url('/static/media/inter-greek-ext-700-normal.0f8675bdd7f3fe3a3dba.woff') format('woff');
  unicode-range: U+1F00-1FFF;
}
/* inter-greek-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/static/media/inter-greek-700-normal.3f04511ca7c0cea0cc2f.woff2') format('woff2'), url('/static/media/inter-greek-700-normal.8b95c1e2b193d0541864.woff') format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
/* inter-vietnamese-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/static/media/inter-vietnamese-700-normal.d1c85cabbe96efcaeb68.woff2') format('woff2'), url('/static/media/inter-vietnamese-700-normal.05b640f829d1ac5ff29d.woff') format('woff');
  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;
}
/* inter-latin-ext-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/static/media/inter-latin-ext-700-normal.bc59219ed344909a4f53.woff2') format('woff2'), url('/static/media/inter-latin-ext-700-normal.d4a91814dd3f1e022ab1.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;
}
/* inter-latin-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/static/media/inter-latin-700-normal.1104236696a5d2d1f236.woff2') format('woff2'), url('/static/media/inter-latin-700-normal.c73ae7252669254d2588.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: 'SFProDisplay-Semibold';
    src: url('/static/media/SFProDisplay-Semibold.e563de5c65c7d63f04e7.ttf') format('truetype');
}

@font-face {
    font-family: 'SFProDisplay-Regular';
    src: url('/static/media/SFProDisplay-Regular.1e1c0e29b79b49a6ff4d.ttf') format('truetype');
}

@font-face {
    font-family: 'engage-icons';
    src: url('/static/media/engage-icons.6caaf70a2ec72b4653ed.eot?po8poo');
    src:
        url('/static/media/engage-icons.6caaf70a2ec72b4653ed.eot?po8poo#iefix') format('embedded-opentype'),
        url('/static/media/engage-icons.9f87939c35b82fe87819.ttf?po8poo') format('truetype'),
        url('/static/media/engage-icons.66428b7c21671c5697ae.woff?po8poo') format('woff'),
        url('/static/media/engage-icons.918fac36a07facee6322.svg?po8poo#engage-icons') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^='icon-'],
[class*=' icon-'] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'engage-icons' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-barge-in:before {
    content: '\e900';
}

.icon-coach:before {
    content: '\e901';
}

.icon-monitor:before {
    content: '\e902';
}

.icon-external-link:before {
    content: '\e903';
}

.icon-doc:before {
    content: '\e904';
}

.icon-tick:before {
    content: '\e905';
}

.icon-minus:before {
    content: '\e906';
}

.icon-sync:before {
    content: '\e907';
}

.icon-restart:before {
    content: '\e908';
}

.icon-sorting:before {
    content: '\e909';
}

.icon-time:before {
    content: '\e90a';
}

.icon-sort:before {
    content: '\e90b';
}

.icon-plus:before {
    content: '\e90c';
}

.icon-list:before {
    content: '\e90d';
}

.icon-kebab:before {
    content: '\e90e';
}

.icon-user:before {
    content: '\e90f';
}

.icon-hidepassword:before {
    content: '\e910';
}

.icon-dropdown:before {
    content: '\e911';
}

.icon-download:before {
    content: '\e912';
}

.icon-removetext:before {
    content: '\e913';
}

.icon-calendar:before {
    content: '\e914';
}

.icon-chat-switcher:before {
    content: '\e915';
}

.icon-phone-switcher:before {
    content: '\e916';
}

.icon-agentscripts:before {
    content: '\e917';
}

.icon-agentstats:before {
    content: '\e918';
}

.icon-agenttools:before {
    content: '\e919';
}

.icon-analytics:before {
    content: '\e91a';
}

.icon-appgallery:before {
    content: '\e91b';
}

.icon-applications:before {
    content: '\e91c';
}

.icon-callhistory:before {
    content: '\e91d';
}

.icon-channels:before {
    content: '\e91e';
}

.icon-devtools:before {
    content: '\e91f';
}

.icon-dialpad:before {
    content: '\e920';
}

.icon-digital:before {
    content: '\e921';
}

.icon-hamburger:before {
    content: '\e922';
}

.icon-edit:before {
    content: '\e923';
}

.icon-inbox:before {
    content: '\e924';
}

.icon-internalchat:before {
    content: '\e925';
}

.icon-ivr:before {
    content: '\e926';
}

.icon-information:before {
    content: '\e927';
}

.icon-leftchevron:before {
    content: '\e928';
}

.icon-more:before {
    content: '\e929';
}

.icon-mytasks:before {
    content: '\e92a';
}

.icon-outbounddialer:before {
    content: '\e92b';
}

.icon-play:before {
    content: '\e92c';
}

.icon-scheduledcallbacks:before {
    content: '\e92d';
}

.icon-rightchevron:before {
    content: '\e92e';
}

.icon-search:before {
    content: '\e92f';
}

.icon-settings:before {
    content: '\e930';
}

.icon-routing:before {
    content: '\e931';
}

.icon-agentchat:before {
    content: '\e932';
}

.icon-addnew:before {
    content: '\e933';
}

.icon-diallead:before {
    content: '\e934';
}

.icon-listview:before {
    content: '\e935';
}

.icon-close:before {
    content: '\e936';
}

.icon-manualpass:before {
    content: '\e937';
}

.icon-stackview:before {
    content: '\e938';
}

.icon-downchevron:before {
    content: '\e939';
}

.icon-expand:before {
    content: '\e93a';
}

.icon-filter:before {
    content: '\e93b';
}

.icon-inboundcall:before {
    content: '\e93c';
}

.icon-showpassword:before {
    content: '\e93d';
}

.icon-listlogs:before {
    content: '\e93e';
}

.icon-merge:before {
    content: '\e93f';
}

.icon-outboundcall:before {
    content: '\e940';
}

.icon-import:before {
    content: '\e941';
}

.icon-requeue:before {
    content: '\e942';
}

.icon-shuffle:before {
    content: '\e943';
}

.icon-trashcan:before {
    content: '\e944';
}

.icon-tag:before {
    content: '\e945';
}

.icon-new_nav-folders:before {
    content: '\e946';
}

.icon-upchevron:before {
    content: '\e947';
}

.icon-agentnote:before {
    content: '\e948';
}

.icon-agentvoice:before {
    content: '\e949';
}

.icon-back:before {
    content: '\e94a';
}

.icon-complete:before {
    content: '\e94b';
}

.icon-disposition:before {
    content: '\e94c';
}

.icon-hold:before {
    content: '\e94d';
}

.icon-mute:before {
    content: '\e94e';
}

.icon-record:before {
    content: '\e94f';
}

.icon-transfer:before {
    content: '\e950';
}

.icon-supervisor:before {
    content: '\e951';
}

.icon-users:before {
    content: '\e952';
}

.icon-searchalt:before {
    content: '\e953';
}

.icon-arrow-icon:before {
    content: '\e954';
}

.icon-manualpass_filled:before {
    content: '\e955';
}

.icon-outboundcall-filled:before {
    content: '\e956';
}

.icon-inboundcall-filled:before {
    content: '\e957';
}

.icon-internet:before {
    content: '\e958';
}

.icon-emptystate-scripts:before {
    content: '\e959';
}

.icon-expand-details:before {
    content: '\e95a';
}

.icon-collapse-details:before {
    content: '\e95b';
}

.icon-copy:before {
    content: '\e95c';
}

.icon-emptystate-callinprogress:before {
    content: '\e95d';
}

.icon-emptystate-calls:before {
    content: '\e95e';
}

.icon-timer:before {
    content: '\e95f';
}

.icon-table:before {
    content: '\e960';
}

.icon-graph:before {
    content: '\e961';
}

.icon-gear-outlined:before {
    content: '\e962';
}

.icon-gear-filled:before {
    content: '\e963';
}

.icon-close-2:before {
    content: '\e964';
}

.icon-caret-right:before {
    content: '\e965';
}

.sui-form-field-label {font-size: var(--sui-typography-descriptor-mini-font-size);font-weight: var(--sui-typography-descriptor-mini-font-weight);line-height: var(--sui-typography-descriptor-mini-line-height);-webkit-text-decoration: var(--sui-typography-descriptor-mini-text-decoration);text-decoration: var(--sui-typography-descriptor-mini-text-decoration);text-transform: var(--sui-typography-descriptor-mini-text-transform);font-family: var(--sui-font-family);display: flex;--tw-text-opacity: 1;color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)))
}

@media (prefers-reduced-motion: no-preference) {.sui-form-field-label {transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;transition-duration: var(--sui-transition-neutral-01-fast-transition-duration);transition-timing-function: var(--sui-transition-neutral-01-fast-transition-timing-function)
  }
}

.sui-form-field-helper-text {font-size: var(--sui-typography-descriptor-font-size);font-weight: var(--sui-typography-descriptor-font-weight);line-height: var(--sui-typography-descriptor-line-height);-webkit-text-decoration: var(--sui-typography-descriptor-text-decoration);text-decoration: var(--sui-typography-descriptor-text-decoration);text-transform: var(--sui-typography-descriptor-text-transform);font-family: var(--sui-font-family);margin-top: var(--sui-spacing-1);--tw-text-opacity: 1;color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-text-opacity)))
}

@media (prefers-reduced-motion: no-preference) {.sui-form-field-helper-text {transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;transition-duration: var(--sui-transition-neutral-01-fast-transition-duration);transition-timing-function: var(--sui-transition-neutral-01-fast-transition-timing-function)
  }
}

.sui-form-field-content {box-sizing: border-box;display: flex;align-items: center;justify-content: flex-start;overflow: hidden;border-color: var(--sui-colors-neutral-b0-t20)
}

@media (prefers-reduced-motion: no-preference) {.sui-form-field-content {transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;transition-duration: var(--sui-transition-neutral-01-fast-transition-duration);transition-timing-function: var(--sui-transition-neutral-01-fast-transition-timing-function)
  }
}

.sui-form-field-container {position: relative
}

.sui-form-field-focus-effect {pointer-events: none;position: absolute;inset: var(--sui-spacing-0);--tw-border-opacity: 1;border-color: rgb(var(--s-primary-f), calc(var(--s-primary-f-opacity, 1) * var(--tw-border-opacity)))
}

.sui-form-field-outlined,
  .sui-form-field-contained {border-radius: var(--sui-border-radius-sm);--sui-focus-ring-border-radius: var(--sui-border-radius-sm)
}

.sui-form-field-outlined-label, .sui-form-field-contained-label {margin-bottom: var(--sui-spacing-1)
}

.sui-form-field-outlined-xlarge, .sui-form-field-contained-xlarge {padding-left: var(--sui-spacing-4);padding-right: var(--sui-spacing-4)
}

.sui-form-field-outlined-large, .sui-form-field-contained-large {padding-left: var(--sui-spacing-3);padding-right: var(--sui-spacing-3)
}

.sui-form-field-outlined-medium, .sui-form-field-contained-medium {padding-left: var(--sui-spacing-2\.5);padding-right: var(--sui-spacing-2\.5)
}

.sui-form-field-outlined-content, .sui-form-field-contained-content {border-style: solid;border-radius: var(--sui-border-radius-sm);--sui-focus-ring-border-radius: var(--sui-border-radius-sm);--sui-focus-ring-border-width-recoup: 1
}

@media (hover: hover) {
  .sui-form-field-outlined-content:hover, .sui-form-field-contained-content:hover {--tw-border-opacity: 1;border-color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-border-opacity)))
  }
}

.sui-form-field-outlined:focus .sui-form-field-focus-effect, .sui-form-field-outlined:focus-within .sui-form-field-focus-effect, .sui-form-field-outlined.sui-focused .sui-form-field-focus-effect, .sui-form-field-contained:focus .sui-form-field-focus-effect, .sui-form-field-contained:focus-within .sui-form-field-focus-effect, .sui-form-field-contained.sui-focused .sui-form-field-focus-effect {box-sizing: border-box;border-style: solid;border-radius: var(--sui-border-radius-sm);--sui-focus-ring-border-radius: var(--sui-border-radius-sm);border-width: var(--sui-border-width-2);--sui-focus-ring-border-width: var(--sui-border-width-2);--sui-focus-ring-border-width-recoup: 1
}

.sui-form-field-outlined-content {--tw-bg-opacity: 1;background-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-bg-opacity)));border-width: var(--sui-border-width-1);--sui-focus-ring-border-width: var(--sui-border-width-1)
}

@media (hover: hover) {
  .sui-form-field-outlined-content:hover {--tw-bg-opacity: 1;background-color: rgb(var(--s-neutral-b5), calc(var(--s-neutral-b5-opacity, 1) * var(--tw-bg-opacity)))
  }
}

.sui-form-field-contained-content {background-color: var(--sui-colors-neutral-b4-t50);border-width: var(--sui-border-width-0);--sui-focus-ring-border-width: var(--sui-border-width-0)
}

@media (hover: hover) {
  .sui-form-field-contained-content:hover {--tw-bg-opacity: 1;background-color: rgb(var(--s-neutral-b4), calc(var(--s-neutral-b4-opacity, 1) * var(--tw-bg-opacity)))
  }
}

.sui-form-field-standard-content {border-style: solid;border-color: var(--sui-colors-neutral-b0-t20);border-top-color: transparent;border-width: var(--sui-border-width-0);--sui-focus-ring-border-width: var(--sui-border-width-0);border-top-width: var(--sui-border-width-1);border-bottom-width: var(--sui-border-width-1);--sui-focus-ring-border-width-recoup: 1
}

@media (hover: hover) {
  .sui-form-field-standard-content:hover {--tw-border-opacity: 1;border-bottom-color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-border-opacity)))
  }
}

.sui-form-field-standard-focus-effect {border-width: var(--sui-border-width-0);--sui-focus-ring-border-width: var(--sui-border-width-0);border-bottom-width: var(--sui-border-width-2);transform-origin: center;--tw-scale-x: 0;transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-style: solid;--sui-focus-ring-border-width-recoup: 1
}

@media (prefers-reduced-motion: no-preference) {.sui-form-field-standard-focus-effect {transition-property: transform;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;transition-duration: var(--sui-transition-neutral-01-fast-transition-duration);transition-timing-function: var(--sui-transition-neutral-01-fast-transition-timing-function)
  }
}

.sui-form-field-standard:focus .sui-form-field-focus-effect, .sui-form-field-standard:focus-within .sui-form-field-focus-effect, .sui-form-field-standard.sui-focused .sui-form-field-focus-effect {--tw-scale-x: 1;transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.sui-form-field-quiet-content {border-width: var(--sui-border-width-0);--sui-focus-ring-border-width: var(--sui-border-width-0)
}

.sui-form-field-xlarge-content {height: var(--sui-spacing-12)
}

.sui-form-field-large-content {height: var(--sui-spacing-9)
}

.sui-form-field-medium-content {height: var(--sui-spacing-8)
}

.sui-form-field-error-helper-text,
    .sui-form-field-error-label {--tw-text-opacity: 1;color: rgb(var(--s-danger-f), calc(var(--s-danger-f-opacity, 1) * var(--tw-text-opacity)))
}

.sui-form-field-error-focus-effect,
    .sui-form-field-error-content {--tw-border-opacity: 1;border-color: rgb(var(--s-danger-f), calc(var(--s-danger-f-opacity, 1) * var(--tw-border-opacity)))
}

@media (hover: hover) {
  .sui-form-field-error-focus-effect:hover, .sui-form-field-error-content:hover {--tw-border-opacity: 1;border-color: rgb(var(--s-danger-high-contrast), calc(var(--s-danger-high-contrast-opacity, 1) * var(--tw-border-opacity)))
  }
}

.sui-form-field-error-standard-content {border-top-color: transparent
}

@media (hover: hover) {
  .sui-form-field-error-standard-content:hover {border-top-color: transparent
  }
}

.sui-form-field-error-contained-content {background-color: var(--sui-colors-danger-t10)
}

@media (hover: hover) {
  .sui-form-field-error-contained-content:hover {background-color: var(--sui-colors-danger-t10)
  }
}

.sui-form-field.sui-disabled .sui-form-field-container {pointer-events: none
}

.sui-form-field.sui-disabled .sui-form-field-content {border-color: var(--sui-colors-neutral-b0-t10)
}

.sui-form-field.sui-disabled .sui-form-field-standard-content {border-top-color: transparent
}

.sui-form-field.sui-disabled .sui-form-field-helper-text {--tw-text-opacity: 1;color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-text-opacity)))
}

.sui-form-field-outlined.sui-disabled .sui-form-field-content, .sui-form-field-contained.sui-disabled .sui-form-field-content {border-color: transparent;--tw-bg-opacity: 1;background-color: rgb(var(--s-neutral-b5), calc(var(--s-neutral-b5-opacity, 1) * var(--tw-bg-opacity)))
}

.sui-form-label-root {
    display: inline-flex;
    align-items: center;
    vertical-align: middle
}

.sui-form-label-label {
    font-size: var(--sui-typography-subtitle-mini-font-size);
    font-weight: var(--sui-typography-subtitle-mini-font-weight);
    line-height: var(--sui-typography-subtitle-mini-line-height);
    -webkit-text-decoration: var(--sui-typography-subtitle-mini-text-decoration);
            text-decoration: var(--sui-typography-subtitle-mini-text-decoration);
    text-transform: var(--sui-typography-subtitle-mini-text-transform);
    font-family: var(--sui-font-family);
    margin-right: var(--sui-spacing-2);
    cursor: pointer;
    --tw-text-opacity: 1;
    color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)))
}

.sui-form-label-label.sui-disabled {
    pointer-events: none;
    --tw-text-opacity: 1;
    color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-text-opacity)))
}

.sui-form-label-end-label {
    margin-left: var(--sui-spacing-2)
}

.sui-form-label-start {
    flex-direction: row-reverse
}

.sui-form-label-start-label {
    margin-right: var(--sui-spacing-2)
}

.sui-form-label-full-width {
    width: 100%;
    justify-content: space-between
}

.sui-squircle-root {
  /* create stacking context, prevent svg element be covered by outside element */
  position: relative;
  z-index: 0;
  outline: 2px solid transparent;
  outline-offset: 2px;
  height: var(--sui-spacing-9);
  width: var(--sui-spacing-9);
  --tw-text-opacity: 1;
  color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--tw-text-opacity)));
  display: flex;
  align-items: center;
  justify-content: center;

  /* ⬇️ public css variable */

  /* use `fill` by default */
  --sui-squircle-border-color: var(--sui-squircle-fill);
  --sui-squircle-border-width: var(--sui-border-width-2);
  --sui-squircle-ring-width: 2px;
  --sui-squircle-ring-offset: 2px;
  --sui-squircle-ring-color: var(--sui-colors-primary-f-high-contrast);
  --sui-squircle-bg-color: var(--sui-colors-primary-b);
  --sui-squircle-bg-color-hover: var(--sui-colors-primary-b-high-contrast);
  --sui-squircle-bg-color-active: var(--sui-colors-neutral-b0);

  /* ⬇️ private css variable */

  --sui-squircle-fill: var(--sui-squircle-bg-color);
}

@media (hover: hover) {

.sui-squircle-interactive:hover {
    --sui-squircle-fill: var(--sui-squircle-bg-color-hover);
    --sui-squircle-border-color: var(
      --sui-squircle-border-color-hover,
      --sui-squircle-border-color
    );
  }
}

.sui-squircle-interactive.sui-active,
  .sui-squircle-interactive:active {
    --sui-squircle-fill: var(--sui-squircle-bg-color-active);
    --sui-squircle-border-color: var(
      --sui-squircle-border-color-active,
      var(--sui-squircle-fill)
    );
  }

.sui-squircle-content {
  position: absolute;
  z-index: -10;
  height: 100%;
  width: 100%;
}

@media (prefers-reduced-motion: no-preference) {

  .sui-squircle-content > path {
    transition-duration: var(--sui-transition-neutral-01-fast-transition-duration);
    transition-timing-function: var(--sui-transition-neutral-01-fast-transition-timing-function);
  }
}

.sui-squircle-content > path {

    transition-property: fill, stroke;
    fill: var(--sui-squircle-fill);
    stroke: var(--sui-squircle-border-color);
    stroke-width: calc(var(--sui-squircle-border-width) * 2);
  }

.sui-squircle-ring {
  position: absolute;
  z-index: -10;

  width: calc(
    100% +
    (var(--sui-squircle-ring-offset) + var(--sui-squircle-ring-width) / 2) * 2
  );
  height: calc(
    100% +
    (var(--sui-squircle-ring-offset) + var(--sui-squircle-ring-width) / 2) * 2
  );
}

.sui-squircle-ring > path {
    stroke: var(--sui-squircle-ring-color);
    stroke-width: var(--sui-squircle-ring-width);
  }

.sui-visually-hidden-root {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0
}

.sui-overlap-root {
  position: relative;
  display: inline-flex
}

.sui-overlap-floater {
  position: absolute;
  display: inline-flex
}

.sui-overlap-top-left {
  top: var(--sui-spacing-0);
  left: var(--sui-spacing-0)
}

.sui-overlap-top-right {
  top: var(--sui-spacing-0);
  right: var(--sui-spacing-0)
}

.sui-overlap-bottom-left {
  bottom: var(--sui-spacing-0);
  left: var(--sui-spacing-0)
}

.sui-overlap-bottom-right {
  bottom: var(--sui-spacing-0);
  right: var(--sui-spacing-0)
}

.sui-overlap-show-floater-on-hover-only .sui-overlap-floater {
  visibility: hidden
}

@media (hover: hover) {
  .sui-overlap-show-floater-on-hover-only:hover .sui-overlap-floater {
    visibility: visible
  }
}

.sui-skeleton-circular,
.sui-skeleton-squircle,
.sui-skeleton-rectangular {

  border-style: none;

  --tw-bg-opacity: 1;

  background-color: rgb(var(--s-neutral-b4), calc(var(--s-neutral-b4-opacity, 1) * var(--tw-bg-opacity)));

  --sui-focus-ring-border-width-recoup: 0;
}

.sui-skeleton-circular {

  height: var(--sui-spacing-10);

  width: var(--sui-spacing-10);

  border-radius: var(--sui-border-radius-full);

  --sui-focus-ring-border-radius: var(--sui-border-radius-full);
}

.sui-skeleton-squircle {

  height: var(--sui-spacing-8);

  width: var(--sui-spacing-8);

  border-style: none;

  border-color: transparent;

  background-color: transparent;

  --sui-focus-ring-border-width-recoup: 0;

  --sui-squircle-bg-color: var(--sui-colors-neutral-b4);
}

.sui-skeleton-rectangular {

  height: var(--sui-spacing-18);

  width: var(--sui-spacing-30);

  border-radius: var(--sui-border-radius-xs);

  --sui-focus-ring-border-radius: var(--sui-border-radius-xs);
}

.sui-skeleton-text {

  flex-shrink: 0;

  flex-grow: 1;

  -webkit-user-select: none;

          user-select: none;

  align-self: stretch;

  color: transparent;

  text-decoration-line: none;
}

.sui-skeleton-text > span {
    /* Disables the text-decoration */
    display: inline-block;
    width: 100%;
    --tw-scale-y: .5;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--s-neutral-b4), calc(var(--s-neutral-b4-opacity, 1) * var(--tw-bg-opacity)));

    border-radius: var(--sui-border-radius-xs) /
      calc(var(--sui-border-radius-xs) * 2);
  }

@keyframes skeleton-wave {
  0% {
    left: calc(0px - var(--sui-skeleton-gradient-width));
  }

  /* 0.5s delay between each loop */
  50% {
    left: calc(100% + var(--sui-skeleton-gradient-width));
  }

  100% {
    left: calc(100% + var(--sui-skeleton-gradient-width));
  }
}

.sui-skeleton-container-root {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  --tw-text-opacity: 1;
  color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-text-opacity)));

  --sui-skeleton-gradient-width: var(--sui-spacing-112);
}

.sui-skeleton-container-root::after {
  position: absolute;
  --tw-translate-y: -50%;
  --tw-rotate: 15deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-content: "";
  content: var(--tw-content);

    height: 200vh;
    width: var(--sui-skeleton-gradient-width);
    animation: skeleton-wave 3.2s ease-in-out 0.5s infinite normal none running;
    background: linear-gradient(
      -90deg,
      var(--sui-colors-neutral-w0-t0),
      currentColor,
      var(--sui-colors-neutral-w0-t0)
    );
}

.sui-icon-root {

    display: inline-block;
}

.sui-icon-svg {

    pointer-events: none;

    display: block;

    fill: currentColor;

    stroke: currentColor;

    stroke-width: 0;

    height: 1em;
    width: 1em;
}

/* size */

.sui-icon-xsmall {
    font-size: 12px;
  }

.sui-icon-small {
    font-size: 16px;
  }

.sui-icon-medium {
    font-size: 20px;
  }

.sui-icon-large {
    font-size: 24px;
  }

.sui-icon-xlarge {
    font-size: 32px;
  }

.sui-icon-xxlarge {
    font-size: 36px;
  }

.sui-icon-xxxlarge {
    font-size: 40px;
  }

.sui-status-indicator-root {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sui-border-radius-full);
    --sui-focus-ring-border-radius: var(--sui-border-radius-full);
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--tw-border-opacity)));
    --tw-text-opacity: 1;
    color: rgb(var(--s-neutral-high-contrast-b0), calc(var(--s-neutral-high-contrast-b0-opacity, 1) * var(--tw-text-opacity)));
    border-width: var(--sui-border-width-1);
    --sui-focus-ring-border-width: var(--sui-border-width-1);
    --sui-focus-ring-border-width-recoup: 1
}

.sui-status-indicator-large {
    height: var(--sui-spacing-4);
    width: var(--sui-spacing-4)
}

.sui-status-indicator-medium {
    height: var(--sui-spacing-3);
    width: var(--sui-spacing-3)
}

.sui-status-indicator-dnd {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--s-danger), calc(var(--s-danger-opacity, 1) * var(--tw-bg-opacity)))
}

.sui-status-indicator-busy {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--s-danger), calc(var(--s-danger-opacity, 1) * var(--tw-bg-opacity)))
}

.sui-status-indicator-available {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--s-success), calc(var(--s-success-opacity, 1) * var(--tw-bg-opacity)))
}

.sui-status-indicator-unavailable {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-bg-opacity)))
}

@media (hover: hover) {.sui-expand-collapse-caret-root:hover {
    cursor: pointer;
  }
}

.sui-expand-collapse-caret-vertical {
  transform: rotate(0);
}

.sui-expand-collapse-caret-horizontal {
  transform: rotate(-90deg);
}

@media (hover: hover) {.sui-show-hide-eye-root:hover {cursor: pointer
}
}

.sui-popper-paper-root {
  --sui-popper-paper-arrow-radius: 2px;
}

.sui-popper-paper-arrow {
  position: absolute;
  z-index: -10;
  box-sizing: border-box;
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  background-color: inherit;

  border-color: inherit;
  border-width: inherit;
  border-style: inherit;
}

.sui-popper[data-sui-popper-placement^='top'] .sui-popper-paper-arrow {
  border-bottom-right-radius: 2px;
}

.sui-popper[data-sui-popper-placement^='bottom'] .sui-popper-paper-arrow {
  border-top-left-radius: 2px;
}

.sui-popper[data-sui-popper-placement^='left'] .sui-popper-paper-arrow {
  border-top-right-radius: 2px;
}

.sui-popper[data-sui-popper-placement^='right'] .sui-popper-paper-arrow {
  border-bottom-left-radius: 2px;
}

.sui-popper-paper-content {
  overflow-y: auto;
  background-color: inherit;
  border-radius: inherit;
  --sui-focus-ring-border-radius: inherit;
}

.sui-tooltip-view-root {
 z-index: 1500;
}

.sui-tooltip-view-disable-interactions {
 pointer-events: none;
}

.sui-tooltip-view-paper {
 --tw-text-opacity: 1;
 color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--tw-text-opacity)));
 border-radius: var(--sui-border-radius-xs);
 --sui-focus-ring-border-radius: var(--sui-border-radius-xs);
 will-change: transform; /* Needed to force a new stacking context, ensuring the arrow appears underneath the preceding paper-content element */
}

.sui-tooltip-view-paper-content {
 box-sizing: border-box;
 display: flex;
 max-width: var(--sui-spacing-50);
 flex-direction: row;
 align-items: flex-start;
 padding-left: var(--sui-spacing-2);
 padding-right: var(--sui-spacing-2);
 padding-top: var(--sui-spacing-1);
 padding-bottom: var(--sui-spacing-1);
 background-color: inherit;
 border-radius: inherit;
 --sui-focus-ring-border-radius: inherit;
}

/* The paper-content needs to have its own BG to mask the arrow */

.sui-tooltip-view-paper-content-medium {
 max-width: var(--sui-spacing-75);
 padding-top: var(--sui-spacing-1\.25);
 padding-bottom: var(--sui-spacing-1\.25);
}

.sui-tooltip-view-icon {
 margin-right: var(--sui-spacing-2);
}

.sui-tooltip-view-content {
 font-size: var(--sui-typography-descriptor-mini-font-size);
 font-weight: var(--sui-typography-descriptor-mini-font-weight);
 line-height: var(--sui-typography-descriptor-mini-line-height);
 -webkit-text-decoration: var(--sui-typography-descriptor-mini-text-decoration);
         text-decoration: var(--sui-typography-descriptor-mini-text-decoration);
 text-transform: var(--sui-typography-descriptor-mini-text-transform);
 font-family: var(--sui-font-family);
 overflow: hidden;
 overflow-wrap: break-word;
}

.sui-tooltip-view-content-medium {
 font-size: var(--sui-typography-descriptor-font-size);
 font-weight: var(--sui-typography-descriptor-font-weight);
 line-height: var(--sui-typography-descriptor-line-height);
 -webkit-text-decoration: var(--sui-typography-descriptor-text-decoration);
         text-decoration: var(--sui-typography-descriptor-text-decoration);
 text-transform: var(--sui-typography-descriptor-text-transform);
 font-family: var(--sui-font-family);
}

.sui-tooltip-view-neutral {
 --tw-border-opacity: 1;
 border-color: rgb(var(--s-neutral-b1), calc(var(--s-neutral-b1-opacity, 1) * var(--tw-border-opacity)));
 --tw-bg-opacity: 1;
 background-color: rgb(var(--s-neutral-b1), calc(var(--s-neutral-b1-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-tooltip-view-success {
 --tw-border-opacity: 1;
 border-color: rgb(var(--s-success), calc(var(--s-success-opacity, 1) * var(--tw-border-opacity)));
 --tw-bg-opacity: 1;
 background-color: rgb(var(--s-success), calc(var(--s-success-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-tooltip-view-danger {
 --tw-border-opacity: 1;
 border-color: rgb(var(--s-danger), calc(var(--s-danger-opacity, 1) * var(--tw-border-opacity)));
 --tw-bg-opacity: 1;
 background-color: rgb(var(--s-danger-high-contrast), calc(var(--s-danger-high-contrast-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-tooltip-view-inverted {
 border-style: solid;
 --tw-border-opacity: 1;
 border-color: rgb(var(--s-neutral-b4), calc(var(--s-neutral-b4-opacity, 1) * var(--tw-border-opacity)));
 --tw-bg-opacity: 1;
 background-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-bg-opacity)));
 --tw-text-opacity: 1;
 color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));
 border-width: var(--sui-border-width-1);
 --sui-focus-ring-border-width: var(--sui-border-width-1);
 --sui-focus-ring-border-width-recoup: 1;
}

.sui-tooltip-view-force-hide {
  display: none;
}

.sui-circular-progress-indicator-root {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    will-change: transform;

    border-radius: var(--sui-border-radius-full);

    --sui-focus-ring-border-radius: var(--sui-border-radius-full);

    width: var(--sui-circular-progress-indicator-size);
    height: var(--sui-circular-progress-indicator-size);
}

.sui-circular-progress-indicator-xlarge {
    --sui-circular-progress-indicator-size: var(--sui-spacing-14);
  }

.sui-circular-progress-indicator-large {
    --sui-circular-progress-indicator-size: var(--sui-spacing-10);
  }

.sui-circular-progress-indicator-medium {
    --sui-circular-progress-indicator-size: var(--sui-spacing-6);
  }

.sui-circular-progress-indicator-small {
    --sui-circular-progress-indicator-size: var(--sui-spacing-4);
  }

.sui-circular-progress-indicator-xsmall {
    --sui-circular-progress-indicator-size: var(--sui-spacing-3);
  }

.sui-circular-progress-indicator-indeterminate {
    background-color: var(--sui-circular-progress-indicator-track-bg);

    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-mask: radial-gradient(
      circle at center,
      transparent var(--sui-circular-progress-indicator-gradient-start),
      var(--sui-colors-neutral-w0)
        var(--sui-circular-progress-indicator-gradient-stop)
    );
  }

.sui-circular-progress-indicator-indeterminate-outer-circle {

    display: block;

    border-radius: var(--sui-border-radius-full);

    --sui-focus-ring-border-radius: var(--sui-border-radius-full);

      width: calc(var(--sui-circular-progress-indicator-size) / 4);
      height: calc(var(--sui-circular-progress-indicator-size) + 4px);
}

.sui-circular-progress-indicator-indeterminate-inner-circle {

    display: block;

    border-radius: var(--sui-border-radius-full);

    --sui-focus-ring-border-radius: var(--sui-border-radius-full);

      width: calc(var(--sui-circular-progress-indicator-size) / 4);
      height: calc(var(--sui-circular-progress-indicator-size) / 4);
      background-image: radial-gradient(
        var(--sui-circular-progress-indicator-gradient-size),
        var(--sui-circular-progress-indicator-gradient-start-color),
        var(--sui-circular-progress-indicator-gradient-end-color)
      );
      clip-path: inset(0 50% 0 0);
}

.sui-circular-progress-indicator-indeterminate-xlarge {
      --sui-circular-progress-indicator-gradient-size: 4px;
      --sui-circular-progress-indicator-gradient-start: calc(
        var(--sui-circular-progress-indicator-size) / 3
      );
      --sui-circular-progress-indicator-gradient-stop: calc(
        var(--sui-circular-progress-indicator-size) / 2.92
      );
    }

.sui-circular-progress-indicator-indeterminate-large {
      --sui-circular-progress-indicator-gradient-size: 3px;
      --sui-circular-progress-indicator-gradient-start: calc(
        var(--sui-circular-progress-indicator-size) / 3
      );
      --sui-circular-progress-indicator-gradient-stop: calc(
        var(--sui-circular-progress-indicator-size) / 2.82
      );
    }

.sui-circular-progress-indicator-indeterminate-medium {
      --sui-circular-progress-indicator-gradient-size: 2px;
      --sui-circular-progress-indicator-gradient-start: calc(
        var(--sui-circular-progress-indicator-size) / 3
      );
      --sui-circular-progress-indicator-gradient-stop: calc(
        var(--sui-circular-progress-indicator-size) / 2.72
      );
    }

.sui-circular-progress-indicator-indeterminate-small {
      --sui-circular-progress-indicator-gradient-size: 1px;
      --sui-circular-progress-indicator-gradient-start: calc(
        var(--sui-circular-progress-indicator-size) / 3
      );
      --sui-circular-progress-indicator-gradient-stop: calc(
        var(--sui-circular-progress-indicator-size) / 2.72
      );
    }

.sui-circular-progress-indicator-indeterminate-xsmall {
      --sui-circular-progress-indicator-gradient-size: 1px;
      --sui-circular-progress-indicator-gradient-start: calc(
        var(--sui-circular-progress-indicator-size) / 3
      );
      --sui-circular-progress-indicator-gradient-stop: calc(
        var(--sui-circular-progress-indicator-size) / 2.72
      );
    }

.sui-circular-progress-indicator-indeterminate-primary {
      --sui-circular-progress-indicator-gradient-start-color: var(
        --sui-colors-primary-f
      );
      --sui-circular-progress-indicator-gradient-end-color: var(
        --sui-colors-primary-t0
      );
      --sui-circular-progress-indicator-track-bg: var(--sui-colors-neutral-b4);
    }

.sui-circular-progress-indicator-indeterminate-neutral {
      --sui-circular-progress-indicator-gradient-start-color: var(
        --sui-colors-neutral-static-w0
      );
      --sui-circular-progress-indicator-gradient-end-color: var(
        --sui-colors-neutral-w0-t0
      );
      --sui-circular-progress-indicator-track-bg: var(
        --sui-colors-neutral-b4-t50
      );
    }

.sui-circular-progress-indicator-indeterminate-danger {
      --sui-circular-progress-indicator-gradient-start-color: var(
        --sui-colors-danger-f
      );
      --sui-circular-progress-indicator-gradient-end-color: var(
        --sui-colors-danger-t0
      );
      --sui-circular-progress-indicator-track-bg: var(--sui-colors-neutral-b4);
    }

.sui-circular-progress-indicator-indeterminate-warning {
      --sui-circular-progress-indicator-gradient-start-color: var(
        --sui-colors-warning-f
      );
      --sui-circular-progress-indicator-gradient-end-color: var(
        --sui-colors-danger-t0
      );
      --sui-circular-progress-indicator-track-bg: var(--sui-colors-neutral-b4);
    }

.sui-circular-progress-indicator-indeterminate-success {
      --sui-circular-progress-indicator-gradient-start-color: var(
        --sui-colors-success-f
      );
      --sui-circular-progress-indicator-gradient-end-color: var(
        --sui-colors-primary-t0
      );
      --sui-circular-progress-indicator-track-bg: var(--sui-colors-neutral-b4);
    }

.sui-circular-progress-indicator-determinate-progress-circle {
      stroke: var(--sui-circular-progress-indicator-bg);
    }

.sui-circular-progress-indicator-determinate-primary {
      --sui-circular-progress-indicator-bg: var(--sui-colors-primary-f);
    }

.sui-circular-progress-indicator-determinate-neutral {
      --sui-circular-progress-indicator-bg: var(--sui-colors-neutral-w0);
    }

.sui-circular-progress-indicator-determinate-danger {
      --sui-circular-progress-indicator-bg: var(--sui-colors-danger-f);
    }

.sui-circular-progress-indicator-determinate-warning {
      --sui-circular-progress-indicator-bg: var(--sui-colors-warning-f);
    }

.sui-circular-progress-indicator-determinate-success {
      --sui-circular-progress-indicator-bg: var(--sui-colors-success-f);
    }

.sui-button-root {

    position: relative;

    cursor: pointer;

    -webkit-user-select: none;

            user-select: none;

    vertical-align: middle;

    text-decoration-line: none;

    outline: 2px solid transparent;

    outline-offset: 2px;

    display: inline-flex;

    align-items: center;

    justify-content: flex-start;
}

@media (prefers-reduced-motion: no-preference) {.sui-button-root {

        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;

        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

        transition-duration: 150ms;

        transition-duration: var(--sui-transition-neutral-01-fast-transition-duration);

        transition-timing-function: var(--sui-transition-neutral-01-fast-transition-timing-function);
    }
}

.sui-button-root {

    color: var(--sui-button-text-color);
  }

.sui-button-root.sui-disabled {

    pointer-events: none;
}

.sui-button-root.sui-disabled .sui-button-loading-indicator {

    opacity: 0.2;
}

/* Sizes */

.sui-button-xlarge {

    font-size: var(--sui-typography-title-font-size);

    font-weight: var(--sui-typography-title-font-weight);

    letter-spacing: var(--sui-typography-title-letter-spacing);

    line-height: var(--sui-typography-title-line-height);

    -webkit-text-decoration: var(--sui-typography-title-text-decoration);

            text-decoration: var(--sui-typography-title-text-decoration);

    text-transform: var(--sui-typography-title-text-transform);

    font-family: var(--sui-font-family);

    height: var(--sui-spacing-12);

    max-width: var(--sui-spacing-86);

    border-radius: var(--sui-border-radius-sm);

    --sui-focus-ring-border-radius: var(--sui-border-radius-sm);

    --sui-button-slot-gap: var(--sui-spacing-2);
}

.sui-button-large {

    font-size: var(--sui-typography-subtitle-font-size);

    font-weight: var(--sui-typography-subtitle-font-weight);

    line-height: var(--sui-typography-subtitle-line-height);

    -webkit-text-decoration: var(--sui-typography-subtitle-text-decoration);

            text-decoration: var(--sui-typography-subtitle-text-decoration);

    text-transform: var(--sui-typography-subtitle-text-transform);

    font-family: var(--sui-font-family);

    height: var(--sui-spacing-9);

    max-width: var(--sui-spacing-86);

    border-radius: var(--sui-border-radius-sm);

    --sui-focus-ring-border-radius: var(--sui-border-radius-sm);

    --sui-button-slot-gap: var(--sui-spacing-2);
}

.sui-button-medium {

    font-size: var(--sui-typography-subtitle-mini-font-size);

    font-weight: var(--sui-typography-subtitle-mini-font-weight);

    line-height: var(--sui-typography-subtitle-mini-line-height);

    -webkit-text-decoration: var(--sui-typography-subtitle-mini-text-decoration);

            text-decoration: var(--sui-typography-subtitle-mini-text-decoration);

    text-transform: var(--sui-typography-subtitle-mini-text-transform);

    font-family: var(--sui-font-family);

    height: var(--sui-spacing-8);

    max-width: var(--sui-spacing-80);

    border-radius: var(--sui-border-radius-sm);

    --sui-focus-ring-border-radius: var(--sui-border-radius-sm);

    --sui-button-slot-gap: var(--sui-spacing-1\.5);
}

.sui-button-small {

    font-size: var(--sui-typography-descriptor-mini-font-size);

    font-weight: var(--sui-typography-descriptor-mini-font-weight);

    line-height: var(--sui-typography-descriptor-mini-line-height);

    -webkit-text-decoration: var(--sui-typography-descriptor-mini-text-decoration);

            text-decoration: var(--sui-typography-descriptor-mini-text-decoration);

    text-transform: var(--sui-typography-descriptor-mini-text-transform);

    font-family: var(--sui-font-family);

    height: var(--sui-spacing-6);

    max-width: var(--sui-spacing-80);

    border-radius: var(--sui-border-radius-xs);

    --sui-focus-ring-border-radius: var(--sui-border-radius-xs);

    --sui-button-slot-gap: var(--sui-spacing-1);
}

.sui-button-xsmall {

    font-size: var(--sui-typography-descriptor-mini-font-size);

    font-weight: var(--sui-typography-descriptor-mini-font-weight);

    line-height: var(--sui-typography-descriptor-mini-line-height);

    -webkit-text-decoration: var(--sui-typography-descriptor-mini-text-decoration);

            text-decoration: var(--sui-typography-descriptor-mini-text-decoration);

    text-transform: var(--sui-typography-descriptor-mini-text-transform);

    font-family: var(--sui-font-family);

    height: var(--sui-spacing-5);

    max-width: var(--sui-spacing-80);

    line-height: 1;

    border-radius: var(--sui-border-radius-xs);

    --sui-focus-ring-border-radius: var(--sui-border-radius-xs);

    --sui-button-slot-gap: var(--sui-spacing-1);
}

.sui-button-contained-xlarge,
  .sui-button-outlined-xlarge,
  .sui-button-inverted-xlarge {

    padding-left: var(--sui-spacing-4\.5);

    padding-right: var(--sui-spacing-4\.5);

    --sui-button-has-slot-x-padding: var(--sui-spacing-3);
}

.sui-button-contained-large,
  .sui-button-outlined-large,
  .sui-button-inverted-large {

    padding-left: var(--sui-spacing-4\.5);

    padding-right: var(--sui-spacing-4\.5);

    --sui-button-has-slot-x-padding: var(--sui-spacing-2);
}

.sui-button-contained-medium,
  .sui-button-outlined-medium,
  .sui-button-inverted-medium {

    padding-left: var(--sui-spacing-3);

    padding-right: var(--sui-spacing-3);

    --sui-button-has-slot-x-padding: var(--sui-spacing-2);
}

.sui-button-contained-small,
  .sui-button-contained-xsmall,
  .sui-button-outlined-small,
  .sui-button-outlined-xsmall,
  .sui-button-inverted-small,
  .sui-button-inverted-xsmall {

    padding-left: var(--sui-spacing-2);

    padding-right: var(--sui-spacing-2);

    --sui-button-has-slot-x-padding: var(--sui-spacing-1);
}

/* States */

.sui-button-loading {

    pointer-events: none;
}

.sui-button-content {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

/*
   * Focus @NOTE must be declared before any colors/variants in case they customize the focus ring
   */

.sui-button-contained:focus-visible,
    .sui-button-contained.sui-focus-visible,
    .sui-button-outlined:focus-visible,
    .sui-button-outlined.sui-focus-visible,
    .sui-button-inverted:focus-visible,
    .sui-button-inverted.sui-focus-visible,
    .sui-button-text:focus-visible,
    .sui-button-text.sui-focus-visible {

    --sui-focus-ring-color: var(--sui-focus-ring-normal-color);
}

.sui-button-contained:focus-visible::after,
    .sui-button-contained.sui-focus-visible::after,
    .sui-button-outlined:focus-visible::after,
    .sui-button-outlined.sui-focus-visible::after,
    .sui-button-inverted:focus-visible::after,
    .sui-button-inverted.sui-focus-visible::after,
    .sui-button-text:focus-visible::after,
    .sui-button-text.sui-focus-visible::after {

    pointer-events: none;

    content: '';

    position: absolute;

    inset: 0;

    border-radius: calc(var(--sui-focus-ring-normal-offset) + var(--sui-focus-ring-border-radius, 0px));

    box-shadow: 0 0 0 var(--sui-focus-ring-normal-width) var(--sui-focus-ring-color);

    margin: calc(var(--sui-focus-ring-normal-offset)*-1 - var(--sui-focus-ring-border-width, 0px)*var(--sui-focus-ring-border-width-recoup, 1));
}

/* Variants */

.sui-button-contained,
  .sui-button-outlined {
    background-color: var(--sui-button-bg-color);
    border-color: var(--sui-button-border-color);
  }

@media (hover: hover) {
  .sui-button-contained:hover, .sui-button-outlined:hover {
      background-color: var(--sui-button-bg-color-hover);
      color: var(--sui-button-text-color-hover);
      border-color: var(--sui-button-border-color-hover);
    }
}

.sui-button-contained:active, .sui-button-outlined:active {
      background-color: var(--sui-button-bg-color-active);
      color: var(--sui-button-text-color-active);
      border-color: var(--sui-button-border-color-active);
    }

.sui-button-contained.sui-disabled, .sui-button-outlined.sui-disabled {
      background-color: var(--sui-button-bg-color-disabled);
      color: var(--sui-button-text-color-disabled);
      border-color: var(--sui-button-border-color-disabled);
    }

.sui-button-contained {

    border-style: solid;

    border-width: var(--sui-border-width-1);

    --sui-focus-ring-border-width: var(--sui-border-width-1);

    --sui-focus-ring-border-width-recoup: 1;

    --sui-button-border-color: transparent;
    --sui-button-border-color-hover: var(--sui-button-border-color);
    --sui-button-border-color-active: var(--sui-button-border-color);
    --sui-button-border-color-disabled: transparent;
}

.sui-button-contained-primary {
      --sui-button-bg-color: var(--sui-colors-primary-b);
      --sui-button-bg-color-hover: var(--sui-colors-primary-b-high-contrast);
      --sui-button-bg-color-active: var(--sui-colors-neutral-high-contrast-w0);
      --sui-button-bg-color-disabled: var(--sui-colors-neutral-b3);
      --sui-button-text-color: var(--sui-colors-neutral-high-contrast-b0);
      --sui-button-text-color-hover: var(--sui-colors-neutral-high-contrast-b0);
      --sui-button-text-color-active: var(
        --sui-colors-neutral-high-contrast-b0
      );
      --sui-button-text-color-disabled: var(--sui-colors-neutral-w0);
    }

.sui-button-contained-secondary {
      --sui-button-bg-color: var(--sui-colors-neutral-base);
      --sui-button-bg-color-hover: var(--sui-colors-neutral-b5);
      --sui-button-bg-color-active: var(--sui-colors-neutral-b3);
      --sui-button-bg-color-disabled: var(--sui-colors-neutral-base);
      --sui-button-text-color: var(--sui-colors-neutral-b0);
      --sui-button-text-color-hover: var(--sui-colors-neutral-b0);
      --sui-button-text-color-active: var(--sui-colors-neutral-b0);
      --sui-button-text-color-disabled: var(--sui-colors-neutral-b3);
      --sui-button-border-color: var(--sui-colors-neutral-high-contrast);
    }

.sui-button-contained-neutral {
      --sui-button-bg-color: var(--sui-colors-neutral-b0-t10);
      --sui-button-bg-color-hover: var(--sui-colors-neutral-b0-t20);
      --sui-button-bg-color-active: var(--sui-colors-neutral-b0-t30);
      --sui-button-bg-color-disabled: var(--sui-colors-neutral-b0-t10);
      --sui-button-text-color: var(--sui-colors-neutral-b1);
      --sui-button-text-color-hover: var(--sui-colors-neutral-b0);
      --sui-button-text-color-active: var(--sui-colors-neutral-b0);
      --sui-button-text-color-disabled: var(--sui-colors-neutral-b3);
    }

.sui-button-contained-danger {
      --sui-button-bg-color: var(--sui-colors-danger);
      --sui-button-bg-color-hover: var(--sui-colors-danger-high-contrast);
      --sui-button-bg-color-active: var(--sui-colors-neutral-high-contrast-w0);
      --sui-button-bg-color-disabled: var(--sui-colors-neutral-b3);
      --sui-button-text-color: var(--sui-colors-neutral-high-contrast-b0);
      --sui-button-text-color-hover: var(--sui-colors-neutral-high-contrast-b0);
      --sui-button-text-color-active: var(
        --sui-colors-neutral-high-contrast-b0
      );
      --sui-button-text-color-disabled: var(--sui-colors-neutral-w0);
    }

.sui-button-contained-warning {
      --sui-button-bg-color: var(--sui-colors-warning);
      --sui-button-bg-color-hover: var(--sui-colors-warning-high-contrast);
      --sui-button-bg-color-active: var(--sui-colors-neutral-high-contrast-w0);
      --sui-button-bg-color-disabled: var(--sui-colors-neutral-b3);
      --sui-button-text-color: var(--sui-colors-neutral-high-contrast-b0);
      --sui-button-text-color-hover: var(--sui-colors-neutral-high-contrast-b0);
      --sui-button-text-color-active: var(
        --sui-colors-neutral-high-contrast-b0
      );
      --sui-button-text-color-disabled: var(--sui-colors-neutral-w0);
    }

.sui-button-contained-success {
      --sui-button-bg-color: var(--sui-colors-success);
      --sui-button-bg-color-hover: var(--sui-colors-success-high-contrast);
      --sui-button-bg-color-active: var(--sui-colors-neutral-high-contrast-w0);
      --sui-button-bg-color-disabled: var(--sui-colors-neutral-b3);
      --sui-button-text-color: var(--sui-colors-neutral-high-contrast-b0);
      --sui-button-text-color-hover: var(--sui-colors-neutral-high-contrast-b0);
      --sui-button-text-color-active: var(
        --sui-colors-neutral-high-contrast-b0
      );
      --sui-button-text-color-disabled: var(--sui-colors-neutral-w0);
    }

.sui-button-contained-hide-background {
      --sui-button-border-color: transparent;
    }

.sui-button-outlined {

    border-style: solid;

    border-width: var(--sui-border-width-1);

    --sui-focus-ring-border-width: var(--sui-border-width-1);

    --sui-focus-ring-border-width-recoup: 1;

    --sui-button-bg-color: var(--sui-colors-neutral-base);
    --sui-button-bg-color-hover: var(--sui-colors-neutral-b5);
    --sui-button-bg-color-active: var(--sui-colors-neutral-b3);
    --sui-button-bg-color-disabled: var(--sui-button-bg-color);
    --sui-button-text-color-disabled: var(--sui-colors-neutral-b3);
    --sui-button-border-color-active: var(--sui-colors-neutral-b0);
    --sui-button-border-color-disabled: var(--sui-colors-neutral-b0-t20);

    border-color: var(--sui-button-border-color);
}

@media (hover: hover) {
  .sui-button-outlined:hover {
      border-color: var(--sui-button-border-color-hover);
    }
}

.sui-button-outlined:active {
      border-color: var(--sui-button-border-color-active);
    }

.sui-button-outlined.sui-disabled {
      border-color: var(--sui-button-border-color-disabled);
    }

.sui-button-outlined-primary {
      --sui-button-text-color: var(--sui-colors-primary-f);
      --sui-button-text-color-hover: var(--sui-colors-primary-f-high-contrast);
      --sui-button-text-color-active: var(--sui-colors-neutral-b0);
      --sui-button-border-color: var(--sui-colors-primary-f);
      --sui-button-border-color-hover: var(
        --sui-colors-primary-f-high-contrast
      );
    }

.sui-button-outlined-secondary {
      --sui-button-text-color: var(--sui-colors-neutral-b0);
      --sui-button-text-color-hover: var(--sui-colors-neutral-b0);
      --sui-button-text-color-active: var(--sui-colors-neutral-b0);
      --sui-button-border-color: var(--sui-colors-neutral-b0-t20);
      --sui-button-border-color-hover: var(--sui-colors-neutral-b0-t30);
      --sui-button-border-color-active: var(--sui-colors-neutral-b0-t50);
    }

.sui-button-outlined-neutral {
      --sui-button-text-color: var(--sui-colors-neutral-b1);
      --sui-button-text-color-hover: var(--sui-colors-neutral-b0);
      --sui-button-text-color-active: var(--sui-colors-neutral-b0);
      --sui-button-bg-color-hover: var(--sui-colors-neutral-b0-t10);
      --sui-button-bg-color-active: var(--sui-colors-neutral-b0-t20);
      --sui-button-border-color: var(--sui-colors-neutral-b0-t20);
      --sui-button-border-color-hover: var(--sui-colors-neutral-b0-t30);
      --sui-button-border-color-active: var(--sui-colors-neutral-b0-t50);
    }

.sui-button-outlined-danger {
      --sui-button-text-color: var(--sui-colors-danger-f);
      --sui-button-text-color-hover: var(--sui-colors-danger-high-contrast);
      --sui-button-text-color-active: var(--sui-colors-neutral-b0);
      --sui-button-border-color: var(--sui-colors-danger-f);
      --sui-button-border-color-hover: var(--sui-colors-danger-high-contrast);
    }

.sui-button-outlined-warning {
      --sui-button-text-color: var(--sui-colors-warning-f);
      --sui-button-text-color-hover: var(--sui-colors-warning-high-contrast);
      --sui-button-text-color-active: var(--sui-colors-neutral-b0);
      --sui-button-border-color: var(--sui-colors-warning-f);
      --sui-button-border-color-hover: var(--sui-colors-warning-high-contrast);
    }

.sui-button-outlined-success {
      --sui-button-text-color: var(--sui-colors-success-f);
      --sui-button-text-color-hover: var(--sui-colors-success-high-contrast);
      --sui-button-text-color-active: var(--sui-colors-neutral-b0);
      --sui-button-border-color: var(--sui-colors-success-f);
      --sui-button-border-color-hover: var(--sui-colors-success-high-contrast);
    }

.sui-button-text {

    border-style: none;

    padding-left: var(--sui-spacing-1);

    padding-right: var(--sui-spacing-1);

    --sui-focus-ring-border-width-recoup: 0;

    background-color: transparent;

    --sui-button-text-color-disabled: var(--sui-colors-neutral-b3);
    --sui-button-has-slot-x-padding: var(--sui-spacing-1);
}

@media (hover: hover) {
  .sui-button-text:hover {
      color: var(--sui-button-text-color-hover);
    }
}

.sui-button-text:active {
      color: var(--sui-button-text-color-active);
    }

.sui-button-text.sui-disabled {
      color: var(--sui-button-text-color-disabled);
    }

.sui-button-text-primary {
      --sui-button-text-color: var(--sui-colors-primary-f);
      --sui-button-text-color-hover: var(--sui-colors-primary-f-high-contrast);
      --sui-button-text-color-active: var(--sui-colors-neutral-b0);
    }

.sui-button-text-secondary {
      --sui-button-text-color: var(--sui-colors-neutral-b0);
      --sui-button-text-color-hover: var(--sui-colors-primary-f-high-contrast);
      --sui-button-text-color-active: var(--sui-colors-neutral-b0);
    }

.sui-button-text-neutral {
      --sui-button-text-color: var(--sui-colors-neutral-b1);
      --sui-button-text-color-hover: var(--sui-colors-neutral-b0);
      --sui-button-text-color-active: var(--sui-colors-neutral-b0);
    }

.sui-button-text-danger {
      --sui-button-text-color: var(--sui-colors-danger-f);
      --sui-button-text-color-hover: var(--sui-colors-danger-high-contrast);
      --sui-button-text-color-active: var(--sui-colors-neutral-b0);
    }

.sui-button-text-warning {
      --sui-button-text-color: var(--sui-colors-warning-f);
      --sui-button-text-color-hover: var(--sui-colors-warning-high-contrast);
      --sui-button-text-color-active: var(--sui-colors-neutral-b0);
    }

.sui-button-text-success {
      --sui-button-text-color: var(--sui-colors-success-f);
      --sui-button-text-color-hover: var(--sui-colors-success-high-contrast);
      --sui-button-text-color-active: var(--sui-colors-neutral-b0);
    }

.sui-button-inverted {

    border-color: transparent;

    border-width: var(--sui-border-width-1);

    --sui-focus-ring-border-width: var(--sui-border-width-1);

    --sui-button-text-color-disabled: var(--sui-colors-neutral-b3);

    background-color: var(--sui-button-bg-color);
    color: var(--sui-button-text-color);
}

@media (hover: hover) {
  .sui-button-inverted:hover {
      background-color: var(--sui-button-bg-color-hover);
      color: var(--sui-button-text-color-hover);
    }
}

.sui-button-inverted:active {
      background-color: var(--sui-button-bg-color-active);
      color: var(--sui-button-text-color-active);
    }

.sui-button-inverted.sui-disabled {
      background-color: var(--sui-button-bg-color-disabled);
      color: var(--sui-button-text-color-disabled);
    }

.sui-button-inverted-primary {
      --sui-button-bg-color: var(--sui-colors-primary-t10);
      --sui-button-bg-color-hover: var(--sui-colors-primary-b-t20);
      --sui-button-bg-color-active: var(--sui-colors-primary-t10);
      --sui-button-bg-color-disabled: var(--sui-colors-neutral-b4-t50);
      --sui-button-text-color: var(--sui-colors-primary-f);
      --sui-button-text-color-hover: var(--sui-colors-primary-f-high-contrast);
      --sui-button-text-color-active: var(--sui-colors-neutral-b0);
    }

.sui-button-inverted-secondary {
      --sui-button-bg-color: var(--sui-colors-neutral-w0-t10);
      --sui-button-bg-color-hover: var(--sui-colors-neutral-w0-t20);
      --sui-button-bg-color-active: var(--sui-colors-neutral-w0-t10);
      --sui-button-bg-color-disabled: var(--sui-colors-neutral-w0-t10);
      --sui-button-text-color: var(--sui-colors-neutral-w0);
      --sui-button-text-color-hover: var(--sui-colors-neutral-w0);
      --sui-button-text-color-active: var(--sui-colors-neutral-w0);
      --sui-button-text-color-disabled: var(--sui-colors-neutral-w0-t20);
    }

.sui-button-inverted-secondary:focus-visible,
      .sui-button-inverted-secondary.sui-focus-visible {
        --sui-focus-ring-color: var(--sui-colors-neutral-w0);
      }

.sui-button-inverted-neutral {
      --sui-button-bg-color: var(--sui-colors-neutral-b0-t10);
      --sui-button-bg-color-hover: var(--sui-colors-neutral-b0-t20);
      --sui-button-bg-color-active: var(--sui-colors-neutral-b0-t10);
      --sui-button-bg-color-disabled: var(--sui-colors-neutral-b0-t10);
      --sui-button-text-color: var(--sui-colors-neutral-b1);
      --sui-button-text-color-hover: var(--sui-colors-neutral-b0);
      --sui-button-text-color-active: var(--sui-colors-neutral-b0);
      --sui-button-text-color-disabled: var(--sui-colors-neutral-b3);
    }

.sui-button-inverted-danger {
      --sui-button-bg-color: var(--sui-colors-danger-t10);
      --sui-button-bg-color-hover: var(--sui-colors-danger-t20);
      --sui-button-bg-color-active: var(--sui-colors-danger-t10);
      --sui-button-bg-color-disabled: var(--sui-colors-neutral-b4-t50);
      --sui-button-text-color: var(--sui-colors-danger-f);
      --sui-button-text-color-hover: var(--sui-colors-danger-high-contrast);
      --sui-button-text-color-active: var(--sui-colors-neutral-b0);
    }

.sui-button-inverted-warning {
      --sui-button-bg-color: var(--sui-colors-warning-t10);
      --sui-button-bg-color-hover: var(--sui-colors-warning-t20);
      --sui-button-bg-color-active: var(--sui-colors-warning-t10);
      --sui-button-bg-color-disabled: var(--sui-colors-neutral-b4-t50);
      --sui-button-text-color: var(--sui-colors-warning-f);
      --sui-button-text-color-hover: var(--sui-colors-warning-high-contrast);
      --sui-button-text-color-active: var(--sui-colors-neutral-b0);
    }

.sui-button-inverted-success {
      --sui-button-bg-color: var(--sui-colors-success-t10);
      --sui-button-bg-color-hover: var(--sui-colors-success-t20);
      --sui-button-bg-color-active: var(--sui-colors-success-t10);
      --sui-button-bg-color-disabled: var(--sui-colors-neutral-b4-t50);
      --sui-button-text-color: var(--sui-colors-success-f);
      --sui-button-text-color-hover: var(--sui-colors-success-high-contrast);
      --sui-button-text-color-active: var(--sui-colors-neutral-b0);
    }

/* Slots */

.sui-button-start-slot {
    margin-right: var(--sui-button-slot-gap);
  }

.sui-button-end-slot {
    margin-left: var(--sui-button-slot-gap);
  }

.sui-button-has-start-slot {
    padding-left: var(--sui-button-has-slot-x-padding);
  }

.sui-button-has-end-slot {
    padding-right: var(--sui-button-has-slot-x-padding);
  }

.sui-button-hide-background {

    background-color: transparent;
}

.sui-button-hide-background.sui-disabled {

    background-color: transparent;
}

.sui-button-full-width {

    display: flex;

    width: 100%;

    max-width: none;

    justify-content: center;
}

.sui-backdrop-root {

    position: fixed;

    inset: var(--sui-spacing-0);

    z-index: -10;

    --tw-bg-opacity: 1;

    background-color: rgb(var(--s-neutral-static-b0), calc(var(--s-neutral-static-b0-opacity, 1) * var(--tw-bg-opacity)));

    opacity: 0.5
}

.sui-backdrop-transparent {

    background-color: transparent
}

.sui-modal-root {
    position: fixed;
    inset: var(--sui-spacing-0);
    z-index: 1300;
    outline: 2px solid transparent;
    outline-offset: 2px
}

/* stylelint-disable custom-property-pattern */

/* stylelint-disable color-function-notation */

.sui-icon-button-root {

    position: relative;

    display: inline-flex;

    cursor: pointer;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-style: none;

    text-decoration-line: none;

    outline: 2px solid transparent;

    outline-offset: 2px;

    --sui-focus-ring-border-width-recoup: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .sui-icon-button-root {

        transition-duration: var(--sui-transition-neutral-01-fast-transition-duration);

        transition-timing-function: var(--sui-transition-neutral-01-fast-transition-timing-function);
    }
}

.sui-icon-button-root.sui-disabled {

    pointer-events: none;
}

.sui-icon-button-label {

    font-size: var(--sui-typography-descriptor-mini-font-size);

    font-weight: var(--sui-typography-descriptor-mini-font-weight);

    line-height: var(--sui-typography-descriptor-mini-line-height);

    -webkit-text-decoration: var(--sui-typography-descriptor-mini-text-decoration);

            text-decoration: var(--sui-typography-descriptor-mini-text-decoration);

    text-transform: var(--sui-typography-descriptor-mini-text-transform);

    font-family: var(--sui-font-family);

    margin-top: var(--sui-spacing-1);

    width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    text-align: center;
}

.sui-icon-button-circular {

    border-radius: var(--sui-border-radius-full);

    --sui-focus-ring-border-radius: var(--sui-border-radius-full);
}

.sui-icon-button-circular.focus-visible,
    .sui-icon-button-circular:focus-visible,
    .sui-icon-button-circular.sui-focus-visible,
    .sui-icon-button-rectangular.focus-visible,
    .sui-icon-button-rectangular:focus-visible,
    .sui-icon-button-rectangular.sui-focus-visible {

    --sui-focus-ring-color: var(--sui-focus-ring-normal-color);
}

.sui-icon-button-circular.focus-visible::after,
    .sui-icon-button-circular:focus-visible::after,
    .sui-icon-button-circular.sui-focus-visible::after,
    .sui-icon-button-rectangular.focus-visible::after,
    .sui-icon-button-rectangular:focus-visible::after,
    .sui-icon-button-rectangular.sui-focus-visible::after {

    pointer-events: none;

    content: '';

    position: absolute;

    inset: 0;

    border-radius: calc(var(--sui-focus-ring-normal-offset) + var(--sui-focus-ring-border-radius, 0px));

    box-shadow: 0 0 0 var(--sui-focus-ring-normal-width) var(--sui-focus-ring-color);

    margin: calc(var(--sui-focus-ring-normal-offset)*-1 - var(--sui-focus-ring-border-width, 0px)*var(--sui-focus-ring-border-width-recoup, 1));
}

.sui-icon-button-contained {

    padding-left: var(--sui-spacing-0);

    padding-right: var(--sui-spacing-0);

    background-color: var(--sui-icon-button-bg-color);
    color: var(
      --sui-icon-button-text-color,
      var(--sui-colors-neutral-high-contrast-b0)
    );

    --sui-icon-button-bg-color-active: var(
      --sui-colors-neutral-high-contrast-w0
    );
    --sui-icon-button-bg-color-disabled: var(--sui-colors-neutral-b3);
    --sui-icon-button-text-color-disabled: var(--sui-colors-neutral-base);
}

@media (hover: hover) {
.sui-icon-button-contained:hover {
      background-color: var(--sui-icon-button-bg-color-hover);
    }
}

.sui-icon-button-contained.sui-active,
    .sui-icon-button-contained:active {
      background-color: var(
        --sui-icon-button-bg-color-active,
        var(--sui-colors-neutral-high-contrast-w0)
      );
    }

@media (hover: hover) {
.sui-icon-button-contained:active:hover {
      background-color: var(
        --sui-icon-button-bg-color-active,
        var(--sui-colors-neutral-high-contrast-w0)
      );
    }
}

.sui-icon-button-contained.sui-disabled {

    border-style: none;

    --sui-focus-ring-border-width-recoup: 0;

      background-color: var(
        --sui-icon-button-bg-color-disabled,
        var(--sui-colors-neutral-b3)
      );
      color: var(
        --sui-icon-button-text-color-disabled,
        var(--sui-colors-neutral-base)
      );
}

.sui-icon-button-contained-squircle {
      --sui-icon-button-border-color: transparent;
      --sui-icon-button-border-color-hover: transparent;
      --sui-icon-button-border-color-active: transparent;
      --sui-icon-button-border-color-disabled: transparent;
    }

.sui-icon-button-contained-primary {
      --sui-icon-button-bg-color: var(--sui-colors-primary-b);
      --sui-icon-button-bg-color-hover: var(
        --sui-colors-primary-b-high-contrast
      );
    }

.sui-icon-button-contained-success {
      --sui-icon-button-bg-color: var(--sui-colors-success);
      --sui-icon-button-bg-color-hover: var(--sui-colors-success-high-contrast);
    }

.sui-icon-button-contained-danger {
      --sui-icon-button-bg-color: var(--sui-colors-danger);
      --sui-icon-button-bg-color-hover: var(--sui-colors-danger-high-contrast);
    }

.sui-icon-button-contained-warning {
      --sui-icon-button-bg-color: var(--sui-colors-warning);
      --sui-icon-button-bg-color-hover: var(--sui-colors-warning-high-contrast);
    }

.sui-icon-button-contained-secondary {
      --sui-icon-button-bg-color: var(--sui-colors-neutral-base);
      --sui-icon-button-bg-color-hover: var(--sui-colors-neutral-b5);
      --sui-icon-button-bg-color-active: var(--sui-colors-neutral-b3);
      --sui-icon-button-bg-color-disabled: var(--sui-colors-neutral-base);
      --sui-icon-button-text-color: var(--sui-colors-neutral-b0);
      --sui-icon-button-text-color-disabled: var(--sui-colors-neutral-b3);
      border-style: solid;
      --tw-border-opacity: 1;
      border-color: rgb(var(--s-neutral-high-contrast), calc(var(--s-neutral-high-contrast-opacity, 1) * var(--tw-border-opacity)));
      border-width: var(--sui-border-width-1);
      --sui-focus-ring-border-width: var(--sui-border-width-1);
      --sui-focus-ring-border-width-recoup: 1;
    }

.sui-icon-button-contained-secondary.sui-squircle {

    border-style: none;

    --sui-focus-ring-border-width-recoup: 0;

        --sui-squircle-border-width: var(--sui-border-width-1);
        --sui-icon-button-border-color: var(--sui-colors-neutral-high-contrast);
        --sui-icon-button-border-color-hover: var(
          --sui-colors-neutral-high-contrast
        );
        --sui-icon-button-border-color-active: var(
          --sui-colors-neutral-high-contrast
        );
}

.sui-icon-button-contained-neutral {
      --sui-icon-button-bg-color: var(--sui-colors-neutral-b0-t10);
      --sui-icon-button-bg-color-hover: var(--sui-colors-neutral-b0-t20);
      --sui-icon-button-bg-color-active: var(--sui-colors-neutral-b0-t30);
      --sui-icon-button-bg-color-disabled: var(--sui-colors-neutral-b0-t10);
      --sui-icon-button-text-color: var(--sui-colors-neutral-b1);
      --sui-icon-button-text-color-hover: var(--sui-colors-neutral-b0);
      --sui-icon-button-text-color-disabled: var(--sui-colors-neutral-b3);
    }

.sui-icon-button-contained-hide-background {

    border-style: none;

    background-color: transparent;

    --sui-focus-ring-border-width-recoup: 0;
}

.sui-icon-button-contained-hide-background.sui-disabled {

    background-color: transparent;
}

.sui-icon-button-outlined {

    border-style: solid;

    padding-left: var(--sui-spacing-0);

    padding-right: var(--sui-spacing-0);

    border-width: var(--sui-border-width-1);

    --sui-focus-ring-border-width: var(--sui-border-width-1);

    --sui-focus-ring-border-width-recoup: 1;

    background-color: var(--sui-icon-button-bg-color);
    border-color: var(--sui-icon-button-border-color);
    color: var(
      --sui-icon-button-text-color,
      var(--sui-colors-neutral-static-w0)
    );

    --sui-icon-button-bg-color: var(--sui-colors-neutral-base);
    --sui-icon-button-bg-color-hover: var(--sui-colors-neutral-b5);
    --sui-icon-button-bg-color-active: var(--sui-colors-neutral-b3);
    --sui-icon-button-bg-color-disabled: var(--sui-colors-neutral-base);
    --sui-icon-button-border-color-active: var(--sui-colors-neutral-b0);
    --sui-icon-button-border-color-disabled: var(--sui-colors-neutral-b0-t20);
    --sui-icon-button-text-color-active: var(--sui-colors-neutral-b0);
    --sui-icon-button-text-color-disabled: var(--sui-colors-neutral-b3);
}

@media (hover: hover) {
.sui-icon-button-outlined:hover {
      background-color: var(--sui-icon-button-bg-color-hover);
      border-color: var(--sui-icon-button-border-color-hover);
      color: var(--sui-icon-button-text-color-hover);
    }
}

.sui-icon-button-outlined.sui-active,
    .sui-icon-button-outlined:active {
      background-color: var(--sui-icon-button-bg-color-active);
      border-color: var(--sui-icon-button-border-color-active);
      color: var(--sui-icon-button-text-color-active);
    }

.sui-icon-button-outlined.sui-disabled {
      background-color: var(--sui-icon-button-bg-color-disabled);
      border-color: var(--sui-icon-button-border-color-disabled);
      color: var(--sui-icon-button-text-color-disabled);
    }

.sui-icon-button-outlined-primary {
      --sui-icon-button-border-color: var(--sui-colors-primary-f);
      --sui-icon-button-border-color-hover: var(
        --sui-colors-primary-f-high-contrast
      );
      --sui-icon-button-text-color: var(--sui-colors-primary-f);
      --sui-icon-button-text-color-hover: var(
        --sui-colors-primary-f-high-contrast
      );
    }

.sui-icon-button-outlined-success {
      --sui-icon-button-border-color: var(--sui-colors-success-f);
      --sui-icon-button-border-color-hover: var(
        --sui-colors-success-high-contrast
      );
      --sui-icon-button-text-color: var(--sui-colors-success-f);
      --sui-icon-button-text-color-hover: var(
        --sui-colors-success-high-contrast
      );
    }

.sui-icon-button-outlined-danger {
      --sui-icon-button-border-color: var(--sui-colors-danger-f);
      --sui-icon-button-border-color-hover: var(
        --sui-colors-danger-high-contrast
      );
      --sui-icon-button-text-color: var(--sui-colors-danger-f);
      --sui-icon-button-text-color-hover: var(
        --sui-colors-danger-high-contrast
      );
    }

.sui-icon-button-outlined-warning {
      --sui-icon-button-border-color: var(--sui-colors-warning-f);
      --sui-icon-button-border-color-hover: var(
        --sui-colors-warning-high-contrast
      );
      --sui-icon-button-text-color: var(--sui-colors-warning-f);
      --sui-icon-button-text-color-hover: var(
        --sui-colors-warning-high-contrast
      );
    }

.sui-icon-button-outlined-secondary {
      --sui-icon-button-border-color: var(--sui-colors-neutral-b0-t20);
      --sui-icon-button-border-color-hover: var(--sui-colors-neutral-b0-t30);
      --sui-icon-button-border-color-active: var(--sui-colors-neutral-b0-t50);
      --sui-icon-button-text-color: var(--sui-colors-neutral-b0);
      --sui-icon-button-text-color-hover: var(--sui-colors-neutral-b0);
    }

.sui-icon-button-outlined-neutral {
      --sui-icon-button-text-color: var(--sui-colors-neutral-b1);
      --sui-icon-button-text-color-hover: var(--sui-colors-neutral-b0);
      --sui-icon-button-bg-color-hover: var(--sui-colors-neutral-b0-t10);
      --sui-icon-button-bg-color-active: var(--sui-colors-neutral-b0-t20);
      --sui-icon-button-border-color: var(--sui-colors-neutral-b0-t20);
      --sui-icon-button-border-color-hover: var(--sui-colors-neutral-b0-t30);
      --sui-icon-button-border-color-active: var(--sui-colors-neutral-b0-t50);
    }

.sui-icon-button-outlined-squircle {

    border-style: none;

    --sui-focus-ring-border-width-recoup: 0;

      --sui-squircle-border-width: var(--sui-border-width-1);
}

.sui-icon-button-outlined-hide-background {

    background-color: transparent;
}

.sui-icon-button-outlined-hide-background.sui-disabled {

    background-color: transparent;
}

.sui-icon-button-icon {

    background-color: transparent;

    padding-left: var(--sui-spacing-0);

    padding-right: var(--sui-spacing-0);

    color: var(--sui-icon-button-text-color);

    --sui-icon-button-bg-color: transparent;
    --sui-icon-button-bg-color-hover: transparent;
    --sui-icon-button-bg-color-active: transparent;
    --sui-icon-button-bg-color-disabled: transparent;
    --sui-icon-button-text-color-disabled: var(--sui-colors-neutral-b3);
}

@media (hover: hover) {
.sui-icon-button-icon:hover {
      color: var(--sui-icon-button-text-color-hover);
    }
}

.sui-icon-button-icon.sui-active,
    .sui-icon-button-icon:active {
      color: var(--sui-icon-button-text-color-active);
    }

.sui-icon-button-icon.sui-disabled {
      color: var(--sui-icon-button-text-color-disabled);
    }

.sui-icon-button-icon-primary {
      --sui-icon-button-text-color: var(--sui-colors-primary-f);
      --sui-icon-button-text-color-hover: var(
        --sui-colors-primary-f-high-contrast
      );
      --sui-icon-button-text-color-active: var(--sui-colors-neutral-b0);
    }

.sui-icon-button-icon-success {
      --sui-icon-button-text-color: var(--sui-colors-success-f);
      --sui-icon-button-text-color-hover: var(
        --sui-colors-success-high-contrast
      );
      --sui-icon-button-text-color-active: var(--sui-colors-neutral-b0);
    }

.sui-icon-button-icon-danger {
      --sui-icon-button-text-color: var(--sui-colors-danger-f);
      --sui-icon-button-text-color-hover: var(
        --sui-colors-danger-high-contrast
      );
      --sui-icon-button-text-color-active: var(--sui-colors-neutral-b0);
    }

.sui-icon-button-icon-warning {
      --sui-icon-button-text-color: var(--sui-colors-warning-f);
      --sui-icon-button-text-color-hover: var(
        --sui-colors-warning-high-contrast
      );
      --sui-icon-button-text-color-active: var(--sui-colors-neutral-b0);
    }

.sui-icon-button-icon-secondary {
      --sui-icon-button-text-color: var(--sui-colors-neutral-b0);
      --sui-icon-button-text-color-hover: var(
        --sui-colors-primary-f-high-contrast
      );
      --sui-icon-button-text-color-active: var(--sui-colors-neutral-b0);
    }

.sui-icon-button-icon-neutral {
      --sui-icon-button-text-color: var(--sui-colors-neutral-b1);
      --sui-icon-button-text-color-hover: var(--sui-colors-neutral-b0);
      --sui-icon-button-text-color-active: var(--sui-colors-neutral-b0);
    }

.sui-icon-button-inverted {

    padding-left: var(--sui-spacing-0);

    padding-right: var(--sui-spacing-0);

    background-color: var(--sui-icon-button-bg-color);
    color: var(--sui-icon-button-text-color);

    --sui-icon-button-bg-color-disabled: var(--sui-colors-neutral-b4-t50);
    --sui-icon-button-text-color-disabled: var(--sui-colors-neutral-b3);
    --sui-icon-button-text-color-active: var(--sui-colors-neutral-b0);
}

@media (hover: hover) {
.sui-icon-button-inverted:hover {
      background-color: var(--sui-icon-button-bg-color-hover);
      color: var(--sui-icon-button-text-color-hover);
    }
}

.sui-icon-button-inverted.sui-active,
    .sui-icon-button-inverted:active {
      background-color: var(
        --sui-icon-button-bg-color-active,
        var(--sui-icon-button-bg-color)
      );
      color: var(--sui-icon-button-text-color-active);
    }

.sui-icon-button-inverted.sui-disabled {
      background-color: var(--sui-icon-button-bg-color-disabled);
      color: var(--sui-icon-button-text-color-disabled);
    }

.sui-icon-button-inverted-primary {
      --sui-icon-button-bg-color: var(--sui-colors-primary-t10);
      --sui-icon-button-bg-color-hover: var(--sui-colors-primary-b-t20);
      --sui-icon-button-text-color: var(--sui-colors-primary-f);
      --sui-icon-button-text-color-hover: var(
        --sui-colors-primary-f-high-contrast
      );
    }

.sui-icon-button-inverted-success {
      --sui-icon-button-bg-color: var(--sui-colors-success-t10);
      --sui-icon-button-bg-color-hover: var(--sui-colors-success-t20);
      --sui-icon-button-text-color: var(--sui-colors-success-f);
      --sui-icon-button-text-color-hover: var(
        --sui-colors-success-high-contrast
      );
    }

.sui-icon-button-inverted-danger {
      --sui-icon-button-bg-color: var(--sui-colors-danger-t10);
      --sui-icon-button-bg-color-hover: var(--sui-colors-danger-t20);
      --sui-icon-button-text-color: var(--sui-colors-danger-f);
      --sui-icon-button-text-color-hover: var(
        --sui-colors-danger-high-contrast
      );
    }

.sui-icon-button-inverted-warning {
      --sui-icon-button-bg-color: var(--sui-colors-warning-t10);
      --sui-icon-button-bg-color-hover: var(--sui-colors-warning-t20);
      --sui-icon-button-text-color: var(--sui-colors-warning-f);
      --sui-icon-button-text-color-hover: var(
        --sui-colors-warning-high-contrast
      );
    }

.sui-icon-button-inverted-secondary {
      --sui-icon-button-bg-color: var(--sui-colors-neutral-w0-t10);
      --sui-icon-button-bg-color-hover: var(--sui-colors-neutral-w0-t20);
      --sui-icon-button-bg-color-disabled: var(--sui-colors-neutral-w0-t10);
      --sui-icon-button-text-color: var(--sui-colors-neutral-w0);
      --sui-icon-button-text-color-hover: var(--sui-colors-neutral-w0);
      --sui-icon-button-text-color-active: var(--sui-colors-neutral-w0);
      --sui-icon-button-text-color-disabled: var(--sui-colors-neutral-w0-t20);
    }

.sui-icon-button-inverted-secondary:focus-visible,
      .sui-icon-button-inverted-secondary.sui-focus-visible {
        --sui-focus-ring-color: var(--sui-colors-neutral-w0);
        --sui-squircle-ring-color: var(--sui-colors-neutral-w0);
      }

.sui-icon-button-inverted-neutral {
      --sui-icon-button-bg-color: var(--sui-colors-neutral-b0-t10);
      --sui-icon-button-bg-color-hover: var(--sui-colors-neutral-b0-t20);
      --sui-icon-button-bg-color-disabled: var(--sui-colors-neutral-b0-t10);
      --sui-icon-button-text-color: var(--sui-colors-neutral-b1);
      --sui-icon-button-text-color-hover: var(--sui-colors-neutral-b0);
      --sui-icon-button-text-color-active: var(--sui-colors-neutral-b0);
      --sui-icon-button-text-color-disabled: var(--sui-colors-neutral-b3);
    }

.sui-icon-button-inverted-squircle {
      --sui-icon-button-border-color: transparent;
      --sui-icon-button-border-color-hover: transparent;
      --sui-icon-button-border-color-active: transparent;
      --sui-icon-button-bg-color-active: var(--sui-icon-button-bg-color);
    }

.sui-icon-button-inverted-hide-background {

    background-color: transparent;
}

.sui-icon-button-inverted-hide-background.sui-disabled {

    background-color: transparent;
}

.sui-icon-button-rectangular {

    border-radius: var(--sui-border-radius-sm);

    --sui-focus-ring-border-radius: var(--sui-border-radius-sm);
}

.sui-icon-button-squircle {

    background-color: transparent;

    --sui-squircle-bg-color: var(--sui-icon-button-bg-color);
    --sui-squircle-bg-color-hover: var(--sui-icon-button-bg-color-hover);
    --sui-squircle-bg-color-active: var(--sui-icon-button-bg-color-active);
    --sui-squircle-border-color: var(--sui-icon-button-border-color);
    --sui-squircle-border-color-hover: var(
      --sui-icon-button-border-color-hover
    );
    --sui-squircle-border-color-active: var(
      --sui-icon-button-border-color-active
    );
}

.sui-icon-button-squircle.sui-disabled {
      --sui-squircle-bg-color: var(--sui-icon-button-bg-color-disabled);
      --sui-squircle-border-color: var(--sui-icon-button-border-color-disabled);

      color: var(--sui-icon-button-text-color-disabled);
    }

.sui-icon-button-squircle-hide-background {
      --sui-squircle-bg-color: transparent;
    }

@media (hover: hover) {
.sui-icon-button-squircle-hide-background:hover {
        --sui-squircle-bg-color: var(--sui-icon-button-bg-color);
        --sui-squircle-border-color: var(--sui-icon-button-border-color);
      }
}

.sui-icon-button-squircle-hide-background.sui-disabled {
        --sui-squircle-bg-color: transparent;
      }

.sui-icon-button-squircle.sui-active,
    .sui-icon-button-squircle:active,
    .sui-icon-button-squircle.sui-disabled {

    background-color: transparent;
}

@media (hover: hover) {
.sui-icon-button-squircle:hover,
    .sui-icon-button-squircle:active:hover {

        background-color: transparent;
    }
}

.sui-icon-button-xsmall {

    padding-left: var(--sui-spacing-0\.5);

    padding-right: var(--sui-spacing-0\.5);
}

.sui-icon-button-xsmall-circular,
    .sui-icon-button-xsmall-inverted,
    .sui-icon-button-xsmall-squircle,
    .sui-icon-button-xsmall-rectangular {

    height: var(--sui-spacing-5);

    width: var(--sui-spacing-5);
}

.sui-icon-button-small {

    padding-left: var(--sui-spacing-0\.5);

    padding-right: var(--sui-spacing-0\.5);
}

.sui-icon-button-small-circular,
    .sui-icon-button-small-inverted,
    .sui-icon-button-small-squircle,
    .sui-icon-button-small-rectangular {

    height: var(--sui-spacing-6);

    width: var(--sui-spacing-6);
}

.sui-icon-button-small-rectangular,
  .sui-icon-button-xsmall-rectangular {

    border-radius: var(--sui-border-radius-xs);

    --sui-focus-ring-border-radius: var(--sui-border-radius-xs);
}

.sui-icon-button-medium {

    padding-left: var(--sui-spacing-1);

    padding-right: var(--sui-spacing-1);
}

.sui-icon-button-medium-circular,
    .sui-icon-button-medium-inverted,
    .sui-icon-button-medium-squircle,
    .sui-icon-button-medium-rectangular {

    height: var(--sui-spacing-8);

    width: var(--sui-spacing-8);
}

.sui-icon-button-large {

    padding-left: var(--sui-spacing-1);

    padding-right: var(--sui-spacing-1);
}

.sui-icon-button-large-circular,
    .sui-icon-button-large-inverted,
    .sui-icon-button-large-squircle,
    .sui-icon-button-large-rectangular {

    height: var(--sui-spacing-9);

    width: var(--sui-spacing-9);
}

.sui-icon-button-xlarge {

    padding-left: var(--sui-spacing-1\.5);

    padding-right: var(--sui-spacing-1\.5);
}

.sui-icon-button-xlarge-circular,
    .sui-icon-button-xlarge-inverted,
    .sui-icon-button-xlarge-squircle,
    .sui-icon-button-xlarge-rectangular {

    height: var(--sui-spacing-12);

    width: var(--sui-spacing-12);
}

.sui-icon-button-xxlarge {

    padding-left: var(--sui-spacing-2);

    padding-right: var(--sui-spacing-2);
}

.sui-icon-button-xxlarge-circular,
    .sui-icon-button-xxlarge-inverted,
    .sui-icon-button-xxlarge-squircle {

    height: var(--sui-spacing-14);

    width: var(--sui-spacing-14);
}

.sui-icon-button-xxlarge-label {

    max-width: var(--sui-spacing-14);
}

.sui-icon-button-xxlarge-rectangular {

    height: var(--sui-spacing-14);

    min-width: var(--sui-spacing-14);

    max-width: var(--sui-spacing-64);
}

.sui-icon-button-xxlarge-rectangular-label {

    max-width: var(--sui-spacing-64);
}

.sui-icon-button-xxxlarge {

    padding-left: var(--sui-spacing-2);

    padding-right: var(--sui-spacing-2);
}

.sui-icon-button-xxxlarge-label {

    max-width: var(--sui-spacing-16);
}

.sui-icon-button-xxxlarge-circular,
    .sui-icon-button-xxxlarge-inverted,
    .sui-icon-button-xxxlarge-squircle {

    height: var(--sui-spacing-16);

    width: var(--sui-spacing-16);
}

.sui-icon-button-xxxlarge-rectangular {

    height: var(--sui-spacing-16);

    min-width: var(--sui-spacing-16);

    max-width: var(--sui-spacing-64);
}

.sui-icon-button-xxxlarge-rectangular-label {

    max-width: var(--sui-spacing-64);
}

.sui-icon-button-outer-label-root {

    margin-top: var(--sui-spacing-0);

    display: inline-flex;

    -webkit-user-select: none;

            user-select: none;

    flex-direction: column;

    align-items: center
}

.sui-icon-button-outer-label-text {

    font-size: var(--sui-typography-descriptor-mini-font-size);

    font-weight: var(--sui-typography-descriptor-mini-font-weight);

    line-height: var(--sui-typography-descriptor-mini-line-height);

    -webkit-text-decoration: var(--sui-typography-descriptor-mini-text-decoration);

            text-decoration: var(--sui-typography-descriptor-mini-text-decoration);

    text-transform: var(--sui-typography-descriptor-mini-text-transform);

    font-family: var(--sui-font-family);

    margin-top: var(--sui-spacing-1);

    width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    white-space: pre-wrap;

    text-align: center
}

.sui-divider-root {
    position: relative;
    display: block;
    overflow: visible;
    border-color: var(--sui-colors-neutral-b0-t10);
    border-width: var(--sui-border-width-0);
    --sui-focus-ring-border-width: var(--sui-border-width-0);
    border-style: solid;
    --sui-focus-ring-border-width-recoup: 1
}

.sui-divider-horizontal {
    border-bottom-width: var(--sui-border-width-1)
}

.sui-divider-horizontal::after {
    --tw-content: attr(data-title);
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-bg-opacity)))
}

.sui-divider-horizontal-has-title::after {
    position: absolute;
    left: 50%;
    top: 50%;
    --tw-translate-x: -50%;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    font-size: var(--sui-typography-descriptor-mini-font-size);
    font-weight: var(--sui-typography-descriptor-mini-font-weight);
    line-height: var(--sui-typography-descriptor-mini-line-height);
    -webkit-text-decoration: var(--sui-typography-descriptor-mini-text-decoration);
            text-decoration: var(--sui-typography-descriptor-mini-text-decoration);
    text-transform: var(--sui-typography-descriptor-mini-text-transform);
    font-family: var(--sui-font-family);
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: var(--sui-spacing-4);
    padding-right: var(--sui-spacing-4);
    --tw-text-opacity: 1;
    color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)))
}

.sui-divider-vertical {
    height: 100%;
    border-bottom-width: var(--sui-border-width-0);
    border-right-width: var(--sui-border-width-1)
}

.sui-divider-flex-item {
    height: auto;
    align-self: stretch
}

.sui-divider-full {
    margin: var(--sui-spacing-0)
}

.sui-divider-middle-horizontal {
    margin-left: var(--sui-spacing-4);
    margin-right: var(--sui-spacing-4)
}

.sui-divider-middle-vertical {
    margin-top: var(--sui-spacing-4);
    margin-bottom: var(--sui-spacing-4)
}

.sui-popover-popper {

    outline: 2px solid transparent;

    outline-offset: 2px
}

.sui-popover-paper {

    --tw-bg-opacity: 1;

    background-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-bg-opacity)));

    border-radius: var(--sui-border-radius-sm);

    --sui-focus-ring-border-radius: var(--sui-border-radius-sm)
}

.sui-popover-paper[data-sui-popper-placement^='top'] .sui-popover-widget {

    transform-origin: bottom
}

.sui-popover-paper[data-sui-popper-placement^='bottom'] .sui-popover-widget {

    transform-origin: top
}

.sui-popover-paper[data-sui-popper-placement^='left'] .sui-popover-widget {

    transform-origin: right
}

.sui-popover-paper[data-sui-popper-placement^='right'] .sui-popover-widget {

    transform-origin: left
}

.sui-popover-bordered {

    border-style: solid;

    border-color: var(--sui-colors-neutral-b0-t20);

    border-width: var(--sui-border-width-1);

    --sui-focus-ring-border-width: var(--sui-border-width-1);

    --sui-focus-ring-border-width-recoup: 1
}

.sui-popover-shadow {

    --tw-shadow: var(--sui-box-shadow-md);

    --tw-shadow-colored: var(--sui-box-shadow-md);

    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.sui-menu-paper {
    min-width: var(--sui-spacing-50);
    max-width: var(--sui-spacing-112);
    overflow: hidden;
    padding-top: var(--sui-spacing-2);
    padding-bottom: var(--sui-spacing-2)
}

.sui-list-root {
    width: 100%;
    overflow: auto;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-bg-opacity)));
    outline: 2px solid transparent;
    outline-offset: 2px
}

.sui-menu-item-container {

    position: relative;

    box-sizing: border-box;

    display: flex;

    min-height: var(--sui-spacing-10);

    -webkit-user-select: none;

            user-select: none;

    align-items: center;

    padding-left: var(--sui-spacing-2);

    padding-right: var(--sui-spacing-2);

    padding-top: var(--sui-spacing-2\.5);

    padding-bottom: var(--sui-spacing-2\.5);

    border-radius: var(--sui-border-radius-sm);

    --sui-focus-ring-border-radius: var(--sui-border-radius-sm);
}

.sui-menu-item-select-indicator {

    display: flex;

    align-items: center;

    align-self: flex-start;

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));

    opacity: 0;

    height: var(--sui-typography-subtitle-mini-line-height);
}

.sui-menu-item-select-dot {

    display: flex;

    height: var(--sui-spacing-4);

    width: var(--sui-spacing-4);

    align-items: center;

    justify-content: center;
}

.sui-menu-item-select-dot::after {

    height: var(--sui-spacing-1\.5);

    width: var(--sui-spacing-1\.5);

    background-color: currentColor;

    border-radius: var(--sui-border-radius-full);

    --sui-focus-ring-border-radius: var(--sui-border-radius-full);

      content: '';
}

.sui-menu-item-root {

    box-sizing: border-box;

    width: 100%;

    cursor: pointer;

    --tw-bg-opacity: 1;

    background-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-bg-opacity)));

    padding-left: var(--sui-spacing-2);

    padding-right: var(--sui-spacing-2);

    outline: 2px solid transparent;

    outline-offset: 2px;

    font-size: var(--sui-typography-subtitle-mini-font-size);

    font-weight: var(--sui-typography-subtitle-mini-font-weight);

    line-height: var(--sui-typography-subtitle-mini-line-height);

    -webkit-text-decoration: var(--sui-typography-subtitle-mini-text-decoration);

            text-decoration: var(--sui-typography-subtitle-mini-text-decoration);

    text-transform: var(--sui-typography-subtitle-mini-text-transform);

    font-family: var(--sui-font-family);

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));
}

@media (hover: hover) {
  .sui-menu-item-root:hover .sui-menu-item-container {

        --tw-bg-opacity: 1;

        background-color: rgb(var(--s-neutral-b5), calc(var(--s-neutral-b5-opacity, 1) * var(--tw-bg-opacity)));
    }
}

.sui-menu-item-root.sui-selected {

    font-size: var(--sui-typography-subtitle-mini-font-size);

    font-weight: var(--sui-typography-subtitle-mini-font-weight);

    line-height: var(--sui-typography-subtitle-mini-line-height);

    -webkit-text-decoration: var(--sui-typography-subtitle-mini-text-decoration);

            text-decoration: var(--sui-typography-subtitle-mini-text-decoration);

    text-transform: var(--sui-typography-subtitle-mini-text-transform);

    font-family: var(--sui-font-family);
}

.sui-menu-item-root.sui-selected .sui-menu-item-select-indicator {

    opacity: 1;
}

.sui-menu-item-root.sui-disabled {

    pointer-events: none;

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-text-opacity)));
}

.sui-menu-item-root.sui-disabled.sui-spruno .sui-list-item-text > span {

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-text-opacity)));
}

.sui-menu-item-root.sui-disabled .sui-menu-item-select-indicator {

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-text-opacity)));
}

.sui-menu-item-root.sui-focus-visible,
    .sui-menu-item-root.sui-focused {

    outline: 2px solid transparent;

    outline-offset: 2px;
}

.sui-menu-item-root.sui-focus-visible .sui-menu-item-container, .sui-menu-item-root.sui-focused .sui-menu-item-container {

    --sui-focus-ring-color: var(--sui-focus-ring-inset-color);
}

.sui-menu-item-root.sui-focus-visible .sui-menu-item-container::after, .sui-menu-item-root.sui-focused .sui-menu-item-container::after {

    pointer-events: none;

    content: '';

    position: absolute;

    inset: 0;

    border-radius: var(--sui-focus-ring-border-radius, 0px);

    box-shadow: inset 0 0 0 var(--sui-focus-ring-inset-width) var(--sui-focus-ring-color);
}

.sui-menu-item-root.sui-focus-visible .sui-menu-item-container, .sui-menu-item-root.sui-focused .sui-menu-item-container {

    --tw-bg-opacity: 1;

    background-color: rgb(var(--s-neutral-b5), calc(var(--s-neutral-b5-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-menu-item-root:not(:focus-within):active .sui-menu-item-container, .sui-menu-item-root:not(:focus-within).sui-active .sui-menu-item-container, .sui-menu-item-root:focus:active .sui-menu-item-container, .sui-menu-item-root:focus.sui-active .sui-menu-item-container, .sui-menu-item-root.sui-focused:active .sui-menu-item-container, .sui-menu-item-root.sui-focused.sui-active .sui-menu-item-container {

    --tw-bg-opacity: 1;

    background-color: rgb(var(--s-neutral-b4), calc(var(--s-neutral-b4-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-menu-item-nowrap .sui-menu-item-container {

    height: var(--sui-spacing-10);

    padding-top: var(--sui-spacing-0);

    padding-bottom: var(--sui-spacing-0);
}

.sui-menu-item-nowrap .sui-menu-item-select-indicator {

    align-self: center;
}

.sui-menu-item-nowrap .sui-menu-item-text {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.sui-menu-item-selectable {

    font-size: var(--sui-typography-main-text-font-size);

    font-weight: var(--sui-typography-main-text-font-weight);

    line-height: var(--sui-typography-main-text-line-height);

    -webkit-text-decoration: var(--sui-typography-main-text-text-decoration);

            text-decoration: var(--sui-typography-main-text-text-decoration);

    text-transform: var(--sui-typography-main-text-text-transform);

    font-family: var(--sui-font-family);
}

.sui-menu-item-highlighted .sui-menu-item-container {

    --tw-bg-opacity: 1;

    background-color: rgb(var(--s-neutral-b5), calc(var(--s-neutral-b5-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-menu-list-root {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-bg-opacity)))
}

.sui-virtualized-menu-paper {

    min-width: var(--sui-spacing-50);

    max-width: var(--sui-spacing-112);

    overflow: hidden
}

.sui-virtualized-menu-paper-content-container {

    width: 100%
}

.sui-select-chevron {

  height: var(--sui-spacing-6);

  width: var(--sui-spacing-6);

  flex-shrink: 0;

  --tw-text-opacity: 1;

  color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));

  --sui-squircle-bg-color: transparent;

  --sui-squircle-border-color: transparent;

  --sui-squircle-border-width: var(--sui-border-width-0)
}

.sui-select-placeholder {

  --tw-text-opacity: 1;

  color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-text-opacity)))
}

@media (prefers-reduced-motion: no-preference) {

  .sui-select-placeholder {

    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 150ms;

    transition-duration: var(--sui-transition-neutral-01-fast-transition-duration);

    transition-timing-function: var(--sui-transition-neutral-01-fast-transition-timing-function)
  }
}

.sui-select-placeholder,
.sui-select-value {

  font-size: var(--sui-typography-main-text-font-size);

  font-weight: var(--sui-typography-main-text-font-weight);

  line-height: var(--sui-typography-main-text-line-height);

  -webkit-text-decoration: var(--sui-typography-main-text-text-decoration);

          text-decoration: var(--sui-typography-main-text-text-decoration);

  text-transform: var(--sui-typography-main-text-text-transform);

  font-family: var(--sui-font-family);

  flex-grow: 1;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  text-align: left
}

.sui-select-value {

  --tw-text-opacity: 1;

  color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)))
}

.sui-select-error .sui-select-chevron {

  --tw-text-opacity: 1;

  color: rgb(var(--s-danger), calc(var(--s-danger-opacity, 1) * var(--tw-text-opacity)))
}

.sui-select-selector {

  display: flex;

  cursor: pointer;

  align-items: center;

  justify-content: flex-start;

  height: 100%;

  width: 100%;

  min-width: var(--sui-spacing-24);

  padding: var(--sui-spacing-0);

  outline: 2px solid transparent;

  outline-offset: 2px;

  border-style: none;

  background-color: transparent;

  --sui-focus-ring-border-width-recoup: 0
}

.sui-select-menu {

  max-width: none
}

.sui-select-native-input {

  display: none
}

.sui-select-content {

  padding: var(--sui-spacing-0)
}

.sui-select-outlined-selector-xlarge, .sui-select-contained-selector-xlarge {

  padding-left: var(--sui-spacing-4);

  padding-right: var(--sui-spacing-3)
}

.sui-select-outlined-selector-large, .sui-select-contained-selector-large {

  padding-left: var(--sui-spacing-3);

  padding-right: var(--sui-spacing-2)
}

.sui-select-outlined-selector-medium, .sui-select-contained-selector-medium {

  padding-left: var(--sui-spacing-2\.5);

  padding-right: var(--sui-spacing-1\.5)
}

@media (prefers-reduced-motion: no-preference) {

  .sui-select-outlined-selector, .sui-select-contained-selector {

    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 150ms;

    transition-duration: var(--sui-transition-neutral-01-fast-transition-duration);

    transition-timing-function: var(--sui-transition-neutral-01-fast-transition-timing-function)
  }
}

.sui-select-outlined-selector.sui-expanded {

  --tw-bg-opacity: 1;

  background-color: rgb(var(--s-neutral-b5), calc(var(--s-neutral-b5-opacity, 1) * var(--tw-bg-opacity)))
}

.sui-select-outlined-selector.sui-expanded .sui-select-chevron {

  --tw-text-opacity: 1;

  color: rgb(var(--s-primary-f), calc(var(--s-primary-f-opacity, 1) * var(--tw-text-opacity)));

  --s-squircle-bg-color-opacity: 1;

  --sui-squircle-bg-color: rgb(var(--s-neutral-b4), calc(var(--s-neutral-b4-opacity, 1) * var(--s-squircle-bg-color-opacity)))
}

.sui-select-error .sui-select-contained-selector.sui-expanded {

  background-color: transparent
}

.sui-select-error .sui-select-contained-selector.sui-expanded .sui-select-chevron {

  --tw-text-opacity: 1;

  color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)))
}

.sui-select-contained-selector.sui-expanded {

  --tw-bg-opacity: 1;

  background-color: rgb(var(--s-neutral-b4), calc(var(--s-neutral-b4-opacity, 1) * var(--tw-bg-opacity)))
}

.sui-select-contained-selector.sui-expanded .sui-select-chevron {

  --s-squircle-bg-color-opacity: 1;

  --sui-squircle-bg-color: rgb(var(--s-neutral-b5), calc(var(--s-neutral-b5-opacity, 1) * var(--s-squircle-bg-color-opacity)))
}

.sui-select-standard-selector.sui-expanded .sui-select-chevron {

  --tw-text-opacity: 1;

  color: rgb(var(--s-primary-f), calc(var(--s-primary-f-opacity, 1) * var(--tw-text-opacity)))
}

.sui-select-root {

  --tw-text-opacity: 1;

  color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)))
}

@media (hover: hover) {

.sui-select-root:hover .sui-select-placeholder {

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)))
  }
}

.sui-select-root.sui-disabled .sui-select-selector {

  pointer-events: none
}

.sui-select-root.sui-disabled .sui-select-selector,
    .sui-select-root.sui-disabled .sui-select-placeholder,
    .sui-select-root.sui-disabled .sui-select-value,
    .sui-select-root.sui-disabled .sui-select-chevron {

  --tw-text-opacity: 1;

  color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-text-opacity)))
}

.sui-split-button-root {
      position: relative;
      display: inline-flex;
}

.sui-split-button-bg {
      position: absolute;
      inset: var(--sui-spacing-0);
      box-sizing: border-box;
      padding-left: var(--sui-spacing-0);
      padding-right: var(--sui-spacing-0);
}

.sui-split-button-bg.sui-button-outlined {
      border-color: transparent;
}

.sui-split-button-action-button-root {
      border-top-right-radius: var(--sui-border-radius-none);
      border-bottom-right-radius: var(--sui-border-radius-none);
      border-right-width: var(--sui-border-width-0);
}

.sui-split-button-action-button-root:focus-visible::after,
    .sui-split-button-action-button-root.sui-focus-visible::after {
      border-top-right-radius: var(--sui-border-radius-none);
      border-bottom-right-radius: var(--sui-border-radius-none);
}

.sui-split-button-divider-contained-primary,
    .sui-split-button-divider-contained-danger,
    .sui-split-button-divider-contained-warning,
    .sui-split-button-divider-contained-success {
      border-color: var(--sui-colors-neutral-w0-t20);
}

.sui-split-button-divider-contained-secondary,
    .sui-split-button-divider-contained-neutral {
      border-color: var(--sui-colors-neutral-b0-t10);
}

.sui-split-button-divider-inverted-primary,
    .sui-split-button-divider-outlined-primary {
      --tw-border-opacity: 1;
      border-color: rgb(var(--s-primary-f), calc(var(--s-primary-f-opacity, 1) * var(--tw-border-opacity)));
}

.sui-split-button-divider-inverted-danger,
    .sui-split-button-divider-outlined-danger {
      --tw-border-opacity: 1;
      border-color: rgb(var(--s-danger-f), calc(var(--s-danger-f-opacity, 1) * var(--tw-border-opacity)));
}

.sui-split-button-divider-inverted-warning,
    .sui-split-button-divider-outlined-warning {
      --tw-border-opacity: 1;
      border-color: rgb(var(--s-warning-f), calc(var(--s-warning-f-opacity, 1) * var(--tw-border-opacity)));
}

.sui-split-button-divider-inverted-success,
    .sui-split-button-divider-outlined-success {
      --tw-border-opacity: 1;
      border-color: rgb(var(--s-success-f), calc(var(--s-success-f-opacity, 1) * var(--tw-border-opacity)));
}

.sui-split-button-divider-inverted-secondary,
    .sui-split-button-divider-inverted-neutral {
      --tw-border-opacity: 1;
      border-color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--tw-border-opacity)));
}

.sui-split-button-divider-outlined-primary.sui-disabled,
    .sui-split-button-divider-outlined-danger.sui-disabled,
    .sui-split-button-divider-outlined-warning.sui-disabled,
    .sui-split-button-divider-outlined-success.sui-disabled,
    .sui-split-button-divider-outlined-secondary,
    .sui-split-button-divider-outlined-neutral {
      border-color: var(--sui-colors-neutral-b0-t20);
}

.sui-split-button-divider-inverted-primary.sui-disabled,
    .sui-split-button-divider-inverted-danger.sui-disabled,
    .sui-split-button-divider-inverted-warning.sui-disabled,
    .sui-split-button-divider-inverted-success.sui-disabled,
    .sui-split-button-divider-inverted-neutral.sui-disabled {
      --tw-border-opacity: 1;
      border-color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-border-opacity)));
}

.sui-split-button-divider-inverted-secondary.sui-disabled {
      border-color: var(--sui-colors-neutral-w0-t20);
}

.sui-split-button-divider-inverted-neutral {
      --tw-border-opacity: 1;
      border-color: rgb(var(--s-neutral-b1), calc(var(--s-neutral-b1-opacity, 1) * var(--tw-border-opacity)));
}

.sui-split-button-divider-text,
    .sui-split-button-divider-text.sui-disabled {
      visibility: hidden;
}

.sui-split-button-menu-button-root {
      width: auto;
      border-top-left-radius: var(--sui-border-radius-none);
      border-bottom-left-radius: var(--sui-border-radius-none);
      border-left-width: var(--sui-border-width-0);
}

.sui-split-button-menu-button-root:focus-visible::after,
    .sui-split-button-menu-button-root.sui-focus-visible::after {
      border-top-left-radius: var(--sui-border-radius-none);
      border-bottom-left-radius: var(--sui-border-radius-none);
}

.sui-split-button-menu-button-root.sui-disabled {
      /* We use hideBackground on the IconButton and instead put a button BG div behind,
      so the button visually does have a background. This means we need to reset the
      text color to its usual non-hideBackground color */
      color: var(--sui-icon-button-text-color-disabled);
    }

.sui-fab-button-root {

    cursor: pointer;

    -webkit-user-select: none;

            user-select: none;

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-high-contrast-b0), calc(var(--s-neutral-high-contrast-b0-opacity, 1) * var(--tw-text-opacity)));

    outline: 2px solid transparent;

    outline-offset: 2px;

    border-style: none;

    background-color: transparent;

    --sui-focus-ring-border-width-recoup: 0;

    /* default */

    --s-squircle-bg-color-opacity: 1;

    --sui-squircle-bg-color: rgb(var(--s-primary-b), calc(var(--s-primary-b-opacity, 1) * var(--s-squircle-bg-color-opacity)));

    --sui-squircle-border-color: var(--sui-squircle-fill);

    /* hover */

    --s-squircle-bg-color-hover-opacity: 1;

    --sui-squircle-bg-color-hover: rgb(var(--s-primary-b-high-contrast), calc(var(--s-primary-b-high-contrast-opacity, 1) * var(--s-squircle-bg-color-hover-opacity)));

    --sui-squircle-border-color-hover: var(--sui-colors-primary-t0);

    --s-squircle-bg-color-active-opacity: 1;

    --sui-squircle-bg-color-active: rgb(var(--s-neutral-high-contrast-w0), calc(var(--s-neutral-high-contrast-w0-opacity, 1) * var(--s-squircle-bg-color-active-opacity)));

    /* focus */

    --s-squircle-ring-color-opacity: 1;

    --sui-squircle-ring-color: rgb(var(--s-primary-f-high-contrast), calc(var(--s-primary-f-high-contrast-opacity, 1) * var(--s-squircle-ring-color-opacity)));

    --sui-squircle-ring-offset: var(--sui-border-width-2);

    --sui-squircle-ring-width: var(--sui-border-width-2)
}

.sui-fab-button-large {

    height: var(--sui-spacing-12);

    width: var(--sui-spacing-12)
}

.sui-fab-button-small {

    height: var(--sui-spacing-8);

    width: var(--sui-spacing-8)
}

.sui-fab-button-activated {

    --tw-text-opacity: 1;

    color: rgb(var(--s-primary-f), calc(var(--s-primary-f-opacity, 1) * var(--tw-text-opacity)));

    --s-squircle-bg-color-opacity: 1;

    --sui-squircle-bg-color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--s-squircle-bg-color-opacity)));

    --s-squircle-border-color-opacity: 1;

    --sui-squircle-border-color: rgb(var(--s-primary-f), calc(var(--s-primary-f-opacity, 1) * var(--s-squircle-border-color-opacity)));

    --sui-squircle-border-width: var(--sui-border-width-1\.2);

    /* hover */

    --s-squircle-bg-color-hover-opacity: 1;

    --sui-squircle-bg-color-hover: rgb(var(--s-neutral-b5), calc(var(--s-neutral-b5-opacity, 1) * var(--s-squircle-bg-color-hover-opacity)));

    --s-squircle-border-color-hover-opacity: 1;

    --sui-squircle-border-color-hover: rgb(var(--s-primary-f-high-contrast), calc(var(--s-primary-f-high-contrast-opacity, 1) * var(--s-squircle-border-color-hover-opacity)));

    /* pressed */

    --s-squircle-bg-color-active-opacity: 1;

    --sui-squircle-bg-color-active: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--s-squircle-bg-color-active-opacity)))
}

@media (hover: hover) {
  .sui-fab-button-activated:hover {

        --tw-text-opacity: 1;

        color: rgb(var(--s-primary-f-high-contrast), calc(var(--s-primary-f-high-contrast-opacity, 1) * var(--tw-text-opacity)))
    }
}

.sui-fab-button-activated.sui-active,
    .sui-fab-button-activated:active {

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)))
}

.sui-call-button-end svg {
    transform: rotate(135deg);
  }

.sui-checkbox-input {

    position: absolute;

    inset: var(--sui-spacing-0);

    margin: var(--sui-spacing-0);

    height: 100%;

    width: 100%;

    cursor: pointer;

    opacity: 0;
}

.sui-checkbox-root {

    position: relative;

    display: inline-flex;

    height: var(--sui-spacing-5);

    width: var(--sui-spacing-5);

    align-items: center;

    justify-content: center;

    vertical-align: middle;

    border-radius: var(--sui-border-radius-xs);

    --sui-focus-ring-border-radius: var(--sui-border-radius-xs);

    box-sizing: border-box;

    border-style: none;

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-high-contrast-b0), calc(var(--s-neutral-high-contrast-b0-opacity, 1) * var(--tw-text-opacity)));

    --sui-focus-ring-border-width-recoup: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .sui-checkbox-root {

        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;

        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

        transition-duration: 300ms;
    }
}

.sui-checkbox-root {

    --sui-checkbox-bg-color: var(--sui-colors-neutral-base);
    --sui-checkbox-bg-color-hover: var(--sui-colors-neutral-b5);
    --sui-checkbox-bg-color-active: var(--sui-colors-neutral-b4);
    --sui-checkbox-bg-color-disabled: var(--sui-colors-neutral-base);
    --sui-checkbox-border-color: var(--sui-colors-neutral-b2);
    --sui-checkbox-border-color-hover: var(--sui-colors-neutral-b1);
    --sui-checkbox-border-color-active: var(--sui-colors-neutral-b1);
    --sui-checkbox-border-color-disabled: var(--sui-colors-neutral-b0-t20);
  }

.sui-checkbox-root.sui-disabled {

    pointer-events: none;
}

.sui-checkbox-rectangular {
    background-color: var(--sui-checkbox-bg-color);
  }

@media (hover: hover) {
  .sui-checkbox-rectangular:hover {
      background-color: var(--sui-checkbox-bg-color-hover);
    }
}

@media (hover: hover) {
  .sui-checkbox-rectangular:hover .sui-checkbox-inner {
        border-color: var(--sui-checkbox-border-color-hover);
      }
}

.sui-checkbox-rectangular:active {
      background-color: var(--sui-checkbox-bg-color-active);
    }

.sui-checkbox-rectangular:active .sui-checkbox-inner {
        border-color: var(--sui-checkbox-border-color-active);
      }

.sui-checkbox-rectangular.sui-disabled {
      background-color: var(--sui-checkbox-bg-color-disabled);
    }

.sui-checkbox-rectangular.sui-disabled .sui-checkbox-inner {
        border-color: var(--sui-checkbox-border-color-disabled);
      }

.sui-checkbox-rectangular:focus-visible,
    .sui-checkbox-rectangular.sui-focus-visible {

    --sui-focus-ring-color: var(--sui-focus-ring-normal-color);
}

.sui-checkbox-rectangular:focus-visible::after,
    .sui-checkbox-rectangular.sui-focus-visible::after {

    pointer-events: none;

    content: '';

    position: absolute;

    inset: 0;

    border-radius: calc(var(--sui-focus-ring-normal-offset) + var(--sui-focus-ring-border-radius, 0px));

    box-shadow: 0 0 0 var(--sui-focus-ring-normal-width) var(--sui-focus-ring-color);

    margin: calc(var(--sui-focus-ring-normal-offset)*-1 - var(--sui-focus-ring-border-width, 0px)*var(--sui-focus-ring-border-width-recoup, 1));
}

.sui-checkbox-squircle {
    --sui-squircle-border-width: var(--sui-border-width-1);
    --sui-squircle-bg-color: var(--sui-checkbox-bg-color);
    --sui-squircle-bg-color-hover: var(--sui-checkbox-bg-color-hover);
    --sui-squircle-border-color: var(--sui-checkbox-border-color);
    --sui-squircle-border-color-hover: var(--sui-checkbox-border-color-hover);
    --sui-squircle-border-color-active: var(--sui-checkbox-border-color-active);
    --sui-squircle-bg-color-active: var(--sui-checkbox-bg-color-active);
  }

.sui-checkbox-squircle.sui-disabled {
      --sui-squircle-bg-color: var(--sui-checkbox-bg-color-disabled);
      --sui-squircle-border-color: var(--sui-checkbox-border-color-disabled);
    }

.sui-checkbox.sui-checked,
  .sui-checkbox-indeterminate {
    --sui-checkbox-bg-color: var(--sui-colors-primary-b);
    --sui-checkbox-border-color: transparent;
    --sui-checkbox-border-color-hover: transparent;
    --sui-checkbox-border-color-active: transparent;
    --sui-checkbox-border-color-disabled: transparent;
    --sui-checkbox-bg-color-hover: var(--sui-colors-primary-b-high-contrast);
    --sui-checkbox-bg-color-active: var(--sui-colors-neutral-high-contrast-w0);
    --sui-checkbox-bg-color-disabled: var(--sui-colors-primary-b-t20);
  }

.sui-checkbox-inner-rectangular {

    pointer-events: none;

    position: absolute;

    box-sizing: border-box;

    height: 100%;

    width: 100%;

    border-radius: var(--sui-border-radius-xs);

    --sui-focus-ring-border-radius: var(--sui-border-radius-xs);

    border-style: solid;

    border-width: var(--sui-border-width-1\.2);

    --sui-focus-ring-border-width: var(--sui-border-width-1\.2);

    --sui-focus-ring-border-width-recoup: 1;

      border-color: var(--sui-checkbox-border-color);
}

.sui-chip-root {

  font-size: var(--sui-typography-subtitle-mini-font-size);

  font-weight: var(--sui-typography-subtitle-mini-font-weight);

  line-height: var(--sui-typography-subtitle-mini-line-height);

  -webkit-text-decoration: var(--sui-typography-subtitle-mini-text-decoration);

          text-decoration: var(--sui-typography-subtitle-mini-text-decoration);

  text-transform: var(--sui-typography-subtitle-mini-text-transform);

  font-family: var(--sui-font-family);

  box-sizing: border-box;

  display: inline-flex;

  align-items: center;

  border-style: solid;

  --tw-border-opacity: 1;

  border-color: rgb(var(--s-neutral-high-contrast), calc(var(--s-neutral-high-contrast-opacity, 1) * var(--tw-border-opacity)));

  border-radius: var(--sui-border-radius-full);

  --sui-focus-ring-border-radius: var(--sui-border-radius-full);

  border-width: var(--sui-border-width-1);

  --sui-focus-ring-border-width: var(--sui-border-width-1);

  --sui-focus-ring-border-width-recoup: 1;
}

@media (prefers-reduced-motion: no-preference) {.sui-chip-root {

    transition-duration: var(--sui-transition-neutral-01-fast-transition-duration);

    transition-timing-function: var(--sui-transition-neutral-01-fast-transition-timing-function);
  }
}

.sui-chip-root {

  background-color: var(--sui-chip-bg-color);
}

.sui-chip-root.sui-disabled {

  pointer-events: none;

  opacity: 0.35;
}

.sui-chip-truncate {

  max-width: var(--sui-spacing-36);
}

.sui-chip-label {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  padding-left: var(--sui-spacing-1);

  padding-right: var(--sui-spacing-1);
}

@media (prefers-reduced-motion: no-preference) {.sui-chip-label {

    transition-duration: var(--sui-transition-neutral-01-fast-transition-duration);

    transition-timing-function: var(--sui-transition-neutral-01-fast-transition-timing-function);
  }
}

.sui-chip-label {

  color: var(--sui-chip-text-color);
}

.sui-chip-large {

  height: var(--sui-spacing-8);

  padding: var(--sui-spacing-1);
}

.sui-chip-medium {

  height: var(--sui-spacing-7);

  padding: var(--sui-spacing-0\.5);
}

.sui-chip-delete-icon {

  flex-shrink: 0;

  /* --sui-squircle-bg-color: transparent; */

  color: var(--sui-chip-text-color);
}

.sui-chip-default {
  --sui-chip-bg-color: var(--sui-colors-neutral-b4);
  --sui-chip-text-color: var(--sui-colors-neutral-b1);
  --sui-chip-hover-bg-color: var(--sui-colors-neutral-b2);
  --sui-chip-active-bg-color: var(--sui-colors-neutral-b0);
}

.sui-chip-error {
  --sui-chip-bg-color: var(--sui-colors-danger-t10);
  --sui-chip-text-color: var(--sui-colors-danger-high-contrast);
  --sui-chip-hover-bg-color: var(--sui-colors-danger);
  --sui-chip-active-bg-color: var(--sui-colors-danger-high-contrast);
}

.sui-chip-clickable {

  position: relative;

  cursor: pointer;

  outline: 2px solid transparent;

  outline-offset: 2px;
}

.sui-chip-clickable:focus-visible {

  --sui-focus-ring-color: var(--sui-focus-ring-tight-color);
}

.sui-chip-clickable:focus-visible::after {

  pointer-events: none;

  content: '';

  position: absolute;

  inset: 0;

  border-radius: calc(var(--sui-focus-ring-tight-offset) + var(--sui-focus-ring-border-radius, 0px));

  box-shadow: 0 0 0 var(--sui-focus-ring-tight-width) var(--sui-focus-ring-color);

  margin: calc(var(--sui-focus-ring-tight-offset)*-1 - var(--sui-focus-ring-border-width, 0px)*var(--sui-focus-ring-border-width-recoup, 1));
}

@media (hover: hover) {

.sui-chip-clickable:hover {
    background-color: var(--sui-chip-hover-bg-color);
  }
}

@media (hover: hover) {

.sui-chip-clickable:hover .sui-chip-label,
    .sui-chip-clickable:hover .sui-chip-delete-icon {

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--tw-text-opacity)));
  }
}

.sui-chip-clickable:not(:focus-within):active, .sui-chip-clickable:focus:active {
      background-color: var(--sui-chip-active-bg-color);
    }

.sui-chip-clickable:not(:focus-within):active .sui-chip-label, .sui-chip-clickable:focus:active .sui-chip-label {

  --tw-text-opacity: 1;

  color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--tw-text-opacity)));
}

.sui-inline-editable-root {
  font-size: var(--sui-typography-main-text-font-size);
  font-weight: var(--sui-typography-main-text-font-weight);
  line-height: var(--sui-typography-main-text-line-height);
  -webkit-text-decoration: var(--sui-typography-main-text-text-decoration);
          text-decoration: var(--sui-typography-main-text-text-decoration);
  text-transform: var(--sui-typography-main-text-text-transform);
  font-family: var(--sui-font-family);
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  width: auto;
  min-width: var(--sui-spacing-8);
  vertical-align: middle;
}

.sui-inline-editable-full-width {
  width: 100%;
}

.sui-inline-editable-input,
  .sui-inline-editable-textarea {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-transform: inherit;
  text-decoration: inherit;
  letter-spacing: inherit;
  font-family: inherit;
  width: 100%;
  border-style: solid;
  border-color: transparent;
  background-color: transparent;
  padding: var(--sui-spacing-0);
  --tw-text-opacity: 1;
  color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));
  --sui-focus-ring-border-width-recoup: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .sui-inline-editable-input,
  .sui-inline-editable-textarea {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    transition-duration: var(--sui-transition-neutral-01-fast-transition-duration);
    transition-timing-function: var(--sui-transition-neutral-01-fast-transition-timing-function);
  }
}

.sui-inline-editable-input::selection, .sui-inline-editable-textarea::selection {
  background-color: var(--sui-colors-primary-b-t20);
}

.sui-inline-editable-input::placeholder, .sui-inline-editable-textarea::placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-text-opacity)));
}

@media (prefers-reduced-motion: no-preference) {
  .sui-inline-editable-input::placeholder, .sui-inline-editable-textarea::placeholder {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    transition-duration: var(--sui-transition-neutral-01-fast-transition-duration);
    transition-timing-function: var(--sui-transition-neutral-01-fast-transition-timing-function);
  }
}

@media (hover: hover) {
  .sui-inline-editable-input:hover, .sui-inline-editable-textarea:hover {
    --tw-border-opacity: 1;
    border-color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-border-opacity)));
  }
}

@media (hover: hover) {
  .sui-inline-editable-input:hover::placeholder, .sui-inline-editable-textarea:hover::placeholder {
    --tw-text-opacity: 1;
    color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));
  }
}

.sui-inline-editable-input:focus, .sui-inline-editable-textarea:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--s-primary-f), calc(var(--s-primary-f-opacity, 1) * var(--tw-border-opacity)));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.sui-inline-editable-input.sui-disabled, .sui-inline-editable-textarea.sui-disabled {
  border-color: transparent;
  background-color: transparent;
}

.sui-inline-editable-input.sui-disabled::placeholder, .sui-inline-editable-textarea.sui-disabled::placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-text-opacity)));
}

.sui-inline-editable-text {
  -webkit-user-select: none;
          user-select: none;
  border-style: solid;
  --sui-focus-ring-border-width-recoup: 1;
}

.sui-inline-editable-input {
  position: absolute;
  top: var(--sui-spacing-0);
  box-sizing: border-box;
}

.sui-inline-editable-input + .sui-inline-editable-text {
  display: inline-block;
  height: var(--sui-spacing-0);
  overflow: hidden;
  white-space: pre;
  border-color: transparent;
}

.sui-inline-editable-textarea {
  resize: none;
}

.sui-inline-editable-textarea + .sui-inline-editable-text {
  display: none;
}

.sui-inline-editable-standard {
    min-height: 1.4375rem;
  }

.sui-inline-editable-standard-input,
    .sui-inline-editable-standard-textarea {
  padding-top: var(--sui-spacing-0\.5);
  border-width: var(--sui-border-width-0);
  --sui-focus-ring-border-width: var(--sui-border-width-0);
  border-bottom-width: var(--sui-border-width-1);

      padding-bottom: calc(var(--sui-spacing-0\.5) + var(--sui-border-width-1));
}

.sui-inline-editable-standard-input:focus, .sui-inline-editable-standard-textarea:focus {
  padding-bottom: var(--sui-spacing-0\.5);
  border-bottom-width: var(--sui-border-width-2);
}

.sui-inline-editable-outlined {
    min-height: 1.5625rem;
  }

.sui-inline-editable-outlined-input,
    .sui-inline-editable-outlined-textarea {
  border-radius: var(--sui-border-radius-xs);
  --sui-focus-ring-border-radius: var(--sui-border-radius-xs);
  border-width: var(--sui-border-width-1);
  --sui-focus-ring-border-width: var(--sui-border-width-1);

      padding: calc(var(--sui-spacing-0\.5) + var(--sui-border-width-1));
}

.sui-inline-editable-outlined-input:focus, .sui-inline-editable-outlined-textarea:focus {
  padding: var(--sui-spacing-0\.5);
  border-width: var(--sui-border-width-2);
  --sui-focus-ring-border-width: var(--sui-border-width-2);
}

.sui-inline-editable-outlined-input + .sui-inline-editable-text {
  padding: var(--sui-spacing-0\.5);
  border-left-width: var(--sui-border-width-2);
  border-right-width: var(--sui-border-width-2);
}

.sui-tag-root {

    font-size: var(--sui-typography-descriptor-mini-semi-bold-font-size);

    font-weight: var(--sui-typography-descriptor-mini-semi-bold-font-weight);

    line-height: var(--sui-typography-descriptor-mini-semi-bold-line-height);

    -webkit-text-decoration: var(--sui-typography-descriptor-mini-semi-bold-text-decoration);

            text-decoration: var(--sui-typography-descriptor-mini-semi-bold-text-decoration);

    text-transform: var(--sui-typography-descriptor-mini-semi-bold-text-transform);

    font-family: var(--sui-font-family);

    box-sizing: border-box;

    display: inline-block;

    height: var(--sui-spacing-4);

    min-width: var(--sui-spacing-6);

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    border-style: solid;

    padding-left: var(--sui-spacing-1);

    padding-right: var(--sui-spacing-1);

    border-radius: var(--sui-border-radius-xs);

    --sui-focus-ring-border-radius: var(--sui-border-radius-xs);

    border-width: var(--sui-border-width-1\.2);

    --sui-focus-ring-border-width: var(--sui-border-width-1\.2);

    --sui-focus-ring-border-width-recoup: 1;

    line-height: var(
      --sui-spacing-3\.5
    ) /* Override the line height to vertically center the text within the tag container. */
}

.sui-tag-has-start-icon {

    font-size: var(--sui-typography-descriptor-mini-font-size);

    font-weight: var(--sui-typography-descriptor-mini-font-weight);

    line-height: var(--sui-typography-descriptor-mini-line-height);

    -webkit-text-decoration: var(--sui-typography-descriptor-mini-text-decoration);

            text-decoration: var(--sui-typography-descriptor-mini-text-decoration);

    text-transform: var(--sui-typography-descriptor-mini-text-transform);

    font-family: var(--sui-font-family);

    display: inline-flex;

    align-items: center;

    padding-left: var(--sui-spacing-1);

    padding-right: var(--sui-spacing-1\.5)
}

/* color */

.sui-tag-default {

    --tw-border-opacity: 1;

    border-color: rgb(var(--s-warning-high-contrast), calc(var(--s-warning-high-contrast-opacity, 1) * var(--tw-border-opacity)));

    --tw-text-opacity: 1;

    color: rgb(var(--s-warning-high-contrast), calc(var(--s-warning-high-contrast-opacity, 1) * var(--tw-text-opacity)))
}

.sui-tag-neutral {

    --tw-border-opacity: 1;

    border-color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-border-opacity)));

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-text-opacity)))
}

.sui-tag-secondary {

    --tw-border-opacity: 1;

    border-color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--tw-border-opacity)));

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--tw-text-opacity)))
}

.sui-tag-primary {

    --tw-border-opacity: 1;

    border-color: rgb(var(--s-primary-f), calc(var(--s-primary-f-opacity, 1) * var(--tw-border-opacity)));

    --tw-text-opacity: 1;

    color: rgb(var(--s-primary-f), calc(var(--s-primary-f-opacity, 1) * var(--tw-text-opacity)))
}

.sui-tag-success {

    --tw-border-opacity: 1;

    border-color: rgb(var(--s-success-f), calc(var(--s-success-f-opacity, 1) * var(--tw-border-opacity)));

    --tw-text-opacity: 1;

    color: rgb(var(--s-success-f), calc(var(--s-success-f-opacity, 1) * var(--tw-text-opacity)))
}

.sui-tag-warning {

    --tw-border-opacity: 1;

    border-color: rgb(var(--s-warning-f), calc(var(--s-warning-f-opacity, 1) * var(--tw-border-opacity)));

    --tw-text-opacity: 1;

    color: rgb(var(--s-warning-f), calc(var(--s-warning-f-opacity, 1) * var(--tw-text-opacity)))
}

.sui-tag-danger {

    --tw-border-opacity: 1;

    border-color: rgb(var(--s-danger-f), calc(var(--s-danger-f-opacity, 1) * var(--tw-border-opacity)));

    --tw-text-opacity: 1;

    color: rgb(var(--s-danger-f), calc(var(--s-danger-f-opacity, 1) * var(--tw-text-opacity)))
}

/* variant */

.sui-tag-outlined {

    background-color: var(--sui-colors-neutral-w0-t0)
}

.sui-tag-filled-default {

    --tw-bg-opacity: 1;

    background-color: rgb(var(--s-warning-high-contrast), calc(var(--s-warning-high-contrast-opacity, 1) * var(--tw-bg-opacity)));

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--tw-text-opacity)))
}

.sui-tag-filled-neutral {

    --tw-bg-opacity: 1;

    background-color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-bg-opacity)));

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--tw-text-opacity)))
}

.sui-tag-filled-secondary {

    --tw-bg-opacity: 1;

    background-color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--tw-bg-opacity)));

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-b1), calc(var(--s-neutral-b1-opacity, 1) * var(--tw-text-opacity)))
}

.sui-tag-filled-primary {

    --tw-bg-opacity: 1;

    background-color: rgb(var(--s-primary-b), calc(var(--s-primary-b-opacity, 1) * var(--tw-bg-opacity)));

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--tw-text-opacity)))
}

.sui-tag-filled-success {

    --tw-bg-opacity: 1;

    background-color: rgb(var(--s-success), calc(var(--s-success-opacity, 1) * var(--tw-bg-opacity)));

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--tw-text-opacity)))
}

.sui-tag-filled-warning {

    --tw-bg-opacity: 1;

    background-color: rgb(var(--s-warning), calc(var(--s-warning-opacity, 1) * var(--tw-bg-opacity)));

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--tw-text-opacity)))
}

.sui-tag-filled-danger {

    --tw-bg-opacity: 1;

    background-color: rgb(var(--s-danger), calc(var(--s-danger-opacity, 1) * var(--tw-bg-opacity)));

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--tw-text-opacity)))
}

.sui-tag-inverted-default {

    border-color: transparent;

    background-color: rgb(var(--s-warning-high-contrast), calc(var(--s-warning-high-contrast-opacity, 1) * 0.1));

    --tw-text-opacity: 1;

    color: rgb(var(--s-warning-high-contrast), calc(var(--s-warning-high-contrast-opacity, 1) * var(--tw-text-opacity)))
}

.sui-tag-inverted-neutral {

    border-color: transparent;

    background-color: rgb(var(--s-neutral-b1), calc(var(--s-neutral-b1-opacity, 1) * 0.1));

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-b1), calc(var(--s-neutral-b1-opacity, 1) * var(--tw-text-opacity)))
}

.sui-tag-inverted-secondary {

    border-color: transparent;

    background-color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * 0.1));

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--tw-text-opacity)))
}

.sui-tag-inverted-primary {

    border-color: transparent;

    background-color: rgb(var(--s-primary-b), calc(var(--s-primary-b-opacity, 1) * 0.1));

    --tw-text-opacity: 1;

    color: rgb(var(--s-primary-f), calc(var(--s-primary-f-opacity, 1) * var(--tw-text-opacity)))
}

.sui-tag-inverted-success {

    border-color: transparent;

    background-color: rgb(var(--s-success), calc(var(--s-success-opacity, 1) * 0.1));

    --tw-text-opacity: 1;

    color: rgb(var(--s-success-f), calc(var(--s-success-f-opacity, 1) * var(--tw-text-opacity)))
}

.sui-tag-inverted-warning {

    border-color: transparent;

    background-color: rgb(var(--s-warning), calc(var(--s-warning-opacity, 1) * 0.1));

    --tw-text-opacity: 1;

    color: rgb(var(--s-warning-f), calc(var(--s-warning-f-opacity, 1) * var(--tw-text-opacity)))
}

.sui-tag-inverted-danger {

    border-color: transparent;

    background-color: rgb(var(--s-danger), calc(var(--s-danger-opacity, 1) * 0.1));

    --tw-text-opacity: 1;

    color: rgb(var(--s-danger-f), calc(var(--s-danger-f-opacity, 1) * var(--tw-text-opacity)))
}

/* label */

.sui-tag-label {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap
}

/* start icon */

.sui-tag-start-icon {

    margin-right: var(--sui-spacing-1)
}

.sui-link-root {position: relative;cursor: pointer;text-decoration-style: solid;border-radius: var(--sui-border-radius-xs);--sui-focus-ring-border-radius: var(--sui-border-radius-xs);
}

@media (prefers-reduced-motion: no-preference) {.sui-link-root {transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 300ms;
    }
}

@media (hover: hover) {

    .sui-link-root:hover {--tw-text-opacity: 1;color: rgb(var(--s-primary-f-high-contrast), calc(var(--s-primary-f-high-contrast-opacity, 1) * var(--tw-text-opacity)));
    }
}

.sui-link-root:active {--tw-text-opacity: 1;color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));
}

.sui-link-root:focus-visible,
    .sui-link-root.sui-focus-visible {--sui-focus-ring-color: var(--sui-focus-ring-tight-color);
}

.sui-link-root:focus-visible::after,
    .sui-link-root.sui-focus-visible::after {pointer-events: none;content: '';position: absolute;inset: 0;border-radius: calc(var(--sui-focus-ring-tight-offset) + var(--sui-focus-ring-border-radius, 0px));box-shadow: 0 0 0 var(--sui-focus-ring-tight-width) var(--sui-focus-ring-color);margin: calc(var(--sui-focus-ring-tight-offset)*-1 - var(--sui-focus-ring-border-width, 0px)*var(--sui-focus-ring-border-width-recoup, 1));
}

.sui-link-none {text-decoration-line: none;
}

.sui-link-hover {text-decoration-line: none;
}

@media (hover: hover) {
  .sui-link-hover:hover {text-decoration-line: underline;
    }
}

.sui-link-always {text-decoration-line: underline;
}

.sui-link:focus-visible,
  .sui-link.sui-focus-visible {text-decoration-line: none;
}

.sui-link-primary {--tw-text-opacity: 1;color: rgb(var(--s-primary-f), calc(var(--s-primary-f-opacity, 1) * var(--tw-text-opacity)));
}

.sui-link-secondary {--tw-text-opacity: 1;color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));
}

.sui-badge-root {

      position: relative;

      display: inline-flex;
}

.sui-badge-content {

      box-sizing: border-box;
}

.sui-badge-primary {

      --tw-bg-opacity: 1;

      background-color: rgb(var(--s-cobranding), calc(var(--s-cobranding-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-badge-danger {

      --tw-bg-opacity: 1;

      background-color: rgb(var(--s-danger), calc(var(--s-danger-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-badge-success {

      --tw-bg-opacity: 1;

      background-color: rgb(var(--s-success), calc(var(--s-success-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-badge-warning {

      --tw-bg-opacity: 1;

      background-color: rgb(var(--s-warning), calc(var(--s-warning-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-badge-secondary {

      --tw-bg-opacity: 1;

      background-color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-badge-absolute {

      position: absolute;

      height: 100%;

      width: 100%;
}

.sui-badge-standard {

      display: inline-flex;

      width: -moz-fit-content;

      width: fit-content;

      align-items: center;

      justify-content: center;

      padding: var(--sui-spacing-1);

      --tw-text-opacity: 1;

      color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--tw-text-opacity)));
}

@media (prefers-reduced-motion: no-preference) {
      .sui-badge-standard {

            transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;

            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

            transition-duration: 150ms;

            transition-duration: var(--sui-transition-neutral-01-fast-transition-duration);

            transition-timing-function: var(--sui-transition-neutral-01-fast-transition-timing-function);
      }
}

.sui-badge-standard-small {

      font-size: var(--sui-typography-detail-bold-font-size);

      font-weight: var(--sui-typography-detail-bold-font-weight);

      line-height: var(--sui-typography-detail-bold-line-height);

      -webkit-text-decoration: var(--sui-typography-detail-bold-text-decoration);

              text-decoration: var(--sui-typography-detail-bold-text-decoration);

      text-transform: var(--sui-typography-detail-bold-text-transform);

      font-family: var(--sui-font-family);
}

.sui-badge-standard-medium {

      font-size: var(--sui-typography-descriptor-mini-semi-bold-font-size);

      font-weight: var(--sui-typography-descriptor-mini-semi-bold-font-weight);

      line-height: var(--sui-typography-descriptor-mini-semi-bold-line-height);

      -webkit-text-decoration: var(--sui-typography-descriptor-mini-semi-bold-text-decoration);

              text-decoration: var(--sui-typography-descriptor-mini-semi-bold-text-decoration);

      text-transform: var(--sui-typography-descriptor-mini-semi-bold-text-transform);

      font-family: var(--sui-font-family);
}

.sui-badge-standard-primary {

      --tw-text-opacity: 1;

      color: rgb(var(--s-neutral-high-contrast-b0), calc(var(--s-neutral-high-contrast-b0-opacity, 1) * var(--tw-text-opacity)));
}

.sui-badge-standard-contained {

      border-radius: var(--sui-border-radius-md);

      --sui-focus-ring-border-radius: var(--sui-border-radius-md);
}

.sui-badge-standard-contained-small {

      height: var(--sui-spacing-3\.5);

      min-width: var(--sui-spacing-3\.5);
}

.sui-badge-standard-contained-medium {

      height: var(--sui-spacing-5);

      min-width: var(--sui-spacing-5);
}

.sui-badge-standard-outlined {

      border-style: solid;

      --tw-border-opacity: 1;

      border-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-border-opacity)));

      border-radius: var(--sui-border-radius-lg);

      --sui-focus-ring-border-radius: var(--sui-border-radius-lg);

      border-width: var(--sui-border-width-1);

      --sui-focus-ring-border-width: var(--sui-border-width-1);

      --sui-focus-ring-border-width-recoup: 1;
}

.sui-badge-standard-outlined-small {

      height: var(--sui-spacing-4);

      min-width: var(--sui-spacing-4);
}

.sui-badge-standard-outlined-medium {

      height: var(--sui-spacing-5\.5);

      min-width: var(--sui-spacing-5\.5);
}

.sui-badge-dot {

      border-radius: var(--sui-border-radius-full);

      --sui-focus-ring-border-radius: var(--sui-border-radius-full);
}

.sui-badge-dot-primary {

      --tw-bg-opacity: 1;

      background-color: rgb(var(--s-cobranding-f), calc(var(--s-cobranding-f-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-badge-dot-danger {

      --tw-bg-opacity: 1;

      background-color: rgb(var(--s-danger-f), calc(var(--s-danger-f-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-badge-dot-success {

      --tw-bg-opacity: 1;

      background-color: rgb(var(--s-success-f), calc(var(--s-success-f-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-badge-dot-warning {

      --tw-bg-opacity: 1;

      background-color: rgb(var(--s-warning-f), calc(var(--s-warning-f-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-badge-dot-contained-small {

      height: var(--sui-spacing-1\.5);

      width: var(--sui-spacing-1\.5);
}

.sui-badge-dot-contained-medium {

      height: var(--sui-spacing-2);

      width: var(--sui-spacing-2);
}

.sui-badge-dot-outlined {

      border-style: solid;

      --tw-border-opacity: 1;

      border-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-border-opacity)));

      border-width: var(--sui-border-width-1);

      --sui-focus-ring-border-width: var(--sui-border-width-1);

      --sui-focus-ring-border-width-recoup: 1;
}

.sui-badge-dot-outlined-small {

      height: var(--sui-spacing-2);

      width: var(--sui-spacing-2);
}

.sui-badge-dot-outlined-medium {

      height: var(--sui-spacing-2\.5);

      width: var(--sui-spacing-2\.5);
}

.sui-badge-rectangular,
  .sui-badge-circular {

      position: absolute;

      display: flex;

      align-items: center;

      justify-content: center;
}

.sui-badge-rectangular-top-right {

      top: var(--sui-spacing-0);

      right: var(--sui-spacing-0);

      transform: translate(50%, -50%);
}

.sui-badge-rectangular-bottom-right {

      bottom: var(--sui-spacing-0);

      right: var(--sui-spacing-0);

      transform: translate(50%, 50%);
}

.sui-badge-rectangular-top-left {

      top: var(--sui-spacing-0);

      left: var(--sui-spacing-0);

      transform: translate(-50%, -50%);
}

.sui-badge-rectangular-bottom-left {

      bottom: var(--sui-spacing-0);

      left: var(--sui-spacing-0);

      transform: translate(-50%, 50%);
}

.sui-badge-circular-top-right {
      top: 14%;
      right: 14%;
      transform: translate(50%, -50%);
    }

.sui-badge-circular-bottom-right {
      bottom: 14%;
      right: 14%;
      transform: translate(50%, 50%);
    }

.sui-badge-circular-top-left {
      top: 14%;
      left: 14%;
      transform: translate(-50%, -50%);
    }

.sui-badge-circular-bottom-left {
      bottom: 14%;
      left: 14%;
      transform: translate(-50%, 50%);
    }

.sui-text-root {
    font-family: var(--sui-font-family);
    font-weight: 400;
    margin: 0;
    overflow: hidden;
  }

.sui-text-no-wrap {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

.sui-text-flex-full {
    flex: 1 1 auto;
  }

.sui-text-highlight-term {
    background-color: var(--sui-colors-warning-t10);
    --tw-text-opacity: 1;
    color: rgb(var(--s-warning-high-contrast), calc(var(--s-warning-high-contrast-opacity, 1) * var(--tw-text-opacity)));
}

.sui-text-field-clear {

display: none;

flex-shrink: 0
}

.sui-text-field-mask-value-button {

flex-shrink: 0
}

.sui-text-field-form-field-content {

cursor: text
}

@media (hover: hover) {

.sui-text-field-form-field-content:hover ::placeholder {

--tw-text-opacity: 1;

color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)))
}
}

@media (hover: hover) {

.sui-text-field-form-field-content:hover .sui-text-field-clear {

display: inline-flex
}
}

.sui-text-field-root {

display: inline-flex;

width: var(--sui-spacing-80);

flex-direction: column;

--tw-text-opacity: 1;

color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)))
}

.sui-text-field-root:focus .sui-text-field-clear, .sui-text-field-root:focus-within .sui-text-field-clear, .sui-text-field-root.sui-focused .sui-text-field-clear {

display: inline-flex
}

.sui-text-field-root ::placeholder {

--tw-text-opacity: 1;

color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-text-opacity)))
}

.sui-text-field-root.sui-disabled {

--tw-text-opacity: 1;

color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-text-opacity)))
}

.sui-text-field-root.sui-disabled ::placeholder {

--tw-text-opacity: 1;

color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-text-opacity)))
}

.sui-text-field-root.sui-disabled .sui-text-field-clear {

display: none
}

.sui-text-field-full-width {

width: 100%
}

.sui-text-field-input {

font-size: var(--sui-typography-main-text-font-size);

font-weight: var(--sui-typography-main-text-font-weight);

line-height: var(--sui-typography-main-text-line-height);

-webkit-text-decoration: var(--sui-typography-main-text-text-decoration);

        text-decoration: var(--sui-typography-main-text-text-decoration);

text-transform: var(--sui-typography-main-text-text-transform);

font-family: var(--sui-font-family);

width: 100%;

background-color: transparent;

vertical-align: middle;

color: inherit;

caret-color: rgb(var(--s-neutral-b0), var(--s-neutral-b0-opacity, 1));

outline: 2px solid transparent;

outline-offset: 2px;

border-style: none;

padding: var(--sui-spacing-0);

--sui-focus-ring-border-width-recoup: 0
}

@media (prefers-reduced-motion: no-preference) {

.sui-text-field-input::placeholder {

transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;

transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

transition-duration: 150ms;

transition-duration: var(--sui-transition-neutral-01-fast-transition-duration);

transition-timing-function: var(--sui-transition-neutral-01-fast-transition-timing-function)
}
}

.sui-text-field-input:placeholder-shown + .sui-text-field-clear {

display: none
}

.sui-text-field-end-adornment {

margin-left: var(--sui-spacing-1);

display: flex
}

.sui-text-field-start-adornment {

margin-right: var(--sui-spacing-1);

display: flex
}

.sui-text-field-outlined ::selection {

background-color: var(--sui-colors-primary-b-t20)
}

.sui-text-field-standard ::selection {

--tw-bg-opacity: 1;

background-color: rgb(var(--s-neutral-b4), calc(var(--s-neutral-b4-opacity, 1) * var(--tw-bg-opacity)))
}

.sui-text-field-standard.sui-disabled {

--tw-border-opacity: 1;

border-color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-border-opacity)))
}

.sui-text-field-quiet .sui-text-field-input {

font-size: var(--sui-typography-display1-font-size);

font-weight: var(--sui-typography-display1-font-weight);

line-height: var(--sui-typography-display1-line-height);

-webkit-text-decoration: var(--sui-typography-display1-text-decoration);

        text-decoration: var(--sui-typography-display1-text-decoration);

text-transform: var(--sui-typography-display1-text-transform);

font-family: var(--sui-font-family);

z-index: 0;

height: var(--sui-spacing-12);

width: 100%;

border-style: none;

padding: var(--sui-spacing-0);

text-align: center;

outline: 2px solid transparent;

outline-offset: 2px;

--sui-focus-ring-border-width-recoup: 0
}

.sui-text-field-quiet .sui-text-field-input::placeholder {

font-size: var(--sui-typography-subtitle-font-size);

font-weight: var(--sui-typography-subtitle-font-weight);

line-height: var(--sui-typography-subtitle-line-height);

-webkit-text-decoration: var(--sui-typography-subtitle-text-decoration);

        text-decoration: var(--sui-typography-subtitle-text-decoration);

text-transform: var(--sui-typography-subtitle-text-transform);

font-family: var(--sui-font-family);

position: relative;

z-index: -10;

text-align: center;

      transform: translateY(
        calc(
          -1 * ((
                  var(--sui-typography-display1-line-height) -
                    var(--sui-typography-subtitle-line-height)
                ) / 2)
        )
      )
}

.sui-text-field-helper-text {

display: flex;

flex-direction: row;

justify-content: space-between
}

.sui-textarea-form-field-content {

    height: auto;

    padding: var(--sui-spacing-0)
}

.sui-textarea-form-field-content-xlarge {

    min-height: var(--sui-spacing-12)
}

.sui-textarea-form-field-content-large {

    min-height: var(--sui-spacing-9)
}

.sui-textarea-form-field-content-medium {

    min-height: var(--sui-spacing-8)
}

.sui-textarea-input {

    resize: none
}

.sui-textarea-input-xlarge {

    padding-left: var(--sui-spacing-4);

    padding-right: var(--sui-spacing-4);

    padding-top: 15px;

    padding-bottom: 14px
}

.sui-textarea-input-large {

    padding-left: var(--sui-spacing-3);

    padding-right: var(--sui-spacing-3);

    padding-top: 9px;

    padding-bottom: 8px
}

.sui-textarea-input-medium {

    padding-left: var(--sui-spacing-2\.5);

    padding-right: var(--sui-spacing-2\.5);

    padding-top: 7px;

    padding-bottom: 6px
}

.sui-textarea-standard-input {

    padding-left: var(--sui-spacing-0);

    padding-right: var(--sui-spacing-0)
}

.sui-textarea-clear {

    position: absolute
}

.sui-textarea-clear-xlarge {

    right: var(--sui-spacing-4);

    bottom: var(--sui-spacing-3)
}

.sui-textarea-clear-large {

    right: var(--sui-spacing-3);

    bottom: var(--sui-spacing-1\.5)
}

.sui-textarea-clear-medium {

    right: var(--sui-spacing-2\.5);

    bottom: var(--sui-spacing-1)
}

.sui-textarea-clear-standard {

    right: var(--sui-spacing-0)
}

.sui-picker-text-field-form-field-content,
  .sui-picker-text-field-input {
  cursor: pointer
}

.sui-picker-text-field-has-value:focus .sui-picker-text-field-end-icon, .sui-picker-text-field-has-value:focus-within .sui-picker-text-field-end-icon, .sui-picker-text-field-has-value.sui-focused .sui-picker-text-field-end-icon {
  display: none
}

@media (hover: hover) {
  .sui-picker-text-field-has-value:hover .sui-picker-text-field-end-icon {
    display: none
  }
}

/* stylelint-disable custom-property-pattern */

.sui-alert-root {

  box-sizing: border-box;

  display: flex;

  min-width: var(--sui-spacing-65);

  border-style: solid;

  --tw-border-opacity: 1;

  border-color: rgb(var(--s-neutral-high-contrast), calc(var(--s-neutral-high-contrast-opacity, 1) * var(--tw-border-opacity)));

  padding: var(--sui-spacing-4);

  border-radius: var(--sui-border-radius-sm);

  --sui-focus-ring-border-radius: var(--sui-border-radius-sm);

  border-width: var(--sui-border-width-1);

  --sui-focus-ring-border-width: var(--sui-border-width-1);

  --sui-focus-ring-border-width-recoup: 1;

  background: var(--s-gradient-stop), var(--s-gradient-base);

  --s-gradient-stop: linear-gradient(0deg, var(--s-gradient-cover) 0%, var(--s-gradient-cover) 100%);

  --s-gradient-base-opacity: 1;

  --s-gradient-base: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--s-gradient-base-opacity)))
}

.sui-alert-icon {

  margin-right: var(--sui-spacing-3);

  display: flex;

  align-items: flex-start;

  align-self: flex-start
}

.sui-alert-body {

  flex-grow: 1
}

.sui-alert-content {

  font-size: var(--sui-typography-subtitle-mini-font-size);

  font-weight: var(--sui-typography-subtitle-mini-font-weight);

  line-height: var(--sui-typography-subtitle-mini-line-height);

  -webkit-text-decoration: var(--sui-typography-subtitle-mini-text-decoration);

          text-decoration: var(--sui-typography-subtitle-mini-text-decoration);

  text-transform: var(--sui-typography-subtitle-mini-text-transform);

  font-family: var(--sui-font-family);

  word-break: break-word
}

.sui-alert-action {

  margin-top: var(--sui-spacing-2)
}

.sui-alert-close {

  margin-left: var(--sui-spacing-3);

  height: var(--sui-spacing-5);

  flex-shrink: 0
}

.sui-alert-info {

  --tw-text-opacity: 1;

  color: rgb(var(--s-primary-f-high-contrast), calc(var(--s-primary-f-high-contrast-opacity, 1) * var(--tw-text-opacity)));

  --s-gradient-stop: linear-gradient(
      0deg,
      var(--sui-colors-primary-t10) 0%,
      var(--sui-colors-primary-t10) 100%
    ),
    linear-gradient(
      0deg,
      var(--sui-colors-neutral-static-w0-t10) 0%,
      var(--sui-colors-neutral-static-w0-t10) 100%
    )
}

.sui-alert-info-icon {

  --tw-text-opacity: 1;

  color: rgb(var(--s-primary-f-high-contrast), calc(var(--s-primary-f-high-contrast-opacity, 1) * var(--tw-text-opacity)))
}

.sui-alert-error {

  --tw-text-opacity: 1;

  color: rgb(var(--s-danger-high-contrast), calc(var(--s-danger-high-contrast-opacity, 1) * var(--tw-text-opacity)));

  --s-gradient-stop: linear-gradient(
      0deg,
      var(--sui-colors-danger-t10) 0%,
      var(--sui-colors-danger-t10) 100%
    ),
    linear-gradient(
      0deg,
      var(--sui-colors-neutral-static-w0-t10) 0%,
      var(--sui-colors-neutral-static-w0-t10) 100%
    )
}

.sui-alert-error-icon {

  --tw-text-opacity: 1;

  color: rgb(var(--s-danger-high-contrast), calc(var(--s-danger-high-contrast-opacity, 1) * var(--tw-text-opacity)))
}

.sui-alert-warning {

  --tw-text-opacity: 1;

  color: rgb(var(--s-warning-high-contrast), calc(var(--s-warning-high-contrast-opacity, 1) * var(--tw-text-opacity)));

  --s-gradient-stop: linear-gradient(
      0deg,
      var(--sui-colors-warning-t10) 0%,
      var(--sui-colors-warning-t10) 100%
    ),
    linear-gradient(
      0deg,
      var(--sui-colors-neutral-static-w0-t10) 0%,
      var(--sui-colors-neutral-static-w0-t10) 100%
    )
}

.sui-alert-warning-icon {

  --tw-text-opacity: 1;

  color: rgb(var(--s-warning-high-contrast), calc(var(--s-warning-high-contrast-opacity, 1) * var(--tw-text-opacity)))
}

.sui-alert-success {

  --tw-text-opacity: 1;

  color: rgb(var(--s-success-high-contrast), calc(var(--s-success-high-contrast-opacity, 1) * var(--tw-text-opacity)));

  --s-gradient-stop: linear-gradient(
      0deg,
      var(--sui-colors-success-t10) 0%,
      var(--sui-colors-success-t10) 100%
    ),
    linear-gradient(
      0deg,
      var(--sui-colors-neutral-static-w0-t10) 0%,
      var(--sui-colors-neutral-static-w0-t10) 100%
    )
}

.sui-alert-success-icon {

  --tw-text-opacity: 1;

  color: rgb(var(--s-success-high-contrast), calc(var(--s-success-high-contrast-opacity, 1) * var(--tw-text-opacity)))
}

.sui-alert-neutral {

  --tw-text-opacity: 1;

  color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));

  --s-gradient-stop: linear-gradient(
      0deg,
      var(--sui-colors-neutral-b4-t50) 0%,
      var(--sui-colors-neutral-b4-t50) 100%
    ),
    linear-gradient(
      0deg,
      var(--sui-colors-neutral-static-w0-t10) 0%,
      var(--sui-colors-neutral-static-w0-t10) 100%
    )
}

.sui-alert-neutral-icon {

  --tw-text-opacity: 1;

  color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)))
}

.sui-alert-title-root {
    font-size: var(--sui-typography-subtitle-bold-font-size);
    font-weight: var(--sui-typography-subtitle-bold-font-weight);
    line-height: var(--sui-typography-subtitle-bold-line-height);
    -webkit-text-decoration: var(--sui-typography-subtitle-bold-text-decoration);
            text-decoration: var(--sui-typography-subtitle-bold-text-decoration);
    text-transform: var(--sui-typography-subtitle-bold-text-transform);
    font-family: var(--sui-font-family);
    margin-bottom: var(--sui-spacing-2)
}

.sui-announcement-icon,
.sui-announcement-close,
.sui-announcement-action {
  display: flex;
  height: var(--sui-spacing-8);
  align-items: center;
}

.sui-announcement-root {
  /*
   * Reset the background style as the Alert component sets a background: linear-gradient,
   * using @apply bg-color only sets the background-color, causing the backgrounds to stack
   */
  background: transparent;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-bg-opacity)));
  padding-top: var(--sui-spacing-2);
  padding-bottom: var(--sui-spacing-2);
  --tw-text-opacity: 1;
  color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--tw-text-opacity)));
  border-radius: var(--sui-border-radius-none);
  --sui-focus-ring-border-radius: var(--sui-border-radius-none);
}

.sui-announcement-neutral {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-announcement-info {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--s-primary-f), calc(var(--s-primary-f-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-announcement-error {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--s-danger-f), calc(var(--s-danger-f-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-announcement-success {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--s-success-f), calc(var(--s-success-f-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-announcement-warning {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--s-warning-f), calc(var(--s-warning-f-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-announcement-icon,
.sui-announcement-close {
  --tw-text-opacity: 1;
  color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--tw-text-opacity)));
}

.sui-announcement-body {
  display: flex;
  min-height: var(--sui-spacing-8);
  justify-content: space-between;
  gap: var(--sui-spacing-2);
}

.sui-announcement-content {
  font-size: var(--sui-typography-descriptor-font-size);
  font-weight: var(--sui-typography-descriptor-font-weight);
  line-height: var(--sui-typography-descriptor-line-height);
  -webkit-text-decoration: var(--sui-typography-descriptor-text-decoration);
          text-decoration: var(--sui-typography-descriptor-text-decoration);
  text-transform: var(--sui-typography-descriptor-text-transform);
  font-family: var(--sui-font-family);
  margin-top: var(--sui-spacing-2);
  margin-bottom: var(--sui-spacing-2);
}

.sui-announcement-action {
  margin-top: var(--sui-spacing-0);
}

.sui-snackbar-content-root {

    pointer-events: auto;

    position: relative;

    min-height: var(--sui-spacing-12);

    width: -moz-fit-content;

    width: fit-content;

    max-width: var(--sui-spacing-150);

    border-style: solid;

    padding-top: var(--sui-spacing-2);

    padding-bottom: var(--sui-spacing-2);

    border-width: var(--sui-border-width-1);

    --sui-focus-ring-border-width: var(--sui-border-width-1);

    --sui-focus-ring-border-width-recoup: 1;

    overflow: hidden
}

.sui-snackbar-content-icon,
.sui-snackbar-content-close,
.sui-snackbar-content-action {

    display: flex;

    height: var(--sui-spacing-8);

    align-items: center
}

.sui-snackbar-content-body {

    display: flex;

    align-items: center;

    gap: var(--sui-spacing-2)
}

.sui-snackbar-content-action {

    margin-left: var(--sui-spacing-1);

    margin-top: var(--sui-spacing-0)
}

.sui-snackbar-content-info {

    --tw-border-opacity: 1;

    border-color: rgb(var(--s-primary-f-high-contrast), calc(var(--s-primary-f-high-contrast-opacity, 1) * var(--tw-border-opacity)));

    --tw-shadow: var(--sui-box-shadow-sm-primary);

    --tw-shadow-colored: var(--sui-box-shadow-sm-primary);

    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.sui-snackbar-content-error {

    --tw-border-opacity: 1;

    border-color: rgb(var(--s-danger-f), calc(var(--s-danger-f-opacity, 1) * var(--tw-border-opacity)));

    --tw-shadow: var(--sui-box-shadow-sm-danger);

    --tw-shadow-colored: var(--sui-box-shadow-sm-danger);

    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.sui-snackbar-content-warning {

    --tw-border-opacity: 1;

    border-color: rgb(var(--s-warning-f), calc(var(--s-warning-f-opacity, 1) * var(--tw-border-opacity)));

    --tw-shadow: var(--sui-box-shadow-sm-warning);

    --tw-shadow-colored: var(--sui-box-shadow-sm-warning);

    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.sui-snackbar-content-success {

    --tw-border-opacity: 1;

    border-color: rgb(var(--s-success-f), calc(var(--s-success-f-opacity, 1) * var(--tw-border-opacity)));

    --tw-shadow: var(--sui-box-shadow-sm-success);

    --tw-shadow-colored: var(--sui-box-shadow-sm-success);

    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.sui-snackbar-content-neutral {

    --tw-border-opacity: 1;

    border-color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-border-opacity)));

    --tw-shadow: var(--sui-box-shadow-md);

    --tw-shadow-colored: var(--sui-box-shadow-md);

    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.sui-snackbar-root {
    pointer-events: none;
    position: fixed;
    bottom: var(--sui-spacing-0);
    z-index: 1400;
    margin-bottom: var(--sui-spacing-4);
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: var(--sui-spacing-3);
    padding-left: var(--sui-spacing-4);
    padding-right: var(--sui-spacing-4)
}

.sui-rating-root {

    font-size: var(--sui-typography-display1-font-size);

    font-weight: var(--sui-typography-display1-font-weight);

    line-height: var(--sui-typography-display1-line-height);

    -webkit-text-decoration: var(--sui-typography-display1-text-decoration);

            text-decoration: var(--sui-typography-display1-text-decoration);

    text-transform: var(--sui-typography-display1-text-transform);

    font-family: var(--sui-font-family);

    position: relative;

    display: inline-flex;

    width: min-content;

    cursor: pointer;

    text-align: left;

    --sui-color: var(--sui-colors-warning);
}

.sui-rating-root.sui-disabled {
      --sui-color: var(--sui-colors-neutral-b3);
      pointer-events: none;
    }

.sui-rating-root.sui-disabled .sui-rating-icon-empty {

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-text-opacity)));
}

.sui-rating-squircle {
    /* default */
    --sui-squircle-bg-color: transparent;
    --sui-squircle-bg-color-hover: transparent;
    --sui-squircle-bg-color-active: transparent;
    --sui-squircle-ring-offset: 0px;
  }

.sui-rating-squircle .sui-rating-squircle-content {

    opacity: 0.2;
}

.sui-rating-squircle {

    position: absolute;

    top: var(--sui-spacing-0);

    left: var(--sui-spacing-0);

    height: 100%;

    width: 100%;
}

.sui-rating-icon-hover {
    --sui-squircle-bg-color: var(--sui-color);
    --sui-squircle-bg-color-hover: var(--sui-color);
    --sui-squircle-bg-color-active: var(--sui-color);
  }

.sui-rating-icon-hover:active .sui-rating-squircle-content, .sui-rating-icon-hover.sui-active .sui-rating-squircle-content {

    opacity: 0.1;
}

.sui-rating-read-only {

    pointer-events: none;
}

.sui-rating-decimal {

    position: relative;
}

.sui-rating-label {
    cursor: inherit;
    position: relative;
  }

.sui-rating-label.sui-disabled {

    pointer-events: none;

    cursor: not-allowed;
}

.sui-rating-label-container {

    padding: var(--sui-spacing-0\.5);
}

.sui-rating-label-empty-value {
    cursor: inherit;
  }

.sui-rating-empty-value-focused {
    --sui-focus-ring-normal-offset: 0px;
    --sui-focus-ring-border-radius: 10px;
    position: absolute;
    top: var(--sui-spacing-0);
    bottom: var(--sui-spacing-0);
    width: 100%;
    padding: var(--sui-spacing-0);
    --sui-focus-ring-color: var(--sui-focus-ring-normal-color);
  }

.sui-rating-empty-value-focused::after {

    pointer-events: none;

    content: '';

    position: absolute;

    inset: 0;

    border-radius: calc(var(--sui-focus-ring-normal-offset) + var(--sui-focus-ring-border-radius, 0px));

    box-shadow: 0 0 0 var(--sui-focus-ring-normal-width) var(--sui-focus-ring-color);

    margin: calc(var(--sui-focus-ring-normal-offset)*-1 - var(--sui-focus-ring-border-width, 0px)*var(--sui-focus-ring-border-width-recoup, 1));
}

.sui-rating-visually-hidden {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border-width: 0;
}

.sui-rating-icon {

    pointer-events: none;

    display: flex;
}

@media (prefers-reduced-motion: no-preference) {

    .sui-rating-icon {

        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;

        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

        transition-duration: 150ms;
    }
}

.sui-rating-icon-empty {

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-text-opacity)));
}

.sui-rating-icon-filled {

    color: var(--sui-color);
}

.sui-list-item-text-root {flex-grow: 1;display: grid;grid-template-columns: repeat(1, minmax(0, 1fr));margin-right: var(--sui-spacing-4)
}

.sui-list-item-text-root:first-child {margin-left: var(--sui-spacing-0)
}

.sui-list-item-text-root:last-child {margin-right: var(--sui-spacing-0)
}

.sui-list-item-text-primary-text {--tw-text-opacity: 1;color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));overflow: hidden;text-overflow: ellipsis;white-space: nowrap
}

.sui-list-item-text-secondary-text {font-size: var(--sui-typography-descriptor-font-size);font-weight: var(--sui-typography-descriptor-font-weight);line-height: var(--sui-typography-descriptor-line-height);-webkit-text-decoration: var(--sui-typography-descriptor-text-decoration);text-decoration: var(--sui-typography-descriptor-text-decoration);text-transform: var(--sui-typography-descriptor-text-transform);font-family: var(--sui-font-family);--tw-text-opacity: 1;color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-text-opacity)));overflow: hidden;text-overflow: ellipsis;white-space: nowrap
}

.sui-list-item-text-primary {margin-left: var(--sui-spacing-3)
}

.sui-list-item-text-primary-primary-text {font-size: var(--sui-typography-subtitle-font-size);font-weight: var(--sui-typography-subtitle-font-weight);line-height: var(--sui-typography-subtitle-line-height);-webkit-text-decoration: var(--sui-typography-subtitle-text-decoration);text-decoration: var(--sui-typography-subtitle-text-decoration);text-transform: var(--sui-typography-subtitle-text-transform);font-family: var(--sui-font-family)
}

.sui-list-item-text-secondary {margin-left: var(--sui-spacing-2)
}

.sui-list-item-text-secondary-primary-text {font-size: var(--sui-typography-subtitle-mini-font-size);font-weight: var(--sui-typography-subtitle-mini-font-weight);line-height: var(--sui-typography-subtitle-mini-line-height);-webkit-text-decoration: var(--sui-typography-subtitle-mini-text-decoration);text-decoration: var(--sui-typography-subtitle-mini-text-decoration);text-transform: var(--sui-typography-subtitle-mini-text-transform);font-family: var(--sui-font-family)
}

.sui-list-item-root {

  box-sizing: border-box;

  width: 100%;

  --tw-bg-opacity: 1;

  background-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-bg-opacity)));

  padding-left: var(--sui-spacing-1);

  padding-right: var(--sui-spacing-1);

  outline: 2px solid transparent;

  outline-offset: 2px;

  --sui-list-item-container-bg-color: var(--sui-colors-neutral-base);
  --sui-list-item-container-bg-color-focus: var(--sui-colors-neutral-b5);
  --sui-list-item-container-bg-color-hover: var(--sui-colors-neutral-b5);
  --sui-list-item-container-bg-color-active: var(--sui-colors-neutral-b4);

  /* TODO: Color with opacity casts an overlay during transitions */
  --sui-list-item-container-bg-color-selected: var(--sui-colors-neutral-b4-t50);
  --sui-list-item-container-bg-color-selected-hover: var(
    --sui-colors-neutral-b4
  );
}

.sui-list-item-content {

  display: flex;

  align-items: center;

  box-sizing: border-box;

  height: 100%;

  width: 100%;

  overflow: hidden;

  padding-left: var(--sui-spacing-3);

  padding-right: var(--sui-spacing-3);
}

.sui-list-item-content > * {

  flex-shrink: 0;
}

.sui-list-item-content > .sui-list-item-text {

  flex-shrink: 1;
}

.sui-list-item-divider {

  margin-left: var(--sui-spacing-3);

  margin-right: var(--sui-spacing-3);
}

@media (prefers-reduced-motion: no-preference) {

  .sui-list-item-divider {

    transition-property: opacity;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 150ms;
  }
}

.sui-list-item-container {

  width: 100%;

  overflow: hidden;

  border-radius: var(--sui-border-radius-sm);

  --sui-focus-ring-border-radius: var(--sui-border-radius-sm);
}

@media (prefers-reduced-motion: no-preference) {

  .sui-list-item-container {

    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 300ms;
  }
}

.sui-list-item-container {

  display: flex;

  flex-direction: column;

  position: relative;

  /* Prevent the divider from being covered by the container */
  height: calc(100% - 1px);
  background-color: var(--sui-list-item-container-bg-color);
}

.sui-list-item-hover-actions {

  position: absolute;

  right: var(--sui-spacing-0);

  display: flex;

  flex-direction: row;

  align-items: center;

  top: var(--sui-spacing-0);

  bottom: var(--sui-spacing-0);

  overflow: hidden;

  background-color: inherit;

  padding-left: var(--sui-spacing-4);

  padding-right: var(--sui-spacing-2);

  /* prevent container outline be covered */

  margin-top: var(--sui-spacing-1);

  margin-bottom: var(--sui-spacing-1);

  margin-right: var(--sui-spacing-1);
}

.sui-list-item-small {

  height: var(--sui-spacing-11);
}

.sui-list-item-large {

  height: var(--sui-spacing-16);
}

.sui-list-item-auto .sui-list-item-content {

  height: auto;

  padding-top: var(--sui-spacing-3\.5);

  padding-bottom: var(--sui-spacing-3\.5);
}

.sui-list-item-root.sui-focus-visible .sui-list-item-container, .sui-list-item-root.sui-focused .sui-list-item-container {

  --sui-focus-ring-color: var(--sui-focus-ring-inset-color);
}

.sui-list-item-root.sui-focus-visible .sui-list-item-container::after, .sui-list-item-root.sui-focused .sui-list-item-container::after {

  pointer-events: none;

  content: '';

  position: absolute;

  inset: 0;

  border-radius: var(--sui-focus-ring-border-radius, 0px);

  box-shadow: inset 0 0 0 var(--sui-focus-ring-inset-width) var(--sui-focus-ring-color);
}

.sui-list-item-root.sui-focus-visible .sui-list-item-container, .sui-list-item-root.sui-focused .sui-list-item-container {

    --sui-list-item-container-bg-color: var(
      --sui-list-item-container-bg-color-focus
    );
  }

.sui-list-item-hoverable.sui-focus-visible-within .sui-list-item-container, .sui-list-item-clickable.sui-focus-visible-within .sui-list-item-container {
    --sui-list-item-container-bg-color: var(
      --sui-list-item-container-bg-color-focus
    );
  }

.sui-list-item-clickable.sui-selected.sui-focus-visible-within .sui-list-item-container {
    --sui-list-item-container-bg-color: var(
      --sui-list-item-container-bg-color-selected-hover
    );
  }

.sui-list-item-highlighted .sui-list-item-container {
    --sui-list-item-container-bg-color: var(
      --sui-list-item-container-bg-color-hover
    );
  }

@media (hover: hover) {

.sui-list-item-hoverable:hover .sui-list-item-container {
    --sui-list-item-container-bg-color: var(
      --sui-list-item-container-bg-color-hover
    );
  }
}

.sui-list-item-clickable {

  cursor: pointer;
}

.sui-list-item-clickable.sui-selected .sui-list-item-container {
    box-shadow: inset 0 0 0 1px var(--sui-colors-neutral-high-contrast);

    --sui-list-item-container-bg-color: var(
      --sui-list-item-container-bg-color-selected
    );
  }

@media (hover: hover) {

.sui-list-item-clickable.sui-selected:hover .sui-list-item-container {
    --sui-list-item-container-bg-color: var(
      --sui-list-item-container-bg-color-selected-hover
    );
  }
}

/* Hide the before-and-after divider when selected, ensuring it does not interfere with the layout. */

.sui-list-item-clickable:has(+ .sui-list-item-clickable.sui-selected) .sui-list-item-divider, .sui-list-item-clickable.sui-selected .sui-list-item-divider {

  opacity: 0;
}

.sui-list-item-root.sui-dragged {

  cursor: grabbing;

  background-color: transparent;
}

.sui-list-item-root.sui-dragged .sui-list-item-container {

  --sui-focus-ring-color: var(--sui-focus-ring-inset-color);
}

.sui-list-item-root.sui-dragged .sui-list-item-container::after {

  pointer-events: none;

  content: '';

  position: absolute;

  inset: 0;

  border-radius: var(--sui-focus-ring-border-radius, 0px);

  box-shadow: inset 0 0 0 var(--sui-focus-ring-inset-width) var(--sui-focus-ring-color);
}

.sui-list-item-root.sui-dragged .sui-list-item-container {

  --tw-shadow: var(--sui-box-shadow-md);

  --tw-shadow-colored: var(--sui-box-shadow-md);

  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

    --sui-list-item-container-bg-color: var(
      --sui-list-item-container-bg-color-focus
    );
}

.sui-list-item-root.sui-dragged.sui-selected .sui-list-item-container {
    --sui-list-item-container-bg-color: var(
      --sui-list-item-container-bg-color-selected
    );
  }

@media (hover: hover) {

.sui-list-item-root.sui-dragged.sui-selected:hover .sui-list-item-container {
    --sui-list-item-container-bg-color: var(
      --sui-list-item-container-bg-color-selected-hover
    );
  }
}

.sui-list-item-clickable:not(:focus-within).sui-active .sui-list-item-container, .sui-list-item-clickable:not(:focus-within):active .sui-list-item-container, .sui-list-item-clickable:focus.sui-active .sui-list-item-container, .sui-list-item-clickable:focus:active .sui-list-item-container, .sui-list-item-clickable.sui-focused.sui-active .sui-list-item-container, .sui-list-item-clickable.sui-focused:active .sui-list-item-container {
      --sui-list-item-container-bg-color: var(
        --sui-list-item-container-bg-color-active
      );
    }

.sui-menu-actions-root {

    box-sizing: border-box;

    display: flex;

    height: var(--sui-spacing-10);

    width: 100%;

    align-items: center;

    justify-content: space-between;

    --tw-bg-opacity: 1;

    background-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-bg-opacity)));

    padding-left: var(--sui-spacing-2);

    padding-right: var(--sui-spacing-2)
}

.sui-menu-actions-group-root {

    display: flex;

    gap: var(--sui-spacing-1)
}

.sui-menu-divider-root {
    margin-top: var(--sui-spacing-2);
    margin-bottom: var(--sui-spacing-2)
}

.sui-menu-footer-root {
    display: flex;
    height: var(--sui-spacing-10);
    align-items: center;
    justify-content: center;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-bg-opacity)));
    padding-left: var(--sui-spacing-4);
    padding-right: var(--sui-spacing-4)
}

.sui-menu-header-root {

    font-size: var(--sui-typography-subtitle-font-size);

    font-weight: var(--sui-typography-subtitle-font-weight);

    line-height: var(--sui-typography-subtitle-line-height);

    -webkit-text-decoration: var(--sui-typography-subtitle-text-decoration);

            text-decoration: var(--sui-typography-subtitle-text-decoration);

    text-transform: var(--sui-typography-subtitle-text-transform);

    font-family: var(--sui-font-family);

    position: relative;

    box-sizing: border-box;

    height: var(--sui-spacing-12);

    --tw-bg-opacity: 1;

    background-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-bg-opacity)));

    padding-left: var(--sui-spacing-14);

    padding-right: var(--sui-spacing-14);

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));

    display: flex;

    align-items: center;

    justify-content: center;

    gap: var(--sui-spacing-3)
}

.sui-menu-header-title {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap
}

.sui-menu-header-start,
.sui-menu-header-end {

    position: absolute;

    top: var(--sui-spacing-0);

    display: flex;

    height: 100%;

    flex-direction: row;

    align-items: center;

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)))
}

.sui-menu-header-start {

    left: var(--sui-spacing-4)
}

.sui-menu-header-end {

    right: var(--sui-spacing-4)
}

.sui-menu-item-text-root {display: flex;height: 100%;min-width: var(--sui-spacing-0);flex-grow: 1;align-items: center;justify-content: space-between;margin-left: var(--sui-spacing-3)
}

.sui-menu-item-text-root:first-child {margin-left: var(--sui-spacing-0)
}

.sui-menu-item-text-root:last-child {margin-right: calc(var(--sui-spacing-1) * -1)
}

.sui-menu-item-text-primary-text {margin-right: var(--sui-spacing-2)
}

.sui-menu-item-text-info-text {font-size: var(--sui-typography-descriptor-mini-font-size);font-weight: var(--sui-typography-descriptor-mini-font-weight);line-height: var(--sui-typography-descriptor-mini-line-height);-webkit-text-decoration: var(--sui-typography-descriptor-mini-text-decoration);text-decoration: var(--sui-typography-descriptor-mini-text-decoration);text-transform: var(--sui-typography-descriptor-mini-text-transform);font-family: var(--sui-font-family);margin-right: var(--sui-spacing-1);max-width: var(--sui-spacing-22);flex-shrink: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;--tw-text-opacity: 1;color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-text-opacity)))
}

.sui-popper-menu-root {

    z-index: 1300
}

.sui-popper-menu-paper {

    min-width: var(--sui-spacing-50);

    max-width: var(--sui-spacing-112);

    overflow: hidden;

    padding-top: var(--sui-spacing-2);

    padding-bottom: var(--sui-spacing-2);

    border-style: solid;

    border-color: var(--sui-colors-neutral-b0-t20);

    --tw-bg-opacity: 1;

    background-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-bg-opacity)));

    border-radius: var(--sui-border-radius-sm);

    --sui-focus-ring-border-radius: var(--sui-border-radius-sm);

    border-width: var(--sui-border-width-1);

    --sui-focus-ring-border-width: var(--sui-border-width-1);

    --sui-focus-ring-border-width-recoup: 1
}

.sui-radio-root {position: relative;box-sizing: border-box;display: inline-flex;align-items: center;justify-content: center;border-style: solid;--sui-focus-ring-border-width-recoup: 1;height: var(--sui-spacing-5);width: var(--sui-spacing-5);vertical-align: middle;border-radius: var(--sui-border-radius-full);--sui-focus-ring-border-radius: var(--sui-border-radius-full);--tw-border-opacity: 1;border-color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-border-opacity)));--tw-bg-opacity: 1;background-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-bg-opacity)));border-width: var(--sui-border-width-1\.2);--sui-focus-ring-border-width: var(--sui-border-width-1\.2);
}

@media (prefers-reduced-motion: no-preference) {.sui-radio-root {transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 300ms;
  }
}

.sui-radio-root:focus-visible,
  .sui-radio-root.sui-focus-visible {--sui-focus-ring-color: var(--sui-focus-ring-normal-color);
}

.sui-radio-root:focus-visible::after,
  .sui-radio-root.sui-focus-visible::after {pointer-events: none;content: '';position: absolute;inset: 0;border-radius: calc(var(--sui-focus-ring-normal-offset) + var(--sui-focus-ring-border-radius, 0px));box-shadow: 0 0 0 var(--sui-focus-ring-normal-width) var(--sui-focus-ring-color);margin: calc(var(--sui-focus-ring-normal-offset)*-1 - var(--sui-focus-ring-border-width, 0px)*var(--sui-focus-ring-border-width-recoup, 1));
}

.sui-radio-root:focus-visible,
  .sui-radio-root.sui-focus-visible {--tw-border-opacity: 1;border-color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-border-opacity)));
}

.sui-radio-root.sui-disabled {pointer-events: none;border-color: var(--sui-colors-neutral-b0-t20);--tw-bg-opacity: 1;background-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-bg-opacity)));
}

@media (hover: hover) {

  .sui-radio-root:hover {--tw-border-opacity: 1;border-color: rgb(var(--s-neutral-b1), calc(var(--s-neutral-b1-opacity, 1) * var(--tw-border-opacity)));--tw-bg-opacity: 1;background-color: rgb(var(--s-neutral-b5), calc(var(--s-neutral-b5-opacity, 1) * var(--tw-bg-opacity)));
  }
}

.sui-radio-root:active {--tw-border-opacity: 1;border-color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-border-opacity)));--tw-bg-opacity: 1;background-color: rgb(var(--s-neutral-b4), calc(var(--s-neutral-b4-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-radio-input {position: absolute;inset: var(--sui-spacing-0);margin: var(--sui-spacing-0);cursor: pointer;opacity: 0;
}

.sui-radio-dot {height: var(--sui-spacing-3);width: var(--sui-spacing-3);border-radius: var(--sui-border-radius-full);--sui-focus-ring-border-radius: var(--sui-border-radius-full);
}

.sui-radio-root.sui-checked {--tw-border-opacity: 1;border-color: rgb(var(--s-primary-f), calc(var(--s-primary-f-opacity, 1) * var(--tw-border-opacity)));--tw-bg-opacity: 1;background-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-radio-root.sui-checked .sui-radio-dot {--tw-bg-opacity: 1;background-color: rgb(var(--s-primary-f), calc(var(--s-primary-f-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-radio-root.sui-checked.sui-disabled {border-color: var(--sui-colors-primary-t10);
}

.sui-radio-root.sui-checked.sui-disabled .sui-radio-dot {background-color: var(--sui-colors-primary-b-t20);
}

@media (hover: hover) {

.sui-radio-root.sui-checked:hover {--tw-border-opacity: 1;border-color: rgb(var(--s-primary-f-high-contrast), calc(var(--s-primary-f-high-contrast-opacity, 1) * var(--tw-border-opacity)));
  }
}

@media (hover: hover) {

.sui-radio-root.sui-checked:hover .sui-radio-dot {--tw-bg-opacity: 1;background-color: rgb(var(--s-primary-f-high-contrast), calc(var(--s-primary-f-high-contrast-opacity, 1) * var(--tw-bg-opacity)));
  }
}

.sui-radio-root.sui-checked:active {--tw-border-opacity: 1;border-color: rgb(var(--s-neutral-b1), calc(var(--s-neutral-b1-opacity, 1) * var(--tw-border-opacity)));
}

.sui-radio-root.sui-checked:active .sui-radio-dot {--tw-bg-opacity: 1;background-color: rgb(var(--s-neutral-b1), calc(var(--s-neutral-b1-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-radio-group-root {

    display: flex;

    flex-direction: column
}

.sui-radio-group-root > :not(:last-child) {

    margin-bottom: var(--sui-spacing-4)
}

.sui-radio-group-row {

    display: flex;

    flex-direction: row
}

.sui-radio-group-row > :not(:last-child) {

    margin-bottom: var(--sui-spacing-0)
}

.sui-slider-root {
    --sui-slider-thumb-size: var(--sui-spacing-4\.5);
    --sui-slider-thumb-offset: calc(var(--sui-slider-thumb-border-width) / -2);
    --sui-slider-thumb-border-width: 1px;
    --sui-slider-thumb-border-color: var(--sui-colors-neutral-b2);
    --sui-slider-thumb-bg-color: var(--sui-colors-neutral-w0);
    --sui-slider-cross-size: var(--sui-spacing-1\.5);
    --sui-slider-rail-flow-size: calc((100% + var(--sui-slider-thumb-size)) - var(--sui-slider-thumb-border-width));
    --sui-slider-min-flow-size: calc(var(--sui-spacing-40) - var(--sui-slider-thumb-size));
    --sui-slider-rail-color: var(--sui-colors-neutral-b4);
    --sui-slider-track-color: var(--sui-colors-neutral-b2);
    --sui-slider-padding-block: var(--sui-spacing-4);
    --sui-slider-marks-gap: calc(var(--sui-slider-padding-block) + (var(--sui-slider-cross-size) / 2) + var(--sui-spacing-2));
    position: relative;
    box-sizing: content-box;
    display: inline-block;
    cursor: pointer;
    touch-action: none;

    padding-block: var(--sui-slider-padding-block);

    /* sets the color of the highlight to transparent that appears over the slider while it's being tapped on mobile.  */
    -webkit-tap-highlight-color: transparent;
  }

.sui-slider-root.sui-disabled {
    pointer-events: none;

      --sui-slider-rail-color: var(--sui-colors-neutral-b5);
      --sui-slider-track-color: var(--sui-colors-neutral-b4);
      --sui-slider-thumb-border-color: var(--sui-colors-neutral-b3);
      --sui-slider-thumb-bg-color: var(--sui-colors-neutral-b3);
}

.sui-slider-root.sui-disabled .sui-slider-thumb {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.sui-slider-root.sui-disabled .sui-slider-track {
        border-color: var(--sui-slider-track-color);
      }

.sui-slider-root.sui-disabled .sui-slider-mark {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-slider-root.sui-disabled .sui-slider-mark-label {
    --tw-text-opacity: 1;
    color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-text-opacity)));
}

.sui-slider-root.sui-disabled .sui-slider-value-label-paper {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-slider-root:active.sui-slider-neutral {
        --sui-slider-thumb-border-color: var(--sui-colors-primary-f);
        --sui-slider-track-color: var(--sui-colors-primary-f);
      }

@media (hover: hover) {

    .sui-slider-root:hover.sui-slider-neutral {
        --sui-slider-thumb-border-color: var(--sui-colors-primary-f);
        --sui-slider-track-color: var(--sui-colors-primary-f);
      }
}

.sui-slider-root:active.sui-slider-success {
        --sui-slider-thumb-border-color: var(--sui-colors-success-f);
        --sui-slider-track-color: var(--sui-colors-success-f);
      }

@media (hover: hover) {

    .sui-slider-root:hover.sui-slider-success {
        --sui-slider-thumb-border-color: var(--sui-colors-success-f);
        --sui-slider-track-color: var(--sui-colors-success-f);
      }
}

.sui-slider-root:active.sui-slider-danger {
        --sui-slider-thumb-border-color: var(--sui-colors-danger-f);
        --sui-slider-track-color: var(--sui-colors-danger-f);
      }

@media (hover: hover) {

    .sui-slider-root:hover.sui-slider-danger {
        --sui-slider-thumb-border-color: var(--sui-colors-danger-f);
        --sui-slider-track-color: var(--sui-colors-danger-f);
      }
}

.sui-slider-root:active.sui-slider-warning {
        --sui-slider-thumb-border-color: var(--sui-colors-warning-f);
        --sui-slider-track-color: var(--sui-colors-warning-f);
      }

@media (hover: hover) {

    .sui-slider-root:hover.sui-slider-warning {
        --sui-slider-thumb-border-color: var(--sui-colors-warning-f);
        --sui-slider-track-color: var(--sui-colors-warning-f);
      }
}

.sui-slider-root:active .sui-slider-thumb {
    --tw-shadow: var(--sui-box-shadow-sm-primary);
    --tw-shadow-colored: var(--sui-box-shadow-sm-primary);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (hover: hover) {

    .sui-slider-root:hover .sui-slider-thumb {
        --tw-shadow: var(--sui-box-shadow-sm-primary);
        --tw-shadow-colored: var(--sui-box-shadow-sm-primary);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }
}

.sui-slider-root:active .sui-slider-value-label.sui-slider-show-on-hover-only {
    display: block;
}

@media (hover: hover) {

    .sui-slider-root:hover .sui-slider-value-label.sui-slider-show-on-hover-only {
        display: block;
    }
}

.sui-slider-root:active.sui-slider-neutral {
        --sui-slider-thumb-bg-color: var(--sui-colors-primary-t10);
      }

.sui-slider-root:active.sui-slider-success {
        --sui-slider-thumb-bg-color: var(--sui-colors-success-t10);
      }

.sui-slider-root:active.sui-slider-danger {
        --sui-slider-thumb-bg-color: var(--sui-colors-danger-t10);
      }

.sui-slider-root:active.sui-slider-warning {
        --sui-slider-thumb-bg-color: var(--sui-colors-warning-t10);
      }

.sui-slider-horizontal {
    width: 100%;

    padding-top: var(--sui-slider-padding-block);
    min-width: var(--sui-slider-min-flow-size);
}

.sui-slider-vertical {
    height: 100%;

    padding-left: var(--sui-slider-padding-block);
    min-height: var(--sui-slider-min-flow-size);
}

.sui-slider-has-marks {
    margin-bottom: var(--sui-spacing-4);
}

.sui-slider-rail,
  .sui-slider-track {
    position: absolute;
    box-sizing: content-box;
    display: block;
    border-color: currentColor;
    border-right-width: var(--sui-border-width-1);

    background-color: var(--sui-slider-track-color);
}

.sui-slider-rail {
    border-radius: var(--sui-border-radius-full);
    --sui-focus-ring-border-radius: var(--sui-border-radius-full);

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--sui-slider-rail-color);
}

.sui-slider-rail-horizontal {
      height: var(--sui-slider-cross-size);
      width: var(--sui-slider-rail-flow-size);
    }

.sui-slider-rail-vertical {
      height: var(--sui-slider-rail-flow-size);
      width: var(--sui-slider-cross-size);
    }

.sui-slider-track-horizontal {
    left: var(--sui-spacing-0);
    border-top-left-radius: var(--sui-border-radius-full);
    border-bottom-left-radius: var(--sui-border-radius-full);

      top: 50%;
      height: var(--sui-slider-cross-size);
      transform: translate(calc(var(--sui-slider-thumb-size) / -2), -50%);
}

.sui-slider-track-vertical {
    bottom: var(--sui-spacing-0);
    border-bottom-right-radius: var(--sui-border-radius-full);
    border-bottom-left-radius: var(--sui-border-radius-full);

      left: 50%;
      width: var(--sui-slider-cross-size);
      transform: translate(-50%, calc(var(--sui-slider-thumb-size) / 2));
}

.sui-slider-track-empty {
    border-style: none;
    --sui-focus-ring-border-width-recoup: 0;
}

.sui-slider-thumb {
    position: absolute;
    z-index: 10;
    box-sizing: border-box;
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-radius: var(--sui-border-radius-full);
    --sui-focus-ring-border-radius: var(--sui-border-radius-full);
    border-style: solid;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-bg-opacity)));
    --tw-shadow: var(--sui-box-shadow-xs);
    --tw-shadow-colored: var(--sui-box-shadow-xs);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --sui-focus-ring-border-width-recoup: 1;
}

@media (prefers-reduced-motion: no-preference) {

    .sui-slider-thumb {
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
        transition-duration: var(--sui-transition-neutral-01-fast-transition-duration);
        transition-timing-function: var(--sui-transition-neutral-01-fast-transition-timing-function);
    }
}

.sui-slider-thumb {

    width: var(--sui-slider-thumb-size);
    height: var(--sui-slider-thumb-size);
    border-width: var(--sui-slider-thumb-border-width);
    border-color: var(--sui-slider-thumb-border-color);
  }

.sui-slider-thumb:focus-visible,
    .sui-slider-thumb.sui-focus-visible {
    --sui-focus-ring-color: var(--sui-focus-ring-normal-color);
}

.sui-slider-thumb:focus-visible::after,
    .sui-slider-thumb.sui-focus-visible::after {
    pointer-events: none;
    content: '';
    position: absolute;
    inset: 0;
    border-radius: calc(var(--sui-focus-ring-normal-offset) + var(--sui-focus-ring-border-radius, 0px));
    box-shadow: 0 0 0 var(--sui-focus-ring-normal-width) var(--sui-focus-ring-color);
    margin: calc(var(--sui-focus-ring-normal-offset)*-1 - var(--sui-focus-ring-border-width, 0px)*var(--sui-focus-ring-border-width-recoup, 1));
}

.sui-slider-thumb-horizontal {
      margin-left: var(--sui-slider-thumb-offset);
      transform: translate(-50%, -50%);
    }

.sui-slider-thumb-vertical {
      left: calc(var(--sui-slider-thumb-border-width) / -1);
      margin-bottom: var(--sui-slider-thumb-offset);
      transform: translateY(50%);
    }

.sui-slider-thumb-inner {
    position: absolute;
    inset: var(--sui-spacing-0);
    border-radius: var(--sui-border-radius-full);
    --sui-focus-ring-border-radius: var(--sui-border-radius-full);

      background-color: var(--sui-slider-thumb-bg-color);
}

.sui-slider-marks {
    position: absolute;
    display: block;
}

/*
      The thumb needs to be perfectly centered alongside a 1px wide mark so we must offset
      the thumb towards the start of the slider by 0.5px. We also need to offset the thumb
      another 0.5px due to its border radius revealing a gap between the track and the thumb
      which shows the rail behind. As such we offset the marks container 1px towards the
      start of the slider. Due to the offset of the thumb being towards the start of the
      slider, we also need to offset the end edge of the marks container away from the
      end of the slider by 1px to account for the start offset.
    */

.sui-slider-marks-horizontal {
    left: -1px;
    right: 1px;

      top: var(--sui-slider-marks-gap);
}

.sui-slider-marks-vertical {
    bottom: -1px;
    top: 1px;

      left: var(--sui-slider-marks-gap);
}

.sui-slider-mark-container {
    position: absolute;
    display: flex;
    align-items: center;
    gap: var(--sui-spacing-2);
}

.sui-slider-mark-container-horizontal {
    width: var(--sui-spacing-0\.25);
    flex-direction: column;
}

.sui-slider-mark-container-vertical {
    height: var(--sui-spacing-0\.25);
    flex-direction: row;
}

.sui-slider-mark {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-slider-mark-vertical {
    height: 100%;
    width: var(--sui-spacing-1);
}

.sui-slider-mark-horizontal {
    height: var(--sui-spacing-1);
    width: 100%;
}

.sui-slider-mark-label {
    font-size: var(--sui-typography-descriptor-mini-font-size);
    font-weight: var(--sui-typography-descriptor-mini-font-weight);
    line-height: var(--sui-typography-descriptor-mini-line-height);
    -webkit-text-decoration: var(--sui-typography-descriptor-mini-text-decoration);
            text-decoration: var(--sui-typography-descriptor-mini-text-decoration);
    text-transform: var(--sui-typography-descriptor-mini-text-transform);
    font-family: var(--sui-font-family);
    text-align: center;
    --tw-text-opacity: 1;
    color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-text-opacity)));
}

.sui-slider-value-label.sui-slider-show-on-hover-only {
    display: none;
}

.sui-switch-root {

position: relative;

z-index: 0;

display: inline-flex;

height: var(--sui-spacing-6);

width: var(--sui-spacing-10);

align-items: center;

border-radius: var(--sui-border-radius-full);

--sui-focus-ring-border-radius: var(--sui-border-radius-full);
}

.sui-switch-root:focus-visible,
  .sui-switch-root.sui-focus-visible {

--sui-focus-ring-color: var(--sui-focus-ring-normal-color);
}

.sui-switch-root:focus-visible::after,
  .sui-switch-root.sui-focus-visible::after {

pointer-events: none;

content: '';

position: absolute;

inset: 0;

border-radius: calc(var(--sui-focus-ring-normal-offset) + var(--sui-focus-ring-border-radius, 0px));

box-shadow: 0 0 0 var(--sui-focus-ring-normal-width) var(--sui-focus-ring-color);

margin: calc(var(--sui-focus-ring-normal-offset)*-1 - var(--sui-focus-ring-border-width, 0px)*var(--sui-focus-ring-border-width-recoup, 1));
}

.sui-switch-track {

height: 100%;

width: 100%;

border-radius: var(--sui-border-radius-full);

--sui-focus-ring-border-radius: var(--sui-border-radius-full);

--tw-bg-opacity: 1;

background-color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-bg-opacity)));
}

@media (prefers-reduced-motion: no-preference) {

.sui-switch-track {

transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;

transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

transition-duration: 300ms;
}
}

.sui-switch-dot {

position: absolute;
}

@media (prefers-reduced-motion: no-preference) {

.sui-switch-dot {

transition-property: all;

transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

transition-duration: 300ms;
}
}

.sui-switch-dot {

margin-left: var(--sui-spacing-0\.5);

margin-right: var(--sui-spacing-0\.5);

height: var(--sui-spacing-5);

width: var(--sui-spacing-5);

border-radius: var(--sui-border-radius-full);

--sui-focus-ring-border-radius: var(--sui-border-radius-full);

--tw-bg-opacity: 1;

background-color: rgb(var(--s-neutral-high-contrast-b0), calc(var(--s-neutral-high-contrast-b0-opacity, 1) * var(--tw-bg-opacity)));
}

/* use `General sibling combinator` because keyboard can trigger :active in input element */

.sui-switch-input {

position: absolute;

z-index: 10;

inset: var(--sui-spacing-0);

height: 100%;

width: 100%;

cursor: pointer;

opacity: 0;
}

.sui-switch-input:disabled {

pointer-events: none;
}

.sui-switch-input:disabled ~ .sui-switch-track {

--tw-bg-opacity: 1;

background-color: rgb(var(--s-neutral-b4), calc(var(--s-neutral-b4-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-switch-input:disabled ~ .sui-switch-dot {

--tw-bg-opacity: 1;

background-color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-bg-opacity)));
}

@media (hover: hover) {

.sui-switch-input:hover~.sui-switch-track {

--tw-bg-opacity: 1;

background-color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-bg-opacity)));
}
}

.sui-switch-input:active ~ .sui-switch-track {

--tw-bg-opacity: 1;

background-color: rgb(var(--s-neutral-high-contrast-w0), calc(var(--s-neutral-high-contrast-w0-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-switch-input.sui-checked ~ .sui-switch-track {

--tw-bg-opacity: 1;

background-color: rgb(var(--s-primary-b), calc(var(--s-primary-b-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-switch-input.sui-checked ~ .sui-switch-dot {

--tw-translate-x: var(--sui-spacing-4);

transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (hover: hover) {

.sui-switch-input.sui-checked:hover~.sui-switch-track {

--tw-bg-opacity: 1;

background-color: rgb(var(--s-primary-b-high-contrast), calc(var(--s-primary-b-high-contrast-opacity, 1) * var(--tw-bg-opacity)));
}
}

.sui-switch-input.sui-checked:disabled ~ .sui-switch-track {

background-color: var(--sui-colors-primary-b-t20);
}

.sui-switch-input.sui-checked:disabled ~ .sui-switch-dot {

--tw-bg-opacity: 1;

background-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-dropdown-value {
  max-width: var(--sui-spacing-28);
  --tw-text-opacity: 1;
  color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sui-dropdown-chevron {
  margin-left: var(--sui-spacing-1);
  height: var(--sui-spacing-6);
  width: var(--sui-spacing-6);
  --tw-text-opacity: 1;
  color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));
  --sui-squircle-bg-color: transparent;
  --sui-squircle-border-color: transparent;
  --sui-squircle-border-width: var(--sui-border-width-0);
}

.sui-dropdown-button {
  position: relative;
  display: flex;
  cursor: pointer;
  align-items: center;
  border-style: none;
  background-color: transparent;
  padding: var(--sui-spacing-1);
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-radius: var(--sui-border-radius-xs);
  --sui-focus-ring-border-radius: var(--sui-border-radius-xs);
  --sui-focus-ring-border-width-recoup: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-transform: inherit;
  text-decoration: inherit;
  letter-spacing: inherit;
  font-family: inherit;
}

.sui-dropdown-button:focus-visible,
    .sui-dropdown-button.sui-focus-visible {
  --sui-focus-ring-color: var(--sui-focus-ring-tight-color);
}

.sui-dropdown-button:focus-visible::after,
    .sui-dropdown-button.sui-focus-visible::after {
  pointer-events: none;
  content: '';
  position: absolute;
  inset: 0;
  border-radius: calc(var(--sui-focus-ring-tight-offset) + var(--sui-focus-ring-border-radius, 0px));
  box-shadow: 0 0 0 var(--sui-focus-ring-tight-width) var(--sui-focus-ring-color);
  margin: calc(var(--sui-focus-ring-tight-offset)*-1 - var(--sui-focus-ring-border-width, 0px)*var(--sui-focus-ring-border-width-recoup, 1));
}

@media (hover: hover) {
  .sui-dropdown-button:hover .sui-dropdown-chevron {
    --s-squircle-bg-color-opacity: 1;
    --sui-squircle-bg-color: rgb(var(--s-neutral-b4), calc(var(--s-neutral-b4-opacity, 1) * var(--s-squircle-bg-color-opacity)));
  }
}

.sui-dropdown-label {
  margin-left: var(--sui-spacing-1);
  max-width: var(--sui-spacing-24);
  --tw-text-opacity: 1;
  color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-text-opacity)));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sui-dropdown-colon {
  margin-left: var(--sui-spacing-0\.5);
  margin-right: var(--sui-spacing-0\.5);
  display: inline-block;
  width: var(--sui-spacing-1);
  --tw-text-opacity: 1;
  color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-text-opacity)));
}

.sui-dropdown-activated .sui-dropdown-chevron {
  --s-squircle-bg-color-opacity: 1;
  --sui-squircle-bg-color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--s-squircle-bg-color-opacity)));
}

.sui-dropdown-root {
  font-size: var(--sui-typography-descriptor-mini-font-size);
  font-weight: var(--sui-typography-descriptor-mini-font-weight);
  line-height: var(--sui-typography-descriptor-mini-line-height);
  -webkit-text-decoration: var(--sui-typography-descriptor-mini-text-decoration);
          text-decoration: var(--sui-typography-descriptor-mini-text-decoration);
  text-transform: var(--sui-typography-descriptor-mini-text-transform);
  font-family: var(--sui-font-family);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
}

.sui-dropdown-root.sui-disabled {
  pointer-events: none;
}

.sui-dropdown-root.sui-disabled .sui-dropdown-chevron,
      .sui-dropdown-root.sui-disabled .sui-dropdown-value,
      .sui-dropdown-root.sui-disabled .sui-dropdown-label,
      .sui-dropdown-root.sui-disabled .sui-dropdown-colon {
  --tw-text-opacity: 1;
  color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-text-opacity)));
}

.sui-date-picker-calendar {

box-sizing: border-box;

display: flex;

height: 328px;

width: 248px;

flex-direction: column;

align-items: center;

overflow: hidden;

padding-top: var(--sui-spacing-5);

padding-bottom: var(--sui-spacing-5);
}

.sui-date-picker-header {

box-sizing: border-box;

display: flex;

height: var(--sui-spacing-6);

width: 100%;

flex-shrink: 0;

align-items: center;

justify-content: space-between;

padding-left: var(--sui-spacing-5);

padding-right: var(--sui-spacing-5);
}

.sui-date-picker-header-action {

position: relative;

box-sizing: border-box;

cursor: pointer;

border-style: none;

background-color: transparent;

padding: var(--sui-spacing-0);

--tw-text-opacity: 1;

color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));

outline: 2px solid transparent;

outline-offset: 2px;

--sui-focus-ring-border-width-recoup: 0;
}

.sui-date-picker-header-action:focus-visible,
  .sui-date-picker-header-action.sui-focus-visible {

--sui-focus-ring-color: var(--sui-focus-ring-normal-color);
}

.sui-date-picker-header-action:focus-visible::after,
  .sui-date-picker-header-action.sui-focus-visible::after {

pointer-events: none;

content: '';

position: absolute;

inset: 0;

border-radius: calc(var(--sui-focus-ring-normal-offset) + var(--sui-focus-ring-border-radius, 0px));

box-shadow: 0 0 0 var(--sui-focus-ring-normal-width) var(--sui-focus-ring-color);

margin: calc(var(--sui-focus-ring-normal-offset)*-1 - var(--sui-focus-ring-border-width, 0px)*var(--sui-focus-ring-border-width-recoup, 1));
}

@media (hover: hover) {

.sui-date-picker-header-action:hover {

--tw-text-opacity: 1;

color: rgb(var(--s-primary-f-high-contrast), calc(var(--s-primary-f-high-contrast-opacity, 1) * var(--tw-text-opacity)));
}
}

.sui-date-picker-header-action:active {

--tw-text-opacity: 1;

color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));
}

.sui-date-picker-header-action.sui-disabled {

pointer-events: none;

--tw-text-opacity: 1;

color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-text-opacity)));
}

.sui-date-picker-switch-year-action {

font-size: var(--sui-typography-subtitle-bold-font-size);

font-weight: var(--sui-typography-subtitle-bold-font-weight);

line-height: var(--sui-typography-subtitle-bold-line-height);

-webkit-text-decoration: var(--sui-typography-subtitle-bold-text-decoration);

        text-decoration: var(--sui-typography-subtitle-bold-text-decoration);

text-transform: var(--sui-typography-subtitle-bold-text-transform);

font-family: var(--sui-font-family);

display: flex;

height: 100%;

align-items: center;

position: relative;

outline: 2px solid transparent;

outline-offset: 2px;
}

.sui-date-picker-switch-year-action:focus-visible,
  .sui-date-picker-switch-year-action.sui-focus-visible {

--sui-focus-ring-color: var(--sui-focus-ring-normal-color);
}

.sui-date-picker-switch-year-action:focus-visible::after,
  .sui-date-picker-switch-year-action.sui-focus-visible::after {

pointer-events: none;

content: '';

position: absolute;

inset: 0;

border-radius: calc(var(--sui-focus-ring-normal-offset) + var(--sui-focus-ring-border-radius, 0px));

box-shadow: 0 0 0 var(--sui-focus-ring-normal-width) var(--sui-focus-ring-color);

margin: calc(var(--sui-focus-ring-normal-offset)*-1 - var(--sui-focus-ring-border-width, 0px)*var(--sui-focus-ring-border-width-recoup, 1));
}

.sui-date-picker-switch-year-action-caret {

margin-left: var(--sui-spacing-2);
}

.sui-date-picker-switch-month-actions-group {

display: flex;

justify-content: space-between;
}

.sui-date-picker-switch-month-action:not(:last-of-type) {

margin-right: var(--sui-spacing-2);
}

.sui-date-picker-date-button {

font-size: var(--sui-typography-descriptor-mini-font-size);

font-weight: var(--sui-typography-descriptor-mini-font-weight);

line-height: var(--sui-typography-descriptor-mini-line-height);

-webkit-text-decoration: var(--sui-typography-descriptor-mini-text-decoration);

        text-decoration: var(--sui-typography-descriptor-mini-text-decoration);

text-transform: var(--sui-typography-descriptor-mini-text-transform);

font-family: var(--sui-font-family);

position: relative;

cursor: pointer;

background-color: transparent;

--tw-text-opacity: 1;

color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));

border-radius: var(--sui-border-radius-full);

--sui-focus-ring-border-radius: var(--sui-border-radius-full);

box-sizing: border-box;

display: flex;

align-items: center;

justify-content: center;

border-style: none;

padding: var(--sui-spacing-0);

outline: 2px solid transparent;

outline-offset: 2px;

--sui-focus-ring-border-width-recoup: 0;
}

@media (prefers-reduced-motion: no-preference) {

.sui-date-picker-date-button {

transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;

transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

transition-duration: 150ms;

transition-duration: var(--sui-transition-neutral-01-fast-transition-duration);

transition-timing-function: var(--sui-transition-neutral-01-fast-transition-timing-function);
}
}

@media (hover: hover) {

.sui-date-picker-date-button:hover {

--tw-bg-opacity: 1;

background-color: rgb(var(--s-neutral-b4), calc(var(--s-neutral-b4-opacity, 1) * var(--tw-bg-opacity)));
}
}

.sui-date-picker-date-button:active {

--tw-bg-opacity: 1;

background-color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-date-picker-date-button:focus-visible,
  .sui-date-picker-date-button.sui-focus-visible {

--sui-focus-ring-color: var(--sui-focus-ring-tight-color);
}

.sui-date-picker-date-button:focus-visible::after,
  .sui-date-picker-date-button.sui-focus-visible::after {

pointer-events: none;

content: '';

position: absolute;

inset: 0;

border-radius: calc(var(--sui-focus-ring-tight-offset) + var(--sui-focus-ring-border-radius, 0px));

box-shadow: 0 0 0 var(--sui-focus-ring-tight-width) var(--sui-focus-ring-color);

margin: calc(var(--sui-focus-ring-tight-offset)*-1 - var(--sui-focus-ring-border-width, 0px)*var(--sui-focus-ring-border-width-recoup, 1));
}

.sui-date-picker-date-button.sui-selected {

--tw-bg-opacity: 1;

background-color: rgb(var(--s-primary-b), calc(var(--s-primary-b-opacity, 1) * var(--tw-bg-opacity)));

--tw-text-opacity: 1;

color: rgb(var(--s-neutral-high-contrast-b0), calc(var(--s-neutral-high-contrast-b0-opacity, 1) * var(--tw-text-opacity)));
}

@media (hover: hover) {

.sui-date-picker-date-button.sui-selected:hover {

--tw-bg-opacity: 1;

background-color: rgb(var(--s-primary-b-high-contrast), calc(var(--s-primary-b-high-contrast-opacity, 1) * var(--tw-bg-opacity)));
}
}

.sui-date-picker-date-button.sui-selected:active {

--tw-bg-opacity: 1;

background-color: rgb(var(--s-neutral-high-contrast-w0), calc(var(--s-neutral-high-contrast-w0-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-date-picker-date-button.sui-selected.sui-focus-visible {

--sui-focus-ring-color: var(--sui-focus-ring-normal-color);
}

.sui-date-picker-date-button.sui-selected.sui-focus-visible::after {

pointer-events: none;

content: '';

position: absolute;

inset: 0;

border-radius: calc(var(--sui-focus-ring-normal-offset) + var(--sui-focus-ring-border-radius, 0px));

box-shadow: 0 0 0 var(--sui-focus-ring-normal-width) var(--sui-focus-ring-color);

margin: calc(var(--sui-focus-ring-normal-offset)*-1 - var(--sui-focus-ring-border-width, 0px)*var(--sui-focus-ring-border-width-recoup, 1));
}

.sui-date-picker-date-button.sui-disabled {

pointer-events: none;

--tw-text-opacity: 1;

color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-text-opacity)));
}

.sui-date-picker-current-date {

--tw-border-opacity: 1;

border-color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-border-opacity)));

border-width: var(--sui-border-width-1);

--sui-focus-ring-border-width: var(--sui-border-width-1);
}

.sui-date-picker-current-date.sui-selected,
  .sui-date-picker-current-date:focus-visible,
  .sui-date-picker-current-date.sui-focus-visible {

border-style: none;

--sui-focus-ring-border-width-recoup: 0;
}

.sui-date-picker-day {

height: var(--sui-spacing-6);

width: var(--sui-spacing-6);
}

.sui-date-picker-year {

height: var(--sui-spacing-6);

width: var(--sui-spacing-12);
}

.sui-date-picker-years-panel {

margin-top: var(--sui-spacing-2\.5);

box-sizing: border-box;

display: grid;

grid-template-columns: repeat(4, minmax(0, 1fr));

row-gap: var(--sui-spacing-2\.5);

column-gap: var(--sui-spacing-2\.5);

overflow-y: auto;

padding-left: var(--sui-spacing-5);

padding-right: var(--sui-spacing-5);
}

.sui-date-picker-days-panel {

margin-top: var(--sui-spacing-3);

box-sizing: border-box;

width: 100%;

flex: 1 1 0%;

padding-left: var(--sui-spacing-5);

padding-right: var(--sui-spacing-5);
}

.sui-date-picker-days-grid {

margin-top: var(--sui-spacing-2);

display: grid;

justify-content: space-between;

row-gap: var(--sui-spacing-2);

  grid-template-columns: repeat(7, var(--sui-spacing-6));
}

.sui-date-picker-weekdays {

display: flex;

height: var(--sui-spacing-5);

width: 100%;

align-items: center;

justify-content: space-between;

--tw-text-opacity: 1;

color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-text-opacity)));

font-size: var(--sui-typography-descriptor-mini-font-size);

font-weight: var(--sui-typography-descriptor-mini-font-weight);

line-height: var(--sui-typography-descriptor-mini-line-height);

-webkit-text-decoration: var(--sui-typography-descriptor-mini-text-decoration);

        text-decoration: var(--sui-typography-descriptor-mini-text-decoration);

text-transform: var(--sui-typography-descriptor-mini-text-transform);

font-family: var(--sui-font-family);
}

.sui-date-picker-weekday {

display: inline-block;

width: var(--sui-spacing-6);

text-align: center;
}

.sui-date-picker-loading-container {

display: flex;

height: var(--sui-spacing-36);

align-items: center;

justify-content: center;
}

.sui-date-picker-today-button {

margin-top: var(--sui-spacing-4);
}

.sui-time-picker-picker-root {

width: 15.5rem;

-webkit-user-select: none;

        user-select: none;
}

.sui-time-picker-time-button {

font-size: var(--sui-typography-subtitle-bold-font-size);

font-weight: var(--sui-typography-subtitle-bold-font-weight);

line-height: var(--sui-typography-subtitle-bold-line-height);

-webkit-text-decoration: var(--sui-typography-subtitle-bold-text-decoration);

        text-decoration: var(--sui-typography-subtitle-bold-text-decoration);

text-transform: var(--sui-typography-subtitle-bold-text-transform);

font-family: var(--sui-font-family);

position: relative;

height: var(--sui-spacing-10);

width: var(--sui-spacing-10);

cursor: pointer;

background-color: transparent;

--tw-text-opacity: 1;

color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));

border-radius: var(--sui-border-radius-full);

--sui-focus-ring-border-radius: var(--sui-border-radius-full);

box-sizing: border-box;

display: flex;

align-items: center;

justify-content: center;

border-style: none;

outline: 2px solid transparent;

outline-offset: 2px;

--sui-focus-ring-border-width-recoup: 0;
}

@media (prefers-reduced-motion: no-preference) {

.sui-time-picker-time-button {

transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;

transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

transition-duration: 150ms;

transition-duration: var(--sui-transition-neutral-01-fast-transition-duration);

transition-timing-function: var(--sui-transition-neutral-01-fast-transition-timing-function);
}
}

@media (hover: hover) {

.sui-time-picker-time-button:hover {

--tw-bg-opacity: 1;

background-color: rgb(var(--s-neutral-b4), calc(var(--s-neutral-b4-opacity, 1) * var(--tw-bg-opacity)));
}
}

.sui-time-picker-time-button:active {

--tw-bg-opacity: 1;

background-color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-time-picker-time-button:focus-visible,
  .sui-time-picker-time-button.sui-focus-visible {

--sui-focus-ring-color: var(--sui-focus-ring-tight-color);
}

.sui-time-picker-time-button:focus-visible::after,
  .sui-time-picker-time-button.sui-focus-visible::after {

pointer-events: none;

content: '';

position: absolute;

inset: 0;

border-radius: calc(var(--sui-focus-ring-tight-offset) + var(--sui-focus-ring-border-radius, 0px));

box-shadow: 0 0 0 var(--sui-focus-ring-tight-width) var(--sui-focus-ring-color);

margin: calc(var(--sui-focus-ring-tight-offset)*-1 - var(--sui-focus-ring-border-width, 0px)*var(--sui-focus-ring-border-width-recoup, 1));
}

.sui-time-picker-time-button.sui-selected {

--tw-bg-opacity: 1;

background-color: rgb(var(--s-primary-b), calc(var(--s-primary-b-opacity, 1) * var(--tw-bg-opacity)));

--tw-text-opacity: 1;

color: rgb(var(--s-neutral-high-contrast-b0), calc(var(--s-neutral-high-contrast-b0-opacity, 1) * var(--tw-text-opacity)));
}

@media (hover: hover) {

.sui-time-picker-time-button.sui-selected:hover {

--tw-bg-opacity: 1;

background-color: rgb(var(--s-primary-b-high-contrast), calc(var(--s-primary-b-high-contrast-opacity, 1) * var(--tw-bg-opacity)));
}
}

.sui-time-picker-time-button.sui-selected:active {

--tw-bg-opacity: 1;

background-color: rgb(var(--s-neutral-high-contrast-w0), calc(var(--s-neutral-high-contrast-w0-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-time-picker-time-button.sui-selected.sui-focus-visible {

--sui-focus-ring-color: var(--sui-focus-ring-normal-color);
}

.sui-time-picker-time-button.sui-selected.sui-focus-visible::after {

pointer-events: none;

content: '';

position: absolute;

inset: 0;

border-radius: calc(var(--sui-focus-ring-normal-offset) + var(--sui-focus-ring-border-radius, 0px));

box-shadow: 0 0 0 var(--sui-focus-ring-normal-width) var(--sui-focus-ring-color);

margin: calc(var(--sui-focus-ring-normal-offset)*-1 - var(--sui-focus-ring-border-width, 0px)*var(--sui-focus-ring-border-width-recoup, 1));
}

.sui-time-picker-time-button.sui-disabled {

pointer-events: none;

--tw-text-opacity: 1;

color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-text-opacity)));
}

.sui-time-picker-number-picker {

display: flex;

flex-direction: column;

align-items: center;

justify-content: space-between;

position: relative;

width: var(--sui-spacing-10);

outline: 2px solid transparent;

outline-offset: 2px;
}

.sui-time-picker-number-picker:focus-visible {

--sui-focus-ring-color: var(--sui-focus-ring-normal-color);
}

.sui-time-picker-number-picker:focus-visible::after {

pointer-events: none;

content: '';

position: absolute;

inset: 0;

border-radius: calc(var(--sui-focus-ring-normal-offset) + var(--sui-focus-ring-border-radius, 0px));

box-shadow: 0 0 0 var(--sui-focus-ring-normal-width) var(--sui-focus-ring-color);

margin: calc(var(--sui-focus-ring-normal-offset)*-1 - var(--sui-focus-ring-border-width, 0px)*var(--sui-focus-ring-border-width-recoup, 1));
}

.sui-time-picker-picker-view {

box-sizing: border-box;

height: var(--sui-spacing-44);

width: 15.5rem;

-webkit-user-select: none;

        user-select: none;

padding: var(--sui-spacing-5);
}

.sui-time-picker-main-view {

display: flex;

align-items: center;

justify-content: space-between;
}

.sui-time-picker-main-view:not(.sui-time-picker-twelve-hour) {

padding-left: var(--sui-spacing-11);

padding-right: var(--sui-spacing-11);
}

.sui-time-picker-main-view .sui-time-picker-time-button {

margin-top: var(--sui-spacing-6);

margin-bottom: var(--sui-spacing-6);

height: var(--sui-spacing-10);

width: var(--sui-spacing-10);
}

.sui-time-picker-minute-selection-view {

display: flex;

align-items: center;

justify-content: space-between;
}

.sui-time-picker-hour-selection-view {

display: grid;

height: auto;

align-items: center;

justify-content: space-between;

  grid-template-columns: repeat(4, var(--sui-spacing-10));
}

.sui-linear-progress-indicator-root {
    display: flex;
    width: min-content;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.sui-linear-progress-indicator-determinate-track {
    position: relative;
    inset: var(--sui-spacing-0);
    height: var(--sui-spacing-1\.5);
    width: var(--sui-spacing-40);
    overflow: hidden;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-bg-opacity)));
    border-radius: var(--sui-border-radius-xs);
    --sui-focus-ring-border-radius: var(--sui-border-radius-xs)
}

.sui-linear-progress-indicator-determinate-track-slim {
    height: var(--sui-spacing-1)
}

.sui-linear-progress-indicator-determinate-bar {
    position: absolute;
    left: var(--sui-spacing-0);
    top: var(--sui-spacing-0);
    bottom: var(--sui-spacing-0);
    --tw-bg-opacity: 1;
    background-color: rgb(var(--s-primary-b), calc(var(--s-primary-b-opacity, 1) * var(--tw-bg-opacity)));
    border-radius: var(--sui-border-radius-xs);
    --sui-focus-ring-border-radius: var(--sui-border-radius-xs)
}

.sui-linear-progress-indicator-determinate-label {
    font-size: var(--sui-typography-descriptor-mini-font-size);
    font-weight: var(--sui-typography-descriptor-mini-font-weight);
    line-height: var(--sui-typography-descriptor-mini-line-height);
    -webkit-text-decoration: var(--sui-typography-descriptor-mini-text-decoration);
            text-decoration: var(--sui-typography-descriptor-mini-text-decoration);
    text-transform: var(--sui-typography-descriptor-mini-text-transform);
    font-family: var(--sui-font-family);
    margin-bottom: var(--sui-spacing-2)
}

.sui-linear-progress-indicator-determinate-details-container {
    margin-top: var(--sui-spacing-2);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-self: stretch
}

.sui-linear-progress-indicator-determinate-details-label {
    font-size: var(--sui-typography-descriptor-mini-font-size);
    font-weight: var(--sui-typography-descriptor-mini-font-weight);
    line-height: var(--sui-typography-descriptor-mini-line-height);
    -webkit-text-decoration: var(--sui-typography-descriptor-mini-text-decoration);
            text-decoration: var(--sui-typography-descriptor-mini-text-decoration);
    text-transform: var(--sui-typography-descriptor-mini-text-transform);
    font-family: var(--sui-font-family);
    --tw-text-opacity: 1;
    color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-text-opacity)))
}

.sui-block-header-root {

    font-size: var(--sui-typography-subtitle-font-size);

    font-weight: var(--sui-typography-subtitle-font-weight);

    line-height: var(--sui-typography-subtitle-line-height);

    -webkit-text-decoration: var(--sui-typography-subtitle-text-decoration);

            text-decoration: var(--sui-typography-subtitle-text-decoration);

    text-transform: var(--sui-typography-subtitle-text-transform);

    font-family: var(--sui-font-family);

    display: flex;

    width: 100%;

    align-items: center;

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)))
}

.sui-block-header-root:not(:only-child) {

    margin-bottom: var(--sui-spacing-3)
}

.sui-block-header-title {

    flex-grow: 1;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap
}

.sui-block-header-end-slot {

    margin-left: var(--sui-spacing-3);

    display: flex;

    flex-shrink: 0
}

.sui-block-header-divider {

    margin-bottom: var(--sui-spacing-3)
}

.sui-block-root {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden
}

.sui-block-row {
    flex-direction: row
}

.sui-block-padding {
    padding-top: var(--sui-spacing-3);
    padding-bottom: var(--sui-spacing-3);
    padding-left: var(--sui-spacing-4);
    padding-right: var(--sui-spacing-4)
}

.sui-block-bordered {
    border-style: solid;
    border-color: var(--sui-colors-neutral-b0-t10);
    border-width: var(--sui-border-width-1\.2);
    --sui-focus-ring-border-width: var(--sui-border-width-1\.2);
    --sui-focus-ring-border-width-recoup: 1
}

.sui-block-border-radius-none {
    border-radius: var(--sui-border-radius-none);
    --sui-focus-ring-border-radius: var(--sui-border-radius-none)
}

.sui-block-border-radius-xsmall {
    border-radius: var(--sui-border-radius-xs);
    --sui-focus-ring-border-radius: var(--sui-border-radius-xs)
}

.sui-block-border-radius-small {
    border-radius: var(--sui-border-radius-sm);
    --sui-focus-ring-border-radius: var(--sui-border-radius-sm)
}

.sui-block-border-radius-medium {
    border-radius: var(--sui-border-radius-md);
    --sui-focus-ring-border-radius: var(--sui-border-radius-md)
}

.sui-block-default {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-bg-opacity)))
}

.sui-block-neutral {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--s-neutral-b5), calc(var(--s-neutral-b5-opacity, 1) * var(--tw-bg-opacity)))
}

.sui-block-hide-background {
    background-color: transparent
}

.sui-accordion-header-root {

  position: relative;

  display: flex;

  height: var(--sui-spacing-6);

  width: 100%;

  cursor: pointer;

  align-items: center;

  justify-content: space-between;

  padding-left: var(--sui-spacing-4);

  padding-right: var(--sui-spacing-4);

  --tw-text-opacity: 1;

  color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-text-opacity)));

  outline: 2px solid transparent;

  outline-offset: 2px;

  box-sizing: border-box;

  border-style: none;

  background-color: transparent;

  --sui-focus-ring-border-width-recoup: 0;
}

@media (hover: hover) {

  .sui-accordion-header-root:hover {

    --tw-bg-opacity: 1;

    background-color: rgb(var(--s-neutral-b5), calc(var(--s-neutral-b5-opacity, 1) * var(--tw-bg-opacity)));

    --tw-text-opacity: 1;

    color: rgb(var(--s-primary-f-high-contrast), calc(var(--s-primary-f-high-contrast-opacity, 1) * var(--tw-text-opacity)));
  }
}

.sui-accordion-header-root:active {

  --tw-bg-opacity: 1;

  background-color: rgb(var(--s-neutral-b5), calc(var(--s-neutral-b5-opacity, 1) * var(--tw-bg-opacity)));

  --tw-text-opacity: 1;

  color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));
}

.sui-accordion-header-root:focus-visible,
  .sui-accordion-header-root.sui-focus-visible {

  --sui-focus-ring-color: var(--sui-focus-ring-tight-color);
}

.sui-accordion-header-root:focus-visible::after,
  .sui-accordion-header-root.sui-focus-visible::after {

  pointer-events: none;

  content: '';

  position: absolute;

  inset: 0;

  border-radius: calc(var(--sui-focus-ring-tight-offset) + var(--sui-focus-ring-border-radius, 0px));

  box-shadow: 0 0 0 var(--sui-focus-ring-tight-width) var(--sui-focus-ring-color);

  margin: calc(var(--sui-focus-ring-tight-offset)*-1 - var(--sui-focus-ring-border-width, 0px)*var(--sui-focus-ring-border-width-recoup, 1));
}

.sui-accordion-header-root.sui-disabled {

  pointer-events: none;

  --tw-text-opacity: 1;

  color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-text-opacity)));
}

.sui-accordion-header-content {

  display: flex;

  min-width: var(--sui-spacing-0);

  align-items: center;
}

.sui-accordion-header-primary-text {

  font-size: var(--sui-typography-subtitle-mini-font-size);

  font-weight: var(--sui-typography-subtitle-mini-font-weight);

  line-height: var(--sui-typography-subtitle-mini-line-height);

  -webkit-text-decoration: var(--sui-typography-subtitle-mini-text-decoration);

          text-decoration: var(--sui-typography-subtitle-mini-text-decoration);

  text-transform: var(--sui-typography-subtitle-mini-text-transform);

  font-family: var(--sui-font-family);

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.sui-accordion-header-secondary-slot {

  display: flex;

  flex-shrink: 0;

  padding-left: var(--sui-spacing-2);
}

.sui-accordion-header-expand-icon {

  margin-left: var(--sui-spacing-4);
}

.sui-accordion-root {

    min-width: var(--sui-spacing-75);

    max-width: var(--sui-spacing-150)
}

.sui-accordion-root + .sui-accordion-root {

    margin-top: var(--sui-spacing-5)
}

.sui-accordion-panel-wrapper {

    overflow: hidden
}

.sui-accordion-panel-inner-wrapper {

    padding-top: var(--sui-spacing-1)
}

.sui-avatar-group-root {

    position: relative;

    height: var(--sui-spacing-9);

    width: var(--sui-spacing-9)
}

.sui-avatar-group-item::after {

    position: absolute;

    box-sizing: border-box;

    height: 100%;

    width: 100%;

    border-style: solid;

    --tw-border-opacity: 1;

    border-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-border-opacity)));

    border-radius: var(--sui-border-radius-full);

    --sui-focus-ring-border-radius: var(--sui-border-radius-full);

    border-width: var(--sui-border-width-1);

    --sui-focus-ring-border-width: var(--sui-border-width-1);

    --sui-focus-ring-border-width-recoup: 1;

    content: ''
}

.sui-avatar-group-item:nth-child(odd) {

    position: absolute;

    top: var(--sui-spacing-0);

    left: var(--sui-spacing-0)
}

.sui-avatar-group-item:nth-child(even) {

    position: absolute;

    bottom: var(--sui-spacing-0);

    right: var(--sui-spacing-0)
}

.sui-avatar-shape {

    pointer-events: auto;

    height: 100%;

    width: 100%;

    border-style: none;

    background-color: transparent;

    padding: var(--sui-spacing-0);

    --sui-focus-ring-border-width-recoup: 0;
}

.sui-avatar-content {

    position: relative;

    display: flex;

    -webkit-user-select: none;

            user-select: none;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    height: 100%;

    width: 100%;

    line-height: 1;
}

.sui-avatar-default {

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));

    --sui-squircle-bg-color: var(--sui-colors-neutral-b3);
    --sui-squircle-bg-color-hover: var(--sui-colors-neutral-b3);
    --sui-squircle-bg-color-active: var(--sui-colors-neutral-b3);
}

.sui-avatar-primary {

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-high-contrast-b0), calc(var(--s-neutral-high-contrast-b0-opacity, 1) * var(--tw-text-opacity)));

    --sui-squircle-bg-color: var(--sui-colors-primary-b);
    --sui-squircle-bg-color-hover: var(--sui-colors-primary-b);
    --sui-squircle-bg-color-active: var(--sui-colors-primary-b);
}

.sui-avatar-circle {

    outline: 2px solid transparent;

    outline-offset: 2px;

    border-radius: var(--sui-border-radius-full);

    --sui-focus-ring-border-radius: var(--sui-border-radius-full);
}

.sui-avatar-circle-content {

    border-radius: var(--sui-border-radius-full);

    --sui-focus-ring-border-radius: var(--sui-border-radius-full);
}

.sui-avatar-circle-default {

    --tw-bg-opacity: 1;

    background-color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-avatar-circle-primary {

    --tw-bg-opacity: 1;

    background-color: rgb(var(--s-primary-b), calc(var(--s-primary-b-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-avatar-circle:focus-visible,
    .sui-avatar-circle.sui-focus-visible {

    --sui-focus-ring-color: var(--sui-focus-ring-normal-color);
}

.sui-avatar-circle:focus-visible::after,
    .sui-avatar-circle.sui-focus-visible::after {

    pointer-events: none;

    content: '';

    position: absolute;

    inset: 0;

    border-radius: calc(var(--sui-focus-ring-normal-offset) + var(--sui-focus-ring-border-radius, 0px));

    box-shadow: 0 0 0 var(--sui-focus-ring-normal-width) var(--sui-focus-ring-color);

    margin: calc(var(--sui-focus-ring-normal-offset)*-1 - var(--sui-focus-ring-border-width, 0px)*var(--sui-focus-ring-border-width-recoup, 1));
}

.sui-avatar-img {

    height: 100%;

    width: 100%;

    object-fit: cover;

    text-align: center;

    /* Hide alt text. */

    color: transparent;

    /* Hide the image broken icon, only works on Chrome. */

    text-indent: 10000px;
}

.sui-avatar-indicator {

    pointer-events: auto;

    z-index: 10;
}

.sui-avatar-root {

    pointer-events: none;

    flex-shrink: 0;
}

.sui-avatar-root.sui-disabled {

    opacity: 0.35;
}

.sui-avatar-xxlarge-content, .sui-avatar-xlarge-content {

    font-size: var(--sui-typography-display2-font-size);

    font-weight: var(--sui-typography-display2-font-weight);

    letter-spacing: var(--sui-typography-display2-letter-spacing);

    line-height: var(--sui-typography-display2-line-height);

    -webkit-text-decoration: var(--sui-typography-display2-text-decoration);

            text-decoration: var(--sui-typography-display2-text-decoration);

    text-transform: var(--sui-typography-display2-text-transform);

    font-family: var(--sui-font-family);
}

.sui-avatar-xxlarge {

    height: var(--sui-spacing-16);

    width: var(--sui-spacing-16);
}

.sui-avatar-xlarge {

    height: var(--sui-spacing-12);

    width: var(--sui-spacing-12);
}

.sui-avatar-large {

    height: var(--sui-spacing-9);

    width: var(--sui-spacing-9);
}

.sui-avatar-large-content {

    font-size: var(--sui-typography-subtitle-font-size);

    font-weight: var(--sui-typography-subtitle-font-weight);

    line-height: var(--sui-typography-subtitle-line-height);

    -webkit-text-decoration: var(--sui-typography-subtitle-text-decoration);

            text-decoration: var(--sui-typography-subtitle-text-decoration);

    text-transform: var(--sui-typography-subtitle-text-transform);

    font-family: var(--sui-font-family);
}

.sui-avatar-medium {

    height: var(--sui-spacing-8);

    width: var(--sui-spacing-8);
}

.sui-avatar-medium-content {

    font-size: var(--sui-typography-subtitle-mini-font-size);

    font-weight: var(--sui-typography-subtitle-mini-font-weight);

    line-height: var(--sui-typography-subtitle-mini-line-height);

    -webkit-text-decoration: var(--sui-typography-subtitle-mini-text-decoration);

            text-decoration: var(--sui-typography-subtitle-mini-text-decoration);

    text-transform: var(--sui-typography-subtitle-mini-text-transform);

    font-family: var(--sui-font-family);
}

.sui-avatar-small {

    height: var(--sui-spacing-6);

    width: var(--sui-spacing-6);
}

.sui-avatar-small-content {

    font-size: var(--sui-typography-descriptor-mini-font-size);

    font-weight: var(--sui-typography-descriptor-mini-font-weight);

    line-height: var(--sui-typography-descriptor-mini-line-height);

    -webkit-text-decoration: var(--sui-typography-descriptor-mini-text-decoration);

            text-decoration: var(--sui-typography-descriptor-mini-text-decoration);

    text-transform: var(--sui-typography-descriptor-mini-text-transform);

    font-family: var(--sui-font-family);
}

.sui-avatar-xsmall-content, .sui-avatar-xxsmall-content {

    font-size: var(--sui-typography-detail-font-size);

    font-weight: var(--sui-typography-detail-font-weight);

    line-height: var(--sui-typography-detail-line-height);

    -webkit-text-decoration: var(--sui-typography-detail-text-decoration);

            text-decoration: var(--sui-typography-detail-text-decoration);

    text-transform: var(--sui-typography-detail-text-transform);

    font-family: var(--sui-font-family);
}

.sui-avatar-xsmall {

    height: var(--sui-spacing-5);

    width: var(--sui-spacing-5);
}

.sui-avatar-xxsmall {

    height: var(--sui-spacing-4);

    width: var(--sui-spacing-4);
}

.sui-avatar-clickable-shape,
    .sui-avatar-clickable-indicator {

    cursor: pointer;
}

.sui-avatar-clickable-hover-tint {

    position: absolute;

    left: var(--sui-spacing-0);

    right: var(--sui-spacing-0);

    top: var(--sui-spacing-0);

    bottom: var(--sui-spacing-0);

    height: 100%;

    width: 100%;

    opacity: 0;

    border-radius: var(--sui-border-radius-full);

    --sui-focus-ring-border-radius: var(--sui-border-radius-full);
}

@media (prefers-reduced-motion: no-preference) {
    .sui-avatar-clickable-hover-tint {

        transition-duration: var(--sui-transition-neutral-01-fast-transition-duration);

        transition-timing-function: var(--sui-transition-neutral-01-fast-transition-timing-function);
    }
}

.sui-avatar-clickable-hover-tint-default-circle,
      .sui-avatar-clickable-hover-tint-primary-circle {

    background-color: var(--sui-colors-neutral-b0-t30);
}

.sui-avatar-clickable-hover-tint {

      --sui-squircle-bg-color: var(--sui-colors-neutral-b0-t30);
      --sui-squircle-border-color: var(--sui-colors-neutral-b0-t0);
}

@media (hover: hover) {
  .sui-avatar-clickable:hover .sui-avatar-hover-tint {

        opacity: 0.5;
    }
}

.sui-avatar-clickable.sui-active .sui-avatar-hover-tint, .sui-avatar-clickable:active .sui-avatar-hover-tint {

    opacity: 1;
}

.sui-dial-pad-button-root .sui-icon {
      position: absolute;
      inset: var(--sui-spacing-0);
      margin: auto;
      aspect-ratio: 1 / 1;
}

.sui-dial-pad-button-root svg {
      height: 100%;
      width: 100%;
    }

.sui-dial-pad-button-root svg path:first-child {
      fill: rgb(var(--s-neutral-b0), var(--s-neutral-b0-opacity, 1));
}

.sui-dial-pad-button-root svg path:nth-child(2) {
      fill: rgb(var(--s-neutral-b2), var(--s-neutral-b2-opacity, 1));
}

.sui-dial-pad-button-medium .sui-icon {
      width: 32.25%;
    }

.sui-dial-pad-button-large .sui-icon {
      width: 64.5%;
    }

.sui-dial-pad-button-label-container {
      font-size: var(--sui-typography-descriptor-mini-font-size);
      font-weight: var(--sui-typography-descriptor-mini-font-weight);
      line-height: var(--sui-typography-descriptor-mini-line-height);
      -webkit-text-decoration: var(--sui-typography-descriptor-mini-text-decoration);
              text-decoration: var(--sui-typography-descriptor-mini-text-decoration);
      text-transform: var(--sui-typography-descriptor-mini-text-transform);
      font-family: var(--sui-font-family);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--sui-spacing-1);
}

.sui-dial-pad-root {
    display: inline-grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sui-spacing-4)
}

.sui-dial-pad-auto-size {
    display: flex;
    aspect-ratio: 224/304;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 7.145%
}

.sui-dial-pad-auto-size .sui-dial-pad-button {
    aspect-ratio: 1 / 1;
    height: auto;
    width: 28.57%
}

.sui-bottom-navigation-item-button {

    --sui-squircle-bg-color: transparent;

    --sui-squircle-bg-color-hover: transparent
}

.sui-bottom-navigation-item-button.sui-expanded {

    --s-squircle-bg-color-opacity: 1;

    --sui-squircle-bg-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--s-squircle-bg-color-opacity)))
}

.sui-bottom-navigation-item-activated {

    --tw-text-opacity: 1;

    color: rgb(var(--s-cobranding-f), calc(var(--s-cobranding-f-opacity, 1) * var(--tw-text-opacity)))
}

.sui-bottom-navigation-group-root {

  display: grid;

  padding-left: var(--sui-spacing-5);

  padding-right: var(--sui-spacing-5);

  grid-template-columns: 1fr 1fr 1fr 1fr 1fr var(--sui-spacing-6)
}

.sui-bottom-navigation-root {

    min-width: var(--sui-spacing-75);

    max-width: var(--sui-spacing-95\.75);

    overflow: hidden;

    --tw-bg-opacity: 1;

    background-color: rgb(var(--s-neutral-b5), calc(var(--s-neutral-b5-opacity, 1) * var(--tw-bg-opacity)))
}

.sui-bottom-navigation-full-width {

    min-width: 100%;

    max-width: 100%
}

.sui-bottom-navigation-item-wrapper {

    margin-top: var(--sui-spacing-4);

    margin-bottom: var(--sui-spacing-4);

    display: flex;

    height: -moz-fit-content;

    height: fit-content;

    align-items: center;

    justify-content: flex-start
}

.sui-bottom-navigation-description {

    font-size: var(--sui-typography-subtitle-mini-font-size);

    font-weight: var(--sui-typography-subtitle-mini-font-weight);

    line-height: var(--sui-typography-subtitle-mini-line-height);

    -webkit-text-decoration: var(--sui-typography-subtitle-mini-text-decoration);

            text-decoration: var(--sui-typography-subtitle-mini-text-decoration);

    text-transform: var(--sui-typography-subtitle-mini-text-transform);

    font-family: var(--sui-font-family);

    display: flex;

    height: var(--sui-spacing-14);

    align-items: center;

    border-color: var(--sui-colors-neutral-b0-t10);

    padding-left: var(--sui-spacing-5);

    padding-right: var(--sui-spacing-5);

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));

    border-top-width: var(--sui-border-width-1)
}

.sui-bottom-navigation-empty-slot {

    height: var(--sui-spacing-6);

    width: var(--sui-spacing-6);

    --sui-squircle-bg-color: transparent
}

@media (prefers-reduced-motion: no-preference) {

    .sui-bottom-navigation-empty-slot path {

        transition-property: none
    }
}

.sui-bottom-navigation-empty-slot path.sui-expanded {

    background-color: inherit
}

.sui-bottom-navigation-empty-slot.sui-expanded {

    --s-squircle-bg-color-opacity: 1;

    --sui-squircle-bg-color: rgb(var(--s-neutral-b4), calc(var(--s-neutral-b4-opacity, 1) * var(--s-squircle-bg-color-opacity)))
}

.sui-filter-button-root {

  font-size: var(--sui-typography-label-semi-bold-font-size);

  font-weight: var(--sui-typography-label-semi-bold-font-weight);

  letter-spacing: var(--sui-typography-label-semi-bold-letter-spacing);

  line-height: var(--sui-typography-label-semi-bold-line-height);

  -webkit-text-decoration: var(--sui-typography-label-semi-bold-text-decoration);

          text-decoration: var(--sui-typography-label-semi-bold-text-decoration);

  text-transform: var(--sui-typography-label-semi-bold-text-transform);

  font-family: var(--sui-font-family);

  position: relative;

  height: var(--sui-spacing-6);

  max-width: var(--sui-spacing-22);

  cursor: pointer;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  padding-left: var(--sui-spacing-1);

  padding-right: var(--sui-spacing-1);

  --tw-text-opacity: 1;

  color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-text-opacity)));

  outline: 2px solid transparent;

  outline-offset: 2px;

  border-style: none;

  background-color: transparent;

  border-radius: var(--sui-border-radius-xs);

  --sui-focus-ring-border-radius: var(--sui-border-radius-xs);

  --sui-focus-ring-border-width-recoup: 0;
}

.sui-filter-button-root:focus-visible,
  .sui-filter-button-root.sui-focus-visible {

  --sui-focus-ring-color: var(--sui-focus-ring-inset-color);
}

.sui-filter-button-root:focus-visible::after,
  .sui-filter-button-root.sui-focus-visible::after {

  pointer-events: none;

  content: '';

  position: absolute;

  inset: 0;

  border-radius: var(--sui-focus-ring-border-radius, 0px);

  box-shadow: inset 0 0 0 var(--sui-focus-ring-inset-width) var(--sui-focus-ring-color);
}

.sui-filter-button-root.sui-selected {

  --tw-text-opacity: 1;

  color: rgb(var(--s-cobranding-f), calc(var(--s-cobranding-f-opacity, 1) * var(--tw-text-opacity)));
}

@media (hover: hover) {

  .sui-filter-button-root:hover {

    --tw-text-opacity: 1;

    color: rgb(var(--s-cobranding-high-contrast), calc(var(--s-cobranding-high-contrast-opacity, 1) * var(--tw-text-opacity)));
  }
}

.sui-filter-button-root:active {

  --tw-text-opacity: 1;

  color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));
}

.sui-filter-button-root.sui-disabled {

  --tw-text-opacity: 1;

  color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-text-opacity)));
}

.sui-single-filter-root {

    display: flex
}

.sui-single-filter-more {

    margin-left: var(--sui-spacing-1)
}

.sui-step-icon-root {display: flex;height: var(--sui-spacing-6);width: var(--sui-spacing-6);align-items: center;justify-content: center;--tw-bg-opacity: 1;background-color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-bg-opacity)));--tw-text-opacity: 1;color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--tw-text-opacity)));border-radius: var(--sui-border-radius-full);--sui-focus-ring-border-radius: var(--sui-border-radius-full)
}

@media (prefers-reduced-motion: no-preference) {.sui-step-icon-root {transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;transition-duration: var(--sui-transition-neutral-01-fast-transition-duration);transition-timing-function: var(--sui-transition-neutral-01-fast-transition-timing-function)
    }
}

.sui-step-icon-root {position: relative;z-index: 10
}

.sui-step-icon-root.sui-completed,
.sui-step-icon-current {--tw-bg-opacity: 1;background-color: rgb(var(--s-primary-b), calc(var(--s-primary-b-opacity, 1) * var(--tw-bg-opacity)));--tw-text-opacity: 1;color: rgb(var(--s-neutral-high-contrast-b0), calc(var(--s-neutral-high-contrast-b0-opacity, 1) * var(--tw-text-opacity)))
}

.sui-step-icon-root.sui-disabled {--tw-bg-opacity: 1;background-color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-bg-opacity)))
}

.sui-step-icon-error {background-color: transparent;--tw-text-opacity: 1;color: rgb(var(--s-danger-f), calc(var(--s-danger-f-opacity, 1) * var(--tw-text-opacity)))
}

.sui-step-icon-error.sui-disabled {--tw-text-opacity: 1;color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-text-opacity)))
}

.sui-step-icon-outlined {box-sizing: border-box;border-style: solid;--tw-border-opacity: 1;border-color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-border-opacity)));background-color: transparent;--tw-text-opacity: 1;color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-text-opacity)));border-width: var(--sui-border-width-2);--sui-focus-ring-border-width: var(--sui-border-width-2);--sui-focus-ring-border-width-recoup: 1
}

.sui-step-icon-outlined-current {--tw-border-opacity: 1;border-color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-border-opacity)));--tw-bg-opacity: 1;background-color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--tw-bg-opacity)));--tw-text-opacity: 1;color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)))
}

.sui-step-icon-outlined-error {border-style: none;background-color: transparent;--tw-text-opacity: 1;color: rgb(var(--s-danger-f), calc(var(--s-danger-f-opacity, 1) * var(--tw-text-opacity)));--sui-focus-ring-border-width-recoup: 0
}

.sui-step-icon-outlined.sui-completed {border-style: none;background-color: transparent;--tw-text-opacity: 1;color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));--sui-focus-ring-border-width-recoup: 0
}

.sui-step-icon-outlined.sui-disabled {--tw-border-opacity: 1;border-color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-border-opacity)));background-color: transparent;--tw-text-opacity: 1;color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-text-opacity)))
}

.sui-step-icon-text {font-size: var(--sui-typography-subtitle-mini-font-size);font-weight: var(--sui-typography-subtitle-mini-font-weight);line-height: var(--sui-typography-subtitle-mini-line-height);-webkit-text-decoration: var(--sui-typography-subtitle-mini-text-decoration);text-decoration: var(--sui-typography-subtitle-mini-text-decoration);text-transform: var(--sui-typography-subtitle-mini-text-transform);font-family: var(--sui-font-family)
}

.sui-step-icon-text-current {font-size: var(--sui-typography-subtitle-bold-font-size);font-weight: var(--sui-typography-subtitle-bold-font-weight);line-height: var(--sui-typography-subtitle-bold-line-height);-webkit-text-decoration: var(--sui-typography-subtitle-bold-text-decoration);text-decoration: var(--sui-typography-subtitle-bold-text-decoration);text-transform: var(--sui-typography-subtitle-bold-text-transform);font-family: var(--sui-font-family)
}

.sui-step-label-root {
    display: flex;
    align-items: center
}

.sui-step-label-label {
    font-size: var(--sui-typography-subtitle-font-size);
    font-weight: var(--sui-typography-subtitle-font-weight);
    line-height: var(--sui-typography-subtitle-line-height);
    -webkit-text-decoration: var(--sui-typography-subtitle-text-decoration);
            text-decoration: var(--sui-typography-subtitle-text-decoration);
    text-transform: var(--sui-typography-subtitle-text-transform);
    font-family: var(--sui-font-family);
    display: block
}

@media (prefers-reduced-motion: no-preference) {
    .sui-step-label-label {
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
        transition-duration: var(--sui-transition-neutral-01-fast-transition-duration);
        transition-timing-function: var(--sui-transition-neutral-01-fast-transition-timing-function)
    }
}

.sui-step-label-label.sui-completed {
    --tw-text-opacity: 1;
    color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)))
}

.sui-step-label-label.sui-disabled {
    --tw-text-opacity: 1;
    color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-text-opacity)))
}

.sui-step-label-icon-container {
    display: flex;
    flex-shrink: 0
}

.sui-step-label-label-container {
    font-size: var(--sui-typography-descriptor-font-size);
    font-weight: var(--sui-typography-descriptor-font-weight);
    line-height: var(--sui-typography-descriptor-line-height);
    -webkit-text-decoration: var(--sui-typography-descriptor-text-decoration);
            text-decoration: var(--sui-typography-descriptor-text-decoration);
    text-transform: var(--sui-typography-descriptor-text-transform);
    font-family: var(--sui-font-family);
    width: 100%;
    --tw-text-opacity: 1;
    color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-text-opacity)))
}

@media (prefers-reduced-motion: no-preference) {
    .sui-step-label-label-container {
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
        transition-duration: var(--sui-transition-neutral-01-fast-transition-duration);
        transition-timing-function: var(--sui-transition-neutral-01-fast-transition-timing-function)
    }
}

.sui-step-label-label-container.sui-disabled {
    --tw-text-opacity: 1;
    color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-text-opacity)))
}

.sui-step-label-horizontal {
    flex-direction: column
}

.sui-step-label-horizontal-label {
    margin-top: var(--sui-spacing-3)
}

.sui-step-label-horizontal-label-container {
    text-align: center
}

.sui-step-label-vertical {
    position: relative;
    text-align: left
}

.sui-step-label-vertical-icon-container {
    padding-right: var(--sui-spacing-3)
}

.sui-step-label-current-label {
    --tw-text-opacity: 1;
    color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));
    font-size: var(--sui-typography-subtitle-bold-font-size);
    font-weight: var(--sui-typography-subtitle-bold-font-weight);
    line-height: var(--sui-typography-subtitle-bold-line-height);
    -webkit-text-decoration: var(--sui-typography-subtitle-bold-text-decoration);
            text-decoration: var(--sui-typography-subtitle-bold-text-decoration);
    text-transform: var(--sui-typography-subtitle-bold-text-transform);
    font-family: var(--sui-font-family)
}

.sui-step-label-error-label,
    .sui-step-label-error-label-container {
    --tw-text-opacity: 1;
    color: rgb(var(--s-danger-f), calc(var(--s-danger-f-opacity, 1) * var(--tw-text-opacity)))
}

.sui-step-label.sui-disabled {
    cursor: default
}

.sui-step-button-root {position: relative;display: flex;cursor: pointer;-webkit-user-select: none;user-select: none;border-style: none;background-color: transparent;vertical-align: middle;outline: 2px solid transparent;outline-offset: 2px;--sui-focus-ring-border-width-recoup: 0;border-radius: var(--sui-border-radius-sm);--sui-focus-ring-border-radius: var(--sui-border-radius-sm);
}

@media (prefers-reduced-motion: no-preference) {.sui-step-button-root {transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;transition-duration: var(--sui-transition-neutral-01-fast-transition-duration);transition-timing-function: var(--sui-transition-neutral-01-fast-transition-timing-function);
  }
}

@media (hover: hover) {

  .sui-step-button-root:hover {--tw-bg-opacity: 1;background-color: rgb(var(--s-neutral-b5), calc(var(--s-neutral-b5-opacity, 1) * var(--tw-bg-opacity)));
  }
}

.sui-step-button-root.sui-active,
  .sui-step-button-root:active {--tw-bg-opacity: 1;background-color: rgb(var(--s-neutral-b4), calc(var(--s-neutral-b4-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-step-button-root:focus-visible,
  .sui-step-button-root.sui-focus-visible {--sui-focus-ring-color: var(--sui-focus-ring-inset-color);
}

.sui-step-button-root:focus-visible::after,
  .sui-step-button-root.sui-focus-visible::after {pointer-events: none;content: '';position: absolute;inset: 0;border-radius: var(--sui-focus-ring-border-radius, 0px);box-shadow: inset 0 0 0 var(--sui-focus-ring-inset-width) var(--sui-focus-ring-color);
}

.sui-step-button-vertical {margin-left: calc(var(--sui-spacing-2) * -1);margin-right: calc(var(--sui-spacing-2) * -1);margin-top: calc(var(--sui-spacing-2) * -1);margin-bottom: calc(var(--sui-spacing-2) * -1);align-items: center;padding-left: var(--sui-spacing-2);padding-right: var(--sui-spacing-2);padding-top: var(--sui-spacing-2);padding-bottom: var(--sui-spacing-2);
}

.sui-step-button-horizontal {margin-top: calc(var(--sui-spacing-3) * -1);margin-bottom: calc(var(--sui-spacing-3) * -1);justify-content: center;padding: var(--sui-spacing-3);
}

.sui-step-button-fixed-width {flex: 1 1 0%;
}

.sui-step-button-highlighted {--tw-bg-opacity: 1;background-color: rgb(var(--s-neutral-b5), calc(var(--s-neutral-b5-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-step-button-hide-connector {min-height: var(--sui-spacing-11);
}

.sui-step-content-root {

    font-size: var(--sui-typography-descriptor-font-size);

    font-weight: var(--sui-typography-descriptor-font-weight);

    line-height: var(--sui-typography-descriptor-line-height);

    -webkit-text-decoration: var(--sui-typography-descriptor-text-decoration);

            text-decoration: var(--sui-typography-descriptor-text-decoration);

    text-transform: var(--sui-typography-descriptor-text-transform);

    font-family: var(--sui-font-family);

    position: relative;

    padding-left: var(--sui-spacing-3);

    padding-right: var(--sui-spacing-3)
}

.sui-step-content-wrapper {

    z-index: 10;

    padding-left: var(--sui-spacing-6)
}

.sui-step-content-wrapper .sui-step-connector-root {

    top: var(--sui-spacing-4);

    bottom: calc(var(--sui-spacing-4) * -1);

    left: var(--sui-spacing-0)
}

.sui-step-content-last .sui-step-connector-root {

    display: none
}

.sui-step-connector-root {

    z-index: 10;

    flex-shrink: 1;

    flex-grow: 1
}

.sui-step-connector-horizontal {

    position: relative;

    top: var(--sui-spacing-9);

    flex: 1 1 auto
}

.sui-step-label .sui-step-connector-horizontal:last-child {

    position: absolute;

    right: var(--sui-spacing-0);

    left: calc(50% + var(--sui-spacing-4))
}

.sui-step-label .sui-step-connector-horizontal:first-child {

    position: absolute;

    left: var(--sui-spacing-0);

    right: calc(50% + var(--sui-spacing-4))
}

.sui-step-label .sui-step-connector-vertical:last-child {

    bottom: calc(var(--sui-spacing-4) * -1);

    top: calc(50% + var(--sui-spacing-4))
}

.sui-step-label .sui-step-connector-vertical:first-child {

    top: calc(var(--sui-spacing-4) * -1);

    bottom: calc(50% + var(--sui-spacing-4))
}

.sui-step-connector-vertical {

    position: absolute;

    margin-left: var(--sui-spacing-3);

    display: flex
}

.sui-step-connector-line {

    display: block;

    border-color: var(--sui-colors-neutral-b0-t10)
}

.sui-step-connector-line-horizontal {

    border-top-width: var(--sui-border-width-1);

  border-top-style: solid
}

.sui-step-connector-line-vertical {

    min-height: var(--sui-spacing-3);

    border-left-width: var(--sui-border-width-1);

  border-left-style: solid
}

.sui-step-button .sui-step-connector-horizontal {

    top: var(--sui-spacing-6)
}

.sui-step-button .sui-step-connector-horizontal:last-child {

    right: calc(var(--sui-spacing-1) * -1)
}

.sui-step-button .sui-step-connector-horizontal:first-child {

    left: calc(var(--sui-spacing-1) * -1)
}

.sui-step-root {

  position: relative;

  margin: var(--sui-spacing-0);

  display: flex;

  list-style-type: none;

  padding-top: var(--sui-spacing-0);

  padding-bottom: var(--sui-spacing-0);
}

.sui-step-horizontal {

  flex-direction: row;

  justify-content: center;

  padding-left: var(--sui-spacing-4);

  padding-right: var(--sui-spacing-4);

  padding-top: var(--sui-spacing-6);

  padding-bottom: var(--sui-spacing-6);
}

.sui-step-horizontal:has(.sui-step-button) {

  padding-left: var(--sui-spacing-1);

  padding-right: var(--sui-spacing-1);
}

.sui-step-horizontal {

  text-wrap: nowrap;
}

.sui-step-vertical {

  flex-direction: column;

  padding-top: var(--sui-spacing-4);

  padding-bottom: var(--sui-spacing-4);
}

.sui-step-vertical-hide-connector {

  padding-top: var(--sui-spacing-3);

  padding-bottom: var(--sui-spacing-3);
}

.sui-step-fixed-width {

  flex: 1 1 0%;

  text-wrap: unset;
}

.sui-stepper-root {

    position: relative;

    margin: var(--sui-spacing-0);

    box-sizing: border-box;

    display: flex;

    width: -moz-fit-content;

    width: fit-content;

    min-width: 100%;

    list-style-type: none;

    overflow: auto;

    padding: var(--sui-spacing-0)
}

.sui-stepper-horizontal {

    flex-direction: row;

    align-items: flex-start;

    justify-content: space-between
}

.sui-stepper-vertical {

    flex-direction: column;

    overflow: hidden;

    padding-left: var(--sui-spacing-3);

    padding-right: var(--sui-spacing-3)
}

.sui-stepper-fixed-step-width {

    width: 100%
}

.sui-table-body-root {
    display: table-row-group
}

.sui-table-cell-root {
  font-size: var(--sui-typography-descriptor-font-size);
  font-weight: var(--sui-typography-descriptor-font-weight);
  line-height: var(--sui-typography-descriptor-line-height);
  -webkit-text-decoration: var(--sui-typography-descriptor-text-decoration);
          text-decoration: var(--sui-typography-descriptor-text-decoration);
  text-transform: var(--sui-typography-descriptor-text-transform);
  font-family: var(--sui-font-family);
  display: table-cell;
  height: var(--sui-spacing-10);
  padding-left: var(--sui-spacing-2);
  text-align: left;
  vertical-align: middle;
  --tw-text-opacity: 1;
  color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));
  border-style: solid;
  border-bottom-color: var(--sui-colors-neutral-b0-t10);
  border-width: var(--sui-border-width-0);
  --sui-focus-ring-border-width: var(--sui-border-width-0);
  border-bottom-width: var(--sui-border-width-1);
  --sui-focus-ring-border-width-recoup: 1;
}

.sui-table-cell-root:first-child:not(.sui-table-cell-padding-checkbox) {
  padding-left: var(--sui-spacing-4);
}

.sui-table-cell-root:last-child {
  padding-right: var(--sui-spacing-4);
}

/* variant */

.sui-table-cell-head {
  font-size: var(--sui-typography-descriptor-mini-semi-bold-font-size);
  font-weight: var(--sui-typography-descriptor-mini-semi-bold-font-weight);
  line-height: var(--sui-typography-descriptor-mini-semi-bold-line-height);
  -webkit-text-decoration: var(--sui-typography-descriptor-mini-semi-bold-text-decoration);
          text-decoration: var(--sui-typography-descriptor-mini-semi-bold-text-decoration);
  text-transform: var(--sui-typography-descriptor-mini-semi-bold-text-transform);
  font-family: var(--sui-font-family);
  vertical-align: middle;
  border-bottom-width: var(--sui-border-width-0);
}

.sui-table-cell-sortable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

@media (hover: hover) {
  .sui-table-cell-sortable:hover .sui-table-cell-sort-icon {
    display: block;
    opacity: 0.5;
  }
}

@media (hover: hover) {
  .sui-table-cell-sortable:hover .sui-table-cell-content-sortable {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--s-neutral-b5), calc(var(--s-neutral-b5-opacity, 1) * var(--tw-bg-opacity)));
  }
}

.sui-table-cell-sortable:active .sui-table-cell-content-sortable {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-table-cell-sortable:focus-visible .sui-table-cell-content-sortable, .sui-table-cell-sortable.sui-focus-visible .sui-table-cell-content-sortable {
  --sui-focus-ring-color: var(--sui-focus-ring-inset-color);
}

.sui-table-cell-sortable:focus-visible .sui-table-cell-content-sortable::after, .sui-table-cell-sortable.sui-focus-visible .sui-table-cell-content-sortable::after {
  pointer-events: none;
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--sui-focus-ring-border-radius, 0px);
  box-shadow: inset 0 0 0 var(--sui-focus-ring-inset-width) var(--sui-focus-ring-color);
}

.sui-table-cell-sortable:focus-visible .sui-table-cell-sort-icon, .sui-table-cell-sortable.sui-focus-visible .sui-table-cell-sort-icon {
  opacity: 0.5;
}

/* padding */

.sui-table-cell-padding-checkbox {
    /* prevent the checkbox column from growing */
    box-sizing: border-box;
    width: var(--sui-spacing-8);
    padding-left: var(--sui-spacing-2);
    padding-right: var(--sui-spacing-1);
  }

.sui-table-cell-padding-none {
  padding: var(--sui-spacing-0);
}

/* align */

.sui-table-cell-align-left {
  text-align: left;
}

.sui-table-cell-align-center {
  text-align: center;
}

.sui-table-cell-align-right {
  flex-direction: row-reverse;
  text-align: right;
}

.sui-table-cell-align-justify {
  text-align: justify;
}

/* sticky header with default bg */

.sui-table-cell-sticky-header-default-bg {
  border-bottom-width: var(--sui-border-width-1);
}

.sui-table-cell-content {
  position: relative;
  margin-left: calc(var(--sui-spacing-2) * -1);
  display: inline-flex;
  align-items: center;
  gap: var(--sui-spacing-1);
  padding-left: var(--sui-spacing-2);
  padding-right: var(--sui-spacing-2);
  padding-top: var(--sui-spacing-2);
  padding-bottom: var(--sui-spacing-2);
  border-radius: var(--sui-border-radius-sm);
  --sui-focus-ring-border-radius: var(--sui-border-radius-sm);
}

@media (prefers-reduced-motion: no-preference) {

  .sui-table-cell-content {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
}

.sui-table-cell-content {

    width: calc(
      100% - var(--sui-spacing-2)
    ); /* We need to factor in the -2px margin when calculating the width */
  }

.sui-table-cell-content-padding-checkbox {
    /* ensures the checkbox is correctly centered */
    margin: var(--sui-spacing-0);
    display: flex;
    width: auto;
    padding: var(--sui-spacing-0);
  }

.sui-table-cell-content-align-center {
  margin-left: var(--sui-spacing-0);
  margin-right: var(--sui-spacing-0);
  justify-content: center;
}

.sui-table-cell-content-align-right {
  margin-right: calc(var(--sui-spacing-2) * -1);
  flex-direction: row-reverse;
}

.sui-table-cell-content-align-justify {
  margin-left: var(--sui-spacing-0);
  margin-right: var(--sui-spacing-0);
}

.sui-table-cell-sorted:focus-visible .sui-table-cell-sort-icon, .sui-table-cell-sorted.sui-focus-visible .sui-table-cell-sort-icon {
  display: block;
  opacity: 1;
}

@media (hover: hover) {
  .sui-table-cell-sorted:hover .sui-table-cell-sort-icon {
    display: block;
    opacity: 1;
  }
}

.sui-table-cell-sort-icon {
  vertical-align: middle;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {

  .sui-table-cell-sort-icon {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
}

.sui-table-cell-sort-indicator {
  opacity: 0.3;
}

.sui-table-cell-sort-icon-sorted {
  display: block;
  opacity: 1;
}

/* stylelint-disable prettier/prettier */

.sui-table-head-root {
    box-sizing: border-box;
    display: table-header-group;
    border-style: solid;
    border-color: var(--sui-colors-neutral-b0-t10);
    background-color: inherit;
    border-width: var(--sui-border-width-0);
    --sui-focus-ring-border-width: var(--sui-border-width-0);
    border-bottom-width: var(--sui-border-width-1);
    --sui-focus-ring-border-width-recoup: 1
}

.sui-table-head-background {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--s-neutral-b4), calc(var(--s-neutral-b4-opacity, 1) * var(--tw-bg-opacity)))
}

.sui-table-head-sticky {
    position: sticky;
    top: var(--sui-spacing-0);
    z-index: 10
}

.sui-table-row-root {

  display: table-row;

  vertical-align: middle;

  /* We disable the focus ring for mouse, touch and keyboard users. */

  outline-width: 0px
}

@media (hover: hover) {

.sui-table-row-clickable:hover, .sui-table-row-hoverable:hover {

    --tw-bg-opacity: 1;

    background-color: rgb(var(--s-neutral-b5), calc(var(--s-neutral-b5-opacity, 1) * var(--tw-bg-opacity)))
  }
}

.sui-table-row-clickable {

  cursor: pointer
}

.sui-table-row-clickable.sui-active,
  .sui-table-row-clickable:active {

  background-color: var(--sui-colors-neutral-b4-t50)
}

@media (hover: hover) {

.sui-table-row-clickable.sui-selected:hover {

    --tw-bg-opacity: 1;

    background-color: rgb(var(--s-neutral-b4), calc(var(--s-neutral-b4-opacity, 1) * var(--tw-bg-opacity)))
  }
}

.sui-table-row-body.sui-selected {

  background-color: var(--sui-colors-neutral-b4-t50)
}

.sui-table-row-body:last-child .sui-table-cell {

  border-bottom-width: var(--sui-border-width-0)
}

.sui-table-pagination-content {

    display: flex;

    flex-direction: row;

    align-items: center;

    gap: var(--sui-spacing-5)
}

.sui-table-pagination-rows-per-page-controls {

    display: flex;

    flex-direction: row;

    align-items: center;

    gap: var(--sui-spacing-2)
}

.sui-table-pagination-rows-per-page-label {

    font-size: var(--sui-typography-main-text-font-size);

    font-weight: var(--sui-typography-main-text-font-weight);

    line-height: var(--sui-typography-main-text-line-height);

    -webkit-text-decoration: var(--sui-typography-main-text-text-decoration);

            text-decoration: var(--sui-typography-main-text-text-decoration);

    text-transform: var(--sui-typography-main-text-text-transform);

    font-family: var(--sui-font-family);

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)))
}

.sui-table-pagination-current-page-controls {

    display: flex;

    flex-direction: row;

    gap: var(--sui-spacing-1)
}

.sui-table-pagination-range-container {

    display: flex;

    min-width: var(--sui-spacing-16);

    flex-direction: row;

    align-items: center;

    justify-content: flex-end;

    gap: var(--sui-spacing-1)
}

.sui-table-pagination-range-container > span {

    font-size: var(--sui-typography-main-text-font-size);

    font-weight: var(--sui-typography-main-text-font-weight);

    line-height: var(--sui-typography-main-text-line-height);

    -webkit-text-decoration: var(--sui-typography-main-text-text-decoration);

            text-decoration: var(--sui-typography-main-text-text-decoration);

    text-transform: var(--sui-typography-main-text-text-transform);

    font-family: var(--sui-font-family);

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)))
}

.sui-table-footer-root {

    display: table-footer-group
}

.sui-table-footer-root > tr > td {

    border-style: solid;

    border-top-color: var(--sui-colors-neutral-b0-t10);

    border-width: var(--sui-border-width-0);

    --sui-focus-ring-border-width: var(--sui-border-width-0);

    border-top-width: var(--sui-border-width-1);

    --sui-focus-ring-border-width-recoup: 1
}

.sui-table-footer-content {

    box-sizing: border-box;

    display: flex;

    min-height: var(--sui-spacing-10);

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    padding-left: var(--sui-spacing-3\.5);

    padding-right: var(--sui-spacing-3\.5);

    padding-top: var(--sui-spacing-2);

    padding-bottom: var(--sui-spacing-2);

    font-size: var(--sui-typography-descriptor-font-size);

    font-weight: var(--sui-typography-descriptor-font-weight);

    line-height: var(--sui-typography-descriptor-line-height);

    -webkit-text-decoration: var(--sui-typography-descriptor-text-decoration);

            text-decoration: var(--sui-typography-descriptor-text-decoration);

    text-transform: var(--sui-typography-descriptor-text-transform);

    font-family: var(--sui-font-family);

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-text-opacity)))
}

.sui-table-footer-padding-none {

    padding-left: var(--sui-spacing-0);

    padding-right: var(--sui-spacing-0)
}

.sui-table-footer-padding-checkbox {

    padding-left: var(--sui-spacing-2)
}

.sui-table-footer-sticky {

    position: sticky;

    bottom: var(--sui-spacing-0);

    z-index: 10;

    background-color: inherit
}

.sui-table-container-root {
    width: 100%;
    overflow-x: auto
}

.sui-table-container-standard-border {
    border-style: solid;
    border-color: var(--sui-colors-neutral-b0-t20);
    border-width: var(--sui-border-width-1);
    --sui-focus-ring-border-width: var(--sui-border-width-1);
    --sui-focus-ring-border-width-recoup: 1
}

.sui-table-container-rounded-border {
    border-style: solid;
    border-color: var(--sui-colors-neutral-b0-t20);
    border-radius: var(--sui-border-radius-sm);
    --sui-focus-ring-border-radius: var(--sui-border-radius-sm);
    border-width: var(--sui-border-width-1);
    --sui-focus-ring-border-width: var(--sui-border-width-1);
    --sui-focus-ring-border-width-recoup: 1
}

.sui-table-root {

    display: table;

    width: 100%;

    border-collapse: collapse;

    --tw-border-spacing-x: var(--sui-spacing-0);

    --tw-border-spacing-y: var(--sui-spacing-0);

    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);

    --tw-bg-opacity: 1;

    background-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-bg-opacity)))
}

.sui-table-sticky-header {

    border-collapse: separate
}

.sui-table-sticky-footer {

    height: 100%;

    border-collapse: separate
}

.sui-tray-root {

    position: relative;

    width: var(--sui-spacing-65);

    overflow: hidden;

    outline: 2px solid transparent;

    outline-offset: 2px
}

.sui-tray-panel-root {

    pointer-events: none;

    position: absolute;

    top: var(--sui-spacing-0);

    left: var(--sui-spacing-0);

    right: var(--sui-spacing-0)
}

.sui-tray-panel-activated {

    pointer-events: auto;

    position: static
}

.sui-dialog-body {
    display: flex;
    min-height: var(--sui-spacing-34);
    flex-direction: column;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(var(--s-neutral-high-contrast), calc(var(--s-neutral-high-contrast-opacity, 1) * var(--tw-border-opacity)));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-bg-opacity)));
    padding-top: var(--sui-spacing-6);
    padding-bottom: var(--sui-spacing-5);
    --tw-text-opacity: 1;
    color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));
    --tw-shadow: var(--sui-box-shadow-md);
    --tw-shadow-colored: var(--sui-box-shadow-md);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-radius: var(--sui-border-radius-sm);
    --sui-focus-ring-border-radius: var(--sui-border-radius-sm);
    border-width: var(--sui-border-width-1);
    --sui-focus-ring-border-width: var(--sui-border-width-1);
    --sui-focus-ring-border-width-recoup: 1;
    position: fixed;
    max-height: 80vh;
    max-width: calc(100% - var(--sui-spacing-12))
}

.sui-dialog-root {
    display: flex;
    align-items: center;
    justify-content: center
}

.sui-dialog-small {
    width: var(--sui-spacing-71)
}

.sui-dialog-medium {
    width: var(--sui-spacing-100)
}

.sui-dialog-large {
    width: var(--sui-spacing-150)
}

.sui-dialog-title-root {
    font-size: var(--sui-typography-title-font-size);
    font-weight: var(--sui-typography-title-font-weight);
    letter-spacing: var(--sui-typography-title-letter-spacing);
    line-height: var(--sui-typography-title-line-height);
    -webkit-text-decoration: var(--sui-typography-title-text-decoration);
            text-decoration: var(--sui-typography-title-text-decoration);
    text-transform: var(--sui-typography-title-text-transform);
    font-family: var(--sui-font-family);
    margin-bottom: var(--sui-spacing-3);
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    padding-left: var(--sui-spacing-6);
    padding-right: var(--sui-spacing-6)
}

.sui-dialog-content-root {
    font-size: var(--sui-typography-main-text-font-size);
    font-weight: var(--sui-typography-main-text-font-weight);
    line-height: var(--sui-typography-main-text-line-height);
    -webkit-text-decoration: var(--sui-typography-main-text-text-decoration);
            text-decoration: var(--sui-typography-main-text-text-decoration);
    text-transform: var(--sui-typography-main-text-text-transform);
    font-family: var(--sui-font-family);
    flex: 1 1 0%;
    overflow: auto;
    padding-left: var(--sui-spacing-6);
    padding-right: var(--sui-spacing-6)
}

.sui-dialog-actions-root {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sui-spacing-2);
    padding-left: var(--sui-spacing-6);
    padding-right: var(--sui-spacing-6);
    padding-top: var(--sui-spacing-5)
}

.sui-dialog-right {
    position: fixed;
    top: 50%;
    left: 50%;
    --tw-translate-x: -50%;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    right: var(--sui-spacing-0);
    left: auto;
    border-top-right-radius: var(--sui-border-radius-none);
    border-bottom-right-radius: var(--sui-border-radius-none);
    border-right-width: var(--sui-border-width-0)
}

.sui-dialog-right-close-button {
    left: calc(var(--sui-spacing-4) * -1);
    --tw-translate-x: -100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.sui-dialog-left {
    position: fixed;
    top: 50%;
    left: 50%;
    --tw-translate-x: -50%;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    left: var(--sui-spacing-0);
    right: auto;
    border-top-left-radius: var(--sui-border-radius-none);
    border-bottom-left-radius: var(--sui-border-radius-none);
    border-left-width: var(--sui-border-width-0)
}

.sui-dialog-left-close-button {
    right: calc(var(--sui-spacing-4) * -1);
    --tw-translate-x: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.sui-dialog-full-height {
    top: var(--sui-spacing-0);
    bottom: var(--sui-spacing-0);
    max-height: max-content;
    width: var(--sui-spacing-150);
    --tw-translate-x: calc(var(--sui-spacing-0) * -1);
    --tw-translate-y: calc(var(--sui-spacing-0) * -1);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    transform: none;
    max-height: 100vh;
    max-width: calc(100% - var(--sui-spacing-18));
    padding-top: var(--sui-spacing-9)
}

.sui-dialog-full-height .sui-dialog-actions-root {
    border-style: solid;
    border-color: var(--sui-colors-neutral-b0-t10);
    border-width: var(--sui-border-width-0);
    --sui-focus-ring-border-width: var(--sui-border-width-0);
    border-top-width: var(--sui-border-width-1);
    --sui-focus-ring-border-width-recoup: 1
}

.sui-dialog-full-height .sui-dialog-title-root {
    font-size: var(--sui-typography-display1-font-size);
    font-weight: var(--sui-typography-display1-font-weight);
    line-height: var(--sui-typography-display1-line-height);
    -webkit-text-decoration: var(--sui-typography-display1-text-decoration);
            text-decoration: var(--sui-typography-display1-text-decoration);
    text-transform: var(--sui-typography-display1-text-transform);
    font-family: var(--sui-font-family);
    margin-bottom: var(--sui-spacing-6);
    padding-left: var(--sui-spacing-9);
    padding-right: var(--sui-spacing-9)
}

.sui-dialog-full-height .sui-dialog-content-root {
    padding-left: var(--sui-spacing-9);
    padding-right: var(--sui-spacing-9)
}

.sui-dialog-full-height .sui-dialog-close-button {
    position: absolute;
    top: var(--sui-spacing-4)
}

.sui-suggestion-list-root {

margin-left: var(--sui-spacing-2);

margin-right: var(--sui-spacing-2);
}

.sui-suggestion-list-item {

font-size: var(--sui-typography-subtitle-mini-font-size);

font-weight: var(--sui-typography-subtitle-mini-font-weight);

line-height: var(--sui-typography-subtitle-mini-line-height);

-webkit-text-decoration: var(--sui-typography-subtitle-mini-text-decoration);

        text-decoration: var(--sui-typography-subtitle-mini-text-decoration);

text-transform: var(--sui-typography-subtitle-mini-text-transform);

font-family: var(--sui-font-family);

display: flex;

min-height: var(--sui-spacing-7);

align-items: center;

justify-content: space-between;

background-color: transparent;

padding-left: var(--sui-spacing-2);

padding-right: var(--sui-spacing-2);

padding-top: var(--sui-spacing-1);

padding-bottom: var(--sui-spacing-1);

--tw-text-opacity: 1;

color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));

border-radius: var(--sui-border-radius-xs);

--sui-focus-ring-border-radius: var(--sui-border-radius-xs);
}

.sui-suggestion-list-item:not(.sui-suggestion-list-readonly, .sui-disabled) {

cursor: pointer;
}

@media (hover: hover) {

.sui-suggestion-list-item:hover:not(.sui-disabled) {

--tw-bg-opacity: 1;

background-color: rgb(var(--s-neutral-b5), calc(var(--s-neutral-b5-opacity, 1) * var(--tw-bg-opacity)));
}
}

.sui-suggestion-list-item.sui-disabled:not(.sui-suggestion-list-readonly) {

pointer-events: none;

cursor: default;

--tw-text-opacity: 1;

color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-text-opacity)));
}

.sui-suggestion-list-item:focus-visible,
  .sui-suggestion-list-item.sui-focus-visible {

--sui-focus-ring-color: var(--sui-focus-ring-inset-color);
}

.sui-suggestion-list-item:focus-visible::after,
  .sui-suggestion-list-item.sui-focus-visible::after {

pointer-events: none;

content: '';

position: absolute;

inset: 0;

border-radius: var(--sui-focus-ring-border-radius, 0px);

box-shadow: inset 0 0 0 var(--sui-focus-ring-inset-width) var(--sui-focus-ring-color);
}

.sui-suggestion-list-selected,
.sui-suggestion-list-highlighted {

--tw-bg-opacity: 1;

background-color: rgb(var(--s-neutral-b5), calc(var(--s-neutral-b5-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-suggestion-list-group-title-readonly {

font-size: var(--sui-typography-subtitle-bold-font-size);

font-weight: var(--sui-typography-subtitle-bold-font-weight);

line-height: var(--sui-typography-subtitle-bold-line-height);

-webkit-text-decoration: var(--sui-typography-subtitle-bold-text-decoration);

        text-decoration: var(--sui-typography-subtitle-bold-text-decoration);

text-transform: var(--sui-typography-subtitle-bold-text-transform);

font-family: var(--sui-font-family);
}

.sui-suggestion-list-expand-icon {

margin-left: auto;

margin-right: var(--sui-spacing-1);
}

.sui-autocomplete-chevron {

  height: var(--sui-spacing-6);

  width: var(--sui-spacing-6);

  flex-shrink: 0;

  --tw-text-opacity: 1;

  color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));

  /* default */

  --sui-squircle-bg-color: transparent;

  /* pressed */

  --s-squircle-bg-color-active-opacity: 1;

  --sui-squircle-bg-color-active: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--s-squircle-bg-color-active-opacity)));

  /* hover */

  --s-squircle-bg-color-hover-opacity: 1;

  --sui-squircle-bg-color-hover: rgb(var(--s-neutral-b4), calc(var(--s-neutral-b4-opacity, 1) * var(--s-squircle-bg-color-hover-opacity)));
}

.sui-autocomplete-chevron:not(:first-child) {

  margin-left: var(--sui-spacing-2);
}

.sui-autocomplete-clear {

  opacity: 0;
}

@media (hover: hover) {

.sui-autocomplete-root:hover .sui-autocomplete-clear {

    opacity: 1;
  }
}

.sui-autocomplete-root:focus .sui-autocomplete-clear, .sui-autocomplete-root:focus-within .sui-autocomplete-clear, .sui-autocomplete-root.sui-focused .sui-autocomplete-clear {

  opacity: 1;
}

.sui-autocomplete-root.sui-disabled .sui-autocomplete-chevron {

  --tw-text-opacity: 1;

  color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-text-opacity)));
}

.sui-autocomplete-root.sui-disabled .sui-autocomplete-clear {

  opacity: 0;
}

.sui-autocomplete-form-field-content {

  height: auto;

  overflow: visible;
}

.sui-autocomplete-form-field-content-xlarge {

  min-height: var(--sui-spacing-12);
}

.sui-autocomplete-form-field-content-large {

  min-height: var(--sui-spacing-9);
}

.sui-autocomplete-form-field-content-medium {

  min-height: var(--sui-spacing-8);
}

.sui-autocomplete-input-container {

  margin-left: calc(var(--sui-spacing-0\.5) * -1);

  margin-right: calc(var(--sui-spacing-0\.5) * -1);

  display: flex;

  height: 100%;

  max-height: var(--sui-spacing-42);

  flex-grow: 1;

  flex-wrap: wrap;

  align-items: center;

  gap: var(--sui-spacing-1);

  overflow-y: auto;

  padding-left: var(--sui-spacing-0\.5);

  padding-right: var(--sui-spacing-0\.5);
}

.sui-autocomplete-input-container-xlarge {

  padding-top: 7px;

  padding-bottom: 7px;
}

.sui-autocomplete-input-container-large {

  padding-top: 1px;

  padding-bottom: 1px;
}

.sui-autocomplete-input-container-medium {

  padding-top: var(--sui-spacing-0);

  padding-bottom: var(--sui-spacing-0);
}

.sui-autocomplete-input {

  height: var(--sui-spacing-7);

  min-width: var(--sui-spacing-7);

  flex: 1 1 0%;
}

.sui-autocomplete-outlined-expanded {

  --tw-bg-opacity: 1;

  background-color: rgb(var(--s-neutral-b5), calc(var(--s-neutral-b5-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-autocomplete-outlined-expanded-chevron {
      --sui-squircle-bg-color: var(--sui-colors-neutral-b3);
    }

.sui-autocomplete-standard-expanded-chevron {

  --tw-text-opacity: 1;

  color: rgb(var(--s-primary-f), calc(var(--s-primary-f-opacity, 1) * var(--tw-text-opacity)));
}

.sui-autocomplete-error-chevron {

  --tw-text-opacity: 1;

  color: rgb(var(--s-danger), calc(var(--s-danger-opacity, 1) * var(--tw-text-opacity)));
}

.sui-autocomplete-end-adornment {

  margin-left: var(--sui-spacing-2);
}

/* popper */

.sui-autocomplete-popper-root {

  z-index: 1300;

  outline: 2px solid transparent;

  outline-offset: 2px;
}

.sui-autocomplete-popper-root[data-sui-popper-placement^='bottom'] .sui-popper-widget {

  transform-origin: top;
}

.sui-autocomplete-popper-root[data-sui-popper-placement^='top'] .sui-popper-widget {

  transform-origin: bottom;
}

.sui-autocomplete-popper-paper {

  border-style: solid;

  border-color: var(--sui-colors-neutral-b0-t20);

  --tw-bg-opacity: 1;

  background-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-bg-opacity)));

  --tw-shadow: var(--sui-box-shadow-md);

  --tw-shadow-colored: var(--sui-box-shadow-md);

  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

  border-radius: var(--sui-border-radius-sm);

  --sui-focus-ring-border-radius: var(--sui-border-radius-sm);

  border-width: var(--sui-border-width-1);

  --sui-focus-ring-border-width: var(--sui-border-width-1);

  --sui-focus-ring-border-width-recoup: 1;
}

.sui-autocomplete-popper-empty {

  border-style: none;

  --sui-focus-ring-border-width-recoup: 0;
}

.sui-empty-state-root {

    display: flex;

    min-width: var(--sui-spacing-65);

    max-width: var(--sui-spacing-115);

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding-left: var(--sui-spacing-8);

    padding-right: var(--sui-spacing-8)
}

.sui-empty-state-icon {

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-text-opacity)))
}

.sui-empty-state-icon > span {

    font-size: 64px
}

.sui-empty-state-text-container {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: var(--sui-spacing-3);

    padding-top: var(--sui-spacing-6)
}

.sui-empty-state-title {

    font-size: var(--sui-typography-title-font-size);

    font-weight: var(--sui-typography-title-font-weight);

    letter-spacing: var(--sui-typography-title-letter-spacing);

    line-height: var(--sui-typography-title-line-height);

    -webkit-text-decoration: var(--sui-typography-title-text-decoration);

            text-decoration: var(--sui-typography-title-text-decoration);

    text-transform: var(--sui-typography-title-text-transform);

    font-family: var(--sui-font-family);

    text-align: center;

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-b1), calc(var(--s-neutral-b1-opacity, 1) * var(--tw-text-opacity)))
}

.sui-empty-state-description {

    font-size: var(--sui-typography-main-text-font-size);

    font-weight: var(--sui-typography-main-text-font-weight);

    line-height: var(--sui-typography-main-text-line-height);

    -webkit-text-decoration: var(--sui-typography-main-text-text-decoration);

            text-decoration: var(--sui-typography-main-text-text-decoration);

    text-transform: var(--sui-typography-main-text-text-transform);

    font-family: var(--sui-font-family);

    text-align: center;

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-text-opacity)))
}

.sui-empty-state-actions {

    display: flex;

    flex-direction: row;

    align-items: flex-start;

    gap: var(--sui-spacing-4);

    padding-top: var(--sui-spacing-6)
}

/* stylelint-disable no-empty-source */

.sui-tab-container {

  display: flex;
}

.sui-tab-pill-badge {

  position: absolute;

  top: calc(var(--sui-spacing-0\.5) * -1);

  right: var(--sui-spacing-0);
}

.sui-tab-root {

  font-size: var(--sui-typography-label-semi-bold-font-size);

  font-weight: var(--sui-typography-label-semi-bold-font-weight);

  letter-spacing: var(--sui-typography-label-semi-bold-letter-spacing);

  line-height: var(--sui-typography-label-semi-bold-line-height);

  -webkit-text-decoration: var(--sui-typography-label-semi-bold-text-decoration);

          text-decoration: var(--sui-typography-label-semi-bold-text-decoration);

  text-transform: var(--sui-typography-label-semi-bold-text-transform);

  font-family: var(--sui-font-family);

  position: relative;

  height: var(--sui-spacing-12);

  cursor: pointer;

  outline: 2px solid transparent;

  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .sui-tab-root {

    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 150ms;

    transition-duration: var(--sui-transition-neutral-01-fast-transition-duration);

    transition-timing-function: var(--sui-transition-neutral-01-fast-transition-timing-function);
  }
}

.sui-tab-root {

  display: flex;

  flex-grow: 1;

  flex-basis: var(--sui-spacing-0);

  align-items: flex-end;

  justify-content: center;

  padding-bottom: var(--sui-spacing-3\.5);

  border-style: none;

  background-color: transparent;

  --sui-focus-ring-border-width-recoup: 0;
}

.sui-tab-root.sui-selected {

  position: relative;

  --tw-text-opacity: 1;

  color: rgb(var(--s-cobranding-f), calc(var(--s-cobranding-f-opacity, 1) * var(--tw-text-opacity)));
}

.sui-tab-root:focus-visible,
    .sui-tab-root.sui-focus-visible {

  --sui-focus-ring-color: var(--sui-focus-ring-inset-color);
}

.sui-tab-root:focus-visible::after,
    .sui-tab-root.sui-focus-visible::after {

  pointer-events: none;

  content: '';

  position: absolute;

  inset: 0;

  border-radius: var(--sui-focus-ring-border-radius, 0px);

  box-shadow: inset 0 0 0 var(--sui-focus-ring-inset-width) var(--sui-focus-ring-color);
}

.sui-tab-root:focus-visible,
    .sui-tab-root.sui-focus-visible {

  border-radius: var(--sui-border-radius-xs);

  --sui-focus-ring-border-radius: var(--sui-border-radius-xs);
}

@media (hover: hover) {
  .sui-tab-root:hover {

    --tw-text-opacity: 1;

    color: rgb(var(--s-cobranding-high-contrast), calc(var(--s-cobranding-high-contrast-opacity, 1) * var(--tw-text-opacity)));
  }
}

@media (hover: hover) {
  .sui-tab-root:hover .sui-tab-badge {

    --tw-bg-opacity: 1;

    background-color: rgb(var(--s-cobranding-high-contrast), calc(var(--s-cobranding-high-contrast-opacity, 1) * var(--tw-bg-opacity)));

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--tw-text-opacity)));
  }
}

.sui-tab-root.sui-active,
    .sui-tab-root:active {

  --tw-text-opacity: 1;

  color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));
}

.sui-tab-root.sui-active .sui-tab-badge, .sui-tab-root:active .sui-tab-badge {

  --tw-bg-opacity: 1;

  background-color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-tab-label {

  min-width: var(--sui-spacing-25);

  max-width: var(--sui-spacing-60);

  padding-left: var(--sui-spacing-2);

  padding-right: var(--sui-spacing-2);

  --tw-text-opacity: 1;

  color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-text-opacity)));
}

.sui-tab-label-container {

  height: var(--sui-spacing-3\.5);

  width: 100%;

  align-items: center;

  justify-content: center;
}

.sui-tab-label-text {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.sui-tab-label-badge-root {

  z-index: 10;

  margin-left: var(--sui-spacing-1);

  flex-shrink: 0;
}

.sui-tab-icon {

  min-width: var(--sui-spacing-9\.5);

  max-width: var(--sui-spacing-24\.75);

  padding-left: var(--sui-spacing-1);

  padding-right: var(--sui-spacing-1);

  --tw-text-opacity: 1;

  color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));
}

.sui-tab-icon-container {

  height: var(--sui-spacing-5\.5);

  align-items: flex-end;
}

.sui-tab-icon-pill {

  min-width: var(--sui-spacing-14);
}

.sui-tab-icon-pill .sui-tab-container {

  height: auto;
}

.sui-tab-icon-badge-root {

  align-self: flex-start;
}

.sui-tab-pill {

  font-size: var(--sui-typography-subtitle-mini-font-size);

  font-weight: var(--sui-typography-subtitle-mini-font-weight);

  line-height: var(--sui-typography-subtitle-mini-line-height);

  -webkit-text-decoration: var(--sui-typography-subtitle-mini-text-decoration);

          text-decoration: var(--sui-typography-subtitle-mini-text-decoration);

  text-transform: var(--sui-typography-subtitle-mini-text-transform);

  font-family: var(--sui-font-family);

  height: var(--sui-spacing-9);

  min-width: var(--sui-spacing-18);

  align-items: center;

  justify-content: center;

  border-style: solid;

  border-color: var(--sui-colors-neutral-b0-t20);

  --tw-bg-opacity: 1;

  background-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-bg-opacity)));

  padding-left: var(--sui-spacing-4);

  padding-right: var(--sui-spacing-4);

  padding-top: var(--sui-spacing-0);

  padding-bottom: var(--sui-spacing-0);

  --tw-text-opacity: 1;

  color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));

  border-radius: var(--sui-border-radius-full);

  --sui-focus-ring-border-radius: var(--sui-border-radius-full);

  border-width: var(--sui-border-width-1);

  --sui-focus-ring-border-width: var(--sui-border-width-1);

  --sui-focus-ring-border-width-recoup: 1;
}

.sui-tab-pill:not(:first-child) {

  margin-left: var(--sui-spacing-1);
}

.sui-tab-pill:focus-visible,
    .sui-tab-pill.sui-focus-visible {

  --sui-focus-ring-color: var(--sui-focus-ring-inset-color);
}

.sui-tab-pill:focus-visible::after,
    .sui-tab-pill.sui-focus-visible::after {

  pointer-events: none;

  content: '';

  position: absolute;

  inset: 0;

  border-radius: var(--sui-focus-ring-border-radius, 0px);

  box-shadow: inset 0 0 0 var(--sui-focus-ring-inset-width) var(--sui-focus-ring-color);
}

.sui-tab-pill:focus-visible,
    .sui-tab-pill.sui-focus-visible {

  border-radius: var(--sui-border-radius-full);

  --sui-focus-ring-border-radius: var(--sui-border-radius-full);
}

@media (hover: hover) {
  .sui-tab-pill:hover {

    border-color: var(--sui-colors-neutral-b0-t30);

    --tw-bg-opacity: 1;

    background-color: rgb(var(--s-neutral-b5), calc(var(--s-neutral-b5-opacity, 1) * var(--tw-bg-opacity)));

    --tw-text-opacity: 1;

    color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));
  }
}

.sui-tab-pill.sui-active,
    .sui-tab-pill:active {

  --tw-border-opacity: 1;

  border-color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-border-opacity)));

  --tw-bg-opacity: 1;

  background-color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-tab-pill.sui-selected {

  border-color: var(--sui-colors-neutral-b0-t20);

  --tw-text-opacity: 1;

  color: rgb(var(--s-neutral-high-contrast-inverted-b0), calc(var(--s-neutral-high-contrast-inverted-b0-opacity, 1) * var(--tw-text-opacity)));

      background: linear-gradient(
          0deg,
          var(--sui-colors-neutral-high-contrast) 0%,
          var(--sui-colors-neutral-high-contrast) 100%
        ),
        var(--sui-colors-neutral-b4);
}

@media (hover: hover) {
  .sui-tab-pill.sui-selected:hover {

    --tw-bg-opacity: 1;

    background-color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-bg-opacity)));
  }
}

/* stylelint-disable property-no-vendor-prefix */

.sui-tabs-root {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  height: var(--sui-spacing-12);
}

.sui-tabs-scroller {
  position: relative;
  height: 100%;
  width: 100%;

  /* Hide dimensionless scrollbar on macOS */
  scrollbar-width: none;
}

/* Firefox */

.sui-tabs-scroller::-webkit-scrollbar {
    display: none; /* Safari + Chrome */
  }

.sui-tabs-scrollable .sui-tabs-scroller {
  overflow-x: auto;
  overflow-y: hidden;
}

.sui-tabs-scrollable .sui-tab {
  flex: 1 1 auto;
  flex-grow: 0;
}

.sui-tabs-tab-list {
  position: relative;
  display: flex;
  min-width: -moz-fit-content;
  min-width: fit-content;
  flex-direction: row;
}

.sui-tabs-underline {
  position: absolute;
  bottom: var(--sui-spacing-0);
  left: var(--sui-spacing-0);
  right: var(--sui-spacing-0);
  z-index: -10;
  height: var(--sui-spacing-0\.25);
  width: 100%;
  background-color: var(--sui-colors-neutral-b0-t10);
}

.sui-tabs-indicator {
  position: absolute;
  bottom: var(--sui-spacing-0);
  height: var(--sui-spacing-0\.5);
  --tw-bg-opacity: 1;
  background-color: rgb(var(--s-cobranding-f), calc(var(--s-cobranding-f-opacity, 1) * var(--tw-bg-opacity)));
}

.sui-tabs-compact .sui-tab {
  min-width: var(--sui-spacing-0);
  flex: 1 1 auto;
  flex-grow: 0;
}

.sui-tabs-pill {
  height: auto;
}

.sui-tabs-pill .sui-tabs-scroller {
  overflow-x: visible;
}

.sui-tabs-pill {

  --sui-tabs-tab-list-padding-top: var(--sui-spacing-0\.5);
}

.sui-tabs-pill .sui-tabs-tab-list {
  padding-left: var(--sui-spacing-1);
  padding-right: var(--sui-spacing-1);
  padding-bottom: var(--sui-spacing-2\.5);

    padding-top: var(--sui-tabs-tab-list-padding-top);
}

.sui-tabs-pill .sui-tab-more-menu-root {
  padding-bottom: var(--sui-spacing-0);
}

.sui-tabs-pill .sui-tab-more-menu-button {
  margin-bottom: var(--sui-spacing-0);
  margin-right: var(--sui-spacing-0);
}

.sui-tabs-pill .sui-tabs-underline {
  display: none;
}

/* with scroll button */

.sui-tabs-pill.sui-tabs-scroll-left .sui-tabs-scroller {
      -webkit-mask-image: linear-gradient(
        to right,
        transparent var(--sui-spacing-10),
        var(--sui-colors-neutral-b0) var(--sui-spacing-20)
      );
      mask-image: linear-gradient(
        to right,
        transparent var(--sui-spacing-10),
        var(--sui-colors-neutral-b0) var(--sui-spacing-20)
      );
    }

.sui-tabs-pill.sui-tabs-scroll-right .sui-tabs-scroller {
      -webkit-mask-image: linear-gradient(
        to right,
        var(--sui-colors-neutral-b0) calc(100% - var(--sui-spacing-20)),
        transparent calc(100% - var(--sui-spacing-10))
      );
      mask-image: linear-gradient(
        to right,
        var(--sui-colors-neutral-b0) calc(100% - var(--sui-spacing-20)),
        transparent calc(100% - var(--sui-spacing-10))
      );
    }

.sui-tabs-pill.sui-tabs-scroll-both .sui-tabs-scroller {
      -webkit-mask-image: linear-gradient(
        to right,
        transparent var(--sui-spacing-10),
        var(--sui-colors-neutral-b0) var(--sui-spacing-20),
        var(--sui-colors-neutral-b0) calc(100% - var(--sui-spacing-20)),
        transparent calc(100% - var(--sui-spacing-10))
      );
      mask-image: linear-gradient(
        to right,
        transparent var(--sui-spacing-10),
        var(--sui-colors-neutral-b0) var(--sui-spacing-20),
        var(--sui-colors-neutral-b0) calc(100% - var(--sui-spacing-20)),
        transparent calc(100% - var(--sui-spacing-10))
      );
    }

.sui-tabs-floating-underline {
  position: absolute;
  left: var(--sui-spacing-0);
  bottom: var(--sui-spacing-0);
  height: var(--sui-spacing-0\.5);
  --tw-bg-opacity: 1;
  background-color: rgb(var(--s-cobranding-f), calc(var(--s-cobranding-f-opacity, 1) * var(--tw-bg-opacity)));
}

/* more menu */

.sui-tab-more-menu-root {
  position: relative;
  margin-left: auto;
  display: flex;
  flex-shrink: 0;
  align-items: flex-end;
  padding-bottom: var(--sui-spacing-3\.5);
}

.sui-tab-more-menu-button {
  margin-bottom: calc(var(--sui-spacing-1\.5) * -1);
}

.sui-tab-more-menu-badge-root .sui-badge-dot.sui-badge-content {
  margin-bottom: var(--sui-spacing-0\.5);
}

.sui-tab-more-menu-pill-badge {
  position: absolute;
  top: calc(var(--sui-spacing-0\.5) * -1);
  right: var(--sui-spacing-0);
}

/* scroll button */

.sui-tab-scroll-button-root {
  position: absolute;
  top: var(--sui-spacing-0);
  bottom: var(--sui-spacing-0);
  z-index: 10;
  right: var(--sui-spacing-0);

  padding-top: var(--sui-tabs-tab-list-padding-top);
}

.sui-tab-scroll-button-start {
  right: auto;
  left: var(--sui-spacing-0);
}

.sui-page-header-root {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-bg-opacity)))
}

.sui-page-header-left-root,
  .sui-page-header-right-root {
    position: absolute;
    top: var(--sui-spacing-0);
    display: flex;
    height: 100%;
    align-items: center
}

.sui-page-header-left-root {
    left: var(--sui-spacing-4);
    justify-content: flex-start
}

.sui-page-header-right-root {
    right: var(--sui-spacing-4);
    justify-content: flex-end
}

.sui-page-header-center-root {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center
}

.sui-page-header-title-root {
    font-size: var(--sui-typography-subtitle-font-size);
    font-weight: var(--sui-typography-subtitle-font-weight);
    line-height: var(--sui-typography-subtitle-line-height);
    -webkit-text-decoration: var(--sui-typography-subtitle-text-decoration);
            text-decoration: var(--sui-typography-subtitle-text-decoration);
    text-transform: var(--sui-typography-subtitle-text-transform);
    font-family: var(--sui-font-family);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    --tw-text-opacity: 1;
    color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)))
}

.sui-page-header-title-root:not(:only-child) {
    margin-right: var(--sui-spacing-1)
}

.sui-page-header-integrated {
    height: var(--sui-spacing-15);
    padding-left: var(--sui-spacing-25);
    padding-right: var(--sui-spacing-25)
}

.sui-page-header-integrated .sui-page-header-left-root,
    .sui-page-header-integrated .sui-page-header-right-root {
    gap: var(--sui-spacing-3)
}

.sui-page-header-detached {
    height: var(--sui-spacing-10);
    padding-left: var(--sui-spacing-21);
    padding-right: var(--sui-spacing-21)
}

.sui-page-header-detached .sui-page-header-left-root,
    .sui-page-header-detached .sui-page-header-right-root {
    gap: var(--sui-spacing-2)
}

/*# sourceMappingURL=index.css.map */

/* ! tailwindcss v3.4.6 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}

@keyframes skeleton-wave {

    0% {
        left: calc(0px - var(--sui-skeleton-gradient-width));
    }

    50% {
        left: calc(100% + var(--sui-skeleton-gradient-width));
    }

    100% {
        left: calc(100% + var(--sui-skeleton-gradient-width));
    }
}

[data-sui-theme-scope] .sui-icon-button-circular.focus-visible,
    [data-sui-theme-scope] .sui-icon-button-circular:focus-visible,
    [data-sui-theme-scope] .sui-icon-button-circular.sui-focus-visible,
    [data-sui-theme-scope] .sui-icon-button-rectangular.focus-visible,
    [data-sui-theme-scope] .sui-icon-button-rectangular:focus-visible,
    [data-sui-theme-scope] .sui-icon-button-rectangular.sui-focus-visible {
    --sui-focus-ring-color: var(--sui-focus-ring-normal-color);
}

[data-sui-theme-scope] .sui-icon-button-circular.focus-visible::after,
    [data-sui-theme-scope] .sui-icon-button-circular:focus-visible::after,
    [data-sui-theme-scope] .sui-icon-button-circular.sui-focus-visible::after,
    [data-sui-theme-scope] .sui-icon-button-rectangular.focus-visible::after,
    [data-sui-theme-scope] .sui-icon-button-rectangular:focus-visible::after,
    [data-sui-theme-scope] .sui-icon-button-rectangular.sui-focus-visible::after {
    pointer-events: none;
    content: '';
    position: absolute;
    inset: 0;
    border-radius: calc(var(--sui-focus-ring-normal-offset) + var(--sui-focus-ring-border-radius, 0px));
    box-shadow: 0 0 0 var(--sui-focus-ring-normal-width) var(--sui-focus-ring-color);
    margin: calc(var(--sui-focus-ring-normal-offset)*-1 - var(--sui-focus-ring-border-width, 0px)*var(--sui-focus-ring-border-width-recoup, 1));
}

[data-sui-theme-scope] .sui-block-border-radius-small {
    border-radius: var(--sui-border-radius-sm);
    --sui-focus-ring-border-radius: var(--sui-border-radius-sm);
}

[data-sui-theme-scope] :is(.sui-dial-pad-button-root .sui-icon) {
    position: absolute;
    inset: var(--sui-spacing-0);
    margin: auto;
    aspect-ratio: 1 / 1;
}

[data-sui-theme-scope] :is(.sui-dial-pad-button-medium .sui-icon) {
    width: 32.25%;
}

[data-sui-theme-scope] :is(.sui-dial-pad-button-large .sui-icon) {
    width: 64.5%;
}

[data-sui-theme-scope] .typography-descriptor {
    font-size: var(--sui-typography-descriptor-font-size);
    font-weight: var(--sui-typography-descriptor-font-weight);
    line-height: var(--sui-typography-descriptor-line-height);
    -webkit-text-decoration: var(--sui-typography-descriptor-text-decoration);
            text-decoration: var(--sui-typography-descriptor-text-decoration);
    text-transform: var(--sui-typography-descriptor-text-transform);
    font-family: var(--sui-font-family);
}

[data-sui-theme-scope] .typography-descriptorMini {
    font-size: var(--sui-typography-descriptor-mini-font-size);
    font-weight: var(--sui-typography-descriptor-mini-font-weight);
    line-height: var(--sui-typography-descriptor-mini-line-height);
    -webkit-text-decoration: var(--sui-typography-descriptor-mini-text-decoration);
            text-decoration: var(--sui-typography-descriptor-mini-text-decoration);
    text-transform: var(--sui-typography-descriptor-mini-text-transform);
    font-family: var(--sui-font-family);
}

[data-sui-theme-scope] .typography-descriptorMiniSemiBold {
    font-size: var(--sui-typography-descriptor-mini-semi-bold-font-size);
    font-weight: var(--sui-typography-descriptor-mini-semi-bold-font-weight);
    line-height: var(--sui-typography-descriptor-mini-semi-bold-line-height);
    -webkit-text-decoration: var(--sui-typography-descriptor-mini-semi-bold-text-decoration);
            text-decoration: var(--sui-typography-descriptor-mini-semi-bold-text-decoration);
    text-transform: var(--sui-typography-descriptor-mini-semi-bold-text-transform);
    font-family: var(--sui-font-family);
}

[data-sui-theme-scope] .typography-detailBold {
    font-size: var(--sui-typography-detail-bold-font-size);
    font-weight: var(--sui-typography-detail-bold-font-weight);
    line-height: var(--sui-typography-detail-bold-line-height);
    -webkit-text-decoration: var(--sui-typography-detail-bold-text-decoration);
            text-decoration: var(--sui-typography-detail-bold-text-decoration);
    text-transform: var(--sui-typography-detail-bold-text-transform);
    font-family: var(--sui-font-family);
}

[data-sui-theme-scope] .typography-display1 {
    font-size: var(--sui-typography-display1-font-size);
    font-weight: var(--sui-typography-display1-font-weight);
    line-height: var(--sui-typography-display1-line-height);
    -webkit-text-decoration: var(--sui-typography-display1-text-decoration);
            text-decoration: var(--sui-typography-display1-text-decoration);
    text-transform: var(--sui-typography-display1-text-transform);
    font-family: var(--sui-font-family);
}

[data-sui-theme-scope] .typography-display2 {
    font-size: var(--sui-typography-display2-font-size);
    font-weight: var(--sui-typography-display2-font-weight);
    letter-spacing: var(--sui-typography-display2-letter-spacing);
    line-height: var(--sui-typography-display2-line-height);
    -webkit-text-decoration: var(--sui-typography-display2-text-decoration);
            text-decoration: var(--sui-typography-display2-text-decoration);
    text-transform: var(--sui-typography-display2-text-transform);
    font-family: var(--sui-font-family);
}

[data-sui-theme-scope] .typography-mainText {
    font-size: var(--sui-typography-main-text-font-size);
    font-weight: var(--sui-typography-main-text-font-weight);
    line-height: var(--sui-typography-main-text-line-height);
    -webkit-text-decoration: var(--sui-typography-main-text-text-decoration);
            text-decoration: var(--sui-typography-main-text-text-decoration);
    text-transform: var(--sui-typography-main-text-text-transform);
    font-family: var(--sui-font-family);
}

[data-sui-theme-scope] .typography-subtitle {
    font-size: var(--sui-typography-subtitle-font-size);
    font-weight: var(--sui-typography-subtitle-font-weight);
    line-height: var(--sui-typography-subtitle-line-height);
    -webkit-text-decoration: var(--sui-typography-subtitle-text-decoration);
            text-decoration: var(--sui-typography-subtitle-text-decoration);
    text-transform: var(--sui-typography-subtitle-text-transform);
    font-family: var(--sui-font-family);
}

[data-sui-theme-scope] .typography-subtitleBold {
    font-size: var(--sui-typography-subtitle-bold-font-size);
    font-weight: var(--sui-typography-subtitle-bold-font-weight);
    line-height: var(--sui-typography-subtitle-bold-line-height);
    -webkit-text-decoration: var(--sui-typography-subtitle-bold-text-decoration);
            text-decoration: var(--sui-typography-subtitle-bold-text-decoration);
    text-transform: var(--sui-typography-subtitle-bold-text-transform);
    font-family: var(--sui-font-family);
}

[data-sui-theme-scope] .typography-subtitleMini {
    font-size: var(--sui-typography-subtitle-mini-font-size);
    font-weight: var(--sui-typography-subtitle-mini-font-weight);
    line-height: var(--sui-typography-subtitle-mini-line-height);
    -webkit-text-decoration: var(--sui-typography-subtitle-mini-text-decoration);
            text-decoration: var(--sui-typography-subtitle-mini-text-decoration);
    text-transform: var(--sui-typography-subtitle-mini-text-transform);
    font-family: var(--sui-font-family);
}

[data-sui-theme-scope] .typography-title {
    font-size: var(--sui-typography-title-font-size);
    font-weight: var(--sui-typography-title-font-weight);
    letter-spacing: var(--sui-typography-title-letter-spacing);
    line-height: var(--sui-typography-title-line-height);
    -webkit-text-decoration: var(--sui-typography-title-text-decoration);
            text-decoration: var(--sui-typography-title-text-decoration);
    text-transform: var(--sui-typography-title-text-transform);
    font-family: var(--sui-font-family);
}

[data-sui-theme-scope] .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

[data-sui-theme-scope] .pointer-events-none {
    pointer-events: none;
}

[data-sui-theme-scope] .visible {
    visibility: visible;
}

[data-sui-theme-scope] .invisible {
    visibility: hidden;
}

[data-sui-theme-scope] .collapse {
    visibility: collapse;
}

[data-sui-theme-scope] .static {
    position: static;
}

[data-sui-theme-scope] .fixed {
    position: fixed;
}

[data-sui-theme-scope] .absolute {
    position: absolute;
}

[data-sui-theme-scope] .relative {
    position: relative;
}

[data-sui-theme-scope] .sticky {
    position: sticky;
}

[data-sui-theme-scope] .inset-0 {
    inset: 0px;
}

[data-sui-theme-scope] .bottom-4 {
    bottom: 1rem;
}

[data-sui-theme-scope] .bottom-\[-12px\] {
    bottom: -12px;
}

[data-sui-theme-scope] .bottom-\[0\] {
    bottom: 0;
}

[data-sui-theme-scope] .left-1 {
    left: 0.25rem;
}

[data-sui-theme-scope] .left-1\/2 {
    left: 50%;
}

[data-sui-theme-scope] .left-16 {
    left: 4rem;
}

[data-sui-theme-scope] .right-4 {
    right: 1rem;
}

[data-sui-theme-scope] .right-6 {
    right: 1.5rem;
}

[data-sui-theme-scope] .right-\[50\%\] {
    right: 50%;
}

[data-sui-theme-scope] .top-1 {
    top: 0.25rem;
}

[data-sui-theme-scope] .top-1\/2 {
    top: 50%;
}

[data-sui-theme-scope] .top-6 {
    top: 1.5rem;
}

[data-sui-theme-scope] .top-8 {
    top: 2rem;
}

[data-sui-theme-scope] .top-\[40px\] {
    top: 40px;
}

[data-sui-theme-scope] .z-20 {
    z-index: 20;
}

[data-sui-theme-scope] .z-50 {
    z-index: 50;
}

[data-sui-theme-scope] .z-drawer {
    z-index: 1200;
}

[data-sui-theme-scope] .m-1 {
    margin: 0.25rem;
}

[data-sui-theme-scope] .mx-1 {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

[data-sui-theme-scope] .mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

[data-sui-theme-scope] .mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
}

[data-sui-theme-scope] .mx-\[10px\] {
    margin-left: 10px;
    margin-right: 10px;
}

[data-sui-theme-scope] .mx-sui-2 {
    margin-left: var(--sui-spacing-2);
    margin-right: var(--sui-spacing-2);
}

[data-sui-theme-scope] .my-0 {
    margin-top: 0px;
    margin-bottom: 0px;
}

[data-sui-theme-scope] .my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

[data-sui-theme-scope] .my-3 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

[data-sui-theme-scope] .my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

[data-sui-theme-scope] .my-6 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

[data-sui-theme-scope] .my-\[46px\] {
    margin-top: 46px;
    margin-bottom: 46px;
}

[data-sui-theme-scope] .my-sui-4 {
    margin-top: var(--sui-spacing-4);
    margin-bottom: var(--sui-spacing-4);
}

[data-sui-theme-scope] .-mt-2 {
    margin-top: -0.5rem;
}

[data-sui-theme-scope] .mb-2 {
    margin-bottom: 0.5rem;
}

[data-sui-theme-scope] .mb-3 {
    margin-bottom: 0.75rem;
}

[data-sui-theme-scope] .mb-4 {
    margin-bottom: 1rem;
}

[data-sui-theme-scope] .mb-5 {
    margin-bottom: 1.25rem;
}

[data-sui-theme-scope] .mb-6 {
    margin-bottom: 1.5rem;
}

[data-sui-theme-scope] .mb-7 {
    margin-bottom: 1.75rem;
}

[data-sui-theme-scope] .mb-\[18px\] {
    margin-bottom: 18px;
}

[data-sui-theme-scope] .mb-\[20px\] {
    margin-bottom: 20px;
}

[data-sui-theme-scope] .mb-\[24px\] {
    margin-bottom: 24px;
}

[data-sui-theme-scope] .mb-sui-2 {
    margin-bottom: var(--sui-spacing-2);
}

[data-sui-theme-scope] .ml-0 {
    margin-left: 0px;
}

[data-sui-theme-scope] .ml-1 {
    margin-left: 0.25rem;
}

[data-sui-theme-scope] .ml-2 {
    margin-left: 0.5rem;
}

[data-sui-theme-scope] .ml-3 {
    margin-left: 0.75rem;
}

[data-sui-theme-scope] .ml-4 {
    margin-left: 1rem;
}

[data-sui-theme-scope] .ml-7 {
    margin-left: 1.75rem;
}

[data-sui-theme-scope] .ml-auto {
    margin-left: auto;
}

[data-sui-theme-scope] .ml-sui-0\.5 {
    margin-left: var(--sui-spacing-0\.5);
}

[data-sui-theme-scope] .ml-sui-1\.5 {
    margin-left: var(--sui-spacing-1\.5);
}

[data-sui-theme-scope] .ml-sui-4 {
    margin-left: var(--sui-spacing-4);
}

[data-sui-theme-scope] .mr-0 {
    margin-right: 0px;
}

[data-sui-theme-scope] .mr-1 {
    margin-right: 0.25rem;
}

[data-sui-theme-scope] .mr-1\.5 {
    margin-right: 0.375rem;
}

[data-sui-theme-scope] .mr-2 {
    margin-right: 0.5rem;
}

[data-sui-theme-scope] .mr-3 {
    margin-right: 0.75rem;
}

[data-sui-theme-scope] .mr-4 {
    margin-right: 1rem;
}

[data-sui-theme-scope] .mr-6 {
    margin-right: 1.5rem;
}

[data-sui-theme-scope] .mr-\[10px\] {
    margin-right: 10px;
}

[data-sui-theme-scope] .mr-sui-2\.5 {
    margin-right: var(--sui-spacing-2\.5);
}

[data-sui-theme-scope] .mr-sui-3 {
    margin-right: var(--sui-spacing-3);
}

[data-sui-theme-scope] .mr-sui-8 {
    margin-right: var(--sui-spacing-8);
}

[data-sui-theme-scope] .mt-0\.5 {
    margin-top: 0.125rem;
}

[data-sui-theme-scope] .mt-1 {
    margin-top: 0.25rem;
}

[data-sui-theme-scope] .mt-2 {
    margin-top: 0.5rem;
}

[data-sui-theme-scope] .mt-4 {
    margin-top: 1rem;
}

[data-sui-theme-scope] .mt-6 {
    margin-top: 1.5rem;
}

[data-sui-theme-scope] .mt-7 {
    margin-top: 1.75rem;
}

[data-sui-theme-scope] .mt-\[18px\] {
    margin-top: 18px;
}

[data-sui-theme-scope] .mt-\[42px\] {
    margin-top: 42px;
}

[data-sui-theme-scope] .mt-auto {
    margin-top: auto;
}

[data-sui-theme-scope] .mt-sui-12 {
    margin-top: var(--sui-spacing-12);
}

[data-sui-theme-scope] .mt-sui-4 {
    margin-top: var(--sui-spacing-4);
}

[data-sui-theme-scope] .mt-sui-5\.5 {
    margin-top: var(--sui-spacing-5\.5);
}

[data-sui-theme-scope] .mt-sui-6 {
    margin-top: var(--sui-spacing-6);
}

[data-sui-theme-scope] .block {
    display: block;
}

[data-sui-theme-scope] .inline-block {
    display: inline-block;
}

[data-sui-theme-scope] .inline {
    display: inline;
}

[data-sui-theme-scope] .flex {
    display: flex;
}

[data-sui-theme-scope] .inline-flex {
    display: inline-flex;
}

[data-sui-theme-scope] .table {
    display: table;
}

[data-sui-theme-scope] .grid {
    display: grid;
}

[data-sui-theme-scope] .hidden {
    display: none;
}

[data-sui-theme-scope] .h-10 {
    height: 2.5rem;
}

[data-sui-theme-scope] .h-11 {
    height: 2.75rem;
}

[data-sui-theme-scope] .h-14 {
    height: 3.5rem;
}

[data-sui-theme-scope] .h-4 {
    height: 1rem;
}

[data-sui-theme-scope] .h-5 {
    height: 1.25rem;
}

[data-sui-theme-scope] .h-6 {
    height: 1.5rem;
}

[data-sui-theme-scope] .h-8 {
    height: 2rem;
}

[data-sui-theme-scope] .h-9 {
    height: 2.25rem;
}

[data-sui-theme-scope] .h-\[116px\] {
    height: 116px;
}

[data-sui-theme-scope] .h-\[17\.14px\] {
    height: 17.14px;
}

[data-sui-theme-scope] .h-\[1px\] {
    height: 1px;
}

[data-sui-theme-scope] .h-\[48px\] {
    height: 48px;
}

[data-sui-theme-scope] .h-\[574px\] {
    height: 574px;
}

[data-sui-theme-scope] .h-\[58px\] {
    height: 58px;
}

[data-sui-theme-scope] .h-\[69px\] {
    height: 69px;
}

[data-sui-theme-scope] .h-\[71px\] {
    height: 71px;
}

[data-sui-theme-scope] .h-\[88px\] {
    height: 88px;
}

[data-sui-theme-scope] .h-\[8px\] {
    height: 8px;
}

[data-sui-theme-scope] .h-auto {
    height: auto;
}

[data-sui-theme-scope] .h-full {
    height: 100%;
}

[data-sui-theme-scope] .h-screen {
    height: 100vh;
}

[data-sui-theme-scope] .h-sui-0\.5 {
    height: var(--sui-spacing-0\.5);
}

[data-sui-theme-scope] .h-sui-10 {
    height: var(--sui-spacing-10);
}

[data-sui-theme-scope] .h-sui-12 {
    height: var(--sui-spacing-12);
}

[data-sui-theme-scope] .h-sui-13 {
    height: var(--sui-spacing-13);
}

[data-sui-theme-scope] .h-sui-16 {
    height: var(--sui-spacing-16);
}

[data-sui-theme-scope] .h-sui-4\.5 {
    height: var(--sui-spacing-4\.5);
}

[data-sui-theme-scope] .h-sui-6 {
    height: var(--sui-spacing-6);
}

[data-sui-theme-scope] .h-sui-9 {
    height: var(--sui-spacing-9);
}

[data-sui-theme-scope] .min-h-5 {
    min-height: 1.25rem;
}

[data-sui-theme-scope] .min-h-\[23px\] {
    min-height: 23px;
}

[data-sui-theme-scope] .min-h-\[30px\] {
    min-height: 30px;
}

[data-sui-theme-scope] .min-h-\[36px\] {
    min-height: 36px;
}

[data-sui-theme-scope] .min-h-\[375px\] {
    min-height: 375px;
}

[data-sui-theme-scope] .min-h-\[40px\] {
    min-height: 40px;
}

[data-sui-theme-scope] .min-h-screen {
    min-height: 100vh;
}

[data-sui-theme-scope] .w-1\/2 {
    width: 50%;
}

[data-sui-theme-scope] .w-1\/4 {
    width: 25%;
}

[data-sui-theme-scope] .w-10 {
    width: 2.5rem;
}

[data-sui-theme-scope] .w-12 {
    width: 3rem;
}

[data-sui-theme-scope] .w-14 {
    width: 3.5rem;
}

[data-sui-theme-scope] .w-28 {
    width: 7rem;
}

[data-sui-theme-scope] .w-3\/4 {
    width: 75%;
}

[data-sui-theme-scope] .w-4 {
    width: 1rem;
}

[data-sui-theme-scope] .w-5 {
    width: 1.25rem;
}

[data-sui-theme-scope] .w-\[114px\] {
    width: 114px;
}

[data-sui-theme-scope] .w-\[150px\] {
    width: 150px;
}

[data-sui-theme-scope] .w-\[186px\] {
    width: 186px;
}

[data-sui-theme-scope] .w-\[190px\] {
    width: 190px;
}

[data-sui-theme-scope] .w-\[205px\] {
    width: 205px;
}

[data-sui-theme-scope] .w-\[245px\] {
    width: 245px;
}

[data-sui-theme-scope] .w-\[297px\] {
    width: 297px;
}

[data-sui-theme-scope] .w-\[361px\] {
    width: 361px;
}

[data-sui-theme-scope] .w-\[364px\] {
    width: 364px;
}

[data-sui-theme-scope] .w-\[48px\] {
    width: 48px;
}

[data-sui-theme-scope] .w-\[58px\] {
    width: 58px;
}

[data-sui-theme-scope] .w-\[592px\] {
    width: 592px;
}

[data-sui-theme-scope] .w-\[596px\] {
    width: 596px;
}

[data-sui-theme-scope] .w-\[84px\] {
    width: 84px;
}

[data-sui-theme-scope] .w-\[8px\] {
    width: 8px;
}

[data-sui-theme-scope] .w-full {
    width: 100%;
}

[data-sui-theme-scope] .w-sui-7 {
    width: var(--sui-spacing-7);
}

[data-sui-theme-scope] .\!min-w-0 {
    min-width: 0px !important;
}

[data-sui-theme-scope] .min-w-\[120px\] {
    min-width: 120px;
}

[data-sui-theme-scope] .min-w-\[140px\] {
    min-width: 140px;
}

[data-sui-theme-scope] .min-w-\[260px\] {
    min-width: 260px;
}

[data-sui-theme-scope] .\!max-w-\[70px\] {
    max-width: 70px !important;
}

[data-sui-theme-scope] .max-w-16 {
    max-width: 4rem;
}

[data-sui-theme-scope] .max-w-\[300px\] {
    max-width: 300px;
}

[data-sui-theme-scope] .max-w-\[460px\] {
    max-width: 460px;
}

[data-sui-theme-scope] .max-w-\[48px\] {
    max-width: 48px;
}

[data-sui-theme-scope] .max-w-\[600px\] {
    max-width: 600px;
}

[data-sui-theme-scope] .flex-1 {
    flex: 1 1 0%;
}

[data-sui-theme-scope] .flex-none {
    flex: none;
}

[data-sui-theme-scope] .flex-shrink-0 {
    flex-shrink: 0;
}

[data-sui-theme-scope] .shrink {
    flex-shrink: 1;
}

[data-sui-theme-scope] .flex-grow {
    flex-grow: 1;
}

[data-sui-theme-scope] .grow {
    flex-grow: 1;
}

[data-sui-theme-scope] .basis-full {
    flex-basis: 100%;
}

[data-sui-theme-scope] .-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

[data-sui-theme-scope] .-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

[data-sui-theme-scope] .translate-x-\[0\%\] {
    --tw-translate-x: 0%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

[data-sui-theme-scope] .translate-x-\[100\%\] {
    --tw-translate-x: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

[data-sui-theme-scope] .translate-x-\[50\%\] {
    --tw-translate-x: 50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

[data-sui-theme-scope] .translate-y-\[100\%\] {
    --tw-translate-y: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

[data-sui-theme-scope] .translate-y-\[50\%\] {
    --tw-translate-y: 50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

[data-sui-theme-scope] .transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

[data-sui-theme-scope] .cursor-default {
    cursor: default;
}

[data-sui-theme-scope] .cursor-not-allowed {
    cursor: not-allowed;
}

[data-sui-theme-scope] .cursor-pointer {
    cursor: pointer;
}

[data-sui-theme-scope] .resize {
    resize: both;
}

[data-sui-theme-scope] .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

[data-sui-theme-scope] .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

[data-sui-theme-scope] .flex-row {
    flex-direction: row;
}

[data-sui-theme-scope] .flex-col {
    flex-direction: column;
}

[data-sui-theme-scope] .flex-wrap {
    flex-wrap: wrap;
}

[data-sui-theme-scope] .items-start {
    align-items: flex-start;
}

[data-sui-theme-scope] .items-center {
    align-items: center;
}

[data-sui-theme-scope] .justify-start {
    justify-content: flex-start;
}

[data-sui-theme-scope] .justify-center {
    justify-content: center;
}

[data-sui-theme-scope] .justify-between {
    justify-content: space-between;
}

[data-sui-theme-scope] .gap-1 {
    gap: 0.25rem;
}

[data-sui-theme-scope] .gap-1\.5 {
    gap: 0.375rem;
}

[data-sui-theme-scope] .gap-2 {
    gap: 0.5rem;
}

[data-sui-theme-scope] .gap-2\.5 {
    gap: 0.625rem;
}

[data-sui-theme-scope] .gap-3 {
    gap: 0.75rem;
}

[data-sui-theme-scope] .gap-3\.5 {
    gap: 0.875rem;
}

[data-sui-theme-scope] .gap-4 {
    gap: 1rem;
}

[data-sui-theme-scope] .gap-\[10px\] {
    gap: 10px;
}

[data-sui-theme-scope] .gap-\[12px\] {
    gap: 12px;
}

[data-sui-theme-scope] .gap-\[14px\] {
    gap: 14px;
}

[data-sui-theme-scope] .gap-\[28px\] {
    gap: 28px;
}

[data-sui-theme-scope] .gap-sui-1\.5 {
    gap: var(--sui-spacing-1\.5);
}

[data-sui-theme-scope] .gap-sui-2 {
    gap: var(--sui-spacing-2);
}

[data-sui-theme-scope] .gap-sui-3 {
    gap: var(--sui-spacing-3);
}

[data-sui-theme-scope] .self-start {
    align-self: flex-start;
}

[data-sui-theme-scope] .overflow-hidden {
    overflow: hidden;
}

[data-sui-theme-scope] .overflow-scroll {
    overflow: scroll;
}

[data-sui-theme-scope] .overflow-y-auto {
    overflow-y: auto;
}

[data-sui-theme-scope] .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-sui-theme-scope] .whitespace-nowrap {
    white-space: nowrap;
}

[data-sui-theme-scope] .break-words {
    overflow-wrap: break-word;
}

[data-sui-theme-scope] .border-none {
    border-style: none;
}

[data-sui-theme-scope] .border-\[\#72757A4D\] {
    border-color: #72757A4D;
}

[data-sui-theme-scope] .border-green-500 {
    --tw-border-opacity: 1;
    border-color: rgb(34 197 94 / var(--tw-border-opacity));
}

[data-sui-theme-scope] .border-neutral-500 {
    --tw-border-opacity: 1;
    border-color: rgb(115 115 115 / var(--tw-border-opacity));
}

[data-sui-theme-scope] .border-neutral-b0-t10 {
    border-color: var(--sui-colors-neutral-b0-t10);
}

[data-sui-theme-scope] .border-neutral-b0-t20 {
    border-color: var(--sui-colors-neutral-b0-t20);
}

[data-sui-theme-scope] .border-neutral-b0\/20 {
    border-color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * 0.2));
}

[data-sui-theme-scope] .border-neutral-b4 {
    --tw-border-opacity: 1;
    border-color: rgb(var(--s-neutral-b4), calc(var(--s-neutral-b4-opacity, 1) * var(--tw-border-opacity)));
}

[data-sui-theme-scope] .border-neutral-w0 {
    --tw-border-opacity: 1;
    border-color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--tw-border-opacity)));
}

[data-sui-theme-scope] .border-primary-f {
    --tw-border-opacity: 1;
    border-color: rgb(var(--s-primary-f), calc(var(--s-primary-f-opacity, 1) * var(--tw-border-opacity)));
}

[data-sui-theme-scope] .bg-\[rgba\(6\2c 111\2c 172\2c 0\.1\)\] {
    background-color: rgba(6,111,172,0.1);
}

[data-sui-theme-scope] .bg-danger\/10 {
    background-color: rgb(var(--s-danger), calc(var(--s-danger-opacity, 1) * 0.1));
}

[data-sui-theme-scope] .bg-neutral-b0-t10 {
    background-color: var(--sui-colors-neutral-b0-t10);
}

[data-sui-theme-scope] .bg-neutral-b2 {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-bg-opacity)));
}

[data-sui-theme-scope] .bg-neutral-b4 {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--s-neutral-b4), calc(var(--s-neutral-b4-opacity, 1) * var(--tw-bg-opacity)));
}

[data-sui-theme-scope] .bg-neutral-b5 {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--s-neutral-b5), calc(var(--s-neutral-b5-opacity, 1) * var(--tw-bg-opacity)));
}

[data-sui-theme-scope] .bg-neutral-b5-t90 {
    background-color: var(--sui-colors-neutral-b5-t90);
}

[data-sui-theme-scope] .bg-neutral-base {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-bg-opacity)));
}

[data-sui-theme-scope] .bg-primary-f {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--s-primary-f), calc(var(--s-primary-f-opacity, 1) * var(--tw-bg-opacity)));
}

[data-sui-theme-scope] .bg-primary-f\/10 {
    background-color: rgb(var(--s-primary-f), calc(var(--s-primary-f-opacity, 1) * 0.1));
}

[data-sui-theme-scope] .bg-primary-t10 {
    background-color: var(--sui-colors-primary-t10);
}

[data-sui-theme-scope] .bg-success-t10 {
    background-color: var(--sui-colors-success-t10);
}

[data-sui-theme-scope] .bg-transparent {
    background-color: transparent;
}

[data-sui-theme-scope] .bg-warning-t10 {
    background-color: var(--sui-colors-warning-t10);
}

[data-sui-theme-scope] .bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

[data-sui-theme-scope] .bg-opacity-30 {
    --tw-bg-opacity: 0.3;
}

[data-sui-theme-scope] .bg-ai-accent {
    background-image: linear-gradient(135deg, rgb(var(--s-ai-accent-0), var(--tw-bg-opacity, 1)) 0%, rgb(var(--s-ai-accent-1), var(--tw-bg-opacity, 1)) 50%, rgb(var(--s-ai-accent-2), var(--tw-bg-opacity, 1)) 100%);
}

[data-sui-theme-scope] .object-contain {
    object-fit: contain;
}

[data-sui-theme-scope] .\!p-2 {
    padding: 0.5rem !important;
}

[data-sui-theme-scope] .p-0 {
    padding: 0px;
}

[data-sui-theme-scope] .p-4 {
    padding: 1rem;
}

[data-sui-theme-scope] .p-6 {
    padding: 1.5rem;
}

[data-sui-theme-scope] .p-\[2px\] {
    padding: 2px;
}

[data-sui-theme-scope] .p-sui-0\.5 {
    padding: var(--sui-spacing-0\.5);
}

[data-sui-theme-scope] .p-sui-2 {
    padding: var(--sui-spacing-2);
}

[data-sui-theme-scope] .p-sui-6 {
    padding: var(--sui-spacing-6);
}

[data-sui-theme-scope] .px-0 {
    padding-left: 0px;
    padding-right: 0px;
}

[data-sui-theme-scope] .px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

[data-sui-theme-scope] .px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

[data-sui-theme-scope] .px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

[data-sui-theme-scope] .px-\[2px\] {
    padding-left: 2px;
    padding-right: 2px;
}

[data-sui-theme-scope] .px-sui-3 {
    padding-left: var(--sui-spacing-3);
    padding-right: var(--sui-spacing-3);
}

[data-sui-theme-scope] .px-sui-4 {
    padding-left: var(--sui-spacing-4);
    padding-right: var(--sui-spacing-4);
}

[data-sui-theme-scope] .py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
}

[data-sui-theme-scope] .py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

[data-sui-theme-scope] .py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

[data-sui-theme-scope] .py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

[data-sui-theme-scope] .py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

[data-sui-theme-scope] .py-\[10px\] {
    padding-top: 10px;
    padding-bottom: 10px;
}

[data-sui-theme-scope] .py-sui-2 {
    padding-top: var(--sui-spacing-2);
    padding-bottom: var(--sui-spacing-2);
}

[data-sui-theme-scope] .py-sui-2\.5 {
    padding-top: var(--sui-spacing-2\.5);
    padding-bottom: var(--sui-spacing-2\.5);
}

[data-sui-theme-scope] .py-sui-3 {
    padding-top: var(--sui-spacing-3);
    padding-bottom: var(--sui-spacing-3);
}

[data-sui-theme-scope] .pb-2 {
    padding-bottom: 0.5rem;
}

[data-sui-theme-scope] .pb-4 {
    padding-bottom: 1rem;
}

[data-sui-theme-scope] .pb-6 {
    padding-bottom: 1.5rem;
}

[data-sui-theme-scope] .pb-\[14px\] {
    padding-bottom: 14px;
}

[data-sui-theme-scope] .pb-\[20px\] {
    padding-bottom: 20px;
}

[data-sui-theme-scope] .pb-sui-5 {
    padding-bottom: var(--sui-spacing-5);
}

[data-sui-theme-scope] .pl-0 {
    padding-left: 0px;
}

[data-sui-theme-scope] .pl-1 {
    padding-left: 0.25rem;
}

[data-sui-theme-scope] .pl-\[10px\] {
    padding-left: 10px;
}

[data-sui-theme-scope] .pl-sui-4 {
    padding-left: var(--sui-spacing-4);
}

[data-sui-theme-scope] .pr-3 {
    padding-right: 0.75rem;
}

[data-sui-theme-scope] .pr-9 {
    padding-right: 2.25rem;
}

[data-sui-theme-scope] .pr-\[10px\] {
    padding-right: 10px;
}

[data-sui-theme-scope] .pt-0 {
    padding-top: 0px;
}

[data-sui-theme-scope] .pt-2 {
    padding-top: 0.5rem;
}

[data-sui-theme-scope] .pt-6 {
    padding-top: 1.5rem;
}

[data-sui-theme-scope] .pt-\[30px\] {
    padding-top: 30px;
}

[data-sui-theme-scope] .pt-\[34px\] {
    padding-top: 34px;
}

[data-sui-theme-scope] .text-left {
    text-align: left;
}

[data-sui-theme-scope] .text-center {
    text-align: center;
}

[data-sui-theme-scope] .text-\[10px\] {
    font-size: 10px;
}

[data-sui-theme-scope] .text-\[12px\] {
    font-size: 12px;
}

[data-sui-theme-scope] .text-\[13px\] {
    font-size: 13px;
}

[data-sui-theme-scope] .text-\[14px\] {
    font-size: 14px;
}

[data-sui-theme-scope] .text-\[17px\] {
    font-size: 17px;
}

[data-sui-theme-scope] .text-\[18px\] {
    font-size: 18px;
}

[data-sui-theme-scope] .text-\[9px\] {
    font-size: 9px;
}

[data-sui-theme-scope] .font-bold {
    font-weight: 700;
}

[data-sui-theme-scope] .font-medium {
    font-weight: 500;
}

[data-sui-theme-scope] .font-normal {
    font-weight: 400;
}

[data-sui-theme-scope] .uppercase {
    text-transform: uppercase;
}

[data-sui-theme-scope] .capitalize {
    text-transform: capitalize;
}

[data-sui-theme-scope] .italic {
    font-style: italic;
}

[data-sui-theme-scope] .leading-5 {
    line-height: 1.25rem;
}

[data-sui-theme-scope] .leading-\[25px\] {
    line-height: 25px;
}

[data-sui-theme-scope] .leading-normal {
    line-height: 1.5;
}

[data-sui-theme-scope] .tracking-\[-0\.2px\] {
    letter-spacing: -0.2px;
}

[data-sui-theme-scope] .text-\[\#184D74\] {
    --tw-text-opacity: 1;
    color: rgb(24 77 116 / var(--tw-text-opacity));
}

[data-sui-theme-scope] .text-\[\#666666\] {
    --tw-text-opacity: 1;
    color: rgb(102 102 102 / var(--tw-text-opacity));
}

[data-sui-theme-scope] .text-ai {
    --tw-text-opacity: 1;
    color: rgb(var(--s-ai), calc(var(--s-ai-opacity, 1) * var(--tw-text-opacity)));
}

[data-sui-theme-scope] .text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
}

[data-sui-theme-scope] .text-extra-tiffany {
    --tw-text-opacity: 1;
    color: rgb(var(--s-extra-tiffany), calc(var(--s-extra-tiffany-opacity, 1) * var(--tw-text-opacity)));
}

[data-sui-theme-scope] .text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity));
}

[data-sui-theme-scope] .text-neutral-b0 {
    --tw-text-opacity: 1;
    color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));
}

[data-sui-theme-scope] .text-neutral-b1 {
    --tw-text-opacity: 1;
    color: rgb(var(--s-neutral-b1), calc(var(--s-neutral-b1-opacity, 1) * var(--tw-text-opacity)));
}

[data-sui-theme-scope] .text-neutral-b2 {
    --tw-text-opacity: 1;
    color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-text-opacity)));
}

[data-sui-theme-scope] .text-neutral-b3 {
    --tw-text-opacity: 1;
    color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-text-opacity)));
}

[data-sui-theme-scope] .text-neutral-base {
    --tw-text-opacity: 1;
    color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-text-opacity)));
}

[data-sui-theme-scope] .text-neutral-static-b0 {
    --tw-text-opacity: 1;
    color: rgb(var(--s-neutral-static-b0), calc(var(--s-neutral-static-b0-opacity, 1) * var(--tw-text-opacity)));
}

[data-sui-theme-scope] .text-primary-f {
    --tw-text-opacity: 1;
    color: rgb(var(--s-primary-f), calc(var(--s-primary-f-opacity, 1) * var(--tw-text-opacity)));
}

[data-sui-theme-scope] .text-primary-f-high-contrast {
    --tw-text-opacity: 1;
    color: rgb(var(--s-primary-f-high-contrast), calc(var(--s-primary-f-high-contrast-opacity, 1) * var(--tw-text-opacity)));
}

[data-sui-theme-scope] .text-primary-f\/20 {
    color: rgb(var(--s-primary-f), calc(var(--s-primary-f-opacity, 1) * 0.2));
}

[data-sui-theme-scope] .text-success-f {
    --tw-text-opacity: 1;
    color: rgb(var(--s-success-f), calc(var(--s-success-f-opacity, 1) * var(--tw-text-opacity)));
}

[data-sui-theme-scope] .text-success-high-contrast {
    --tw-text-opacity: 1;
    color: rgb(var(--s-success-high-contrast), calc(var(--s-success-high-contrast-opacity, 1) * var(--tw-text-opacity)));
}

[data-sui-theme-scope] .text-warning-f {
    --tw-text-opacity: 1;
    color: rgb(var(--s-warning-f), calc(var(--s-warning-f-opacity, 1) * var(--tw-text-opacity)));
}

[data-sui-theme-scope] .text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

[data-sui-theme-scope] .underline {
    text-decoration-line: underline;
}

[data-sui-theme-scope] .no-underline {
    text-decoration-line: none;
}

[data-sui-theme-scope] .decoration-solid {
    text-decoration-style: solid;
}

[data-sui-theme-scope] .decoration-1 {
    text-decoration-thickness: 1px;
}

[data-sui-theme-scope] .underline-offset-2 {
    text-underline-offset: 2px;
}

[data-sui-theme-scope] .opacity-50 {
    opacity: 0.5;
}

[data-sui-theme-scope] .opacity-60 {
    opacity: 0.6;
}

[data-sui-theme-scope] .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

[data-sui-theme-scope] .shadow-\[0px_10px_20px_-10px_\#00000033\] {
    --tw-shadow: 0px 10px 20px -10px #00000033;
    --tw-shadow-colored: 0px 10px 20px -10px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

[data-sui-theme-scope] .shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

[data-sui-theme-scope] .shadow-sui-md {
    --tw-shadow: var(--sui-box-shadow-md);
    --tw-shadow-colored: var(--sui-box-shadow-md);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

[data-sui-theme-scope] .outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

[data-sui-theme-scope] .outline {
    outline-style: solid;
}

[data-sui-theme-scope] .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

[data-sui-theme-scope] .filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

[data-sui-theme-scope] .transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

[data-sui-theme-scope] .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

[data-sui-theme-scope] .duration-300 {
    transition-duration: 300ms;
}

[data-sui-theme-scope] .ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-sui-theme-scope] .rounded {
    border-radius: 0.25rem;
    --sui-focus-ring-border-radius: 0.25rem;
}

[data-sui-theme-scope] .rounded-3xl {
    border-radius: 1.5rem;
    --sui-focus-ring-border-radius: 1.5rem;
}

[data-sui-theme-scope] .rounded-\[10px\] {
    border-radius: 10px;
    --sui-focus-ring-border-radius: 10px;
}

[data-sui-theme-scope] .rounded-\[20px\] {
    border-radius: 20px;
    --sui-focus-ring-border-radius: 20px;
}

[data-sui-theme-scope] .rounded-\[24px\] {
    border-radius: 24px;
    --sui-focus-ring-border-radius: 24px;
}

[data-sui-theme-scope] .rounded-full {
    border-radius: 9999px;
    --sui-focus-ring-border-radius: 9999px;
}

[data-sui-theme-scope] .rounded-lg {
    border-radius: 0.5rem;
    --sui-focus-ring-border-radius: 0.5rem;
}

[data-sui-theme-scope] .rounded-none {
    border-radius: 0px;
    --sui-focus-ring-border-radius: 0px;
}

[data-sui-theme-scope] .rounded-sui-circle {
    border-radius: var(--sui-border-radius-circle);
    --sui-focus-ring-border-radius: var(--sui-border-radius-circle);
}

[data-sui-theme-scope] .rounded-sui-lg {
    border-radius: var(--sui-border-radius-lg);
    --sui-focus-ring-border-radius: var(--sui-border-radius-lg);
}

[data-sui-theme-scope] .rounded-sui-sm {
    border-radius: var(--sui-border-radius-sm);
    --sui-focus-ring-border-radius: var(--sui-border-radius-sm);
}

[data-sui-theme-scope] .\!border {
    border-width: 1px !important;
    --sui-focus-ring-border-width: 1px !important;
}

[data-sui-theme-scope] .border {
    border-width: 1px;
    --sui-focus-ring-border-width: 1px;
}

[data-sui-theme-scope] .border-0 {
    border-width: 0px;
    --sui-focus-ring-border-width: 0px;
}

[data-sui-theme-scope] .border-\[0\.5px\] {
    border-width: 0.5px;
    --sui-focus-ring-border-width: 0.5px;
}

[data-sui-theme-scope] .border-\[1\.5px\] {
    border-width: 1.5px;
    --sui-focus-ring-border-width: 1.5px;
}

[data-sui-theme-scope] .border-\[1px\] {
    border-width: 1px;
    --sui-focus-ring-border-width: 1px;
}

[data-sui-theme-scope] .border-sui-1 {
    border-width: var(--sui-border-width-1);
    --sui-focus-ring-border-width: var(--sui-border-width-1);
}

[data-sui-theme-scope] .border-none {
    --sui-focus-ring-border-width-recoup: 0;
}

@media (prefers-reduced-motion: no-preference) {

    [data-sui-theme-scope] .transition {
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
    }

    [data-sui-theme-scope] .transition-all {
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
    }

    [data-sui-theme-scope] .duration-300 {
        transition-duration: 300ms;
    }

    [data-sui-theme-scope] .ease-in-out {
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
}

[data-sui-theme-scope] .\[text-decoration-skip-ink\:auto\] {
    text-decoration-skip-ink: auto;
}

* {
    box-sizing: border-box;
}

body {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-color: transparent;
}

#root {
    height: 100%;
    width: 100%;
}

.white-bg {
    background-color: #fff !important;
}

[with-required-asterisk]::after {
    display: inline-block;
    color: var(--accent-orange);
    font-size: 14px;
    margin-left: 1px;
    content: '*';
}

@media (min-width: 772px) {

    [data-sui-theme-scope] .wr\:typography-mainText {
        font-size: var(--sui-typography-main-text-font-size);
        font-weight: var(--sui-typography-main-text-font-weight);
        line-height: var(--sui-typography-main-text-line-height);
        -webkit-text-decoration: var(--sui-typography-main-text-text-decoration);
                text-decoration: var(--sui-typography-main-text-text-decoration);
        text-transform: var(--sui-typography-main-text-text-transform);
        font-family: var(--sui-font-family);
    }
}

[data-sui-theme-scope] .hover\:bg-primary-f\/10:hover {
    background-color: rgb(var(--s-primary-f), calc(var(--s-primary-f-opacity, 1) * 0.1));
}

[data-sui-theme-scope] .focus\:shadow-none:focus {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

[data-sui-theme-scope] .focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

[data-sui-theme-scope] :is(.group:hover .group-hover\:visible) {
    visibility: visible;
}

[data-sui-theme-scope] :is(.group:hover .group-hover\:flex) {
    display: flex;
}

[data-sui-theme-scope] :is(.group:hover .group-hover\:w-\[205px\]) {
    width: 205px;
}

[data-sui-theme-scope] :is(.group:hover .group-hover\:border-neutral-b0-t20) {
    border-color: var(--sui-colors-neutral-b0-t20);
}

[data-sui-theme-scope] :is(.group:hover .group-hover\:bg-neutral-base) {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--tw-bg-opacity)));
}

[data-sui-theme-scope] :is(.group:hover .group-hover\:px-sui-3) {
    padding-left: var(--sui-spacing-3);
    padding-right: var(--sui-spacing-3);
}

[data-sui-theme-scope] :is(.group:hover .group-hover\:border-sui-1) {
    border-width: var(--sui-border-width-1);
    --sui-focus-ring-border-width: var(--sui-border-width-1);
}

@media (min-width: 393px) {

    [data-sui-theme-scope] .sm\:flex {
        display: flex;
    }

    [data-sui-theme-scope] .sm\:hidden {
        display: none;
    }

    [data-sui-theme-scope] .sm\:w-\[574px\] {
        width: 574px;
    }
}

@media (min-width: 772px) {

    [data-sui-theme-scope] .wr\:left-16 {
        left: 4rem;
    }

    [data-sui-theme-scope] .wr\:mx-2 {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    [data-sui-theme-scope] .wr\:mb-5 {
        margin-bottom: 1.25rem;
    }

    [data-sui-theme-scope] .wr\:ml-0 {
        margin-left: 0px;
    }

    [data-sui-theme-scope] .wr\:mr-0 {
        margin-right: 0px;
    }

    [data-sui-theme-scope] .wr\:block {
        display: block;
    }

    [data-sui-theme-scope] .wr\:inline {
        display: inline;
    }

    [data-sui-theme-scope] .wr\:hidden {
        display: none;
    }

    [data-sui-theme-scope] .wr\:h-\[212px\] {
        height: 212px;
    }

    [data-sui-theme-scope] .wr\:h-\[92px\] {
        height: 92px;
    }

    [data-sui-theme-scope] .wr\:max-h-\[460px\] {
        max-height: 460px;
    }

    [data-sui-theme-scope] .wr\:w-\[656px\] {
        width: 656px;
    }

    [data-sui-theme-scope] .wr\:min-w-\[220px\] {
        min-width: 220px;
    }

    [data-sui-theme-scope] .wr\:max-w-\[298px\] {
        max-width: 298px;
    }

    [data-sui-theme-scope] .wr\:max-w-\[575px\] {
        max-width: 575px;
    }

    [data-sui-theme-scope] .wr\:max-w-\[600px\] {
        max-width: 600px;
    }

    [data-sui-theme-scope] .wr\:flex-row {
        flex-direction: row;
    }

    [data-sui-theme-scope] .wr\:flex-col {
        flex-direction: column;
    }

    [data-sui-theme-scope] .wr\:justify-between {
        justify-content: space-between;
    }

    [data-sui-theme-scope] .wr\:px-0 {
        padding-left: 0px;
        padding-right: 0px;
    }

    [data-sui-theme-scope] .wr\:px-16 {
        padding-left: 4rem;
        padding-right: 4rem;
    }

    [data-sui-theme-scope] .wr\:px-9 {
        padding-left: 2.25rem;
        padding-right: 2.25rem;
    }

    [data-sui-theme-scope] .wr\:pb-0 {
        padding-bottom: 0px;
    }

    [data-sui-theme-scope] .wr\:pl-16 {
        padding-left: 4rem;
    }

    [data-sui-theme-scope] .wr\:pr-10 {
        padding-right: 2.5rem;
    }

    [data-sui-theme-scope] .wr\:pt-16 {
        padding-top: 4rem;
    }

    [data-sui-theme-scope] .wr\:pt-\[40px\] {
        padding-top: 40px;
    }

    [data-sui-theme-scope] .wr\:text-primary-f {
        --tw-text-opacity: 1;
        color: rgb(var(--s-primary-f), calc(var(--s-primary-f-opacity, 1) * var(--tw-text-opacity)));
    }
}

@media (min-width: 1228px) {

    [data-sui-theme-scope] .xmd\:block {
        display: block;
    }

    [data-sui-theme-scope] .xmd\:w-1\/2 {
        width: 50%;
    }
}

@media (min-width: 1440px) {

    [data-sui-theme-scope] .xl\:mb-5 {
        margin-bottom: 1.25rem;
    }

    [data-sui-theme-scope] .xl\:block {
        display: block;
    }

    [data-sui-theme-scope] .xl\:max-h-\[460px\] {
        max-height: 460px;
    }

    [data-sui-theme-scope] .xl\:max-w-\[575px\] {
        max-width: 575px;
    }

    [data-sui-theme-scope] .xl\:max-w-\[600px\] {
        max-width: 600px;
    }

    [data-sui-theme-scope] .xl\:px-\[100px\] {
        padding-left: 100px;
        padding-right: 100px;
    }
}

[data-sui-theme-scope] :is(.\[\&_svg\]\:\!text-neutral-b0 svg) {
    --tw-text-opacity: 1 !important;
    color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity))) !important;
}