UNPKG

@ulu/frontend

Version:

A versatile SCSS and JavaScript component library offering configurable, accessible components and flexible integration into any project, with SCSS modules suitable for modern JS frameworks.

2,619 lines (2,288 loc) 337 kB
@charset "UTF-8"; /* ============================================================================= base: ============================================================================= */ /* ============================================================================= base:normalize ============================================================================= */ /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ /** Use a more readable tab size (opinionated). */ html { -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; } body { margin: 0; } /* Text-level semantics ==================== */ /** Add the correct text decoration in Chrome, Edge, and Safari. */ abbr[title] { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Tabular data ============ */ /** 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) */ table { text-indent: 0; /* 1 */ } /* Forms ===== */ /** 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ line-height: inherit; font-size: inherit; margin: 0; /* 2 */ } /** Remove the inheritance of text transform in Edge and Firefox. 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** Correct the inability to style clickable types in iOS and Safari. */ button, [type=button], [type=reset], [type=submit] { text-transform: none; text-align: inherit; background-color: transparent; border: transparent; border-radius: 0; margin: 0; padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: inherit; cursor: pointer; } /** Remove the inner border and padding in Firefox. */ ::-moz-focus-inner { border-style: none; padding: 0; } /** Restore the focus styles unset by the previous rule. */ :-moz-focusring { outline: 1px dotted ButtonText; } /** Remove the additional ':invalid' styles in Firefox. See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 */ :-moz-ui-invalid { box-shadow: none; } /** Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. */ legend { padding: 0; } /** Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /** Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type=search] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to 'inherit' in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive =========== */ /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* ============================================================================= base:elements ============================================================================= */ *, ::before, ::after { -webkit-box-sizing: border-box; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { color: var(--site-color-type); background-color: var(--site-color-background); font-family: "Inter", sans-serif; font-size: 1rem; font-size: calc(1rem + 0.05vw); line-height: 1.5; } body:before { display: none; content: "none"; } @media screen and (min-width: 43.5em) { body:before { content: "small"; } } @media screen and (min-width: 72.875em) { body:before { content: "medium"; } } @media screen and (min-width: 82.25em) { body:before { content: "large"; } } h1, h2, h3, h4, h5, h6, ul, ol, li, pre, code, p { margin: 0; padding: 0; font-size: inherit; font-family: inherit; border-width: 0; border-style: solid; font-weight: inherit; } p { margin-top: 0; margin-bottom: 1em; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } small { font-size: 0.8890895361rem; font-size: calc(0.8890895361rem + 0.05vw); line-height: 1.3; } sub { bottom: -0.25em; } sup { top: -0.5em; } b, strong { font-weight: bold; } form { width: 100%; } video { display: block; } code, kbd, samp, pre { font-family: Menlo, Consolas, Monaco, monospace; } hr { height: 0; border: 0; -webkit-box-sizing: content-box; box-sizing: content-box; overflow: visible; margin: 1em 0; border-bottom: 1px solid var(--site-color-rule); } iframe { border: 0; outline: 0; } figure { margin: 0; } img { display: block; width: auto; height: auto; max-width: 100%; border-style: none; } ul, ol { list-style: none; } a { color: var(--site-color-link); text-decoration: none; } a:hover { color: var(--site-color-link-hover); } [disabled], :disabled { opacity: 0.5; cursor: not-allowed; } button[disabled] { pointer-events: none; } dt { font-weight: bold; } [hidden], template { display: none; } blockquote { margin: 0; } @media screen { details[open] summary ~ * { -webkit-animation: UluFadeInDown 350ms ease-in-out; animation: UluFadeInDown 350ms ease-in-out; } } audio { display: block; margin: 1rem 0; } /* ============================================================================= base:keyframes ============================================================================= */ @-webkit-keyframes UluFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes UluFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes UluFadeInUp { 0% { opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes UluFadeInUp { 0% { opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes UluFadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes UluFadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes UluFadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes UluFadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes UluFadeInLeftMore { 0% { opacity: 0; -webkit-transform: translateX(-50px); transform: translateX(-50px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes UluFadeInLeftMore { 0% { opacity: 0; -webkit-transform: translateX(-50px); transform: translateX(-50px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes UluFadeInRight { 0% { opacity: 0; -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes UluFadeInRight { 0% { opacity: 0; -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes UluFadeInRightMore { 0% { opacity: 0; -webkit-transform: translateX(50px); transform: translateX(50px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes UluFadeInRightMore { 0% { opacity: 0; -webkit-transform: translateX(50px); transform: translateX(50px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes UluFadeInZoom { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 50% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes UluFadeInZoom { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 50% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes UluFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes UluFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes UluFadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-10px); transform: translateX(-10px); } } @keyframes UluFadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-10px); transform: translateX(-10px); } } @-webkit-keyframes UluFadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(10px); transform: translateX(10px); } } @keyframes UluFadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(10px); transform: translateX(10px); } } @-webkit-keyframes UluFadeOutLeftMore { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-50px); transform: translateX(-50px); } } @keyframes UluFadeOutLeftMore { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-50px); transform: translateX(-50px); } } @-webkit-keyframes UluFadeOutRightMore { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(50px); transform: translateX(50px); } } @keyframes UluFadeOutRightMore { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(50px); transform: translateX(50px); } } @-webkit-keyframes UluFadeDownOut { 0% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { opacity: 0; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes UluFadeDownOut { 0% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { opacity: 0; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes UluSpin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes UluSpin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes UluPulse { 50% { opacity: 0.5; } } @keyframes UluPulse { 50% { opacity: 0.5; } } @-webkit-keyframes UluScaleIn { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes UluScaleIn { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } /* ============================================================================= base:typography ============================================================================= */ .h6 { font-size: 1.1247461131rem; font-size: calc(1.1247461131rem + 0.05vw); font-weight: bold; line-height: 1.4908900142; margin-bottom: 1em; color: var(--site-color-type-secondary); } .h5 { font-size: 1.265053819rem; font-size: calc(1.265053819rem + 0.05vw); font-weight: bold; line-height: 1.4818353563; margin-bottom: 1em; color: var(--site-color-type-secondary); } .h4 { font-size: 1.4228643659rem; font-size: calc(1.4228643659rem + 0.05vw); font-weight: bold; line-height: 1.4728356903; margin-bottom: 1em; color: var(--site-color-type-secondary); } .h3 { font-size: 1.600361165rem; font-size: calc(1.600361165rem + 0.05vw); font-weight: bold; line-height: 1.4638906822; margin-bottom: 1em; color: var(--site-color-type-secondary); } .h2 { font-size: 2.375rem; font-size: calc(2.375rem + 0.05vw); font-weight: bold; line-height: 1.455; margin-top: 2.5em; margin-bottom: 1em; color: var(--site-color-accent); } .h1 { font-size: 3.125rem; font-size: calc(3.125rem + 0.05vw); font-weight: bold; line-height: 1.4461633138; margin-bottom: 0.5em; color: var(--site-color-accent); } /* ============================================================================= base:color ============================================================================= */ .container { display: block; margin-left: auto; margin-right: auto; width: 100%; max-width: 100rem; padding-left: 5rem; padding-right: 5rem; padding-top: 6rem; padding-bottom: 6rem; } @media screen and (max-width: 43.49em) { .container { display: block; margin-left: auto; margin-right: auto; width: 100%; padding-left: 2rem; padding-right: 2rem; padding-top: 3rem; padding-bottom: 3rem; } } .container-full { display: block; margin-left: auto; margin-right: auto; width: 100%; padding-left: 5rem; padding-right: 5rem; padding-top: 0; padding-bottom: 0; } @media screen and (max-width: 43.49em) { .container-full { display: block; margin-left: auto; margin-right: auto; width: 100%; padding-left: 2rem; padding-right: 2rem; padding-top: 0; padding-bottom: 0; } } .container-fill { display: block; margin-left: auto; margin-right: auto; width: 100%; padding-left: 0; padding-right: 0; padding-top: 6rem; padding-bottom: 6rem; } @media screen and (max-width: 43.49em) { .container-fill { display: block; margin-left: auto; margin-right: auto; width: 100%; padding-left: 0; padding-right: 0; padding-top: 3rem; padding-bottom: 3rem; } } .container-fit { display: block; margin-left: auto; margin-right: auto; width: 100%; max-width: 100rem; padding-left: 5rem; padding-right: 5rem; padding-top: 0; padding-bottom: 0; } @media screen and (max-width: 43.49em) { .container-fit { display: block; margin-left: auto; margin-right: auto; width: 100%; padding-left: 2rem; padding-right: 2rem; padding-top: 0; padding-bottom: 0; } } .container-small { display: block; margin-left: auto; margin-right: auto; width: 100%; max-width: 70rem; padding-left: 5rem; padding-right: 5rem; padding-top: 3rem; padding-bottom: 3rem; } @media screen and (max-width: 43.49em) { .container-small { display: block; margin-left: auto; margin-right: auto; width: 100%; padding-left: 2rem; padding-right: 2rem; padding-top: 3rem; padding-bottom: 3rem; } } .container-small-fit { display: block; margin-left: auto; margin-right: auto; width: 100%; max-width: 70rem; padding-left: 5rem; padding-right: 5rem; padding-top: 0; padding-bottom: 0; } @media screen and (max-width: 43.49em) { .container-small-fit { display: block; margin-left: auto; margin-right: auto; width: 100%; padding-left: 2rem; padding-right: 2rem; padding-top: 0; padding-bottom: 0; } } .container-small-x { display: block; margin-left: auto; margin-right: auto; width: 100%; max-width: 50rem; padding-left: 5rem; padding-right: 5rem; padding-top: 6rem; padding-bottom: 6rem; } @media screen and (max-width: 43.49em) { .container-small-x { display: block; margin-left: auto; margin-right: auto; width: 100%; padding-left: 2rem; padding-right: 2rem; padding-top: 3rem; padding-bottom: 3rem; } } .container-small-x-fit { display: block; margin-left: auto; margin-right: auto; width: 100%; max-width: 50rem; padding-left: 5rem; padding-right: 5rem; padding-top: 0; padding-bottom: 0; } @media screen and (max-width: 43.49em) { .container-small-x-fit { display: block; margin-left: auto; margin-right: auto; width: 100%; padding-left: 2rem; padding-right: 2rem; padding-top: 0; padding-bottom: 0; } } .container-large { display: block; margin-left: auto; margin-right: auto; width: 100%; max-width: 110rem; padding-left: 5rem; padding-right: 5rem; padding-top: 6rem; padding-bottom: 6rem; } @media screen and (max-width: 43.49em) { .container-large { display: block; margin-left: auto; margin-right: auto; width: 100%; padding-left: 2rem; padding-right: 2rem; padding-top: 3rem; padding-bottom: 3rem; } } [class|=container] [class|=container] { padding-left: 0; padding-right: 0; } .layout-flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .layout-flex-justified { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .layout-flex-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .layout-flex-center-all { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .layout-flex-justify-end { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .layout-flex-baseline { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .layout-flex-end { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .layout-flex-column { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .layout-flex-column-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } :root { --site-header-height: 0px; --site-sticky-margin: 3rem; --site-sticky-offset-top: calc(var(--site-header-height) + var(--site-sticky-margin)); --site-fullscreen-height: calc(100vh - var(--site-header-height)); --ulu-sticky-top-offset: var(--site-sticky-offset-top); --site-breakpoint: none; } :root.fullscreen-layout { --site-header-height: 3.75rem; } @media screen and (min-width: 43.5em) { :root { --site-breakpoint: small; } } @media screen and (min-width: 72.875em) { :root { --site-breakpoint: medium; } } @media screen and (min-width: 82.25em) { :root { --site-breakpoint: large; } } html { scroll-padding-top: 6rem; } body { height: 100%; margin: 0; } [disabled], :disabled { opacity: 0.5; cursor: not-allowed; } button[disabled] { pointer-events: none; } /*! * Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) * Copyright 2024 Fonticons, Inc. */ .fa { font-family: var(--fa-style-family, "Font Awesome 6 Free"); font-weight: var(--fa-style, 900); } .fa, .fa-classic, .fa-sharp, .fas, .fa-solid, .far, .fa-regular, .fab, .fa-brands { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: var(--fa-display, inline-block); font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto; } .fas, .fa-classic, .fa-solid, .far, .fa-regular { font-family: "Font Awesome 6 Free"; } .fab, .fa-brands { font-family: "Font Awesome 6 Brands"; } .fa-1x { font-size: 1em; } .fa-2x { font-size: 2em; } .fa-3x { font-size: 3em; } .fa-4x { font-size: 4em; } .fa-5x { font-size: 5em; } .fa-6x { font-size: 6em; } .fa-7x { font-size: 7em; } .fa-8x { font-size: 8em; } .fa-9x { font-size: 9em; } .fa-10x { font-size: 10em; } .fa-2xs { font-size: 0.625em; line-height: 0.1em; vertical-align: 0.225em; } .fa-xs { font-size: 0.75em; line-height: 0.0833333337em; vertical-align: 0.125em; } .fa-sm { font-size: 0.875em; line-height: 0.0714285718em; vertical-align: 0.0535714295em; } .fa-lg { font-size: 1.25em; line-height: 0.05em; vertical-align: -0.075em; } .fa-xl { font-size: 1.5em; line-height: 0.0416666682em; vertical-align: -0.125em; } .fa-2xl { font-size: 2em; line-height: 0.03125em; vertical-align: -0.1875em; } .fa-fw { text-align: center; width: 1.25em; } .fa-ul { list-style-type: none; margin-left: var(--fa-li-margin, 2.5em); padding-left: 0; } .fa-ul > li { position: relative; } .fa-li { left: calc(var(--fa-li-width, 2em) * -1); position: absolute; text-align: center; width: var(--fa-li-width, 2em); line-height: inherit; } .fa-border { border-color: var(--fa-border-color, #eee); border-radius: var(--fa-border-radius, 0.1em); border-style: var(--fa-border-style, solid); border-width: var(--fa-border-width, 0.08em); padding: var(--fa-border-padding, 0.2em 0.25em 0.15em); } .fa-pull-left { float: left; margin-right: var(--fa-pull-margin, 0.3em); } .fa-pull-right { float: right; margin-left: var(--fa-pull-margin, 0.3em); } .fa-beat { -webkit-animation-name: fa-beat; animation-name: fa-beat; -webkit-animation-delay: var(--fa-animation-delay, 0s); animation-delay: var(--fa-animation-delay, 0s); -webkit-animation-direction: var(--fa-animation-direction, normal); animation-direction: var(--fa-animation-direction, normal); -webkit-animation-duration: var(--fa-animation-duration, 1s); animation-duration: var(--fa-animation-duration, 1s); -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-iteration-count: var(--fa-animation-iteration-count, infinite); -webkit-animation-timing-function: var(--fa-animation-timing, ease-in-out); animation-timing-function: var(--fa-animation-timing, ease-in-out); } .fa-bounce { -webkit-animation-name: fa-bounce; animation-name: fa-bounce; -webkit-animation-delay: var(--fa-animation-delay, 0s); animation-delay: var(--fa-animation-delay, 0s); -webkit-animation-direction: var(--fa-animation-direction, normal); animation-direction: var(--fa-animation-direction, normal); -webkit-animation-duration: var(--fa-animation-duration, 1s); animation-duration: var(--fa-animation-duration, 1s); -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-iteration-count: var(--fa-animation-iteration-count, infinite); -webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1)); animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1)); } .fa-fade { -webkit-animation-name: fa-fade; animation-name: fa-fade; -webkit-animation-delay: var(--fa-animation-delay, 0s); animation-delay: var(--fa-animation-delay, 0s); -webkit-animation-direction: var(--fa-animation-direction, normal); animation-direction: var(--fa-animation-direction, normal); -webkit-animation-duration: var(--fa-animation-duration, 1s); animation-duration: var(--fa-animation-duration, 1s); -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-iteration-count: var(--fa-animation-iteration-count, infinite); -webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); } .fa-beat-fade { -webkit-animation-name: fa-beat-fade; animation-name: fa-beat-fade; -webkit-animation-delay: var(--fa-animation-delay, 0s); animation-delay: var(--fa-animation-delay, 0s); -webkit-animation-direction: var(--fa-animation-direction, normal); animation-direction: var(--fa-animation-direction, normal); -webkit-animation-duration: var(--fa-animation-duration, 1s); animation-duration: var(--fa-animation-duration, 1s); -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-iteration-count: var(--fa-animation-iteration-count, infinite); -webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); } .fa-flip { -webkit-animation-name: fa-flip; animation-name: fa-flip; -webkit-animation-delay: var(--fa-animation-delay, 0s); animation-delay: var(--fa-animation-delay, 0s); -webkit-animation-direction: var(--fa-animation-direction, normal); animation-direction: var(--fa-animation-direction, normal); -webkit-animation-duration: var(--fa-animation-duration, 1s); animation-duration: var(--fa-animation-duration, 1s); -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-iteration-count: var(--fa-animation-iteration-count, infinite); -webkit-animation-timing-function: var(--fa-animation-timing, ease-in-out); animation-timing-function: var(--fa-animation-timing, ease-in-out); } .fa-shake { -webkit-animation-name: fa-shake; animation-name: fa-shake; -webkit-animation-delay: var(--fa-animation-delay, 0s); animation-delay: var(--fa-animation-delay, 0s); -webkit-animation-direction: var(--fa-animation-direction, normal); animation-direction: var(--fa-animation-direction, normal); -webkit-animation-duration: var(--fa-animation-duration, 1s); animation-duration: var(--fa-animation-duration, 1s); -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-iteration-count: var(--fa-animation-iteration-count, infinite); -webkit-animation-timing-function: var(--fa-animation-timing, linear); animation-timing-function: var(--fa-animation-timing, linear); } .fa-spin { -webkit-animation-name: fa-spin; animation-name: fa-spin; -webkit-animation-delay: var(--fa-animation-delay, 0s); animation-delay: var(--fa-animation-delay, 0s); -webkit-animation-direction: var(--fa-animation-direction, normal); animation-direction: var(--fa-animation-direction, normal); -webkit-animation-duration: var(--fa-animation-duration, 2s); animation-duration: var(--fa-animation-duration, 2s); -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-iteration-count: var(--fa-animation-iteration-count, infinite); -webkit-animation-timing-function: var(--fa-animation-timing, linear); animation-timing-function: var(--fa-animation-timing, linear); } .fa-spin-reverse { --fa-animation-direction: reverse; } .fa-pulse, .fa-spin-pulse { -webkit-animation-name: fa-spin; animation-name: fa-spin; -webkit-animation-direction: var(--fa-animation-direction, normal); animation-direction: var(--fa-animation-direction, normal); -webkit-animation-duration: var(--fa-animation-duration, 1s); animation-duration: var(--fa-animation-duration, 1s); -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-iteration-count: var(--fa-animation-iteration-count, infinite); -webkit-animation-timing-function: var(--fa-animation-timing, steps(8)); animation-timing-function: var(--fa-animation-timing, steps(8)); } @media (prefers-reduced-motion: reduce) { .fa-beat, .fa-bounce, .fa-fade, .fa-beat-fade, .fa-flip, .fa-pulse, .fa-shake, .fa-spin, .fa-spin-pulse { -webkit-animation-delay: -1ms; animation-delay: -1ms; -webkit-animation-duration: 1ms; animation-duration: 1ms; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-duration: 0s; transition-duration: 0s; } } @-webkit-keyframes fa-beat { 0%, 90% { -webkit-transform: scale(1); transform: scale(1); } 45% { -webkit-transform: scale(var(--fa-beat-scale, 1.25)); transform: scale(var(--fa-beat-scale, 1.25)); } } @keyframes fa-beat { 0%, 90% { -webkit-transform: scale(1); transform: scale(1); } 45% { -webkit-transform: scale(var(--fa-beat-scale, 1.25)); transform: scale(var(--fa-beat-scale, 1.25)); } } @-webkit-keyframes fa-bounce { 0% { -webkit-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } 10% { -webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); } 30% { -webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); } 50% { -webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); } 57% { -webkit-transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); } 64% { -webkit-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } 100% { -webkit-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } } @keyframes fa-bounce { 0% { -webkit-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } 10% { -webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); } 30% { -webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); } 50% { -webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); } 57% { -webkit-transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); } 64% { -webkit-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } 100% { -webkit-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } } @-webkit-keyframes fa-fade { 50% { opacity: var(--fa-fade-opacity, 0.4); } } @keyframes fa-fade { 50% { opacity: var(--fa-fade-opacity, 0.4); } } @-webkit-keyframes fa-beat-fade { 0%, 100% { opacity: var(--fa-beat-fade-opacity, 0.4); -webkit-transform: scale(1); transform: scale(1); } 50% { opacity: 1; -webkit-transform: scale(var(--fa-beat-fade-scale, 1.125)); transform: scale(var(--fa-beat-fade-scale, 1.125)); } } @keyframes fa-beat-fade { 0%, 100% { opacity: var(--fa-beat-fade-opacity, 0.4); -webkit-transform: scale(1); transform: scale(1); } 50% { opacity: 1; -webkit-transform: scale(var(--fa-beat-fade-scale, 1.125)); transform: scale(var(--fa-beat-fade-scale, 1.125)); } } @-webkit-keyframes fa-flip { 50% { -webkit-transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); } } @keyframes fa-flip { 50% { -webkit-transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); } } @-webkit-keyframes fa-shake { 0% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 4% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 8%, 24% { -webkit-transform: rotate(-18deg); transform: rotate(-18deg); } 12%, 28% { -webkit-transform: rotate(18deg); transform: rotate(18deg); } 16% { -webkit-transform: rotate(-22deg); transform: rotate(-22deg); } 20% { -webkit-transform: rotate(22deg); transform: rotate(22deg); } 32% { -webkit-transform: rotate(-12deg); transform: rotate(-12deg); } 36% { -webkit-transform: rotate(12deg); transform: rotate(12deg); } 40%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes fa-shake { 0% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 4% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 8%, 24% { -webkit-transform: rotate(-18deg); transform: rotate(-18deg); } 12%, 28% { -webkit-transform: rotate(18deg); transform: rotate(18deg); } 16% { -webkit-transform: rotate(-22deg); transform: rotate(-22deg); } 20% { -webkit-transform: rotate(22deg); transform: rotate(22deg); } 32% { -webkit-transform: rotate(-12deg); transform: rotate(-12deg); } 36% { -webkit-transform: rotate(12deg); transform: rotate(12deg); } 40%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .fa-rotate-90 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .fa-rotate-180 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .fa-rotate-270 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .fa-flip-horizontal { -webkit-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); } .fa-flip-vertical { -webkit-transform: scale(1, -1); -ms-transform: scale(1, -1); transform: scale(1, -1); } .fa-flip-both, .fa-flip-horizontal.fa-flip-vertical { -webkit-transform: scale(-1, -1); -ms-transform: scale(-1, -1); transform: scale(-1, -1); } .fa-rotate-by { -webkit-transform: rotate(var(--fa-rotate-angle, 0)); -ms-transform: rotate(var(--fa-rotate-angle, 0)); transform: rotate(var(--fa-rotate-angle, 0)); } .fa-stack { display: inline-block; height: 2em; line-height: 2em; position: relative; vertical-align: middle; width: 2.5em; } .fa-stack-1x, .fa-stack-2x { left: 0; position: absolute; text-align: center; width: 100%; z-index: var(--fa-stack-z-index, auto); } .fa-stack-1x { line-height: inherit; } .fa-stack-2x { font-size: 2em; } .fa-inverse { color: var(--fa-inverse, #fff); } /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */ .fa-0::before { content: "\30 "; } .fa-1::before { content: "\31 "; } .fa-2::before { content: "\32 "; } .fa-3::before { content: "\33 "; } .fa-4::before { content: "\34 "; } .fa-5::before { content: "\35 "; } .fa-6::before { content: "\36 "; } .fa-7::before { content: "\37 "; } .fa-8::before { content: "\38 "; } .fa-9::before { content: "\39 "; } .fa-fill-drip::before { content: "\f576"; } .fa-arrows-to-circle::before { content: "\e4bd"; } .fa-circle-chevron-right::before { content: "\f138"; } .fa-chevron-circle-right::before { content: "\f138"; } .fa-at::before { content: "\@"; } .fa-trash-can::before { content: "\f2ed"; } .fa-trash-alt::before { content: "\f2ed"; } .fa-text-height::before { content: "\f034"; } .fa-user-xmark::before { content: "\f235"; } .fa-user-times::before { content: "\f235"; } .fa-stethoscope::before { content: "\f0f1"; } .fa-message::before { content: "\f27a"; } .fa-comment-alt::before { content: "\f27a"; } .fa-info::before { content: "\f129"; } .fa-down-left-and-up-right-to-center::before { content: "\f422"; } .fa-compress-alt::before { content: "\f422"; } .fa-explosion::before { content: "\e4e9"; } .fa-file-lines::before { content: "\f15c"; } .fa-file-alt::before { content: "\f15c"; } .fa-file-text::before { content: "\f15c"; } .fa-wave-square::before { content: "\f83e"; } .fa-ring::before { content: "\f70b"; } .fa-building-un::before { content: "\e4d9"; } .fa-dice-three::before { content: "\f527"; } .fa-calendar-days::before { content: "\f073"; } .fa-calendar-alt::before { content: "\f073"; } .fa-anchor-circle-check::before { content: "\e4aa"; } .fa-building-circle-arrow-right::before { content: "\e4d1"; } .fa-volleyball::before { content: "\f45f"; } .fa-volleyball-ball::before { content: "\f45f"; } .fa-arrows-up-to-line::before { content: "\e4c2"; } .fa-sort-down::before { content: "\f0dd"; } .fa-sort-desc::before { content: "\f0dd"; } .fa-circle-minus::before { content: "\f056"; } .fa-minus-circle::before { content: "\f056"; } .fa-door-open::before { content: "\f52b"; } .fa-right-from-bracket::before { content: "\f2f5"; } .fa-sign-out-alt::before { content: "\f2f5"; } .fa-atom::before { content: "\f5d2"; } .fa-soap::before { content: "\e06e"; } .fa-icons::before { content: "\f86d"; } .fa-heart-music-camera-bolt::before { content: "\f86d"; } .fa-microphone-lines-slash::before { content: "\f539"; } .fa-microphone-alt-slash::before { content: "\f539"; } .fa-bridge-circle-check::before { content: "\e4c9"; } .fa-pump-medical::before { content: "\e06a"; } .fa-fingerprint::before { content: "\f577"; } .fa-hand-point-right::before { content: "\f0a4"; } .fa-magnifying-glass-location::before { content: "\f689"; } .fa-search-location::before { content: "\f689"; } .fa-forward-step::before { content: "\f051"; } .fa-step-forward::before { content: "\f051"; } .fa-face-smile-beam::before { content: "\f5b8"; } .fa-smile-beam::before { content: "\f5b8"; } .fa-flag-checkered::before { content: "\f11e"; } .fa-football::before { content: "\f44e"; } .fa-football-ball::before { content: "\f44e"; } .fa-school-circle-exclamation::before { content: "\e56c"; } .fa-crop::before { content: "\f125"; } .fa-angles-down::before { content: "\f103"; } .fa-angle-double-down::before { content: "\f103"; } .fa-users-rectangle::before { content: "\e594"; } .fa-people-roof::before { content: "\e537"; } .fa-people-line::before { content: "\e534"; } .fa-beer-mug-empty::before { content: "\f0fc"; } .fa-beer::before { content: "\f0fc"; } .fa-diagram-predecessor::before { content: "\e477"; } .fa-arrow-up-long::before { content: "\f176"; } .fa-long-arrow-up::before { content: "\f176"; } .fa-fire-flame-simple::before { content: "\f46a"; } .fa-burn::before { content: "\f46a"; } .fa-person::before { content: "\f183"; } .fa-male::before { content: "\f183"; } .fa-laptop::before { content: "\f109"; } .fa-file-csv::before { content: "\f6dd"; } .fa-menorah::before { content: "\f676"; } .fa-truck-plane::before { content: "\e58f"; } .fa-record-vinyl::before { content: "\f8d9"; } .fa-face-grin-stars::before { content: "\f587"; } .fa-grin-stars::before { content: "\f587"; } .fa-bong::before { content: "\f55c"; } .fa-spaghetti-monster-flying::before { content: "\f67b"; } .fa-pastafarianism::before { content: "\f67b"; } .fa-arrow-down-up-across-line::before { content: "\e4af"; } .fa-spoon::before { content: "\f2e5"; } .fa-utensil-spoon::before { content: "\f2e5"; } .fa-jar-wheat::before { content: "\e517"; } .fa-envelopes-bulk::before { content: "\f674"; } .fa-mail-bulk::before { content: "\f674"; } .fa-file-circle-exclamation::before { content: "\e4eb"; } .fa-circle-h::before { content: "\f47e"; } .fa-hospital-symbol::before { content: "\f47e"; } .fa-pager::before { content: "\f815"; } .fa-address-book::before { content: "\f2b9"; } .fa-contact-book::before { content: "\f2b9"; } .fa-strikethrough::before { content: "\f0cc"; } .fa-k::before { content: "K"; } .fa-landmark-flag::before { content: "\e51c"; } .fa-pencil::before { content: "\f303"; } .fa-pencil-alt::before { content: "\f303"; } .fa-backward::before { content: "\f04a"; } .fa-caret-right::before { content: "\f0da"; } .fa-comments::before { content: "\f086"; } .fa-paste::before { content: "\f0ea"; } .fa-file-clipboard::before { content: "\f0ea"; } .fa-code-pull-request::before { content: "\e13c"; } .fa-clipboard-list::before { content: "\f46d"; } .fa-truck-ramp-box::before { content: "\f4de"; } .fa-truck-loading::before { content: "\f4de"; } .fa-user-check::before { content: "\f4fc"; } .fa-vial-virus::before { content: "\e597"; } .fa-sheet-plastic::before { content: "\e571"; } .fa-blog::before { content: "\f781"; } .fa-user-ninja::before { content: "\f504"; } .fa-person-arrow-up-from-line::before { content: "\e539"; } .fa-scroll-torah::before { content: "\f6a0"; } .fa-torah::before { content: "\f6a0"; } .fa-broom-ball::before { content: "\f458"; } .fa-quidditch::before { content: "\f458"; } .fa-quidditch-broom-ball::before { content: "\f458"; } .fa-toggle-off::before { content: "\f204"; } .fa-box-archive::before { content: "\f187"; } .fa-archive::before { content: "\f187"; } .fa-person-drowning::before { content: "\e545"; } .fa-arrow-down-9-1::before { content: "\f886"; } .fa-sort-numeric-desc::before { content: "\f886"; } .fa-sort-numeric-down-alt::before { content: "\f886"; } .fa-face-grin-tongue-squint::before { content: "\f58a"; } .fa-grin-tongue-squint::before { content: "\f58a"; } .fa-spray-can::before { content: "\f5bd"; } .fa-truck-monster::before { content: "\f63b"; } .fa-w::before { content: "W"; } .fa-earth-africa::before { content: "\f57c"; } .fa-globe-africa::before { content: "\f57c"; } .fa-rainbow::before { content: "\f75b"; } .fa-circle-notch::before { content: "\f1ce"; } .fa-tablet-screen-button::before { content: "\f3fa"; } .fa-tablet-alt::before { content: "\f3fa"; } .fa-paw::before { content: "\f1b0"; } .fa-cloud::before { content: "\f0c2"; } .fa-trowel-bricks::before { content: "\e58a"; } .fa-face-flushed::before { content: "\f579"; } .fa-flushed::before { content: "\f579"; } .fa-hospital-user::before { content: "\f80d"; } .fa-tent-arrow-left-right::before { content: "\e57f"; } .fa-gavel::before { content: "\f0e3"; } .fa-legal::before { content: "\f0e3"; } .fa-binoculars::before { content: "\f1e5"; } .fa-microphone-slash::before { content: "\f131"; } .fa-box-tissue::before { content: "\e05b"; } .fa-motorcycle::before { content: "\f21c"; } .fa-bell-concierge::before { content: "\f562"; } .fa-concierge-bell::before { content: "\f562"; } .fa-pen-ruler::before { content: "\f5ae"; } .fa-pencil-ruler::before { content: "\f5ae"; } .fa-people-arrows::before { content: "\e068"; } .fa-people-arrows-left-right::before { content: "\e068"; } .fa-mars-and-venus-burst::before { content: "\e523"; } .fa-square-caret-right::before { content: "\f152"; } .fa-caret-square-right::before { content: "\f152"; } .fa-scissors::before { content: "\f0c4"; } .fa-cut::before { content: "\f0c4"; } .fa-sun-plant-wilt::before { content: "\e57a"; } .fa-toilets-portable::before { content: "\e584"; } .fa-hockey-puck::before { content: "\f453"; } .fa-table::before { content: "\f0ce"; } .fa-magnifying-glass-arrow-right::before { content: "\e521"; } .fa-tachograph-digital::before { content: "\f566"; } .fa-digital-tachograph::before { content: "\f566"; } .fa-users-slash::before { content: "\e073"; } .fa-clover::before { content: "\e139"; } .fa-reply::before { content: "\f3e5"; } .fa-mail-reply::before { content: "\f3e5"; } .fa-star-and-crescent::before { content: "\f699"; } .fa-house-fire::before { content: "\e50c"; } .fa-square-minus::before { content: "\f146"; } .fa-minus-square::before { content: "\f146"; } .fa-helicopter::before { content: "\f533"; } .fa-compass::before { content: "\f14e"; } .fa-square-caret-down::before { content: "\f150"; } .fa-caret-square-down::before { content: "\f150"; } .fa-file-circle-question::before { content: "\e4ef"; } .fa-laptop-code::before { content: "\f5fc"; } .fa-swatchbook::before { content: "\f5c3"; } .fa-prescription-bottle::before { content: "\f485"; } .fa-bars::before { content: "\f0c9"; } .fa-navicon::before { content: "\f0c9"; } .fa-people-group::before { content: "\e533"; } .fa-hourglass-end::before { content: "\f253"; } .fa-hourglass-3::before { content: "\f253"; } .fa-heart-crack::before { content: "\f7a9"; } .fa-heart-broken::before { content: "\f7a9"; } .fa-square-up-right::before { content: "\f360"; } .fa-external-link-square-alt::before { content: "\f360"; } .fa-face-kiss-beam::before { content: "\f597"; } .fa-kiss-beam::before { content: "\f597"; } .fa-film::before { content: "\f008"; } .fa-ruler-horizontal::before { content: "\f547"; } .fa-people-robbery::before { content: "\e536"; } .fa-lightbulb::before { content: "\f0eb"; } .fa-caret-left::before { content: "\f0d9"; } .fa-circle-exclamation::bef