svg-with-js.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459
  1. /*!
  2. * Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com
  3. * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
  4. * Copyright 2024 Fonticons, Inc.
  5. */
  6. :root, :host {
  7. --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free';
  8. --fa-font-regular: normal 400 1em/1 'Font Awesome 6 Free';
  9. --fa-font-light: normal 300 1em/1 'Font Awesome 6 Pro';
  10. --fa-font-thin: normal 100 1em/1 'Font Awesome 6 Pro';
  11. --fa-font-duotone: normal 900 1em/1 'Font Awesome 6 Duotone';
  12. --fa-font-brands: normal 400 1em/1 'Font Awesome 6 Brands';
  13. --fa-font-sharp-solid: normal 900 1em/1 'Font Awesome 6 Sharp';
  14. --fa-font-sharp-regular: normal 400 1em/1 'Font Awesome 6 Sharp';
  15. --fa-font-sharp-light: normal 300 1em/1 'Font Awesome 6 Sharp';
  16. --fa-font-sharp-thin: normal 100 1em/1 'Font Awesome 6 Sharp';
  17. --fa-font-sharp-duotone-solid: normal 900 1em/1 'Font Awesome 6 Sharp Duotone'; }
  18. svg:not(:root).svg-inline--fa, svg:not(:host).svg-inline--fa {
  19. overflow: visible;
  20. box-sizing: content-box; }
  21. .svg-inline--fa {
  22. display: var(--fa-display, inline-block);
  23. height: 1em;
  24. overflow: visible;
  25. vertical-align: -.125em; }
  26. .svg-inline--fa.fa-2xs {
  27. vertical-align: 0.1em; }
  28. .svg-inline--fa.fa-xs {
  29. vertical-align: 0em; }
  30. .svg-inline--fa.fa-sm {
  31. vertical-align: -0.07143em; }
  32. .svg-inline--fa.fa-lg {
  33. vertical-align: -0.2em; }
  34. .svg-inline--fa.fa-xl {
  35. vertical-align: -0.25em; }
  36. .svg-inline--fa.fa-2xl {
  37. vertical-align: -0.3125em; }
  38. .svg-inline--fa.fa-pull-left {
  39. margin-right: var(--fa-pull-margin, 0.3em);
  40. width: auto; }
  41. .svg-inline--fa.fa-pull-right {
  42. margin-left: var(--fa-pull-margin, 0.3em);
  43. width: auto; }
  44. .svg-inline--fa.fa-li {
  45. width: var(--fa-li-width, 2em);
  46. top: 0.25em; }
  47. .svg-inline--fa.fa-fw {
  48. width: var(--fa-fw-width, 1.25em); }
  49. .fa-layers svg.svg-inline--fa {
  50. bottom: 0;
  51. left: 0;
  52. margin: auto;
  53. position: absolute;
  54. right: 0;
  55. top: 0; }
  56. .fa-layers-text, .fa-layers-counter {
  57. display: inline-block;
  58. position: absolute;
  59. text-align: center; }
  60. .fa-layers {
  61. display: inline-block;
  62. height: 1em;
  63. position: relative;
  64. text-align: center;
  65. vertical-align: -.125em;
  66. width: 1em; }
  67. .fa-layers svg.svg-inline--fa {
  68. transform-origin: center center; }
  69. .fa-layers-text {
  70. left: 50%;
  71. top: 50%;
  72. transform: translate(-50%, -50%);
  73. transform-origin: center center; }
  74. .fa-layers-counter {
  75. background-color: var(--fa-counter-background-color, #ff253a);
  76. border-radius: var(--fa-counter-border-radius, 1em);
  77. box-sizing: border-box;
  78. color: var(--fa-inverse, #fff);
  79. line-height: var(--fa-counter-line-height, 1);
  80. max-width: var(--fa-counter-max-width, 5em);
  81. min-width: var(--fa-counter-min-width, 1.5em);
  82. overflow: hidden;
  83. padding: var(--fa-counter-padding, 0.25em 0.5em);
  84. right: var(--fa-right, 0);
  85. text-overflow: ellipsis;
  86. top: var(--fa-top, 0);
  87. transform: scale(var(--fa-counter-scale, 0.25));
  88. transform-origin: top right; }
  89. .fa-layers-bottom-right {
  90. bottom: var(--fa-bottom, 0);
  91. right: var(--fa-right, 0);
  92. top: auto;
  93. transform: scale(var(--fa-layers-scale, 0.25));
  94. transform-origin: bottom right; }
  95. .fa-layers-bottom-left {
  96. bottom: var(--fa-bottom, 0);
  97. left: var(--fa-left, 0);
  98. right: auto;
  99. top: auto;
  100. transform: scale(var(--fa-layers-scale, 0.25));
  101. transform-origin: bottom left; }
  102. .fa-layers-top-right {
  103. top: var(--fa-top, 0);
  104. right: var(--fa-right, 0);
  105. transform: scale(var(--fa-layers-scale, 0.25));
  106. transform-origin: top right; }
  107. .fa-layers-top-left {
  108. left: var(--fa-left, 0);
  109. right: auto;
  110. top: var(--fa-top, 0);
  111. transform: scale(var(--fa-layers-scale, 0.25));
  112. transform-origin: top left; }
  113. .fa-1x {
  114. font-size: 1em; }
  115. .fa-2x {
  116. font-size: 2em; }
  117. .fa-3x {
  118. font-size: 3em; }
  119. .fa-4x {
  120. font-size: 4em; }
  121. .fa-5x {
  122. font-size: 5em; }
  123. .fa-6x {
  124. font-size: 6em; }
  125. .fa-7x {
  126. font-size: 7em; }
  127. .fa-8x {
  128. font-size: 8em; }
  129. .fa-9x {
  130. font-size: 9em; }
  131. .fa-10x {
  132. font-size: 10em; }
  133. .fa-2xs {
  134. font-size: 0.625em;
  135. line-height: 0.1em;
  136. vertical-align: 0.225em; }
  137. .fa-xs {
  138. font-size: 0.75em;
  139. line-height: 0.08333em;
  140. vertical-align: 0.125em; }
  141. .fa-sm {
  142. font-size: 0.875em;
  143. line-height: 0.07143em;
  144. vertical-align: 0.05357em; }
  145. .fa-lg {
  146. font-size: 1.25em;
  147. line-height: 0.05em;
  148. vertical-align: -0.075em; }
  149. .fa-xl {
  150. font-size: 1.5em;
  151. line-height: 0.04167em;
  152. vertical-align: -0.125em; }
  153. .fa-2xl {
  154. font-size: 2em;
  155. line-height: 0.03125em;
  156. vertical-align: -0.1875em; }
  157. .fa-fw {
  158. text-align: center;
  159. width: 1.25em; }
  160. .fa-ul {
  161. list-style-type: none;
  162. margin-left: var(--fa-li-margin, 2.5em);
  163. padding-left: 0; }
  164. .fa-ul > li {
  165. position: relative; }
  166. .fa-li {
  167. left: calc(-1 * var(--fa-li-width, 2em));
  168. position: absolute;
  169. text-align: center;
  170. width: var(--fa-li-width, 2em);
  171. line-height: inherit; }
  172. .fa-border {
  173. border-color: var(--fa-border-color, #eee);
  174. border-radius: var(--fa-border-radius, 0.1em);
  175. border-style: var(--fa-border-style, solid);
  176. border-width: var(--fa-border-width, 0.08em);
  177. padding: var(--fa-border-padding, 0.2em 0.25em 0.15em); }
  178. .fa-pull-left {
  179. float: left;
  180. margin-right: var(--fa-pull-margin, 0.3em); }
  181. .fa-pull-right {
  182. float: right;
  183. margin-left: var(--fa-pull-margin, 0.3em); }
  184. .fa-beat {
  185. animation-name: fa-beat;
  186. animation-delay: var(--fa-animation-delay, 0s);
  187. animation-direction: var(--fa-animation-direction, normal);
  188. animation-duration: var(--fa-animation-duration, 1s);
  189. animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  190. animation-timing-function: var(--fa-animation-timing, ease-in-out); }
  191. .fa-bounce {
  192. animation-name: fa-bounce;
  193. animation-delay: var(--fa-animation-delay, 0s);
  194. animation-direction: var(--fa-animation-direction, normal);
  195. animation-duration: var(--fa-animation-duration, 1s);
  196. animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  197. animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1)); }
  198. .fa-fade {
  199. animation-name: fa-fade;
  200. animation-delay: var(--fa-animation-delay, 0s);
  201. animation-direction: var(--fa-animation-direction, normal);
  202. animation-duration: var(--fa-animation-duration, 1s);
  203. animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  204. animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); }
  205. .fa-beat-fade {
  206. animation-name: fa-beat-fade;
  207. animation-delay: var(--fa-animation-delay, 0s);
  208. animation-direction: var(--fa-animation-direction, normal);
  209. animation-duration: var(--fa-animation-duration, 1s);
  210. animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  211. animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); }
  212. .fa-flip {
  213. animation-name: fa-flip;
  214. animation-delay: var(--fa-animation-delay, 0s);
  215. animation-direction: var(--fa-animation-direction, normal);
  216. animation-duration: var(--fa-animation-duration, 1s);
  217. animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  218. animation-timing-function: var(--fa-animation-timing, ease-in-out); }
  219. .fa-shake {
  220. animation-name: fa-shake;
  221. animation-delay: var(--fa-animation-delay, 0s);
  222. animation-direction: var(--fa-animation-direction, normal);
  223. animation-duration: var(--fa-animation-duration, 1s);
  224. animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  225. animation-timing-function: var(--fa-animation-timing, linear); }
  226. .fa-spin {
  227. animation-name: fa-spin;
  228. animation-delay: var(--fa-animation-delay, 0s);
  229. animation-direction: var(--fa-animation-direction, normal);
  230. animation-duration: var(--fa-animation-duration, 2s);
  231. animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  232. animation-timing-function: var(--fa-animation-timing, linear); }
  233. .fa-spin-reverse {
  234. --fa-animation-direction: reverse; }
  235. .fa-pulse,
  236. .fa-spin-pulse {
  237. animation-name: fa-spin;
  238. animation-direction: var(--fa-animation-direction, normal);
  239. animation-duration: var(--fa-animation-duration, 1s);
  240. animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  241. animation-timing-function: var(--fa-animation-timing, steps(8)); }
  242. @media (prefers-reduced-motion: reduce) {
  243. .fa-beat,
  244. .fa-bounce,
  245. .fa-fade,
  246. .fa-beat-fade,
  247. .fa-flip,
  248. .fa-pulse,
  249. .fa-shake,
  250. .fa-spin,
  251. .fa-spin-pulse {
  252. animation-delay: -1ms;
  253. animation-duration: 1ms;
  254. animation-iteration-count: 1;
  255. transition-delay: 0s;
  256. transition-duration: 0s; } }
  257. @keyframes fa-beat {
  258. 0%, 90% {
  259. transform: scale(1); }
  260. 45% {
  261. transform: scale(var(--fa-beat-scale, 1.25)); } }
  262. @keyframes fa-bounce {
  263. 0% {
  264. transform: scale(1, 1) translateY(0); }
  265. 10% {
  266. transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); }
  267. 30% {
  268. 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)); }
  269. 50% {
  270. transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); }
  271. 57% {
  272. transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); }
  273. 64% {
  274. transform: scale(1, 1) translateY(0); }
  275. 100% {
  276. transform: scale(1, 1) translateY(0); } }
  277. @keyframes fa-fade {
  278. 50% {
  279. opacity: var(--fa-fade-opacity, 0.4); } }
  280. @keyframes fa-beat-fade {
  281. 0%, 100% {
  282. opacity: var(--fa-beat-fade-opacity, 0.4);
  283. transform: scale(1); }
  284. 50% {
  285. opacity: 1;
  286. transform: scale(var(--fa-beat-fade-scale, 1.125)); } }
  287. @keyframes fa-flip {
  288. 50% {
  289. transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); } }
  290. @keyframes fa-shake {
  291. 0% {
  292. transform: rotate(-15deg); }
  293. 4% {
  294. transform: rotate(15deg); }
  295. 8%, 24% {
  296. transform: rotate(-18deg); }
  297. 12%, 28% {
  298. transform: rotate(18deg); }
  299. 16% {
  300. transform: rotate(-22deg); }
  301. 20% {
  302. transform: rotate(22deg); }
  303. 32% {
  304. transform: rotate(-12deg); }
  305. 36% {
  306. transform: rotate(12deg); }
  307. 40%, 100% {
  308. transform: rotate(0deg); } }
  309. @keyframes fa-spin {
  310. 0% {
  311. transform: rotate(0deg); }
  312. 100% {
  313. transform: rotate(360deg); } }
  314. .fa-rotate-90 {
  315. transform: rotate(90deg); }
  316. .fa-rotate-180 {
  317. transform: rotate(180deg); }
  318. .fa-rotate-270 {
  319. transform: rotate(270deg); }
  320. .fa-flip-horizontal {
  321. transform: scale(-1, 1); }
  322. .fa-flip-vertical {
  323. transform: scale(1, -1); }
  324. .fa-flip-both,
  325. .fa-flip-horizontal.fa-flip-vertical {
  326. transform: scale(-1, -1); }
  327. .fa-rotate-by {
  328. transform: rotate(var(--fa-rotate-angle, 0)); }
  329. .fa-stack {
  330. display: inline-block;
  331. vertical-align: middle;
  332. height: 2em;
  333. position: relative;
  334. width: 2.5em; }
  335. .fa-stack-1x,
  336. .fa-stack-2x {
  337. bottom: 0;
  338. left: 0;
  339. margin: auto;
  340. position: absolute;
  341. right: 0;
  342. top: 0;
  343. z-index: var(--fa-stack-z-index, auto); }
  344. .svg-inline--fa.fa-stack-1x {
  345. height: 1em;
  346. width: 1.25em; }
  347. .svg-inline--fa.fa-stack-2x {
  348. height: 2em;
  349. width: 2.5em; }
  350. .fa-inverse {
  351. color: var(--fa-inverse, #fff); }
  352. .sr-only,
  353. .fa-sr-only {
  354. position: absolute;
  355. width: 1px;
  356. height: 1px;
  357. padding: 0;
  358. margin: -1px;
  359. overflow: hidden;
  360. clip: rect(0, 0, 0, 0);
  361. white-space: nowrap;
  362. border-width: 0; }
  363. .sr-only-focusable:not(:focus),
  364. .fa-sr-only-focusable:not(:focus) {
  365. position: absolute;
  366. width: 1px;
  367. height: 1px;
  368. padding: 0;
  369. margin: -1px;
  370. overflow: hidden;
  371. clip: rect(0, 0, 0, 0);
  372. white-space: nowrap;
  373. border-width: 0; }
  374. .svg-inline--fa .fa-primary {
  375. fill: var(--fa-primary-color, currentColor);
  376. opacity: var(--fa-primary-opacity, 1); }
  377. .svg-inline--fa .fa-secondary {
  378. fill: var(--fa-secondary-color, currentColor);
  379. opacity: var(--fa-secondary-opacity, 0.4); }
  380. .svg-inline--fa.fa-swap-opacity .fa-primary {
  381. opacity: var(--fa-secondary-opacity, 0.4); }
  382. .svg-inline--fa.fa-swap-opacity .fa-secondary {
  383. opacity: var(--fa-primary-opacity, 1); }
  384. .svg-inline--fa mask .fa-primary,
  385. .svg-inline--fa mask .fa-secondary {
  386. fill: black; }
  387. .fad.fa-inverse,
  388. .fa-duotone.fa-inverse {
  389. color: var(--fa-inverse, #fff); }