Version: 0.7 Alpha by [abreu.marcos@gmail.com]
Ultimate collection of customizable UI elements to design professional mobile and web apps
Supporting text that is long enough to fill up multiple lines.
Two-line snackbar message
with action
مرحبا بكم في نعمان الظافر
@font-face {
font-family: ‘sourcesanspro’;
font-style: normal;
font-weight: 400;
font-display: block;
src: url(https://design.penpot.app/fonts/sourcesanspro-regular.woff) format(‘woff’);
}
/* cyrillic-ext */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWub2bVmZiArmlw.woff2) format(‘woff2’);
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWub2bVmQiArmlw.woff2) format(‘woff2’);
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWub2bVmYiArmlw.woff2) format(‘woff2’);
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWub2bVmXiArmlw.woff2) format(‘woff2’);
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* math */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWub2bVnoiArmlw.woff2) format(‘woff2’);
unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWub2bVn6iArmlw.woff2) format(‘woff2’);
unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* vietnamese */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWub2bVmbiArmlw.woff2) format(‘woff2’);
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWub2bVmaiArmlw.woff2) format(‘woff2’);
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWub2bVmUiAo.woff2) format(‘woff2’);
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmZiArmlw.woff2) format(‘woff2’);
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmQiArmlw.woff2) format(‘woff2’);
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmYiArmlw.woff2) format(‘woff2’);
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmXiArmlw.woff2) format(‘woff2’);
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* math */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVnoiArmlw.woff2) format(‘woff2’);
unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVn6iArmlw.woff2) format(‘woff2’);
unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* vietnamese */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmbiArmlw.woff2) format(‘woff2’);
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmaiArmlw.woff2) format(‘woff2’);
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmUiAo.woff2) format(‘woff2’);
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYjalmZiArmlw.woff2) format(‘woff2’);
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYjalmQiArmlw.woff2) format(‘woff2’);
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYjalmYiArmlw.woff2) format(‘woff2’);
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYjalmXiArmlw.woff2) format(‘woff2’);
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* math */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYjalnoiArmlw.woff2) format(‘woff2’);
unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYjaln6iArmlw.woff2) format(‘woff2’);
unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* vietnamese */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYjalmbiArmlw.woff2) format(‘woff2’);
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYjalmaiArmlw.woff2) format(‘woff2’);
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYjalmUiAo.woff2) format(‘woff2’);
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuaabVmZiArmlw.woff2) format(‘woff2’);
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuaabVmQiArmlw.woff2) format(‘woff2’);
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuaabVmYiArmlw.woff2) format(‘woff2’);
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuaabVmXiArmlw.woff2) format(‘woff2’);
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* math */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuaabVnoiArmlw.woff2) format(‘woff2’);
unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuaabVn6iArmlw.woff2) format(‘woff2’);
unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* vietnamese */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuaabVmbiArmlw.woff2) format(‘woff2’);
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuaabVmaiArmlw.woff2) format(‘woff2’);
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuaabVmUiAo.woff2) format(‘woff2’);
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html, body {
margin: 0;
min-height: 100%;
min-width: 100%;
padding: 0;
}
body {
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
min-height: 100vh;
}
* {
box-sizing: border-box;
}
.text-node { background-clip: text !important; -webkit-background-clip: text !important; }
/* مرحبا بكم في نعمان الظافر */
.b603231cf5ae {
position: absolute;
left: 718px;
top: 10px;
width: 553px;
height: 64px;
}
.b603231cf5ae .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.b603231cf5ae .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
min-width: 100%;
margin-right: 1px;
vertical-align: top;
}
.b603231cf5ae .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: center;
}
.b603231cf5ae .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(0, 0, 0, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: break-spaces;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(0, 0, 0, 1);
text-decoration: none;
letter-spacing: 0px;
font-family: “sourcesanspro”;
font-style: normal;
font-weight: 400;
}
/* Ellipse */
.ellipse-b602ea7298ea {
position: absolute;
left: 885px;
top: -249px;
width: 221px;
height: 221px;
background: #570688;
border-radius: 50%;
}
/* Rectangle */
.rectangle-b6030771d4f5 {
position: absolute;
left: 552px;
top: -401px;
width: 868px;
height: 526px;
background: #B1B2B5;
border-radius: 0px;
}
/* Cover */
.cover-3a1f95940f03 {
position: relative;
width: 1390px;
height: 724px;
background: radial-gradient(circle, rgba(149, 126, 210, 1) 0%,rgba(193, 171, 252, 1) 100%);
border-radius: 0px;
overflow: hidden;
z-index: 0;
}
/* Group */
.group-5aea35acc724 {
position: absolute;
left: 34px;
top: 25px;
width: 1509px;
height: 628px;
opacity: 0.75;
}
/* Button / Segmented / Segmented Button [selected] */
.button-s-5ae9e8483a12 {
position: absolute;
left: 248.41px;
top: 85.1px;
width: 310px;
height: 48px;
border-radius: 0px;
overflow: hidden;
display: flex;
align-items: center;
align-content: stretch;
justify-content: start;
flex-direction: row;
flex-wrap: nowrap;
}
/* List Container */
.list-conta-5ae9e8483a13 {
position: relative;
width: auto;
height: auto;
border-radius: 0px;
overflow: hidden;
display: flex;
align-items: center;
align-content: stretch;
justify-content: start;
flex-direction: row;
flex-wrap: nowrap;
margin: 4px 4px 4px 4px;
min-height: 40px;
min-width: 302px;
}
/* Last Segment */
.last-segme-5ae9e8483a14 {
position: relative;
width: auto;
height: auto;
border-radius: 0px;
display: flex;
align-items: start;
align-content: stretch;
justify-content: start;
flex-direction: row;
flex-wrap: nowrap;
}
/* Disabled */
.disabled-5ae9e8483a15 {
position: absolute;
left: 0px;
top: 0px;
width: 104px;
height: 40px;
border: 1px solid rgba(28, 27, 31, 0.12);
border-radius: 0px 20px 20px 0px;
overflow: hidden;
display: none;
align-items: center;
align-content: stretch;
justify-content: start;
gap: 8px;
padding: 0px 12px 0px 12px;
flex-direction: row;
flex-wrap: nowrap;
flex-shrink: 0;
margin: 0px 0px 0px -1px;
min-width: 80px;
}
/* Label */
.label-5ae9e8483a16 {
height: 18px;
flex: 1;
flex-shrink: 0;
align-self: center;
}
.label-5ae9e8483a16 .root-0 {
display: flex;
white-space: break-spaces;
align-items: center;
}
.label-5ae9e8483a16 .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
min-width: 100%;
margin-right: 1px;
vertical-align: top;
}
.label-5ae9e8483a16 .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.label-5ae9e8483a16 .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(28, 27, 31, 0.38);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: break-spaces;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(28, 27, 31, 0.38);
text-decoration: none;
letter-spacing: 0.01px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* grade_FILL0_wght400_GRAD0_opsz48 */
.grade-fill-5ae9e8483a17 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.grade-fill-5ae9e8483a17 {
position: relative;
width: 18px;
height: 18px;
flex-shrink: 0;
align-self: center;
}
/* svg-path */
.svgpath-5ae9e8483a19 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.svgpath-5ae9e8483a19 {
position: absolute;
left: 1.5px;
top: 2.25px;
width: 15px;
height: 14.25px;
}
/* base-background */
.basebackg-5ae9e8483a18 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.basebackg-5ae9e8483a18 {
position: absolute;
left: 0px;
top: 0px;
width: 18px;
height: 18px;
display: none;
}
/* Selected */
.selected-5ae9e8483a1a {
position: absolute;
left: 0px;
top: 0px;
width: 104px;
height: 40px;
background: #E8DEF8;
border: 1px solid #FFFFFF;
border-radius: 0px 20px 20px 0px;
overflow: hidden;
display: none;
align-items: center;
align-content: stretch;
justify-content: start;
gap: 8px;
padding: 0px 12px 0px 12px;
flex-direction: row;
flex-wrap: nowrap;
flex-shrink: 0;
margin: 0px 0px 0px -1px;
min-width: 80px;
}
/* Label */
.label-5ae9e8483a1b {
height: 18px;
flex: 1;
flex-shrink: 0;
align-self: center;
}
.label-5ae9e8483a1b .root-0 {
display: flex;
white-space: break-spaces;
align-items: center;
}
.label-5ae9e8483a1b .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
min-width: 100%;
margin-right: 1px;
vertical-align: top;
}
.label-5ae9e8483a1b .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.label-5ae9e8483a1b .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(30, 25, 43, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: break-spaces;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(30, 25, 43, 1);
text-decoration: none;
letter-spacing: 0.01px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* check_FILL0_wght400_GRAD0_opsz48 */
.check-fill-5ae9e8483a1c > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.check-fill-5ae9e8483a1c {
position: relative;
width: 18px;
height: 18px;
flex-shrink: 0;
align-self: center;
}
/* svg-path */
.svgpath-5ae9e8483a1e > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.svgpath-5ae9e8483a1e {
position: absolute;
left: 2.89px;
top: 4.58px;
width: 12.21px;
height: 8.81px;
}
/* base-background */
.basebackg-5ae9e8483a1d > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.basebackg-5ae9e8483a1d {
position: absolute;
left: 0px;
top: 0px;
width: 18px;
height: 18px;
display: none;
}
/* Enabled */
.enabled-5ae9e8483a1f {
position: relative;
width: 100px;
height: 40px;
border: 1px solid #FFFFFF;
border-radius: 0px 20px 20px 0px;
overflow: hidden;
display: flex;
align-items: center;
align-content: stretch;
justify-content: start;
gap: 8px;
padding: 0px 12px 0px 12px;
flex-direction: row;
flex-wrap: nowrap;
flex-shrink: 0;
margin: 0px 0px 0px -1px;
min-width: 80px;
}
/* Label */
.label-5ae9e8483a20 {
height: 18px;
flex: 1;
flex-shrink: 0;
align-self: center;
}
.label-5ae9e8483a20 .root-0 {
display: flex;
white-space: break-spaces;
align-items: center;
}
.label-5ae9e8483a20 .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
min-width: 100%;
margin-right: 1px;
vertical-align: top;
}
.label-5ae9e8483a20 .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.label-5ae9e8483a20 .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(255, 251, 254, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: break-spaces;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(255, 251, 254, 1);
text-decoration: none;
letter-spacing: 0.01px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* grade_FILL0_wght400_GRAD0_opsz48 */
.grade-fill-5ae9e8483a21 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.grade-fill-5ae9e8483a21 {
position: relative;
width: 18px;
height: 18px;
flex-shrink: 0;
align-self: center;
}
/* svg-path */
.svgpath-5ae9e8483a23 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.svgpath-5ae9e8483a23 {
position: absolute;
left: 1.5px;
top: 2.25px;
width: 15px;
height: 14.25px;
}
/* base-background */
.basebackg-5ae9e8483a22 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.basebackg-5ae9e8483a22 {
position: absolute;
left: 0px;
top: 0px;
width: 18px;
height: 18px;
display: none;
}
/* Segment */
.segment-5ae9e8485a08 {
position: relative;
width: auto;
height: auto;
border-radius: 0px;
display: flex;
align-items: start;
align-content: stretch;
justify-content: start;
flex-direction: row;
flex-wrap: nowrap;
}
/* Disabled */
.disabled-5ae9e8485a09 {
position: absolute;
left: 1px;
top: 0px;
width: 104px;
height: 40px;
border: 1px solid rgba(28, 27, 31, 0.12);
border-radius: 0px;
overflow: hidden;
display: none;
align-items: center;
align-content: stretch;
justify-content: start;
gap: 8px;
padding: 0px 12px 0px 12px;
flex-direction: row;
flex-wrap: nowrap;
flex-shrink: 0;
min-height: 80px;
}
/* Label */
.label-5ae9e8485a0a {
height: 18px;
flex: 1;
flex-shrink: 0;
align-self: center;
}
.label-5ae9e8485a0a .root-0 {
display: flex;
white-space: break-spaces;
align-items: center;
}
.label-5ae9e8485a0a .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
min-width: 100%;
margin-right: 1px;
vertical-align: top;
}
.label-5ae9e8485a0a .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.label-5ae9e8485a0a .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(28, 27, 31, 0.38);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: break-spaces;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(28, 27, 31, 0.38);
text-decoration: none;
letter-spacing: 0.01px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* grade_FILL0_wght400_GRAD0_opsz48 */
.grade-fill-5ae9e8485a0b > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.grade-fill-5ae9e8485a0b {
position: relative;
width: 18px;
height: 18px;
flex-shrink: 0;
align-self: center;
}
/* svg-path */
.svgpath-5ae9e8485a0d > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.svgpath-5ae9e8485a0d {
position: absolute;
left: 1.5px;
top: 2.25px;
width: 15px;
height: 14.25px;
}
/* base-background */
.basebackg-5ae9e8485a0c > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.basebackg-5ae9e8485a0c {
position: absolute;
left: 0px;
top: 0px;
width: 18px;
height: 18px;
display: none;
}
/* Selected */
.selected-5ae9e8485a0e {
position: absolute;
left: 1px;
top: 0px;
width: 104px;
height: 40px;
background: #E8DEF8;
border: 1px solid #FFFFFF;
border-radius: 0px;
overflow: hidden;
display: none;
align-items: center;
align-content: stretch;
justify-content: start;
gap: 8px;
padding: 0px 12px 0px 12px;
flex-direction: row;
flex-wrap: nowrap;
flex-shrink: 0;
min-height: 80px;
}
/* Label */
.label-5ae9e8485a0f {
height: 18px;
flex: 1;
flex-shrink: 0;
align-self: center;
}
.label-5ae9e8485a0f .root-0 {
display: flex;
white-space: break-spaces;
align-items: center;
}
.label-5ae9e8485a0f .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
min-width: 100%;
margin-right: 1px;
vertical-align: top;
}
.label-5ae9e8485a0f .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.label-5ae9e8485a0f .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(30, 25, 43, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: break-spaces;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(30, 25, 43, 1);
text-decoration: none;
letter-spacing: 0.01px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* check_FILL0_wght400_GRAD0_opsz48 */
.check-fill-5ae9e8485a10 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.check-fill-5ae9e8485a10 {
position: relative;
width: 18px;
height: 18px;
flex-shrink: 0;
align-self: center;
}
/* svg-path */
.svgpath-5ae9e8485a12 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.svgpath-5ae9e8485a12 {
position: absolute;
left: 2.89px;
top: 4.57px;
width: 12.21px;
height: 8.81px;
}
/* base-background */
.basebackg-5ae9e8485a11 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.basebackg-5ae9e8485a11 {
position: absolute;
left: 0px;
top: 0px;
width: 18px;
height: 18px;
display: none;
}
/* Enabled */
.enabled-5ae9e8485a13 {
position: relative;
width: 100px;
height: 40px;
border: 1px solid #FFFFFF;
border-radius: 0px;
overflow: hidden;
display: flex;
align-items: center;
align-content: stretch;
justify-content: start;
gap: 8px;
padding: 0px 12px 0px 12px;
flex-direction: row;
flex-wrap: nowrap;
flex-shrink: 0;
min-height: 80px;
}
/* Label */
.label-5ae9e8485a14 {
height: 17px;
flex: 1;
flex-shrink: 0;
align-self: center;
}
.label-5ae9e8485a14 .root-0 {
display: flex;
white-space: break-spaces;
align-items: center;
}
.label-5ae9e8485a14 .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
min-width: 100%;
margin-right: 1px;
vertical-align: top;
}
.label-5ae9e8485a14 .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.label-5ae9e8485a14 .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(255, 251, 254, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: break-spaces;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(255, 251, 254, 1);
text-decoration: none;
letter-spacing: 0.01px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* grade_FILL0_wght400_GRAD0_opsz48 */
.grade-fill-5ae9e8485a15 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.grade-fill-5ae9e8485a15 {
position: relative;
width: 18px;
height: 18px;
flex-shrink: 0;
align-self: center;
}
/* svg-path */
.svgpath-5ae9e8485a17 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.svgpath-5ae9e8485a17 {
position: absolute;
left: 1.5px;
top: 2.25px;
width: 15px;
height: 14.25px;
}
/* base-background */
.basebackg-5ae9e8485a16 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.basebackg-5ae9e8485a16 {
position: absolute;
left: 0px;
top: 0px;
width: 18px;
height: 18px;
display: none;
}
/* First Segment */
.first-segm-5ae9e8485a18 {
position: relative;
width: auto;
height: auto;
border-radius: 0px;
display: flex;
align-items: start;
align-content: stretch;
justify-content: start;
flex-direction: row;
flex-wrap: nowrap;
}
/* Disabled */
.disabled-5ae9e8485a19 {
position: absolute;
left: 104px;
top: 0px;
width: 104px;
height: 40px;
border: 1px solid rgba(28, 27, 31, 0.12);
border-radius: 20px 0px 0px 20px;
overflow: hidden;
display: none;
align-items: center;
align-content: stretch;
justify-content: start;
gap: 8px;
padding: 0px 12px 0px 12px;
flex-direction: row;
flex-wrap: nowrap;
flex-shrink: 0;
margin: 0px -1px 0px 0px;
min-width: 80px;
}
/* Label */
.label-5ae9e8485a1a {
height: 18px;
flex: 1;
flex-shrink: 0;
align-self: center;
}
.label-5ae9e8485a1a .root-0 {
display: flex;
white-space: break-spaces;
align-items: center;
}
.label-5ae9e8485a1a .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
min-width: 100%;
margin-right: 1px;
vertical-align: top;
}
.label-5ae9e8485a1a .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.label-5ae9e8485a1a .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(28, 27, 31, 0.38);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: break-spaces;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(28, 27, 31, 0.38);
text-decoration: none;
letter-spacing: 0.01px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* grade_FILL0_wght400_GRAD0_opsz48 */
.grade-fill-5ae9e8485a1b > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.grade-fill-5ae9e8485a1b {
position: relative;
width: 18px;
height: 18px;
flex-shrink: 0;
align-self: center;
}
/* svg-path */
.svgpath-5ae9e8485a1d > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.svgpath-5ae9e8485a1d {
position: absolute;
left: 1.5px;
top: 2.25px;
width: 15px;
height: 14.25px;
}
/* base-background */
.basebackg-5ae9e8485a1c > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.basebackg-5ae9e8485a1c {
position: absolute;
left: 0px;
top: 0px;
width: 18px;
height: 18px;
display: none;
}
/* Selected */
.selected-5ae9e8485a1e {
position: relative;
width: 104px;
height: 40px;
background: #E8DEF8;
border: 1px solid #FFFFFF;
border-radius: 20px 0px 0px 20px;
overflow: hidden;
display: flex;
align-items: center;
align-content: stretch;
justify-content: start;
gap: 8px;
padding: 0px 12px 0px 12px;
flex-direction: row;
flex-wrap: nowrap;
flex-shrink: 0;
margin: 0px -1px 0px 0px;
min-width: 80px;
}
/* Label */
.label-5ae9e8485a1f {
height: 18px;
flex: 1;
flex-shrink: 0;
align-self: center;
}
.label-5ae9e8485a1f .root-0 {
display: flex;
white-space: break-spaces;
align-items: center;
}
.label-5ae9e8485a1f .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
min-width: 100%;
margin-right: 1px;
vertical-align: top;
}
.label-5ae9e8485a1f .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.label-5ae9e8485a1f .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(30, 25, 43, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: break-spaces;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(30, 25, 43, 1);
text-decoration: none;
letter-spacing: 0.01px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* check_FILL0_wght400_GRAD0_opsz48 */
.check-fill-5ae9e8485a20 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.check-fill-5ae9e8485a20 {
position: relative;
width: 18px;
height: 18px;
flex-shrink: 0;
align-self: center;
}
/* svg-path */
.svgpath-5ae9e8485a22 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.svgpath-5ae9e8485a22 {
position: absolute;
left: 2.89px;
top: 4.57px;
width: 12.21px;
height: 8.81px;
}
/* base-background */
.basebackg-5ae9e8485a21 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.basebackg-5ae9e8485a21 {
position: absolute;
left: 0px;
top: 0px;
width: 18px;
height: 18px;
display: none;
}
/* Enabled */
.enabled-5ae9e8485a23 {
position: absolute;
left: 0px;
top: 0px;
width: 100px;
height: 40px;
border: 1px solid #FFFFFF;
border-radius: 20px 0px 0px 20px;
overflow: hidden;
display: none;
align-items: center;
align-content: stretch;
justify-content: start;
gap: 8px;
padding: 0px 12px 0px 12px;
flex-direction: row;
flex-wrap: nowrap;
flex-shrink: 0;
margin: 0px -1px 0px 0px;
min-width: 80px;
}
/* Label */
.label-5ae9e8485a24 {
height: 18px;
flex: 1;
flex-shrink: 0;
align-self: center;
}
.label-5ae9e8485a24 .root-0 {
display: flex;
white-space: break-spaces;
align-items: center;
}
.label-5ae9e8485a24 .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
min-width: 100%;
margin-right: 1px;
vertical-align: top;
}
.label-5ae9e8485a24 .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.label-5ae9e8485a24 .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(28, 27, 31, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: break-spaces;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(28, 27, 31, 1);
text-decoration: none;
letter-spacing: 0.01px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* grade_FILL0_wght400_GRAD0_opsz48 */
.grade-fill-5ae9e8485a25 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.grade-fill-5ae9e8485a25 {
position: relative;
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* svg-path */
.svgpath-5ae9e848acbc > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.svgpath-5ae9e848acbc {
position: absolute;
left: 1.5px;
top: 2.25px;
width: 15px;
height: 14.25px;
}
/* base-background */
.basebackg-5ae9e8485a26 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.basebackg-5ae9e8485a26 {
position: absolute;
left: 0px;
top: 0px;
width: 18px;
height: 18px;
display: none;
}
/* Navigation Rail / Navigation Rail */
.navigation-5ae996e5d956 {
position: absolute;
left: 4px;
top: 220px;
width: 80px;
height: 325px;
border-radius: 0px;
overflow: hidden;
}
/* Container */
.container-5ae996e5d957 {
position: absolute;
left: 0px;
top: 0px;
width: 80px;
height: 325px;
background: #FFFBFE;
border-radius: 0px;
display: flex;
align-items: center;
align-content: stretch;
justify-content: start;
gap: 56px;
padding: 12px 12px 12px 12px;
flex-direction: column;
flex-wrap: nowrap;
}
/* Menu */
.menu-5ae996e5d963 {
position: relative;
width: 100%;
height: auto;
border-radius: 0px;
overflow: hidden;
display: flex;
align-items: center;
align-content: stretch;
justify-content: start;
gap: 12px;
flex-direction: column;
flex-wrap: nowrap;
margin: 16px 0px 0px 0px;
min-height: 260px;
}
/* Menu Item */
.menu-item-5ae996e5d964 {
position: relative;
width: 100%;
height: 56px;
border-radius: 0px;
overflow: hidden;
display: flex;
align-items: center;
align-content: stretch;
justify-content: start;
gap: 8px;
padding: 4px 0px 4px 0px;
flex-direction: column;
flex-wrap: nowrap;
flex-shrink: 0;
}
/* Label */
.label-5ae996e5d965 {
width: 100%;
height: 17px;
flex-shrink: 0;
}
.label-5ae996e5d965 .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.label-5ae996e5d965 .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
min-width: 100%;
margin-right: 1px;
vertical-align: top;
}
.label-5ae996e5d965 .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: center;
}
.label-5ae996e5d965 .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(73, 69, 78, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: break-spaces;
font-size: 12px;
text-rendering: geometricPrecision;
caret-color: rgba(73, 69, 78, 1);
text-decoration: none;
letter-spacing: 0.05px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* Icon with Badge */
.icon-with-5ae996e609b7 {
position: relative;
width: 24px;
height: 24px;
border-radius: 0px;
flex-shrink: 0;
}
/* Small Badge */
.small-badg-5ae996e609bb {
position: absolute;
left: 18px;
top: 0px;
width: 6px;
height: 6px;
}
/* Ellipse */
.ellipse-5ae996e609bc {
position: absolute;
left: 0px;
top: 0px;
width: 6px;
height: 6px;
background: #B3261E;
border-radius: 50%;
}
/* bolt_FILL0_wght400_GRAD0_opsz48 */
.bolt-fill0-5ae996e609b8 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.bolt-fill0-5ae996e609b8 {
position: absolute;
left: 0px;
top: 0px;
width: 24px;
height: 24px;
}
/* svg-path */
.svgpath-5ae996e609ba > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.svgpath-5ae996e609ba {
position: absolute;
left: 4px;
top: 2px;
width: 16px;
height: 20px;
}
/* base-background */
.basebackg-5ae996e609b9 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.basebackg-5ae996e609b9 {
position: absolute;
left: 0px;
top: 0px;
width: 24px;
height: 24px;
display: none;
}
/* Menu Item */
.menu-item-5ae996e609bd {
position: relative;
width: 100%;
height: 56px;
border-radius: 0px;
overflow: hidden;
display: flex;
align-items: center;
align-content: stretch;
justify-content: start;
gap: 8px;
padding: 4px 0px 4px 0px;
flex-direction: column;
flex-wrap: nowrap;
flex-shrink: 0;
}
/* Label */
.label-5ae996e609be {
width: 100%;
height: 17px;
flex-shrink: 0;
}
.label-5ae996e609be .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.label-5ae996e609be .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
min-width: 100%;
margin-right: 1px;
vertical-align: top;
}
.label-5ae996e609be .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: center;
}
.label-5ae996e609be .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(73, 69, 78, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: break-spaces;
font-size: 12px;
text-rendering: geometricPrecision;
caret-color: rgba(73, 69, 78, 1);
text-decoration: none;
letter-spacing: 0.05px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* favorite_FILL0_wght400_GRAD0_opsz48 */
.favorite-f-5ae996e609bf > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.favorite-f-5ae996e609bf {
position: relative;
width: 24px;
height: 24px;
flex-shrink: 0;
}
/* svg-path */
.svgpath-5ae996e609c1 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.svgpath-5ae996e609c1 {
position: absolute;
left: 2px;
top: 2.65px;
width: 20px;
height: 18.33px;
}
/* base-background */
.basebackg-5ae996e609c0 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.basebackg-5ae996e609c0 {
position: absolute;
left: 0px;
top: 0px;
width: 24px;
height: 24px;
display: none;
}
/* Active Indicator [keep it below item] */
.active-ind-5ae996e609c2 {
position: relative;
width: 56px;
height: 32px;
background: #E8DEF8;
border-radius: 16px;
overflow: hidden;
flex-shrink: 0;
margin: -68px 0px 24px 0px;
}
/* Menu Item */
.menu-item-5ae996e609c3 {
position: relative;
width: 100%;
height: 56px;
border-radius: 0px;
overflow: hidden;
display: flex;
align-items: center;
align-content: stretch;
justify-content: start;
gap: 8px;
padding: 4px 0px 4px 0px;
flex-direction: column;
flex-wrap: nowrap;
flex-shrink: 0;
}
/* Label */
.label-5ae996e609c4 {
width: 100%;
height: 17px;
flex-shrink: 0;
}
.label-5ae996e609c4 .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.label-5ae996e609c4 .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
min-width: 100%;
margin-right: 1px;
vertical-align: top;
}
.label-5ae996e609c4 .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: center;
}
.label-5ae996e609c4 .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(28, 27, 31, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: break-spaces;
font-size: 12px;
text-rendering: geometricPrecision;
caret-color: rgba(28, 27, 31, 1);
text-decoration: none;
letter-spacing: 0.05px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* apps_FILL0_wght400_GRAD0_opsz48 */
.apps-fill0-5ae996e609c5-wrapper {
flex-shrink: 0;
position: relative;
width: 24.42px;
height: 24.42px;
position: relative;
}
.apps-fill0-5ae996e609c5-wrapper > * {
position: absolute;
left: 50%;
top: 50%;
}
.apps-fill0-5ae996e609c5 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(-0.20760121912434215px,-0.20760121912849172px);
}
.apps-fill0-5ae996e609c5 {
width: 24px;
height: 24px;
transform: translate(-50%, -50%) ;
}
/* svg-path */
.svgpath-5ae996e609c7 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(-0.13840081274952354px,-0.13840081274929616px);
}
.svgpath-5ae996e609c7 {
position: absolute;
left: 4px;
top: 4px;
width: 16px;
height: 16px;
transform: matrix(1.00, 0.02, -0.02, 1.00, 0.00, 0.00);
}
/* base-background */
.basebackg-5ae996e609c6 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(-0.20760121912417162px,-0.20760121912417162px);
}
.basebackg-5ae996e609c6 {
position: absolute;
left: 0px;
top: 0px;
width: 24px;
height: 24px;
transform: matrix(1.00, 0.02, -0.02, 1.00, 0.00, 0.00);
display: none;
}
/* Menu Item */
.menu-item-5ae996e609c8 {
position: relative;
width: 100%;
height: 56px;
border-radius: 0px;
overflow: hidden;
display: flex;
align-items: center;
align-content: stretch;
justify-content: start;
gap: 8px;
padding: 4px 0px 4px 0px;
flex-direction: column;
flex-wrap: nowrap;
flex-shrink: 0;
}
/* Label */
.label-5ae996e609c9 {
width: 100%;
height: 17px;
flex-shrink: 0;
}
.label-5ae996e609c9 .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.label-5ae996e609c9 .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
min-width: 100%;
margin-right: 1px;
vertical-align: top;
}
.label-5ae996e609c9 .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: center;
}
.label-5ae996e609c9 .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(73, 69, 78, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: break-spaces;
font-size: 12px;
text-rendering: geometricPrecision;
caret-color: rgba(73, 69, 78, 1);
text-decoration: none;
letter-spacing: 0.05px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* Icon with Badge */
.icon-with-5ae996e609ca {
position: relative;
width: 24px;
height: 24px;
border-radius: 0px;
flex-shrink: 0;
}
/* Large Badge */
.large-badg-5ae996e609ce {
position: absolute;
left: 13px;
top: -4px;
width: auto;
height: 16px;
background: #B3261E;
border-radius: 8px 8px 8px 8px;
display: flex;
align-items: center;
align-content: stretch;
justify-content: center;
padding: 4px 4px 4px 4px;
flex-direction: row;
flex-wrap: nowrap;
}
/* Text */
.text-5ae996e609cf {
width: 6px;
height: 10px;
flex-shrink: 0;
margin: 0px 1px 0px 1px;
min-width: 8px;
align-self: center;
}
.text-5ae996e609cf .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-end;
}
.text-5ae996e609cf .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.text-5ae996e609cf .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1;
margin: 0;
text-align: center;
}
.text-5ae996e609cf .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(255, 255, 255, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 10px;
text-rendering: geometricPrecision;
caret-color: rgba(255, 255, 255, 1);
text-decoration: none;
letter-spacing: 0px;
font-family: “Roboto”;
font-style: normal;
font-weight: 400;
}
/* shopping_cart_checkout_FILL0_wght400_GRAD0_opsz48 */
.shoppingc-5ae996e609cb > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.shoppingc-5ae996e609cb {
position: absolute;
left: 0px;
top: 0px;
width: 24px;
height: 24px;
}
/* svg-path */
.svgpath-5ae996e609cd > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.svgpath-5ae996e609cd {
position: absolute;
left: 1.55px;
top: 2px;
width: 20.03px;
height: 20px;
}
/* base-background */
.basebackg-5ae996e609cc > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.basebackg-5ae996e609cc {
position: absolute;
left: 0px;
top: 0px;
width: 24px;
height: 24px;
display: none;
}
/* Snackbar / Two-line Snackbar + Action */
.snackbar-5ae95e1928a8 {
position: absolute;
left: 961px;
top: 517px;
width: 275.01px;
height: 68px;
border-radius: 0px;
box-shadow: ;
overflow: hidden;
display: flex;
align-items: start;
align-content: stretch;
justify-content: start;
flex-direction: row;
flex-wrap: nowrap;
}
/* Wrapper */
.wrapper-5ae95e1928a9 {
position: relative;
width: auto;
height: 100%;
border-radius: 0px;
display: flex;
align-items: start;
align-content: stretch;
justify-content: start;
flex-direction: column;
flex-wrap: nowrap;
max-height: 68px;
min-height: 68px;
}
/* Background Layers */
.background-5ae95e1928aa {
position: relative;
width: 100%;
border-radius: 8px;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.16), 0px 2px 2px 0px rgba(0, 0, 0, 0.09), 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
overflow: hidden;
flex: 1;
flex-shrink: 0;
margin: -68px 0px 0px 0px;
max-height: 68px;
min-height: 68px;
}
/* Elevated Background */
.elevated-b-5ae95e1928ac {
position: absolute;
left: 0px;
top: 0px;
width: 275px;
height: 68px;
background: #6750A4;
border-radius: 0px;
opacity: 0.11;
}
/* Background */
.background-5ae95e1928ab {
position: absolute;
left: 0px;
top: 0px;
width: 275px;
height: 68px;
background: #313033;
border-radius: 0px;
}
/* Container */
.container-5ae95e1928ad {
position: relative;
width: auto;
border-radius: 0px;
display: flex;
align-items: center;
align-content: stretch;
justify-content: start;
gap: 12px;
padding: 0px 8px 0px 16px;
flex-direction: row;
flex-wrap: nowrap;
flex: 1;
max-height: 68px;
min-height: 68px;
}
/* Button Text */
.button-tex-5ae95e1928ae {
position: relative;
width: 65px;
height: 40px;
border-radius: 0px;
display: flex;
align-items: center;
align-content: stretch;
justify-content: center;
flex-direction: row;
flex-wrap: nowrap;
flex-shrink: 0;
}
/* Container */
.container-5ae95e1928af {
position: relative;
width: auto;
height: 100%;
border-radius: 20px;
display: flex;
align-items: center;
align-content: stretch;
justify-content: center;
padding: 0px 12px 0px 12px;
flex-direction: row;
flex-wrap: nowrap;
max-height: 40px;
min-height: 40px;
}
/* Label */
.label-5ae95e1928b0 {
width: 41px;
height: 18px;
flex-shrink: 0;
}
.label-5ae95e1928b0 .root-0 {
display: flex;
white-space: break-spaces;
align-items: center;
}
.label-5ae95e1928b0 .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.label-5ae95e1928b0 .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: center;
}
.label-5ae95e1928b0 .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(208, 188, 255, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(208, 188, 255, 1);
text-decoration: none;
letter-spacing: 0.01px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* Two-line Text */
.twoline-t-5ae95e1928b1 {
width: 174px;
height: 35px;
flex-shrink: 0;
}
.twoline-t-5ae95e1928b1 .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.twoline-t-5ae95e1928b1 .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.twoline-t-5ae95e1928b1 .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.twoline-t-5ae95e1928b1 .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(244, 239, 244, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(244, 239, 244, 1);
text-decoration: none;
letter-spacing: 0.02px;
font-family: “Roboto”;
font-style: normal;
font-weight: 400;
}
.twoline-t-5ae95e1928b1 .root-0-paragraph-set-0-paragraph-1 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.twoline-t-5ae95e1928b1 .root-0-paragraph-set-0-paragraph-1-text-0 {
color: rgba(244, 239, 244, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(244, 239, 244, 1);
text-decoration: none;
letter-spacing: 0.02px;
font-family: “Roboto”;
font-style: normal;
font-weight: 400;
}
/* List / Avatar / 3 Lines Avatar List */
.list-ava-5ae905a93277 {
position: absolute;
left: 145px;
top: 538px;
width: 360px;
height: 88px;
border-radius: 0px;
overflow: hidden;
}
/* Inset Divider */
.inset-divi-5ae905a9327f {
position: absolute;
left: 0px;
top: 87px;
width: 360px;
height: 1px;
border-radius: 0px;
display: none;
align-items: center;
align-content: stretch;
justify-content: center;
flex-direction: row;
flex-wrap: nowrap;
}
/* Line */
.line-5ae905a93280 {
position: relative;
height: 1px;
border: 1px solid #E7E0EC;
border-radius: 0px;
opacity: 0.4;
overflow: hidden;
display: flex;
align-items: start;
align-content: stretch;
justify-content: start;
flex-direction: row;
flex-wrap: nowrap;
flex: 1;
margin: 0px 24px 0px 16px;
}
/* Container */
.container-5ae905a93279 {
position: absolute;
left: 0px;
top: 0px;
width: 360px;
height: 88px;
border-radius: 0px;
overflow: hidden;
display: flex;
align-items: start;
align-content: stretch;
justify-content: start;
gap: 16px;
padding: 8px 12px 8px 12px;
flex-direction: row;
flex-wrap: nowrap;
}
/* Content */
.content-5ae905a9327a {
position: relative;
height: 100%;
border-radius: 0px;
display: flex;
align-items: start;
align-content: stretch;
justify-content: center;
flex-direction: column;
flex-wrap: nowrap;
flex: 1;
}
/* Supporting text */
.supporting-5ae905a9327b {
width: 100%;
height: 35px;
flex-shrink: 0;
}
.supporting-5ae905a9327b .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.supporting-5ae905a9327b .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
min-width: 100%;
margin-right: 1px;
vertical-align: top;
}
.supporting-5ae905a9327b .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.supporting-5ae905a9327b .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(73, 69, 78, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: break-spaces;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(73, 69, 78, 1);
text-decoration: none;
letter-spacing: 0.02px;
font-family: “Roboto”;
font-style: normal;
font-weight: 400;
}
/* Headline */
.headline-5ae905a9327c {
width: 100%;
height: 20px;
flex-shrink: 0;
align-self: start;
}
.headline-5ae905a9327c .root-0 {
display: flex;
white-space: break-spaces;
align-items: center;
}
.headline-5ae905a9327c .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
min-width: 100%;
margin-right: 1px;
vertical-align: top;
}
.headline-5ae905a9327c .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.headline-5ae905a9327c .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(28, 27, 31, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: break-spaces;
font-size: 16px;
text-rendering: geometricPrecision;
caret-color: rgba(28, 27, 31, 1);
text-decoration: none;
letter-spacing: 0.04px;
font-family: “Roboto”;
font-style: normal;
font-weight: 400;
}
/* Avatar Container */
.avatar-con-5ae905a9327d {
position: relative;
width: 40px;
height: 40px;
background: #EADDFF;
border-radius: 20px;
overflow: hidden;
display: flex;
align-items: center;
align-content: stretch;
justify-content: center;
flex-direction: row;
flex-wrap: nowrap;
flex-shrink: 0;
}
/* Text */
.text-5ae905a9327e {
width: 11px;
height: 20px;
flex-shrink: 0;
}
.text-5ae905a9327e .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.text-5ae905a9327e .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.text-5ae905a9327e .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.text-5ae905a9327e .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(33, 0, 94, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 16px;
text-rendering: geometricPrecision;
caret-color: rgba(33, 0, 94, 1);
text-decoration: none;
letter-spacing: 0.01px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* Background */
.background-5ae905a93278 {
position: absolute;
left: 0px;
top: 0px;
width: 360px;
height: 88px;
background: #FFFBFE;
border-radius: 0px;
}
/* Card / Layout / Graph Outlined Card */
.card-lay-5ae8f7372739 {
position: absolute;
left: 0px;
top: 0px;
width: 180px;
height: 180px;
border-radius: 0px;
overflow: hidden;
}
/* Container */
.container-5ae8f73750d6 {
position: absolute;
left: 0px;
top: 0px;
width: 180px;
height: 180px;
border-radius: 0px;
overflow: hidden;
display: flex;
align-items: start;
align-content: stretch;
justify-content: start;
gap: 16px;
padding: 16px 16px 16px 16px;
flex-direction: column;
flex-wrap: nowrap;
}
/* Graph */
.graph-5ae8f73750d7 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0.3624611489713061px,0.2919019487742389px);
}
.graph-5ae8f73750d7 {
position: relative;
width: 135px;
height: 44px;
flex-shrink: 0;
}
/* Target */
.target-5ae8f73750d8 {
position: relative;
width: 70px;
height: 50px;
flex-shrink: 0;
}
/* Current Target */
.current-ta-5ae8f73750da {
position: absolute;
left: 0px;
top: 0px;
width: 48px;
height: 35px;
}
.current-ta-5ae8f73750da .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.current-ta-5ae8f73750da .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.current-ta-5ae8f73750da .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.current-ta-5ae8f73750da .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(0, 0, 0, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 28px;
text-rendering: geometricPrecision;
caret-color: rgba(0, 0, 0, 1);
text-decoration: none;
letter-spacing: 0px;
font-family: “Roboto”;
font-style: normal;
font-weight: 400;
}
/* Supporting Text */
.supporting-5ae8f73750d9 {
position: absolute;
left: 0px;
top: 35px;
width: 70px;
height: 15px;
}
.supporting-5ae8f73750d9 .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.supporting-5ae8f73750d9 .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.supporting-5ae8f73750d9 .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.supporting-5ae8f73750d9 .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(0, 0, 0, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 12px;
text-rendering: geometricPrecision;
caret-color: rgba(0, 0, 0, 1);
text-decoration: none;
letter-spacing: 0.04px;
font-family: “Roboto”;
font-style: normal;
font-weight: 400;
}
/* Card Label */
.card-label-5ae8f73750db {
width: 71px;
height: 18px;
flex-shrink: 0;
}
.card-label-5ae8f73750db .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.card-label-5ae8f73750db .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.card-label-5ae8f73750db .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.card-label-5ae8f73750db .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(0, 0, 0, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(0, 0, 0, 1);
text-decoration: none;
letter-spacing: 0.02px;
font-family: “Roboto”;
font-style: normal;
font-weight: 400;
}
/* Background */
.background-5ae8f737273a {
position: absolute;
left: 0px;
top: 0px;
width: 180px;
height: 180px;
background: #FFFBFE;
border: 1px solid #79747E;
border-radius: 12px;
}
/* Navigation Drawer / Standard Navigation Drawer */
.navigation-5ae912c31200 {
position: absolute;
left: 1149px;
top: 148px;
width: 360px;
height: 480px;
border-radius: 0px;
overflow: hidden;
}
/* Container */
.container-5ae912c31202 {
position: absolute;
left: 0px;
top: 0px;
width: 360px;
height: 480px;
border-radius: 0px;
display: flex;
align-items: start;
align-content: stretch;
justify-content: start;
padding: 12px 12px 12px 12px;
flex-direction: column;
flex-wrap: nowrap;
}
/* Menu */
.menu-5ae912c31203 {
position: relative;
width: 100%;
height: auto;
border-radius: 0px;
overflow: hidden;
display: flex;
align-items: start;
align-content: stretch;
justify-content: start;
flex-direction: column;
flex-wrap: nowrap;
margin: 16px 0px 0px 0px;
min-height: 345px;
}
/* Menu Item */
.menu-item-5ae912c31204 {
position: relative;
width: 100%;
height: 56px;
border-radius: 0px;
overflow: hidden;
display: flex;
align-items: center;
align-content: stretch;
justify-content: start;
gap: 12px;
flex-direction: row;
flex-wrap: nowrap;
margin: 0px 16px 0px 16px;
}
/* Label */
.label-5ae912c31205 {
width: 44px;
height: 18px;
flex-shrink: 0;
}
.label-5ae912c31205 .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.label-5ae912c31205 .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.label-5ae912c31205 .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.label-5ae912c31205 .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(73, 69, 78, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(73, 69, 78, 1);
text-decoration: none;
letter-spacing: 0.01px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* logout_FILL0_wght400_GRAD0_opsz48 */
.logout-fil-5ae912c31206 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.logout-fil-5ae912c31206 {
position: relative;
width: 24px;
height: 24px;
flex-shrink: 0;
}
/* svg-path */
.svgpath-5ae912c31208 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.svgpath-5ae912c31208 {
position: absolute;
left: 3px;
top: 3px;
width: 18px;
height: 18px;
}
/* base-background */
.basebackg-5ae912c31207 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.basebackg-5ae912c31207 {
position: absolute;
left: 0px;
top: 0px;
width: 24px;
height: 24px;
display: none;
}
/* Menu Item */
.menu-item-5ae912c31209 {
position: relative;
width: 100%;
height: 56px;
border-radius: 0px;
overflow: hidden;
display: flex;
align-items: center;
align-content: stretch;
justify-content: start;
gap: 12px;
flex-direction: row;
flex-wrap: nowrap;
margin: 0px 16px 0px 16px;
}
/* Label */
.label-5ae912c3120a {
width: 52px;
height: 18px;
flex-shrink: 0;
}
.label-5ae912c3120a .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.label-5ae912c3120a .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.label-5ae912c3120a .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.label-5ae912c3120a .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(73, 69, 78, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(73, 69, 78, 1);
text-decoration: none;
letter-spacing: 0.01px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* settings_FILL0_wght400_GRAD0_opsz48 */
.settings-f-5ae912c3120b > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.settings-f-5ae912c3120b {
position: relative;
width: 24px;
height: 24px;
flex-shrink: 0;
}
/* svg-path */
.svgpath-5ae912c3120d > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.svgpath-5ae912c3120d {
position: absolute;
left: 2px;
top: 2px;
width: 20px;
height: 20px;
}
/* base-background */
.basebackg-5ae912c3120c > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.basebackg-5ae912c3120c {
position: absolute;
left: 0px;
top: 0px;
width: 24px;
height: 24px;
display: none;
}
/* Inset Divider */
.inset-divi-5ae912c37ad5 {
position: relative;
width: 336px;
height: 9px;
border-radius: 0px;
display: flex;
align-items: center;
align-content: stretch;
justify-content: center;
flex-direction: row;
flex-wrap: nowrap;
flex-shrink: 0;
}
/* Line */
.line-5ae912c37ad6 {
position: relative;
height: 1px;
border: 1px solid #C4C7C5;
border-radius: 0px;
opacity: 0.4;
overflow: hidden;
display: flex;
align-items: start;
align-content: stretch;
justify-content: start;
flex-direction: row;
flex-wrap: nowrap;
flex: 1;
margin: 0px 16px 0px 16px;
}
/* Menu Item */
.menu-item-5ae912c37ad7 {
position: relative;
width: 100%;
height: 56px;
border-radius: 0px;
overflow: hidden;
display: flex;
align-items: center;
align-content: stretch;
justify-content: start;
gap: 12px;
flex-direction: row;
flex-wrap: nowrap;
margin: 0px 16px 0px 16px;
}
/* Label */
.label-5ae912c37ad8 {
width: 54px;
height: 18px;
flex-shrink: 0;
}
.label-5ae912c37ad8 .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.label-5ae912c37ad8 .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.label-5ae912c37ad8 .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.label-5ae912c37ad8 .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(73, 69, 78, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(73, 69, 78, 1);
text-decoration: none;
letter-spacing: 0.01px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* bolt_FILL0_wght400_GRAD0_opsz48 */
.bolt-fill0-5ae912c37ad9 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.bolt-fill0-5ae912c37ad9 {
position: relative;
width: 24px;
height: 24px;
flex-shrink: 0;
}
/* svg-path */
.svgpath-5ae912c37adb > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.svgpath-5ae912c37adb {
position: absolute;
left: 4px;
top: 2px;
width: 16px;
height: 20px;
}
/* base-background */
.basebackg-5ae912c37ada > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.basebackg-5ae912c37ada {
position: absolute;
left: 0px;
top: 0px;
width: 24px;
height: 24px;
display: none;
}
/* Menu Item */
.menu-item-5ae912c37adc {
position: relative;
width: 100%;
height: 56px;
border-radius: 0px;
overflow: hidden;
display: flex;
align-items: center;
align-content: stretch;
justify-content: start;
gap: 12px;
flex-direction: row;
flex-wrap: nowrap;
margin: 0px 16px 0px 16px;
}
/* Label */
.label-5ae912c37add {
width: 62px;
height: 18px;
flex-shrink: 0;
}
.label-5ae912c37add .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.label-5ae912c37add .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.label-5ae912c37add .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.label-5ae912c37add .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(73, 69, 78, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(73, 69, 78, 1);
text-decoration: none;
letter-spacing: 0.01px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* favorite_FILL0_wght400_GRAD0_opsz48 */
.favorite-f-5ae912c37ade > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.favorite-f-5ae912c37ade {
position: relative;
width: 24px;
height: 24px;
flex-shrink: 0;
}
/* svg-path */
.svgpath-5ae912c37ae0 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.svgpath-5ae912c37ae0 {
position: absolute;
left: 2px;
top: 2.65px;
width: 20px;
height: 18.33px;
}
/* base-background */
.basebackg-5ae912c37adf > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.basebackg-5ae912c37adf {
position: absolute;
left: 0px;
top: 0px;
width: 24px;
height: 24px;
display: none;
}
/* Menu Item */
.menu-item-5ae912c37ae1 {
position: relative;
width: 100%;
height: 56px;
border-radius: 0px;
overflow: hidden;
display: flex;
align-items: center;
align-content: stretch;
justify-content: start;
gap: 12px;
flex-direction: row;
flex-wrap: nowrap;
margin: 0px 16px 0px 16px;
}
/* Label */
.label-5ae912c37ae2 {
width: 57px;
height: 18px;
flex-shrink: 0;
}
.label-5ae912c37ae2 .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.label-5ae912c37ae2 .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.label-5ae912c37ae2 .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.label-5ae912c37ae2 .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(30, 25, 43, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(30, 25, 43, 1);
text-decoration: none;
letter-spacing: 0.01px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* apps_FILL0_wght400_GRAD0_opsz48 */
.apps-fill0-5ae912c37ae3-wrapper {
flex-shrink: 0;
position: relative;
width: 24.42px;
height: 24.42px;
position: relative;
}
.apps-fill0-5ae912c37ae3-wrapper > * {
position: absolute;
left: 50%;
top: 50%;
}
.apps-fill0-5ae912c37ae3 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(-0.207601219124399px,-0.2076012191287191px);
}
.apps-fill0-5ae912c37ae3 {
width: 24px;
height: 24px;
transform: translate(-50%, -50%) ;
}
/* svg-path */
.svgpath-5ae912c37ae5 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(-0.13840081274952354px,-0.13840081274929616px);
}
.svgpath-5ae912c37ae5 {
position: absolute;
left: 4px;
top: 4px;
width: 16px;
height: 16px;
transform: matrix(1.00, 0.02, -0.02, 1.00, 0.00, 0.00);
}
/* base-background */
.basebackg-5ae912c37ae4 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(-0.20760121912417162px,-0.20760121912394425px);
}
.basebackg-5ae912c37ae4 {
position: absolute;
left: 0px;
top: 0px;
width: 24px;
height: 24px;
transform: matrix(1.00, 0.02, -0.02, 1.00, 0.00, 0.00);
display: none;
}
/* Active Indicator [keep it below item] */
.active-ind-5ae912c37ae6 {
position: relative;
width: 100%;
height: 56px;
background: #E8DEF8;
border-radius: 28px;
overflow: hidden;
flex-shrink: 0;
margin: -56px 0px 0px 0px;
}
/* Menu Item */
.menu-item-5ae912c37ae7 {
position: relative;
width: 100%;
height: 56px;
border-radius: 0px;
overflow: hidden;
display: flex;
align-items: center;
align-content: stretch;
justify-content: start;
gap: 12px;
flex-direction: row;
flex-wrap: nowrap;
margin: 0px 16px 0px 16px;
}
/* Badge Label */
.badge-labe-5ae912c37ae8 {
width: 14px;
height: 15px;
flex-shrink: 0;
}
.badge-labe-5ae912c37ae8 .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.badge-labe-5ae912c37ae8 .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.badge-labe-5ae912c37ae8 .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.badge-labe-5ae912c37ae8 .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(73, 69, 78, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 12px;
text-rendering: geometricPrecision;
caret-color: rgba(73, 69, 78, 1);
text-decoration: none;
letter-spacing: 0.05px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* Label */
.label-5ae912c37ae9 {
height: 17px;
flex: 1;
flex-shrink: 0;
}
.label-5ae912c37ae9 .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.label-5ae912c37ae9 .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
min-width: 100%;
margin-right: 1px;
vertical-align: top;
}
.label-5ae912c37ae9 .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.label-5ae912c37ae9 .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(73, 69, 78, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: break-spaces;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(73, 69, 78, 1);
text-decoration: none;
letter-spacing: 0.01px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* shopping_cart_checkout_FILL0_wght400_GRAD0_opsz48 */
.shoppingc-5ae912c37aea > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.shoppingc-5ae912c37aea {
position: relative;
width: 24px;
height: 24px;
flex-shrink: 0;
}
/* svg-path */
.svgpath-5ae912c37aec > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.svgpath-5ae912c37aec {
position: absolute;
left: 1.55px;
top: 2px;
width: 20.03px;
height: 20px;
}
/* base-background */
.basebackg-5ae912c37aeb > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.basebackg-5ae912c37aeb {
position: absolute;
left: 0px;
top: 0px;
width: 24px;
height: 24px;
display: none;
}
/* Headline [optional] */
.headline-5ae912c37aed {
position: relative;
width: 100%;
height: 40px;
border-radius: 0px;
overflow: hidden;
display: flex;
align-items: center;
align-content: stretch;
justify-content: start;
padding: 8px 0px 0px 0px;
flex-direction: row;
flex-wrap: nowrap;
}
/* Headline Label */
.headline-l-5ae912c37aee {
width: 120px;
height: 18px;
flex-shrink: 0;
margin: 0px 0px 0px 16px;
}
.headline-l-5ae912c37aee .root-0 {
display: flex;
white-space: break-spaces;
align-items: center;
}
.headline-l-5ae912c37aee .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.headline-l-5ae912c37aee .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.headline-l-5ae912c37aee .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(73, 69, 78, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(73, 69, 78, 1);
text-decoration: none;
letter-spacing: 0.01px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* Background */
.background-5ae912c31201 {
position: absolute;
left: 0px;
top: 0px;
width: 360px;
height: 480px;
background: #FFFBFE;
border-radius: 0px;
}
/* _Miscellaneous / Avatar / Avatar Container */
.miscellan-5ae9886c595d {
position: absolute;
left: 717px;
top: 656px;
width: 40px;
height: 40px;
background: #EADDFF;
border-radius: 20px;
overflow: hidden;
display: flex;
align-items: center;
align-content: stretch;
justify-content: center;
flex-direction: row;
flex-wrap: nowrap;
}
/* Text */
.text-5ae9886c595e {
width: 11px;
height: 20px;
flex-shrink: 0;
}
.text-5ae9886c595e .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.text-5ae9886c595e .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.text-5ae9886c595e .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.text-5ae9886c595e .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(33, 0, 94, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 16px;
text-rendering: geometricPrecision;
caret-color: rgba(33, 0, 94, 1);
text-decoration: none;
letter-spacing: 0.01px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* Switch / Switch On [disabled] */
.switch-s-5ae96e3c4add {
position: absolute;
left: 782px;
top: 604px;
width: auto;
height: auto;
border-radius: 0px;
display: flex;
align-items: start;
align-content: stretch;
justify-content: start;
flex-direction: row;
flex-wrap: nowrap;
}
/* Container */
.container-5ae96e3c4ade {
position: relative;
width: 52px;
height: 32px;
border-radius: 0px;
flex-shrink: 0;
}
/* Toggle On */
.toggle-on-5ae96e3c4ae0 {
position: absolute;
left: 23px;
top: 4px;
width: 24px;
height: 24px;
background: #FFFBFE;
border-radius: 50%;
}
/* Track */
.track-5ae96e3c4adf > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.track-5ae96e3c4adf {
position: absolute;
left: 0px;
top: 0px;
width: 52px;
height: 32px;
border-radius: 16px;
opacity: 0.3;
}
/* Radio Button / Radio Button [selected] */
.radio-butt-5ae946f937bc {
position: absolute;
left: 165px;
top: 443px;
width: 20px;
height: 20px;
border-radius: 0px;
}
/* Container */
.container-5ae946f937be {
position: absolute;
left: 0px;
top: 0px;
width: 20px;
height: 20px;
border-radius: 0px;
overflow: hidden;
display: flex;
align-items: center;
align-content: stretch;
justify-content: center;
flex-direction: row;
flex-wrap: nowrap;
}
/* Inner Circle */
.inner-circ-5ae946f937bf {
width: 10px;
height: 10px;
background: #6750A4;
border-radius: 50%;
flex-shrink: 0;
}
/* Background – Outer Circle */
.background-5ae946f937bd {
position: absolute;
left: 0px;
top: 0px;
width: 20px;
height: 20px;
border: 2px solid #6750A4;
border-radius: 10px;
}
/* Button / Icon / Outlined / Toggle / Icon Button Outlined Toggle [Unselected] */
.button-i-5ae8dfa9838a {
position: absolute;
left: 261px;
top: 28px;
width: 48px;
height: 48px;
border-radius: 0px;
}
/* Container */
.container-5ae8dfa9838c {
position: absolute;
left: 4px;
top: 4px;
width: 40px;
height: 40px;
border-radius: 0px;
display: flex;
align-items: center;
align-content: stretch;
justify-content: center;
flex-direction: row;
flex-wrap: nowrap;
}
/* settings_FILL0_wght400_GRAD0_opsz48 */
.settings-f-5ae8dfa9838d > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.settings-f-5ae8dfa9838d {
position: relative;
width: 24px;
height: 24px;
flex-shrink: 0;
}
/* svg-path */
.svgpath-5ae8dfa9838f > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.svgpath-5ae8dfa9838f {
position: absolute;
left: 2px;
top: 2px;
width: 20px;
height: 20px;
}
/* base-background */
.basebackg-5ae8dfa9838e > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.basebackg-5ae8dfa9838e {
position: absolute;
left: 0px;
top: 0px;
width: 24px;
height: 24px;
display: none;
}
/* Background */
.background-5ae8dfa9838b > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.background-5ae8dfa9838b {
position: absolute;
left: 4px;
top: 4px;
width: 40px;
height: 40px;
border-radius: 20px;
}
/* Button / FAB / Tertiary / Tertiary FAB Large */
.button-f-5ae8d31ba273 {
position: absolute;
left: 38px;
top: 604px;
width: 96px;
height: 96px;
border-radius: 0px;
}
/* Container */
.container-5ae8d31ba277 {
position: absolute;
left: 0px;
top: 0px;
width: 96px;
height: 96px;
border-radius: 0px;
box-shadow: ;
overflow: hidden;
display: flex;
align-items: center;
align-content: stretch;
justify-content: center;
padding: 30px 30px 30px 30px;
flex-direction: row;
flex-wrap: nowrap;
}
/* add_FILL0_wght400_GRAD0_opsz48 */
.add-fill0-5ae8d31ba278 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.add-fill0-5ae8d31ba278 {
position: relative;
width: 36px;
height: 36px;
flex-shrink: 0;
margin: 30px 30px 30px 30px;
}
/* svg-path */
.svgpath-5ae8d31ba27a > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.svgpath-5ae8d31ba27a {
position: absolute;
left: 7.5px;
top: 7.5px;
width: 21px;
height: 21px;
}
/* base-background */
.basebackg-5ae8d31ba279 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.basebackg-5ae8d31ba279 {
position: absolute;
left: 0px;
top: 0px;
width: 36px;
height: 36px;
display: none;
}
/* Background Layers */
.background-5ae8d31ba274 {
position: absolute;
left: 0px;
top: 0px;
width: 96px;
height: 96px;
border-radius: 0px;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.16), 0px 2px 2px 0px rgba(0, 0, 0, 0.09), 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
}
/* Elevated Background */
.elevated-b-5ae8d31ba276 {
position: absolute;
left: 0px;
top: 0px;
width: 96px;
height: 96px;
background: #6750A4;
border-radius: 28px;
opacity: 0.11;
}
/* Background */
.background-5ae8d31ba275 {
position: absolute;
left: 0px;
top: 0px;
width: 96px;
height: 96px;
background: #FFD8E4;
border-radius: 28px;
}
/* Headline */
.headline-3a2344356e7c > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(-140px,-136px);
}
.headline-3a2344356e7c {
position: absolute;
left: 331.5px;
top: 182.5px;
width: 727px;
height: 219px;
}
.headline-3a2344356e7c .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.headline-3a2344356e7c .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
min-width: 100%;
margin-right: 1px;
vertical-align: top;
}
.headline-3a2344356e7c .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: center;
}
.headline-3a2344356e7c .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(255, 255, 255, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: break-spaces;
font-size: 81.92566747572815px;
text-rendering: geometricPrecision;
caret-color: rgba(255, 255, 255, 1);
text-decoration: none;
letter-spacing: 0px;
font-family: “Roboto”;
font-style: normal;
font-weight: 400;
}
.headline-3a2344356e7c .root-0-paragraph-set-0-paragraph-1 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: center;
}
.headline-3a2344356e7c .root-0-paragraph-set-0-paragraph-1-text-0 {
color: rgba(255, 255, 255, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: break-spaces;
font-size: 91.98671435871232px;
text-rendering: geometricPrecision;
caret-color: rgba(255, 255, 255, 1);
text-decoration: none;
letter-spacing: 0px;
font-family: “Roboto”;
font-style: normal;
font-weight: 700;
}
/* Subtitle */
.subtitle-3a23a1a00c89 {
position: absolute;
left: 377px;
top: 419px;
width: 636px;
height: 66px;
}
.subtitle-3a23a1a00c89 .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.subtitle-3a23a1a00c89 .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
min-width: 100%;
margin-right: 1px;
vertical-align: top;
}
.subtitle-3a23a1a00c89 .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: center;
}
.subtitle-3a23a1a00c89 .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(255, 255, 255, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: break-spaces;
font-size: 28px;
text-rendering: geometricPrecision;
caret-color: rgba(255, 255, 255, 1);
text-decoration: none;
letter-spacing: 0px;
font-family: “Roboto”;
font-style: normal;
font-weight: 300;
}
/* Highlights */
.highlights-3a2f4441d1f6 {
position: absolute;
left: 824px;
top: 40px;
width: 500px;
height: 101px;
box-shadow: 0px 4px 4px 0px rgba(103, 80, 164, 0.5);
}
/* Highlight Button */
.highlight-3bbbe6d058f8 {
position: absolute;
left: 274px;
top: 61px;
width: auto;
height: 40px;
border-radius: 0px;
display: flex;
align-items: center;
align-content: stretch;
justify-content: center;
flex-direction: row;
flex-wrap: nowrap;
}
/* Wrapper */
.wrapper-3bbbe6d058f9 {
position: relative;
width: auto;
height: 100%;
border-radius: 0px;
overflow: hidden;
display: flex;
align-items: start;
align-content: stretch;
justify-content: start;
flex-direction: column;
flex-wrap: nowrap;
max-height: 40px;
min-height: 40px;
min-width: 167px;
}
/* Background */
.background-3bbbe6d058fa {
width: 100%;
background: #FFD8E4;
border-radius: 20px;
flex: 1;
flex-shrink: 0;
margin: -40px 0px 0px 0px;
max-height: 40px;
min-height: 40px;
}
/* Container */
.container-3bbbe6d058fb {
position: relative;
width: auto;
border-radius: 0px;
display: flex;
align-items: center;
align-content: stretch;
justify-content: center;
padding: 0px 24px 0px 24px;
flex-direction: row;
flex-wrap: nowrap;
flex: 1;
max-height: 40px;
min-height: 40px;
}
/* Label */
.label-3bbbe6d058fc {
width: 119px;
height: 18px;
flex-shrink: 0;
}
.label-3bbbe6d058fc .root-0 {
display: flex;
white-space: break-spaces;
align-items: center;
}
.label-3bbbe6d058fc .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.label-3bbbe6d058fc .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: center;
}
.label-3bbbe6d058fc .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(30, 25, 43, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(30, 25, 43, 1);
text-decoration: none;
letter-spacing: 0.01px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* Highlight Button */
.highlight-3a91e531ff19 {
position: absolute;
left: 70px;
top: 61px;
width: auto;
height: 40px;
border-radius: 0px;
display: flex;
align-items: center;
align-content: stretch;
justify-content: center;
flex-direction: row;
flex-wrap: nowrap;
}
/* Wrapper */
.wrapper-3a91e531ff1a {
position: relative;
width: auto;
height: 100%;
border-radius: 0px;
overflow: hidden;
display: flex;
align-items: start;
align-content: stretch;
justify-content: start;
flex-direction: column;
flex-wrap: nowrap;
max-height: 40px;
min-height: 40px;
min-width: 183px;
}
/* Background */
.background-3a91e531ff1b {
width: 100%;
background: #FFD8E4;
border-radius: 20px;
flex: 1;
flex-shrink: 0;
margin: -40px 0px 0px 0px;
max-height: 40px;
min-height: 40px;
}
/* Container */
.container-3a91e531ff1c {
position: relative;
width: auto;
border-radius: 0px;
display: flex;
align-items: center;
align-content: stretch;
justify-content: center;
padding: 0px 24px 0px 24px;
flex-direction: row;
flex-wrap: nowrap;
flex: 1;
max-height: 40px;
min-height: 40px;
}
/* Label */
.label-3a91e531ff1d {
width: 135px;
height: 18px;
flex-shrink: 0;
}
.label-3a91e531ff1d .root-0 {
display: flex;
white-space: break-spaces;
align-items: center;
}
.label-3a91e531ff1d .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.label-3a91e531ff1d .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: center;
}
.label-3a91e531ff1d .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(30, 25, 43, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(30, 25, 43, 1);
text-decoration: none;
letter-spacing: 0.01px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* Highlight Button */
.highlight-3a2494fd7279 {
position: absolute;
left: 0px;
top: 1px;
width: auto;
height: 40px;
border-radius: 0px;
display: flex;
align-items: center;
align-content: stretch;
justify-content: center;
flex-direction: row;
flex-wrap: nowrap;
}
/* Wrapper */
.wrapper-3a2494fd727a {
position: relative;
width: auto;
height: 100%;
border-radius: 0px;
overflow: hidden;
display: flex;
align-items: start;
align-content: stretch;
justify-content: start;
flex-direction: column;
flex-wrap: nowrap;
max-height: 40px;
min-height: 40px;
min-width: 147px;
}
/* Background */
.background-3a2494fd727b {
width: 100%;
background: #FFD8E4;
border-radius: 20px;
flex: 1;
flex-shrink: 0;
margin: -40px 0px 0px 0px;
max-height: 40px;
min-height: 40px;
}
/* Container */
.container-3a2494fd727c {
position: relative;
width: auto;
border-radius: 0px;
display: flex;
align-items: center;
align-content: stretch;
justify-content: center;
padding: 0px 24px 0px 24px;
flex-direction: row;
flex-wrap: nowrap;
flex: 1;
max-height: 40px;
min-height: 40px;
}
/* Label */
.label-3a2494fd727d {
width: 99px;
height: 18px;
flex-shrink: 0;
}
.label-3a2494fd727d .root-0 {
display: flex;
white-space: break-spaces;
align-items: center;
}
.label-3a2494fd727d .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.label-3a2494fd727d .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: center;
}
.label-3a2494fd727d .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(30, 25, 43, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(30, 25, 43, 1);
text-decoration: none;
letter-spacing: 0.01px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* Highlight Button */
.highlight-3a91d2d24b0c {
position: absolute;
left: 349px;
top: 0px;
width: auto;
height: 40px;
border-radius: 0px;
display: flex;
align-items: center;
align-content: stretch;
justify-content: center;
flex-direction: row;
flex-wrap: nowrap;
}
/* Wrapper */
.wrapper-3a91d2d24b0d {
position: relative;
width: auto;
height: 100%;
border-radius: 0px;
overflow: hidden;
display: flex;
align-items: start;
align-content: stretch;
justify-content: start;
flex-direction: column;
flex-wrap: nowrap;
max-height: 40px;
min-height: 40px;
min-width: 151px;
}
/* Background */
.background-3a91d2d24b0e {
width: 100%;
background: #FFD8E4;
border-radius: 20px;
flex: 1;
flex-shrink: 0;
margin: -40px 0px 0px 0px;
max-height: 40px;
min-height: 40px;
}
/* Container */
.container-3a91d2d24b0f {
position: relative;
width: auto;
border-radius: 0px;
display: flex;
align-items: center;
align-content: stretch;
justify-content: center;
padding: 0px 24px 0px 24px;
flex-direction: row;
flex-wrap: nowrap;
flex: 1;
max-height: 40px;
min-height: 40px;
}
/* Label */
.label-3a91d2d24b10 {
width: 103px;
height: 18px;
flex-shrink: 0;
}
.label-3a91d2d24b10 .root-0 {
display: flex;
white-space: break-spaces;
align-items: center;
}
.label-3a91d2d24b10 .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.label-3a91d2d24b10 .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: center;
}
.label-3a91d2d24b10 .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(28, 27, 31, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(28, 27, 31, 1);
text-decoration: none;
letter-spacing: 0.01px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* Highlight Button */
.highlight-3a24aa323001 {
position: absolute;
left: 169px;
top: 0px;
width: auto;
height: 40px;
border-radius: 0px;
display: flex;
align-items: center;
align-content: stretch;
justify-content: center;
flex-direction: row;
flex-wrap: nowrap;
}
/* Wrapper */
.wrapper-3a24aa323002 {
position: relative;
width: auto;
height: 100%;
border-radius: 0px;
overflow: hidden;
display: flex;
align-items: start;
align-content: stretch;
justify-content: start;
flex-direction: column;
flex-wrap: nowrap;
max-height: 40px;
min-height: 40px;
min-width: 156px;
}
/* Background */
.background-3a24aa323003 {
width: 100%;
background: #FFD8E4;
border-radius: 20px;
flex: 1;
flex-shrink: 0;
margin: -40px 0px 0px 0px;
max-height: 40px;
min-height: 40px;
}
/* Container */
.container-3a24aa323004 {
position: relative;
width: auto;
border-radius: 0px;
display: flex;
align-items: center;
align-content: stretch;
justify-content: center;
padding: 0px 24px 0px 24px;
flex-direction: row;
flex-wrap: nowrap;
flex: 1;
max-height: 40px;
min-height: 40px;
}
/* Label */
.label-3a24aa323005 {
width: 108px;
height: 18px;
flex-shrink: 0;
}
.label-3a24aa323005 .root-0 {
display: flex;
white-space: break-spaces;
align-items: center;
}
.label-3a24aa323005 .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.label-3a24aa323005 .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: center;
}
.label-3a24aa323005 .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(28, 27, 31, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(28, 27, 31, 1);
text-decoration: none;
letter-spacing: 0.01px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* bg */
.bg-5ae84a5a4be9 {
position: absolute;
left: -747px;
top: -164px;
width: 2784.06px;
height: 947.89px;
filter: blur(8px);
}
/* Ellipse */
.ellipse-5ae83fbed93e {
position: absolute;
left: 28.53px;
top: 446.94px;
width: 975px;
height: 422px;
transform: matrix(0.99, -0.17, 0.17, 0.99, -0.00, -0.00);
background: #F4EFF4;
border-radius: 50%;
opacity: 0.2;
}
/* Ellipse */
.ellipse-5ae832945638 {
position: absolute;
left: 1780.53px;
top: 433.94px;
width: 975px;
height: 422px;
transform: matrix(0.99, -0.17, 0.17, 0.99, -0.00, -0.00);
background: #F4EFF4;
border-radius: 50%;
opacity: 0.2;
}
/* Ellipse */
.ellipse-3bbcba77fc7b {
position: absolute;
left: 528.53px;
top: 78.94px;
width: 975px;
height: 422px;
transform: matrix(0.99, -0.17, 0.17, 0.99, -0.00, -0.00);
background: #F4EFF4;
border-radius: 50%;
opacity: 0.2;
}
/* Version Container */
.version-co-3bc65885e449 {
position: absolute;
left: 0px;
top: 665px;
width: 1390px;
height: 60px;
border-radius: 0px;
overflow: hidden;
}
/* Version */
.version-3a2eec6a226f {
position: absolute;
left: 1045px;
top: 21px;
width: auto;
height: auto;
border-radius: 0px;
display: flex;
align-items: start;
align-content: stretch;
justify-content: start;
flex-direction: row;
flex-wrap: nowrap;
}
/* Text */
.text-3a261504fc1b {
width: 310px;
height: 18px;
flex-shrink: 0;
}
.text-3a261504fc1b .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.text-3a261504fc1b .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.text-3a261504fc1b .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.text-3a261504fc1b .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(255, 255, 255, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(255, 255, 255, 1);
text-decoration: none;
letter-spacing: 0.01px;
font-family: “Roboto”;
font-style: normal;
font-weight: 500;
}
/* Rectangle */
.rectangle-3bbe389fe9bd {
position: absolute;
left: 0px;
top: 0px;
width: 1390px;
height: 60px;
background: #FFFBFE;
border-radius: 0px;
opacity: 0.4;
}
