svg-with-js.css 12 KB

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