serato-css
Version:
A Modern Mini Framework Full Of Handy Utilities, Colors And Animations Inspired To Be Most Predictable And Community Driven.
1 lines • 382 kB
Source Map (JSON)
{"version":3,"names":[],"mappings":"","sources":["serato.css"],"sourcesContent":["@charset \"UTF-8\";\n/**\n * Reset Without Commentary Explanations To Keep It Lite\n * ================================================== */\n/**\n * Disable Animation\n */\n/**\n * Disable animation depends on Browser or Operation System configuration\n */\n/**\n * Accessability. Black and White Mode\n */\n/**\n * Accessability. Inverse Mode\n */\n/**\n * Meter reset\n */\nhtml {\n -webkit-text-size-adjust: 100%;\n}\nhtml:focus-within {\n scroll-behavior: smooth;\n}\n\n@viewport {\n width: device-width;\n}\n[role=button] {\n cursor: pointer;\n}\n\nbody {\n text-size-adjust: 100%;\n position: relative;\n width: 100%;\n min-height: 100vh;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeSpeed;\n}\n\n*,\n::after,\n::before {\n box-sizing: border-box;\n background-repeat: no-repeat;\n}\n\n::before,\n::after {\n text-decoration: inherit;\n vertical-align: inherit;\n}\n\n:where(:root) {\n cursor: default;\n line-height: 1.5;\n overflow-wrap: break-word;\n -moz-tab-size: 4;\n tab-size: 4;\n -webkit-tap-highlight-color: transparent;\n -webkit-text-size-adjust: 100%;\n}\n\n:where(h1) {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\na:not([class]) {\n text-decoration-skip-ink: auto;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n font-size: 100%;\n font: inherit;\n margin: 0;\n padding: 0;\n border: 0;\n vertical-align: baseline;\n}\n\n:focus {\n outline: 0;\n}\n\nmain,\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\nsection {\n display: block;\n}\n\n:where(nav) :where(ol, ul) {\n list-style-type: none;\n padding: 0;\n}\n\n:where(nav li)::before {\n content: \"\";\n float: left;\n}\n\n:where(dl, ol, ul) :where(dl, ol, ul) {\n margin: 0;\n}\n\n:where(b, strong) {\n font-weight: bolder;\n}\n\nblockquote,\nq {\n quotes: none;\n}\nblockquote:before, blockquote:after,\nq:before,\nq:after {\n content: \"\";\n content: none;\n}\n\ninput:required,\ninput {\n box-shadow: none;\n}\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n -webkit-box-shadow: 0 0 0 30px white inset;\n}\n\ninput[type=search]::-webkit-search-cancel-button,\ninput[type=search]::-webkit-search-decoration,\ninput[type=search]::-webkit-search-results-button,\ninput[type=search]::-webkit-search-results-decoration {\n -webkit-appearance: none;\n -moz-appearance: none;\n}\n\ninput[type=search] {\n -webkit-appearance: none;\n -moz-appearance: none;\n -webkit-box-sizing: content-box;\n -moz-box-sizing: content-box;\n box-sizing: content-box;\n}\n\n:where([type=\"search\" i]) {\n -webkit-appearance: textfield;\n /* 1 */\n outline-offset: -2px;\n /* 2 */\n}\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n::-webkit-input-placeholder {\n color: inherit;\n opacity: 0.54;\n}\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n font: inherit;\n}\n\n:where(dialog) {\n background-color: white;\n border: solid;\n color: black;\n height: -moz-fit-content;\n height: fit-content;\n left: 0;\n margin: auto;\n padding: 1em;\n position: absolute;\n right: 0;\n width: -moz-fit-content;\n width: fit-content;\n}\n\n:where(dialog:not([open])) {\n display: none;\n}\n\n:where(details > summary:first-of-type) {\n display: list-item;\n}\n\n:where([aria-busy=\"true\" i]) {\n cursor: progress;\n}\n\n:where([aria-controls]) {\n cursor: pointer;\n}\n\n:where([aria-disabled=\"true\" i], [disabled]) {\n cursor: not-allowed;\n}\n\n:where([aria-hidden=\"false\" i][hidden]) {\n display: initial;\n}\n\n:where([aria-hidden=\"false\" i][hidden]:not(:focus)) {\n clip: rect(0, 0, 0, 0);\n position: absolute;\n}\n\n:where(iframe, img, input, video, select, textarea) {\n height: auto;\n max-width: 100%;\n}\n\n:where(button, input, select, textarea) {\n background-color: transparent;\n border: 1px solid WindowFrame;\n color: inherit;\n font: inherit;\n letter-spacing: inherit;\n padding: 0.25em 0.375em;\n}\n\n:where(select) {\n appearance: none;\n background: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E\") no-repeat right center/1em;\n border-radius: 0;\n padding-right: 1em;\n}\n\n:where(select[multiple]) {\n background-image: none;\n}\n\n:where([type=\"color\" i], [type=\"range\" i]) {\n border-width: 0;\n padding: 0;\n}\n\ntextarea {\n margin: 0;\n overflow: auto;\n vertical-align: top;\n resize: vertical;\n}\n\ninput:focus {\n outline: none;\n}\n\naudio,\ncanvas,\nvideo {\n display: inline-block;\n max-width: 100%;\n}\n\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n\n[hidden] {\n display: none;\n}\n\na:active,\na:hover {\n outline: none;\n}\n\nimg {\n max-width: 100%;\n display: inline-block;\n vertical-align: middle;\n height: auto;\n}\n\n:where(audio, canvas, iframe, img, svg, video) {\n vertical-align: middle;\n}\n\n:where(iframe) {\n border-style: none;\n}\n\n:where(svg:not([fill])) {\n fill: currentColor;\n}\n\npicture {\n display: inline-block;\n}\n\nbutton,\ninput {\n line-height: normal;\n}\n\nbutton,\nselect {\n text-transform: none;\n}\n\nbutton,\nhtml input[type=button],\ninput[type=reset],\ninput[type=submit] {\n -webkit-appearance: button;\n cursor: pointer;\n border: 0;\n background: transparent;\n}\n\na,\narea,\nbutton,\n[role=button],\ninput,\nlabel,\nselect,\nsummary,\ntextarea {\n touch-action: manipulation;\n}\n\nbutton[disabled],\nhtml input[disabled] {\n cursor: default;\n}\n\n[disabled] {\n pointer-events: none;\n}\n\ninput[type=checkbox],\ninput[type=radio] {\n padding: 0;\n box-sizing: border-box;\n}\n\ninput[type=search] {\n -webkit-appearance: textfield;\n -moz-box-sizing: content-box;\n -webkit-box-sizing: content-box;\n box-sizing: content-box;\n}\n\ninput[type=search]::-webkit-search-cancel-button,\ninput[type=search]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\nbutton::-moz-focus-inner,\ninput::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\n\nbutton {\n border: 0;\n background: transparent;\n}\n\ntextarea {\n overflow: auto;\n vertical-align: top;\n resize: vertical;\n}\n\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n text-indent: 0;\n}\n\nhr {\n box-sizing: content-box;\n overflow: visible;\n color: inherit;\n background: #000;\n border: 0;\n height: 1px;\n line-height: 0;\n margin: 0;\n padding: 0;\n page-break-after: always;\n width: 100%;\n}\n\n:where(pre) {\n font-family: monospace, monospace;\n /* 1 */\n font-size: 1em;\n /* 2 */\n overflow: auto;\n /* 3 */\n}\n\na {\n background-color: transparent;\n}\n\n:where(abbr[title]) {\n cursor: help;\n border-bottom: none;\n text-decoration: underline;\n text-decoration: underline dotted;\n}\n\n:where(code, pre, kbd, samp) {\n font-family: monospace, monospace;\n /* 1 */\n font-size: 1em;\n /* 2 */\n}\n\n:where(small) {\n font-size: 80%;\n}\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -5px;\n}\n\nsup {\n top: -5px;\n}\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit;\n font-size: 100%;\n line-height: 1;\n margin: 0;\n padding: 0;\n}\n\nbutton,\ninput {\n overflow: visible;\n}\n\nbutton,\nselect {\n text-transform: none;\n}\n\nbutton,\n[type=button],\n[type=reset],\n[type=submit] {\n -webkit-appearance: button;\n}\n\nbutton::-moz-focus-inner,\n[type=button]::-moz-focus-inner,\n[type=reset]::-moz-focus-inner,\n[type=submit]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n outline: 0;\n}\n\nlegend {\n color: inherit;\n white-space: normal;\n display: block;\n border: 0;\n max-width: 100%;\n width: 100%;\n}\n\n:where(fieldset) {\n min-width: 0;\n border: 1px solid #a0a0a0;\n}\n\nbody:not(:-moz-handler-blocked) fieldset {\n display: block;\n}\n\nprogress {\n vertical-align: baseline;\n}\n\n[type=number]::-webkit-inner-spin-button,\n[type=number]::-webkit-outer-spin-button {\n height: auto;\n}\n\n[type=search] {\n -webkit-appearance: textfield;\n outline-offset: -2px;\n}\n\n[type=search]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n font: inherit;\n}\n\nsummary {\n display: list-item;\n}\n\ntemplate {\n display: none;\n}\n\n/**\n * SYSTEM UI FONT\n */\n/**\n * Add the correct system-ui font-family in Firefox.\n */\n@font-face {\n font-family: system-ui;\n src: local(\".AppleSystemUIFont\"), local(\"Segoe UI\"), local(\"Ubuntu\"), local(\"Roboto-Regular\"), local(\"HelveticaNeue\");\n}\n@font-face {\n font-family: system-ui;\n font-style: italic;\n src: local(\".AppleSystemUIFont\"), local(\"Segoe UI Italic\"), local(\"Ubuntu-Italic\"), local(\"Roboto-Italic\"), local(\"HelveticaNeue-Italic\");\n}\n@font-face {\n font-family: system-ui;\n font-weight: bold;\n src: local(\".AppleSystemUIFont\"), local(\"Segoe UI Bold\"), local(\"Ubuntu-Bold\"), local(\"Roboto-Bold\"), local(\"HelveticaNeue-Bold\");\n}\n@font-face {\n font-family: system-ui;\n font-style: italic;\n font-weight: bold;\n src: local(\".AppleSystemUIFont\"), local(\"Segoe UI Bold Italic\"), local(\"Ubuntu-BoldItalic\"), local(\"Roboto-BoldItalic\"), local(\"HelveticaNeue-BoldItalic\");\n}\n/**\n * UI MONOSPACE FONT\n */\n/**\n * Add the correct system-ui font-family in Chrome, Edge, and Firefox.\n */\n@font-face {\n font-family: ui-monospace;\n src: local(\".AppleSystemUIFontMonospaced-Regular\"), local(\"Segoe UI Mono\"), local(\"UbuntuMono\"), local(\"Roboto-Mono\"), local(\"Menlo\");\n}\n@font-face {\n font-family: ui-monospace;\n font-style: italic;\n src: local(\".AppleSystemUIFontMonospaced-RegularItalic\"), local(\"Segoe UI Mono Italic\"), local(\"UbuntuMono-Italic\"), local(\"Roboto-Mono-Italic\"), local(\"Menlo-Italic\");\n}\n@font-face {\n font-family: ui-monospace;\n font-weight: bold;\n src: local(\".AppleSystemUIFontMonospaced-Bold\"), local(\"Segoe UI Mono Bold\"), local(\"UbuntuMono-Bold\"), local(\"Roboto-Mono-Bold\"), local(\"Menlo-Bold\");\n}\n@font-face {\n font-family: ui-monospace;\n font-style: italic;\n font-weight: bold;\n src: local(\".AppleSystemUIFontMonospaced-BoldItalic\"), local(\"Segoe UI Mono Bold Italic\"), local(\"UbuntuMono-BoldItalic\"), local(\"Roboto-Mono-BoldItalic\"), local(\"Menlo-BoldItalic\");\n}\n/* Basic color-variables */\n/*\n* Basic color shades based on basic colors and their respective maps\n */\n/* get an inclusive basic colors shades map */\n/* serato adapted color system inspired by apple watch os color system */\n/* color variables && serato color system */\n/*! sanitize.css (font family stuff only) v13.0.0 | CC0-1.0 License | https://github.com/csstools/sanitize.css */\n/**\n * Serato Typography\n */\n/**\n * Use the default user interface font in all browsers (opinionated).\n */\nhtml {\n font-family: system-ui, -apple-system, \"Segoe UI\", \"Roboto\", \"Ubuntu\", \"Cantarell\", \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n/**\n * Use the default monospace user interface font in all browsers (opinionated).\n */\ncode,\nkbd,\nsamp,\npre {\n font-family: ui-monospace, \"Menlo\", \"Consolas\", \"Roboto Mono\", \"Ubuntu Monospace\", \"Noto Mono\", \"Oxygen Mono\", \"Liberation Mono\", monospace, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\nhtml,\nbody {\n font-weight: 400;\n}\n\nhtml {\n font-size: 100%;\n}\n\nbody {\n color: #212529;\n font-size: 1rem;\n line-height: 1.3;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeSpeed;\n}\n\nh1,\nh2,\nh3 {\n font-family: Arial, Helvetica, sans-serif;\n font-weight: 700;\n}\n\nhtml,\nbutton,\ninput,\nselect,\ntextarea {\n color: #212529;\n}\n\na {\n color: #212529;\n text-decoration: none;\n}\na:visited {\n color: #212529;\n text-decoration: none;\n outline: 0;\n}\na:focus, a:active, a:hover {\n color: #212529;\n text-decoration: underline;\n outline: 0;\n}\n\ni,\nem {\n font-style: italic;\n}\n\nb,\nstrong {\n font-weight: 700;\n}\n\ninput:focus {\n outline: none;\n}\n\n[disabled] {\n pointer-events: none;\n opacity: 0.5;\n}\n\n.br {\n display: block;\n}\n\n/*\n* Beta Hacks & Experiments ( these are proposed for the next version and still in beta and can change over next realease!)\n*/\n/**\n * Hack from Kevin Powell to automatically add top spacing to all children of any parent, cause usually nobody ever wants them attached\n */\n* + * {\n margin-top: 1.5rem;\n}\n\n* > * {\n margin-top: 0;\n}\n\n/**\n * Always hide an element with the `hidden` HTML attribute (from PureCSS).\n */\n[hidden] {\n display: none !important;\n}\n\n/**\n * Natural flow and rythm in articles by default\n */\narticle > * + * {\n margin-top: 1.5rem;\n}\n\n/**\n* Hide the horizontal overflow on body by default\n body {\n overflow-x: hidden;\n }\n*/\n/**\n * Customized scrollbar // get a better one!\n */\nhtml::-webkit-scrollbar {\n width: 12px;\n height: 6px;\n background-color: #eff1f5;\n}\n\nhtml::-webkit-scrollbar-track {\n border-radius: 0.25rem;\n background-color: transparent;\n}\n\nhtml::-webkit-scrollbar-thumb {\n border-radius: 0.25rem;\n height: 6px;\n background-color: #9ca3af;\n border: 2px solid #eff1f5;\n}\nhtml::-webkit-scrollbar-thumb:hover {\n background-color: #bbc5d4;\n}\n\n/**\n * customized on page text selection colors\n */\n::selection {\n background-color: #adb5bd;\n}\n\n/* Serato Base */\n/*! serato-css v1.0.0 | MIT License | https://github.com/Hussseinkizz/serato-css */\n/*! scss-reset v1.2.2 | MIT License | https://github.com/andreymatin/scss-reset */\n/*! sanitize.css v13.0.0 | CC0-1.0 License | https://github.com/csstools/sanitize.css */\n/*! css-reset-and-normalize-sass (flavor only) v0.1.2 | MIT License | https://github.com/webdesignberlin/css-reset-and-normalize-sass */\n/* Serato Functions */\n.center-with-margin {\n margin: 0px auto;\n}\n\n.center-with-grid {\n display: grid;\n place-items: center;\n}\n\n.center-with-flex {\n display: flex;\n flex: 1 1 auto;\n justify-content: center;\n align-items: center;\n}\n\n.is-overlay {\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n}\n\n/* A mega hover state color & background color generator mixin */\n/* Media Queries */\n/* Serato Utilities */\n.container {\n display: block;\n width: 100%;\n max-width: 1170px;\n padding: 0.5rem 1rem;\n margin: 0px auto;\n}\n.container-fluid {\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 1rem 0px;\n}\n\n.grid-columns {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 0.5rem;\n width: 100%;\n}\n\n.grid-column-1 {\n flex: 0 0 8.3333333333%;\n}\n\n.grid-column-2 {\n flex: 0 0 16.6666666667%;\n}\n\n.grid-column-3 {\n flex: 0 0 25%;\n}\n\n.grid-column-4 {\n flex: 0 0 33.3333333333%;\n}\n\n.grid-column-5 {\n flex: 0 0 41.6666666667%;\n}\n\n.grid-column-6 {\n flex: 0 0 50%;\n}\n\n.grid-column-7 {\n flex: 0 0 58.3333333333%;\n}\n\n.grid-column-8 {\n flex: 0 0 66.6666666667%;\n}\n\n.grid-column-9 {\n flex: 0 0 75%;\n}\n\n.grid-column-10 {\n flex: 0 0 83.3333333333%;\n}\n\n.grid-column-11 {\n flex: 0 0 91.6666666667%;\n}\n\n.grid-column-12 {\n flex: 0 0 100%;\n}\n\n@media only screen and (min-width: 576px) {\n .grid-column-1-on-small {\n width: 8.3333333333%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-2-on-small {\n width: 16.6666666667%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-3-on-small {\n width: 25%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-4-on-small {\n width: 33.3333333333%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-5-on-small {\n width: 41.6666666667%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-6-on-small {\n width: 50%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-7-on-small {\n width: 58.3333333333%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-8-on-small {\n width: 66.6666666667%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-9-on-small {\n width: 75%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-10-on-small {\n width: 83.3333333333%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-11-on-small {\n width: 91.6666666667%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-12-on-small {\n width: 100%;\n padding: 0.5rem 1rem;\n }\n}\n@media only screen and (min-width: 768px) {\n .grid-column-1-on-medium {\n width: 8.3333333333%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-2-on-medium {\n width: 16.6666666667%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-3-on-medium {\n width: 25%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-4-on-medium {\n width: 33.3333333333%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-5-on-medium {\n width: 41.6666666667%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-6-on-medium {\n width: 50%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-7-on-medium {\n width: 58.3333333333%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-8-on-medium {\n width: 66.6666666667%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-9-on-medium {\n width: 75%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-10-on-medium {\n width: 83.3333333333%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-11-on-medium {\n width: 91.6666666667%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-12-on-medium {\n width: 100%;\n padding: 0.5rem 1rem;\n }\n}\n@media only screen and (min-width: 992px) {\n .grid-column-1-on-large {\n width: 8.3333333333%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-2-on-large {\n width: 16.6666666667%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-3-on-large {\n width: 25%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-4-on-large {\n width: 33.3333333333%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-5-on-large {\n width: 41.6666666667%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-6-on-large {\n width: 50%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-7-on-large {\n width: 58.3333333333%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-8-on-large {\n width: 66.6666666667%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-9-on-large {\n width: 75%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-10-on-large {\n width: 83.3333333333%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-11-on-large {\n width: 91.6666666667%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-12-on-large {\n width: 100%;\n padding: 0.5rem 1rem;\n }\n}\n@media only screen and (min-width: 1200px) {\n .grid-column-1-on-xlarge {\n width: 8.3333333333%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-2-on-xlarge {\n width: 16.6666666667%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-3-on-xlarge {\n width: 25%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-4-on-xlarge {\n width: 33.3333333333%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-5-on-xlarge {\n width: 41.6666666667%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-6-on-xlarge {\n width: 50%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-7-on-xlarge {\n width: 58.3333333333%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-8-on-xlarge {\n width: 66.6666666667%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-9-on-xlarge {\n width: 75%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-10-on-xlarge {\n width: 83.3333333333%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-11-on-xlarge {\n width: 91.6666666667%;\n padding: 0.5rem 1rem;\n }\n\n .grid-column-12-on-xlarge {\n width: 100%;\n padding: 0.5rem 1rem;\n }\n}\n@media only screen and (max-width: 322px) {\n .grid-column-on-1 {\n width: 8.3333333333%;\n padding: 0px 1rem;\n }\n\n .grid-column-on-2 {\n width: 16.6666666667%;\n padding: 0px 1rem;\n }\n\n .grid-column-on-3 {\n width: 25%;\n padding: 0px 1rem;\n }\n\n .grid-column-on-4 {\n width: 33.3333333333%;\n padding: 0px 1rem;\n }\n\n .grid-column-on-5 {\n width: 41.6666666667%;\n padding: 0px 1rem;\n }\n\n .grid-column-on-6 {\n width: 50%;\n padding: 0px 1rem;\n }\n\n .grid-column-on-7 {\n width: 58.3333333333%;\n padding: 0px 1rem;\n }\n\n .grid-column-on-8 {\n width: 66.6666666667%;\n padding: 0px 1rem;\n }\n\n .grid-column-on-9 {\n width: 75%;\n padding: 0px 1rem;\n }\n\n .grid-column-on-10 {\n width: 83.3333333333%;\n padding: 0px 1rem;\n }\n\n .grid-column-on-11 {\n width: 91.6666666667%;\n padding: 0px 1rem;\n }\n\n .grid-column-on-12 {\n width: 100%;\n padding: 0px 1rem;\n }\n}\n.flex, .flex-column-reverse, .flex-column, .flex-row-reverse, .flex-row, .flex-all-center {\n display: flex;\n gap: 0.5rem;\n flex: 1 1 100%;\n}\n\n.flex-all-center {\n justify-content: center;\n align-items: center;\n}\n\n.flex-row {\n flex-direction: row !important;\n}\n\n.flex-row-reverse {\n flex-direction: row-reverse !important;\n}\n\n.flex-column {\n flex-direction: column !important;\n}\n\n.flex-column-reverse {\n flex-direction: column-reverse !important;\n}\n\n.flex-nowrap {\n flex-wrap: nowrap !important;\n}\n\n.flex-wrap {\n flex-wrap: wrap !important;\n}\n\n.flex-wrap-reverse {\n flex-wrap: wrap-reverse !important;\n}\n\n.justify-content-flex-start {\n justify-content: flex-start !important;\n}\n\n.justify-content-flex-end {\n justify-content: flex-end !important;\n}\n\n.justify-content-center {\n justify-content: center !important;\n}\n\n.justify-content-between {\n justify-content: space-between !important;\n}\n\n.justify-content-around {\n justify-content: space-around !important;\n}\n\n.justify-content-evenly {\n justify-content: space-evenly !important;\n}\n\n.justify-content-start {\n justify-content: start !important;\n}\n\n.justify-content-end {\n justify-content: end !important;\n}\n\n.justify-content-left {\n justify-content: left !important;\n}\n\n.justify-content-right {\n justify-content: right !important;\n}\n\n.align-content-flex-start {\n align-content: flex-start !important;\n}\n\n.align-content-flex-end {\n align-content: flex-end !important;\n}\n\n.align-content-center {\n align-content: center !important;\n}\n\n.align-content-between {\n align-content: space-between !important;\n}\n\n.align-content-around {\n align-content: space-around !important;\n}\n\n.align-content-evenly {\n align-content: space-evenly !important;\n}\n\n.align-content-stretch {\n align-content: stretch !important;\n}\n\n.align-content-start {\n align-content: start !important;\n}\n\n.align-content-end {\n align-content: end !important;\n}\n\n.align-content-baseline {\n align-content: baseline !important;\n}\n\n.align-items-stretch {\n align-items: stretch !important;\n}\n\n.align-items-flex-start {\n align-items: flex-start !important;\n}\n\n.align-items-flex-end {\n align-items: flex-end !important;\n}\n\n.align-items-center {\n align-items: center !important;\n}\n\n.align-items-baseline {\n align-items: baseline !important;\n}\n\n.align-items-start {\n align-items: start !important;\n}\n\n.align-items-end {\n align-items: end !important;\n}\n\n.align-items-self-start {\n align-items: self-start !important;\n}\n\n.align-items-self-end {\n align-items: self-end !important;\n}\n\n.align-self-auto {\n align-self: auto !important;\n}\n\n.align-self-flex-start {\n align-self: flex-start !important;\n}\n\n.align-self-flex-end {\n align-self: flex-end !important;\n}\n\n.align-self-center {\n align-self: center !important;\n}\n\n.align-self-baseline {\n align-self: baseline !important;\n}\n\n.align-self-stretch {\n align-self: stretch !important;\n}\n\n.grow-0 {\n flex-grow: 0 !important;\n}\n\n.grow-1 {\n flex-grow: 1 !important;\n}\n\n.grow-2 {\n flex-grow: 2 !important;\n}\n\n.grow-3 {\n flex-grow: 3 !important;\n}\n\n.grow-4 {\n flex-grow: 4 !important;\n}\n\n.grow-5 {\n flex-grow: 5 !important;\n}\n\n.shrink-0 {\n flex-shrink: 0 !important;\n}\n\n.shrink-1 {\n flex-shrink: 1 !important;\n}\n\n.shrink-2 {\n flex-shrink: 2 !important;\n}\n\n.shrink-3 {\n flex-shrink: 3 !important;\n}\n\n.shrink-4 {\n flex-shrink: 4 !important;\n}\n\n.shrink-5 {\n flex-shrink: 5 !important;\n}\n\n.flex-gap-0 {\n gap: 0 !important;\n}\n\n.flex-gap-x {\n gap: 0.25rem !important;\n}\n\n.flex-gap-1 {\n gap: 0.5rem !important;\n}\n\n.flex-gap-2 {\n gap: 1.5rem !important;\n}\n\n.flex-gap-3 {\n gap: 2rem !important;\n}\n\n.flex-gap-4 {\n gap: 2.5rem !important;\n}\n\n.flex-gap-5 {\n gap: 3rem !important;\n}\n\n.flex-gap-6 {\n gap: 4rem !important;\n}\n\n.margin-none {\n margin: 0 !important;\n}\n\n.padding-none {\n padding: 0 !important;\n}\n\n.margin-0 {\n margin: 0 !important;\n}\n\n.margin-top-0 {\n margin-top: 0 !important;\n}\n\n.margin-right-0 {\n margin-right: 0 !important;\n}\n\n.margin-bottom-0 {\n margin-bottom: 0 !important;\n}\n\n.margin-left-0 {\n margin-left: 0 !important;\n}\n\n.margin-x-0 {\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n.margin-y-0 {\n margin-top: 0 !important;\n margin-bottom: 0 !important;\n}\n\n.margin-1 {\n margin: 0.25rem !important;\n}\n\n.margin-top-1 {\n margin-top: 0.25rem !important;\n}\n\n.margin-right-1 {\n margin-right: 0.25rem !important;\n}\n\n.margin-bottom-1 {\n margin-bottom: 0.25rem !important;\n}\n\n.margin-left-1 {\n margin-left: 0.25rem !important;\n}\n\n.margin-x-1 {\n margin-left: 0.25rem !important;\n margin-right: 0.25rem !important;\n}\n\n.margin-y-1 {\n margin-top: 0.25rem !important;\n margin-bottom: 0.25rem !important;\n}\n\n.margin-2 {\n margin: 0.5rem !important;\n}\n\n.margin-top-2 {\n margin-top: 0.5rem !important;\n}\n\n.margin-right-2 {\n margin-right: 0.5rem !important;\n}\n\n.margin-bottom-2 {\n margin-bottom: 0.5rem !important;\n}\n\n.margin-left-2 {\n margin-left: 0.5rem !important;\n}\n\n.margin-x-2 {\n margin-left: 0.5rem !important;\n margin-right: 0.5rem !important;\n}\n\n.margin-y-2 {\n margin-top: 0.5rem !important;\n margin-bottom: 0.5rem !important;\n}\n\n.margin-3 {\n margin: 0.75rem !important;\n}\n\n.margin-top-3 {\n margin-top: 0.75rem !important;\n}\n\n.margin-right-3 {\n margin-right: 0.75rem !important;\n}\n\n.margin-bottom-3 {\n margin-bottom: 0.75rem !important;\n}\n\n.margin-left-3 {\n margin-left: 0.75rem !important;\n}\n\n.margin-x-3 {\n margin-left: 0.75rem !important;\n margin-right: 0.75rem !important;\n}\n\n.margin-y-3 {\n margin-top: 0.75rem !important;\n margin-bottom: 0.75rem !important;\n}\n\n.margin-4 {\n margin: 1rem !important;\n}\n\n.margin-top-4 {\n margin-top: 1rem !important;\n}\n\n.margin-right-4 {\n margin-right: 1rem !important;\n}\n\n.margin-bottom-4 {\n margin-bottom: 1rem !important;\n}\n\n.margin-left-4 {\n margin-left: 1rem !important;\n}\n\n.margin-x-4 {\n margin-left: 1rem !important;\n margin-right: 1rem !important;\n}\n\n.margin-y-4 {\n margin-top: 1rem !important;\n margin-bottom: 1rem !important;\n}\n\n.margin-5 {\n margin: 1.5rem !important;\n}\n\n.margin-top-5 {\n margin-top: 1.5rem !important;\n}\n\n.margin-right-5 {\n margin-right: 1.5rem !important;\n}\n\n.margin-bottom-5 {\n margin-bottom: 1.5rem !important;\n}\n\n.margin-left-5 {\n margin-left: 1.5rem !important;\n}\n\n.margin-x-5 {\n margin-left: 1.5rem !important;\n margin-right: 1.5rem !important;\n}\n\n.margin-y-5 {\n margin-top: 1.5rem !important;\n margin-bottom: 1.5rem !important;\n}\n\n.margin-6 {\n margin: 3rem !important;\n}\n\n.margin-top-6 {\n margin-top: 3rem !important;\n}\n\n.margin-right-6 {\n margin-right: 3rem !important;\n}\n\n.margin-bottom-6 {\n margin-bottom: 3rem !important;\n}\n\n.margin-left-6 {\n margin-left: 3rem !important;\n}\n\n.margin-x-6 {\n margin-left: 3rem !important;\n margin-right: 3rem !important;\n}\n\n.margin-y-6 {\n margin-top: 3rem !important;\n margin-bottom: 3rem !important;\n}\n\n.margin-7 {\n margin: 4rem !important;\n}\n\n.margin-top-7 {\n margin-top: 4rem !important;\n}\n\n.margin-right-7 {\n margin-right: 4rem !important;\n}\n\n.margin-bottom-7 {\n margin-bottom: 4rem !important;\n}\n\n.margin-left-7 {\n margin-left: 4rem !important;\n}\n\n.margin-x-7 {\n margin-left: 4rem !important;\n margin-right: 4rem !important;\n}\n\n.margin-y-7 {\n margin-top: 4rem !important;\n margin-bottom: 4rem !important;\n}\n\n.margin-8 {\n margin: 5rem !important;\n}\n\n.margin-top-8 {\n margin-top: 5rem !important;\n}\n\n.margin-right-8 {\n margin-right: 5rem !important;\n}\n\n.margin-bottom-8 {\n margin-bottom: 5rem !important;\n}\n\n.margin-left-8 {\n margin-left: 5rem !important;\n}\n\n.margin-x-8 {\n margin-left: 5rem !important;\n margin-right: 5rem !important;\n}\n\n.margin-y-8 {\n margin-top: 5rem !important;\n margin-bottom: 5rem !important;\n}\n\n.margin-9 {\n margin: 6rem !important;\n}\n\n.margin-top-9 {\n margin-top: 6rem !important;\n}\n\n.margin-right-9 {\n margin-right: 6rem !important;\n}\n\n.margin-bottom-9 {\n margin-bottom: 6rem !important;\n}\n\n.margin-left-9 {\n margin-left: 6rem !important;\n}\n\n.margin-x-9 {\n margin-left: 6rem !important;\n margin-right: 6rem !important;\n}\n\n.margin-y-9 {\n margin-top: 6rem !important;\n margin-bottom: 6rem !important;\n}\n\n.margin-auto {\n margin: auto !important;\n}\n\n.margin-top-auto {\n margin-top: auto !important;\n}\n\n.margin-right-auto {\n margin-right: auto !important;\n}\n\n.margin-bottom-auto {\n margin-bottom: auto !important;\n}\n\n.margin-left-auto {\n margin-left: auto !important;\n}\n\n.margin-x-auto {\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.margin-y-auto {\n margin-top: auto !important;\n margin-bottom: auto !important;\n}\n\n.padding-0 {\n padding: 0 !important;\n}\n\n.padding-top-0 {\n padding-top: 0 !important;\n}\n\n.padding-right-0 {\n padding-right: 0 !important;\n}\n\n.padding-bottom-0 {\n padding-bottom: 0 !important;\n}\n\n.padding-left-0 {\n padding-left: 0 !important;\n}\n\n.padding-x-0 {\n padding-left: 0 !important;\n padding-right: 0 !important;\n}\n\n.padding-y-0 {\n padding-top: 0 !important;\n padding-bottom: 0 !important;\n}\n\n.padding-1 {\n padding: 0.25rem !important;\n}\n\n.padding-top-1 {\n padding-top: 0.25rem !important;\n}\n\n.padding-right-1 {\n padding-right: 0.25rem !important;\n}\n\n.padding-bottom-1 {\n padding-bottom: 0.25rem !important;\n}\n\n.padding-left-1 {\n padding-left: 0.25rem !important;\n}\n\n.padding-x-1 {\n padding-left: 0.25rem !important;\n padding-right: 0.25rem !important;\n}\n\n.padding-y-1 {\n padding-top: 0.25rem !important;\n padding-bottom: 0.25rem !important;\n}\n\n.padding-2 {\n padding: 0.5rem !important;\n}\n\n.padding-top-2 {\n padding-top: 0.5rem !important;\n}\n\n.padding-right-2 {\n padding-right: 0.5rem !important;\n}\n\n.padding-bottom-2 {\n padding-bottom: 0.5rem !important;\n}\n\n.padding-left-2 {\n padding-left: 0.5rem !important;\n}\n\n.padding-x-2 {\n padding-left: 0.5rem !important;\n padding-right: 0.5rem !important;\n}\n\n.padding-y-2 {\n padding-top: 0.5rem !important;\n padding-bottom: 0.5rem !important;\n}\n\n.padding-3 {\n padding: 0.75rem !important;\n}\n\n.padding-top-3 {\n padding-top: 0.75rem !important;\n}\n\n.padding-right-3 {\n padding-right: 0.75rem !important;\n}\n\n.padding-bottom-3 {\n padding-bottom: 0.75rem !important;\n}\n\n.padding-left-3 {\n padding-left: 0.75rem !important;\n}\n\n.padding-x-3 {\n padding-left: 0.75rem !important;\n padding-right: 0.75rem !important;\n}\n\n.padding-y-3 {\n padding-top: 0.75rem !important;\n padding-bottom: 0.75rem !important;\n}\n\n.padding-4 {\n padding: 1rem !important;\n}\n\n.padding-top-4 {\n padding-top: 1rem !important;\n}\n\n.padding-right-4 {\n padding-right: 1rem !important;\n}\n\n.padding-bottom-4 {\n padding-bottom: 1rem !important;\n}\n\n.padding-left-4 {\n padding-left: 1rem !important;\n}\n\n.padding-x-4 {\n padding-left: 1rem !important;\n padding-right: 1rem !important;\n}\n\n.padding-y-4 {\n padding-top: 1rem !important;\n padding-bottom: 1rem !important;\n}\n\n.padding-5 {\n padding: 1.5rem !important;\n}\n\n.padding-top-5 {\n padding-top: 1.5rem !important;\n}\n\n.padding-right-5 {\n padding-right: 1.5rem !important;\n}\n\n.padding-bottom-5 {\n padding-bottom: 1.5rem !important;\n}\n\n.padding-left-5 {\n padding-left: 1.5rem !important;\n}\n\n.padding-x-5 {\n padding-left: 1.5rem !important;\n padding-right: 1.5rem !important;\n}\n\n.padding-y-5 {\n padding-top: 1.5rem !important;\n padding-bottom: 1.5rem !important;\n}\n\n.padding-6 {\n padding: 3rem !important;\n}\n\n.padding-top-6 {\n padding-top: 3rem !important;\n}\n\n.padding-right-6 {\n padding-right: 3rem !important;\n}\n\n.padding-bottom-6 {\n padding-bottom: 3rem !important;\n}\n\n.padding-left-6 {\n padding-left: 3rem !important;\n}\n\n.padding-x-6 {\n padding-left: 3rem !important;\n padding-right: 3rem !important;\n}\n\n.padding-y-6 {\n padding-top: 3rem !important;\n padding-bottom: 3rem !important;\n}\n\n.padding-7 {\n padding: 4rem !important;\n}\n\n.padding-top-7 {\n padding-top: 4rem !important;\n}\n\n.padding-right-7 {\n padding-right: 4rem !important;\n}\n\n.padding-bottom-7 {\n padding-bottom: 4rem !important;\n}\n\n.padding-left-7 {\n padding-left: 4rem !important;\n}\n\n.padding-x-7 {\n padding-left: 4rem !important;\n padding-right: 4rem !important;\n}\n\n.padding-y-7 {\n padding-top: 4rem !important;\n padding-bottom: 4rem !important;\n}\n\n.padding-8 {\n padding: 5rem !important;\n}\n\n.padding-top-8 {\n padding-top: 5rem !important;\n}\n\n.padding-right-8 {\n padding-right: 5rem !important;\n}\n\n.padding-bottom-8 {\n padding-bottom: 5rem !important;\n}\n\n.padding-left-8 {\n padding-left: 5rem !important;\n}\n\n.padding-x-8 {\n padding-left: 5rem !important;\n padding-right: 5rem !important;\n}\n\n.padding-y-8 {\n padding-top: 5rem !important;\n padding-bottom: 5rem !important;\n}\n\n.padding-9 {\n padding: 6rem !important;\n}\n\n.padding-top-9 {\n padding-top: 6rem !important;\n}\n\n.padding-right-9 {\n padding-right: 6rem !important;\n}\n\n.padding-bottom-9 {\n padding-bottom: 6rem !important;\n}\n\n.padding-left-9 {\n padding-left: 6rem !important;\n}\n\n.padding-x-9 {\n padding-left: 6rem !important;\n padding-right: 6rem !important;\n}\n\n.padding-y-9 {\n padding-top: 6rem !important;\n padding-bottom: 6rem !important;\n}\n\n.padding-auto {\n padding: auto !important;\n}\n\n.padding-top-auto {\n padding-top: auto !important;\n}\n\n.padding-right-auto {\n padding-right: auto !important;\n}\n\n.padding-bottom-auto {\n padding-bottom: auto !important;\n}\n\n.padding-left-auto {\n padding-left: auto !important;\n}\n\n.padding-x-auto {\n padding-left: auto !important;\n padding-right: auto !important;\n}\n\n.padding-y-auto {\n padding-top: auto !important;\n padding-bottom: auto !important;\n}\n\n.responsive-margin-left-small {\n margin-left: 1.5vw !important;\n}\n\n.responsive-margin-right-small {\n margin-right: 1.5vw !important;\n}\n\n.responsive-margin-x-small {\n margin-left: 1.5vw !important;\n margin-right: 1.5vw !important;\n}\n\n.responsive-margin-left-normal {\n margin-left: 2.5vw !important;\n}\n\n.responsive-margin-right-normal {\n margin-right: 2.5vw !important;\n}\n\n.responsive-margin-x-normal {\n margin-left: 2.5vw !important;\n margin-right: 2.5vw !important;\n}\n\n.responsive-margin-left-medium {\n margin-left: 6.5vw !important;\n}\n\n.responsive-margin-right-medium {\n margin-right: 6.5vw !important;\n}\n\n.responsive-margin-x-medium {\n margin-left: 6.5vw !important;\n margin-right: 6.5vw !important;\n}\n\n.responsive-margin-left-large {\n margin-left: 10vw !important;\n}\n\n.responsive-margin-right-large {\n margin-right: 10vw !important;\n}\n\n.responsive-margin-x-large {\n margin-left: 10vw !important;\n margin-right: 10vw !important;\n}\n\n.responsive-padding-left-small {\n padding-left: 1.5vw !important;\n}\n\n.responsive-padding-right-small {\n padding-right: 1.5vw !important;\n}\n\n.responsive-padding-x-small {\n padding-left: 1.5vw !important;\n padding-right: 1.5vw !important;\n}\n\n.responsive-padding-left-normal {\n padding-left: 2.5vw !important;\n}\n\n.responsive-padding-right-normal {\n padding-right: 2.5vw !important;\n}\n\n.responsive-padding-x-normal {\n padding-left: 2.5vw !important;\n padding-right: 2.5vw !important;\n}\n\n.responsive-padding-left-medium {\n padding-left: 6.5vw !important;\n}\n\n.responsive-padding-right-medium {\n padding-right: 6.5vw !important;\n}\n\n.responsive-padding-x-medium {\n padding-left: 6.5vw !important;\n padding-right: 6.5vw !important;\n}\n\n.responsive-padding-left-large {\n padding-left: 10vw !important;\n}\n\n.responsive-padding-right-large {\n padding-right: 10vw !important;\n}\n\n.responsive-padding-x-large {\n padding-left: 10vw !important;\n padding-right: 10vw !important;\n}\n\n.position-static {\n position: static;\n}\n\n.position-relative {\n position: relative;\n}\n\n.position-sticky {\n position: sticky;\n}\n\n.position-absolute {\n position: absolute;\n}\n\n.position-fixed {\n position: fixed;\n}\n\n.fixed-to-top {\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n z-index: 1030;\n}\n\n.fixed-to-bottom {\n position: fixed;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 1030;\n}\n\n.display-block {\n display: block !important;\n}\n\n.display-flex {\n display: flex !important;\n}\n\n.display-inline {\n display: inline !important;\n}\n\n.display-inline-block {\n display: inline-block !important;\n}\n\n.display-inline-flex {\n display: inline-flex !important;\n}\n\n.font-thin {\n font-weight: 100 !important;\n}\n\n.font-lighter {\n font-weight: 200 !important;\n}\n\n.font-light {\n font-weight: 300 !important;\n}\n\n.font-normal {\n font-weight: 400 !important;\n}\n\n.font-medium {\n font-weight: 500 !important;\n}\n\n.font-semibold {\n font-weight: 600 !important;\n}\n\n.font-bold {\n font-weight: 700 !important;\n}\n\n.font-bolder {\n font-weight: 800 !important;\n}\n\n.font-extra-bold {\n font-weight: 900 !important;\n}\n\n.text-align-center {\n text-align: center !important;\n}\n\n.text-align-justify {\n text-align: justify !important;\n}\n\n.text-align-left {\n text-align: left !important;\n}\n\n.text-align-right {\n text-align: right !important;\n}\n\n.text-capitalize {\n text-transform: capitalize !important;\n}\n\n.text-lowercase {\n text-transform: lowercase !important;\n}\n\n.text-uppercase {\n text-transform: uppercase !important;\n}\n\n.font-italic {\n font-style: italic !important;\n}\n\n.text-underlined {\n text-decoration: underline !important;\n}\n\n.font-heading {\n font-size: 3.5rem;\n font-weight: bold;\n font-weight: 700;\n text-transform: uppercase;\n text-align: center;\n}\n\n.font-subheading {\n font-size: 2.5rem;\n font-weight: medium;\n font-weight: 600;\n text-transform: capitalize;\n}\n\n.font-small {\n font-size: 0.75rem;\n font-weight: small;\n font-weight: 300;\n text-transform: lowercase;\n}\n\n.text-truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.reset-text {\n font-family: inherit;\n font-style: normal;\n font-weight: normal;\n font-weight: 400;\n line-height: inherit;\n text-align: left;\n text-align: start;\n text-decoration: none;\n text-shadow: none;\n text-transform: none;\n letter-spacing: normal;\n word-break: normal;\n word-spacing: normal;\n white-space: normal;\n line-break: auto;\n}\n\n.font-size-normal {\n font-size: 1rem !important;\n}\n\n.font-size-small {\n font-size: 0.875rem !important;\n}\n\n.font-size-large {\n font-size: 1.25rem !important;\n}\n\n.font-size-1 {\n font-size: 1rem !important;\n}\n\n.font-size-2 {\n font-size: 2.25rem !important;\n}\n\n.font-size-3 {\n font-size: 3.5rem !important;\n}\n\n.font-size-4 {\n font-size: 4.75rem !important;\n}\n\n.font-size-5 {\n font-size: 5rem !important;\n}\n\n.font-size-6 {\n font-size: 5.5rem !important;\n}\n\n.text-decoration-none {\n text-decoration: none !important;\n}\n\n.text-decoration-line-through {\n text-decoration: line-through !important;\n}\n\n.text-decoration-double {\n text-decoration: double !important;\n}\n\n.text-decoration-dotted {\n text-decoration: dotted !important;\n}\n\n.text-decoration-dashed {\n text-decoration: dashed !important;\n}\n\n.text-decoration-overline {\n text-decoration: overline !important;\n}\n\n/* Built-in animations here, for internal use only thus mixins and not extendable classes, for other animation purposes see animations from plugins!!! */\n.underline-from-center, .link {\n display: inline-block;\n vertical-align: middle;\n transform: perspective(1px) translateZ(0);\n box-shadow: 0 0 1px rgba(0, 0, 0, 0);\n position: relative;\n overflow: hidden;\n}\n.underline-from-center:before, .link:before {\n content: \"\";\n position: absolute;\n z-index: -1;\n left: 51%;\n right: 51%;\n bottom: 0;\n background: currentColor;\n height: 2px;\n transition-property: left, right;\n transition-duration: 0.3s;\n transition-timing-function: ease-out;\n}\n.underline-from-center:focus:before, .link:focus:before, .underline-from-center:active:before, .link:active:before {\n left: 0;\n right: 0;\n}\n\n.clearfix::after {\n clear: both;\n content: \"\";\n display: table;\n}\n\n.float-left {\n float: left !important;\n}\n\n.float-right {\n float: right !important;\n}\n\n.shadow-none {\n box-shadow: none !important;\n}\n\n.is-clickable {\n cursor: pointer !important;\n pointer-events: all !important;\n}\n\n.overflow {\n overflow: hidden !important;\n}\n\n.border-radius-none {\n border-radius: 0 !important;\n}\n\n.border-radius-small {\n border-radius: 0.2rem !important;\n}\n\n.border-radius-normal {\n border-radius: 0.25rem !important;\n}\n\n.border-radius-large {\n border-radius: 0.3rem !important;\n}\n\n.border-radius-round {\n border-radius: 50rem !important;\n}\n\n.border-radius-circle {\n border-radius: 50% !important;\n}\n\n.border-radius-top-small {\n border-top-left-radius: 0.2rem !important;\n border-top-right-radius: 0.2rem !important;\n}\n\n.border-radius-top-normal {\n border-top-left-radius: 0.25rem !important;\n border-top-right-radius: 0.25rem !important;\n}\n\n.border-radius-top-large {\n border-top-left-radius: 0.3rem !important;\n border-top-right-radius: 0.3rem !important;\n}\n\n.border-radius-top-round {\n border-top-left-radius: 50rem !important;\n border-top-right-radius: 50rem !important;\n}\n\n.border-radius-top-circle {\n border-top-left-radius: 50% !important;\n border-top-right-radius: 50% !important;\n}\n\n.border-radius-bottom-small {\n border-bottom-left-radius: 0.2rem !important;\n border-bottom-right-radius: 0.2rem !important;\n}\n\n.border-radius-bottom-normal {\n border-bottom-left-radius: 0.25rem !important;\n border-bottom-right-radius: 0.25rem !important;\n}\n\n.border-radius-bottom-large {\n border-bottom-left-radius: 0.3rem !important;\n border-bottom-right-radius: 0.3rem !important;\n}\n\n.border-radius-bottom-round {\n border-bottom-left-radius: 50rem !important;\n border-bottom-right-radius: 50rem !important;\n}\n\n.border-radius-bottom-circle {\n border-bottom-left-radius: 50% !important;\n border-bottom-right-radius: 50% !important;\n}\n\n.border-radius-top-left-small {\n border-top-left-radius: 0.2rem !important;\n}\n\n.border-radius-top-left-normal {\n border-top-left-radius: 0.25rem !important;\n}\n\n.border-radius-top-left-large {\n border-top-left-radius: 0.3rem !important;\n}\n\n.border-radius-top-left-round {\n border-top-left-radius: 50rem !important;\n}\n\n.border-radius-top-left-circle {\n border-top-left-radius: 50% !important;\n}\n\n.border-radius-top-right-small {\n border-top-right-radius: 0.2rem !important;\n}\n\n.border-radius-top-right-normal {\n border-top-right-radius: 0.25rem !important;\n}\n\n.border-radius-top-right-large {\n border-top-right-radius: 0.3rem !important;\n}\n\n.border-radius-top-right-round {\n border-top-right-radius: 50rem !important;\n}\n\n.border-radius-top-right-circle {\n border-top-right-radius: 50% !important;\n}\n\n.border-radius-bottom-left-small {\n border-bottom-left-radius: 0.2rem !important;\n}\n\n.border-radius-bottom-left-normal {\n border-bottom-left-radius: 0.25rem !important;\n}\n\n.border-radius-bottom-left-large {\n border-bottom-left-radius: 0.3rem !important;\n}\n\n.border-radius-bottom-left-round {\n border-bottom-left-radius: 50rem !important;\n}\n\n.border-radius-bottom-left-circle {\n border-bottom-left-radius: 50% !important;\n}\n\n.border-radius-bottom-right-small {\n border-bottom-right-radius: 0.2rem !important;\n}\n\n.border-radius-bottom-right-normal {\n border-bottom-right-radius: 0.25rem !important;\n}\n\n.border-radius-bottom-right-large {\n border-bottom-right-radius: 0.3rem !important;\n}\n\n.border-radius-bottom-right-round {\n border-bottom-right-radius: 50rem !important;\n}\n\n.border-radius-bottom-right-circle {\n border-bottom-right-radius: 50% !important;\n}\n\nimg,\npicture,\nvideo {\n aspect-ratio: auto;\n max-width: 100%;\n height: auto;\n}\n\n.width-auto {\n width: auto !important;\n}\n\n.width-none {\n width: 0 !important;\n}\n\n.width-content {\n width: fit-content !important;\n}\n\n.width-small {\n width: 15% !important;\n}\n\n.width-normal {\n width: 25% !important;\n}\n\n.width-medium {\n width: 50% !important;\n}\n\n.width-full {\n max-width: 100% !important;\n}\n\n.width-viewport {\n max-width: 100vw !important;\n}\n\n.height-auto {\n height: auto !important;\n}\n\n.height-none {\n height: 0 !important;\n}\n\n.height-content {\n height: fit-content !important;\n}\n\n.height-small {\n height: 15% !important;\n}\n\n.height-normal {\n height: 25% !important;\n}\n\n.height-medium {\n height: 50% !important;\n}\n\n.height-full {\n min-height: 100% !important;\n}\n\n.height-viewport {\n min-height: 100vh !important;\n}\n\n.aspect-ratio-auto {\n aspect-ratio: auto !important;\n}\n\n.aspect-ratio-1x1 {\n aspect-ratio: 100% !important;\n}\n\n.aspect-ratio-4x3 {\n aspect-ratio: 75% !important;\n}\n\n.aspect-ratio-16x9 {\n aspect-ratio: 56.25% !important;\n}\n\n.aspect-ratio-21x9 {\n aspect-ratio: 42.8571428571% !important;\n}\n\n.object-fit-none {\n object-fit: none !important;\n}\n\n.object-fit-cover {\n object-fit: cover !important;\n}\n\n.object-fit-contain {\n object-fit: contain !important;\n}\n\n.object-fit-fill {\n object-fit: fill !important;\n}\n\n.object-fit-scale-down {\n object-fit: scale-down !important;\n}\n\n.opacity-none {\n opacity: 0 !important;\n}\n\n.opacity-none-on-hover:hover {\n transition: opacity 0.15s linear;\n opacity: 0 !important;\n}\n\n.opacity-low {\n opacity: 0.5 !important;\n}\n\n.opacity-low-on-hover:hover {\n transition: opacity 0.15s linear;\n opacity: 0.5 !important;\n}\n\n.opacity-medium {\n opacity: 0.6 !important;\n}\n\n.opacity-medium-on-hover:hover {\n transition: opacity 0.15s linear;\n opacity: 0.6 !important;\n}\n\n.opacity-normal {\n opacity: 1 !important;\n}\n\n.opacity-normal-on-hover:hover {\n transition: opacity 0.15s linear;\n opacity: 1 !important;\n}\n\n.transition-normal {\n transition: all 0.2s ease-in-out !important;\n}\n\n.transition-colors {\n transition: color 0.2s ease-in-out !important;\n}\n\n.transition-linear {\n transition: all 0.2s linear !important;\n}\n\n.transition-smooth {\n transition: all 0.3s ease !important;\n}\n\n.transition-opacity {\n transition: opacity 0.15s linear !important;\n}\n\n.transition-height {\n transition: height 0.35s ease !important;\n}\n\n.transition-width {\n transition: width 0.35s ease !important;\n}\n\n.list--hoverable > * {\n color: indigo;\n list-style-type: circle;\n width: fit-content;\n will-change: auto;\n}\n.list--hoverable > *:hover {\n transition: margin 0.35s ease;\n margin-bottom: 1rem;\n}\n.list--hoverable > *:hover, .list--hoverable > *:active, .list--hoverable > *:focus {\n color: #7700cf;\n}\n\n.list li:not(:last-child) {\n margin-bottom: 0.25rem !important;\n}\n\n.list-style-auto {\n list-style-type: auto !important;\n}\n\n.list-style-none {\n list-style-type: none !important;\n}\n\n.list-style-circle {\n list-style-type: circle !important;\n}\n\n.list-style-square {\n list-style-type: square !important;\n}\n\n.list-style-disc {\n list-style-type: disc !important;\n}\n\n.list-style-decimal {\n list-style-type: decimal !important;\n}\n\n.list-style-disclosure-open {\n list-style-type: disclosure-open !important;\n}\n\n.list-style-disclosure-closed {\n list-style-type: disclosure-closed !important;\n}\n\n.box-shadow-small {\n box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;\n}\n\n.box-shadow-normal {\n box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;\n}\n\n.box-shadow-large {\n box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;\n}\n\n.box-shadow-inset {\n box-shadow: ins