@covalent/core 4.0.0-beta.2 → 4.1.0-develop.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (371) hide show
  1. package/README.md +5 -4
  2. package/breadcrumbs/README.md +21 -17
  3. package/breadcrumbs/breadcrumb/breadcrumb.component.d.ts +3 -1
  4. package/breadcrumbs/breadcrumbs.component.d.ts +1 -0
  5. package/breadcrumbs/covalent-core-breadcrumbs.d.ts +1 -1
  6. package/breadcrumbs/{public-api.d.ts → public_api.d.ts} +0 -0
  7. package/common/README.md +3 -0
  8. package/common/_common-theme.scss +1 -1
  9. package/common/behaviors/disable-ripple.mixin.d.ts +1 -1
  10. package/common/behaviors/disabled.mixin.d.ts +1 -1
  11. package/common/covalent-core-common.d.ts +1 -1
  12. package/common/pipes/truncate/truncate.pipe.d.ts +1 -1
  13. package/common/{public-api.d.ts → public_api.d.ts} +0 -0
  14. package/common/styles/font/README.md +4 -2
  15. package/covalent-core.d.ts +1 -1
  16. package/dialogs/README.md +38 -30
  17. package/dialogs/alert-dialog/alert-dialog.component.d.ts +3 -3
  18. package/dialogs/confirm-dialog/confirm-dialog.component.d.ts +2 -2
  19. package/dialogs/covalent-core-dialogs.d.ts +1 -1
  20. package/dialogs/dialog.component.d.ts +4 -4
  21. package/dialogs/dialogs.module.d.ts +1 -1
  22. package/dialogs/prompt-dialog/prompt-dialog.component.d.ts +3 -3
  23. package/dialogs/{public-api.d.ts → public_api.d.ts} +0 -0
  24. package/dialogs/src/README.md +223 -0
  25. package/dialogs/window-dialog/window-dialog.component.d.ts +5 -5
  26. package/dynamic-menu/README.md +6 -6
  27. package/dynamic-menu/covalent-core-dynamic-menu.d.ts +1 -1
  28. package/dynamic-menu/dynamic-menu-item/dynamic-menu-item.component.d.ts +1 -1
  29. package/dynamic-menu/dynamic-menu-item/dynamic-menu-link/dynamic-menu-link.component.d.ts +1 -1
  30. package/dynamic-menu/dynamic-menu.component.d.ts +1 -22
  31. package/dynamic-menu/dynamic-menu.menu.d.ts +22 -0
  32. package/dynamic-menu/public_api.d.ts +1 -0
  33. package/esm2020/breadcrumbs/breadcrumb/breadcrumb.component.mjs +21 -37
  34. package/esm2020/breadcrumbs/breadcrumbs.component.mjs +20 -25
  35. package/esm2020/breadcrumbs/breadcrumbs.module.mjs +12 -13
  36. package/esm2020/breadcrumbs/covalent-core-breadcrumbs.mjs +2 -2
  37. package/esm2020/breadcrumbs/public_api.mjs +4 -0
  38. package/esm2020/common/animations/bounce/bounce.animation.mjs +1 -1
  39. package/esm2020/common/animations/collapse/collapse.animation.mjs +1 -1
  40. package/esm2020/common/animations/common/interfaces.mjs +1 -1
  41. package/esm2020/common/animations/fade/fadeInOut.animation.mjs +1 -1
  42. package/esm2020/common/animations/flash/flash.animation.mjs +1 -1
  43. package/esm2020/common/animations/headshake/headshake.animation.mjs +17 -5
  44. package/esm2020/common/animations/jello/jello.animation.mjs +29 -8
  45. package/esm2020/common/animations/pulse/pulse.animation.mjs +1 -1
  46. package/esm2020/common/animations/rotate/rotate.animation.mjs +7 -2
  47. package/esm2020/common/behaviors/control-value-accesor.mixin.mjs +4 -2
  48. package/esm2020/common/behaviors/disable-ripple.mixin.mjs +1 -1
  49. package/esm2020/common/behaviors/disabled.mixin.mjs +1 -1
  50. package/esm2020/common/common.module.mjs +14 -15
  51. package/esm2020/common/covalent-core-common.mjs +2 -2
  52. package/esm2020/common/directives/fullscreen/fullscreen.directive.mjs +41 -41
  53. package/esm2020/common/forms/auto-trim/auto-trim.directive.mjs +19 -19
  54. package/esm2020/common/forms/validators/validators.mjs +6 -6
  55. package/esm2020/common/functions/clipboard.mjs +1 -1
  56. package/esm2020/common/functions/convert.mjs +1 -1
  57. package/esm2020/common/functions/download.mjs +1 -1
  58. package/esm2020/common/functions/file.mjs +1 -1
  59. package/esm2020/common/pipes/bytes/bytes.pipe.mjs +21 -11
  60. package/esm2020/common/pipes/decimal-bytes/decimal-bytes.pipe.mjs +21 -11
  61. package/esm2020/common/pipes/digits/digits.pipe.mjs +13 -13
  62. package/esm2020/common/pipes/time-ago/time-ago.pipe.mjs +9 -9
  63. package/esm2020/common/pipes/time-difference/time-difference.pipe.mjs +9 -9
  64. package/esm2020/common/pipes/time-until/time-until.pipe.mjs +9 -9
  65. package/esm2020/common/pipes/truncate/truncate.pipe.mjs +10 -10
  66. package/esm2020/common/public_api.mjs +39 -0
  67. package/esm2020/common/services/icon.service.mjs +6 -6
  68. package/esm2020/common/services/router-path.service.mjs +6 -6
  69. package/esm2020/covalent-core.mjs +2 -2
  70. package/esm2020/dialogs/alert-dialog/alert-dialog.component.mjs +9 -40
  71. package/esm2020/dialogs/confirm-dialog/confirm-dialog.component.mjs +9 -49
  72. package/esm2020/dialogs/covalent-core-dialogs.mjs +2 -2
  73. package/esm2020/dialogs/dialog.component.mjs +35 -76
  74. package/esm2020/dialogs/dialogs.module.mjs +39 -36
  75. package/esm2020/dialogs/prompt-dialog/prompt-dialog.component.mjs +15 -73
  76. package/esm2020/dialogs/public_api.mjs +9 -0
  77. package/esm2020/dialogs/resizable-draggable-dialog/resizable-draggable-dialog.mjs +27 -10
  78. package/esm2020/dialogs/services/dialog.service.mjs +16 -13
  79. package/esm2020/dialogs/window-dialog/window-dialog.component.mjs +24 -55
  80. package/esm2020/dynamic-menu/covalent-core-dynamic-menu.mjs +2 -2
  81. package/esm2020/dynamic-menu/dynamic-menu-item/dynamic-menu-item.component.mjs +19 -136
  82. package/esm2020/dynamic-menu/dynamic-menu-item/dynamic-menu-link/dynamic-menu-link.component.mjs +14 -103
  83. package/esm2020/dynamic-menu/dynamic-menu.component.mjs +18 -101
  84. package/esm2020/dynamic-menu/dynamic-menu.menu.mjs +2 -0
  85. package/esm2020/dynamic-menu/dynamic-menu.module.mjs +44 -19
  86. package/esm2020/dynamic-menu/public_api.mjs +2 -1
  87. package/esm2020/file/covalent-core-file.mjs +2 -2
  88. package/esm2020/file/directives/file-drop.directive.mjs +46 -47
  89. package/esm2020/file/directives/file-select.directive.mjs +32 -31
  90. package/esm2020/file/file-input/file-input.component.mjs +41 -68
  91. package/esm2020/file/file-upload/file-upload.component.mjs +76 -112
  92. package/esm2020/file/file.module.mjs +32 -17
  93. package/esm2020/file/public_api.mjs +7 -0
  94. package/esm2020/file/services/file.service.mjs +13 -11
  95. package/esm2020/json-formatter/collapse.animation.mjs +51 -0
  96. package/esm2020/json-formatter/covalent-core-json-formatter.mjs +2 -2
  97. package/esm2020/json-formatter/json-formatter.component.mjs +38 -123
  98. package/esm2020/json-formatter/json-formatter.module.mjs +12 -13
  99. package/esm2020/json-formatter/public_api.mjs +3 -0
  100. package/esm2020/layout/covalent-core-layout.mjs +2 -2
  101. package/esm2020/layout/layout-card-over/layout-card-over.component.mjs +17 -64
  102. package/esm2020/layout/layout-footer/layout-footer.component.mjs +9 -14
  103. package/esm2020/layout/layout-manage-list/layout-manage-list.component.mjs +22 -51
  104. package/esm2020/layout/layout-manage-list/layout-manage-list.directives.mjs +47 -53
  105. package/esm2020/layout/layout-nav/layout-nav.component.mjs +22 -84
  106. package/esm2020/layout/layout-nav-list/layout-nav-list.component.mjs +37 -124
  107. package/esm2020/layout/layout-nav-list/layout-nav-list.directives.mjs +47 -53
  108. package/esm2020/layout/layout-toggle.class.mjs +12 -15
  109. package/esm2020/layout/layout.component.mjs +22 -43
  110. package/esm2020/layout/layout.directives.mjs +48 -50
  111. package/esm2020/layout/layout.module.mjs +34 -35
  112. package/esm2020/layout/navigation-drawer/navigation-drawer.component.mjs +56 -201
  113. package/esm2020/layout/public_api.mjs +13 -0
  114. package/esm2020/menu/covalent-core-menu.mjs +2 -2
  115. package/esm2020/menu/menu.component.mjs +7 -18
  116. package/esm2020/menu/menu.module.mjs +12 -13
  117. package/esm2020/menu/public_api.mjs +3 -0
  118. package/esm2020/message/collapse.animation.mjs +51 -0
  119. package/esm2020/message/covalent-core-message.mjs +2 -2
  120. package/esm2020/message/message.component.mjs +44 -102
  121. package/esm2020/message/message.module.mjs +19 -15
  122. package/esm2020/message/public_api.mjs +3 -0
  123. package/esm2020/public_api.mjs +2 -0
  124. package/esm2020/search/covalent-core-search.mjs +2 -2
  125. package/esm2020/search/public_api.mjs +4 -0
  126. package/esm2020/search/search-box/search-box.component.mjs +97 -123
  127. package/esm2020/search/search-input/search-input.component.mjs +116 -153
  128. package/esm2020/search/search.module.mjs +28 -13
  129. package/esm2020/side-sheet/covalent-core-side-sheet.mjs +2 -2
  130. package/esm2020/side-sheet/public_api.mjs +6 -0
  131. package/esm2020/side-sheet/side-sheet-container.mjs +89 -57
  132. package/esm2020/side-sheet/side-sheet-ref.mjs +2 -2
  133. package/esm2020/side-sheet/side-sheet.animation.mjs +2 -2
  134. package/esm2020/side-sheet/side-sheet.config.mjs +1 -1
  135. package/esm2020/side-sheet/side-sheet.content-directives.mjs +109 -86
  136. package/esm2020/side-sheet/side-sheet.mjs +44 -31
  137. package/esm2020/side-sheet/side-sheet.module.mjs +37 -38
  138. package/esm2020/user-profile/covalent-core-user-profile.mjs +2 -2
  139. package/esm2020/user-profile/public_api.mjs +1 -1
  140. package/esm2020/user-profile/user-profile-menu/user-profile-menu.component.mjs +13 -64
  141. package/esm2020/user-profile/user-profile.component.mjs +13 -35
  142. package/esm2020/user-profile/user-profile.module.mjs +32 -14
  143. package/fesm2015/covalent-core-breadcrumbs.mjs +35 -76
  144. package/fesm2015/covalent-core-breadcrumbs.mjs.map +1 -1
  145. package/fesm2015/covalent-core-common.mjs +170 -140
  146. package/fesm2015/covalent-core-common.mjs.map +1 -1
  147. package/fesm2015/covalent-core-dialogs.mjs +125 -358
  148. package/fesm2015/covalent-core-dialogs.mjs.map +1 -1
  149. package/fesm2015/covalent-core-dynamic-menu.mjs +73 -425
  150. package/fesm2015/covalent-core-dynamic-menu.mjs.map +1 -1
  151. package/fesm2015/covalent-core-file.mjs +148 -233
  152. package/fesm2015/covalent-core-file.mjs.map +1 -1
  153. package/fesm2015/covalent-core-json-formatter.mjs +93 -148
  154. package/fesm2015/covalent-core-json-formatter.mjs.map +1 -1
  155. package/fesm2015/covalent-core-layout.mjs +194 -747
  156. package/fesm2015/covalent-core-layout.mjs.map +1 -1
  157. package/fesm2015/covalent-core-menu.mjs +10 -28
  158. package/fesm2015/covalent-core-menu.mjs.map +1 -1
  159. package/fesm2015/covalent-core-message.mjs +79 -104
  160. package/fesm2015/covalent-core-message.mjs.map +1 -1
  161. package/fesm2015/covalent-core-search.mjs +147 -227
  162. package/fesm2015/covalent-core-search.mjs.map +1 -1
  163. package/fesm2015/covalent-core-side-sheet.mjs +202 -173
  164. package/fesm2015/covalent-core-side-sheet.mjs.map +1 -1
  165. package/fesm2015/covalent-core-user-profile.mjs +38 -114
  166. package/fesm2015/covalent-core-user-profile.mjs.map +1 -1
  167. package/fesm2015/covalent-core.mjs.map +1 -1
  168. package/fesm2020/covalent-core-breadcrumbs.mjs +49 -71
  169. package/fesm2020/covalent-core-breadcrumbs.mjs.map +1 -1
  170. package/fesm2020/covalent-core-common.mjs +224 -165
  171. package/fesm2020/covalent-core-common.mjs.map +1 -1
  172. package/fesm2020/covalent-core-dialogs.mjs +160 -338
  173. package/fesm2020/covalent-core-dialogs.mjs.map +1 -1
  174. package/fesm2020/covalent-core-dynamic-menu.mjs +89 -354
  175. package/fesm2020/covalent-core-dynamic-menu.mjs.map +1 -1
  176. package/fesm2020/covalent-core-file.mjs +229 -273
  177. package/fesm2020/covalent-core-file.mjs.map +1 -1
  178. package/fesm2020/covalent-core-json-formatter.mjs +97 -133
  179. package/fesm2020/covalent-core-json-formatter.mjs.map +1 -1
  180. package/fesm2020/covalent-core-layout.mjs +353 -767
  181. package/fesm2020/covalent-core-layout.mjs.map +1 -1
  182. package/fesm2020/covalent-core-menu.mjs +17 -29
  183. package/fesm2020/covalent-core-menu.mjs.map +1 -1
  184. package/fesm2020/covalent-core-message.mjs +110 -114
  185. package/fesm2020/covalent-core-message.mjs.map +1 -1
  186. package/fesm2020/covalent-core-search.mjs +233 -281
  187. package/fesm2020/covalent-core-search.mjs.map +1 -1
  188. package/fesm2020/covalent-core-side-sheet.mjs +267 -200
  189. package/fesm2020/covalent-core-side-sheet.mjs.map +1 -1
  190. package/fesm2020/covalent-core-user-profile.mjs +54 -109
  191. package/fesm2020/covalent-core-user-profile.mjs.map +1 -1
  192. package/fesm2020/covalent-core.mjs.map +1 -1
  193. package/file/_file-theme.scss +2 -1
  194. package/file/covalent-core-file.d.ts +1 -1
  195. package/file/directives/file-drop.directive.d.ts +6 -7
  196. package/file/directives/file-select.directive.d.ts +2 -2
  197. package/file/file-input/file-input.component.d.ts +7 -7
  198. package/file/file-upload/file-upload.component.d.ts +16 -9
  199. package/file/{public-api.d.ts → public_api.d.ts} +0 -0
  200. package/file/{file-input → src/file-input}/README.md +46 -37
  201. package/file/{file-upload → src/file-upload}/README.md +36 -27
  202. package/json-formatter/README.md +8 -8
  203. package/json-formatter/collapse.animation.d.ts +24 -0
  204. package/json-formatter/covalent-core-json-formatter.d.ts +1 -1
  205. package/json-formatter/json-formatter.component.d.ts +4 -4
  206. package/json-formatter/{public-api.d.ts → public_api.d.ts} +0 -0
  207. package/layout/README.md +48 -50
  208. package/layout/covalent-core-layout.d.ts +1 -1
  209. package/layout/layout-card-over/layout-card-over.component.d.ts +3 -3
  210. package/layout/layout-footer/layout-footer.component.d.ts +3 -3
  211. package/layout/layout-manage-list/layout-manage-list.component.d.ts +4 -4
  212. package/layout/layout-manage-list/layout-manage-list.directives.d.ts +5 -5
  213. package/layout/layout-nav/layout-nav.component.d.ts +5 -5
  214. package/layout/layout-nav-list/layout-nav-list.component.d.ts +9 -9
  215. package/layout/layout-nav-list/layout-nav-list.directives.d.ts +5 -5
  216. package/layout/layout-toggle.class.d.ts +1 -1
  217. package/layout/layout.component.d.ts +4 -4
  218. package/layout/layout.directives.d.ts +2 -2
  219. package/layout/navigation-drawer/navigation-drawer.component.d.ts +12 -12
  220. package/layout/{public-api.d.ts → public_api.d.ts} +0 -0
  221. package/layout/{layout-card-over → src/layout-card-over}/README.md +19 -17
  222. package/layout/{layout-manage-list → src/layout-manage-list}/README.md +24 -28
  223. package/layout/src/layout-nav/README.md +50 -0
  224. package/layout/{layout-nav-list → src/layout-nav-list}/README.md +44 -40
  225. package/menu/covalent-core-menu.d.ts +1 -1
  226. package/menu/{public-api.d.ts → public_api.d.ts} +0 -0
  227. package/message/README.md +26 -18
  228. package/message/collapse.animation.d.ts +24 -0
  229. package/message/covalent-core-message.d.ts +1 -1
  230. package/message/message.component.d.ts +4 -4
  231. package/message/{public-api.d.ts → public_api.d.ts} +0 -0
  232. package/package.json +36 -55
  233. package/{index.d.ts → public_api.d.ts} +0 -0
  234. package/search/README.md +74 -73
  235. package/search/covalent-core-search.d.ts +1 -1
  236. package/search/{public-api.d.ts → public_api.d.ts} +0 -0
  237. package/search/search-box/search-box.component.d.ts +10 -6
  238. package/search/search-input/search-input.component.d.ts +10 -6
  239. package/search/src/search-box/README.md +73 -0
  240. package/search/src/search-input/README.md +74 -0
  241. package/side-sheet/README.md +3 -5
  242. package/side-sheet/{side-sheet.theme.scss → _side-sheet.theme.scss} +0 -0
  243. package/side-sheet/covalent-core-side-sheet.d.ts +1 -1
  244. package/side-sheet/{public-api.d.ts → public_api.d.ts} +0 -0
  245. package/side-sheet/side-sheet-container.d.ts +18 -7
  246. package/side-sheet/side-sheet.content-directives.d.ts +22 -16
  247. package/side-sheet/side-sheet.d.ts +2 -2
  248. package/side-sheet/side-sheet.module.d.ts +1 -1
  249. package/user-profile/README.md +5 -5
  250. package/user-profile/covalent-core-user-profile.d.ts +1 -1
  251. package/user-profile/user-profile-menu/user-profile-menu.component.d.ts +2 -2
  252. package/user-profile/user-profile.component.d.ts +2 -2
  253. package/breadcrumbs/breadcrumb/breadcrumb.component.scss +0 -25
  254. package/breadcrumbs/breadcrumbs.component.scss +0 -8
  255. package/breadcrumbs/index.d.ts +0 -1
  256. package/common/index.d.ts +0 -1
  257. package/common/material-icons.css +0 -111
  258. package/common/material-icons.css.map +0 -1
  259. package/common/material-icons.scss +0 -3
  260. package/common/platform.css +0 -16819
  261. package/common/platform.css.map +0 -1
  262. package/common/platform.scss +0 -7
  263. package/common/styles/_elevation.scss +0 -280
  264. package/common/styles/_layout.scss +0 -605
  265. package/common/styles/_palette-dark.scss +0 -326
  266. package/common/styles/_palette-light.scss +0 -637
  267. package/common/styles/_rtl.scss +0 -31
  268. package/common/styles/_styles.scss +0 -10
  269. package/common/styles/_theme-functions.scss +0 -25
  270. package/common/styles/_typography-functions.scss +0 -35
  271. package/common/styles/_variables.scss +0 -98
  272. package/common/styles/colors/_colors-dark.scss +0 -1399
  273. package/common/styles/colors/_colors-light.scss +0 -3235
  274. package/common/styles/colors/_colors.scss +0 -7
  275. package/common/styles/core/_button.scss +0 -60
  276. package/common/styles/core/_card.scss +0 -184
  277. package/common/styles/core/_content.scss +0 -43
  278. package/common/styles/core/_core.scss +0 -23
  279. package/common/styles/core/_divider.scss +0 -16
  280. package/common/styles/core/_icons.scss +0 -22
  281. package/common/styles/core/_list.scss +0 -8
  282. package/common/styles/core/_sidenav.scss +0 -22
  283. package/common/styles/core/_structure.scss +0 -127
  284. package/common/styles/core/_toolbar.scss +0 -53
  285. package/common/styles/core/_whiteframe.scss +0 -130
  286. package/common/styles/font/MaterialIcons-Regular-v48.woff2 +0 -0
  287. package/common/styles/font/_font.scss +0 -99
  288. package/common/styles/utilities/_general.scss +0 -65
  289. package/common/styles/utilities/_pad.scss +0 -36
  290. package/common/styles/utilities/_pull.scss +0 -36
  291. package/common/styles/utilities/_push.scss +0 -36
  292. package/common/styles/utilities/_size.scss +0 -24
  293. package/common/styles/utilities/_text.scss +0 -105
  294. package/common/styles/utilities/_utilities.scss +0 -15
  295. package/dialogs/alert-dialog/alert-dialog.component.scss +0 -3
  296. package/dialogs/confirm-dialog/confirm-dialog.component.scss +0 -3
  297. package/dialogs/dialog.component.scss +0 -49
  298. package/dialogs/index.d.ts +0 -1
  299. package/dialogs/prompt-dialog/prompt-dialog.component.scss +0 -16
  300. package/dialogs/window-dialog/window-dialog.component.scss +0 -31
  301. package/dynamic-menu/dynamic-menu-item/dynamic-menu-item.component.scss +0 -7
  302. package/dynamic-menu/dynamic-menu-item/dynamic-menu-link/dynamic-menu-link.component.scss +0 -13
  303. package/dynamic-menu/dynamic-menu.component.scss +0 -0
  304. package/dynamic-menu/index.d.ts +0 -1
  305. package/esm2020/breadcrumbs/index.mjs +0 -2
  306. package/esm2020/breadcrumbs/public-api.mjs +0 -4
  307. package/esm2020/common/index.mjs +0 -2
  308. package/esm2020/common/public-api.mjs +0 -39
  309. package/esm2020/dialogs/index.mjs +0 -2
  310. package/esm2020/dialogs/public-api.mjs +0 -9
  311. package/esm2020/dynamic-menu/index.mjs +0 -2
  312. package/esm2020/file/index.mjs +0 -2
  313. package/esm2020/file/public-api.mjs +0 -7
  314. package/esm2020/index.mjs +0 -2
  315. package/esm2020/json-formatter/index.mjs +0 -2
  316. package/esm2020/json-formatter/public-api.mjs +0 -3
  317. package/esm2020/layout/index.mjs +0 -2
  318. package/esm2020/layout/public-api.mjs +0 -13
  319. package/esm2020/menu/index.mjs +0 -2
  320. package/esm2020/menu/public-api.mjs +0 -3
  321. package/esm2020/message/index.mjs +0 -2
  322. package/esm2020/message/public-api.mjs +0 -3
  323. package/esm2020/search/index.mjs +0 -2
  324. package/esm2020/search/public-api.mjs +0 -4
  325. package/esm2020/side-sheet/index.mjs +0 -2
  326. package/esm2020/side-sheet/public-api.mjs +0 -6
  327. package/esm2020/user-profile/index.mjs +0 -2
  328. package/file/file-input/file-input.component.scss +0 -22
  329. package/file/file-upload/file-upload.component.scss +0 -34
  330. package/file/index.d.ts +0 -1
  331. package/json-formatter/index.d.ts +0 -1
  332. package/json-formatter/json-formatter.component.scss +0 -74
  333. package/layout/index.d.ts +0 -1
  334. package/layout/layout-card-over/layout-card-over.component.scss +0 -45
  335. package/layout/layout-footer/layout-footer.component.scss +0 -4
  336. package/layout/layout-manage-list/layout-manage-list.component.scss +0 -82
  337. package/layout/layout-nav/README.md +0 -46
  338. package/layout/layout-nav/layout-nav.component.scss +0 -54
  339. package/layout/layout-nav-list/layout-nav-list.component.scss +0 -115
  340. package/layout/layout.component.scss +0 -16
  341. package/layout/navigation-drawer/navigation-drawer.component.scss +0 -81
  342. package/menu/index.d.ts +0 -1
  343. package/menu/menu.component.scss +0 -51
  344. package/message/index.d.ts +0 -1
  345. package/message/message.component.scss +0 -32
  346. package/schematics/README.md +0 -66
  347. package/schematics/ng-add/files/theme.scss +0 -64
  348. package/search/index.d.ts +0 -1
  349. package/search/search-box/README.md +0 -62
  350. package/search/search-box/search-box.component.scss +0 -37
  351. package/search/search-input/README.md +0 -65
  352. package/search/search-input/search-input.component.scss +0 -75
  353. package/side-sheet/index.d.ts +0 -1
  354. package/side-sheet/side-sheet.scss +0 -68
  355. package/theming/prebuilt/blue-grey-deep-orange.css +0 -2815
  356. package/theming/prebuilt/blue-grey-deep-orange.css.map +0 -1
  357. package/theming/prebuilt/blue-grey-deep-orange.scss +0 -20
  358. package/theming/prebuilt/blue-orange.css +0 -2815
  359. package/theming/prebuilt/blue-orange.css.map +0 -1
  360. package/theming/prebuilt/blue-orange.scss +0 -20
  361. package/theming/prebuilt/indigo-pink.css +0 -2815
  362. package/theming/prebuilt/indigo-pink.css.map +0 -1
  363. package/theming/prebuilt/indigo-pink.scss +0 -20
  364. package/theming/prebuilt/orange-light-blue.css +0 -2815
  365. package/theming/prebuilt/orange-light-blue.css.map +0 -1
  366. package/theming/prebuilt/orange-light-blue.scss +0 -20
  367. package/theming/prebuilt/teal-orange.css +0 -2815
  368. package/theming/prebuilt/teal-orange.css.map +0 -1
  369. package/theming/prebuilt/teal-orange.scss +0 -20
  370. package/user-profile/index.d.ts +0 -1
  371. package/user-profile/user-profile-menu/user-profile-menu.component.scss +0 -41
package/theming/prebuilt/orange-light-blue.css.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["theming/prebuilt/orange-light-blue.css","common/styles/core/_button.scss","common/styles/_layout.scss","common/styles/colors/_colors-dark.scss","common/styles/colors/_colors-light.scss","../../../node_modules/@angular/material/badge/_badge-theme.scss","../../../node_modules/@angular/material/core/typography/_typography.scss","../../../node_modules/@angular/material/core/typography/_typography-utils.scss","../../../node_modules/@angular/material/bottom-sheet/_bottom-sheet-theme.scss","../../../node_modules/@angular/material/button/_button-theme.scss","../../../node_modules/@angular/material/button-toggle/_button-toggle-theme.scss","../../../node_modules/@angular/material/card/_card-theme.scss","../../../node_modules/@angular/material/checkbox/_checkbox-theme.scss","../../../node_modules/@angular/material/chips/_chips-theme.scss","../../../node_modules/@angular/material/table/_table-theme.scss","../../../node_modules/@angular/material/datepicker/_datepicker-theme.scss","../../../node_modules/@angular/material/dialog/_dialog-theme.scss","../../../node_modules/@angular/material/expansion/_expansion-theme.scss","../../../node_modules/@angular/material/form-field/_form-field-theme.scss","../../../node_modules/@angular/material/form-field/_form-field-legacy-theme.scss","../../../node_modules/@angular/material/form-field/_form-field-fill-theme.scss","../../../node_modules/@angular/material/form-field/_form-field-outline-theme.scss","../../../node_modules/@angular/material/grid-list/_grid-list-theme.scss","../../../node_modules/@angular/material/core/style/_list-common.scss","../../../node_modules/@angular/material/input/_input-theme.scss","../../../node_modules/@angular/material/menu/_menu-theme.scss","../../../node_modules/@angular/material/paginator/_paginator-theme.scss","../../../node_modules/@angular/material/radio/_radio-theme.scss","../../../node_modules/@angular/material/select/_select-theme.scss","../../../node_modules/@angular/material/slide-toggle/_slide-toggle-theme.scss","../../../node_modules/@angular/material/slider/_slider-theme.scss","../../../node_modules/@angular/material/stepper/_stepper-theme.scss","../../../node_modules/@angular/material/tabs/_tabs-theme.scss","../../../node_modules/@angular/material/toolbar/_toolbar-theme.scss","../../../node_modules/@angular/material/tooltip/_tooltip-theme.scss","../../../node_modules/@angular/material/list/_list-theme.scss","../../../node_modules/@angular/material/core/option/_option-theme.scss","../../../node_modules/@angular/material/core/option/_optgroup-theme.scss","../../../node_modules/@angular/material/snack-bar/_snack-bar-theme.scss","../../../node_modules/@angular/material/tree/_tree-theme.scss","../../../node_modules/@angular/material/core/ripple/_ripple.scss","../../../node_modules/@angular/cdk/a11y/_index.scss","../../../node_modules/@angular/cdk/overlay/_index.scss","../../../node_modules/@angular/cdk/text-field/_index.scss","../../../node_modules/@angular/material/core/focus-indicators/_focus-indicators.scss","../../../node_modules/@angular/material/core/_core.scss","../../../node_modules/@angular/material/core/ripple/_ripple-theme.scss","../../../node_modules/@angular/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss","../../../node_modules/@angular/material/core/_core-theme.scss","../../../node_modules/@angular/material/core/style/_elevation.scss","../../../node_modules/@angular/material/autocomplete/_autocomplete-theme.scss","../../../node_modules/@angular/material/divider/_divider-theme.scss","../../../node_modules/@angular/material/expansion/_expansion-mixins.scss","../../../node_modules/@angular/material/core/style/_form-common.scss","../../../node_modules/@angular/material/form-field/_form-field-standard-theme.scss","../../../node_modules/@angular/material/icon/_icon-theme.scss","../../../node_modules/@angular/material/core/style/_vendor-prefixes.scss","../../../node_modules/@angular/material/progress-bar/_progress-bar-theme.scss","../../../node_modules/@angular/material/progress-spinner/_progress-spinner-theme.scss","../../../node_modules/@angular/material/sidenav/_sidenav-theme.scss","../../../node_modules/@angular/material/sort/_sort-theme.scss","typography/_all-typography.scss","dialogs/_dialog-theme.scss","json-formatter/_json-formatter-theme.scss","message/_message-theme.scss","layout/_layout-theme.scss","breadcrumbs/_breadcrumbs-theme.scss","common/_common-theme.scss","common/styles/_elevation.scss","file/_file-theme.scss","side-sheet/side-sheet.theme.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACwBhB,gGAAA;ACxBA,kEAAA;AAEA;;;;;;;;;;;CAAA;AAwBA;EACE;IACE,SAAA;IACA,WAAA;IACA,gBAAA;IACA,YAAA;EFVF;AACF;AGtBA,6CAAA;AAs3CA,4CAAA;ACt3CA,6CAAA;AAkqGA,4CAAA;ACp9FE;EACE,gBAlMU;EAmMV,eApMQ;EAqMR,iDAAA;ALlLJ;;AKqLE;EAEE,cAAA;ALnLJ;;AKsLE;EACE,eAAA;ALnLJ;;AMkJE;ECzGE,0DAAA;EAcF,sBAAA;ED6FE,gBAAA;AN9IJ;;AMiJE;EC9GE,0DAAA;EAcF,sBAAA;EDkGE,gBAAA;AN7IJ;;AMgJE;ECnHE,0DAAA;EAcF,sBAAA;EDuGE,gBAAA;AN5IJ;;AM+IE;ECxHE,0DAAA;EAcF,sBAAA;ED4GE,gBAAA;AN3IJ;;AMiJE;EChIE,uEAAA;EDyIA,gBAAA;ANrJJ;;AMwJE;EC5IE,uEAAA;EDqJA,gBAAA;AN5JJ;;AM+JE;ECxJE,0DAAA;EAcF,sBAAA;APhBF;;AM8JE;EC5JE,0DAAA;EAcF,sBAAA;APXF;AM4JI;EACE,gBAAA;AN1JN;;AM8JE;ECpKE,0DAAA;EAcF,sBAAA;APHF;;AM6JE;ECxKE,4DAAA;EAcF,uBAAA;ED4JE,gBAAA;ANzJJ;;AM4JE;EC7KE,0DAAA;EAcF,uBAAA;EDiKE,gBAAA;ANxJJ;;AM2JE;EClLE,0DAAA;EAcF,wBAAA;EDsKE,gBAAA;ANvJJ;;AM0JE;ECvLE,0DAAA;EAcF,sBAAA;ED2KE,gBAAA;ANtJJ;;AQ9FE;ED2DE,0DAAA;EAcF,sBAAA;AP0BF;;ASgDE;;EAGI,iDAAA;EACA,eAAA;EACA,gBAAA;AT9CN;;AUtCE;EACE,iDAAA;AVyCJ;;AWpGE;EACE,iDAAA;AXuGJ;;AWpGE;EAEI,eAAA;EACA,gBAAA;AXsGN;;AWlGE;EACE,eAAA;AXqGJ;;AWlGE;;EAEE,eAAA;AXqGJ;;AY/CE;EACE,iDAAA;AZkDJ;;AY9CE;EACE,iBAAA;AZiDJ;;Aa/DE;EACE,eAAA;EACA,gBAAA;AbkEJ;AahEI;;EAEE,eA7FkB;Ab+JxB;;AchIE;EACE,iDAAA;AdmIJ;;AchIE;EACE,eAAA;EACA,gBAAA;AdmIJ;;AchIE;EACE,eAAA;AdmIJ;;AeeE;EACE,iDAAA;AfZJ;;AeeE;EACE,eAzLsB;Af6K1B;;AeeE;;EAGI,eAAA;EACA,gBAAA;AfbN;;AeiBE;EAEI,eArM6B;EAsM7B,gBAAA;AffN;;AgBhLE;ET0DE,0DAAA;EAcF,sBAAA;AP6GF;;AiBhJE;EAEI,iDAAA;EACA,eAAA;EACA,gBAAA;AjBkJN;;AiB9IE;EVaE,0DAAA;EAcF,sBAAA;APwHF;;AkBjDE;EX5FE,kBAeU;EAdV,gBAeY;EAdZ,kBAeY;EAdZ,iDAeY;EAGd,sBAAA;APgIF;;AkBrDE;EACE,yBAPuB;AlB+D3B;;AkBlDI;;EACE,eAvB2B;EAwB3B,kBAxCU;AlB8FhB;AkBlDI;;EACE,aAAA;EACA,YAAA;AlBqDN;AkBnDM;;EACE,eAAA;EACA,kBAlDQ;AlBwGhB;;AkBjDE;EACE,gBAAA;EAEA,uCAAA;AlBmDJ;;AkB/CI;;EAzEF,6CAAA;EAEA,sBAAA;AlB4HF;AkB7CI;EAjFF,6CAAA;EAEA,sBAAA;AlBgIF;;AkB1CE;EACE,eAAA;EACA,sBApEiB;AlBiHrB;;AkB1CE;EACE,cAAA;AlB6CJ;;AkB1CE;EAGE,iBAhEuB;AlB2G3B;;AkBxCE;EACE,cA/EoB;EAgFpB,0BAzEqB;EA6ErB,gCAAA;AlBwCJ;;AmBnLI;EACE,sBAJqB;AnB0L3B;AmBnLI;EACE,mBAAA;AnBqLN;AmBjLM;;EAxDJ,oFAAA;EAEA,sBAAA;AnB4OF;AmB/KM;EA/DJ,sFAAA;EAEA,sBAAA;AnBgPF;AmB3KM;EAvEJ,sFAAA;EAEA,sBAAA;AnBoPF;AmBxKI;EACE,cAAA;AnB0KN;AmBvKI;EAGE,cAzCqB;AnBgN3B;AmBpKI;EACE,0BAjDmB;EAqDnB,gCAAA;AnBmKN;;AmB7JE;EAGM;;IA3FN,6CAAA;EnB2PA;EmBzJM;IAlGN,6CAAA;EnB8PA;EmBpJM;IA1GN,4CAAA;EnBiQA;AACF;AoB/OI;EACE,0BAAA;ApBiPN;AoB9OI;EACE,cAAA;EACA,kBAT2B;ApByPjC;AoB5OM;;EAnCJ,6CAAA;EAEA,sBAAA;ApBkRF;AoBxOM;EA5CJ,6CAAA;EAEA,sBAAA;ApBsRF;;AqBjOI;EACE,oBAAA;ArBoON;AqBjOI;EACE,cAAA;EACA,mBAT8B;ArB4OpC;AqB/NM;;EA1CJ,6CAAA;EAEA,sBAAA;ArB4QF;AqB3NM;EAnDJ,6CAAA;EAEA,sBAAA;ArBgRF;;AsBpVE;;EAGE,eAAA;AtBsVJ;AuB1VE;;EARA,mBAAA;EACA,gBAAA;EACA,uBAAA;EAQE,cAAA;EACA,sBAAA;AvB+VJ;AuB5VI;;EACE,eDJwB;AtBmW9B;;AwBpSE;EACE,qBAAA;AxBuSJ;;AyBrUE;EAEI,iDAAA;EACA,eAAA;EACA,gBAAA;AzBuUN;;A0B9UE;;EAGI,iDAAA;EACA,eAAA;A1BgVN;;A2BxTE;EACE,iDAAA;A3B2TJ;;A4B7TE;EACE,iDAAA;A5BgUJ;;A4B7TE;EACE,eAAA;A5BgUJ;;A6B9TE;EACE,iDAAA;A7BiUJ;;A8BlOE;EAEI,iDAAA;EACA,eAAA;EACA,gBAAA;A9BoON;;A+BnSE;EACE,iDAAA;A/BsSJ;;A+BnSE;EAEI,eAAA;EACA,gBAAA;A/BqSN;;A+BjSE;EACE,mBAAA;A/BoSJ;;A+BjSE;EACE,eAAA;A/BoSJ;;A+BjSE;EAEI,eAAA;EACA,gBAAA;A/BmSN;;AgC1RE;EACE,iDAAA;AhC6RJ;;AgC1RE;EAEI,iDAAA;EACA,eAAA;EACA,gBAAA;AhC4RN;;AiC9WE;;;;;;;E1BOE,0DAAA;EAcF,sBAAA;E0BbE,SAAA;AjCkXJ;;AkCzaE;EACE,iDAAA;EACA,eArBQ;EAsBR,gBArBe;EAsBf,mBAtBe;AlCkcnB;;AkCzaE;EACE,eAvBgB;EAwBhB,gBAvBuB;EAwBvB,mBAxBuB;AlCoc3B;;AmC7ZE;EACE,iDAHY;AnCmahB;;AmC7ZE;EACE,iDAPY;AnCuahB;;AmC3ZI;EACE,eAAA;AnC8ZN;AuBjdE;EARA,mBAAA;EACA,gBAAA;EACA,uBAAA;EAQE,cAAA;EACA,sBAAA;AvBqdJ;AuBldI;EACE,eY6C0B;AnCuahC;AmCpaI;EACE,eAAA;AnCsaN;AuB9dE;EARA,mBAAA;EACA,gBAAA;EACA,uBAAA;EAQE,cAAA;EACA,sBAAA;AvBkeJ;AuB/dI;EACE,eYkD0B;AnC+ahC;AmC5aI;EACE,iDAAA;EACA,eAAA;EACA,gBAAA;AnC8aN;;AmCxaI;EACE,eAAA;AnC2aN;AuBjfE;EARA,mBAAA;EACA,gBAAA;EACA,uBAAA;EAQE,cAAA;EACA,sBAAA;AvBqfJ;AuBlfI;EACE,eYgE0B;AnCobhC;AmCjbI;EACE,eAAA;AnCmbN;AuB9fE;EARA,mBAAA;EACA,gBAAA;EACA,uBAAA;EAQE,cAAA;EACA,sBAAA;AvBkgBJ;AuB/fI;EACE,eYqE0B;AnC4bhC;AmCzbI;EACE,iDA1CU;EA2CV,eAAA;EACA,gBAAA;AnC2bN;;AoCpeE;EAEI,iDAAA;EACA,eAAA;ApCseN;;AqCxgBE;E9B2DE,0DAAA;EAcF,sBAAA;APocF;;AsCrgBE;EAEI,iDAAA;EACA,eAAA;AtCugBN;;AsCngBE;EACE,cAAA;EAEE,oBAAA;EACA,kBAAA;EACA,gBAAA;AtCqgBN;;AuCrhBE;EACE,iDAAA;AvCwhBJ;;AuCrhBE;;EAEE,gBAAA;EACA,eAAA;AvCwhBJ;;AwCnjBE;EACE,gBAAA;EAIA,kBAAA;AxCmjBJ;AwC5iBI;EACE,wBAAA;AxC8iBN;;AwC1iBE;EACE,iBAAA;AxC6iBJ;;AwC1iBE;EACE,kBAAA;EACA,kBAAA;EACA,oBAAA;EAEA,6DAAA;EACA,mBAAA;AxC4iBJ;AyCriBI;EDHE,aAAA;AxC2iBN;;AyC5kBE;EACE,SAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,UAAA;EACA,kBAAA;EACA,UAAA;EAIA,mBAAA;EAGA,UAAA;EAGA,wBAAA;EACA,qBAAA;AzCwkBJ;;A0C9kBE;EAEE,oBAAA;EAGA,MAAA;EACA,OAAA;EACA,YAAA;EACA,WAAA;A1C8kBJ;;A0C1kBE;EACE,eAAA;EACA,aA3BwB;A1CwmB5B;A0C3kBI;EAGE,aAAA;A1C2kBN;;A0CnkBE;EACE,aAAA;EACA,kBAAA;EACA,aA1Cc;A1CgnBlB;;A0ClkBE;EAGE,kBAAA;EACA,oBAAA;EACA,sBAAA;EACA,aApDc;EAwDd,aAAA;EACA,eAAA;EACA,gBAAA;A1CgkBJ;;A0C7jBE;EAEE,kBAAA;EACA,MAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;EAEA,aApEuB;EAqEvB,oBAAA;EACA,wCAAA;EACA,0DAAA;EACA,UAAA;A1C8jBJ;A0C5jBI;EACE,UAAA;A1C8jBN;A0CzjBM;EAGE,YAAA;A1CyjBR;;A0CpjBE;EACE,+BAtFqB;A1C6oBzB;;A0C/iBI;EACE,UAAA;A1CkjBN;;A0C5iBE;EACE,kBAAA;EACA,aA3Gc;EAgHd,aAAA;EAIA,sBAAA;EAGA,cAAA;EACA,eAAA;A1CsiBJ;;A0CliBE;EACE,eAAA;EAKA,WAAA;EAKA,kBAAA;A1C6hBJ;;A2CpqBE;EACE,YAAA;A3CuqBJ;;A2CjqBE;EAyCA,yBAAA;EACA,kCAAA;EAxCE,uBAAA;EACA,2BAAA;A3CqqBJ;;A2C5pBE;EA6BA,yBAAA;EACA,kCAAA;EA5BE,oBAAA;A3CgqBJ;;A2CtpBE;EAA0C,IAAA;A3C0pB5C;A2CzpBE;EAAwC,IAAA;A3C4pB1C;A2C1pBE;EAEE,+CAAA;A3C2pBJ;;A2CxpBE;EAEE,6CAAA;A3C0pBJ;;A4C5mBE;EACE,kBAAA;A5C+mBJ;;A6C5qBE;EACE,kBAAA;A7C+qBJ;;A8CpsBE;EAII,oCAAA;A9CosBN;;AoCtsBE;EACE,0BAAA;ApCysBJ;AoCvsBI;EAEE,+BAAA;ApCwsBN;AoCpsBI;EACE,+BAAA;ApCssBN;AoCnsBI;EACE,+BAAA;EACA,0BAAA;ApCqsBN;AoClsBI;EACE,0BAAA;ApCosBN;;AoChsBE;EACE,cAAA;ApCmsBJ;;AoChsBE;EACE,cAAA;ApCmsBJ;;AoChsBE;EACE,cAAA;ApCmsBJ;;AqCvuBE;EACE,0BAAA;ArC0uBJ;;AqCvuBE;EACE,0BAAA;ArC0uBJ;;A+CruBE;EACE,0BAAA;A/CwuBJ;A+CtuBI;EACE,cAAA;A/CwuBN;;A+CpuBE;EACE,cAZe;A/CmvBnB;;A+CpuBE;;EAEE,mBAAA;A/CuuBJ;;A+C/tBE;;;;EAIE,mBAAA;A/CkuBJ;;A+C/tBE;;EAEE,mBAAA;A/CkuBJ;;A+C7tBI;;EACE,mBAxCa;A/CywBnB;;AgD1wBE;EAIE,yBAAA;EACA,0BAAA;AhD0wBJ;;AgDnwBI;ECkIF,wHAAA;AjDqoBF;;AgDvwBI;ECkIF,yHAAA;AjDyoBF;;AgD3wBI;ECkIF,yHAAA;AjD6oBF;;AgD/wBI;ECkIF,yHAAA;AjDipBF;;AgDnxBI;ECkIF,0HAAA;AjDqpBF;;AgDvxBI;ECkIF,0HAAA;AjDypBF;;AgD3xBI;ECkIF,2HAAA;AjD6pBF;;AgD/xBI;ECkIF,2HAAA;AjDiqBF;;AgDnyBI;ECkIF,2HAAA;AjDqqBF;;AgDvyBI;ECkIF,2HAAA;AjDyqBF;;AgD3yBI;ECkIF,4HAAA;AjD6qBF;;AgD/yBI;ECkIF,4HAAA;AjDirBF;;AgDnzBI;ECkIF,4HAAA;AjDqrBF;;AgDvzBI;ECkIF,4HAAA;AjDyrBF;;AgD3zBI;ECkIF,4HAAA;AjD6rBF;;AgD/zBI;ECkIF,4HAAA;AjDisBF;;AgDn0BI;ECkIF,6HAAA;AjDqsBF;;AgDv0BI;ECkIF,6HAAA;AjDysBF;;AgD30BI;ECkIF,6HAAA;AjD6sBF;;AgD/0BI;ECkIF,6HAAA;AjDitBF;;AgDn1BI;ECkIF,8HAAA;AjDqtBF;;AgDv1BI;ECkIF,8HAAA;AjDytBF;;AgD31BI;ECkIF,8HAAA;AjD6tBF;;AgD/1BI;ECkIF,8HAAA;AjDiuBF;;AgDn2BI;ECkIF,8HAAA;AjDquBF;;AgDh2BI;EACE,aAAA;AhDm2BN;;AkD73BE;EAEE,iBAAA;EACA,0BAAA;AlD+3BJ;AiDnuBE;EAXA,0HAAA;AjDivBF;AkD33BI;EACE,iBAAA;AlD63BN;AkD33BM;EACE,0BAAA;AlD63BR;;AKhzBE;EACE,kBAAA;ALmzBJ;;AK/yBI;EACE,aAAA;ALkzBN;;AK9yBE;EACE,kBAAA;EACA,kBAAA;EACA,qBAAA;EACA,kBAAA;EACA,uCAAA;EACA,qBAAA;EACA,gBAAA;EACA,mBAAA;EACA,uBAAA;EACA,oBAAA;ALizBJ;;AK9yBE;;EAEE,gBAAA;ALizBJ;;AK5yBE;EAEE,eAAA;AL8yBJ;;AK35BE;EACE,WATS;EAUT,YAVS;EAWT,iBAXS;ALy6Bb;AK15BI;EACE,SAAA;AL45BN;AKv5BI;EACE,YAAA;ALy5BN;AKp5BI;EACE,WAAA;ALs5BN;AKj5BI;EACE,UAAA;EACA,YAAA;ALm5BN;AK94BI;EACE,YAAA;ALg5BN;AK34BI;EACE,WAAA;EACA,WAAA;AL64BN;AKv4BM;EACE,UAAA;ALy4BR;AKp4BM;EACE,UAAA;EACA,WAAA;ALs4BR;AKj4BM;EACE,WAAA;ALm4BR;AK93BM;EACE,WAAA;EACA,UAAA;ALg4BR;;AKn8BE;EACE,WAVW;EAWX,YAXW;EAYX,iBAZW;ALk9Bf;AKl8BI;EACE,UAAA;ALo8BN;AK/7BI;EACE,aAAA;ALi8BN;AK57BI;EACE,WAAA;AL87BN;AKz7BI;EACE,UAAA;EACA,YAAA;AL27BN;AKt7BI;EACE,YAAA;ALw7BN;AKn7BI;EACE,WAAA;EACA,WAAA;ALq7BN;AK/6BM;EACE,WAAA;ALi7BR;AK56BM;EACE,UAAA;EACA,YAAA;AL86BR;AKz6BM;EACE,YAAA;AL26BR;AKt6BM;EACE,WAAA;EACA,WAAA;ALw6BR;;AK3+BE;EACE,WARS;EAST,YATS;EAUT,iBAVS;ALw/Bb;AK1+BI;EACE,UAAA;AL4+BN;AKv+BI;EACE,aAAA;ALy+BN;AKp+BI;EACE,WAAA;ALs+BN;AKj+BI;EACE,UAAA;EACA,YAAA;ALm+BN;AK99BI;EACE,YAAA;ALg+BN;AK39BI;EACE,WAAA;EACA,WAAA;AL69BN;AKv9BM;EACE,WAAA;ALy9BR;AKp9BM;EACE,UAAA;EACA,YAAA;ALs9BR;AKj9BM;EACE,YAAA;ALm9BR;AK98BM;EACE,WAAA;EACA,WAAA;ALg9BR;;AK94BE;EACE,YAAA;EACA,mBAAA;ALi5BJ;AyCxgCI;EpC0HE,kBAAA;EACA,gBAAA;ALi5BN;;AK54BI;EACE,mBAAA;EACA,YAAA;AL+4BN;;AK14BI;EACE,YAAA;EACA,mBAAA;AL64BN;;AKx4BI;EAWI,mBAAA;EAMF,0BAAA;AL43BN;;AQvjCE;EyCkJA,6HAAA;EzChJE,iBAAA;EACA,0BAAA;AR0jCJ;;ASx+BE;EAKE,cAAA;EACA,uBAAA;ATu+BJ;ASvgCE;EACE,cAAA;ATygCJ;ASvgCE;EACE,cAAA;ATygCJ;ASvgCE;EACE,cAAA;ATygCJ;ASrgCI;EAEE,0BAAA;ATsgCN;ASzkCE;EACE,yBAAA;AT2kCJ;ASxkCE;EACE,yBAAA;AT0kCJ;ASvkCE;EACE,yBAAA;ATykCJ;AStkCE;EACE,6BAAA;ATwkCJ;ASv/BI;EACE,YAxGY;EAyGZ,8BAAA;ATy/BN;;ASr/BE;EACE,iBAAA;ATw/BJ;;ASn/BE;EACE,iCAAA;ATs/BJ;;ASn/BE;EAEE,0BAAA;EACA,uBAAA;ATq/BJ;AShjCE;EACE,YAAA;ATkjCJ;AShjCE;EACE,YAAA;ATkjCJ;AShjCE;EACE,YAAA;ATkjCJ;AS9iCI;EAEE,0BAAA;AT+iCN;AS5jCE;EACE,yBAAA;AT8jCJ;AS5jCE;EACE,yBAAA;AT8jCJ;AS5jCE;EACE,yBAAA;AT8jCJ;AS1jCI;EAEE,qCAAA;AT2jCN;AS7lCE;EAXA,0CADmB;AT4mCrB;AS5lCE;EAfA,0CADmB;AT+mCrB;AS3lCE;EAnBA,0CADmB;ATknCrB;;AiD/+BE;EAXA,wHAAA;AjD8/BF;;AiDn/BE;EAXA,yHAAA;AjDkgCF;AiDv/BE;EAXA,2HAAA;AjDqgCF;AiD1/BE;EAXA,wHAAA;AjDwgCF;;AiD7/BE;EAXA,2HAAA;AjD4gCF;AiDjgCE;EAXA,4HAAA;AjD+gCF;AiDpgCE;EAXA,wHAAA;AjDkhCF;;AUjqCE;;EuC+IA,yHAAA;AjDuhCF;;AUjqCE;;EAEE,gBAAA;AVoqCJ;;AUjqCE;EACE,0BAAA;AVoqCJ;AUlqCI;EACE,qCAAA;AVoqCN;;AUhqCE;EACE,0BAAA;EACA,iBAAA;AVmqCJ;AUjqCI;EACE,uBAAA;AVmqCN;;AU/pCE;EACE,0CAAA;AVkqCJ;;AU/pCE;EACE,iBAAA;EACA,2CAAA;AVkqCJ;;AU9pCI;EACE,iBAAA;EACA,kBAAA;EACA,yCAAA;AViqCN;;AU7pCE;EACE,yBAAA;EACA,0BAAA;AVgqCJ;AU9pCI;EACE,0BAAA;AVgqCN;;AU5pCE;EACE,0BAAA;EACA,yBAAA;AV+pCJ;AU7pCI;EACE,iBAAA;AV+pCN;AU5pCI;EACE,yBAAA;AV8pCN;;AU1pCE;;EAEE,qCAAA;AV6pCJ;;AU3oCI;EACE,iBALc;AVmpCpB;;AWvuCE;EAEE,iBAAA;EACA,0BAAA;AXyuCJ;AiDhlCE;EAXA,yHAAA;AjD8lCF;AiDnlCE;EAXA,wHAAA;AjDimCF;;AWvuCE;EACE,0BAAA;AX0uCJ;;AYxuCE;EACE,iCAAA;AZ2uCJ;;AYxuCE;EACE,aAdoB;AZyvCxB;;AYxuCE;EAGE,0BAAA;AZyuCJ;;AYtuCE;EACE,yBAxBoB;AZiwCxB;;AYruCI;EACE,yBAAA;AZwuCN;AYruCI;EACE,yBAAA;AZuuCN;AYpuCI;EACE,yBAAA;AZsuCN;;AY/tCM;EACE,yBAtCW;AZwwCnB;AY7tCM;EACE,qBA5CW;AZ2wCnB;AY3tCI;EACE,0BAAA;AZ6tCN;;AYvtCE;EACE,uBAAA;AZ0tCJ;;AYrtCI;;EACE,mBAAA;AZytCN;AYttCI;;EACE,mBAAA;AZytCN;AYttCI;;EACE,mBAAA;AZytCN;;AajwCE;EA5CA,yBAyCwB;EAxCxB,0BAyCwB;AbwwC1B;Aa/yCE;EACE,0BAsCsB;EArCtB,YAAA;AbizCJ;AatwCM;EoCmGJ,yHAAA;AjDsqCF;AarwCM;EACE,aAAA;AbuwCR;AanwCI;EACE,YAAA;AbqwCN;AalwCI;EACE,iBAAA;AbowCN;;Aa/vCI;EAnEF,yBAyBE;EAxBF,YAuBwB;Ab+yC1B;Aap0CE;EACE,YAoBsB;EAnBtB,YAAA;Abs0CJ;AahzCE;EAVA,0CADmB;Ab8zCrB;AavwCI;EAvEF,yBAyBE;EAxBF,YAuBwB;Ab0zC1B;Aa/0CE;EACE,YAoBsB;EAnBtB,YAAA;Abi1CJ;Aa3zCE;EAVA,0CADmB;Aby0CrB;Aa9wCI;EA3EF,yBAyBE;EAxBF,YAuBwB;Abq0C1B;Aa11CE;EACE,YAoBsB;EAnBtB,YAAA;Ab41CJ;Aat0CE;EAVA,0CADmB;Abo1CrB;;Acp2CE;EACE,iBAAA;Adu2CJ;;Acp2CE;;;;EAIE,mBAAA;Adu2CJ;;Acp2CE;;EAEE,wCAAA;Adu2CJ;;Acp2CE;EACE,0BAAA;Adu2CJ;;Acp2CE;EACE,0BAAA;Adu2CJ;;AexzCE;EACE,yBAAA;Af2zCJ;;AetzCE;;;EAGE,0BAAA;AfyzCJ;;AetzCE;EACE,+BAAA;AfyzCJ;;AetzCE;;EAEE,0BAAA;AfyzCJ;;AetzCE;;EAEE,0BAAA;EACA,yBAAA;AfyzCJ;;Aer2CE;EAiDI,0BA/Ba;Afu1CnB;;AepzCE;EACE,0BApCe;Af21CnB;;AepzCE;EAOI,0BAAA;AfizCN;;Aej3CE;EA2EI,iCAAA;Af0yCN;;Aer3CE;EAoFM,iCAAA;AfqyCR;;AentCE;EACE,kCA9MA;Afo6CJ;;AentCE;;EAEE,kCAViB;AfguCrB;;AentCE;;EAEE,6FAAA;AfstCJ;;AentCE;;EAEE,4FAAA;AfstCJ;;AentCE;;EAEE,mBAxBc;Af8uClB;;AentCE;;EAEE,mBA5BuB;AfkvC3B;;Ae37CE;EACE,yBAAA;EACA,YAAA;Af87CJ;;Ae37CE;EAII,wCAAA;Af27CN;;Ael7CE;EACE,iCAAA;Afq7CJ;;Aen6CE;;EASI,wCAAA;Af+5CN;;Aej7CE;EASA;IASI,wCAAA;Efo6CJ;AACF;Ae50CE;EkCCA,0HAAA;ElCCE,uBAAA;EACA,0BAAA;Af80CJ;Ae7wCE;EACE,kCA9MA;Af69CJ;Ae5wCE;;EAEE,kCAViB;AfwxCrB;Ae3wCE;;EAEE,6FAAA;Af6wCJ;Ae1wCE;;EAEE,4FAAA;Af4wCJ;AezwCE;;EAEE,mBAxBc;AfmyClB;AexwCE;;EAEE,mBA5BuB;AfsyC3B;Ae/+CE;EACE,yBAAA;EACA,YAAA;Afi/CJ;Ae9+CE;EAII,wCAAA;Af6+CN;Aep+CE;EACE,iCAAA;Afs+CJ;Aep9CE;;EASI,wCAAA;Af+8CN;Aej+CE;EASA;IASI,wCAAA;Efm9CJ;AACF;AevzCE;EACE,kCA9MA;AfugDJ;AetzCE;;EAEE,kCAViB;Afk0CrB;AerzCE;;EAEE,6FAAA;AfuzCJ;AepzCE;;EAEE,4FAAA;AfszCJ;AenzCE;;EAEE,mBAxBc;Af60ClB;AelzCE;;EAEE,mBA5BuB;Afg1C3B;AezhDE;EACE,yBAAA;EACA,YAAA;Af2hDJ;AexhDE;EAII,wCAAA;AfuhDN;Ae9gDE;EACE,iCAAA;AfghDJ;Ae9/CE;;EASI,wCAAA;Afy/CN;Ae3gDE;EASA;IASI,wCAAA;Ef6/CJ;AACF;;Aev5CE;EkCbA,8HAAA;AjDw6CF;;Aev5CE;EACE,cAAA;Af05CJ;Aex5CI;EACE,cAAA;Af05CN;Aev5CI;EACE,cAAA;Afy5CN;;Aer5CE;EACE,0BAAA;Afw5CJ;;AgBvkDE;EiCiJA,8HAAA;EjC/IE,iBAAA;EACA,0BAAA;AhB0kDJ;;AmDllDE;EACE,qCAAA;AnDqlDJ;;AmDllDE;EACE,uCAAA;AnDqlDJ;;AiBnlDE;EAEE,iBAAA;EACA,0BAAA;AjBqlDJ;AiD97CE;EAXA,yHAAA;AjD48CF;;AiBrlDE;EACE,qCAAA;AjBwlDJ;;AoDxmDM;EnCoBF,+BAAA;AjBwlDJ;;AiBnlDE;EACE;IAEE,iBAAA;EjBqlDJ;AACF;AiBllDE;EACE,0BAAA;AjBolDJ;;AiBjlDE;;EAEE,0BAAA;AjBolDJ;;AiBjlDE;EACE,0BAAA;AjBolDJ;AiBllDI;;EAEE,cAAA;AjBolDN;;AiBvjDI;EACE,YALe;AjB+jDrB;AiBxjDM;EACE,YAVY;AjBokDpB;;AkB5mDE;EACE,yBAZA;AlB2nDJ;;AkB5mDE;EACE,yBAhBA;AlB+nDJ;;AkB5mDE;EACE,cAnBoB;AlBkoDxB;AkB7mDI;EACE,cAhBqB;AlB+nD3B;AkB5mDI;EACE,cAnBmB;AlBioDzB;;AkB1mDE;EACE,cA9BqB;AlB2oDzB;;AkB1mDE;EACE,qCA9BA;AlB2oDJ;;AkBzmDI;EACE,yBAhCsB;AlB4oD5B;AkB1mDM;EACE,yBArCmB;AlBipD3B;AkBzmDM;EACE,yBAxCiB;AlBmpDzB;;AkBrmDI;EACE,cA9CsB;AlBspD5B;AkBrmDI;EACE,cApDqB;AlB2pD3B;AkBpmDI;EACE,cAvDmB;AlB6pDzB;;AkB9lDI;EACE,cAhEmB;AlBiqDzB;AkB/lDM;;EAEE,cApEiB;AlBqqDzB;AkB7lDI;;EAEE,yBA1EmB;AlByqDzB;;AkB3lDE;EACE,cA/EqB;AlB6qDzB;;AmBxrDI;EACE,0BANU;AnBisDhB;AmBxrDI;EACE,0BAVU;AnBosDhB;AmBvrDI;EACE,qCAZF;AnBqsDJ;AmBtrDI;EkCzBF,4GAAA;EACA,yBAAA;EACA,2BAAA;ArDktDF;;AsD5sDI;EACE,qCAJF;AtDmtDJ;AsD5sDI;EDZF,4GAAA;EACA,yBAAA;EACA,2BAAA;ArD2tDF;;AoB7sDI;EACE,qCATF;ApBytDJ;AoB7sDI;EACE,qCAXF;ApB0tDJ;AoB5sDI;EACE,qCAbF;ApB2tDJ;AoB1sDM;EACE,0BAjBiB;ApB6tDzB;AoBzsDM;EACE,6BAAA;ApB2sDR;;AqBvtDI;EACE,0BAXF;ArBquDJ;AqBvtDI;EACE,0BAbF;ArBsuDJ;AqBrtDM;EACE,cAjBkB;ArBwuD1B;AqBptDM;EACE,cApBiB;ArB0uDzB;AqBntDM;EACE,cAvBe;ArB4uDvB;AqB/sDM;EACE,cA9Be;ArB+uDvB;AqB5sDM;EACE,0BA3CiB;ArByvDzB;AqB3sDM;EACE,0BAtCJ;ArBmvDJ;;AuDjwDI;EACE,cAAA;AvDowDN;AuDjwDI;EACE,cAAA;AvDmwDN;AuDhwDI;EACE,cAAA;AvDkwDN;;AwBtwDE;EACE,0BAAA;AxBywDJ;;AwBtwDE;;EAEE,0BAAA;AxBywDJ;;AwBtwDE;EACE,oBAAA;AxBywDJ;AwD5xDE;EhCsBI,0BAAA;AxBywDN;AwD3xDE;EhCkBI,0BAAA;AxB4wDN;AwD1xDE;EhCcI,0BAAA;AxB+wDN;AwDvxDE;EhCQI,0BAAA;AxBkxDN;;AwB7vDE;EACE,oBAAA;AxBgwDJ;;AwB7vDE;;EAEE,oBAAA;AxBgwDJ;;AwB7vDE;EACE,cAAA;AxBgwDJ;;AmChzDI;EACE,0BAAA;AnCmzDN;AmChzDI;EACE,0BAAA;AnCkzDN;AmC/yDI;EACE,0BAAA;AnCizDN;AmC9yDI;EACE,yBAAA;EACA,0BAAA;AnCgzDN;;AmCzyDI;;;;;EACE,+BAAA;AnCgzDN;;AmC3yDI;EACE,+BAAA;AnC8yDN;;AyB30DE;EAEE,iBAAA;AzB60DJ;AiDnrDE;EAXA,0HAAA;AjDisDF;;AyB70DE;EACE,uBAAA;EACA,0BAAA;AzBg1DJ;AyB70DM;;;EAGE,0BAAA;AzB+0DR;;AyB10DE;;EAEE,0BAAA;AzB60DJ;;AyBt0DI;;;;EACE,+BAAA;AzB40DN;;A0Bx2DE;EACE,iBAAA;A1B22DJ;;A0Bx2DE;;EAEE,0BAAA;A1B22DJ;;A0Bx2DE;;EAEE,yCAAA;EACA,2CAAA;A1B22DJ;;A0Bx2DE;;EAEE,yCAAA;A1B22DJ;;A0Bv2DI;;;;EAIE,iCAAA;A1B02DN;;A0Bn1DI;EACE,gBALK;A1B21DX;;AyD53DE;EACE,aAAA;AzD+3DJ;;AyD53DE;EACE,yBAAA;AzD+3DJ;;AyD53DE;EACE,yBAAA;AzD+3DJ;;AyD33DI;EACE,aAAA;AzD83DN;AyD33DI;EACE,yBAAA;AzD63DN;AyD13DI;EACE,yBAAA;AzD43DN;;AyDv3DI;EACE,aAAA;AzD03DN;AyDv3DI;EACE,yBAAA;AzDy3DN;AyDt3DI;EACE,yBAAA;AzDw3DN;;A0Dz6DI;EACE,eAAA;A1D46DN;A0Dz6DI;EACE,eAAA;A1D26DN;A0Dx6DI;EACE,eAAA;A1D06DN;;A2Bn6DE;EACE,iCAAA;A3Bs6DJ;;A2B37DE;EACE,qBAAA;A3B87DJ;A2B37DE;;EAIE,yBAAA;A3B27DJ;A2Bn8DE;EACE,qBAAA;A3Bq8DJ;A2Bl8DE;;EAIE,yBAAA;A3Bk8DJ;A2B18DE;EACE,qBAAA;A3B48DJ;A2Bz8DE;;EAIE,yBAAA;A3By8DJ;A2Bx6DM;;EAEE,iCAAA;A3B06DR;A2Bv6DM;;EAEE,qCAAA;A3By6DR;A2Bt6DM;EACE,0BAAA;A3Bw6DR;A2Bl6DI;EACE,uBAAA;A3Bo6DN;;A4Br9DE;EACE,0BAAA;A5Bw9DJ;;A4Br9DE;EACE,0BAAA;A5Bw9DJ;;A4Br9DE;EACE,0BAAA;A5Bw9DJ;;A4Br9DE;EACE,0BAAA;A5Bw9DJ;;A4Br9DE;EACE,iBAAA;A5Bw9DJ;AiDj1DE;EAXA,0HAAA;AjD+1DF;A4Bx9DI;EACE,+BAAA;A5B09DN;;A4Bp9DM;EACE,cAAA;A5Bu9DR;A4Bp9DM;EACE,cAAA;A5Bs9DR;A4Bn9DM;EACE,cAAA;A5Bq9DR;A4Bj9DI;EACE,cAAA;A5Bm9DN;A4Bh9DI;EACE,0BAAA;A5Bk9DN;;A2D5/DE;EACE,yBALmC;EAMnC,0BAAA;A3D+/DJ;;A2D5/DE;EACE,uBAXwB;EAYxB,0BAAA;A3D+/DJ;A2D7/DI;EACE,uBAb2B;A3D4gEjC;A2D5/DI;EV6HF,6HAAA;AjDk4DF;;A2Dx/DE;EACE,2CAvBmB;A3DkhEvB;A2Dz/DI;EACE,0CA1BiB;EA2BjB,kBAAA;A3D2/DN;;A2Dv/DE;EACE,0CAhCmB;EAiCnB,kBAAA;A3D0/DJ;A2Dx/DI;EACE,iBAAA;EACA,2CArCiB;A3D+hEvB;;A2Dt/DE;EAQI,oCAAA;A3Dk/DN;;A6B3iEI;EACE,yBAAA;A7B8iEN;A6B3iEI;EAGE,yCAAA;A7B2iEN;A6BxiEI;EAGE,yBAAA;A7BwiEN;A6BrjEI;EACE,yBAAA;A7BujEN;A6BpjEI;EAGE,yCAAA;A7BojEN;A6BjjEI;EAGE,yBAAA;A7BijEN;A6B9jEI;EACE,yBAAA;A7BgkEN;A6B7jEI;EAGE,yCAAA;A7B6jEN;A6B1jEI;EAGE,yBAAA;A7B0jEN;A6BrhEI;EAGE,uBAhBqB;A7BqiE3B;;A6BjhEE;EoB2FA,yHAAA;EpBzFE,yBAAA;A7BohEJ;;A6BjhEE;EACE,qCA3BoB;A7B+iExB;;A8B1iEE;EACE,qCAbqB;A9B0jEzB;;A8BzlEE;;;EAGE,yBAAA;A9B4lEJ;A8BzlEE;EACE,YAAA;A9B2lEJ;A8BxlEE;EAGE,wCADQ;A9BylEZ;A8BrmEE;;;EAGE,yBAAA;A9BumEJ;A8BpmEE;EACE,YAAA;A9BsmEJ;A8BnmEE;EAGE,wCADQ;A9BomEZ;A8BhnEE;;;EAGE,yBAAA;A9BknEJ;A8B/mEE;EACE,YAAA;A9BinEJ;A8B9mEE;EAGE,wCADQ;A9B+mEZ;;A8B5jEI;;EACE,qCAhC2B;A9BgmEjC;;A8B3jEI;;;EAGE,qCAvCwB;A9BqmE9B;A8B1jEM;EACE,qCA5CsB;A9BwmE9B;;A8BtjEI;EAGE,qCADQ;A9BwjEd;A8B7iEM;;EAEE,qCA/DJ;A9B8mEJ;A8B3iEQ;;EAEE,qCAnEN;A9BgnEJ;A8BviEM;EACE,iCAhFiB;EAiFjB,6BAAA;A9ByiER;A8BpiEQ;EACE,iCAtFuB;A9B4nEjC;A8BniEQ;EACE,iCAzFoB;A9B8nE9B;;A8B/hEE;EACE,gCAzFA;A9B2nEJ;;A8BzhEE;EACE,6HAAA;EAIA,mIAAA;A9ByhEJ;;A8B/gEE;EACE,8HAAA;A9BkhEJ;;A+BlqEI;EAIE,qCAAA;A/BkqEN;A+B/pEI;EACE,eAAA;A/BiqEN;A+B3pEI;EACE;IACE,gBAAA;E/B6pEN;AACF;A+B1pEI;;EAIE,0BAAA;A/B0pEN;A+BvpEI;EAGE,qCAAA;EACA,YAAA;A/BupEN;A+BppEI;;;EAGE,yBAAA;EACA,YAAA;A/BspEN;A+BlpEM;EACE,YAAA;A/BopER;A+BjpEM;;;EAGE,yBAAA;EACA,YAAA;A/BmpER;A+B9oEM;EACE,YAAA;A/BgpER;A+B7oEM;;;EAGE,yBAAA;EACA,YAAA;A/B+oER;A+B3oEI;EACE,6BAAA;EACA,cAAA;A/B6oEN;A+B1oEI;EACE,0BAAA;A/B4oEN;A+BzoEI;EACE,cAAA;A/B2oEN;;A+BvoEE;EACE,uBAAA;A/B0oEJ;;A+BvoEE;EACE,sCAAA;A/B0oEJ;;A+BvoEE;;;EAGE,qCAAA;A/B0oEJ;;A+BjmEI;EACE,YANK;A/B0mEX;;A+BjmEI;;EAEE,kBAAA;A/BomEN;;A+B/lEI;EACE,UAAA;EACA,aAAA;A/BkmEN;;A+B7lEM;EACE,SAAA;A/BgmER;;A+B3lEI;EACE,SAAA;A/B8lEN;;A4DnwEE;EAYI,cAAA;A5D2vEN;;AgCnwEE;;EAEE,4CAJc;AhC0wElB;;AgClwEI;;EAEE,yCAVY;EAWZ,mBAAA;AhCqwEN;;AgCjwEE;EACE,0BAAA;AhCowEJ;AgClwEI;EACE,0BAAA;AhCowEN;;AgChwEE;EACE,iCAAA;AhCmwEJ;;AgChwEE;EACE,iCAAA;AhCmwEJ;;AgC/vEE;;EAEE,mBAAA;EACA,gBAAA;AhCkwEJ;;AgCptEM;;;;;EACE,0CAAA;AhC2tER;AgCtuEE;EACE,yBAAA;AhCwuEJ;AgCzuEE;EACE,uBAAA;AhC2uEJ;AgCluEM;;;;;EACE,0CAAA;AhCwuER;AgCnvEE;EACE,yBAAA;AhCqvEJ;AgCtvEE;EACE,uBAAA;AhCwvEJ;AgC/uEM;;;;;EACE,0CAAA;AhCqvER;AgChwEE;EACE,yBAAA;AhCkwEJ;AgCnwEE;EACE,uBAAA;AhCqwEJ;AgC5vEM;;;;;EACE,0CAAA;AhCkwER;AgCvvEE;EACE,yBAAA;AhCyvEJ;AgCrvEE;EACE,YAAA;AhCuvEJ;AgCrvEI;EACE,+BAAA;AhCuvEN;AgClvEE;;;;;;;EAIE,mBAAA;AhCuvEJ;AgCpvEE;;;EAGE,mBAAA;EACA,YAAA;AhCsvEJ;AgCjvEE;;;;;EAIE,uBAAA;EACA,aAAA;AhCovEJ;AgCnyEM;;;;;EACE,0CAAA;AhCyyER;AgC9xEE;EACE,yBAAA;AhCgyEJ;AgC5xEE;EACE,YAAA;AhC8xEJ;AgC5xEI;EACE,+BAAA;AhC8xEN;AgCzxEE;;;;;;;EAIE,mBAAA;AhC8xEJ;AgC3xEE;;;EAGE,mBAAA;EACA,YAAA;AhC6xEJ;AgCxxEE;;;;;EAIE,uBAAA;EACA,aAAA;AhC2xEJ;AgC10EM;;;;;EACE,0CAAA;AhCg1ER;AgCr0EE;EACE,yBAAA;AhCu0EJ;AgCn0EE;EACE,YAAA;AhCq0EJ;AgCn0EI;EACE,+BAAA;AhCq0EN;AgCh0EE;;;;;;;EAIE,mBAAA;AhCq0EJ;AgCl0EE;;;EAGE,mBAAA;EACA,YAAA;AhCo0EJ;AgC/zEE;;;;;EAIE,uBAAA;EACA,aAAA;AhCk0EJ;;AiC55EE;EACE,sBAAA;EACA,0BAAA;AjC+5EJ;AiC75EI;EApCF,mBAAA;EACA,YAAA;AjCo8EF;AiC75EI;EAxCF,mBAAA;EACA,YAAA;AjCw8EF;AiC75EI;EA5CF,mBAAA;EACA,YAAA;AjC48EF;AiCx8EE;;;EAGE,8BAAA;AjC08EJ;AiCv8EE;;;;;EAKE,cAAA;AjCy8EJ;AiCt8EE;EACE,yBAAA;AjCw8EJ;;AiCr+EE;EACE,gBA6Ee;AjC25EnB;;AiCt+EE;EACE,YA0Ee;AjC+5EnB;;AiCn5EI;EA1FF;IACE,gBA+Ec;EjCk6EhB;;EiC/+EA;IACE,YA4Ec;EjCs6EhB;AACF;AkC9+EE;EACE,iCAAA;AlCg/EJ;;AuCv/EE;EACE,iBAAA;AvC0/EJ;;AuCv/EE;;EAEE,0BAAA;AvC0/EJ;;AuCl+EI;EACE,gBALK;AvC0+EX;;AsCpgFE;EAGE,+BAAA;EACA,mBAAA;EW6IF,2HAAA;AjDy3EF;;AsCjgFE;EACE,cAAA;AtCogFJ;;A6D3/EE;EACE,mDAAA;A7D8/EJ;;A8D1hFE;EAEI,mDAAA;EACA,eAAA;EACA,gBAAA;A9D4hFN;;A8DxhFE;EAEI,mDAAA;EACA,eAAA;EACA,gBAAA;EAGF,iBAAA;A9DwhFJ;;A+DviFE;EAEI,mDAAA;EACA,eAAA;A/DyiFN;;AgE5iFE;EAEI,mDAAA;EACA,eAAA;EACA,gBAAA;EAGF,iBAAA;AhE4iFJ;;AgEziFE;EAEI,mDAAA;EACA,eAAA;AhE2iFN;;AiEtjFI;EAEI,mDAAA;EACA,eAAA;AjEwjFR;AiEpjFI;EAEI,mDAAA;EACA,eAAA;EACA,gBAAA;EAGF,iBAAA;AjEmjFN;AiEhjFI;EAEI,mDAAA;EACA,eAAA;EACA,gBAAA;EAGF,iBAAA;AjE+iFN;;AkEzkFI;EACE,iBAAA;EACA,eAAA;AlE4kFN;;AmEzkFI;;EACE,0BAAA;AnE6kFN;AmE3kFM;;EACE,qCAAA;AnE8kFR;;AmExkFI;EACE,0BAAA;AnE2kFN;;AmEvkFE;EACE,uBAAA;AnE0kFJ;;AmEtkFI;EAEE,qCAAA;AnEwkFN;;AiE7jFE;EACE,yBAAA;AjEgkFJ;;AiE7jFE;EACE,cAAA;AjEgkFJ;AiE9jFI;EACE,eAAA;EACA,gBAAA;AjEgkFN;;AiEtjFI;;;;;;EGsFF,yHAAA;EHnFI,UAAA;AjE6jFN;;AiEljFM;;;;;;;;;;;EAEE,YAAA;AjE8jFR;;AiEvjFI;;EACE,aAAA;EACA,cAAA;EACA,eAAA;AjE2jFN;;AiEvjFE;EGwDA,yHAAA;ApEmgFF;;AiEvjFE;EACE,sBAAA;EACA,0BAAA;EGkDF,yHAAA;ApEygFF;AiExjFI;EACE,mBAAA;AjE0jFN;AiExjFM;;EAEE,YAAA;AjE0jFR;AiEtjFI;EACE,mBAAA;AjEwjFN;AiEtjFM;;EAEE,YAAA;AjEwjFR;AiEpjFI;EACE,mBAAA;AjEsjFN;AiEpjFM;;EAEE,YAAA;AjEsjFR;;AqExqFM;EACE,yBAAA;ArE2qFR;;AqEtqFE;EACE;;GAAA;ArE2qFJ;AqExqFI;EACE,2GAAA;ED+HJ,2HAAA;ApE4iFF;;A8DlqFE;EACE,0BAAA;EACA,4CAAA;EACA,gBAAA;A9DqqFJ;;A8DlqFE;EACE,0BAAA;A9DqqFJ;;A+DrrFI;;;;EAIE,YAAA;A/DwrFN;A+DnrFQ;EAEE,qCAAA;A/DorFV;A+DjrFQ;EACE,0BAAA;A/DmrFV;A+D9qFI;EACE,cAAA;A/DgrFN;A+D5qFM;EACE,cAAA;A/D8qFR;A+D3qFM;EACE,cAAA;A/D6qFR;A+D1qFM;EACE,cAAA;A/D4qFR;A+DzqFM;;EAEE,0BAAA;A/D2qFR;A+DxqFM;EACE,cAAA;A/D0qFR;A+DvqFM;EACE,0BAAA;A/DyqFR;;AgEhtFI;EACE,cAAA;EACA,yCAAA;AhEmtFN;AgEhtFI;EACE,cAAA;EACA,yCAAA;AhEktFN;AgE/sFI;EACE,cAAA;EACA,yCAAA;AhEitFN;;AsErvFE;EACE,uBAHO;AtE2vFX","file":"orange-light-blue.css","sourcesContent":["@charset \"UTF-8\";\n/** Mixin to create distinct classes for fab positions, e.g. \".mat-fab-position-bottom-right\". */\n/* stylelint-disable function-url-quotes, no-duplicate-selectors */\n/*\n*\n* Responsive attributes\n*\n* References:\n* 1) https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex\n* 2) https://css-tricks.com/almanac/properties/f/flex/\n* 3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/\n* 4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items\n* 5) http://godban.com.ua/projects/flexgrid\n*\n*/\n@-moz-document url-prefix() {\n [layout-fill] {\n margin: 0;\n width: 100%;\n min-height: 100%;\n height: 100%;\n }\n}\n/* stylelint-disable selector-class-pattern */\n/* stylelint-enable selector-class-pattern */\n/* stylelint-disable selector-class-pattern */\n/* stylelint-enable selector-class-pattern */\n.mat-badge-content {\n font-weight: 600;\n font-size: 12px;\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n}\n\n.mat-badge-small .mat-badge-content {\n font-size: 9px;\n}\n\n.mat-badge-large .mat-badge-content {\n font-size: 24px;\n}\n\n.mat-h1, .mat-headline, .mat-typography h1 {\n font: 400 24px / 32px Roboto, \"Helvetica Neue\", sans-serif;\n letter-spacing: normal;\n margin: 0 0 16px;\n}\n\n.mat-h2, .mat-title, .mat-typography h2 {\n font: 500 20px / 32px Roboto, \"Helvetica Neue\", sans-serif;\n letter-spacing: normal;\n margin: 0 0 16px;\n}\n\n.mat-h3, .mat-subheading-2, .mat-typography h3 {\n font: 400 16px / 28px Roboto, \"Helvetica Neue\", sans-serif;\n letter-spacing: normal;\n margin: 0 0 16px;\n}\n\n.mat-h4, .mat-subheading-1, .mat-typography h4 {\n font: 400 15px / 24px Roboto, \"Helvetica Neue\", sans-serif;\n letter-spacing: normal;\n margin: 0 0 16px;\n}\n\n.mat-h5, .mat-typography h5 {\n font: 400 calc(14px * 0.83) / 20px Roboto, \"Helvetica Neue\", sans-serif;\n margin: 0 0 12px;\n}\n\n.mat-h6, .mat-typography h6 {\n font: 400 calc(14px * 0.67) / 20px Roboto, \"Helvetica Neue\", sans-serif;\n margin: 0 0 12px;\n}\n\n.mat-body-strong, .mat-body-2 {\n font: 500 14px / 24px Roboto, \"Helvetica Neue\", sans-serif;\n letter-spacing: normal;\n}\n\n.mat-body, .mat-body-1, .mat-typography {\n font: 400 14px / 20px Roboto, \"Helvetica Neue\", sans-serif;\n letter-spacing: normal;\n}\n.mat-body p, .mat-body-1 p, .mat-typography p {\n margin: 0 0 12px;\n}\n\n.mat-small, .mat-caption {\n font: 400 12px / 20px Roboto, \"Helvetica Neue\", sans-serif;\n letter-spacing: normal;\n}\n\n.mat-display-4, .mat-typography .mat-display-4 {\n font: 300 112px / 112px Roboto, \"Helvetica Neue\", sans-serif;\n letter-spacing: -0.05em;\n margin: 0 0 56px;\n}\n\n.mat-display-3, .mat-typography .mat-display-3 {\n font: 400 56px / 56px Roboto, \"Helvetica Neue\", sans-serif;\n letter-spacing: -0.02em;\n margin: 0 0 64px;\n}\n\n.mat-display-2, .mat-typography .mat-display-2 {\n font: 400 45px / 48px Roboto, \"Helvetica Neue\", sans-serif;\n letter-spacing: -0.005em;\n margin: 0 0 64px;\n}\n\n.mat-display-1, .mat-typography .mat-display-1 {\n font: 400 34px / 40px Roboto, \"Helvetica Neue\", sans-serif;\n letter-spacing: normal;\n margin: 0 0 64px;\n}\n\n.mat-bottom-sheet-container {\n font: 400 14px / 20px Roboto, \"Helvetica Neue\", sans-serif;\n letter-spacing: normal;\n}\n\n.mat-button, .mat-raised-button, .mat-icon-button, .mat-stroked-button,\n.mat-flat-button, .mat-fab, .mat-mini-fab {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 14px;\n font-weight: 500;\n}\n\n.mat-button-toggle {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n}\n\n.mat-card {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n}\n\n.mat-card-title {\n font-size: 24px;\n font-weight: 500;\n}\n\n.mat-card-header .mat-card-title {\n font-size: 20px;\n}\n\n.mat-card-subtitle,\n.mat-card-content {\n font-size: 14px;\n}\n\n.mat-checkbox {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n}\n\n.mat-checkbox-layout .mat-checkbox-label {\n line-height: 24px;\n}\n\n.mat-chip {\n font-size: 14px;\n font-weight: 500;\n}\n.mat-chip .mat-chip-trailing-icon.mat-icon,\n.mat-chip .mat-chip-remove.mat-icon {\n font-size: 18px;\n}\n\n.mat-table {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n}\n\n.mat-header-cell {\n font-size: 12px;\n font-weight: 500;\n}\n\n.mat-cell, .mat-footer-cell {\n font-size: 14px;\n}\n\n.mat-calendar {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n}\n\n.mat-calendar-body {\n font-size: 13px;\n}\n\n.mat-calendar-body-label,\n.mat-calendar-period-button {\n font-size: 14px;\n font-weight: 500;\n}\n\n.mat-calendar-table-header th {\n font-size: 11px;\n font-weight: 400;\n}\n\n.mat-dialog-title {\n font: 500 20px / 32px Roboto, \"Helvetica Neue\", sans-serif;\n letter-spacing: normal;\n}\n\n.mat-expansion-panel-header {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 15px;\n font-weight: 400;\n}\n\n.mat-expansion-panel-content {\n font: 400 14px / 20px Roboto, \"Helvetica Neue\", sans-serif;\n letter-spacing: normal;\n}\n\n.mat-form-field {\n font-size: inherit;\n font-weight: 400;\n line-height: 1.125;\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n letter-spacing: normal;\n}\n\n.mat-form-field-wrapper {\n padding-bottom: 1.34375em;\n}\n\n.mat-form-field-prefix .mat-icon,\n.mat-form-field-suffix .mat-icon {\n font-size: 150%;\n line-height: 1.125;\n}\n.mat-form-field-prefix .mat-icon-button,\n.mat-form-field-suffix .mat-icon-button {\n height: 1.5em;\n width: 1.5em;\n}\n.mat-form-field-prefix .mat-icon-button .mat-icon,\n.mat-form-field-suffix .mat-icon-button .mat-icon {\n height: 1.125em;\n line-height: 1.125;\n}\n\n.mat-form-field-infix {\n padding: 0.5em 0;\n border-top: 0.84375em solid transparent;\n}\n\n.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,\n.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {\n transform: translateY(-1.34375em) scale(0.75);\n width: 133.3333333333%;\n}\n.mat-form-field-can-float .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper .mat-form-field-label {\n transform: translateY(-1.34374em) scale(0.75);\n width: 133.3333433333%;\n}\n\n.mat-form-field-label-wrapper {\n top: -0.84375em;\n padding-top: 0.84375em;\n}\n\n.mat-form-field-label {\n top: 1.34375em;\n}\n\n.mat-form-field-underline {\n bottom: 1.34375em;\n}\n\n.mat-form-field-subscript-wrapper {\n font-size: 75%;\n margin-top: 0.6666666667em;\n top: calc(100% - 1.7916666667em);\n}\n\n.mat-form-field-appearance-legacy .mat-form-field-wrapper {\n padding-bottom: 1.25em;\n}\n.mat-form-field-appearance-legacy .mat-form-field-infix {\n padding: 0.4375em 0;\n}\n.mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,\n.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {\n transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px);\n width: 133.3333333333%;\n}\n.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper .mat-form-field-label {\n transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.00101px);\n width: 133.3333433333%;\n}\n.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper .mat-form-field-label {\n transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.00102px);\n width: 133.3333533333%;\n}\n.mat-form-field-appearance-legacy .mat-form-field-label {\n top: 1.28125em;\n}\n.mat-form-field-appearance-legacy .mat-form-field-underline {\n bottom: 1.25em;\n}\n.mat-form-field-appearance-legacy .mat-form-field-subscript-wrapper {\n margin-top: 0.5416666667em;\n top: calc(100% - 1.6666666667em);\n}\n\n@media print {\n .mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,\n.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {\n transform: translateY(-1.28122em) scale(0.75);\n }\n .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper .mat-form-field-label {\n transform: translateY(-1.28121em) scale(0.75);\n }\n .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper .mat-form-field-label {\n transform: translateY(-1.2812em) scale(0.75);\n }\n}\n.mat-form-field-appearance-fill .mat-form-field-infix {\n padding: 0.25em 0 0.75em 0;\n}\n.mat-form-field-appearance-fill .mat-form-field-label {\n top: 1.09375em;\n margin-top: -0.5em;\n}\n.mat-form-field-appearance-fill.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,\n.mat-form-field-appearance-fill.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {\n transform: translateY(-0.59375em) scale(0.75);\n width: 133.3333333333%;\n}\n.mat-form-field-appearance-fill.mat-form-field-can-float .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper .mat-form-field-label {\n transform: translateY(-0.59374em) scale(0.75);\n width: 133.3333433333%;\n}\n\n.mat-form-field-appearance-outline .mat-form-field-infix {\n padding: 1em 0 1em 0;\n}\n.mat-form-field-appearance-outline .mat-form-field-label {\n top: 1.84375em;\n margin-top: -0.25em;\n}\n.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,\n.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {\n transform: translateY(-1.59375em) scale(0.75);\n width: 133.3333333333%;\n}\n.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper .mat-form-field-label {\n transform: translateY(-1.59374em) scale(0.75);\n width: 133.3333433333%;\n}\n\n.mat-grid-tile-header,\n.mat-grid-tile-footer {\n font-size: 14px;\n}\n.mat-grid-tile-header .mat-line,\n.mat-grid-tile-footer .mat-line {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: block;\n box-sizing: border-box;\n}\n.mat-grid-tile-header .mat-line:nth-child(n+2),\n.mat-grid-tile-footer .mat-line:nth-child(n+2) {\n font-size: 12px;\n}\n\ninput.mat-input-element {\n margin-top: -0.0625em;\n}\n\n.mat-menu-item {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 14px;\n font-weight: 400;\n}\n\n.mat-paginator,\n.mat-paginator-page-size .mat-select-trigger {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 12px;\n}\n\n.mat-radio-button {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n}\n\n.mat-select {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n}\n\n.mat-select-trigger {\n height: 1.125em;\n}\n\n.mat-slide-toggle-content {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n}\n\n.mat-slider-thumb-label-text {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 12px;\n font-weight: 500;\n}\n\n.mat-stepper-vertical, .mat-stepper-horizontal {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n}\n\n.mat-step-label {\n font-size: 14px;\n font-weight: 400;\n}\n\n.mat-step-sub-label-error {\n font-weight: normal;\n}\n\n.mat-step-label-error {\n font-size: 14px;\n}\n\n.mat-step-label-selected {\n font-size: 14px;\n font-weight: 500;\n}\n\n.mat-tab-group {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n}\n\n.mat-tab-label, .mat-tab-link {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 14px;\n font-weight: 500;\n}\n\n.mat-toolbar,\n.mat-toolbar h1,\n.mat-toolbar h2,\n.mat-toolbar h3,\n.mat-toolbar h4,\n.mat-toolbar h5,\n.mat-toolbar h6 {\n font: 500 20px / 32px Roboto, \"Helvetica Neue\", sans-serif;\n letter-spacing: normal;\n margin: 0;\n}\n\n.mat-tooltip {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 10px;\n padding-top: 6px;\n padding-bottom: 6px;\n}\n\n.mat-tooltip-handset {\n font-size: 14px;\n padding-top: 8px;\n padding-bottom: 8px;\n}\n\n.mat-list-item {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n}\n\n.mat-list-option {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n}\n\n.mat-list-base .mat-list-item {\n font-size: 16px;\n}\n.mat-list-base .mat-list-item .mat-line {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: block;\n box-sizing: border-box;\n}\n.mat-list-base .mat-list-item .mat-line:nth-child(n+2) {\n font-size: 14px;\n}\n.mat-list-base .mat-list-option {\n font-size: 16px;\n}\n.mat-list-base .mat-list-option .mat-line {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: block;\n box-sizing: border-box;\n}\n.mat-list-base .mat-list-option .mat-line:nth-child(n+2) {\n font-size: 14px;\n}\n.mat-list-base .mat-subheader {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 14px;\n font-weight: 500;\n}\n\n.mat-list-base[dense] .mat-list-item {\n font-size: 12px;\n}\n.mat-list-base[dense] .mat-list-item .mat-line {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: block;\n box-sizing: border-box;\n}\n.mat-list-base[dense] .mat-list-item .mat-line:nth-child(n+2) {\n font-size: 12px;\n}\n.mat-list-base[dense] .mat-list-option {\n font-size: 12px;\n}\n.mat-list-base[dense] .mat-list-option .mat-line {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: block;\n box-sizing: border-box;\n}\n.mat-list-base[dense] .mat-list-option .mat-line:nth-child(n+2) {\n font-size: 12px;\n}\n.mat-list-base[dense] .mat-subheader {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 12px;\n font-weight: 500;\n}\n\n.mat-option {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 16px;\n}\n\n.mat-optgroup-label {\n font: 500 14px / 24px Roboto, \"Helvetica Neue\", sans-serif;\n letter-spacing: normal;\n}\n\n.mat-simple-snackbar {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 14px;\n}\n\n.mat-simple-snackbar-action {\n line-height: 1;\n font-family: inherit;\n font-size: inherit;\n font-weight: 500;\n}\n\n.mat-tree {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n}\n\n.mat-tree-node,\n.mat-nested-tree-node {\n font-weight: 400;\n font-size: 14px;\n}\n\n.mat-ripple {\n overflow: hidden;\n position: relative;\n}\n.mat-ripple:not(:empty) {\n transform: translateZ(0);\n}\n\n.mat-ripple.mat-ripple-unbounded {\n overflow: visible;\n}\n\n.mat-ripple-element {\n position: absolute;\n border-radius: 50%;\n pointer-events: none;\n transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);\n transform: scale(0);\n}\n.cdk-high-contrast-active .mat-ripple-element {\n display: none;\n}\n\n.cdk-visually-hidden {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n white-space: nowrap;\n outline: 0;\n -webkit-appearance: none;\n -moz-appearance: none;\n}\n\n.cdk-overlay-container, .cdk-global-overlay-wrapper {\n pointer-events: none;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n}\n\n.cdk-overlay-container {\n position: fixed;\n z-index: 1000;\n}\n.cdk-overlay-container:empty {\n display: none;\n}\n\n.cdk-global-overlay-wrapper {\n display: flex;\n position: absolute;\n z-index: 1000;\n}\n\n.cdk-overlay-pane {\n position: absolute;\n pointer-events: auto;\n box-sizing: border-box;\n z-index: 1000;\n display: flex;\n max-width: 100%;\n max-height: 100%;\n}\n\n.cdk-overlay-backdrop {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n pointer-events: auto;\n -webkit-tap-highlight-color: transparent;\n transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n opacity: 0;\n}\n.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {\n opacity: 1;\n}\n.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {\n opacity: 0.6;\n}\n\n.cdk-overlay-dark-backdrop {\n background: rgba(0, 0, 0, 0.32);\n}\n\n.cdk-overlay-transparent-backdrop, .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {\n opacity: 0;\n}\n\n.cdk-overlay-connected-position-bounding-box {\n position: absolute;\n z-index: 1000;\n display: flex;\n flex-direction: column;\n min-width: 1px;\n min-height: 1px;\n}\n\n.cdk-global-scrollblock {\n position: fixed;\n width: 100%;\n overflow-y: scroll;\n}\n\ntextarea.cdk-textarea-autosize {\n resize: none;\n}\n\ntextarea.cdk-textarea-autosize-measuring {\n padding: 2px 0 !important;\n box-sizing: content-box !important;\n height: auto !important;\n overflow: hidden !important;\n}\n\ntextarea.cdk-textarea-autosize-measuring-firefox {\n padding: 2px 0 !important;\n box-sizing: content-box !important;\n height: 0 !important;\n}\n\n@keyframes cdk-text-field-autofill-start {\n /*!*/\n}\n@keyframes cdk-text-field-autofill-end {\n /*!*/\n}\n.cdk-text-field-autofill-monitored:-webkit-autofill {\n animation: cdk-text-field-autofill-start 0s 1ms;\n}\n\n.cdk-text-field-autofill-monitored:not(:-webkit-autofill) {\n animation: cdk-text-field-autofill-end 0s 1ms;\n}\n\n.mat-focus-indicator {\n position: relative;\n}\n\n.mat-mdc-focus-indicator {\n position: relative;\n}\n\n.mat-ripple-element {\n background-color: rgba(0, 0, 0, 0.1);\n}\n\n.mat-option {\n color: rgba(0, 0, 0, 0.87);\n}\n.mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) {\n background: rgba(0, 0, 0, 0.04);\n}\n.mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {\n background: rgba(0, 0, 0, 0.04);\n}\n.mat-option.mat-active {\n background: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.87);\n}\n.mat-option.mat-option-disabled {\n color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {\n color: #ef6c00;\n}\n\n.mat-accent .mat-option.mat-selected:not(.mat-option-disabled) {\n color: #039be5;\n}\n\n.mat-warn .mat-option.mat-selected:not(.mat-option-disabled) {\n color: #e53935;\n}\n\n.mat-optgroup-label {\n color: rgba(0, 0, 0, 0.54);\n}\n\n.mat-optgroup-disabled .mat-optgroup-label {\n color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-pseudo-checkbox {\n color: rgba(0, 0, 0, 0.54);\n}\n.mat-pseudo-checkbox::after {\n color: #fafafa;\n}\n\n.mat-pseudo-checkbox-disabled {\n color: #b0b0b0;\n}\n\n.mat-primary .mat-pseudo-checkbox-checked,\n.mat-primary .mat-pseudo-checkbox-indeterminate {\n background: #ef6c00;\n}\n\n.mat-pseudo-checkbox-checked,\n.mat-pseudo-checkbox-indeterminate,\n.mat-accent .mat-pseudo-checkbox-checked,\n.mat-accent .mat-pseudo-checkbox-indeterminate {\n background: #039be5;\n}\n\n.mat-warn .mat-pseudo-checkbox-checked,\n.mat-warn .mat-pseudo-checkbox-indeterminate {\n background: #e53935;\n}\n\n.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled,\n.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled {\n background: #b0b0b0;\n}\n\n.mat-app-background {\n background-color: #fafafa;\n color: rgba(0, 0, 0, 0.87);\n}\n\n.mat-elevation-z0 {\n box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z1 {\n box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z2 {\n box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z3 {\n box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z4 {\n box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z5 {\n box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z6 {\n box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z7 {\n box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z8 {\n box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z9 {\n box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z10 {\n box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z11 {\n box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z12 {\n box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z13 {\n box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z14 {\n box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z15 {\n box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z16 {\n box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z17 {\n box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z18 {\n box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z19 {\n box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z20 {\n box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z21 {\n box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z22 {\n box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z23 {\n box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z24 {\n box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);\n}\n\n.mat-theme-loaded-marker {\n display: none;\n}\n\n.mat-autocomplete-panel {\n background: white;\n color: rgba(0, 0, 0, 0.87);\n}\n.mat-autocomplete-panel:not([class*=mat-elevation-z]) {\n box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);\n}\n.mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover) {\n background: white;\n}\n.mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover):not(.mat-option-disabled) {\n color: rgba(0, 0, 0, 0.87);\n}\n\n.mat-badge {\n position: relative;\n}\n\n.mat-badge-hidden .mat-badge-content {\n display: none;\n}\n\n.mat-badge-content {\n position: absolute;\n text-align: center;\n display: inline-block;\n border-radius: 50%;\n transition: transform 200ms ease-in-out;\n transform: scale(0.6);\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n pointer-events: none;\n}\n\n.ng-animate-disabled .mat-badge-content,\n.mat-badge-content._mat-animation-noopable {\n transition: none;\n}\n\n.mat-badge-content.mat-badge-active {\n transform: none;\n}\n\n.mat-badge-small .mat-badge-content {\n width: 16px;\n height: 16px;\n line-height: 16px;\n}\n.mat-badge-small.mat-badge-above .mat-badge-content {\n top: -8px;\n}\n.mat-badge-small.mat-badge-below .mat-badge-content {\n bottom: -8px;\n}\n.mat-badge-small.mat-badge-before .mat-badge-content {\n left: -16px;\n}\n[dir=rtl] .mat-badge-small.mat-badge-before .mat-badge-content {\n left: auto;\n right: -16px;\n}\n.mat-badge-small.mat-badge-after .mat-badge-content {\n right: -16px;\n}\n[dir=rtl] .mat-badge-small.mat-badge-after .mat-badge-content {\n right: auto;\n left: -16px;\n}\n.mat-badge-small.mat-badge-overlap.mat-badge-before .mat-badge-content {\n left: -8px;\n}\n[dir=rtl] .mat-badge-small.mat-badge-overlap.mat-badge-before .mat-badge-content {\n left: auto;\n right: -8px;\n}\n.mat-badge-small.mat-badge-overlap.mat-badge-after .mat-badge-content {\n right: -8px;\n}\n[dir=rtl] .mat-badge-small.mat-badge-overlap.mat-badge-after .mat-badge-content {\n right: auto;\n left: -8px;\n}\n\n.mat-badge-medium .mat-badge-content {\n width: 22px;\n height: 22px;\n line-height: 22px;\n}\n.mat-badge-medium.mat-badge-above .mat-badge-content {\n top: -11px;\n}\n.mat-badge-medium.mat-badge-below .mat-badge-content {\n bottom: -11px;\n}\n.mat-badge-medium.mat-badge-before .mat-badge-content {\n left: -22px;\n}\n[dir=rtl] .mat-badge-medium.mat-badge-before .mat-badge-content {\n left: auto;\n right: -22px;\n}\n.mat-badge-medium.mat-badge-after .mat-badge-content {\n right: -22px;\n}\n[dir=rtl] .mat-badge-medium.mat-badge-after .mat-badge-content {\n right: auto;\n left: -22px;\n}\n.mat-badge-medium.mat-badge-overlap.mat-badge-before .mat-badge-content {\n left: -11px;\n}\n[dir=rtl] .mat-badge-medium.mat-badge-overlap.mat-badge-before .mat-badge-content {\n left: auto;\n right: -11px;\n}\n.mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content {\n right: -11px;\n}\n[dir=rtl] .mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content {\n right: auto;\n left: -11px;\n}\n\n.mat-badge-large .mat-badge-content {\n width: 28px;\n height: 28px;\n line-height: 28px;\n}\n.mat-badge-large.mat-badge-above .mat-badge-content {\n top: -14px;\n}\n.mat-badge-large.mat-badge-below .mat-badge-content {\n bottom: -14px;\n}\n.mat-badge-large.mat-badge-before .mat-badge-content {\n left: -28px;\n}\n[dir=rtl] .mat-badge-large.mat-badge-before .mat-badge-content {\n left: auto;\n right: -28px;\n}\n.mat-badge-large.mat-badge-after .mat-badge-content {\n right: -28px;\n}\n[dir=rtl] .mat-badge-large.mat-badge-after .mat-badge-content {\n right: auto;\n left: -28px;\n}\n.mat-badge-large.mat-badge-overlap.mat-badge-before .mat-badge-content {\n left: -14px;\n}\n[dir=rtl] .mat-badge-large.mat-badge-overlap.mat-badge-before .mat-badge-content {\n left: auto;\n right: -14px;\n}\n.mat-badge-large.mat-badge-overlap.mat-badge-after .mat-badge-content {\n right: -14px;\n}\n[dir=rtl] .mat-badge-large.mat-badge-overlap.mat-badge-after .mat-badge-content {\n right: auto;\n left: -14px;\n}\n\n.mat-badge-content {\n color: white;\n background: #ef6c00;\n}\n.cdk-high-contrast-active .mat-badge-content {\n outline: solid 1px;\n border-radius: 0;\n}\n\n.mat-badge-accent .mat-badge-content {\n background: #039be5;\n color: white;\n}\n\n.mat-badge-warn .mat-badge-content {\n color: white;\n background: #e53935;\n}\n\n.mat-badge-disabled .mat-badge-content {\n background: #b9b9b9;\n color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-bottom-sheet-container {\n box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);\n background: white;\n color: rgba(0, 0, 0, 0.87);\n}\n\n.mat-button, .mat-icon-button, .mat-stroked-button {\n color: inherit;\n background: transparent;\n}\n.mat-button.mat-primary, .mat-icon-button.mat-primary, .mat-stroked-button.mat-primary {\n color: #ef6c00;\n}\n.mat-button.mat-accent, .mat-icon-button.mat-accent, .mat-stroked-button.mat-accent {\n color: #039be5;\n}\n.mat-button.mat-warn, .mat-icon-button.mat-warn, .mat-stroked-button.mat-warn {\n color: #e53935;\n}\n.mat-button.mat-primary.mat-button-disabled, .mat-button.mat-accent.mat-button-disabled, .mat-button.mat-warn.mat-button-disabled, .mat-button.mat-button-disabled.mat-button-disabled, .mat-icon-button.mat-primary.mat-button-disabled, .mat-icon-button.mat-accent.mat-button-disabled, .mat-icon-button.mat-warn.mat-button-disabled, .mat-icon-button.mat-button-disabled.mat-button-disabled, .mat-stroked-button.mat-primary.mat-button-disabled, .mat-stroked-button.mat-accent.mat-button-disabled, .mat-stroked-button.mat-warn.mat-button-disabled, .mat-stroked-button.mat-button-disabled.mat-button-disabled {\n color: rgba(0, 0, 0, 0.26);\n}\n.mat-button.mat-primary .mat-button-focus-overlay, .mat-icon-button.mat-primary .mat-button-focus-overlay, .mat-stroked-button.mat-primary .mat-button-focus-overlay {\n background-color: #ef6c00;\n}\n.mat-button.mat-accent .mat-button-focus-overlay, .mat-icon-button.mat-accent .mat-button-focus-overlay, .mat-stroked-button.mat-accent .mat-button-focus-overlay {\n background-color: #039be5;\n}\n.mat-button.mat-warn .mat-button-focus-overlay, .mat-icon-button.mat-warn .mat-button-focus-overlay, .mat-stroked-button.mat-warn .mat-button-focus-overlay {\n background-color: #e53935;\n}\n.mat-button.mat-button-disabled .mat-button-focus-overlay, .mat-icon-button.mat-button-disabled .mat-button-focus-overlay, .mat-stroked-button.mat-button-disabled .mat-button-focus-overlay {\n background-color: transparent;\n}\n.mat-button .mat-ripple-element, .mat-icon-button .mat-ripple-element, .mat-stroked-button .mat-ripple-element {\n opacity: 0.1;\n background-color: currentColor;\n}\n\n.mat-button-focus-overlay {\n background: black;\n}\n\n.mat-stroked-button:not(.mat-button-disabled) {\n border-color: rgba(0, 0, 0, 0.12);\n}\n\n.mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab {\n color: rgba(0, 0, 0, 0.87);\n background-color: white;\n}\n.mat-flat-button.mat-primary, .mat-raised-button.mat-primary, .mat-fab.mat-primary, .mat-mini-fab.mat-primary {\n color: white;\n}\n.mat-flat-button.mat-accent, .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-mini-fab.mat-accent {\n color: white;\n}\n.mat-flat-button.mat-warn, .mat-raised-button.mat-warn, .mat-fab.mat-warn, .mat-mini-fab.mat-warn {\n color: white;\n}\n.mat-flat-button.mat-primary.mat-button-disabled, .mat-flat-button.mat-accent.mat-button-disabled, .mat-flat-button.mat-warn.mat-button-disabled, .mat-flat-button.mat-button-disabled.mat-button-disabled, .mat-raised-button.mat-primary.mat-button-disabled, .mat-raised-button.mat-accent.mat-button-disabled, .mat-raised-button.mat-warn.mat-button-disabled, .mat-raised-button.mat-button-disabled.mat-button-disabled, .mat-fab.mat-primary.mat-button-disabled, .mat-fab.mat-accent.mat-button-disabled, .mat-fab.mat-warn.mat-button-disabled, .mat-fab.mat-button-disabled.mat-button-disabled, .mat-mini-fab.mat-primary.mat-button-disabled, .mat-mini-fab.mat-accent.mat-button-disabled, .mat-mini-fab.mat-warn.mat-button-disabled, .mat-mini-fab.mat-button-disabled.mat-button-disabled {\n color: rgba(0, 0, 0, 0.26);\n}\n.mat-flat-button.mat-primary, .mat-raised-button.mat-primary, .mat-fab.mat-primary, .mat-mini-fab.mat-primary {\n background-color: #ef6c00;\n}\n.mat-flat-button.mat-accent, .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-mini-fab.mat-accent {\n background-color: #039be5;\n}\n.mat-flat-button.mat-warn, .mat-raised-button.mat-warn, .mat-fab.mat-warn, .mat-mini-fab.mat-warn {\n background-color: #e53935;\n}\n.mat-flat-button.mat-primary.mat-button-disabled, .mat-flat-button.mat-accent.mat-button-disabled, .mat-flat-button.mat-warn.mat-button-disabled, .mat-flat-button.mat-button-disabled.mat-button-disabled, .mat-raised-button.mat-primary.mat-button-disabled, .mat-raised-button.mat-accent.mat-button-disabled, .mat-raised-button.mat-warn.mat-button-disabled, .mat-raised-button.mat-button-disabled.mat-button-disabled, .mat-fab.mat-primary.mat-button-disabled, .mat-fab.mat-accent.mat-button-disabled, .mat-fab.mat-warn.mat-button-disabled, .mat-fab.mat-button-disabled.mat-button-disabled, .mat-mini-fab.mat-primary.mat-button-disabled, .mat-mini-fab.mat-accent.mat-button-disabled, .mat-mini-fab.mat-warn.mat-button-disabled, .mat-mini-fab.mat-button-disabled.mat-button-disabled {\n background-color: rgba(0, 0, 0, 0.12);\n}\n.mat-flat-button.mat-primary .mat-ripple-element, .mat-raised-button.mat-primary .mat-ripple-element, .mat-fab.mat-primary .mat-ripple-element, .mat-mini-fab.mat-primary .mat-ripple-element {\n background-color: rgba(255, 255, 255, 0.1);\n}\n.mat-flat-button.mat-accent .mat-ripple-element, .mat-raised-button.mat-accent .mat-ripple-element, .mat-fab.mat-accent .mat-ripple-element, .mat-mini-fab.mat-accent .mat-ripple-element {\n background-color: rgba(255, 255, 255, 0.1);\n}\n.mat-flat-button.mat-warn .mat-ripple-element, .mat-raised-button.mat-warn .mat-ripple-element, .mat-fab.mat-warn .mat-ripple-element, .mat-mini-fab.mat-warn .mat-ripple-element {\n background-color: rgba(255, 255, 255, 0.1);\n}\n\n.mat-stroked-button:not([class*=mat-elevation-z]), .mat-flat-button:not([class*=mat-elevation-z]) {\n box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-raised-button:not([class*=mat-elevation-z]) {\n box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n}\n.mat-raised-button:not(.mat-button-disabled):active:not([class*=mat-elevation-z]) {\n box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n}\n.mat-raised-button.mat-button-disabled:not([class*=mat-elevation-z]) {\n box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-fab:not([class*=mat-elevation-z]), .mat-mini-fab:not([class*=mat-elevation-z]) {\n box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);\n}\n.mat-fab:not(.mat-button-disabled):active:not([class*=mat-elevation-z]), .mat-mini-fab:not(.mat-button-disabled):active:not([class*=mat-elevation-z]) {\n box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);\n}\n.mat-fab.mat-button-disabled:not([class*=mat-elevation-z]), .mat-mini-fab.mat-button-disabled:not([class*=mat-elevation-z]) {\n box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-button-toggle-standalone,\n.mat-button-toggle-group {\n box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,\n.mat-button-toggle-group-appearance-standard {\n box-shadow: none;\n}\n\n.mat-button-toggle {\n color: rgba(0, 0, 0, 0.38);\n}\n.mat-button-toggle .mat-button-toggle-focus-overlay {\n background-color: rgba(0, 0, 0, 0.12);\n}\n\n.mat-button-toggle-appearance-standard {\n color: rgba(0, 0, 0, 0.87);\n background: white;\n}\n.mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay {\n background-color: black;\n}\n\n.mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {\n border-left: solid 1px rgba(0, 0, 0, 0.12);\n}\n\n[dir=rtl] .mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {\n border-left: none;\n border-right: solid 1px rgba(0, 0, 0, 0.12);\n}\n\n.mat-button-toggle-group-appearance-standard.mat-button-toggle-vertical .mat-button-toggle + .mat-button-toggle {\n border-left: none;\n border-right: none;\n border-top: solid 1px rgba(0, 0, 0, 0.12);\n}\n\n.mat-button-toggle-checked {\n background-color: #e0e0e0;\n color: rgba(0, 0, 0, 0.54);\n}\n.mat-button-toggle-checked.mat-button-toggle-appearance-standard {\n color: rgba(0, 0, 0, 0.87);\n}\n\n.mat-button-toggle-disabled {\n color: rgba(0, 0, 0, 0.26);\n background-color: #eeeeee;\n}\n.mat-button-toggle-disabled.mat-button-toggle-appearance-standard {\n background: white;\n}\n.mat-button-toggle-disabled.mat-button-toggle-checked {\n background-color: #bdbdbd;\n}\n\n.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,\n.mat-button-toggle-group-appearance-standard {\n border: solid 1px rgba(0, 0, 0, 0.12);\n}\n\n.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {\n line-height: 48px;\n}\n\n.mat-card {\n background: white;\n color: rgba(0, 0, 0, 0.87);\n}\n.mat-card:not([class*=mat-elevation-z]) {\n box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);\n}\n.mat-card.mat-card-flat:not([class*=mat-elevation-z]) {\n box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-card-subtitle {\n color: rgba(0, 0, 0, 0.54);\n}\n\n.mat-checkbox-frame {\n border-color: rgba(0, 0, 0, 0.54);\n}\n\n.mat-checkbox-checkmark {\n fill: #fafafa;\n}\n\n.mat-checkbox-checkmark-path {\n stroke: #fafafa !important;\n}\n\n.mat-checkbox-mixedmark {\n background-color: #fafafa;\n}\n\n.mat-checkbox-indeterminate.mat-primary .mat-checkbox-background, .mat-checkbox-checked.mat-primary .mat-checkbox-background {\n background-color: #ef6c00;\n}\n.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-checkbox-checked.mat-accent .mat-checkbox-background {\n background-color: #039be5;\n}\n.mat-checkbox-indeterminate.mat-warn .mat-checkbox-background, .mat-checkbox-checked.mat-warn .mat-checkbox-background {\n background-color: #e53935;\n}\n\n.mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {\n background-color: #b0b0b0;\n}\n.mat-checkbox-disabled:not(.mat-checkbox-checked) .mat-checkbox-frame {\n border-color: #b0b0b0;\n}\n.mat-checkbox-disabled .mat-checkbox-label {\n color: rgba(0, 0, 0, 0.54);\n}\n\n.mat-checkbox .mat-ripple-element {\n background-color: black;\n}\n\n.mat-checkbox-checked:not(.mat-checkbox-disabled).mat-primary .mat-ripple-element,\n.mat-checkbox:active:not(.mat-checkbox-disabled).mat-primary .mat-ripple-element {\n background: #ef6c00;\n}\n.mat-checkbox-checked:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element,\n.mat-checkbox:active:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element {\n background: #039be5;\n}\n.mat-checkbox-checked:not(.mat-checkbox-disabled).mat-warn .mat-ripple-element,\n.mat-checkbox:active:not(.mat-checkbox-disabled).mat-warn .mat-ripple-element {\n background: #e53935;\n}\n\n.mat-chip.mat-standard-chip {\n background-color: #e0e0e0;\n color: rgba(0, 0, 0, 0.87);\n}\n.mat-chip.mat-standard-chip .mat-chip-remove {\n color: rgba(0, 0, 0, 0.87);\n opacity: 0.4;\n}\n.mat-chip.mat-standard-chip:not(.mat-chip-disabled):active {\n box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);\n}\n.mat-chip.mat-standard-chip:not(.mat-chip-disabled) .mat-chip-remove:hover {\n opacity: 0.54;\n}\n.mat-chip.mat-standard-chip.mat-chip-disabled {\n opacity: 0.4;\n}\n.mat-chip.mat-standard-chip::after {\n background: black;\n}\n\n.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {\n background-color: #ef6c00;\n color: white;\n}\n.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary .mat-chip-remove {\n color: white;\n opacity: 0.4;\n}\n.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary .mat-ripple-element {\n background-color: rgba(255, 255, 255, 0.1);\n}\n.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn {\n background-color: #e53935;\n color: white;\n}\n.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn .mat-chip-remove {\n color: white;\n opacity: 0.4;\n}\n.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn .mat-ripple-element {\n background-color: rgba(255, 255, 255, 0.1);\n}\n.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent {\n background-color: #039be5;\n color: white;\n}\n.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent .mat-chip-remove {\n color: white;\n opacity: 0.4;\n}\n.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent .mat-ripple-element {\n background-color: rgba(255, 255, 255, 0.1);\n}\n\n.mat-table {\n background: white;\n}\n\n.mat-table thead, .mat-table tbody, .mat-table tfoot,\nmat-header-row, mat-row, mat-footer-row,\n[mat-header-row], [mat-row], [mat-footer-row],\n.mat-table-sticky {\n background: inherit;\n}\n\nmat-row, mat-header-row, mat-footer-row,\nth.mat-header-cell, td.mat-cell, td.mat-footer-cell {\n border-bottom-color: rgba(0, 0, 0, 0.12);\n}\n\n.mat-header-cell {\n color: rgba(0, 0, 0, 0.54);\n}\n\n.mat-cell, .mat-footer-cell {\n color: rgba(0, 0, 0, 0.87);\n}\n\n.mat-calendar-arrow {\n fill: rgba(0, 0, 0, 0.54);\n}\n\n.mat-datepicker-toggle,\n.mat-datepicker-content .mat-calendar-next-button,\n.mat-datepicker-content .mat-calendar-previous-button {\n color: rgba(0, 0, 0, 0.54);\n}\n\n.mat-calendar-table-header-divider::after {\n background: rgba(0, 0, 0, 0.12);\n}\n\n.mat-calendar-table-header,\n.mat-calendar-body-label {\n color: rgba(0, 0, 0, 0.54);\n}\n\n.mat-calendar-body-cell-content,\n.mat-date-range-input-separator {\n color: rgba(0, 0, 0, 0.87);\n border-color: transparent;\n}\n\n.mat-calendar-body-disabled > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-form-field-disabled .mat-date-range-input-separator {\n color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-calendar-body-in-preview {\n color: rgba(0, 0, 0, 0.24);\n}\n\n.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n border-color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-calendar-body-disabled > .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n border-color: rgba(0, 0, 0, 0.18);\n}\n\n.mat-calendar-body-in-range::before {\n background: rgba(239, 108, 0, 0.2);\n}\n\n.mat-calendar-body-comparison-identical,\n.mat-calendar-body-in-comparison-range::before {\n background: rgba(249, 171, 0, 0.2);\n}\n\n.mat-calendar-body-comparison-bridge-start::before,\n[dir=rtl] .mat-calendar-body-comparison-bridge-end::before {\n background: linear-gradient(to right, rgba(239, 108, 0, 0.2) 50%, rgba(249, 171, 0, 0.2) 50%);\n}\n\n.mat-calendar-body-comparison-bridge-end::before,\n[dir=rtl] .mat-calendar-body-comparison-bridge-start::before {\n background: linear-gradient(to left, rgba(239, 108, 0, 0.2) 50%, rgba(249, 171, 0, 0.2) 50%);\n}\n\n.mat-calendar-body-in-range > .mat-calendar-body-comparison-identical,\n.mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::after {\n background: #a8dab5;\n}\n\n.mat-calendar-body-comparison-identical.mat-calendar-body-selected,\n.mat-calendar-body-in-comparison-range > .mat-calendar-body-selected {\n background: #46a35e;\n}\n\n.mat-calendar-body-selected {\n background-color: #ef6c00;\n color: white;\n}\n\n.mat-calendar-body-disabled > .mat-calendar-body-selected {\n background-color: rgba(239, 108, 0, 0.4);\n}\n\n.mat-calendar-body-today.mat-calendar-body-selected {\n box-shadow: inset 0 0 0 1px white;\n}\n\n.cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),\n.cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n background-color: rgba(239, 108, 0, 0.3);\n}\n\n@media (hover: hover) {\n .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n background-color: rgba(239, 108, 0, 0.3);\n }\n}\n.mat-datepicker-content {\n box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);\n background-color: white;\n color: rgba(0, 0, 0, 0.87);\n}\n.mat-datepicker-content.mat-accent .mat-calendar-body-in-range::before {\n background: rgba(3, 155, 229, 0.2);\n}\n.mat-datepicker-content.mat-accent .mat-calendar-body-comparison-identical,\n.mat-datepicker-content.mat-accent .mat-calendar-body-in-comparison-range::before {\n background: rgba(249, 171, 0, 0.2);\n}\n.mat-datepicker-content.mat-accent .mat-calendar-body-comparison-bridge-start::before,\n.mat-datepicker-content.mat-accent [dir=rtl] .mat-calendar-body-comparison-bridge-end::before {\n background: linear-gradient(to right, rgba(3, 155, 229, 0.2) 50%, rgba(249, 171, 0, 0.2) 50%);\n}\n.mat-datepicker-content.mat-accent .mat-calendar-body-comparison-bridge-end::before,\n.mat-datepicker-content.mat-accent [dir=rtl] .mat-calendar-body-comparison-bridge-start::before {\n background: linear-gradient(to left, rgba(3, 155, 229, 0.2) 50%, rgba(249, 171, 0, 0.2) 50%);\n}\n.mat-datepicker-content.mat-accent .mat-calendar-body-in-range > .mat-calendar-body-comparison-identical,\n.mat-datepicker-content.mat-accent .mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::after {\n background: #a8dab5;\n}\n.mat-datepicker-content.mat-accent .mat-calendar-body-comparison-identical.mat-calendar-body-selected,\n.mat-datepicker-content.mat-accent .mat-calendar-body-in-comparison-range > .mat-calendar-body-selected {\n background: #46a35e;\n}\n.mat-datepicker-content.mat-accent .mat-calendar-body-selected {\n background-color: #039be5;\n color: white;\n}\n.mat-datepicker-content.mat-accent .mat-calendar-body-disabled > .mat-calendar-body-selected {\n background-color: rgba(3, 155, 229, 0.4);\n}\n.mat-datepicker-content.mat-accent .mat-calendar-body-today.mat-calendar-body-selected {\n box-shadow: inset 0 0 0 1px white;\n}\n.mat-datepicker-content.mat-accent .cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),\n.mat-datepicker-content.mat-accent .cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n background-color: rgba(3, 155, 229, 0.3);\n}\n@media (hover: hover) {\n .mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n background-color: rgba(3, 155, 229, 0.3);\n }\n}\n.mat-datepicker-content.mat-warn .mat-calendar-body-in-range::before {\n background: rgba(229, 57, 53, 0.2);\n}\n.mat-datepicker-content.mat-warn .mat-calendar-body-comparison-identical,\n.mat-datepicker-content.mat-warn .mat-calendar-body-in-comparison-range::before {\n background: rgba(249, 171, 0, 0.2);\n}\n.mat-datepicker-content.mat-warn .mat-calendar-body-comparison-bridge-start::before,\n.mat-datepicker-content.mat-warn [dir=rtl] .mat-calendar-body-comparison-bridge-end::before {\n background: linear-gradient(to right, rgba(229, 57, 53, 0.2) 50%, rgba(249, 171, 0, 0.2) 50%);\n}\n.mat-datepicker-content.mat-warn .mat-calendar-body-comparison-bridge-end::before,\n.mat-datepicker-content.mat-warn [dir=rtl] .mat-calendar-body-comparison-bridge-start::before {\n background: linear-gradient(to left, rgba(229, 57, 53, 0.2) 50%, rgba(249, 171, 0, 0.2) 50%);\n}\n.mat-datepicker-content.mat-warn .mat-calendar-body-in-range > .mat-calendar-body-comparison-identical,\n.mat-datepicker-content.mat-warn .mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::after {\n background: #a8dab5;\n}\n.mat-datepicker-content.mat-warn .mat-calendar-body-comparison-identical.mat-calendar-body-selected,\n.mat-datepicker-content.mat-warn .mat-calendar-body-in-comparison-range > .mat-calendar-body-selected {\n background: #46a35e;\n}\n.mat-datepicker-content.mat-warn .mat-calendar-body-selected {\n background-color: #e53935;\n color: white;\n}\n.mat-datepicker-content.mat-warn .mat-calendar-body-disabled > .mat-calendar-body-selected {\n background-color: rgba(229, 57, 53, 0.4);\n}\n.mat-datepicker-content.mat-warn .mat-calendar-body-today.mat-calendar-body-selected {\n box-shadow: inset 0 0 0 1px white;\n}\n.mat-datepicker-content.mat-warn .cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),\n.mat-datepicker-content.mat-warn .cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n background-color: rgba(229, 57, 53, 0.3);\n}\n@media (hover: hover) {\n .mat-datepicker-content.mat-warn .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n background-color: rgba(229, 57, 53, 0.3);\n }\n}\n\n.mat-datepicker-content-touch {\n box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);\n}\n\n.mat-datepicker-toggle-active {\n color: #ef6c00;\n}\n.mat-datepicker-toggle-active.mat-accent {\n color: #039be5;\n}\n.mat-datepicker-toggle-active.mat-warn {\n color: #e53935;\n}\n\n.mat-date-range-input-inner[disabled] {\n color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-dialog-container {\n box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);\n background: white;\n color: rgba(0, 0, 0, 0.87);\n}\n\n.mat-divider {\n border-top-color: rgba(0, 0, 0, 0.12);\n}\n\n.mat-divider-vertical {\n border-right-color: rgba(0, 0, 0, 0.12);\n}\n\n.mat-expansion-panel {\n background: white;\n color: rgba(0, 0, 0, 0.87);\n}\n.mat-expansion-panel:not([class*=mat-elevation-z]) {\n box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-action-row {\n border-top-color: rgba(0, 0, 0, 0.12);\n}\n\n.mat-expansion-panel .mat-expansion-panel-header.cdk-keyboard-focused:not([aria-disabled=true]), .mat-expansion-panel .mat-expansion-panel-header.cdk-program-focused:not([aria-disabled=true]), .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:hover:not([aria-disabled=true]) {\n background: rgba(0, 0, 0, 0.04);\n}\n\n@media (hover: none) {\n .mat-expansion-panel:not(.mat-expanded):not([aria-disabled=true]) .mat-expansion-panel-header:hover {\n background: white;\n }\n}\n.mat-expansion-panel-header-title {\n color: rgba(0, 0, 0, 0.87);\n}\n\n.mat-expansion-panel-header-description,\n.mat-expansion-indicator::after {\n color: rgba(0, 0, 0, 0.54);\n}\n\n.mat-expansion-panel-header[aria-disabled=true] {\n color: rgba(0, 0, 0, 0.26);\n}\n.mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title,\n.mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-description {\n color: inherit;\n}\n\n.mat-expansion-panel-header {\n height: 48px;\n}\n.mat-expansion-panel-header.mat-expanded {\n height: 64px;\n}\n\n.mat-form-field-label {\n color: rgba(0, 0, 0, 0.6);\n}\n\n.mat-hint {\n color: rgba(0, 0, 0, 0.6);\n}\n\n.mat-form-field.mat-focused .mat-form-field-label {\n color: #ef6c00;\n}\n.mat-form-field.mat-focused .mat-form-field-label.mat-accent {\n color: #039be5;\n}\n.mat-form-field.mat-focused .mat-form-field-label.mat-warn {\n color: #e53935;\n}\n\n.mat-focused .mat-form-field-required-marker {\n color: #039be5;\n}\n\n.mat-form-field-ripple {\n background-color: rgba(0, 0, 0, 0.87);\n}\n\n.mat-form-field.mat-focused .mat-form-field-ripple {\n background-color: #ef6c00;\n}\n.mat-form-field.mat-focused .mat-form-field-ripple.mat-accent {\n background-color: #039be5;\n}\n.mat-form-field.mat-focused .mat-form-field-ripple.mat-warn {\n background-color: #e53935;\n}\n\n.mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid) .mat-form-field-infix::after {\n color: #ef6c00;\n}\n.mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid).mat-accent .mat-form-field-infix::after {\n color: #039be5;\n}\n.mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid).mat-warn .mat-form-field-infix::after {\n color: #e53935;\n}\n\n.mat-form-field.mat-form-field-invalid .mat-form-field-label {\n color: #e53935;\n}\n.mat-form-field.mat-form-field-invalid .mat-form-field-label.mat-accent,\n.mat-form-field.mat-form-field-invalid .mat-form-field-label .mat-form-field-required-marker {\n color: #e53935;\n}\n.mat-form-field.mat-form-field-invalid .mat-form-field-ripple,\n.mat-form-field.mat-form-field-invalid .mat-form-field-ripple.mat-accent {\n background-color: #e53935;\n}\n\n.mat-error {\n color: #e53935;\n}\n\n.mat-form-field-appearance-legacy .mat-form-field-label {\n color: rgba(0, 0, 0, 0.54);\n}\n.mat-form-field-appearance-legacy .mat-hint {\n color: rgba(0, 0, 0, 0.54);\n}\n.mat-form-field-appearance-legacy .mat-form-field-underline {\n background-color: rgba(0, 0, 0, 0.42);\n}\n.mat-form-field-appearance-legacy.mat-form-field-disabled .mat-form-field-underline {\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%);\n background-size: 4px 100%;\n background-repeat: repeat-x;\n}\n\n.mat-form-field-appearance-standard .mat-form-field-underline {\n background-color: rgba(0, 0, 0, 0.42);\n}\n.mat-form-field-appearance-standard.mat-form-field-disabled .mat-form-field-underline {\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%);\n background-size: 4px 100%;\n background-repeat: repeat-x;\n}\n\n.mat-form-field-appearance-fill .mat-form-field-flex {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-flex {\n background-color: rgba(0, 0, 0, 0.02);\n}\n.mat-form-field-appearance-fill .mat-form-field-underline::before {\n background-color: rgba(0, 0, 0, 0.42);\n}\n.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-label {\n color: rgba(0, 0, 0, 0.38);\n}\n.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-underline::before {\n background-color: transparent;\n}\n\n.mat-form-field-appearance-outline .mat-form-field-outline {\n color: rgba(0, 0, 0, 0.12);\n}\n.mat-form-field-appearance-outline .mat-form-field-outline-thick {\n color: rgba(0, 0, 0, 0.87);\n}\n.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {\n color: #ef6c00;\n}\n.mat-form-field-appearance-outline.mat-focused.mat-accent .mat-form-field-outline-thick {\n color: #039be5;\n}\n.mat-form-field-appearance-outline.mat-focused.mat-warn .mat-form-field-outline-thick {\n color: #e53935;\n}\n.mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick {\n color: #e53935;\n}\n.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-label {\n color: rgba(0, 0, 0, 0.38);\n}\n.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline {\n color: rgba(0, 0, 0, 0.06);\n}\n\n.mat-icon.mat-primary {\n color: #ef6c00;\n}\n.mat-icon.mat-accent {\n color: #039be5;\n}\n.mat-icon.mat-warn {\n color: #e53935;\n}\n\n.mat-form-field-type-mat-native-select .mat-form-field-infix::after {\n color: rgba(0, 0, 0, 0.54);\n}\n\n.mat-input-element:disabled,\n.mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after {\n color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-input-element {\n caret-color: #ef6c00;\n}\n.mat-input-element::placeholder {\n color: rgba(0, 0, 0, 0.42);\n}\n.mat-input-element::-moz-placeholder {\n color: rgba(0, 0, 0, 0.42);\n}\n.mat-input-element::-webkit-input-placeholder {\n color: rgba(0, 0, 0, 0.42);\n}\n.mat-input-element:-ms-input-placeholder {\n color: rgba(0, 0, 0, 0.42);\n}\n\n.mat-form-field.mat-accent .mat-input-element {\n caret-color: #039be5;\n}\n\n.mat-form-field.mat-warn .mat-input-element,\n.mat-form-field-invalid .mat-input-element {\n caret-color: #e53935;\n}\n\n.mat-form-field-type-mat-native-select.mat-form-field-invalid .mat-form-field-infix::after {\n color: #e53935;\n}\n\n.mat-list-base .mat-list-item {\n color: rgba(0, 0, 0, 0.87);\n}\n.mat-list-base .mat-list-option {\n color: rgba(0, 0, 0, 0.87);\n}\n.mat-list-base .mat-subheader {\n color: rgba(0, 0, 0, 0.54);\n}\n.mat-list-base .mat-list-item-disabled {\n background-color: #eeeeee;\n color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-list-option:hover, .mat-list-option:focus,\n.mat-nav-list .mat-list-item:hover,\n.mat-nav-list .mat-list-item:focus,\n.mat-action-list .mat-list-item:hover,\n.mat-action-list .mat-list-item:focus {\n background: rgba(0, 0, 0, 0.04);\n}\n\n.mat-list-single-selected-option, .mat-list-single-selected-option:hover, .mat-list-single-selected-option:focus {\n background: rgba(0, 0, 0, 0.12);\n}\n\n.mat-menu-panel {\n background: white;\n}\n.mat-menu-panel:not([class*=mat-elevation-z]) {\n box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-menu-item {\n background: transparent;\n color: rgba(0, 0, 0, 0.87);\n}\n.mat-menu-item[disabled],\n.mat-menu-item[disabled] .mat-menu-submenu-icon,\n.mat-menu-item[disabled] .mat-icon-no-color {\n color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-menu-item .mat-icon-no-color,\n.mat-menu-submenu-icon {\n color: rgba(0, 0, 0, 0.54);\n}\n\n.mat-menu-item:hover:not([disabled]),\n.mat-menu-item.cdk-program-focused:not([disabled]),\n.mat-menu-item.cdk-keyboard-focused:not([disabled]),\n.mat-menu-item-highlighted:not([disabled]) {\n background: rgba(0, 0, 0, 0.04);\n}\n\n.mat-paginator {\n background: white;\n}\n\n.mat-paginator,\n.mat-paginator-page-size .mat-select-trigger {\n color: rgba(0, 0, 0, 0.54);\n}\n\n.mat-paginator-decrement,\n.mat-paginator-increment {\n border-top: 2px solid rgba(0, 0, 0, 0.54);\n border-right: 2px solid rgba(0, 0, 0, 0.54);\n}\n\n.mat-paginator-first,\n.mat-paginator-last {\n border-top: 2px solid rgba(0, 0, 0, 0.54);\n}\n\n.mat-icon-button[disabled] .mat-paginator-decrement,\n.mat-icon-button[disabled] .mat-paginator-increment,\n.mat-icon-button[disabled] .mat-paginator-first,\n.mat-icon-button[disabled] .mat-paginator-last {\n border-color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-paginator-container {\n min-height: 56px;\n}\n\n.mat-progress-bar-background {\n fill: #f7d7bc;\n}\n\n.mat-progress-bar-buffer {\n background-color: #f7d7bc;\n}\n\n.mat-progress-bar-fill::after {\n background-color: #ef6c00;\n}\n\n.mat-progress-bar.mat-accent .mat-progress-bar-background {\n fill: #bce2f5;\n}\n.mat-progress-bar.mat-accent .mat-progress-bar-buffer {\n background-color: #bce2f5;\n}\n.mat-progress-bar.mat-accent .mat-progress-bar-fill::after {\n background-color: #039be5;\n}\n\n.mat-progress-bar.mat-warn .mat-progress-bar-background {\n fill: #f5cac9;\n}\n.mat-progress-bar.mat-warn .mat-progress-bar-buffer {\n background-color: #f5cac9;\n}\n.mat-progress-bar.mat-warn .mat-progress-bar-fill::after {\n background-color: #e53935;\n}\n\n.mat-progress-spinner circle, .mat-spinner circle {\n stroke: #ef6c00;\n}\n.mat-progress-spinner.mat-accent circle, .mat-spinner.mat-accent circle {\n stroke: #039be5;\n}\n.mat-progress-spinner.mat-warn circle, .mat-spinner.mat-warn circle {\n stroke: #e53935;\n}\n\n.mat-radio-outer-circle {\n border-color: rgba(0, 0, 0, 0.54);\n}\n\n.mat-radio-button.mat-primary.mat-radio-checked .mat-radio-outer-circle {\n border-color: #ef6c00;\n}\n.mat-radio-button.mat-primary .mat-radio-inner-circle,\n.mat-radio-button.mat-primary .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple), .mat-radio-button.mat-primary.mat-radio-checked .mat-radio-persistent-ripple, .mat-radio-button.mat-primary:active .mat-radio-persistent-ripple {\n background-color: #ef6c00;\n}\n.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {\n border-color: #039be5;\n}\n.mat-radio-button.mat-accent .mat-radio-inner-circle,\n.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple), .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-persistent-ripple, .mat-radio-button.mat-accent:active .mat-radio-persistent-ripple {\n background-color: #039be5;\n}\n.mat-radio-button.mat-warn.mat-radio-checked .mat-radio-outer-circle {\n border-color: #e53935;\n}\n.mat-radio-button.mat-warn .mat-radio-inner-circle,\n.mat-radio-button.mat-warn .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple), .mat-radio-button.mat-warn.mat-radio-checked .mat-radio-persistent-ripple, .mat-radio-button.mat-warn:active .mat-radio-persistent-ripple {\n background-color: #e53935;\n}\n.mat-radio-button.mat-radio-disabled.mat-radio-checked .mat-radio-outer-circle,\n.mat-radio-button.mat-radio-disabled .mat-radio-outer-circle {\n border-color: rgba(0, 0, 0, 0.38);\n}\n.mat-radio-button.mat-radio-disabled .mat-radio-ripple .mat-ripple-element,\n.mat-radio-button.mat-radio-disabled .mat-radio-inner-circle {\n background-color: rgba(0, 0, 0, 0.38);\n}\n.mat-radio-button.mat-radio-disabled .mat-radio-label-content {\n color: rgba(0, 0, 0, 0.38);\n}\n.mat-radio-button .mat-ripple-element {\n background-color: black;\n}\n\n.mat-select-value {\n color: rgba(0, 0, 0, 0.87);\n}\n\n.mat-select-placeholder {\n color: rgba(0, 0, 0, 0.42);\n}\n\n.mat-select-disabled .mat-select-value {\n color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-select-arrow {\n color: rgba(0, 0, 0, 0.54);\n}\n\n.mat-select-panel {\n background: white;\n}\n.mat-select-panel:not([class*=mat-elevation-z]) {\n box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);\n}\n.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) {\n background: rgba(0, 0, 0, 0.12);\n}\n\n.mat-form-field.mat-focused.mat-primary .mat-select-arrow {\n color: #ef6c00;\n}\n.mat-form-field.mat-focused.mat-accent .mat-select-arrow {\n color: #039be5;\n}\n.mat-form-field.mat-focused.mat-warn .mat-select-arrow {\n color: #e53935;\n}\n.mat-form-field .mat-select.mat-select-invalid .mat-select-arrow {\n color: #e53935;\n}\n.mat-form-field .mat-select.mat-select-disabled .mat-select-arrow {\n color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-drawer-container {\n background-color: #fafafa;\n color: rgba(0, 0, 0, 0.87);\n}\n\n.mat-drawer {\n background-color: white;\n color: rgba(0, 0, 0, 0.87);\n}\n.mat-drawer.mat-drawer-push {\n background-color: white;\n}\n.mat-drawer:not(.mat-drawer-side) {\n box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);\n}\n\n.mat-drawer-side {\n border-right: solid 1px rgba(0, 0, 0, 0.12);\n}\n.mat-drawer-side.mat-drawer-end {\n border-left: solid 1px rgba(0, 0, 0, 0.12);\n border-right: none;\n}\n\n[dir=rtl] .mat-drawer-side {\n border-left: solid 1px rgba(0, 0, 0, 0.12);\n border-right: none;\n}\n[dir=rtl] .mat-drawer-side.mat-drawer-end {\n border-left: none;\n border-right: solid 1px rgba(0, 0, 0, 0.12);\n}\n\n.mat-drawer-backdrop.mat-drawer-shown {\n background-color: rgba(0, 0, 0, 0.6);\n}\n\n.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {\n background-color: #039be5;\n}\n.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {\n background-color: rgba(3, 155, 229, 0.54);\n}\n.mat-slide-toggle.mat-checked .mat-ripple-element {\n background-color: #039be5;\n}\n.mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-thumb {\n background-color: #ef6c00;\n}\n.mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-bar {\n background-color: rgba(239, 108, 0, 0.54);\n}\n.mat-slide-toggle.mat-primary.mat-checked .mat-ripple-element {\n background-color: #ef6c00;\n}\n.mat-slide-toggle.mat-warn.mat-checked .mat-slide-toggle-thumb {\n background-color: #e53935;\n}\n.mat-slide-toggle.mat-warn.mat-checked .mat-slide-toggle-bar {\n background-color: rgba(229, 57, 53, 0.54);\n}\n.mat-slide-toggle.mat-warn.mat-checked .mat-ripple-element {\n background-color: #e53935;\n}\n.mat-slide-toggle:not(.mat-checked) .mat-ripple-element {\n background-color: black;\n}\n\n.mat-slide-toggle-thumb {\n box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);\n background-color: #fafafa;\n}\n\n.mat-slide-toggle-bar {\n background-color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-slider-track-background {\n background-color: rgba(0, 0, 0, 0.26);\n}\n\n.mat-slider.mat-primary .mat-slider-track-fill,\n.mat-slider.mat-primary .mat-slider-thumb,\n.mat-slider.mat-primary .mat-slider-thumb-label {\n background-color: #ef6c00;\n}\n.mat-slider.mat-primary .mat-slider-thumb-label-text {\n color: white;\n}\n.mat-slider.mat-primary .mat-slider-focus-ring {\n background-color: rgba(239, 108, 0, 0.2);\n}\n.mat-slider.mat-accent .mat-slider-track-fill,\n.mat-slider.mat-accent .mat-slider-thumb,\n.mat-slider.mat-accent .mat-slider-thumb-label {\n background-color: #039be5;\n}\n.mat-slider.mat-accent .mat-slider-thumb-label-text {\n color: white;\n}\n.mat-slider.mat-accent .mat-slider-focus-ring {\n background-color: rgba(3, 155, 229, 0.2);\n}\n.mat-slider.mat-warn .mat-slider-track-fill,\n.mat-slider.mat-warn .mat-slider-thumb,\n.mat-slider.mat-warn .mat-slider-thumb-label {\n background-color: #e53935;\n}\n.mat-slider.mat-warn .mat-slider-thumb-label-text {\n color: white;\n}\n.mat-slider.mat-warn .mat-slider-focus-ring {\n background-color: rgba(229, 57, 53, 0.2);\n}\n\n.mat-slider:hover .mat-slider-track-background,\n.mat-slider.cdk-focused .mat-slider-track-background {\n background-color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-slider.mat-slider-disabled .mat-slider-track-background,\n.mat-slider.mat-slider-disabled .mat-slider-track-fill,\n.mat-slider.mat-slider-disabled .mat-slider-thumb {\n background-color: rgba(0, 0, 0, 0.26);\n}\n.mat-slider.mat-slider-disabled:hover .mat-slider-track-background {\n background-color: rgba(0, 0, 0, 0.26);\n}\n\n.mat-slider.mat-slider-min-value .mat-slider-focus-ring {\n background-color: rgba(0, 0, 0, 0.12);\n}\n.mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb,\n.mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label {\n background-color: rgba(0, 0, 0, 0.87);\n}\n.mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb,\n.mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label {\n background-color: rgba(0, 0, 0, 0.26);\n}\n.mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {\n border-color: rgba(0, 0, 0, 0.26);\n background-color: transparent;\n}\n.mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover .mat-slider-thumb, .mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused .mat-slider-thumb {\n border-color: rgba(0, 0, 0, 0.38);\n}\n.mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover.mat-slider-disabled .mat-slider-thumb, .mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused.mat-slider-disabled .mat-slider-thumb {\n border-color: rgba(0, 0, 0, 0.26);\n}\n\n.mat-slider-has-ticks .mat-slider-wrapper::after {\n border-color: rgba(0, 0, 0, 0.7);\n}\n\n.mat-slider-horizontal .mat-slider-ticks {\n background-image: repeating-linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) 2px, transparent 0, transparent);\n background-image: -moz-repeating-linear-gradient(0.0001deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) 2px, transparent 0, transparent);\n}\n\n.mat-slider-vertical .mat-slider-ticks {\n background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) 2px, transparent 0, transparent);\n}\n\n.mat-step-header.cdk-keyboard-focused, .mat-step-header.cdk-program-focused, .mat-step-header:hover:not([aria-disabled]), .mat-step-header:hover[aria-disabled=false] {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.mat-step-header:hover[aria-disabled=true] {\n cursor: default;\n}\n@media (hover: none) {\n .mat-step-header:hover {\n background: none;\n }\n}\n.mat-step-header .mat-step-label,\n.mat-step-header .mat-step-optional {\n color: rgba(0, 0, 0, 0.54);\n}\n.mat-step-header .mat-step-icon {\n background-color: rgba(0, 0, 0, 0.54);\n color: white;\n}\n.mat-step-header .mat-step-icon-selected,\n.mat-step-header .mat-step-icon-state-done,\n.mat-step-header .mat-step-icon-state-edit {\n background-color: #ef6c00;\n color: white;\n}\n.mat-step-header.mat-accent .mat-step-icon {\n color: white;\n}\n.mat-step-header.mat-accent .mat-step-icon-selected,\n.mat-step-header.mat-accent .mat-step-icon-state-done,\n.mat-step-header.mat-accent .mat-step-icon-state-edit {\n background-color: #039be5;\n color: white;\n}\n.mat-step-header.mat-warn .mat-step-icon {\n color: white;\n}\n.mat-step-header.mat-warn .mat-step-icon-selected,\n.mat-step-header.mat-warn .mat-step-icon-state-done,\n.mat-step-header.mat-warn .mat-step-icon-state-edit {\n background-color: #e53935;\n color: white;\n}\n.mat-step-header .mat-step-icon-state-error {\n background-color: transparent;\n color: #e53935;\n}\n.mat-step-header .mat-step-label.mat-step-label-active {\n color: rgba(0, 0, 0, 0.87);\n}\n.mat-step-header .mat-step-label.mat-step-label-error {\n color: #e53935;\n}\n\n.mat-stepper-horizontal, .mat-stepper-vertical {\n background-color: white;\n}\n\n.mat-stepper-vertical-line::before {\n border-left-color: rgba(0, 0, 0, 0.12);\n}\n\n.mat-horizontal-stepper-header::before,\n.mat-horizontal-stepper-header::after,\n.mat-stepper-horizontal-line {\n border-top-color: rgba(0, 0, 0, 0.12);\n}\n\n.mat-horizontal-stepper-header {\n height: 72px;\n}\n\n.mat-stepper-label-position-bottom .mat-horizontal-stepper-header,\n.mat-vertical-stepper-header {\n padding: 24px 24px;\n}\n\n.mat-stepper-vertical-line::before {\n top: -16px;\n bottom: -16px;\n}\n\n.mat-stepper-label-position-bottom .mat-horizontal-stepper-header::after, .mat-stepper-label-position-bottom .mat-horizontal-stepper-header::before {\n top: 36px;\n}\n\n.mat-stepper-label-position-bottom .mat-stepper-horizontal-line {\n top: 36px;\n}\n\n.mat-sort-header-arrow {\n color: #757575;\n}\n\n.mat-tab-nav-bar,\n.mat-tab-header {\n border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n}\n\n.mat-tab-group-inverted-header .mat-tab-nav-bar,\n.mat-tab-group-inverted-header .mat-tab-header {\n border-top: 1px solid rgba(0, 0, 0, 0.12);\n border-bottom: none;\n}\n\n.mat-tab-label, .mat-tab-link {\n color: rgba(0, 0, 0, 0.87);\n}\n.mat-tab-label.mat-tab-disabled, .mat-tab-link.mat-tab-disabled {\n color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-tab-header-pagination-chevron {\n border-color: rgba(0, 0, 0, 0.87);\n}\n\n.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n border-color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-tab-group[class*=mat-background-] > .mat-tab-header,\n.mat-tab-nav-bar[class*=mat-background-] {\n border-bottom: none;\n border-top: none;\n}\n\n.mat-tab-group.mat-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-group.mat-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),\n.mat-tab-group.mat-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),\n.mat-tab-group.mat-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),\n.mat-tab-nav-bar.mat-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),\n.mat-tab-nav-bar.mat-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {\n background-color: rgba(255, 224, 178, 0.3);\n}\n.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {\n background-color: #ef6c00;\n}\n.mat-tab-group.mat-primary.mat-background-primary > .mat-tab-header .mat-ink-bar, .mat-tab-group.mat-primary.mat-background-primary > .mat-tab-link-container .mat-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary > .mat-tab-header .mat-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary > .mat-tab-link-container .mat-ink-bar {\n background-color: white;\n}\n.mat-tab-group.mat-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-group.mat-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),\n.mat-tab-group.mat-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),\n.mat-tab-group.mat-accent .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),\n.mat-tab-nav-bar.mat-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),\n.mat-tab-nav-bar.mat-accent .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {\n background-color: rgba(128, 216, 255, 0.3);\n}\n.mat-tab-group.mat-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent .mat-ink-bar {\n background-color: #039be5;\n}\n.mat-tab-group.mat-accent.mat-background-accent > .mat-tab-header .mat-ink-bar, .mat-tab-group.mat-accent.mat-background-accent > .mat-tab-link-container .mat-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent > .mat-tab-header .mat-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent > .mat-tab-link-container .mat-ink-bar {\n background-color: white;\n}\n.mat-tab-group.mat-warn .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-group.mat-warn .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),\n.mat-tab-group.mat-warn .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),\n.mat-tab-group.mat-warn .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-warn .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-warn .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),\n.mat-tab-nav-bar.mat-warn .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),\n.mat-tab-nav-bar.mat-warn .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {\n background-color: rgba(255, 205, 210, 0.3);\n}\n.mat-tab-group.mat-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn .mat-ink-bar {\n background-color: #e53935;\n}\n.mat-tab-group.mat-warn.mat-background-warn > .mat-tab-header .mat-ink-bar, .mat-tab-group.mat-warn.mat-background-warn > .mat-tab-link-container .mat-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn > .mat-tab-header .mat-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn > .mat-tab-link-container .mat-ink-bar {\n background-color: white;\n}\n.mat-tab-group.mat-background-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-group.mat-background-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),\n.mat-tab-group.mat-background-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),\n.mat-tab-group.mat-background-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-background-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-background-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),\n.mat-tab-nav-bar.mat-background-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),\n.mat-tab-nav-bar.mat-background-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {\n background-color: rgba(255, 224, 178, 0.3);\n}\n.mat-tab-group.mat-background-primary > .mat-tab-header, .mat-tab-group.mat-background-primary > .mat-tab-link-container, .mat-tab-group.mat-background-primary > .mat-tab-header-pagination, .mat-tab-nav-bar.mat-background-primary > .mat-tab-header, .mat-tab-nav-bar.mat-background-primary > .mat-tab-link-container, .mat-tab-nav-bar.mat-background-primary > .mat-tab-header-pagination {\n background-color: #ef6c00;\n}\n.mat-tab-group.mat-background-primary > .mat-tab-header .mat-tab-label, .mat-tab-group.mat-background-primary > .mat-tab-link-container .mat-tab-link, .mat-tab-nav-bar.mat-background-primary > .mat-tab-header .mat-tab-label, .mat-tab-nav-bar.mat-background-primary > .mat-tab-link-container .mat-tab-link {\n color: white;\n}\n.mat-tab-group.mat-background-primary > .mat-tab-header .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-primary > .mat-tab-link-container .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary > .mat-tab-header .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary > .mat-tab-link-container .mat-tab-link.mat-tab-disabled {\n color: rgba(255, 255, 255, 0.4);\n}\n.mat-tab-group.mat-background-primary > .mat-tab-header .mat-tab-header-pagination-chevron,\n.mat-tab-group.mat-background-primary > .mat-tab-header-pagination .mat-tab-header-pagination-chevron,\n.mat-tab-group.mat-background-primary > .mat-tab-link-container .mat-focus-indicator::before,\n.mat-tab-group.mat-background-primary > .mat-tab-header .mat-focus-indicator::before, .mat-tab-nav-bar.mat-background-primary > .mat-tab-header .mat-tab-header-pagination-chevron,\n.mat-tab-nav-bar.mat-background-primary > .mat-tab-header-pagination .mat-tab-header-pagination-chevron,\n.mat-tab-nav-bar.mat-background-primary > .mat-tab-link-container .mat-focus-indicator::before,\n.mat-tab-nav-bar.mat-background-primary > .mat-tab-header .mat-focus-indicator::before {\n border-color: white;\n}\n.mat-tab-group.mat-background-primary > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,\n.mat-tab-group.mat-background-primary > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,\n.mat-tab-nav-bar.mat-background-primary > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n border-color: white;\n opacity: 0.4;\n}\n.mat-tab-group.mat-background-primary > .mat-tab-header .mat-ripple-element,\n.mat-tab-group.mat-background-primary > .mat-tab-link-container .mat-ripple-element,\n.mat-tab-group.mat-background-primary > .mat-tab-header-pagination .mat-ripple-element, .mat-tab-nav-bar.mat-background-primary > .mat-tab-header .mat-ripple-element,\n.mat-tab-nav-bar.mat-background-primary > .mat-tab-link-container .mat-ripple-element,\n.mat-tab-nav-bar.mat-background-primary > .mat-tab-header-pagination .mat-ripple-element {\n background-color: white;\n opacity: 0.12;\n}\n.mat-tab-group.mat-background-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-group.mat-background-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),\n.mat-tab-group.mat-background-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),\n.mat-tab-group.mat-background-accent .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-background-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-background-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),\n.mat-tab-nav-bar.mat-background-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),\n.mat-tab-nav-bar.mat-background-accent .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {\n background-color: rgba(128, 216, 255, 0.3);\n}\n.mat-tab-group.mat-background-accent > .mat-tab-header, .mat-tab-group.mat-background-accent > .mat-tab-link-container, .mat-tab-group.mat-background-accent > .mat-tab-header-pagination, .mat-tab-nav-bar.mat-background-accent > .mat-tab-header, .mat-tab-nav-bar.mat-background-accent > .mat-tab-link-container, .mat-tab-nav-bar.mat-background-accent > .mat-tab-header-pagination {\n background-color: #039be5;\n}\n.mat-tab-group.mat-background-accent > .mat-tab-header .mat-tab-label, .mat-tab-group.mat-background-accent > .mat-tab-link-container .mat-tab-link, .mat-tab-nav-bar.mat-background-accent > .mat-tab-header .mat-tab-label, .mat-tab-nav-bar.mat-background-accent > .mat-tab-link-container .mat-tab-link {\n color: white;\n}\n.mat-tab-group.mat-background-accent > .mat-tab-header .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-accent > .mat-tab-link-container .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent > .mat-tab-header .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent > .mat-tab-link-container .mat-tab-link.mat-tab-disabled {\n color: rgba(255, 255, 255, 0.4);\n}\n.mat-tab-group.mat-background-accent > .mat-tab-header .mat-tab-header-pagination-chevron,\n.mat-tab-group.mat-background-accent > .mat-tab-header-pagination .mat-tab-header-pagination-chevron,\n.mat-tab-group.mat-background-accent > .mat-tab-link-container .mat-focus-indicator::before,\n.mat-tab-group.mat-background-accent > .mat-tab-header .mat-focus-indicator::before, .mat-tab-nav-bar.mat-background-accent > .mat-tab-header .mat-tab-header-pagination-chevron,\n.mat-tab-nav-bar.mat-background-accent > .mat-tab-header-pagination .mat-tab-header-pagination-chevron,\n.mat-tab-nav-bar.mat-background-accent > .mat-tab-link-container .mat-focus-indicator::before,\n.mat-tab-nav-bar.mat-background-accent > .mat-tab-header .mat-focus-indicator::before {\n border-color: white;\n}\n.mat-tab-group.mat-background-accent > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,\n.mat-tab-group.mat-background-accent > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,\n.mat-tab-nav-bar.mat-background-accent > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n border-color: white;\n opacity: 0.4;\n}\n.mat-tab-group.mat-background-accent > .mat-tab-header .mat-ripple-element,\n.mat-tab-group.mat-background-accent > .mat-tab-link-container .mat-ripple-element,\n.mat-tab-group.mat-background-accent > .mat-tab-header-pagination .mat-ripple-element, .mat-tab-nav-bar.mat-background-accent > .mat-tab-header .mat-ripple-element,\n.mat-tab-nav-bar.mat-background-accent > .mat-tab-link-container .mat-ripple-element,\n.mat-tab-nav-bar.mat-background-accent > .mat-tab-header-pagination .mat-ripple-element {\n background-color: white;\n opacity: 0.12;\n}\n.mat-tab-group.mat-background-warn .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-group.mat-background-warn .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),\n.mat-tab-group.mat-background-warn .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),\n.mat-tab-group.mat-background-warn .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-background-warn .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-background-warn .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),\n.mat-tab-nav-bar.mat-background-warn .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),\n.mat-tab-nav-bar.mat-background-warn .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {\n background-color: rgba(255, 205, 210, 0.3);\n}\n.mat-tab-group.mat-background-warn > .mat-tab-header, .mat-tab-group.mat-background-warn > .mat-tab-link-container, .mat-tab-group.mat-background-warn > .mat-tab-header-pagination, .mat-tab-nav-bar.mat-background-warn > .mat-tab-header, .mat-tab-nav-bar.mat-background-warn > .mat-tab-link-container, .mat-tab-nav-bar.mat-background-warn > .mat-tab-header-pagination {\n background-color: #e53935;\n}\n.mat-tab-group.mat-background-warn > .mat-tab-header .mat-tab-label, .mat-tab-group.mat-background-warn > .mat-tab-link-container .mat-tab-link, .mat-tab-nav-bar.mat-background-warn > .mat-tab-header .mat-tab-label, .mat-tab-nav-bar.mat-background-warn > .mat-tab-link-container .mat-tab-link {\n color: white;\n}\n.mat-tab-group.mat-background-warn > .mat-tab-header .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-warn > .mat-tab-link-container .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn > .mat-tab-header .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn > .mat-tab-link-container .mat-tab-link.mat-tab-disabled {\n color: rgba(255, 255, 255, 0.4);\n}\n.mat-tab-group.mat-background-warn > .mat-tab-header .mat-tab-header-pagination-chevron,\n.mat-tab-group.mat-background-warn > .mat-tab-header-pagination .mat-tab-header-pagination-chevron,\n.mat-tab-group.mat-background-warn > .mat-tab-link-container .mat-focus-indicator::before,\n.mat-tab-group.mat-background-warn > .mat-tab-header .mat-focus-indicator::before, .mat-tab-nav-bar.mat-background-warn > .mat-tab-header .mat-tab-header-pagination-chevron,\n.mat-tab-nav-bar.mat-background-warn > .mat-tab-header-pagination .mat-tab-header-pagination-chevron,\n.mat-tab-nav-bar.mat-background-warn > .mat-tab-link-container .mat-focus-indicator::before,\n.mat-tab-nav-bar.mat-background-warn > .mat-tab-header .mat-focus-indicator::before {\n border-color: white;\n}\n.mat-tab-group.mat-background-warn > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,\n.mat-tab-group.mat-background-warn > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,\n.mat-tab-nav-bar.mat-background-warn > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n border-color: white;\n opacity: 0.4;\n}\n.mat-tab-group.mat-background-warn > .mat-tab-header .mat-ripple-element,\n.mat-tab-group.mat-background-warn > .mat-tab-link-container .mat-ripple-element,\n.mat-tab-group.mat-background-warn > .mat-tab-header-pagination .mat-ripple-element, .mat-tab-nav-bar.mat-background-warn > .mat-tab-header .mat-ripple-element,\n.mat-tab-nav-bar.mat-background-warn > .mat-tab-link-container .mat-ripple-element,\n.mat-tab-nav-bar.mat-background-warn > .mat-tab-header-pagination .mat-ripple-element {\n background-color: white;\n opacity: 0.12;\n}\n\n.mat-toolbar {\n background: whitesmoke;\n color: rgba(0, 0, 0, 0.87);\n}\n.mat-toolbar.mat-primary {\n background: #ef6c00;\n color: white;\n}\n.mat-toolbar.mat-accent {\n background: #039be5;\n color: white;\n}\n.mat-toolbar.mat-warn {\n background: #e53935;\n color: white;\n}\n.mat-toolbar .mat-form-field-underline,\n.mat-toolbar .mat-form-field-ripple,\n.mat-toolbar .mat-focused .mat-form-field-ripple {\n background-color: currentColor;\n}\n.mat-toolbar .mat-form-field-label,\n.mat-toolbar .mat-focused .mat-form-field-label,\n.mat-toolbar .mat-select-value,\n.mat-toolbar .mat-select-arrow,\n.mat-toolbar .mat-form-field.mat-focused .mat-select-arrow {\n color: inherit;\n}\n.mat-toolbar .mat-input-element {\n caret-color: currentColor;\n}\n\n.mat-toolbar-multiple-rows {\n min-height: 64px;\n}\n\n.mat-toolbar-row, .mat-toolbar-single-row {\n height: 64px;\n}\n\n@media (max-width: 599px) {\n .mat-toolbar-multiple-rows {\n min-height: 56px;\n }\n\n .mat-toolbar-row, .mat-toolbar-single-row {\n height: 56px;\n }\n}\n.mat-tooltip {\n background: rgba(97, 97, 97, 0.9);\n}\n\n.mat-tree {\n background: white;\n}\n\n.mat-tree-node,\n.mat-nested-tree-node {\n color: rgba(0, 0, 0, 0.87);\n}\n\n.mat-tree-node {\n min-height: 48px;\n}\n\n.mat-snack-bar-container {\n color: rgba(255, 255, 255, 0.7);\n background: #323232;\n box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-simple-snackbar-action {\n color: #039be5;\n}\n\nbody {\n font-family: \"Roboto\", \"Helvetica Neue\", sans-serif;\n}\n\n.td-dialog-title {\n font-family: \"Roboto\", \"Helvetica Neue\", sans-serif;\n font-size: 20px;\n font-weight: 500;\n}\n\n.td-dialog-message {\n font-family: \"Roboto\", \"Helvetica Neue\", sans-serif;\n font-size: 16px;\n font-weight: 400;\n line-height: 28px;\n}\n\n.td-key {\n font-family: \"Roboto\", \"Helvetica Neue\", sans-serif;\n font-size: 14px;\n}\n\n.td-message-label {\n font-family: \"Roboto\", \"Helvetica Neue\", sans-serif;\n font-size: 14px;\n font-weight: 600;\n line-height: 24px;\n}\n\n.td-message-sublabel {\n font-family: \"Roboto\", \"Helvetica Neue\", sans-serif;\n font-size: 14px;\n}\n\ntd-navigation-drawer .td-navigation-drawer-title {\n font-family: \"Roboto\", \"Helvetica Neue\", sans-serif;\n font-size: 16px;\n}\ntd-navigation-drawer .td-navigation-drawer-name {\n font-family: \"Roboto\", \"Helvetica Neue\", sans-serif;\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n}\ntd-navigation-drawer .td-navigation-drawer-menu-toggle {\n font-family: \"Roboto\", \"Helvetica Neue\", sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 24px;\n}\n\ntd-breadcrumb:last-of-type {\n font-weight: bold;\n cursor: default;\n}\n\nmat-list-item mat-icon,\n.mat-list-item-content mat-icon {\n color: rgba(0, 0, 0, 0.54);\n}\nmat-list-item mat-icon[matListAvatar],\n.mat-list-item-content mat-icon[matListAvatar] {\n background-color: rgba(0, 0, 0, 0.04);\n}\n\n.mat-list-text p {\n color: rgba(0, 0, 0, 0.38);\n}\n\ntable.mat-table {\n background: transparent;\n}\n\n.mat-row:hover, .mat-row:focus {\n background-color: rgba(0, 0, 0, 0.04);\n}\n\n.mat-drawer-container {\n background-color: #e0e0e0;\n}\n\n[mat-icon-button].td-layout-menu-button {\n margin-left: 0;\n}\n::ng-deep [dir=rtl] [mat-icon-button].td-layout-menu-button {\n margin-right: 0;\n margin-left: 6px;\n}\n\ntd-layout-nav mat-toolbar,\ntd-layout-nav-list mat-toolbar,\ntd-layout-manage-list mat-toolbar,\ntd-layout-card-over mat-toolbar,\ntd-navigation-drawer mat-toolbar,\ntd-layout mat-toolbar {\n box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);\n z-index: 1;\n}\n\nbody[dense] td-layout-nav mat-toolbar.td-layout-toolbar.mat-toolbar-row, body[dense] td-layout-nav mat-toolbar.td-layout-toolbar.mat-toolbar-single-row,\nbody[dense] td-layout-nav-list mat-toolbar.td-layout-toolbar.mat-toolbar-row,\nbody[dense] td-layout-nav-list mat-toolbar.td-layout-toolbar.mat-toolbar-single-row,\nbody[dense] td-layout-card-over mat-toolbar.td-layout-toolbar.mat-toolbar-row,\nbody[dense] td-layout-card-over mat-toolbar.td-layout-toolbar.mat-toolbar-single-row,\ntd-layout-nav[dense] mat-toolbar.td-layout-toolbar.mat-toolbar-row,\ntd-layout-nav[dense] mat-toolbar.td-layout-toolbar.mat-toolbar-single-row,\ntd-layout-nav-list[dense] mat-toolbar.td-layout-toolbar.mat-toolbar-row,\ntd-layout-nav-list[dense] mat-toolbar.td-layout-toolbar.mat-toolbar-single-row,\ntd-layout-card-over[dense] mat-toolbar.td-layout-toolbar.mat-toolbar-row,\ntd-layout-card-over[dense] mat-toolbar.td-layout-toolbar.mat-toolbar-single-row {\n height: 48px;\n}\n\nbody[dense] td-layout-card-over .td-layout-card-over-wrapper,\ntd-layout-card-over[dense] .td-layout-card-over-wrapper {\n margin: -48px;\n margin-left: 0;\n margin-right: 0;\n}\n\n.mat-drawer-side.td-layout-sidenav {\n box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n}\n\n.td-layout-footer {\n background: whitesmoke;\n color: rgba(0, 0, 0, 0.87);\n box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n}\n.td-layout-footer.mat-primary {\n background: #ef6c00;\n}\n.td-layout-footer.mat-primary,\n.td-layout-footer.mat-primary mat-icon {\n color: white;\n}\n.td-layout-footer.mat-accent {\n background: #039be5;\n}\n.td-layout-footer.mat-accent,\n.td-layout-footer.mat-accent mat-icon {\n color: white;\n}\n.td-layout-footer.mat-warn {\n background: #e53935;\n}\n.td-layout-footer.mat-warn,\n.td-layout-footer.mat-warn mat-icon {\n color: white;\n}\n\ntd-file-upload .td-file-upload-cancel mat-icon {\n background-color: #fafafa;\n}\n\ntd-file-input {\n /**\n * Class that is added ondragenter by the [TdFileDrop] directive.\n */\n}\ntd-file-input .drop-zone {\n transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);\n box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n}\n\n.mat-toolbar.td-window-dialog-toolbar {\n color: rgba(0, 0, 0, 0.87);\n border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n background: none;\n}\n\n.td-dialog-message {\n color: rgba(0, 0, 0, 0.54);\n}\n\n.td-json-formatter-wrapper .function::after,\n.td-json-formatter-wrapper .date::after,\n.td-json-formatter-wrapper .td-object-name::after,\n.td-json-formatter-wrapper .td-array-length::after {\n content: \"‎\";\n}\n.td-json-formatter-wrapper .td-key.td-key-node:focus, .td-json-formatter-wrapper .td-key.td-key-node:hover {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.td-json-formatter-wrapper .td-key.td-key-node .td-node-icon {\n color: rgba(0, 0, 0, 0.54);\n}\n.td-json-formatter-wrapper .key {\n color: #ef6c00;\n}\n.td-json-formatter-wrapper .value .string {\n color: #e53935;\n}\n.td-json-formatter-wrapper .value .number {\n color: #039be5;\n}\n.td-json-formatter-wrapper .value .boolean {\n color: #039be5;\n}\n.td-json-formatter-wrapper .value .null,\n.td-json-formatter-wrapper .value .undefined {\n color: rgba(0, 0, 0, 0.38);\n}\n.td-json-formatter-wrapper .value .function {\n color: #ef6c00;\n}\n.td-json-formatter-wrapper .value .date {\n color: rgba(0, 0, 0, 0.87);\n}\n\n.td-message.mat-primary {\n color: #ef6c00;\n background-color: rgba(239, 108, 0, 0.15);\n}\n.td-message.mat-accent {\n color: #039be5;\n background-color: rgba(3, 155, 229, 0.15);\n}\n.td-message.mat-warn {\n color: #e53935;\n background-color: rgba(229, 57, 53, 0.15);\n}\n\n.td-side-sheet-container {\n background-color: white;\n}","@import '../theme-functions';\n@import '../rtl';\n\n// Standard button sizing.\n$mat-button-padding: 0 rem(0.6) !default;\n$mat-button-min-width: rem(8.8) !default;\n$mat-button-margin: rem(0.6) rem(0.8) !default;\n$mat-button-line-height: rem(3.6) !default;\n$mat-button-border-radius: 3px !default;\n\n// FAB sizing.\n$mat-fab-border-radius: 50%;\n$mat-fab-size: rem(5.6) !default;\n$mat-fab-line-height: rem(5.6) !default;\n$mat-fab-padding: rem(1.6) !default;\n$mat-fab-mini-size: rem(4) !default;\n$mat-fab-mini-line-height: rem(4) !default;\n\n// Icon button sizing.\n$mat-icon-button-height: rem(4) !default;\n$mat-icon-button-width: rem(4) !default;\n$mat-icon-button-margin: rem(0.6) !default;\n$mat-icon-border-radius: $mat-fab-border-radius;\n\n/** Mixin to create distinct classes for fab positions, e.g. \".mat-fab-position-bottom-right\". */\n@mixin mat-fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) {\n [mat-fab].mat-fab-position-#{$spot},\n .mat-fab.mat-fab-position-#{$spot},\n [mat-fab].mat-fab-#{$spot},\n .mat-fab.mat-fab-#{$spot} {\n top: $top;\n @include rtl(right, $right, $left);\n @include rtl(left, $left, $right);\n\n bottom: $bottom;\n position: absolute;\n\n &.fixed {\n position: fixed;\n }\n }\n}\n\n@mixin td-button-utilities() {\n $mat-fab-pos-offset: calc(($mat-fab-size - $mat-fab-padding) / 2);\n @include mat-fab-position(bottom-right, auto, $mat-fab-pos-offset, $mat-fab-pos-offset, auto);\n @include mat-fab-position(bottom-left, auto, auto, $mat-fab-pos-offset, $mat-fab-pos-offset);\n @include mat-fab-position(top-right, $mat-fab-pos-offset, $mat-fab-pos-offset, auto, auto);\n @include mat-fab-position(top-left, $mat-fab-pos-offset, auto, auto, $mat-fab-pos-offset);\n\n button {\n &[mat-icon-button] {\n &.mat-icon-button-mini {\n height: 24px;\n line-height: 24px;\n width: 24px;\n }\n }\n }\n}\n","/* stylelint-disable function-url-quotes, no-duplicate-selectors */\n\n/*\n*\n* Responsive attributes\n*\n* References:\n* 1) https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex\n* 2) https://css-tricks.com/almanac/properties/f/flex/\n* 3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/\n* 4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items\n* 5) http://godban.com.ua/projects/flexgrid\n*\n*/\n\n// Layout\n// ------------------------------\n\n$baseline-grid: 8px !default;\n$layout-gutter-width: ($baseline-grid * 2) !default;\n\n$layout-breakpoint-xs: 600px !default;\n$layout-breakpoint-sm: 960px !default;\n$layout-breakpoint-md: 1280px !default;\n$layout-breakpoint-lg: 1920px !default;\n\n@-moz-document url-prefix() {\n [layout-fill] {\n margin: 0;\n width: 100%;\n min-height: 100%;\n height: 100%;\n }\n}\n\n@mixin flex-order-for-name($sizes: null) {\n @if $sizes == null {\n $sizes: '';\n\n [flex-order] {\n order: 0;\n }\n }\n\n @for $i from -20 through 20 {\n $order: '';\n $suffix: '';\n\n @each $s in $sizes {\n @if $s != '' {\n $suffix: '-#{$s}=\"#{$i}\"';\n } @else {\n $suffix: '=\"#{$i}\"';\n }\n\n $order: '[flex-order#{$suffix}]';\n }\n\n #{$order} {\n order: #{$i};\n }\n }\n}\n\n@mixin offset-for-name($sizes: null) {\n @if $sizes == null {\n $sizes: '';\n }\n\n @for $i from 0 through 19 {\n $offsets: '';\n $suffix: '';\n\n @each $s in $sizes {\n @if $s != '' {\n $suffix: '-#{$s}=\"#{$i * 5}\"';\n } @else {\n $suffix: '=\"#{$i * 5}\"';\n }\n\n $offsets: $offsets + '[flex-offset#{$suffix}], ';\n }\n\n #{$offsets} {\n margin-left: #{$i * 5 + '%'};\n }\n }\n\n @each $i in 33 {\n $offsets: '';\n $suffix: '';\n\n @each $s in $sizes {\n @if $s != '' {\n $suffix: '-#{$s}=\"#{$i}\"';\n } @else {\n $suffix: '=\"#{$i}\"';\n }\n\n $offsets: '[flex-offset#{$suffix}], ';\n }\n\n #{$offsets} {\n margin-left: calc(100% / 3);\n }\n }\n\n @each $i in 66 {\n $offsets: '';\n $suffix: '';\n\n @each $s in $sizes {\n @if $s != '' {\n $suffix: '-#{$s}=\"#{$i}\"';\n } @else {\n $suffix: '=\"#{$i}\"';\n }\n\n $offsets: '[flex-offset#{$suffix}]';\n }\n\n #{$offsets} {\n margin-left: calc(200% / 3);\n }\n }\n}\n\n@mixin layout-for-name($name: null) {\n @if $name == null {\n $name: '';\n }\n @if $name != '' {\n $name: '-#{$name}';\n }\n\n [layout#{$name}],\n [layout#{$name}='column'],\n [layout#{$name}='row'] {\n box-sizing: border-box;\n display: flex;\n }\n [layout#{$name}='column'] {\n flex-direction: column;\n }\n [layout#{$name}='row'] {\n flex-direction: row;\n }\n}\n\n@mixin flex-properties-for-name($name: null) {\n $flexName: 'flex';\n @if $name != null {\n $flexName: 'flex-#{$name}';\n $name: '-#{$name}';\n } @else {\n $name: '';\n }\n\n [#{$flexName}] {\n flex: 1;\n box-sizing: border-box;\n }\n // === flex: 1 1 0%;\n\n // IE mediaQuery hack for 8,9,10 to set the flex-basis properly for 'flex' values\n // Details:\n // Do not use unitless flex-basis values in the flex shorthand because IE 10-11 will error.\n // Also use 0% instead of 0px since minifiers will often convert 0px to 0 (which is unitless and will have the same problem).\n // Safari, however, fails with flex-basis : 0% and requires flex-basis : 0px\n @media screen\\0 {\n [#{$flexName}] {\n flex: 1 1 0%;\n }\n }\n\n [#{$flexName}='grow'],\n [#{$flexName}-grow] {\n flex: 1 1 100%;\n box-sizing: border-box;\n }\n [#{$flexName}='initial'],\n [#{$flexName}-initial] {\n flex: 0 1 auto;\n box-sizing: border-box;\n }\n [#{$flexName}='auto'],\n [#{$flexName}-auto] {\n flex: 1 1 auto;\n box-sizing: border-box;\n }\n [#{$flexName}='none'],\n [#{$flexName}-none] {\n flex: 0 0 auto;\n box-sizing: border-box;\n }\n [#{$flexName}='noshrink'],\n [#{$flexName}-noshrink] {\n flex: 1 0 auto;\n box-sizing: border-box;\n }\n [#{$flexName}='nogrow'],\n [#{$flexName}-nogrow] {\n flex: 0 1 auto;\n box-sizing: border-box;\n }\n\n // (1-20) * 5 = 0-100%\n @for $i from 0 through 20 {\n $value: #{$i * 5 + '%'};\n\n [#{$flexName}='#{$i * 5}'] {\n flex: 1 1 #{$value};\n max-width: #{$value};\n max-height: 100%;\n box-sizing: border-box;\n }\n\n [layout='row'] > [#{$flexName}='#{$i * 5}'],\n [layout#{$name}='row'] > [#{$flexName}='#{$i * 5}'] {\n flex: 1 1 #{$value};\n max-width: #{$value};\n max-height: 100%;\n box-sizing: border-box;\n }\n\n [layout='column'] > [#{$flexName}='#{$i * 5}'],\n [layout#{$name}='column'] > [#{$flexName}='#{$i * 5}'] {\n flex: 1 1 #{$value};\n max-width: 100%;\n max-height: #{$value};\n box-sizing: border-box;\n }\n }\n\n [layout='row'],\n [layout#{$name}='row'] {\n > [#{$flexName}='33'],\n > [#{$flexName}='33'] {\n flex: 1 1 33%;\n max-width: calc(100% / 3);\n max-height: 100%;\n box-sizing: border-box;\n }\n > [#{$flexName}='34'],\n > [#{$flexName}='34'] {\n flex: 1 1 34%;\n max-width: 34%;\n max-height: 100%;\n box-sizing: border-box;\n }\n > [#{$flexName}='66'],\n > [#{$flexName}='66'] {\n flex: 1 1 66%;\n max-width: calc(200% / 3);\n max-height: 100%;\n box-sizing: border-box;\n }\n > [#{$flexName}='67'],\n > [#{$flexName}='67'] {\n flex: 1 1 67%;\n max-width: 67%;\n max-height: 100%;\n box-sizing: border-box;\n }\n }\n [layout='column'],\n [layout#{$name}='column'] {\n > [#{$flexName}='33'],\n > [#{$flexName}='33'] {\n flex: 1 1 33%;\n max-width: 100%;\n max-height: calc(100% / 3);\n box-sizing: border-box;\n }\n > [#{$flexName}='34'],\n > [#{$flexName}='34'] {\n flex: 1 1 34%;\n max-width: 100%;\n max-height: 34%;\n box-sizing: border-box;\n }\n > [#{$flexName}='66'],\n > [#{$flexName}='66'] {\n flex: 1 1 66%;\n max-width: 100%;\n max-height: calc(200% / 3);\n box-sizing: border-box;\n }\n > [#{$flexName}='67'],\n > [#{$flexName}='67'] {\n flex: 1 1 67%;\n max-width: 100%;\n max-height: 67%;\n box-sizing: border-box;\n }\n }\n}\n\n@mixin layout-align-for-name($suffix: null) {\n // Alignment attributes for layout containers' children\n // Arrange on the Main Axis\n // center, start, end, space-between, space-around\n // flex-start is the default for justify-content\n // ------------------------------\n\n $name: 'layout-align';\n @if $suffix != null {\n $name: 'layout-align-#{$suffix}';\n }\n\n [#{$name}],\n [#{$name}=\"start stretch\"] // defaults\n {\n justify-content: flex-start;\n align-content: stretch;\n align-items: stretch;\n }\n // Main Axis Center\n [#{$name}='start'],\n [#{$name}='start start'],\n [#{$name}='start center'],\n [#{$name}='start end'],\n [#{$name}='start stretch'] {\n justify-content: flex-start;\n }\n\n // Main Axis Center\n [#{$name}='center'],\n [#{$name}='center start'],\n [#{$name}='center center'],\n [#{$name}='center end'],\n [#{$name}='center stretch'] {\n justify-content: center;\n }\n\n // Main Axis End\n [#{$name}=\"end\"], //stretch\n [#{$name}=\"end center\"],\n [#{$name}=\"end start\"],\n [#{$name}=\"end end\"],\n [#{$name}=\"end stretch\"] {\n justify-content: flex-end;\n }\n\n // Main Axis Space Around\n [#{$name}=\"space-around\"], //stretch\n [#{$name}=\"space-around center\"],\n [#{$name}=\"space-around start\"],\n [#{$name}=\"space-around end\"],\n [#{$name}=\"space-around stretch\"] {\n justify-content: space-around;\n }\n\n // Main Axis Space Between\n [#{$name}=\"space-between\"], //stretch\n [#{$name}=\"space-between center\"],\n [#{$name}=\"space-between start\"],\n [#{$name}=\"space-between end\"],\n [#{$name}=\"space-between stretch\"] {\n justify-content: space-between;\n }\n\n // Arrange on the Cross Axis\n // center, start, end\n // stretch is the default for align-items\n // ------------------------------\n\n // Cross Axis Start\n [#{$name}='start start'],\n [#{$name}='center start'],\n [#{$name}='end start'],\n [#{$name}='space-between start'],\n [#{$name}='space-around start'] {\n align-items: flex-start;\n align-content: flex-start;\n }\n\n // Cross Axis Center\n [#{$name}='start center'],\n [#{$name}='center center'],\n [#{$name}='end center'],\n [#{$name}='space-between center'],\n [#{$name}='space-around center'] {\n align-items: center;\n align-content: center;\n max-width: 100%;\n\n // IE11 overflow https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container\n & > * {\n max-width: 100%;\n box-sizing: border-box;\n }\n }\n\n // Cross Axis Center IE overflow fix\n [#{$name}='start center'] > *,\n [#{$name}='center center'] > *,\n [#{$name}='end center'] > *,\n [#{$name}='space-between center'] > *,\n [#{$name}='space-around center'] > * {\n max-width: 100%;\n box-sizing: border-box;\n }\n\n // Cross Axis End\n [#{$name}='start end'],\n [#{$name}='center end'],\n [#{$name}='end end'],\n [#{$name}='space-between end'],\n [#{$name}='space-around end'] {\n align-items: flex-end;\n align-content: flex-end;\n }\n\n // Cross Axis stretch\n [#{$name}='start stretch'],\n [#{$name}='center stretch'],\n [#{$name}='end stretch'],\n [#{$name}='space-between stretch'],\n [#{$name}='space-around stretch'] {\n align-items: stretch;\n align-content: stretch;\n }\n}\n\n@mixin layout-padding-margin() {\n [layout-padding] > [flex-sm],\n [layout-padding] > [flex-lt-md] {\n padding: calc($layout-gutter-width / 4);\n }\n\n [layout-padding],\n [layout-padding] > [flex],\n [layout-padding] > [flex-gt-sm],\n [layout-padding] > [flex-md],\n [layout-padding] > [flex-lt-lg] {\n padding: calc($layout-gutter-width / 2);\n }\n\n [layout-padding] > [flex-gt-md],\n [layout-padding] > [flex-lg] {\n padding: calc($layout-gutter-width / 1);\n }\n\n [layout-margin] > [flex-sm],\n [layout-margin] > [flex-lt-md] {\n margin: calc($layout-gutter-width / 4);\n }\n\n [layout-margin],\n [layout-margin] > [flex],\n [layout-margin] > [flex-gt-sm],\n [layout-margin] > [flex-md],\n [layout-margin] > [flex-lt-lg] {\n margin: calc($layout-gutter-width / 2);\n }\n\n [layout-margin] > [flex-gt-md],\n [layout-margin] > [flex-lg] {\n margin: calc($layout-gutter-width / 1);\n }\n\n [layout-wrap] {\n flex-wrap: wrap;\n }\n\n [layout-nowrap] {\n flex-wrap: nowrap;\n }\n\n [layout-fill] {\n margin: 0;\n width: 100%;\n min-height: 100%;\n height: 100%;\n }\n}\n\n@mixin layouts_for_breakpoint($name: null) {\n @include flex-order-for-name($name);\n @include offset-for-name($name);\n @include layout-align-for-name($name);\n\n @include flex-properties-for-name($name);\n @include layout-for-name($name);\n}\n\n@mixin covalent-layout() {\n /*\n * Apply Mixins to create Layout/Flexbox styles\n *\n */\n\n @include layouts_for_breakpoint();\n @include layout-padding-margin();\n\n /**\n * `hide-gt-sm show-gt-lg` should hide from 600px to 1200px\n * `show-md hide-gt-sm` should show from 0px to 960px and hide at >960px\n * `hide-gt-md show-gt-sm` should show everywhere (show overrides hide)`\n *\n * hide means hide everywhere\n * Sizes:\n * $layout-breakpoint-xs: 600px !default;\n * $layout-breakpoint-sm: 960px !default;\n * $layout-breakpoint-md: 1280px !default;\n * $layout-breakpoint-lg: 1920px !default;\n */\n\n @media (max-width: $layout-breakpoint-xs - 1) {\n // Xtra-SMALL SCREEN\n [hide-xs],\n [hide] {\n &:not([show-xs]):not([show]) {\n display: none;\n }\n }\n @include layouts_for_breakpoint(xs);\n }\n\n @media (min-width: $layout-breakpoint-xs) {\n // BIGGER THAN Xtra-SMALL SCREEN\n @include layouts_for_breakpoint(gt-xs);\n }\n\n @media (min-width: $layout-breakpoint-xs) and (max-width: $layout-breakpoint-sm - 1) {\n // SMALL SCREEN\n [hide-sm],\n [hide-gt-xs] {\n &:not([show-gt-xs]):not([show-sm]):not([show]) {\n display: none;\n }\n }\n\n [hide-sm]:not([show-sm]):not([show]) {\n display: none;\n }\n @include layouts_for_breakpoint(sm);\n }\n\n @media (min-width: $layout-breakpoint-sm) {\n // BIGGER THAN SMALL SCREEN\n @include layouts_for_breakpoint(gt-sm);\n }\n\n @media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {\n // MEDIUM SCREEN\n [hide],\n [hide-gt-xs],\n [hide-gt-sm] {\n &:not([show-gt-xs]):not([show-gt-sm]):not([show-md]):not([show]) {\n display: none;\n }\n }\n\n [hide-md]:not([show-md]):not([show]) {\n display: none;\n }\n @include layouts_for_breakpoint(md);\n }\n\n @media (min-width: $layout-breakpoint-md) {\n // BIGGER THAN MEDIUM SCREEN\n @include layouts_for_breakpoint(gt-md);\n }\n\n @media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {\n // LARGE SCREEN\n [hide],\n [hide-gt-xs],\n [hide-gt-sm],\n [hide-gt-md] {\n &:not([show-gt-xs]):not([show-gt-sm]):not([show-gt-md]):not([show-lg]):not([show]) {\n display: none;\n }\n }\n\n [hide-lg]:not([show-lg]):not([show]) {\n display: none;\n }\n\n @include layouts_for_breakpoint(lg);\n }\n\n @media (min-width: $layout-breakpoint-lg) {\n // BIGGER THAN LARGE SCREEN\n @include layouts_for_breakpoint(gt-lg);\n @include layouts_for_breakpoint(xl);\n\n // BIGGER THAN LARGE SCREEN\n [hide],\n [hide-gt-xs],\n [hide-gt-sm],\n [hide-gt-md],\n [hide-gt-lg] {\n &:not([show-gt-xs]):not([show-gt-sm]):not([show-gt-md]):not([show-gt-lg]):not([show-xl]):not([show]) {\n display: none;\n }\n }\n\n [hide-xl]:not([show-xl]):not([show-gt-lg]):not([show]) {\n display: none;\n }\n }\n}\n","/* stylelint-disable selector-class-pattern */\n\n@import '../theme-functions';\n@import '../palette-dark';\n\n@mixin td-colors-dark() {\n // Text color\n\n // 500\n .tc-dark-red-500 {\n color: mat-color($mat-dark-red, 500) !important;\n }\n\n .tc-dark-pink-500 {\n color: mat-color($mat-dark-pink, 500) !important;\n }\n\n .tc-dark-purple-500 {\n color: mat-color($mat-dark-purple, 500) !important;\n }\n\n .tc-dark-deep-purple-500 {\n color: mat-color($mat-dark-deep-purple, 500) !important;\n }\n\n .tc-dark-indigo-500 {\n color: mat-color($mat-dark-indigo, 500) !important;\n }\n\n .tc-dark-blue-500 {\n color: mat-color($mat-dark-blue, 500) !important;\n }\n\n .tc-dark-light-blue-500 {\n color: mat-color($mat-dark-light-blue, 500) !important;\n }\n\n .tc-dark-cyan-500 {\n color: mat-color($mat-dark-cyan, 500) !important;\n }\n\n .tc-dark-teal-500 {\n color: mat-color($mat-dark-teal, 500) !important;\n }\n\n .tc-dark-green-500 {\n color: mat-color($mat-dark-green, 500) !important;\n }\n\n .tc-dark-light-green-500 {\n color: mat-color($mat-dark-light-green, 500) !important;\n }\n\n .tc-dark-lime-500 {\n color: mat-color($mat-dark-lime, 500) !important;\n }\n\n .tc-dark-yellow-500 {\n color: mat-color($mat-dark-yellow, 500) !important;\n }\n\n .tc-dark-amber-500 {\n color: mat-color($mat-dark-amber, 500) !important;\n }\n\n .tc-dark-orange-500 {\n color: mat-color($mat-dark-orange, 500) !important;\n }\n\n .tc-dark-deep-orange-500 {\n color: mat-color($mat-dark-deep-orange, 500) !important;\n }\n\n .tc-dark-brown-500 {\n color: mat-color($mat-dark-brown, 500) !important;\n }\n\n .tc-dark-grey-500 {\n color: mat-color($mat-dark-grey, 500) !important;\n }\n\n .tc-dark-blue-grey-500 {\n color: mat-color($mat-dark-blue-grey, 500) !important;\n }\n\n // B100\n .tc-dark-red-B100 {\n color: mat-color($mat-dark-red, B100) !important;\n }\n\n .tc-dark-pink-B100 {\n color: mat-color($mat-dark-pink, B100) !important;\n }\n\n .tc-dark-purple-B100 {\n color: mat-color($mat-dark-purple, B100) !important;\n }\n\n .tc-dark-deep-purple-B100 {\n color: mat-color($mat-dark-deep-purple, B100) !important;\n }\n\n .tc-dark-indigo-B100 {\n color: mat-color($mat-dark-indigo, B100) !important;\n }\n\n .tc-dark-blue-B100 {\n color: mat-color($mat-dark-blue, B100) !important;\n }\n\n .tc-dark-light-blue-B100 {\n color: mat-color($mat-dark-light-blue, B100) !important;\n }\n\n .tc-dark-cyan-B100 {\n color: mat-color($mat-dark-cyan, B100) !important;\n }\n\n .tc-dark-teal-B100 {\n color: mat-color($mat-dark-teal, B100) !important;\n }\n\n .tc-dark-green-B100 {\n color: mat-color($mat-dark-green, B100) !important;\n }\n\n .tc-dark-light-green-B100 {\n color: mat-color($mat-dark-light-green, B100) !important;\n }\n\n .tc-dark-lime-B100 {\n color: mat-color($mat-dark-lime, B100) !important;\n }\n\n .tc-dark-yellow-B100 {\n color: mat-color($mat-dark-yellow, B100) !important;\n }\n\n .tc-dark-amber-B100 {\n color: mat-color($mat-dark-amber, B100) !important;\n }\n\n .tc-dark-orange-B100 {\n color: mat-color($mat-dark-orange, B100) !important;\n }\n\n .tc-dark-deep-orange-B100 {\n color: mat-color($mat-dark-deep-orange, B100) !important;\n }\n\n .tc-dark-brown-B100 {\n color: mat-color($mat-dark-brown, B100) !important;\n }\n\n .tc-dark-grey-B100 {\n color: mat-color($mat-dark-grey, B100) !important;\n }\n\n .tc-dark-blue-grey-B100 {\n color: mat-color($mat-dark-blue-grey, B100) !important;\n }\n\n // B65\n .tc-dark-red-B65 {\n color: mat-color($mat-dark-red, B65) !important;\n }\n\n .tc-dark-pink-B65 {\n color: mat-color($mat-dark-pink, B65) !important;\n }\n\n .tc-dark-purple-B65 {\n color: mat-color($mat-dark-purple, B65) !important;\n }\n\n .tc-dark-deep-purple-B65 {\n color: mat-color($mat-dark-deep-purple, B65) !important;\n }\n\n .tc-dark-indigo-B65 {\n color: mat-color($mat-dark-indigo, B65) !important;\n }\n\n .tc-dark-blue-B65 {\n color: mat-color($mat-dark-blue, B65) !important;\n }\n\n .tc-dark-light-blue-B65 {\n color: mat-color($mat-dark-light-blue, B65) !important;\n }\n\n .tc-dark-cyan-B65 {\n color: mat-color($mat-dark-cyan, B65) !important;\n }\n\n .tc-dark-teal-B65 {\n color: mat-color($mat-dark-teal, B65) !important;\n }\n\n .tc-dark-green-B65 {\n color: mat-color($mat-dark-green, B65) !important;\n }\n\n .tc-dark-light-green-B65 {\n color: mat-color($mat-dark-light-green, B65) !important;\n }\n\n .tc-dark-lime-B65 {\n color: mat-color($mat-dark-lime, B65) !important;\n }\n\n .tc-dark-yellow-B65 {\n color: mat-color($mat-dark-yellow, B65) !important;\n }\n\n .tc-dark-amber-B65 {\n color: mat-color($mat-dark-amber, B65) !important;\n }\n\n .tc-dark-orange-B65 {\n color: mat-color($mat-dark-orange, B65) !important;\n }\n\n .tc-dark-deep-orange-B65 {\n color: mat-color($mat-dark-deep-orange, B65) !important;\n }\n\n .tc-dark-brown-B65 {\n color: mat-color($mat-dark-brown, B65) !important;\n }\n\n .tc-dark-grey-B65 {\n color: mat-color($mat-dark-grey, B65) !important;\n }\n\n .tc-dark-blue-grey-B65 {\n color: mat-color($mat-dark-blue-grey, B65) !important;\n }\n\n // B40\n .tc-dark-red-B40 {\n color: mat-color($mat-dark-red, B40) !important;\n }\n\n .tc-dark-pink-B40 {\n color: mat-color($mat-dark-pink, B40) !important;\n }\n\n .tc-dark-purple-B40 {\n color: mat-color($mat-dark-purple, B40) !important;\n }\n\n .tc-dark-deep-purple-B40 {\n color: mat-color($mat-dark-deep-purple, B40) !important;\n }\n\n .tc-dark-indigo-B40 {\n color: mat-color($mat-dark-indigo, B40) !important;\n }\n\n .tc-dark-blue-B40 {\n color: mat-color($mat-dark-blue, B40) !important;\n }\n\n .tc-dark-light-blue-B40 {\n color: mat-color($mat-dark-light-blue, B40) !important;\n }\n\n .tc-dark-cyan-B40 {\n color: mat-color($mat-dark-cyan, B40) !important;\n }\n\n .tc-dark-teal-B40 {\n color: mat-color($mat-dark-teal, B40) !important;\n }\n\n .tc-dark-green-B40 {\n color: mat-color($mat-dark-green, B40) !important;\n }\n\n .tc-dark-light-green-B40 {\n color: mat-color($mat-dark-light-green, B40) !important;\n }\n\n .tc-dark-lime-B40 {\n color: mat-color($mat-dark-lime, B40) !important;\n }\n\n .tc-dark-yellow-B40 {\n color: mat-color($mat-dark-yellow, B40) !important;\n }\n\n .tc-dark-amber-B40 {\n color: mat-color($mat-dark-amber, B40) !important;\n }\n\n .tc-dark-orange-B40 {\n color: mat-color($mat-dark-orange, B40) !important;\n }\n\n .tc-dark-deep-orange-B40 {\n color: mat-color($mat-dark-deep-orange, B40) !important;\n }\n\n .tc-dark-brown-B40 {\n color: mat-color($mat-dark-brown, B40) !important;\n }\n\n .tc-dark-grey-B40 {\n color: mat-color($mat-dark-grey, B40) !important;\n }\n\n .tc-dark-blue-grey-B40 {\n color: mat-color($mat-dark-blue-grey, B40) !important;\n }\n\n // B30\n .tc-dark-red-B30 {\n color: mat-color($mat-dark-red, B30) !important;\n }\n\n .tc-dark-pink-B30 {\n color: mat-color($mat-dark-pink, B30) !important;\n }\n\n .tc-dark-purple-B30 {\n color: mat-color($mat-dark-purple, B30) !important;\n }\n\n .tc-dark-deep-purple-B30 {\n color: mat-color($mat-dark-deep-purple, B30) !important;\n }\n\n .tc-dark-indigo-B30 {\n color: mat-color($mat-dark-indigo, B30) !important;\n }\n\n .tc-dark-blue-B30 {\n color: mat-color($mat-dark-blue, B30) !important;\n }\n\n .tc-dark-light-blue-B30 {\n color: mat-color($mat-dark-light-blue, B30) !important;\n }\n\n .tc-dark-cyan-B30 {\n color: mat-color($mat-dark-cyan, B30) !important;\n }\n\n .tc-dark-teal-B30 {\n color: mat-color($mat-dark-teal, B30) !important;\n }\n\n .tc-dark-green-B30 {\n color: mat-color($mat-dark-green, B30) !important;\n }\n\n .tc-dark-light-green-B30 {\n color: mat-color($mat-dark-light-green, B30) !important;\n }\n\n .tc-dark-lime-B30 {\n color: mat-color($mat-dark-lime, B30) !important;\n }\n\n .tc-dark-yellow-B30 {\n color: mat-color($mat-dark-yellow, B30) !important;\n }\n\n .tc-dark-amber-B30 {\n color: mat-color($mat-dark-amber, B30) !important;\n }\n\n .tc-dark-orange-B30 {\n color: mat-color($mat-dark-orange, B30) !important;\n }\n\n .tc-dark-deep-orange-B30 {\n color: mat-color($mat-dark-deep-orange, B30) !important;\n }\n\n .tc-dark-brown-B30 {\n color: mat-color($mat-dark-brown, B30) !important;\n }\n\n .tc-dark-grey-B30 {\n color: mat-color($mat-dark-grey, B30) !important;\n }\n\n .tc-dark-blue-grey-B30 {\n color: mat-color($mat-dark-blue-grey, B30) !important;\n }\n\n // B15\n .tc-dark-red-B15 {\n color: mat-color($mat-dark-red, B15) !important;\n }\n\n .tc-dark-pink-B15 {\n color: mat-color($mat-dark-pink, B15) !important;\n }\n\n .tc-dark-purple-B15 {\n color: mat-color($mat-dark-purple, B15) !important;\n }\n\n .tc-dark-deep-purple-B15 {\n color: mat-color($mat-dark-deep-purple, B15) !important;\n }\n\n .tc-dark-indigo-B15 {\n color: mat-color($mat-dark-indigo, B15) !important;\n }\n\n .tc-dark-blue-B15 {\n color: mat-color($mat-dark-blue, B15) !important;\n }\n\n .tc-dark-light-blue-B15 {\n color: mat-color($mat-dark-light-blue, B15) !important;\n }\n\n .tc-dark-cyan-B15 {\n color: mat-color($mat-dark-cyan, B15) !important;\n }\n\n .tc-dark-teal-B15 {\n color: mat-color($mat-dark-teal, B15) !important;\n }\n\n .tc-dark-green-B15 {\n color: mat-color($mat-dark-green, B15) !important;\n }\n\n .tc-dark-light-green-B15 {\n color: mat-color($mat-dark-light-green, B15) !important;\n }\n\n .tc-dark-lime-B15 {\n color: mat-color($mat-dark-lime, B15) !important;\n }\n\n .tc-dark-yellow-B15 {\n color: mat-color($mat-dark-yellow, B15) !important;\n }\n\n .tc-dark-amber-B15 {\n color: mat-color($mat-dark-amber, B15) !important;\n }\n\n .tc-dark-orange-B15 {\n color: mat-color($mat-dark-orange, B15) !important;\n }\n\n .tc-dark-deep-orange-B15 {\n color: mat-color($mat-dark-deep-orange, B15) !important;\n }\n\n .tc-dark-brown-B15 {\n color: mat-color($mat-dark-brown, B15) !important;\n }\n\n .tc-dark-grey-B15 {\n color: mat-color($mat-dark-grey, B15) !important;\n }\n\n .tc-dark-blue-grey-B15 {\n color: mat-color($mat-dark-blue-grey, B15) !important;\n }\n\n // Background color\n\n // 500\n .bgc-dark-red-500 {\n background-color: mat-color($mat-dark-red, 500) !important;\n }\n\n .bgc-dark-pink-500 {\n background-color: mat-color($mat-dark-pink, 500) !important;\n }\n\n .bgc-dark-purple-500 {\n background-color: mat-color($mat-dark-purple, 500) !important;\n }\n\n .bgc-dark-deep-purple-500 {\n background-color: mat-color($mat-dark-deep-purple, 500) !important;\n }\n\n .bgc-dark-indigo-500 {\n background-color: mat-color($mat-dark-indigo, 500) !important;\n }\n\n .bgc-dark-blue-500 {\n background-color: mat-color($mat-dark-blue, 500) !important;\n }\n\n .bgc-dark-light-blue-500 {\n background-color: mat-color($mat-dark-light-blue, 500) !important;\n }\n\n .bgc-dark-cyan-500 {\n background-color: mat-color($mat-dark-cyan, 500) !important;\n }\n\n .bgc-dark-teal-500 {\n background-color: mat-color($mat-dark-teal, 500) !important;\n }\n\n .bgc-dark-green-500 {\n background-color: mat-color($mat-dark-green, 500) !important;\n }\n\n .bgc-dark-light-green-500 {\n background-color: mat-color($mat-dark-light-green, 500) !important;\n }\n\n .bgc-dark-lime-500 {\n background-color: mat-color($mat-dark-lime, 500) !important;\n }\n\n .bgc-dark-yellow-500 {\n background-color: mat-color($mat-dark-yellow, 500) !important;\n }\n\n .bgc-dark-amber-500 {\n background-color: mat-color($mat-dark-amber, 500) !important;\n }\n\n .bgc-dark-orange-500 {\n background-color: mat-color($mat-dark-orange, 500) !important;\n }\n\n .bgc-dark-deep-orange-500 {\n background-color: mat-color($mat-dark-deep-orange, 500) !important;\n }\n\n .bgc-dark-brown-500 {\n background-color: mat-color($mat-dark-brown, 500) !important;\n }\n\n .bgc-dark-grey-500 {\n background-color: mat-color($mat-dark-grey, 500) !important;\n }\n\n .bgc-dark-blue-grey-500 {\n background-color: mat-color($mat-dark-blue-grey, 500) !important;\n }\n\n // B100\n .bgc-dark-red-B100 {\n background-color: mat-color($mat-dark-red, B100) !important;\n }\n\n .bgc-dark-pink-B100 {\n background-color: mat-color($mat-dark-pink, B100) !important;\n }\n\n .bgc-dark-purple-B100 {\n background-color: mat-color($mat-dark-purple, B100) !important;\n }\n\n .bgc-dark-deep-purple-B100 {\n background-color: mat-color($mat-dark-deep-purple, B100) !important;\n }\n\n .bgc-dark-indigo-B100 {\n background-color: mat-color($mat-dark-indigo, B100) !important;\n }\n\n .bgc-dark-blue-B100 {\n background-color: mat-color($mat-dark-blue, B100) !important;\n }\n\n .bgc-dark-light-blue-B100 {\n background-color: mat-color($mat-dark-light-blue, B100) !important;\n }\n\n .bgc-dark-cyan-B100 {\n background-color: mat-color($mat-dark-cyan, B100) !important;\n }\n\n .bgc-dark-teal-B100 {\n background-color: mat-color($mat-dark-teal, B100) !important;\n }\n\n .bgc-dark-green-B100 {\n background-color: mat-color($mat-dark-green, B100) !important;\n }\n\n .bgc-dark-light-green-B100 {\n background-color: mat-color($mat-dark-light-green, B100) !important;\n }\n\n .bgc-dark-lime-B100 {\n background-color: mat-color($mat-dark-lime, B100) !important;\n }\n\n .bgc-dark-yellow-B100 {\n background-color: mat-color($mat-dark-yellow, B100) !important;\n }\n\n .bgc-dark-amber-B100 {\n background-color: mat-color($mat-dark-amber, B100) !important;\n }\n\n .bgc-dark-orange-B100 {\n background-color: mat-color($mat-dark-orange, B100) !important;\n }\n\n .bgc-dark-deep-orange-B100 {\n background-color: mat-color($mat-dark-deep-orange, B100) !important;\n }\n\n .bgc-dark-brown-B100 {\n background-color: mat-color($mat-dark-brown, B100) !important;\n }\n\n .bgc-dark-grey-B100 {\n background-color: mat-color($mat-dark-grey, B100) !important;\n }\n\n .bgc-dark-blue-grey-B100 {\n background-color: mat-color($mat-dark-blue-grey, B100) !important;\n }\n\n // B65\n .bgc-dark-red-B65 {\n background-color: mat-color($mat-dark-red, B65) !important;\n }\n\n .bgc-dark-pink-B65 {\n background-color: mat-color($mat-dark-pink, B65) !important;\n }\n\n .bgc-dark-purple-B65 {\n background-color: mat-color($mat-dark-purple, B65) !important;\n }\n\n .bgc-dark-deep-purple-B65 {\n background-color: mat-color($mat-dark-deep-purple, B65) !important;\n }\n\n .bgc-dark-indigo-B65 {\n background-color: mat-color($mat-dark-indigo, B65) !important;\n }\n\n .bgc-dark-blue-B65 {\n background-color: mat-color($mat-dark-blue, B65) !important;\n }\n\n .bgc-dark-light-blue-B65 {\n background-color: mat-color($mat-dark-light-blue, B65) !important;\n }\n\n .bgc-dark-cyan-B65 {\n background-color: mat-color($mat-dark-cyan, B65) !important;\n }\n\n .bgc-dark-teal-B65 {\n background-color: mat-color($mat-dark-teal, B65) !important;\n }\n\n .bgc-dark-green-B65 {\n background-color: mat-color($mat-dark-green, B65) !important;\n }\n\n .bgc-dark-light-green-B65 {\n background-color: mat-color($mat-dark-light-green, B65) !important;\n }\n\n .bgc-dark-lime-B65 {\n background-color: mat-color($mat-dark-lime, B65) !important;\n }\n\n .bgc-dark-yellow-B65 {\n background-color: mat-color($mat-dark-yellow, B65) !important;\n }\n\n .bgc-dark-amber-B65 {\n background-color: mat-color($mat-dark-amber, B65) !important;\n }\n\n .bgc-dark-orange-B65 {\n background-color: mat-color($mat-dark-orange, B65) !important;\n }\n\n .bgc-dark-deep-orange-B65 {\n background-color: mat-color($mat-dark-deep-orange, B65) !important;\n }\n\n .bgc-dark-brown-B65 {\n background-color: mat-color($mat-dark-brown, B65) !important;\n }\n\n .bgc-dark-grey-B65 {\n background-color: mat-color($mat-dark-grey, B65) !important;\n }\n\n .bgc-dark-blue-grey-B65 {\n background-color: mat-color($mat-dark-blue-grey, B65) !important;\n }\n\n // B40\n .bgc-dark-red-B40 {\n background-color: mat-color($mat-dark-red, B40) !important;\n }\n\n .bgc-dark-pink-B40 {\n background-color: mat-color($mat-dark-pink, B40) !important;\n }\n\n .bgc-dark-purple-B40 {\n background-color: mat-color($mat-dark-purple, B40) !important;\n }\n\n .bgc-dark-deep-purple-B40 {\n background-color: mat-color($mat-dark-deep-purple, B40) !important;\n }\n\n .bgc-dark-indigo-B40 {\n background-color: mat-color($mat-dark-indigo, B40) !important;\n }\n\n .bgc-dark-blue-B40 {\n background-color: mat-color($mat-dark-blue, B40) !important;\n }\n\n .bgc-dark-light-blue-B40 {\n background-color: mat-color($mat-dark-light-blue, B40) !important;\n }\n\n .bgc-dark-cyan-B40 {\n background-color: mat-color($mat-dark-cyan, B40) !important;\n }\n\n .bgc-dark-teal-B40 {\n background-color: mat-color($mat-dark-teal, B40) !important;\n }\n\n .bgc-dark-green-B40 {\n background-color: mat-color($mat-dark-green, B40) !important;\n }\n\n .bgc-dark-light-green-B40 {\n background-color: mat-color($mat-dark-light-green, B40) !important;\n }\n\n .bgc-dark-lime-B40 {\n background-color: mat-color($mat-dark-lime, B40) !important;\n }\n\n .bgc-dark-yellow-B40 {\n background-color: mat-color($mat-dark-yellow, B40) !important;\n }\n\n .bgc-dark-amber-B40 {\n background-color: mat-color($mat-dark-amber, B40) !important;\n }\n\n .bgc-dark-orange-B40 {\n background-color: mat-color($mat-dark-orange, B40) !important;\n }\n\n .bgc-dark-deep-orange-B40 {\n background-color: mat-color($mat-dark-deep-orange, B40) !important;\n }\n\n .bgc-dark-brown-B40 {\n background-color: mat-color($mat-dark-brown, B40) !important;\n }\n\n .bgc-dark-grey-B40 {\n background-color: mat-color($mat-dark-grey, B40) !important;\n }\n\n .bgc-dark-blue-grey-B40 {\n background-color: mat-color($mat-dark-blue-grey, B40) !important;\n }\n\n // B30\n .bgc-dark-red-B30 {\n background-color: mat-color($mat-dark-red, B30) !important;\n }\n\n .bgc-dark-pink-B30 {\n background-color: mat-color($mat-dark-pink, B30) !important;\n }\n\n .bgc-dark-purple-B30 {\n background-color: mat-color($mat-dark-purple, B30) !important;\n }\n\n .bgc-dark-deep-purple-B30 {\n background-color: mat-color($mat-dark-deep-purple, B30) !important;\n }\n\n .bgc-dark-indigo-B30 {\n background-color: mat-color($mat-dark-indigo, B30) !important;\n }\n\n .bgc-dark-blue-B30 {\n background-color: mat-color($mat-dark-blue, B30) !important;\n }\n\n .bgc-dark-light-blue-B30 {\n background-color: mat-color($mat-dark-light-blue, B30) !important;\n }\n\n .bgc-dark-cyan-B30 {\n background-color: mat-color($mat-dark-cyan, B30) !important;\n }\n\n .bgc-dark-teal-B30 {\n background-color: mat-color($mat-dark-teal, B30) !important;\n }\n\n .bgc-dark-green-B30 {\n background-color: mat-color($mat-dark-green, B30) !important;\n }\n\n .bgc-dark-light-green-B30 {\n background-color: mat-color($mat-dark-light-green, B30) !important;\n }\n\n .bgc-dark-lime-B30 {\n background-color: mat-color($mat-dark-lime, B30) !important;\n }\n\n .bgc-dark-yellow-B30 {\n background-color: mat-color($mat-dark-yellow, B30) !important;\n }\n\n .bgc-dark-amber-B30 {\n background-color: mat-color($mat-dark-amber, B30) !important;\n }\n\n .bgc-dark-orange-B30 {\n background-color: mat-color($mat-dark-orange, B30) !important;\n }\n\n .bgc-dark-deep-orange-B30 {\n background-color: mat-color($mat-dark-deep-orange, B30) !important;\n }\n\n .bgc-dark-brown-B30 {\n background-color: mat-color($mat-dark-brown, B30) !important;\n }\n\n .bgc-dark-grey-B30 {\n background-color: mat-color($mat-dark-grey, B30) !important;\n }\n\n .bgc-dark-blue-grey-B30 {\n background-color: mat-color($mat-dark-blue-grey, B30) !important;\n }\n\n // B15\n .bgc-dark-red-B15 {\n background-color: mat-color($mat-dark-red, B15) !important;\n }\n\n .bgc-dark-pink-B15 {\n background-color: mat-color($mat-dark-pink, B15) !important;\n }\n\n .bgc-dark-purple-B15 {\n background-color: mat-color($mat-dark-purple, B15) !important;\n }\n\n .bgc-dark-deep-purple-B15 {\n background-color: mat-color($mat-dark-deep-purple, B15) !important;\n }\n\n .bgc-dark-indigo-B15 {\n background-color: mat-color($mat-dark-indigo, B15) !important;\n }\n\n .bgc-dark-blue-B15 {\n background-color: mat-color($mat-dark-blue, B15) !important;\n }\n\n .bgc-dark-light-blue-B15 {\n background-color: mat-color($mat-dark-light-blue, B15) !important;\n }\n\n .bgc-dark-cyan-B15 {\n background-color: mat-color($mat-dark-cyan, B15) !important;\n }\n\n .bgc-dark-teal-B15 {\n background-color: mat-color($mat-dark-teal, B15) !important;\n }\n\n .bgc-dark-green-B15 {\n background-color: mat-color($mat-dark-green, B15) !important;\n }\n\n .bgc-dark-light-green-B15 {\n background-color: mat-color($mat-dark-light-green, B15) !important;\n }\n\n .bgc-dark-lime-B15 {\n background-color: mat-color($mat-dark-lime, B15) !important;\n }\n\n .bgc-dark-yellow-B15 {\n background-color: mat-color($mat-dark-yellow, B15) !important;\n }\n\n .bgc-dark-amber-B15 {\n background-color: mat-color($mat-dark-amber, B15) !important;\n }\n\n .bgc-dark-orange-B15 {\n background-color: mat-color($mat-dark-orange, B15) !important;\n }\n\n .bgc-dark-deep-orange-B15 {\n background-color: mat-color($mat-dark-deep-orange, B15) !important;\n }\n\n .bgc-dark-brown-B15 {\n background-color: mat-color($mat-dark-brown, B15) !important;\n }\n\n .bgc-dark-grey-B15 {\n background-color: mat-color($mat-dark-grey, B15) !important;\n }\n\n .bgc-dark-blue-grey-B15 {\n background-color: mat-color($mat-dark-blue-grey, B15) !important;\n }\n\n // Fill color\n\n // 500\n .fill-red-500 {\n fill: mat-color($mat-dark-red, 500) !important;\n }\n\n .fill-pink-500 {\n fill: mat-color($mat-dark-pink, 500) !important;\n }\n\n .fill-purple-500 {\n fill: mat-color($mat-dark-purple, 500) !important;\n }\n\n .fill-deep-purple-500 {\n fill: mat-color($mat-dark-deep-purple, 500) !important;\n }\n\n .fill-indigo-500 {\n fill: mat-color($mat-dark-indigo, 500) !important;\n }\n\n .fill-blue-500 {\n fill: mat-color($mat-dark-blue, 500) !important;\n }\n\n .fill-light-blue-500 {\n fill: mat-color($mat-dark-light-blue, 500) !important;\n }\n\n .fill-cyan-500 {\n fill: mat-color($mat-dark-cyan, 500) !important;\n }\n\n .fill-teal-500 {\n fill: mat-color($mat-dark-teal, 500) !important;\n }\n\n .fill-green-500 {\n fill: mat-color($mat-dark-green, 500) !important;\n }\n\n .fill-light-green-500 {\n fill: mat-color($mat-dark-light-green, 500) !important;\n }\n\n .fill-lime-500 {\n fill: mat-color($mat-dark-lime, 500) !important;\n }\n\n .fill-yellow-500 {\n fill: mat-color($mat-dark-yellow, 500) !important;\n }\n\n .fill-amber-500 {\n fill: mat-color($mat-dark-amber, 500) !important;\n }\n\n .fill-orange-500 {\n fill: mat-color($mat-dark-orange, 500) !important;\n }\n\n .fill-deep-orange-500 {\n fill: mat-color($mat-dark-deep-orange, 500) !important;\n }\n\n .fill-brown-500 {\n fill: mat-color($mat-dark-brown, 500) !important;\n }\n\n .fill-grey-500 {\n fill: mat-color($mat-dark-grey, 500) !important;\n }\n\n .fill-blue-grey-500 {\n fill: mat-color($mat-dark-blue-grey, 500) !important;\n }\n\n // B100\n .fill-red-B100 {\n fill: mat-color($mat-dark-red, B100) !important;\n }\n\n .fill-pink-B100 {\n fill: mat-color($mat-dark-pink, B100) !important;\n }\n\n .fill-purple-B100 {\n fill: mat-color($mat-dark-purple, B100) !important;\n }\n\n .fill-deep-purple-B100 {\n fill: mat-color($mat-dark-deep-purple, B100) !important;\n }\n\n .fill-indigo-B100 {\n fill: mat-color($mat-dark-indigo, B100) !important;\n }\n\n .fill-blue-B100 {\n fill: mat-color($mat-dark-blue, B100) !important;\n }\n\n .fill-light-blue-B100 {\n fill: mat-color($mat-dark-light-blue, B100) !important;\n }\n\n .fill-cyan-B100 {\n fill: mat-color($mat-dark-cyan, B100) !important;\n }\n\n .fill-teal-B100 {\n fill: mat-color($mat-dark-teal, B100) !important;\n }\n\n .fill-green-B100 {\n fill: mat-color($mat-dark-green, B100) !important;\n }\n\n .fill-light-green-B100 {\n fill: mat-color($mat-dark-light-green, B100) !important;\n }\n\n .fill-lime-B100 {\n fill: mat-color($mat-dark-lime, B100) !important;\n }\n\n .fill-yellow-B100 {\n fill: mat-color($mat-dark-yellow, B100) !important;\n }\n\n .fill-amber-B100 {\n fill: mat-color($mat-dark-amber, B100) !important;\n }\n\n .fill-orange-B100 {\n fill: mat-color($mat-dark-orange, B100) !important;\n }\n\n .fill-deep-orange-B100 {\n fill: mat-color($mat-dark-deep-orange, B100) !important;\n }\n\n .fill-brown-B100 {\n fill: mat-color($mat-dark-brown, B100) !important;\n }\n\n .fill-grey-B100 {\n fill: mat-color($mat-dark-grey, B100) !important;\n }\n\n .fill-blue-grey-B100 {\n fill: mat-color($mat-dark-blue-grey, B100) !important;\n }\n\n // B65\n .fill-red-B65 {\n fill: mat-color($mat-dark-red, B65) !important;\n }\n\n .fill-pink-B65 {\n fill: mat-color($mat-dark-pink, B65) !important;\n }\n\n .fill-purple-B65 {\n fill: mat-color($mat-dark-purple, B65) !important;\n }\n\n .fill-deep-purple-B65 {\n fill: mat-color($mat-dark-deep-purple, B65) !important;\n }\n\n .fill-indigo-B65 {\n fill: mat-color($mat-dark-indigo, B65) !important;\n }\n\n .fill-blue-B65 {\n fill: mat-color($mat-dark-blue, B65) !important;\n }\n\n .fill-light-blue-B65 {\n fill: mat-color($mat-dark-light-blue, B65) !important;\n }\n\n .fill-cyan-B65 {\n fill: mat-color($mat-dark-cyan, B65) !important;\n }\n\n .fill-teal-B65 {\n fill: mat-color($mat-dark-teal, B65) !important;\n }\n\n .fill-green-B65 {\n fill: mat-color($mat-dark-green, B65) !important;\n }\n\n .fill-light-green-B65 {\n fill: mat-color($mat-dark-light-green, B65) !important;\n }\n\n .fill-lime-B65 {\n fill: mat-color($mat-dark-lime, B65) !important;\n }\n\n .fill-yellow-B65 {\n fill: mat-color($mat-dark-yellow, B65) !important;\n }\n\n .fill-amber-B65 {\n fill: mat-color($mat-dark-amber, B65) !important;\n }\n\n .fill-orange-B65 {\n fill: mat-color($mat-dark-orange, B65) !important;\n }\n\n .fill-deep-orange-B65 {\n fill: mat-color($mat-dark-deep-orange, B65) !important;\n }\n\n .fill-brown-B65 {\n fill: mat-color($mat-dark-brown, B65) !important;\n }\n\n .fill-grey-B65 {\n fill: mat-color($mat-dark-grey, B65) !important;\n }\n\n .fill-blue-grey-B65 {\n fill: mat-color($mat-dark-blue-grey, B65) !important;\n }\n\n // B40\n .fill-red-B40 {\n fill: mat-color($mat-dark-red, B40) !important;\n }\n\n .fill-pink-B40 {\n fill: mat-color($mat-dark-pink, B40) !important;\n }\n\n .fill-purple-B40 {\n fill: mat-color($mat-dark-purple, B40) !important;\n }\n\n .fill-deep-purple-B40 {\n fill: mat-color($mat-dark-deep-purple, B40) !important;\n }\n\n .fill-indigo-B40 {\n fill: mat-color($mat-dark-indigo, B40) !important;\n }\n\n .fill-blue-B40 {\n fill: mat-color($mat-dark-blue, B40) !important;\n }\n\n .fill-light-blue-B40 {\n fill: mat-color($mat-dark-light-blue, B40) !important;\n }\n\n .fill-cyan-B40 {\n fill: mat-color($mat-dark-cyan, B40) !important;\n }\n\n .fill-teal-B40 {\n fill: mat-color($mat-dark-teal, B40) !important;\n }\n\n .fill-green-B40 {\n fill: mat-color($mat-dark-green, B40) !important;\n }\n\n .fill-light-green-B40 {\n fill: mat-color($mat-dark-light-green, B40) !important;\n }\n\n .fill-lime-B40 {\n fill: mat-color($mat-dark-lime, B40) !important;\n }\n\n .fill-yellow-B40 {\n fill: mat-color($mat-dark-yellow, B40) !important;\n }\n\n .fill-amber-B40 {\n fill: mat-color($mat-dark-amber, B40) !important;\n }\n\n .fill-orange-B40 {\n fill: mat-color($mat-dark-orange, B40) !important;\n }\n\n .fill-deep-orange-B40 {\n fill: mat-color($mat-dark-deep-orange, B40) !important;\n }\n\n .fill-brown-B40 {\n fill: mat-color($mat-dark-brown, B40) !important;\n }\n\n .fill-grey-B40 {\n fill: mat-color($mat-dark-grey, B40) !important;\n }\n\n .fill-blue-grey-B40 {\n fill: mat-color($mat-dark-blue-grey, B40) !important;\n }\n\n // B30\n .fill-red-B30 {\n fill: mat-color($mat-dark-red, B30) !important;\n }\n\n .fill-pink-B30 {\n fill: mat-color($mat-dark-pink, B30) !important;\n }\n\n .fill-purple-B30 {\n fill: mat-color($mat-dark-purple, B30) !important;\n }\n\n .fill-deep-purple-B30 {\n fill: mat-color($mat-dark-deep-purple, B30) !important;\n }\n\n .fill-indigo-B30 {\n fill: mat-color($mat-dark-indigo, B30) !important;\n }\n\n .fill-blue-B30 {\n fill: mat-color($mat-dark-blue, B30) !important;\n }\n\n .fill-light-blue-B30 {\n fill: mat-color($mat-dark-light-blue, B30) !important;\n }\n\n .fill-cyan-B30 {\n fill: mat-color($mat-dark-cyan, B30) !important;\n }\n\n .fill-teal-B30 {\n fill: mat-color($mat-dark-teal, B30) !important;\n }\n\n .fill-green-B30 {\n fill: mat-color($mat-dark-green, B30) !important;\n }\n\n .fill-light-green-B30 {\n fill: mat-color($mat-dark-light-green, B30) !important;\n }\n\n .fill-lime-B30 {\n fill: mat-color($mat-dark-lime, B30) !important;\n }\n\n .fill-yellow-B30 {\n fill: mat-color($mat-dark-yellow, B30) !important;\n }\n\n .fill-amber-B30 {\n fill: mat-color($mat-dark-amber, B30) !important;\n }\n\n .fill-orange-B30 {\n fill: mat-color($mat-dark-orange, B30) !important;\n }\n\n .fill-deep-orange-B30 {\n fill: mat-color($mat-dark-deep-orange, B30) !important;\n }\n\n .fill-brown-B30 {\n fill: mat-color($mat-dark-brown, B30) !important;\n }\n\n .fill-grey-B30 {\n fill: mat-color($mat-dark-grey, B30) !important;\n }\n\n .fill-blue-grey-B30 {\n fill: mat-color($mat-dark-blue-grey, B30) !important;\n }\n\n // B15\n .fill-red-B15 {\n fill: mat-color($mat-dark-red, B15) !important;\n }\n\n .fill-pink-B15 {\n fill: mat-color($mat-dark-pink, B15) !important;\n }\n\n .fill-purple-B15 {\n fill: mat-color($mat-dark-purple, B15) !important;\n }\n\n .fill-deep-purple-B15 {\n fill: mat-color($mat-dark-deep-purple, B15) !important;\n }\n\n .fill-indigo-B15 {\n fill: mat-color($mat-dark-indigo, B15) !important;\n }\n\n .fill-blue-B15 {\n fill: mat-color($mat-dark-blue, B15) !important;\n }\n\n .fill-light-blue-B15 {\n fill: mat-color($mat-dark-light-blue, B15) !important;\n }\n\n .fill-cyan-B15 {\n fill: mat-color($mat-dark-cyan, B15) !important;\n }\n\n .fill-teal-B15 {\n fill: mat-color($mat-dark-teal, B15) !important;\n }\n\n .fill-green-B15 {\n fill: mat-color($mat-dark-green, B15) !important;\n }\n\n .fill-light-green-B15 {\n fill: mat-color($mat-dark-light-green, B15) !important;\n }\n\n .fill-lime-B15 {\n fill: mat-color($mat-dark-lime, B15) !important;\n }\n\n .fill-yellow-B15 {\n fill: mat-color($mat-dark-yellow, B15) !important;\n }\n\n .fill-amber-B15 {\n fill: mat-color($mat-dark-amber, B15) !important;\n }\n\n .fill-orange-B15 {\n fill: mat-color($mat-dark-orange, B15) !important;\n }\n\n .fill-deep-orange-B15 {\n fill: mat-color($mat-dark-deep-orange, B15) !important;\n }\n\n .fill-brown-B15 {\n fill: mat-color($mat-dark-brown, B15) !important;\n }\n\n .fill-grey-B15 {\n fill: mat-color($mat-dark-grey, B15) !important;\n }\n\n .fill-blue-grey-B15 {\n fill: mat-color($mat-dark-blue-grey, B15) !important;\n }\n}\n/* stylelint-enable selector-class-pattern */\n","/* stylelint-disable selector-class-pattern */\n\n@import '../theme-functions';\n@import '../palette-light';\n\n@mixin td-colors-light() {\n // Text color\n\n // Inherit\n .tc-inherit {\n color: inherit !important;\n }\n\n // 50\n .tc-red-50 {\n color: mat-color($mat-red, 50) !important;\n }\n\n .tc-pink-50 {\n color: mat-color($mat-pink, 50) !important;\n }\n\n .tc-purple-50 {\n color: mat-color($mat-purple, 50) !important;\n }\n\n .tc-deep-purple-50 {\n color: mat-color($mat-deep-purple, 50) !important;\n }\n\n .tc-indigo-50 {\n color: mat-color($mat-indigo, 50) !important;\n }\n\n .tc-blue-50 {\n color: mat-color($mat-blue, 50) !important;\n }\n\n .tc-light-blue-50 {\n color: mat-color($mat-light-blue, 50) !important;\n }\n\n .tc-cyan-50 {\n color: mat-color($mat-cyan, 50) !important;\n }\n\n .tc-teal-50 {\n color: mat-color($mat-teal, 50) !important;\n }\n\n .tc-green-50 {\n color: mat-color($mat-green, 50) !important;\n }\n\n .tc-light-green-50 {\n color: mat-color($mat-light-green, 50) !important;\n }\n\n .tc-lime-50 {\n color: mat-color($mat-lime, 50) !important;\n }\n\n .tc-yellow-50 {\n color: mat-color($mat-yellow, 50) !important;\n }\n\n .tc-amber-50 {\n color: mat-color($mat-amber, 50) !important;\n }\n\n .tc-orange-50 {\n color: mat-color($mat-orange, 50) !important;\n }\n\n .tc-deep-orange-50 {\n color: mat-color($mat-deep-orange, 50) !important;\n }\n\n .tc-brown-50 {\n color: mat-color($mat-brown, 50) !important;\n }\n\n .tc-grey-50 {\n color: mat-color($mat-grey, 50) !important;\n }\n\n .tc-blue-grey-50 {\n color: mat-color($mat-blue-grey, 50) !important;\n }\n\n // 100\n .tc-red-100 {\n color: mat-color($mat-red, 100) !important;\n }\n\n .tc-pink-100 {\n color: mat-color($mat-pink, 100) !important;\n }\n\n .tc-purple-100 {\n color: mat-color($mat-purple, 100) !important;\n }\n\n .tc-deep-purple-100 {\n color: mat-color($mat-deep-purple, 100) !important;\n }\n\n .tc-indigo-100 {\n color: mat-color($mat-indigo, 100) !important;\n }\n\n .tc-blue-100 {\n color: mat-color($mat-blue, 100) !important;\n }\n\n .tc-light-blue-100 {\n color: mat-color($mat-light-blue, 100) !important;\n }\n\n .tc-cyan-100 {\n color: mat-color($mat-cyan, 100) !important;\n }\n\n .tc-teal-100 {\n color: mat-color($mat-teal, 100) !important;\n }\n\n .tc-green-100 {\n color: mat-color($mat-green, 100) !important;\n }\n\n .tc-light-green-100 {\n color: mat-color($mat-light-green, 100) !important;\n }\n\n .tc-lime-100 {\n color: mat-color($mat-lime, 100) !important;\n }\n\n .tc-yellow-100 {\n color: mat-color($mat-yellow, 100) !important;\n }\n\n .tc-amber-100 {\n color: mat-color($mat-amber, 100) !important;\n }\n\n .tc-orange-100 {\n color: mat-color($mat-orange, 100) !important;\n }\n\n .tc-deep-orange-100 {\n color: mat-color($mat-deep-orange, 100) !important;\n }\n\n .tc-brown-100 {\n color: mat-color($mat-brown, 100) !important;\n }\n\n .tc-grey-100 {\n color: mat-color($mat-grey, 100) !important;\n }\n\n .tc-blue-grey-100 {\n color: mat-color($mat-blue-grey, 100) !important;\n }\n\n // 200\n .tc-red-200 {\n color: mat-color($mat-red, 200) !important;\n }\n\n .tc-pink-200 {\n color: mat-color($mat-pink, 200) !important;\n }\n\n .tc-purple-200 {\n color: mat-color($mat-purple, 200) !important;\n }\n\n .tc-deep-purple-200 {\n color: mat-color($mat-deep-purple, 200) !important;\n }\n\n .tc-indigo-200 {\n color: mat-color($mat-indigo, 200) !important;\n }\n\n .tc-blue-200 {\n color: mat-color($mat-blue, 200) !important;\n }\n\n .tc-light-blue-200 {\n color: mat-color($mat-light-blue, 200) !important;\n }\n\n .tc-cyan-200 {\n color: mat-color($mat-cyan, 200) !important;\n }\n\n .tc-teal-200 {\n color: mat-color($mat-teal, 200) !important;\n }\n\n .tc-green-200 {\n color: mat-color($mat-green, 200) !important;\n }\n\n .tc-light-green-200 {\n color: mat-color($mat-light-green, 200) !important;\n }\n\n .tc-lime-200 {\n color: mat-color($mat-lime, 200) !important;\n }\n\n .tc-yellow-200 {\n color: mat-color($mat-yellow, 200) !important;\n }\n\n .tc-amber-200 {\n color: mat-color($mat-amber, 200) !important;\n }\n\n .tc-orange-200 {\n color: mat-color($mat-orange, 200) !important;\n }\n\n .tc-deep-orange-200 {\n color: mat-color($mat-deep-orange, 200) !important;\n }\n\n .tc-brown-200 {\n color: mat-color($mat-brown, 200) !important;\n }\n\n .tc-grey-200 {\n color: mat-color($mat-grey, 200) !important;\n }\n\n .tc-blue-grey-200 {\n color: mat-color($mat-blue-grey, 200) !important;\n }\n\n // 300\n .tc-red-300 {\n color: mat-color($mat-red, 300) !important;\n }\n\n .tc-pink-300 {\n color: mat-color($mat-pink, 300) !important;\n }\n\n .tc-purple-300 {\n color: mat-color($mat-purple, 300) !important;\n }\n\n .tc-deep-purple-300 {\n color: mat-color($mat-deep-purple, 300) !important;\n }\n\n .tc-indigo-300 {\n color: mat-color($mat-indigo, 300) !important;\n }\n\n .tc-blue-300 {\n color: mat-color($mat-blue, 300) !important;\n }\n\n .tc-light-blue-300 {\n color: mat-color($mat-light-blue, 300) !important;\n }\n\n .tc-cyan-300 {\n color: mat-color($mat-cyan, 300) !important;\n }\n\n .tc-teal-300 {\n color: mat-color($mat-teal, 300) !important;\n }\n\n .tc-green-300 {\n color: mat-color($mat-green, 300) !important;\n }\n\n .tc-light-green-300 {\n color: mat-color($mat-light-green, 300) !important;\n }\n\n .tc-lime-300 {\n color: mat-color($mat-lime, 300) !important;\n }\n\n .tc-yellow-300 {\n color: mat-color($mat-yellow, 300) !important;\n }\n\n .tc-amber-300 {\n color: mat-color($mat-amber, 300) !important;\n }\n\n .tc-orange-300 {\n color: mat-color($mat-orange, 300) !important;\n }\n\n .tc-deep-orange-300 {\n color: mat-color($mat-deep-orange, 300) !important;\n }\n\n .tc-brown-300 {\n color: mat-color($mat-brown, 300) !important;\n }\n\n .tc-grey-300 {\n color: mat-color($mat-grey, 300) !important;\n }\n\n .tc-blue-grey-300 {\n color: mat-color($mat-blue-grey, 300) !important;\n }\n\n // 400\n .tc-red-400 {\n color: mat-color($mat-red, 400) !important;\n }\n\n .tc-pink-400 {\n color: mat-color($mat-pink, 400) !important;\n }\n\n .tc-purple-400 {\n color: mat-color($mat-purple, 400) !important;\n }\n\n .tc-deep-purple-400 {\n color: mat-color($mat-deep-purple, 400) !important;\n }\n\n .tc-indigo-400 {\n color: mat-color($mat-indigo, 400) !important;\n }\n\n .tc-blue-400 {\n color: mat-color($mat-blue, 400) !important;\n }\n\n .tc-light-blue-400 {\n color: mat-color($mat-light-blue, 400) !important;\n }\n\n .tc-cyan-400 {\n color: mat-color($mat-cyan, 400) !important;\n }\n\n .tc-teal-400 {\n color: mat-color($mat-teal, 400) !important;\n }\n\n .tc-green-400 {\n color: mat-color($mat-green, 400) !important;\n }\n\n .tc-light-green-400 {\n color: mat-color($mat-light-green, 400) !important;\n }\n\n .tc-lime-400 {\n color: mat-color($mat-lime, 400) !important;\n }\n\n .tc-yellow-400 {\n color: mat-color($mat-yellow, 400) !important;\n }\n\n .tc-amber-400 {\n color: mat-color($mat-amber, 400) !important;\n }\n\n .tc-orange-400 {\n color: mat-color($mat-orange, 400) !important;\n }\n\n .tc-deep-orange-400 {\n color: mat-color($mat-deep-orange, 400) !important;\n }\n\n .tc-brown-400 {\n color: mat-color($mat-brown, 400) !important;\n }\n\n .tc-grey-400 {\n color: mat-color($mat-grey, 400) !important;\n }\n\n .tc-blue-grey-400 {\n color: mat-color($mat-blue-grey, 400) !important;\n }\n\n // 500\n .tc-red-500 {\n color: mat-color($mat-red, 500) !important;\n }\n\n .tc-pink-500 {\n color: mat-color($mat-pink, 500) !important;\n }\n\n .tc-purple-500 {\n color: mat-color($mat-purple, 500) !important;\n }\n\n .tc-deep-purple-500 {\n color: mat-color($mat-deep-purple, 500) !important;\n }\n\n .tc-indigo-500 {\n color: mat-color($mat-indigo, 500) !important;\n }\n\n .tc-blue-500 {\n color: mat-color($mat-blue, 500) !important;\n }\n\n .tc-light-blue-500 {\n color: mat-color($mat-light-blue, 500) !important;\n }\n\n .tc-cyan-500 {\n color: mat-color($mat-cyan, 500) !important;\n }\n\n .tc-teal-500 {\n color: mat-color($mat-teal, 500) !important;\n }\n\n .tc-green-500 {\n color: mat-color($mat-green, 500) !important;\n }\n\n .tc-light-green-500 {\n color: mat-color($mat-light-green, 500) !important;\n }\n\n .tc-lime-500 {\n color: mat-color($mat-lime, 500) !important;\n }\n\n .tc-yellow-500 {\n color: mat-color($mat-yellow, 500) !important;\n }\n\n .tc-amber-500 {\n color: mat-color($mat-amber, 500) !important;\n }\n\n .tc-orange-500 {\n color: mat-color($mat-orange, 500) !important;\n }\n\n .tc-deep-orange-500 {\n color: mat-color($mat-deep-orange, 500) !important;\n }\n\n .tc-brown-500 {\n color: mat-color($mat-brown, 500) !important;\n }\n\n .tc-grey-500 {\n color: mat-color($mat-grey, 500) !important;\n }\n\n .tc-blue-grey-500 {\n color: mat-color($mat-blue-grey, 500) !important;\n }\n\n // 600\n .tc-red-600 {\n color: mat-color($mat-red, 600) !important;\n }\n\n .tc-pink-600 {\n color: mat-color($mat-pink, 600) !important;\n }\n\n .tc-purple-600 {\n color: mat-color($mat-purple, 600) !important;\n }\n\n .tc-deep-purple-600 {\n color: mat-color($mat-deep-purple, 600) !important;\n }\n\n .tc-indigo-600 {\n color: mat-color($mat-indigo, 600) !important;\n }\n\n .tc-blue-600 {\n color: mat-color($mat-blue, 600) !important;\n }\n\n .tc-light-blue-600 {\n color: mat-color($mat-light-blue, 600) !important;\n }\n\n .tc-cyan-600 {\n color: mat-color($mat-cyan, 600) !important;\n }\n\n .tc-teal-600 {\n color: mat-color($mat-teal, 600) !important;\n }\n\n .tc-green-600 {\n color: mat-color($mat-green, 600) !important;\n }\n\n .tc-light-green-600 {\n color: mat-color($mat-light-green, 600) !important;\n }\n\n .tc-lime-600 {\n color: mat-color($mat-lime, 600) !important;\n }\n\n .tc-yellow-600 {\n color: mat-color($mat-yellow, 600) !important;\n }\n\n .tc-amber-600 {\n color: mat-color($mat-amber, 600) !important;\n }\n\n .tc-orange-600 {\n color: mat-color($mat-orange, 600) !important;\n }\n\n .tc-deep-orange-600 {\n color: mat-color($mat-deep-orange, 600) !important;\n }\n\n .tc-brown-600 {\n color: mat-color($mat-brown, 600) !important;\n }\n\n .tc-grey-600 {\n color: mat-color($mat-grey, 600) !important;\n }\n\n .tc-blue-grey-600 {\n color: mat-color($mat-blue-grey, 600) !important;\n }\n\n // 700\n .tc-red-700 {\n color: mat-color($mat-red, 700) !important;\n }\n\n .tc-pink-700 {\n color: mat-color($mat-pink, 700) !important;\n }\n\n .tc-purple-700 {\n color: mat-color($mat-purple, 700) !important;\n }\n\n .tc-deep-purple-700 {\n color: mat-color($mat-deep-purple, 700) !important;\n }\n\n .tc-indigo-700 {\n color: mat-color($mat-indigo, 700) !important;\n }\n\n .tc-blue-700 {\n color: mat-color($mat-blue, 700) !important;\n }\n\n .tc-light-blue-700 {\n color: mat-color($mat-light-blue, 700) !important;\n }\n\n .tc-cyan-700 {\n color: mat-color($mat-cyan, 700) !important;\n }\n\n .tc-teal-700 {\n color: mat-color($mat-teal, 700) !important;\n }\n\n .tc-green-700 {\n color: mat-color($mat-green, 700) !important;\n }\n\n .tc-light-green-700 {\n color: mat-color($mat-light-green, 700) !important;\n }\n\n .tc-lime-700 {\n color: mat-color($mat-lime, 700) !important;\n }\n\n .tc-yellow-700 {\n color: mat-color($mat-yellow, 700) !important;\n }\n\n .tc-amber-700 {\n color: mat-color($mat-amber, 700) !important;\n }\n\n .tc-orange-700 {\n color: mat-color($mat-orange, 700) !important;\n }\n\n .tc-deep-orange-700 {\n color: mat-color($mat-deep-orange, 700) !important;\n }\n\n .tc-brown-700 {\n color: mat-color($mat-brown, 700) !important;\n }\n\n .tc-grey-700 {\n color: mat-color($mat-grey, 700) !important;\n }\n\n .tc-blue-grey-700 {\n color: mat-color($mat-blue-grey, 700) !important;\n }\n\n // 800\n .tc-red-800 {\n color: mat-color($mat-red, 800) !important;\n }\n\n .tc-pink-800 {\n color: mat-color($mat-pink, 800) !important;\n }\n\n .tc-purple-800 {\n color: mat-color($mat-purple, 800) !important;\n }\n\n .tc-deep-purple-800 {\n color: mat-color($mat-deep-purple, 800) !important;\n }\n\n .tc-indigo-800 {\n color: mat-color($mat-indigo, 800) !important;\n }\n\n .tc-blue-800 {\n color: mat-color($mat-blue, 800) !important;\n }\n\n .tc-light-blue-800 {\n color: mat-color($mat-light-blue, 800) !important;\n }\n\n .tc-cyan-800 {\n color: mat-color($mat-cyan, 800) !important;\n }\n\n .tc-teal-800 {\n color: mat-color($mat-teal, 800) !important;\n }\n\n .tc-green-800 {\n color: mat-color($mat-green, 800) !important;\n }\n\n .tc-light-green-800 {\n color: mat-color($mat-light-green, 800) !important;\n }\n\n .tc-lime-800 {\n color: mat-color($mat-lime, 800) !important;\n }\n\n .tc-yellow-800 {\n color: mat-color($mat-yellow, 800) !important;\n }\n\n .tc-amber-800 {\n color: mat-color($mat-amber, 800) !important;\n }\n\n .tc-orange-800 {\n color: mat-color($mat-orange, 800) !important;\n }\n\n .tc-deep-orange-800 {\n color: mat-color($mat-deep-orange, 800) !important;\n }\n\n .tc-brown-800 {\n color: mat-color($mat-brown, 800) !important;\n }\n\n .tc-grey-800 {\n color: mat-color($mat-grey, 800) !important;\n }\n\n .tc-blue-grey-800 {\n color: mat-color($mat-blue-grey, 800) !important;\n }\n\n // 900\n .tc-red-900 {\n color: mat-color($mat-red, 900) !important;\n }\n\n .tc-pink-900 {\n color: mat-color($mat-pink, 900) !important;\n }\n\n .tc-purple-900 {\n color: mat-color($mat-purple, 900) !important;\n }\n\n .tc-deep-purple-900 {\n color: mat-color($mat-deep-purple, 900) !important;\n }\n\n .tc-indigo-900 {\n color: mat-color($mat-indigo, 900) !important;\n }\n\n .tc-blue-900 {\n color: mat-color($mat-blue, 900) !important;\n }\n\n .tc-light-blue-900 {\n color: mat-color($mat-light-blue, 900) !important;\n }\n\n .tc-cyan-900 {\n color: mat-color($mat-cyan, 900) !important;\n }\n\n .tc-teal-900 {\n color: mat-color($mat-teal, 900) !important;\n }\n\n .tc-green-900 {\n color: mat-color($mat-green, 900) !important;\n }\n\n .tc-light-green-900 {\n color: mat-color($mat-light-green, 900) !important;\n }\n\n .tc-lime-900 {\n color: mat-color($mat-lime, 900) !important;\n }\n\n .tc-yellow-900 {\n color: mat-color($mat-yellow, 900) !important;\n }\n\n .tc-amber-900 {\n color: mat-color($mat-amber, 900) !important;\n }\n\n .tc-orange-900 {\n color: mat-color($mat-orange, 900) !important;\n }\n\n .tc-deep-orange-900 {\n color: mat-color($mat-deep-orange, 900) !important;\n }\n\n .tc-brown-900 {\n color: mat-color($mat-brown, 900) !important;\n }\n\n .tc-grey-900 {\n color: mat-color($mat-grey, 900) !important;\n }\n\n .tc-blue-grey-900 {\n color: mat-color($mat-blue-grey, 900) !important;\n }\n\n // A100\n .tc-red-A100 {\n color: mat-color($mat-red, A100) !important;\n }\n\n .tc-pink-A100 {\n color: mat-color($mat-pink, A100) !important;\n }\n\n .tc-purple-A100 {\n color: mat-color($mat-purple, A100) !important;\n }\n\n .tc-deep-purple-A100 {\n color: mat-color($mat-deep-purple, A100) !important;\n }\n\n .tc-indigo-A100 {\n color: mat-color($mat-indigo, A100) !important;\n }\n\n .tc-blue-A100 {\n color: mat-color($mat-blue, A100) !important;\n }\n\n .tc-light-blue-A100 {\n color: mat-color($mat-light-blue, A100) !important;\n }\n\n .tc-cyan-A100 {\n color: mat-color($mat-cyan, A100) !important;\n }\n\n .tc-teal-A100 {\n color: mat-color($mat-teal, A100) !important;\n }\n\n .tc-green-A100 {\n color: mat-color($mat-green, A100) !important;\n }\n\n .tc-light-green-A100 {\n color: mat-color($mat-light-green, A100) !important;\n }\n\n .tc-lime-A100 {\n color: mat-color($mat-lime, A100) !important;\n }\n\n .tc-yellow-A100 {\n color: mat-color($mat-yellow, A100) !important;\n }\n\n .tc-amber-A100 {\n color: mat-color($mat-amber, A100) !important;\n }\n\n .tc-orange-A100 {\n color: mat-color($mat-orange, A100) !important;\n }\n\n .tc-deep-orange-A100 {\n color: mat-color($mat-deep-orange, A100) !important;\n }\n\n // A200\n .tc-red-A200 {\n color: mat-color($mat-red, A200) !important;\n }\n\n .tc-pink-A200 {\n color: mat-color($mat-pink, A200) !important;\n }\n\n .tc-purple-A200 {\n color: mat-color($mat-purple, A200) !important;\n }\n\n .tc-deep-purple-A200 {\n color: mat-color($mat-deep-purple, A200) !important;\n }\n\n .tc-indigo-A200 {\n color: mat-color($mat-indigo, A200) !important;\n }\n\n .tc-blue-A200 {\n color: mat-color($mat-blue, A200) !important;\n }\n\n .tc-light-blue-A200 {\n color: mat-color($mat-light-blue, A200) !important;\n }\n\n .tc-cyan-A200 {\n color: mat-color($mat-cyan, A200) !important;\n }\n\n .tc-teal-A200 {\n color: mat-color($mat-teal, A200) !important;\n }\n\n .tc-green-A200 {\n color: mat-color($mat-green, A200) !important;\n }\n\n .tc-light-green-A200 {\n color: mat-color($mat-light-green, A200) !important;\n }\n\n .tc-lime-A200 {\n color: mat-color($mat-lime, A200) !important;\n }\n\n .tc-yellow-A200 {\n color: mat-color($mat-yellow, A200) !important;\n }\n\n .tc-amber-A200 {\n color: mat-color($mat-amber, A200) !important;\n }\n\n .tc-orange-A200 {\n color: mat-color($mat-orange, A200) !important;\n }\n\n .tc-deep-orange-A200 {\n color: mat-color($mat-deep-orange, A200) !important;\n }\n\n // A400\n .tc-red-A400 {\n color: mat-color($mat-red, A400) !important;\n }\n\n .tc-pink-A400 {\n color: mat-color($mat-pink, A400) !important;\n }\n\n .tc-purple-A400 {\n color: mat-color($mat-purple, A400) !important;\n }\n\n .tc-deep-purple-A400 {\n color: mat-color($mat-deep-purple, A400) !important;\n }\n\n .tc-indigo-A400 {\n color: mat-color($mat-indigo, A400) !important;\n }\n\n .tc-blue-A400 {\n color: mat-color($mat-blue, A400) !important;\n }\n\n .tc-light-blue-A400 {\n color: mat-color($mat-light-blue, A400) !important;\n }\n\n .tc-cyan-A400 {\n color: mat-color($mat-cyan, A400) !important;\n }\n\n .tc-teal-A400 {\n color: mat-color($mat-teal, A400) !important;\n }\n\n .tc-green-A400 {\n color: mat-color($mat-green, A400) !important;\n }\n\n .tc-light-green-A400 {\n color: mat-color($mat-light-green, A400) !important;\n }\n\n .tc-lime-A400 {\n color: mat-color($mat-lime, A400) !important;\n }\n\n .tc-yellow-A400 {\n color: mat-color($mat-yellow, A400) !important;\n }\n\n .tc-amber-A400 {\n color: mat-color($mat-amber, A400) !important;\n }\n\n .tc-orange-A400 {\n color: mat-color($mat-orange, A400) !important;\n }\n\n .tc-deep-orange-A400 {\n color: mat-color($mat-deep-orange, A400) !important;\n }\n\n // A700\n .tc-red-A700 {\n color: mat-color($mat-red, A700) !important;\n }\n\n .tc-pink-A700 {\n color: mat-color($mat-pink, A700) !important;\n }\n\n .tc-purple-A700 {\n color: mat-color($mat-purple, A700) !important;\n }\n\n .tc-deep-purple-A700 {\n color: mat-color($mat-deep-purple, A700) !important;\n }\n\n .tc-indigo-A700 {\n color: mat-color($mat-indigo, A700) !important;\n }\n\n .tc-blue-A700 {\n color: mat-color($mat-blue, A700) !important;\n }\n\n .tc-light-blue-A700 {\n color: mat-color($mat-light-blue, A700) !important;\n }\n\n .tc-cyan-A700 {\n color: mat-color($mat-cyan, A700) !important;\n }\n\n .tc-teal-A700 {\n color: mat-color($mat-teal, A700) !important;\n }\n\n .tc-green-A700 {\n color: mat-color($mat-green, A700) !important;\n }\n\n .tc-light-green-A700 {\n color: mat-color($mat-light-green, A700) !important;\n }\n\n .tc-lime-A700 {\n color: mat-color($mat-lime, A700) !important;\n }\n\n .tc-yellow-A700 {\n color: mat-color($mat-yellow, A700) !important;\n }\n\n .tc-amber-A700 {\n color: mat-color($mat-amber, A700) !important;\n }\n\n .tc-orange-A700 {\n color: mat-color($mat-orange, A700) !important;\n }\n\n .tc-deep-orange-A700 {\n color: mat-color($mat-deep-orange, A700) !important;\n }\n\n // Black\n .tc-black {\n color: rgba(black, 87) !important;\n }\n\n .tc-black-1 {\n color: rgba(black, 54) !important;\n }\n\n .tc-black-2 {\n color: rgba(black, 38) !important;\n }\n\n .tc-black-3 {\n color: rgba(black, 0.12) !important;\n }\n\n .tc-black-4 {\n color: black !important;\n }\n\n // White\n .tc-white {\n color: rgba(white, 0.7) !important;\n }\n\n .tc-white-1 {\n color: rgba(white, 0.3) !important;\n }\n\n .tc-white-2 {\n color: rgba(white, 0.3) !important;\n }\n\n .tc-white-3 {\n color: rgba(white, 0.12) !important;\n }\n\n .tc-white-4 {\n color: white !important;\n }\n\n // Background color\n\n // 50\n .bgc-red-50 {\n background-color: mat-color($mat-red, 50) !important;\n }\n\n .bgc-pink-50 {\n background-color: mat-color($mat-pink, 50) !important;\n }\n\n .bgc-purple-50 {\n background-color: mat-color($mat-purple, 50) !important;\n }\n\n .bgc-deep-purple-50 {\n background-color: mat-color($mat-deep-purple, 50) !important;\n }\n\n .bgc-indigo-50 {\n background-color: mat-color($mat-indigo, 50) !important;\n }\n\n .bgc-blue-50 {\n background-color: mat-color($mat-blue, 50) !important;\n }\n\n .bgc-light-blue-50 {\n background-color: mat-color($mat-light-blue, 50) !important;\n }\n\n .bgc-cyan-50 {\n background-color: mat-color($mat-cyan, 50) !important;\n }\n\n .bgc-teal-50 {\n background-color: mat-color($mat-teal, 50) !important;\n }\n\n .bgc-green-50 {\n background-color: mat-color($mat-green, 50) !important;\n }\n\n .bgc-light-green-50 {\n background-color: mat-color($mat-light-green, 50) !important;\n }\n\n .bgc-lime-50 {\n background-color: mat-color($mat-lime, 50) !important;\n }\n\n .bgc-yellow-50 {\n background-color: mat-color($mat-yellow, 50) !important;\n }\n\n .bgc-amber-50 {\n background-color: mat-color($mat-amber, 50) !important;\n }\n\n .bgc-orange-50 {\n background-color: mat-color($mat-orange, 50) !important;\n }\n\n .bgc-deep-orange-50 {\n background-color: mat-color($mat-deep-orange, 50) !important;\n }\n\n .bgc-brown-50 {\n background-color: mat-color($mat-brown, 50) !important;\n }\n\n .bgc-grey-50 {\n background-color: mat-color($mat-grey, 50) !important;\n }\n\n .bgc-blue-grey-50 {\n background-color: mat-color($mat-blue-grey, 50) !important;\n }\n\n // 100\n .bgc-red-100 {\n background-color: mat-color($mat-red, 100) !important;\n }\n\n .bgc-pink-100 {\n background-color: mat-color($mat-pink, 100) !important;\n }\n\n .bgc-purple-100 {\n background-color: mat-color($mat-purple, 100) !important;\n }\n\n .bgc-deep-purple-100 {\n background-color: mat-color($mat-deep-purple, 100) !important;\n }\n\n .bgc-indigo-100 {\n background-color: mat-color($mat-indigo, 100) !important;\n }\n\n .bgc-blue-100 {\n background-color: mat-color($mat-blue, 100) !important;\n }\n\n .bgc-light-blue-100 {\n background-color: mat-color($mat-light-blue, 100) !important;\n }\n\n .bgc-cyan-100 {\n background-color: mat-color($mat-cyan, 100) !important;\n }\n\n .bgc-teal-100 {\n background-color: mat-color($mat-teal, 100) !important;\n }\n\n .bgc-green-100 {\n background-color: mat-color($mat-green, 100) !important;\n }\n\n .bgc-light-green-100 {\n background-color: mat-color($mat-light-green, 100) !important;\n }\n\n .bgc-lime-100 {\n background-color: mat-color($mat-lime, 100) !important;\n }\n\n .bgc-yellow-100 {\n background-color: mat-color($mat-yellow, 100) !important;\n }\n\n .bgc-amber-100 {\n background-color: mat-color($mat-amber, 100) !important;\n }\n\n .bgc-orange-100 {\n background-color: mat-color($mat-orange, 100) !important;\n }\n\n .bgc-deep-orange-100 {\n background-color: mat-color($mat-deep-orange, 100) !important;\n }\n\n .bgc-brown-100 {\n background-color: mat-color($mat-brown, 100) !important;\n }\n\n .bgc-grey-100 {\n background-color: mat-color($mat-grey, 100) !important;\n }\n\n .bgc-blue-grey-100 {\n background-color: mat-color($mat-blue-grey, 100) !important;\n }\n\n // 200\n .bgc-red-200 {\n background-color: mat-color($mat-red, 200) !important;\n }\n\n .bgc-pink-200 {\n background-color: mat-color($mat-pink, 200) !important;\n }\n\n .bgc-purple-200 {\n background-color: mat-color($mat-purple, 200) !important;\n }\n\n .bgc-deep-purple-200 {\n background-color: mat-color($mat-deep-purple, 200) !important;\n }\n\n .bgc-indigo-200 {\n background-color: mat-color($mat-indigo, 200) !important;\n }\n\n .bgc-blue-200 {\n background-color: mat-color($mat-blue, 200) !important;\n }\n\n .bgc-light-blue-200 {\n background-color: mat-color($mat-light-blue, 200) !important;\n }\n\n .bgc-cyan-200 {\n background-color: mat-color($mat-cyan, 200) !important;\n }\n\n .bgc-teal-200 {\n background-color: mat-color($mat-teal, 200) !important;\n }\n\n .bgc-green-200 {\n background-color: mat-color($mat-green, 200) !important;\n }\n\n .bgc-light-green-200 {\n background-color: mat-color($mat-light-green, 200) !important;\n }\n\n .bgc-lime-200 {\n background-color: mat-color($mat-lime, 200) !important;\n }\n\n .bgc-yellow-200 {\n background-color: mat-color($mat-yellow, 200) !important;\n }\n\n .bgc-amber-200 {\n background-color: mat-color($mat-amber, 200) !important;\n }\n\n .bgc-orange-200 {\n background-color: mat-color($mat-orange, 200) !important;\n }\n\n .bgc-deep-orange-200 {\n background-color: mat-color($mat-deep-orange, 200) !important;\n }\n\n .bgc-brown-200 {\n background-color: mat-color($mat-brown, 200) !important;\n }\n\n .bgc-grey-200 {\n background-color: mat-color($mat-grey, 200) !important;\n }\n\n .bgc-blue-grey-200 {\n background-color: mat-color($mat-blue-grey, 200) !important;\n }\n\n // 300\n .bgc-red-300 {\n background-color: mat-color($mat-red, 300) !important;\n }\n\n .bgc-pink-300 {\n background-color: mat-color($mat-pink, 300) !important;\n }\n\n .bgc-purple-300 {\n background-color: mat-color($mat-purple, 300) !important;\n }\n\n .bgc-deep-purple-300 {\n background-color: mat-color($mat-deep-purple, 300) !important;\n }\n\n .bgc-indigo-300 {\n background-color: mat-color($mat-indigo, 300) !important;\n }\n\n .bgc-blue-300 {\n background-color: mat-color($mat-blue, 300) !important;\n }\n\n .bgc-light-blue-300 {\n background-color: mat-color($mat-light-blue, 300) !important;\n }\n\n .bgc-cyan-300 {\n background-color: mat-color($mat-cyan, 300) !important;\n }\n\n .bgc-teal-300 {\n background-color: mat-color($mat-teal, 300) !important;\n }\n\n .bgc-green-300 {\n background-color: mat-color($mat-green, 300) !important;\n }\n\n .bgc-light-green-300 {\n background-color: mat-color($mat-light-green, 300) !important;\n }\n\n .bgc-lime-300 {\n background-color: mat-color($mat-lime, 300) !important;\n }\n\n .bgc-yellow-300 {\n background-color: mat-color($mat-yellow, 300) !important;\n }\n\n .bgc-amber-300 {\n background-color: mat-color($mat-amber, 300) !important;\n }\n\n .bgc-orange-300 {\n background-color: mat-color($mat-orange, 300) !important;\n }\n\n .bgc-deep-orange-300 {\n background-color: mat-color($mat-deep-orange, 300) !important;\n }\n\n .bgc-brown-300 {\n background-color: mat-color($mat-brown, 300) !important;\n }\n\n .bgc-grey-300 {\n background-color: mat-color($mat-grey, 300) !important;\n }\n\n .bgc-blue-grey-300 {\n background-color: mat-color($mat-blue-grey, 300) !important;\n }\n\n // 400\n .bgc-red-400 {\n background-color: mat-color($mat-red, 400) !important;\n }\n\n .bgc-pink-400 {\n background-color: mat-color($mat-pink, 400) !important;\n }\n\n .bgc-purple-400 {\n background-color: mat-color($mat-purple, 400) !important;\n }\n\n .bgc-deep-purple-400 {\n background-color: mat-color($mat-deep-purple, 400) !important;\n }\n\n .bgc-indigo-400 {\n background-color: mat-color($mat-indigo, 400) !important;\n }\n\n .bgc-blue-400 {\n background-color: mat-color($mat-blue, 400) !important;\n }\n\n .bgc-light-blue-400 {\n background-color: mat-color($mat-light-blue, 400) !important;\n }\n\n .bgc-cyan-400 {\n background-color: mat-color($mat-cyan, 400) !important;\n }\n\n .bgc-teal-400 {\n background-color: mat-color($mat-teal, 400) !important;\n }\n\n .bgc-green-400 {\n background-color: mat-color($mat-green, 400) !important;\n }\n\n .bgc-light-green-400 {\n background-color: mat-color($mat-light-green, 400) !important;\n }\n\n .bgc-lime-400 {\n background-color: mat-color($mat-lime, 400) !important;\n }\n\n .bgc-yellow-400 {\n background-color: mat-color($mat-yellow, 400) !important;\n }\n\n .bgc-amber-400 {\n background-color: mat-color($mat-amber, 400) !important;\n }\n\n .bgc-orange-400 {\n background-color: mat-color($mat-orange, 400) !important;\n }\n\n .bgc-deep-orange-400 {\n background-color: mat-color($mat-deep-orange, 400) !important;\n }\n\n .bgc-brown-400 {\n background-color: mat-color($mat-brown, 400) !important;\n }\n\n .bgc-grey-400 {\n background-color: mat-color($mat-grey, 400) !important;\n }\n\n .bgc-blue-grey-400 {\n background-color: mat-color($mat-blue-grey, 400) !important;\n }\n\n // 500\n .bgc-red-500 {\n background-color: mat-color($mat-red, 500) !important;\n }\n\n .bgc-pink-500 {\n background-color: mat-color($mat-pink, 500) !important;\n }\n\n .bgc-purple-500 {\n background-color: mat-color($mat-purple, 500) !important;\n }\n\n .bgc-deep-purple-500 {\n background-color: mat-color($mat-deep-purple, 500) !important;\n }\n\n .bgc-indigo-500 {\n background-color: mat-color($mat-indigo, 500) !important;\n }\n\n .bgc-blue-500 {\n background-color: mat-color($mat-blue, 500) !important;\n }\n\n .bgc-light-blue-500 {\n background-color: mat-color($mat-light-blue, 500) !important;\n }\n\n .bgc-cyan-500 {\n background-color: mat-color($mat-cyan, 500) !important;\n }\n\n .bgc-teal-500 {\n background-color: mat-color($mat-teal, 500) !important;\n }\n\n .bgc-green-500 {\n background-color: mat-color($mat-green, 500) !important;\n }\n\n .bgc-light-green-500 {\n background-color: mat-color($mat-light-green, 500) !important;\n }\n\n .bgc-lime-500 {\n background-color: mat-color($mat-lime, 500) !important;\n }\n\n .bgc-yellow-500 {\n background-color: mat-color($mat-yellow, 500) !important;\n }\n\n .bgc-amber-500 {\n background-color: mat-color($mat-amber, 500) !important;\n }\n\n .bgc-orange-500 {\n background-color: mat-color($mat-orange, 500) !important;\n }\n\n .bgc-deep-orange-500 {\n background-color: mat-color($mat-deep-orange, 500) !important;\n }\n\n .bgc-brown-500 {\n background-color: mat-color($mat-brown, 500) !important;\n }\n\n .bgc-grey-500 {\n background-color: mat-color($mat-grey, 500) !important;\n }\n\n .bgc-blue-grey-500 {\n background-color: mat-color($mat-blue-grey, 500) !important;\n }\n\n // 600\n .bgc-red-600 {\n background-color: mat-color($mat-red, 600) !important;\n }\n\n .bgc-pink-600 {\n background-color: mat-color($mat-pink, 600) !important;\n }\n\n .bgc-purple-600 {\n background-color: mat-color($mat-purple, 600) !important;\n }\n\n .bgc-deep-purple-600 {\n background-color: mat-color($mat-deep-purple, 600) !important;\n }\n\n .bgc-indigo-600 {\n background-color: mat-color($mat-indigo, 600) !important;\n }\n\n .bgc-blue-600 {\n background-color: mat-color($mat-blue, 600) !important;\n }\n\n .bgc-light-blue-600 {\n background-color: mat-color($mat-light-blue, 600) !important;\n }\n\n .bgc-cyan-600 {\n background-color: mat-color($mat-cyan, 600) !important;\n }\n\n .bgc-teal-600 {\n background-color: mat-color($mat-teal, 600) !important;\n }\n\n .bgc-green-600 {\n background-color: mat-color($mat-green, 600) !important;\n }\n\n .bgc-light-green-600 {\n background-color: mat-color($mat-light-green, 600) !important;\n }\n\n .bgc-lime-600 {\n background-color: mat-color($mat-lime, 600) !important;\n }\n\n .bgc-yellow-600 {\n background-color: mat-color($mat-yellow, 600) !important;\n }\n\n .bgc-amber-600 {\n background-color: mat-color($mat-amber, 600) !important;\n }\n\n .bgc-orange-600 {\n background-color: mat-color($mat-orange, 600) !important;\n }\n\n .bgc-deep-orange-600 {\n background-color: mat-color($mat-deep-orange, 600) !important;\n }\n\n .bgc-brown-600 {\n background-color: mat-color($mat-brown, 600) !important;\n }\n\n .bgc-grey-600 {\n background-color: mat-color($mat-grey, 600) !important;\n }\n\n .bgc-blue-grey-600 {\n background-color: mat-color($mat-blue-grey, 600) !important;\n }\n\n // 700\n .bgc-red-700 {\n background-color: mat-color($mat-red, 700) !important;\n }\n\n .bgc-pink-700 {\n background-color: mat-color($mat-pink, 700) !important;\n }\n\n .bgc-purple-700 {\n background-color: mat-color($mat-purple, 700) !important;\n }\n\n .bgc-deep-purple-700 {\n background-color: mat-color($mat-deep-purple, 700) !important;\n }\n\n .bgc-indigo-700 {\n background-color: mat-color($mat-indigo, 700) !important;\n }\n\n .bgc-blue-700 {\n background-color: mat-color($mat-blue, 700) !important;\n }\n\n .bgc-light-blue-700 {\n background-color: mat-color($mat-light-blue, 700) !important;\n }\n\n .bgc-cyan-700 {\n background-color: mat-color($mat-cyan, 700) !important;\n }\n\n .bgc-teal-700 {\n background-color: mat-color($mat-teal, 700) !important;\n }\n\n .bgc-green-700 {\n background-color: mat-color($mat-green, 700) !important;\n }\n\n .bgc-light-green-700 {\n background-color: mat-color($mat-light-green, 700) !important;\n }\n\n .bgc-lime-700 {\n background-color: mat-color($mat-lime, 700) !important;\n }\n\n .bgc-yellow-700 {\n background-color: mat-color($mat-yellow, 700) !important;\n }\n\n .bgc-amber-700 {\n background-color: mat-color($mat-amber, 700) !important;\n }\n\n .bgc-orange-700 {\n background-color: mat-color($mat-orange, 700) !important;\n }\n\n .bgc-deep-orange-700 {\n background-color: mat-color($mat-deep-orange, 700) !important;\n }\n\n .bgc-brown-700 {\n background-color: mat-color($mat-brown, 700) !important;\n }\n\n .bgc-grey-700 {\n background-color: mat-color($mat-grey, 700) !important;\n }\n\n .bgc-blue-grey-700 {\n background-color: mat-color($mat-blue-grey, 700) !important;\n }\n\n // 800\n .bgc-red-800 {\n background-color: mat-color($mat-red, 800) !important;\n }\n\n .bgc-pink-800 {\n background-color: mat-color($mat-pink, 800) !important;\n }\n\n .bgc-purple-800 {\n background-color: mat-color($mat-purple, 800) !important;\n }\n\n .bgc-deep-purple-800 {\n background-color: mat-color($mat-deep-purple, 800) !important;\n }\n\n .bgc-indigo-800 {\n background-color: mat-color($mat-indigo, 800) !important;\n }\n\n .bgc-blue-800 {\n background-color: mat-color($mat-blue, 800) !important;\n }\n\n .bgc-light-blue-800 {\n background-color: mat-color($mat-light-blue, 800) !important;\n }\n\n .bgc-cyan-800 {\n background-color: mat-color($mat-cyan, 800) !important;\n }\n\n .bgc-teal-800 {\n background-color: mat-color($mat-teal, 800) !important;\n }\n\n .bgc-green-800 {\n background-color: mat-color($mat-green, 800) !important;\n }\n\n .bgc-light-green-800 {\n background-color: mat-color($mat-light-green, 800) !important;\n }\n\n .bgc-lime-800 {\n background-color: mat-color($mat-lime, 800) !important;\n }\n\n .bgc-yellow-800 {\n background-color: mat-color($mat-yellow, 800) !important;\n }\n\n .bgc-amber-800 {\n background-color: mat-color($mat-amber, 800) !important;\n }\n\n .bgc-orange-800 {\n background-color: mat-color($mat-orange, 800) !important;\n }\n\n .bgc-deep-orange-800 {\n background-color: mat-color($mat-deep-orange, 800) !important;\n }\n\n .bgc-brown-800 {\n background-color: mat-color($mat-brown, 800) !important;\n }\n\n .bgc-grey-800 {\n background-color: mat-color($mat-grey, 800) !important;\n }\n\n .bgc-blue-grey-800 {\n background-color: mat-color($mat-blue-grey, 800) !important;\n }\n\n // 900\n .bgc-red-900 {\n background-color: mat-color($mat-red, 900) !important;\n }\n\n .bgc-pink-900 {\n background-color: mat-color($mat-pink, 900) !important;\n }\n\n .bgc-purple-900 {\n background-color: mat-color($mat-purple, 900) !important;\n }\n\n .bgc-deep-purple-900 {\n background-color: mat-color($mat-deep-purple, 900) !important;\n }\n\n .bgc-indigo-900 {\n background-color: mat-color($mat-indigo, 900) !important;\n }\n\n .bgc-blue-900 {\n background-color: mat-color($mat-blue, 900) !important;\n }\n\n .bgc-light-blue-900 {\n background-color: mat-color($mat-light-blue, 900) !important;\n }\n\n .bgc-cyan-900 {\n background-color: mat-color($mat-cyan, 900) !important;\n }\n\n .bgc-teal-900 {\n background-color: mat-color($mat-teal, 900) !important;\n }\n\n .bgc-green-900 {\n background-color: mat-color($mat-green, 900) !important;\n }\n\n .bgc-light-green-900 {\n background-color: mat-color($mat-light-green, 900) !important;\n }\n\n .bgc-lime-900 {\n background-color: mat-color($mat-lime, 900) !important;\n }\n\n .bgc-yellow-900 {\n background-color: mat-color($mat-yellow, 900) !important;\n }\n\n .bgc-amber-900 {\n background-color: mat-color($mat-amber, 900) !important;\n }\n\n .bgc-orange-900 {\n background-color: mat-color($mat-orange, 900) !important;\n }\n\n .bgc-deep-orange-900 {\n background-color: mat-color($mat-deep-orange, 900) !important;\n }\n\n .bgc-brown-900 {\n background-color: mat-color($mat-brown, 900) !important;\n }\n\n .bgc-grey-900 {\n background-color: mat-color($mat-grey, 900) !important;\n }\n\n .bgc-blue-grey-900 {\n background-color: mat-color($mat-blue-grey, 900) !important;\n }\n\n // A100\n .bgc-red-A100 {\n background-color: mat-color($mat-red, A100) !important;\n }\n\n .bgc-pink-A100 {\n background-color: mat-color($mat-pink, A100) !important;\n }\n\n .bgc-purple-A100 {\n background-color: mat-color($mat-purple, A100) !important;\n }\n\n .bgc-deep-purple-A100 {\n background-color: mat-color($mat-deep-purple, A100) !important;\n }\n\n .bgc-indigo-A100 {\n background-color: mat-color($mat-indigo, A100) !important;\n }\n\n .bgc-blue-A100 {\n background-color: mat-color($mat-blue, A100) !important;\n }\n\n .bgc-light-blue-A100 {\n background-color: mat-color($mat-light-blue, A100) !important;\n }\n\n .bgc-cyan-A100 {\n background-color: mat-color($mat-cyan, A100) !important;\n }\n\n .bgc-teal-A100 {\n background-color: mat-color($mat-teal, A100) !important;\n }\n\n .bgc-green-A100 {\n background-color: mat-color($mat-green, A100) !important;\n }\n\n .bgc-light-green-A100 {\n background-color: mat-color($mat-light-green, A100) !important;\n }\n\n .bgc-lime-A100 {\n background-color: mat-color($mat-lime, A100) !important;\n }\n\n .bgc-yellow-A100 {\n background-color: mat-color($mat-yellow, A100) !important;\n }\n\n .bgc-amber-A100 {\n background-color: mat-color($mat-amber, A100) !important;\n }\n\n .bgc-orange-A100 {\n background-color: mat-color($mat-orange, A100) !important;\n }\n\n .bgc-deep-orange-A100 {\n background-color: mat-color($mat-deep-orange, A100) !important;\n }\n\n // A200\n .bgc-red-A200 {\n background-color: mat-color($mat-red, A200) !important;\n }\n\n .bgc-pink-A200 {\n background-color: mat-color($mat-pink, A200) !important;\n }\n\n .bgc-purple-A200 {\n background-color: mat-color($mat-purple, A200) !important;\n }\n\n .bgc-deep-purple-A200 {\n background-color: mat-color($mat-deep-purple, A200) !important;\n }\n\n .bgc-indigo-A200 {\n background-color: mat-color($mat-indigo, A200) !important;\n }\n\n .bgc-blue-A200 {\n background-color: mat-color($mat-blue, A200) !important;\n }\n\n .bgc-light-blue-A200 {\n background-color: mat-color($mat-light-blue, A200) !important;\n }\n\n .bgc-cyan-A200 {\n background-color: mat-color($mat-cyan, A200) !important;\n }\n\n .bgc-teal-A200 {\n background-color: mat-color($mat-teal, A200) !important;\n }\n\n .bgc-green-A200 {\n background-color: mat-color($mat-green, A200) !important;\n }\n\n .bgc-light-green-A200 {\n background-color: mat-color($mat-light-green, A200) !important;\n }\n\n .bgc-lime-A200 {\n background-color: mat-color($mat-lime, A200) !important;\n }\n\n .bgc-yellow-A200 {\n background-color: mat-color($mat-yellow, A200) !important;\n }\n\n .bgc-amber-A200 {\n background-color: mat-color($mat-amber, A200) !important;\n }\n\n .bgc-orange-A200 {\n background-color: mat-color($mat-orange, A200) !important;\n }\n\n .bgc-deep-orange-A200 {\n background-color: mat-color($mat-deep-orange, A200) !important;\n }\n\n // A400\n .bgc-red-A400 {\n background-color: mat-color($mat-red, A400) !important;\n }\n\n .bgc-pink-A400 {\n background-color: mat-color($mat-pink, A400) !important;\n }\n\n .bgc-purple-A400 {\n background-color: mat-color($mat-purple, A400) !important;\n }\n\n .bgc-deep-purple-A400 {\n background-color: mat-color($mat-deep-purple, A400) !important;\n }\n\n .bgc-indigo-A400 {\n background-color: mat-color($mat-indigo, A400) !important;\n }\n\n .bgc-blue-A400 {\n background-color: mat-color($mat-blue, A400) !important;\n }\n\n .bgc-light-blue-A400 {\n background-color: mat-color($mat-light-blue, A400) !important;\n }\n\n .bgc-cyan-A400 {\n background-color: mat-color($mat-cyan, A400) !important;\n }\n\n .bgc-teal-A400 {\n background-color: mat-color($mat-teal, A400) !important;\n }\n\n .bgc-green-A400 {\n background-color: mat-color($mat-green, A400) !important;\n }\n\n .bgc-light-green-A400 {\n background-color: mat-color($mat-light-green, A400) !important;\n }\n\n .bgc-lime-A400 {\n background-color: mat-color($mat-lime, A400) !important;\n }\n\n .bgc-yellow-A400 {\n background-color: mat-color($mat-yellow, A400) !important;\n }\n\n .bgc-amber-A400 {\n background-color: mat-color($mat-amber, A400) !important;\n }\n\n .bgc-orange-A400 {\n background-color: mat-color($mat-orange, A400) !important;\n }\n\n .bgc-deep-orange-A400 {\n background-color: mat-color($mat-deep-orange, A400) !important;\n }\n\n // A700\n .bgc-red-A700 {\n background-color: mat-color($mat-red, A700) !important;\n }\n\n .bgc-pink-A700 {\n background-color: mat-color($mat-pink, A700) !important;\n }\n\n .bgc-purple-A700 {\n background-color: mat-color($mat-purple, A700) !important;\n }\n\n .bgc-deep-purple-A700 {\n background-color: mat-color($mat-deep-purple, A700) !important;\n }\n\n .bgc-indigo-A700 {\n background-color: mat-color($mat-indigo, A700) !important;\n }\n\n .bgc-blue-A700 {\n background-color: mat-color($mat-blue, A700) !important;\n }\n\n .bgc-light-blue-A700 {\n background-color: mat-color($mat-light-blue, A700) !important;\n }\n\n .bgc-cyan-A700 {\n background-color: mat-color($mat-cyan, A700) !important;\n }\n\n .bgc-teal-A700 {\n background-color: mat-color($mat-teal, A700) !important;\n }\n\n .bgc-green-A700 {\n background-color: mat-color($mat-green, A700) !important;\n }\n\n .bgc-light-green-A700 {\n background-color: mat-color($mat-light-green, A700) !important;\n }\n\n .bgc-lime-A700 {\n background-color: mat-color($mat-lime, A700) !important;\n }\n\n .bgc-yellow-A700 {\n background-color: mat-color($mat-yellow, A700) !important;\n }\n\n .bgc-amber-A700 {\n background-color: mat-color($mat-amber, A700) !important;\n }\n\n .bgc-orange-A700 {\n background-color: mat-color($mat-orange, A700) !important;\n }\n\n .bgc-deep-orange-A700 {\n background-color: mat-color($mat-deep-orange, A700) !important;\n }\n\n // Black\n .bgc-black {\n background-color: rgba(black, 87) !important;\n }\n\n .bgc-black-1 {\n background-color: rgba(black, 54) !important;\n }\n\n .bgc-black-2 {\n background-color: rgba(black, 38) !important;\n }\n\n .bgc-black-3 {\n background-color: rgba(black, 0.12) !important;\n }\n\n .bgc-black-4 {\n background-color: black !important;\n }\n\n // White\n .bgc-white {\n background-color: rgba(white, 0.7) !important;\n }\n\n .bgc-white-1 {\n background-color: rgba(white, 0.3) !important;\n }\n\n .bgc-white-2 {\n background-color: rgba(white, 0.3) !important;\n }\n\n .bgc-white-3 {\n background-color: rgba(white, 0.12) !important;\n }\n\n .bgc-white-4 {\n background-color: white !important;\n }\n\n // Fill color\n\n // 50\n .fill-red-50 {\n fill: mat-color($mat-red, 50) !important;\n }\n\n .fill-pink-50 {\n fill: mat-color($mat-pink, 50) !important;\n }\n\n .fill-purple-50 {\n fill: mat-color($mat-purple, 50) !important;\n }\n\n .fill-deep-purple-50 {\n fill: mat-color($mat-deep-purple, 50) !important;\n }\n\n .fill-indigo-50 {\n fill: mat-color($mat-indigo, 50) !important;\n }\n\n .fill-blue-50 {\n fill: mat-color($mat-blue, 50) !important;\n }\n\n .fill-light-blue-50 {\n fill: mat-color($mat-light-blue, 50) !important;\n }\n\n .fill-cyan-50 {\n fill: mat-color($mat-cyan, 50) !important;\n }\n\n .fill-teal-50 {\n fill: mat-color($mat-teal, 50) !important;\n }\n\n .fill-green-50 {\n fill: mat-color($mat-green, 50) !important;\n }\n\n .fill-light-green-50 {\n fill: mat-color($mat-light-green, 50) !important;\n }\n\n .fill-lime-50 {\n fill: mat-color($mat-lime, 50) !important;\n }\n\n .fill-yellow-50 {\n fill: mat-color($mat-yellow, 50) !important;\n }\n\n .fill-amber-50 {\n fill: mat-color($mat-amber, 50) !important;\n }\n\n .fill-orange-50 {\n fill: mat-color($mat-orange, 50) !important;\n }\n\n .fill-deep-orange-50 {\n fill: mat-color($mat-deep-orange, 50) !important;\n }\n\n .fill-brown-50 {\n fill: mat-color($mat-brown, 50) !important;\n }\n\n .fill-grey-50 {\n fill: mat-color($mat-grey, 50) !important;\n }\n\n .fill-blue-grey-50 {\n fill: mat-color($mat-blue-grey, 50) !important;\n }\n\n // 100\n .fill-red-100 {\n fill: mat-color($mat-red, 100) !important;\n }\n\n .fill-pink-100 {\n fill: mat-color($mat-pink, 100) !important;\n }\n\n .fill-purple-100 {\n fill: mat-color($mat-purple, 100) !important;\n }\n\n .fill-deep-purple-100 {\n fill: mat-color($mat-deep-purple, 100) !important;\n }\n\n .fill-indigo-100 {\n fill: mat-color($mat-indigo, 100) !important;\n }\n\n .fill-blue-100 {\n fill: mat-color($mat-blue, 100) !important;\n }\n\n .fill-light-blue-100 {\n fill: mat-color($mat-light-blue, 100) !important;\n }\n\n .fill-cyan-100 {\n fill: mat-color($mat-cyan, 100) !important;\n }\n\n .fill-teal-100 {\n fill: mat-color($mat-teal, 100) !important;\n }\n\n .fill-green-100 {\n fill: mat-color($mat-green, 100) !important;\n }\n\n .fill-light-green-100 {\n fill: mat-color($mat-light-green, 100) !important;\n }\n\n .fill-lime-100 {\n fill: mat-color($mat-lime, 100) !important;\n }\n\n .fill-yellow-100 {\n fill: mat-color($mat-yellow, 100) !important;\n }\n\n .fill-amber-100 {\n fill: mat-color($mat-amber, 100) !important;\n }\n\n .fill-orange-100 {\n fill: mat-color($mat-orange, 100) !important;\n }\n\n .fill-deep-orange-100 {\n fill: mat-color($mat-deep-orange, 100) !important;\n }\n\n .fill-brown-100 {\n fill: mat-color($mat-brown, 100) !important;\n }\n\n .fill-grey-100 {\n fill: mat-color($mat-grey, 100) !important;\n }\n\n .fill-blue-grey-100 {\n fill: mat-color($mat-blue-grey, 100) !important;\n }\n\n // 200\n .fill-red-200 {\n fill: mat-color($mat-red, 200) !important;\n }\n\n .fill-pink-200 {\n fill: mat-color($mat-pink, 200) !important;\n }\n\n .fill-purple-200 {\n fill: mat-color($mat-purple, 200) !important;\n }\n\n .fill-deep-purple-200 {\n fill: mat-color($mat-deep-purple, 200) !important;\n }\n\n .fill-indigo-200 {\n fill: mat-color($mat-indigo, 200) !important;\n }\n\n .fill-blue-200 {\n fill: mat-color($mat-blue, 200) !important;\n }\n\n .fill-light-blue-200 {\n fill: mat-color($mat-light-blue, 200) !important;\n }\n\n .fill-cyan-200 {\n fill: mat-color($mat-cyan, 200) !important;\n }\n\n .fill-teal-200 {\n fill: mat-color($mat-teal, 200) !important;\n }\n\n .fill-green-200 {\n fill: mat-color($mat-green, 200) !important;\n }\n\n .fill-light-green-200 {\n fill: mat-color($mat-light-green, 200) !important;\n }\n\n .fill-lime-200 {\n fill: mat-color($mat-lime, 200) !important;\n }\n\n .fill-yellow-200 {\n fill: mat-color($mat-yellow, 200) !important;\n }\n\n .fill-amber-200 {\n fill: mat-color($mat-amber, 200) !important;\n }\n\n .fill-orange-200 {\n fill: mat-color($mat-orange, 200) !important;\n }\n\n .fill-deep-orange-200 {\n fill: mat-color($mat-deep-orange, 200) !important;\n }\n\n .fill-brown-200 {\n fill: mat-color($mat-brown, 200) !important;\n }\n\n .fill-grey-200 {\n fill: mat-color($mat-grey, 200) !important;\n }\n\n .fill-blue-grey-200 {\n fill: mat-color($mat-blue-grey, 200) !important;\n }\n\n // 300\n .fill-red-300 {\n fill: mat-color($mat-red, 300) !important;\n }\n\n .fill-pink-300 {\n fill: mat-color($mat-pink, 300) !important;\n }\n\n .fill-purple-300 {\n fill: mat-color($mat-purple, 300) !important;\n }\n\n .fill-deep-purple-300 {\n fill: mat-color($mat-deep-purple, 300) !important;\n }\n\n .fill-indigo-300 {\n fill: mat-color($mat-indigo, 300) !important;\n }\n\n .fill-blue-300 {\n fill: mat-color($mat-blue, 300) !important;\n }\n\n .fill-light-blue-300 {\n fill: mat-color($mat-light-blue, 300) !important;\n }\n\n .fill-cyan-300 {\n fill: mat-color($mat-cyan, 300) !important;\n }\n\n .fill-teal-300 {\n fill: mat-color($mat-teal, 300) !important;\n }\n\n .fill-green-300 {\n fill: mat-color($mat-green, 300) !important;\n }\n\n .fill-light-green-300 {\n fill: mat-color($mat-light-green, 300) !important;\n }\n\n .fill-lime-300 {\n fill: mat-color($mat-lime, 300) !important;\n }\n\n .fill-yellow-300 {\n fill: mat-color($mat-yellow, 300) !important;\n }\n\n .fill-amber-300 {\n fill: mat-color($mat-amber, 300) !important;\n }\n\n .fill-orange-300 {\n fill: mat-color($mat-orange, 300) !important;\n }\n\n .fill-deep-orange-300 {\n fill: mat-color($mat-deep-orange, 300) !important;\n }\n\n .fill-brown-300 {\n fill: mat-color($mat-brown, 300) !important;\n }\n\n .fill-grey-300 {\n fill: mat-color($mat-grey, 300) !important;\n }\n\n .fill-blue-grey-300 {\n fill: mat-color($mat-blue-grey, 300) !important;\n }\n\n // 400\n .fill-red-400 {\n fill: mat-color($mat-red, 400) !important;\n }\n\n .fill-pink-400 {\n fill: mat-color($mat-pink, 400) !important;\n }\n\n .fill-purple-400 {\n fill: mat-color($mat-purple, 400) !important;\n }\n\n .fill-deep-purple-400 {\n fill: mat-color($mat-deep-purple, 400) !important;\n }\n\n .fill-indigo-400 {\n fill: mat-color($mat-indigo, 400) !important;\n }\n\n .fill-blue-400 {\n fill: mat-color($mat-blue, 400) !important;\n }\n\n .fill-light-blue-400 {\n fill: mat-color($mat-light-blue, 400) !important;\n }\n\n .fill-cyan-400 {\n fill: mat-color($mat-cyan, 400) !important;\n }\n\n .fill-teal-400 {\n fill: mat-color($mat-teal, 400) !important;\n }\n\n .fill-green-400 {\n fill: mat-color($mat-green, 400) !important;\n }\n\n .fill-light-green-400 {\n fill: mat-color($mat-light-green, 400) !important;\n }\n\n .fill-lime-400 {\n fill: mat-color($mat-lime, 400) !important;\n }\n\n .fill-yellow-400 {\n fill: mat-color($mat-yellow, 400) !important;\n }\n\n .fill-amber-400 {\n fill: mat-color($mat-amber, 400) !important;\n }\n\n .fill-orange-400 {\n fill: mat-color($mat-orange, 400) !important;\n }\n\n .fill-deep-orange-400 {\n fill: mat-color($mat-deep-orange, 400) !important;\n }\n\n .fill-brown-400 {\n fill: mat-color($mat-brown, 400) !important;\n }\n\n .fill-grey-400 {\n fill: mat-color($mat-grey, 400) !important;\n }\n\n .fill-blue-grey-400 {\n fill: mat-color($mat-blue-grey, 400) !important;\n }\n\n // 500\n .fill-red-500 {\n fill: mat-color($mat-red, 500) !important;\n }\n\n .fill-pink-500 {\n fill: mat-color($mat-pink, 500) !important;\n }\n\n .fill-purple-500 {\n fill: mat-color($mat-purple, 500) !important;\n }\n\n .fill-deep-purple-500 {\n fill: mat-color($mat-deep-purple, 500) !important;\n }\n\n .fill-indigo-500 {\n fill: mat-color($mat-indigo, 500) !important;\n }\n\n .fill-blue-500 {\n fill: mat-color($mat-blue, 500) !important;\n }\n\n .fill-light-blue-500 {\n fill: mat-color($mat-light-blue, 500) !important;\n }\n\n .fill-cyan-500 {\n fill: mat-color($mat-cyan, 500) !important;\n }\n\n .fill-teal-500 {\n fill: mat-color($mat-teal, 500) !important;\n }\n\n .fill-green-500 {\n fill: mat-color($mat-green, 500) !important;\n }\n\n .fill-light-green-500 {\n fill: mat-color($mat-light-green, 500) !important;\n }\n\n .fill-lime-500 {\n fill: mat-color($mat-lime, 500) !important;\n }\n\n .fill-yellow-500 {\n fill: mat-color($mat-yellow, 500) !important;\n }\n\n .fill-amber-500 {\n fill: mat-color($mat-amber, 500) !important;\n }\n\n .fill-orange-500 {\n fill: mat-color($mat-orange, 500) !important;\n }\n\n .fill-deep-orange-500 {\n fill: mat-color($mat-deep-orange, 500) !important;\n }\n\n .fill-brown-500 {\n fill: mat-color($mat-brown, 500) !important;\n }\n\n .fill-grey-500 {\n fill: mat-color($mat-grey, 500) !important;\n }\n\n .fill-blue-grey-500 {\n fill: mat-color($mat-blue-grey, 500) !important;\n }\n\n // 600\n .fill-red-600 {\n fill: mat-color($mat-red, 600) !important;\n }\n\n .fill-pink-600 {\n fill: mat-color($mat-pink, 600) !important;\n }\n\n .fill-purple-600 {\n fill: mat-color($mat-purple, 600) !important;\n }\n\n .fill-deep-purple-600 {\n fill: mat-color($mat-deep-purple, 600) !important;\n }\n\n .fill-indigo-600 {\n fill: mat-color($mat-indigo, 600) !important;\n }\n\n .fill-blue-600 {\n fill: mat-color($mat-blue, 600) !important;\n }\n\n .fill-light-blue-600 {\n fill: mat-color($mat-light-blue, 600) !important;\n }\n\n .fill-cyan-600 {\n fill: mat-color($mat-cyan, 600) !important;\n }\n\n .fill-teal-600 {\n fill: mat-color($mat-teal, 600) !important;\n }\n\n .fill-green-600 {\n fill: mat-color($mat-green, 600) !important;\n }\n\n .fill-light-green-600 {\n fill: mat-color($mat-light-green, 600) !important;\n }\n\n .fill-lime-600 {\n fill: mat-color($mat-lime, 600) !important;\n }\n\n .fill-yellow-600 {\n fill: mat-color($mat-yellow, 600) !important;\n }\n\n .fill-amber-600 {\n fill: mat-color($mat-amber, 600) !important;\n }\n\n .fill-orange-600 {\n fill: mat-color($mat-orange, 600) !important;\n }\n\n .fill-deep-orange-600 {\n fill: mat-color($mat-deep-orange, 600) !important;\n }\n\n .fill-brown-600 {\n fill: mat-color($mat-brown, 600) !important;\n }\n\n .fill-grey-600 {\n fill: mat-color($mat-grey, 600) !important;\n }\n\n .fill-blue-grey-600 {\n fill: mat-color($mat-blue-grey, 600) !important;\n }\n\n // 700\n .fill-red-700 {\n fill: mat-color($mat-red, 700) !important;\n }\n\n .fill-pink-700 {\n fill: mat-color($mat-pink, 700) !important;\n }\n\n .fill-purple-700 {\n fill: mat-color($mat-purple, 700) !important;\n }\n\n .fill-deep-purple-700 {\n fill: mat-color($mat-deep-purple, 700) !important;\n }\n\n .fill-indigo-700 {\n fill: mat-color($mat-indigo, 700) !important;\n }\n\n .fill-blue-700 {\n fill: mat-color($mat-blue, 700) !important;\n }\n\n .fill-light-blue-700 {\n fill: mat-color($mat-light-blue, 700) !important;\n }\n\n .fill-cyan-700 {\n fill: mat-color($mat-cyan, 700) !important;\n }\n\n .fill-teal-700 {\n fill: mat-color($mat-teal, 700) !important;\n }\n\n .fill-green-700 {\n fill: mat-color($mat-green, 700) !important;\n }\n\n .fill-light-green-700 {\n fill: mat-color($mat-light-green, 700) !important;\n }\n\n .fill-lime-700 {\n fill: mat-color($mat-lime, 700) !important;\n }\n\n .fill-yellow-700 {\n fill: mat-color($mat-yellow, 700) !important;\n }\n\n .fill-amber-700 {\n fill: mat-color($mat-amber, 700) !important;\n }\n\n .fill-orange-700 {\n fill: mat-color($mat-orange, 700) !important;\n }\n\n .fill-deep-orange-700 {\n fill: mat-color($mat-deep-orange, 700) !important;\n }\n\n .fill-brown-700 {\n fill: mat-color($mat-brown, 700) !important;\n }\n\n .fill-grey-700 {\n fill: mat-color($mat-grey, 700) !important;\n }\n\n .fill-blue-grey-700 {\n fill: mat-color($mat-blue-grey, 700) !important;\n }\n\n // 800\n .fill-red-800 {\n fill: mat-color($mat-red, 800) !important;\n }\n\n .fill-pink-800 {\n fill: mat-color($mat-pink, 800) !important;\n }\n\n .fill-purple-800 {\n fill: mat-color($mat-purple, 800) !important;\n }\n\n .fill-deep-purple-800 {\n fill: mat-color($mat-deep-purple, 800) !important;\n }\n\n .fill-indigo-800 {\n fill: mat-color($mat-indigo, 800) !important;\n }\n\n .fill-blue-800 {\n fill: mat-color($mat-blue, 800) !important;\n }\n\n .fill-light-blue-800 {\n fill: mat-color($mat-light-blue, 800) !important;\n }\n\n .fill-cyan-800 {\n fill: mat-color($mat-cyan, 800) !important;\n }\n\n .fill-teal-800 {\n fill: mat-color($mat-teal, 800) !important;\n }\n\n .fill-green-800 {\n fill: mat-color($mat-green, 800) !important;\n }\n\n .fill-light-green-800 {\n fill: mat-color($mat-light-green, 800) !important;\n }\n\n .fill-lime-800 {\n fill: mat-color($mat-lime, 800) !important;\n }\n\n .fill-yellow-800 {\n fill: mat-color($mat-yellow, 800) !important;\n }\n\n .fill-amber-800 {\n fill: mat-color($mat-amber, 800) !important;\n }\n\n .fill-orange-800 {\n fill: mat-color($mat-orange, 800) !important;\n }\n\n .fill-deep-orange-800 {\n fill: mat-color($mat-deep-orange, 800) !important;\n }\n\n .fill-brown-800 {\n fill: mat-color($mat-brown, 800) !important;\n }\n\n .fill-grey-800 {\n fill: mat-color($mat-grey, 800) !important;\n }\n\n .fill-blue-grey-800 {\n fill: mat-color($mat-blue-grey, 800) !important;\n }\n\n // 900\n .fill-red-900 {\n fill: mat-color($mat-red, 900) !important;\n }\n\n .fill-pink-900 {\n fill: mat-color($mat-pink, 900) !important;\n }\n\n .fill-purple-900 {\n fill: mat-color($mat-purple, 900) !important;\n }\n\n .fill-deep-purple-900 {\n fill: mat-color($mat-deep-purple, 900) !important;\n }\n\n .fill-indigo-900 {\n fill: mat-color($mat-indigo, 900) !important;\n }\n\n .fill-blue-900 {\n fill: mat-color($mat-blue, 900) !important;\n }\n\n .fill-light-blue-900 {\n fill: mat-color($mat-light-blue, 900) !important;\n }\n\n .fill-cyan-900 {\n fill: mat-color($mat-cyan, 900) !important;\n }\n\n .fill-teal-900 {\n fill: mat-color($mat-teal, 900) !important;\n }\n\n .fill-green-900 {\n fill: mat-color($mat-green, 900) !important;\n }\n\n .fill-light-green-900 {\n fill: mat-color($mat-light-green, 900) !important;\n }\n\n .fill-lime-900 {\n fill: mat-color($mat-lime, 900) !important;\n }\n\n .fill-yellow-900 {\n fill: mat-color($mat-yellow, 900) !important;\n }\n\n .fill-amber-900 {\n fill: mat-color($mat-amber, 900) !important;\n }\n\n .fill-orange-900 {\n fill: mat-color($mat-orange, 900) !important;\n }\n\n .fill-deep-orange-900 {\n fill: mat-color($mat-deep-orange, 900) !important;\n }\n\n .fill-brown-900 {\n fill: mat-color($mat-brown, 900) !important;\n }\n\n .fill-grey-900 {\n fill: mat-color($mat-grey, 900) !important;\n }\n\n .fill-blue-grey-900 {\n fill: mat-color($mat-blue-grey, 900) !important;\n }\n\n // A100\n .fill-red-A100 {\n fill: mat-color($mat-red, A100) !important;\n }\n\n .fill-pink-A100 {\n fill: mat-color($mat-pink, A100) !important;\n }\n\n .fill-purple-A100 {\n fill: mat-color($mat-purple, A100) !important;\n }\n\n .fill-deep-purple-A100 {\n fill: mat-color($mat-deep-purple, A100) !important;\n }\n\n .fill-indigo-A100 {\n fill: mat-color($mat-indigo, A100) !important;\n }\n\n .fill-blue-A100 {\n fill: mat-color($mat-blue, A100) !important;\n }\n\n .fill-light-blue-A100 {\n fill: mat-color($mat-light-blue, A100) !important;\n }\n\n .fill-cyan-A100 {\n fill: mat-color($mat-cyan, A100) !important;\n }\n\n .fill-teal-A100 {\n fill: mat-color($mat-teal, A100) !important;\n }\n\n .fill-green-A100 {\n fill: mat-color($mat-green, A100) !important;\n }\n\n .fill-light-green-A100 {\n fill: mat-color($mat-light-green, A100) !important;\n }\n\n .fill-lime-A100 {\n fill: mat-color($mat-lime, A100) !important;\n }\n\n .fill-yellow-A100 {\n fill: mat-color($mat-yellow, A100) !important;\n }\n\n .fill-amber-A100 {\n fill: mat-color($mat-amber, A100) !important;\n }\n\n .fill-orange-A100 {\n fill: mat-color($mat-orange, A100) !important;\n }\n\n .fill-deep-orange-A100 {\n fill: mat-color($mat-deep-orange, A100) !important;\n }\n\n // A200\n .fill-red-A200 {\n fill: mat-color($mat-red, A200) !important;\n }\n\n .fill-pink-A200 {\n fill: mat-color($mat-pink, A200) !important;\n }\n\n .fill-purple-A200 {\n fill: mat-color($mat-purple, A200) !important;\n }\n\n .fill-deep-purple-A200 {\n fill: mat-color($mat-deep-purple, A200) !important;\n }\n\n .fill-indigo-A200 {\n fill: mat-color($mat-indigo, A200) !important;\n }\n\n .fill-blue-A200 {\n fill: mat-color($mat-blue, A200) !important;\n }\n\n .fill-light-blue-A200 {\n fill: mat-color($mat-light-blue, A200) !important;\n }\n\n .fill-cyan-A200 {\n fill: mat-color($mat-cyan, A200) !important;\n }\n\n .fill-teal-A200 {\n fill: mat-color($mat-teal, A200) !important;\n }\n\n .fill-green-A200 {\n fill: mat-color($mat-green, A200) !important;\n }\n\n .fill-light-green-A200 {\n fill: mat-color($mat-light-green, A200) !important;\n }\n\n .fill-lime-A200 {\n fill: mat-color($mat-lime, A200) !important;\n }\n\n .fill-yellow-A200 {\n fill: mat-color($mat-yellow, A200) !important;\n }\n\n .fill-amber-A200 {\n fill: mat-color($mat-amber, A200) !important;\n }\n\n .fill-orange-A200 {\n fill: mat-color($mat-orange, A200) !important;\n }\n\n .fill-deep-orange-A200 {\n fill: mat-color($mat-deep-orange, A200) !important;\n }\n\n // A400\n .fill-red-A400 {\n fill: mat-color($mat-red, A400) !important;\n }\n\n .fill-pink-A400 {\n fill: mat-color($mat-pink, A400) !important;\n }\n\n .fill-purple-A400 {\n fill: mat-color($mat-purple, A400) !important;\n }\n\n .fill-deep-purple-A400 {\n fill: mat-color($mat-deep-purple, A400) !important;\n }\n\n .fill-indigo-A400 {\n fill: mat-color($mat-indigo, A400) !important;\n }\n\n .fill-blue-A400 {\n fill: mat-color($mat-blue, A400) !important;\n }\n\n .fill-light-blue-A400 {\n fill: mat-color($mat-light-blue, A400) !important;\n }\n\n .fill-cyan-A400 {\n fill: mat-color($mat-cyan, A400) !important;\n }\n\n .fill-teal-A400 {\n fill: mat-color($mat-teal, A400) !important;\n }\n\n .fill-green-A400 {\n fill: mat-color($mat-green, A400) !important;\n }\n\n .fill-light-green-A400 {\n fill: mat-color($mat-light-green, A400) !important;\n }\n\n .fill-lime-A400 {\n fill: mat-color($mat-lime, A400) !important;\n }\n\n .fill-yellow-A400 {\n fill: mat-color($mat-yellow, A400) !important;\n }\n\n .fill-amber-A400 {\n fill: mat-color($mat-amber, A400) !important;\n }\n\n .fill-orange-A400 {\n fill: mat-color($mat-orange, A400) !important;\n }\n\n .fill-deep-orange-A400 {\n fill: mat-color($mat-deep-orange, A400) !important;\n }\n\n // A700\n .fill-red-A700 {\n fill: mat-color($mat-red, A700) !important;\n }\n\n .fill-pink-A700 {\n fill: mat-color($mat-pink, A700) !important;\n }\n\n .fill-purple-A700 {\n fill: mat-color($mat-purple, A700) !important;\n }\n\n .fill-deep-purple-A700 {\n fill: mat-color($mat-deep-purple, A700) !important;\n }\n\n .fill-indigo-A700 {\n fill: mat-color($mat-indigo, A700) !important;\n }\n\n .fill-blue-A700 {\n fill: mat-color($mat-blue, A700) !important;\n }\n\n .fill-light-blue-A700 {\n fill: mat-color($mat-light-blue, A700) !important;\n }\n\n .fill-cyan-A700 {\n fill: mat-color($mat-cyan, A700) !important;\n }\n\n .fill-teal-A700 {\n fill: mat-color($mat-teal, A700) !important;\n }\n\n .fill-green-A700 {\n fill: mat-color($mat-green, A700) !important;\n }\n\n .fill-light-green-A700 {\n fill: mat-color($mat-light-green, A700) !important;\n }\n\n .fill-lime-A700 {\n fill: mat-color($mat-lime, A700) !important;\n }\n\n .fill-yellow-A700 {\n fill: mat-color($mat-yellow, A700) !important;\n }\n\n .fill-amber-A700 {\n fill: mat-color($mat-amber, A700) !important;\n }\n\n .fill-orange-A700 {\n fill: mat-color($mat-orange, A700) !important;\n }\n\n .fill-deep-orange-A700 {\n fill: mat-color($mat-deep-orange, A700) !important;\n }\n\n // Black\n .fill-black {\n fill: rgba(black, 87) !important;\n }\n\n .fill-black-1 {\n fill: rgba(black, 54) !important;\n }\n\n .fill-black-2 {\n fill: rgba(black, 38) !important;\n }\n\n .fill-black-3 {\n fill: rgba(black, 0.12) !important;\n }\n\n .fill-black-4 {\n fill: black !important;\n }\n\n // White\n .fill-white {\n fill: rgba(white, 0.7) !important;\n }\n\n .fill-white-1 {\n fill: rgba(white, 0.3) !important;\n }\n\n .fill-white-2 {\n fill: rgba(white, 0.3) !important;\n }\n\n .fill-white-3 {\n fill: rgba(white, 0.12) !important;\n }\n\n .fill-white-4 {\n fill: white !important;\n }\n}\n\n/* stylelint-enable selector-class-pattern */\n","// This contains all of the styles for the badge\n// rather than just the color/theme because of\n// no style sheet support for directives.\n@use 'sass:color';\n@use 'sass:map';\n@use 'sass:meta';\n@use 'sass:math';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../../cdk/a11y';\n\n$font-size: 12px;\n$font-weight: 600;\n$default-size: 22px !default;\n$small-size: $default-size - 6;\n$large-size: $default-size + 6;\n$_badge-structure-emitted: false !default;\n\n// Mixin for building offset given different sizes\n@mixin _badge-size($size) {\n // This mixin isn't used in the context of a theme so we can disable the ampersand check.\n // stylelint-disable material/no-ampersand-beyond-selector-start\n .mat-badge-content {\n width: $size;\n height: $size;\n line-height: $size;\n }\n\n &.mat-badge-above {\n .mat-badge-content {\n top: math.div(-$size, 2);\n }\n }\n\n &.mat-badge-below {\n .mat-badge-content {\n bottom: math.div(-$size, 2);\n }\n }\n\n &.mat-badge-before {\n .mat-badge-content {\n left: -$size;\n }\n }\n\n [dir='rtl'] &.mat-badge-before {\n .mat-badge-content {\n left: auto;\n right: -$size;\n }\n }\n\n &.mat-badge-after {\n .mat-badge-content {\n right: -$size;\n }\n }\n\n [dir='rtl'] &.mat-badge-after {\n .mat-badge-content {\n right: auto;\n left: -$size;\n }\n }\n\n &.mat-badge-overlap {\n &.mat-badge-before {\n .mat-badge-content {\n left: math.div(-$size, 2);\n }\n }\n\n [dir='rtl'] &.mat-badge-before {\n .mat-badge-content {\n left: auto;\n right: math.div(-$size, 2);\n }\n }\n\n &.mat-badge-after {\n .mat-badge-content {\n right: math.div(-$size, 2);\n }\n }\n\n [dir='rtl'] &.mat-badge-after {\n .mat-badge-content {\n right: auto;\n left: math.div(-$size, 2);\n }\n }\n }\n // stylelint-enable\n}\n\n// Structural styles for the badge. They have to be included as a part of the theme,\n// because the badge is a directive and we have no other way of attaching styles to it.\n@mixin _badge-structure {\n .mat-badge {\n position: relative;\n }\n\n .mat-badge-hidden {\n .mat-badge-content {\n display: none;\n }\n }\n\n .mat-badge-content {\n position: absolute;\n text-align: center;\n display: inline-block;\n border-radius: 50%;\n transition: transform 200ms ease-in-out;\n transform: scale(0.6);\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n pointer-events: none;\n }\n\n .ng-animate-disabled .mat-badge-content,\n .mat-badge-content._mat-animation-noopable {\n transition: none;\n }\n\n // The active class is added after the element is added\n // so it can animate scale to default\n .mat-badge-content.mat-badge-active {\n // Scale to `none` instead of `1` to avoid blurry text in some browsers.\n transform: none;\n }\n\n .mat-badge-small {\n @include _badge-size($small-size);\n }\n\n .mat-badge-medium {\n @include _badge-size($default-size);\n }\n\n .mat-badge-large {\n @include _badge-size($large-size);\n }\n}\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $primary: map.get($config, primary);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n .mat-badge-content {\n color: theming.get-color-from-palette($primary, default-contrast);\n background: theming.get-color-from-palette($primary);\n\n @include a11y.high-contrast(active, off) {\n outline: solid 1px;\n border-radius: 0;\n }\n }\n\n .mat-badge-accent {\n .mat-badge-content {\n background: theming.get-color-from-palette($accent);\n color: theming.get-color-from-palette($accent, default-contrast);\n }\n }\n\n .mat-badge-warn {\n .mat-badge-content {\n color: theming.get-color-from-palette($warn, default-contrast);\n background: theming.get-color-from-palette($warn);\n }\n }\n\n .mat-badge-disabled {\n .mat-badge-content {\n $app-background: theming.get-color-from-palette($background, 'background');\n $badge-color: theming.get-color-from-palette($foreground, disabled-button);\n\n // The disabled color usually has some kind of opacity, but because the badge is overlayed\n // on top of something else, it won't look good if it's opaque. If it is a color *type*,\n // we convert it into a solid color by taking the opacity from the rgba value and using\n // the value to determine the percentage of the background to put into foreground when\n // mixing the colors together.\n @if (meta.type-of($badge-color) == color and meta.type-of($app-background) == color) {\n $badge-opacity: opacity($badge-color);\n background: color.mix($app-background, rgba($badge-color, 1), (1 - $badge-opacity) * 100%);\n }\n @else {\n background: $badge-color;\n }\n\n color: theming.get-color-from-palette($foreground, disabled-text);\n }\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-badge-content {\n font-weight: $font-weight;\n font-size: $font-size;\n font-family: typography-utils.font-family($config);\n }\n\n .mat-badge-small .mat-badge-content {\n // Set the font size to 75% of the original.\n font-size: $font-size * 0.75;\n }\n\n .mat-badge-large .mat-badge-content {\n font-size: $font-size * 2;\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-badge') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n // Try to reduce the number of times that the structural styles are emitted.\n @if not $_badge-structure-emitted {\n @include _badge-structure;\n\n // Only flip the flag if the mixin is included at the top level. Otherwise the first\n // inclusion might be inside of a theme class which will exclude the structural styles\n // from all other themes.\n @if not & {\n $_badge-structure-emitted: true !global;\n }\n }\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use 'typography-utils';\n@use '../theming/theming';\n\n/// Defines a typography level from the Material Design spec.\n/// @param {String} $font-size The font-size for this level.\n/// @param {String | Number} $line-height The line-height for this level.\n/// @param {String | Number} $font-weight The font-weight for this level.\n/// @param {String} $font-family The font-family for this level.\n/// @param {String} $letter-spacing The letter-spacing for this level.\n/// @returns {Map} A map representing the definition of this typpographic level.\n@function define-typography-level(\n $font-size,\n $line-height: $font-size,\n $font-weight: 400,\n $font-family: null,\n $letter-spacing: normal) {\n\n @return (\n font-size: $font-size,\n line-height: $line-height,\n font-weight: $font-weight,\n font-family: $font-family,\n letter-spacing: $letter-spacing\n );\n}\n\n/// Defines a collection of typography levels to configure typography for an application.\n/// Any level not specified defaults to the values defined in the Material Design specification:\n/// https://material.io/guidelines/style/typography.html.\n///\n/// Note that the Material Design specification does not describe explicit letter-spacing values.\n/// The values here come from reverse engineering the Material Design examples.\n/// @param {String} $font-family Default font-family for levels that don't specify font-family.\n/// @param {Map} $display-4 Configuration for the \"display-4\" typographic level.\n/// @param {Map} $display-3 Configuration for the \"display-3\" typographic level.\n/// @param {Map} $display-2 Configuration for the \"display-2\" typographic level.\n/// @param {Map} $display-1 Configuration for the \"display-1\" typographic level.\n/// @param {Map} $headline Configuration for the \"headline\" typographic level.\n/// @param {Map} $title Configuration for the \"title\" typographic level.\n/// @param {Map} $subheading-2 Configuration for the \"subheading-2\" typographic level.\n/// @param {Map} $subheading-1 Configuration for the \"subheading-1\" typographic level.\n/// @param {Map} $body-2 Configuration for the \"body-2\" typographic level.\n/// @param {Map} $body-1 Configuration for the \"body-1\" typographic level.\n/// @param {Map} $caption Configuration for the \"caption\" typographic level.\n/// @param {Map} $button Configuration for the \"button\" typographic level.\n/// @param {Map} $input Configuration for the \"input\" typographic level.\n/// @returns {Map} A typography config for the application.\n@function define-typography-config(\n $font-family: 'Roboto, \"Helvetica Neue\", sans-serif',\n $display-4: define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),\n $display-3: define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),\n $display-2: define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),\n $display-1: define-typography-level(34px, 40px, 400),\n $headline: define-typography-level(24px, 32px, 400),\n $title: define-typography-level(20px, 32px, 500),\n $subheading-2: define-typography-level(16px, 28px, 400),\n $subheading-1: define-typography-level(15px, 24px, 400),\n $body-2: define-typography-level(14px, 24px, 500),\n $body-1: define-typography-level(14px, 20px, 400),\n $caption: define-typography-level(12px, 20px, 400),\n $button: define-typography-level(14px, 14px, 500),\n // Line-height must be unit-less fraction of the font-size.\n $input: define-typography-level(inherit, 1.125, 400)\n) {\n\n // Declare an initial map with all of the levels.\n $config: (\n display-4: $display-4,\n display-3: $display-3,\n display-2: $display-2,\n display-1: $display-1,\n headline: $headline,\n title: $title,\n subheading-2: $subheading-2,\n subheading-1: $subheading-1,\n body-2: $body-2,\n body-1: $body-1,\n caption: $caption,\n button: $button,\n input: $input,\n );\n\n // Loop through the levels and set the `font-family` of the ones that don't have one to the base.\n // Note that Sass can't modify maps in place, which means that we need to merge and re-assign.\n @each $key, $level in $config {\n @if map.get($level, font-family) == null {\n $new-level: map.merge($level, (font-family: $font-family));\n $config: map.merge($config, ($key: $new-level));\n }\n }\n\n // Add the base font family to the config.\n @return map.merge($config, (font-family: $font-family));\n}\n\n// Whether a config is for the Material Design 2018 typography system.\n@function private-typography-is-2018-config($config) {\n @return map.get($config, headline-1) != null;\n}\n\n// Whether a config is for the Material Design 2014 typography system.\n@function private-typography-is-2014-config($config) {\n @return map.get($config, headline) != null;\n}\n\n// Given a config for either the 2014 or 2018 Material Design typography system,\n// produces a normalized typography config for the 2014 Material Design typography system.\n// 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles\n// 2018 - https://material.io/design/typography/the-type-system.html#type-scale\n//\n// Components using this function should be migrated to normalize to the 2018 style config instead.\n// New components should not use this function.\n@function private-typography-to-2014-config($config) {\n @if $config == null {\n @return null;\n }\n @if not private-typography-is-2014-config($config) {\n $args: (\n display-4: map.get($config, headline-1),\n display-3: map.get($config, headline-2),\n display-2: map.get($config, headline-3),\n display-1: map.get($config, headline-4),\n headline: map.get($config, headline-5),\n title: map.get($config, headline-6),\n subheading-2: map.get($config, subtitle-1),\n subheading-1: map.get($config, subtitle-2),\n body-2: map.get($config, body-1),\n body-1: map.get($config, body-2),\n button: map.get($config, button),\n caption: map.get($config, caption),\n );\n $non-null-args: ();\n @each $key, $value in $args {\n @if $value != null {\n $non-null-args: map.merge($non-null-args, ($key: $value));\n }\n }\n @return define-typography-config($non-null-args...);\n }\n @return $config;\n}\n\n// Given a config for either the 2014 or 2018 Material Design typography system,\n// produces a normalized typography config for the 2018 Material Design typography system.\n// 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles\n// 2018 - https://material.io/design/typography/the-type-system.html#type-scale\n@function private-typography-to-2018-config($config) {\n @if $config == null {\n @return null;\n }\n @if not private-typography-is-2018-config($config) {\n @return (\n headline-1: map.get($config, display-4),\n headline-2: map.get($config, display-3),\n headline-3: map.get($config, display-2),\n headline-4: map.get($config, display-1),\n headline-5: map.get($config, headline),\n headline-6: map.get($config, title),\n subtitle-1: map.get($config, subheading-2),\n\n // These mappings are odd, but body-2 in the 2014 system actually looks closer to subtitle-2\n // in the 2018 system, and subeading-1 in the 2014 system looks more like body-1 in the 2018\n // system.\n subtitle-2: map.get($config, body-2),\n body-1: map.get($config, subheading-1),\n\n body-2: map.get($config, body-1),\n button: map.get($config, button),\n caption: map.get($config, caption),\n overline: if(map.get($config, overline), map.get($config, overline),\n define-typography-level(12px, 32px, 500)\n )\n );\n }\n @return $config;\n}\n\n/// Emits baseline typographic styles based on a given config.\n/// @param {Map} $config-or-theme A typography config for an entire theme.\n/// @param {String} $selector Ancestor selector under which native elements, such as h1, will\n/// be styled.\n@mixin typography-hierarchy($config-or-theme, $selector: '.mat-typography') {\n $config: private-typography-to-2014-config(theming.get-typography-config($config-or-theme));\n\n .mat-h1, .mat-headline, #{$selector} h1 {\n @include typography-utils.typography-level($config, headline);\n margin: 0 0 16px;\n }\n\n .mat-h2, .mat-title, #{$selector} h2 {\n @include typography-utils.typography-level($config, title);\n margin: 0 0 16px;\n }\n\n .mat-h3, .mat-subheading-2, #{$selector} h3 {\n @include typography-utils.typography-level($config, subheading-2);\n margin: 0 0 16px;\n }\n\n .mat-h4, .mat-subheading-1, #{$selector} h4 {\n @include typography-utils.typography-level($config, subheading-1);\n margin: 0 0 16px;\n }\n\n // Note: the spec doesn't have anything that would correspond to h5 and h6, but we add these for\n // consistency. The font sizes come from the Chrome user agent styles which have h5 at 0.83em\n // and h6 at 0.67em.\n .mat-h5, #{$selector} h5 {\n @include typography-utils.font-shorthand(\n // calc is used here to support css variables\n calc(#{typography-utils.font-size($config, body-1)} * 0.83),\n typography-utils.font-weight($config, body-1),\n typography-utils.line-height($config, body-1),\n typography-utils.font-family($config, body-1)\n );\n\n margin: 0 0 12px;\n }\n\n .mat-h6, #{$selector} h6 {\n @include typography-utils.font-shorthand(\n // calc is used here to support css variables\n calc(#{typography-utils.font-size($config, body-1)} * 0.67),\n typography-utils.font-weight($config, body-1),\n typography-utils.line-height($config, body-1),\n typography-utils.font-family($config, body-1)\n );\n\n margin: 0 0 12px;\n }\n\n .mat-body-strong, .mat-body-2 {\n @include typography-utils.typography-level($config, body-2);\n }\n\n .mat-body, .mat-body-1, #{$selector} {\n @include typography-utils.typography-level($config, body-1);\n\n p {\n margin: 0 0 12px;\n }\n }\n\n .mat-small, .mat-caption {\n @include typography-utils.typography-level($config, caption);\n }\n\n .mat-display-4, #{$selector} .mat-display-4 {\n @include typography-utils.typography-level($config, display-4);\n margin: 0 0 56px;\n }\n\n .mat-display-3, #{$selector} .mat-display-3 {\n @include typography-utils.typography-level($config, display-3);\n margin: 0 0 64px;\n }\n\n .mat-display-2, #{$selector} .mat-display-2 {\n @include typography-utils.typography-level($config, display-2);\n margin: 0 0 64px;\n }\n\n .mat-display-1, #{$selector} .mat-display-1 {\n @include typography-utils.typography-level($config, display-1);\n margin: 0 0 64px;\n }\n}\n","@use 'sass:list';\n@use 'sass:map';\n@use 'sass:math';\n@use 'sass:meta';\n@use 'sass:string';\n\n\n// Utility for fetching a nested value from a typography config.\n@function _mat-get-type-value($config, $level, $name) {\n @return map.get(map.get($config, $level), $name);\n}\n\n/// Gets the font size for a level inside a typography config.\n/// @param {Map} $config A typography config.\n/// @param {Map} $level A typography level.\n@function font-size($config, $level) {\n @return _mat-get-type-value($config, $level, font-size);\n}\n\n/// Gets the line height for a level inside a typography config.\n/// @param {Map} $config A typography config.\n/// @param {Map} $level A typography level.\n@function line-height($config, $level) {\n @return _mat-get-type-value($config, $level, line-height);\n}\n\n/// Gets the font weight for a level inside a typography config.\n/// @param {Map} $config A typography config.\n/// @param {Map} $level A typography level.\n@function font-weight($config, $level) {\n @return _mat-get-type-value($config, $level, font-weight);\n}\n\n/// Gets the letter spacing for a level inside a typography config.\n/// @param {Map} $config A typography config.\n/// @param {Map} $level A typography level.\n@function letter-spacing($config, $level) {\n @return _mat-get-type-value($config, $level, letter-spacing);\n}\n\n/// Gets the font-family from a typography config and removes the quotes around it.\n/// @param {Map} $config A typography config.\n/// @param {Map} $level A typography level.\n@function font-family($config, $level: null) {\n $font-family: map.get($config, font-family);\n\n @if $level != null {\n $font-family: _mat-get-type-value($config, $level, font-family);\n }\n\n // Guard against unquoting non-string values, because it's deprecated.\n @return if(meta.type-of($font-family) == string, string.unquote($font-family), $font-family);\n}\n\n/// Outputs the shorthand `font` CSS property, based on a set of typography values. Falls back to\n/// the individual properties if a value that isn't allowed in the shorthand is passed in.\n/// @param {String} $font-size The font-size value.\n/// @param {String | Number} $font-weight The font-weight value.\n/// @param {String | Number} $line-height The line-height value.\n/// @param {String} $font-family The font-family value.\n/// @returns {String} The `font` shorthand value combining the given parts.\n@mixin font-shorthand($font-size, $font-weight, $line-height, $font-family) {\n // If any of the values are set to `inherit`, we can't use the shorthand\n // so we fall back to passing in the individual properties.\n @if ($font-size == inherit or\n $font-weight == inherit or\n $line-height == inherit or\n $font-family == inherit or\n $font-size == null or\n $font-weight == null or\n $line-height == null or\n $font-family == null) {\n\n font-size: $font-size;\n font-weight: $font-weight;\n line-height: $line-height;\n font-family: $font-family;\n }\n @else {\n // Otherwise use the shorthand `font`, because it's the least amount of bytes.\n font: $font-weight list.slash($font-size, $line-height) $font-family;\n }\n}\n\n/// Emits CSS styles for the given typography level.\n/// @param {Map} $config A typography config.\n/// @param {Map} $level A typography level.\n@mixin typography-level($config, $level) {\n $font-size: font-size($config, $level);\n $font-weight: font-weight($config, $level);\n $line-height: line-height($config, $level);\n $font-family: font-family($config, $level);\n\n @include font-shorthand($font-size, $font-weight, $line-height, $font-family);\n letter-spacing: letter-spacing($config, $level);\n}\n\n/// Coerce a value to `em` if it is a unitless number, otherwise returns\n/// the value provided.\n@function private-coerce-unitless-to-em($value) {\n @return if(math.is-unitless($value), 1em * $value, $value);\n}\n","@use 'sass:map';\n@use '../core/style/private';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/theming/theming';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n .mat-bottom-sheet-container {\n @include private.private-theme-elevation(16, $config);\n background: theming.get-color-from-palette($background, dialog);\n color: theming.get-color-from-palette($foreground, text);\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-bottom-sheet-container {\n @include typography-utils.typography-level($config, body-1);\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-bottom-sheet') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use 'sass:meta';\n@use '../core/theming/theming';\n@use '../core/style/private';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n$_ripple-opacity: 0.1;\n\n// Applies a focus style to an mat-button element for each of the supported palettes.\n@mixin _focus-overlay-color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n\n &.mat-primary .mat-button-focus-overlay {\n background-color: theming.get-color-from-palette($primary);\n }\n\n &.mat-accent .mat-button-focus-overlay {\n background-color: theming.get-color-from-palette($accent);\n }\n\n &.mat-warn .mat-button-focus-overlay {\n background-color: theming.get-color-from-palette($warn);\n }\n\n &.mat-button-disabled .mat-button-focus-overlay {\n background-color: transparent;\n }\n}\n\n// Applies the background color for a ripple. If the value provided is not a Sass color,\n// we assume that we've been given a CSS variable. Since we can't perform alpha-blending\n// on a CSS variable, we instead add the opacity directly to the ripple element.\n@mixin _ripple-background($palette, $hue, $opacity) {\n $background-color: theming.get-color-from-palette($palette, $hue, $opacity);\n background-color: $background-color;\n @if (meta.type-of($background-color) != color) {\n opacity: $opacity;\n }\n}\n\n@mixin _ripple-color($theme, $hue, $opacity: $_ripple-opacity) {\n $primary: map.get($theme, primary);\n $accent: map.get($theme, accent);\n $warn: map.get($theme, warn);\n\n &.mat-primary .mat-ripple-element {\n @include _ripple-background($primary, $hue, $opacity);\n }\n\n &.mat-accent .mat-ripple-element {\n @include _ripple-background($accent, $hue, $opacity);\n }\n\n &.mat-warn .mat-ripple-element {\n @include _ripple-background($warn, $hue, $opacity);\n }\n}\n\n// Applies a property to an mat-button element for each of the supported palettes.\n@mixin _theme-property($theme, $property, $hue) {\n $primary: map.get($theme, primary);\n $accent: map.get($theme, accent);\n $warn: map.get($theme, warn);\n $background: map.get($theme, background);\n $foreground: map.get($theme, foreground);\n\n &.mat-primary {\n #{$property}: theming.get-color-from-palette($primary, $hue);\n }\n &.mat-accent {\n #{$property}: theming.get-color-from-palette($accent, $hue);\n }\n &.mat-warn {\n #{$property}: theming.get-color-from-palette($warn, $hue);\n }\n\n &.mat-primary, &.mat-accent, &.mat-warn, &.mat-button-disabled {\n &.mat-button-disabled {\n $palette: if($property == 'color', $foreground, $background);\n #{$property}: theming.get-color-from-palette($palette, disabled-button);\n }\n }\n}\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n .mat-button, .mat-icon-button, .mat-stroked-button {\n // Buttons without a background color should inherit the font color. This is necessary to\n // ensure that the button is readable on custom background colors. It's wrong to always assume\n // that those buttons are always placed inside of containers with the default background\n // color of the theme (e.g. themed toolbars).\n color: inherit;\n background: transparent;\n\n @include _theme-property($config, 'color', text);\n @include _focus-overlay-color($config);\n\n // Setup the ripple color to be based on the text color. This ensures that the ripples\n // are matching with the current theme palette and are in contrast to the background color\n // (e.g in themed toolbars).\n .mat-ripple-element {\n opacity: $_ripple-opacity;\n background-color: currentColor;\n }\n }\n\n .mat-button-focus-overlay {\n background: map.get($foreground, base);\n }\n\n // Note: this needs a bit extra specificity, because we're not guaranteed the inclusion\n // order of the theme styles and the button reset may end up resetting this as well.\n .mat-stroked-button:not(.mat-button-disabled) {\n border-color: theming.get-color-from-palette($foreground, divider);\n }\n\n .mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab {\n // Default font and background color when not using any color palette.\n color: theming.get-color-from-palette($foreground, text);\n background-color: theming.get-color-from-palette($background, raised-button);\n\n @include _theme-property($config, 'color', default-contrast);\n @include _theme-property($config, 'background-color', default);\n @include _ripple-color($config, default-contrast);\n }\n\n .mat-stroked-button, .mat-flat-button {\n @include private.private-theme-overridable-elevation(0, $config);\n }\n\n .mat-raised-button {\n @include private.private-theme-overridable-elevation(2, $config);\n\n &:not(.mat-button-disabled):active {\n @include private.private-theme-overridable-elevation(8, $config);\n }\n\n &.mat-button-disabled {\n @include private.private-theme-overridable-elevation(0, $config);\n }\n }\n\n .mat-fab, .mat-mini-fab {\n @include private.private-theme-overridable-elevation(6, $config);\n\n &:not(.mat-button-disabled):active {\n @include private.private-theme-overridable-elevation(12, $config);\n }\n\n &.mat-button-disabled {\n @include private.private-theme-overridable-elevation(0, $config);\n }\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-button, .mat-raised-button, .mat-icon-button, .mat-stroked-button,\n .mat-flat-button, .mat-fab, .mat-mini-fab {\n font: {\n family: typography-utils.font-family($config, button);\n size: typography-utils.font-size($config, button);\n weight: typography-utils.font-weight($config, button);\n }\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-button') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/style/private';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/density/private/compatibility';\n@use './button-toggle-variables';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $foreground: map.get($config, foreground);\n $background: map.get($config, background);\n $divider-color: theming.get-color-from-palette($foreground, divider);\n\n .mat-button-toggle-standalone,\n .mat-button-toggle-group {\n @include private.private-theme-elevation(2, $config);\n }\n\n .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,\n .mat-button-toggle-group-appearance-standard {\n box-shadow: none;\n }\n\n .mat-button-toggle {\n color: theming.get-color-from-palette($foreground, hint-text);\n\n .mat-button-toggle-focus-overlay {\n background-color: theming.get-color-from-palette($background, focused-button);\n }\n }\n\n .mat-button-toggle-appearance-standard {\n color: theming.get-color-from-palette($foreground, text);\n background: theming.get-color-from-palette($background, card);\n\n .mat-button-toggle-focus-overlay {\n background-color: theming.get-color-from-palette($background, focused-button, 1);\n }\n }\n\n .mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {\n border-left: solid 1px $divider-color;\n }\n\n [dir='rtl'] .mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {\n border-left: none;\n border-right: solid 1px $divider-color;\n }\n\n .mat-button-toggle-group-appearance-standard.mat-button-toggle-vertical {\n .mat-button-toggle + .mat-button-toggle {\n border-left: none;\n border-right: none;\n border-top: solid 1px $divider-color;\n }\n }\n\n .mat-button-toggle-checked {\n background-color: theming.get-color-from-palette($background, selected-button);\n color: theming.get-color-from-palette($foreground, secondary-text);\n\n &.mat-button-toggle-appearance-standard {\n color: theming.get-color-from-palette($foreground, text);\n }\n }\n\n .mat-button-toggle-disabled {\n color: theming.get-color-from-palette($foreground, disabled-button);\n background-color: theming.get-color-from-palette($background, disabled-button-toggle);\n\n &.mat-button-toggle-appearance-standard {\n background: theming.get-color-from-palette($background, card);\n }\n\n &.mat-button-toggle-checked {\n background-color: theming.get-color-from-palette($background, selected-disabled-button);\n }\n }\n\n .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,\n .mat-button-toggle-group-appearance-standard {\n border: solid 1px $divider-color;\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-button-toggle {\n font-family: typography-utils.font-family($config);\n }\n}\n\n@mixin density($config-or-theme) {\n $density-scale: theming.get-density-config($config-or-theme);\n $standard-height: compatibility.private-density-prop-value(\n button-toggle-variables.$standard-density-config, $density-scale, height);\n\n @include compatibility.private-density-legacy-compatibility() {\n .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {\n line-height: $standard-height;\n }\n }\n}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-button-toggle') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/style/private';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n .mat-card {\n @include private.private-theme-overridable-elevation(1, $config);\n background: theming.get-color-from-palette($background, card);\n color: theming.get-color-from-palette($foreground, text);\n\n // Needs extra specificity to be able to override the elevation selectors.\n &.mat-card-flat {\n @include private.private-theme-overridable-elevation(0, $config);\n }\n }\n\n .mat-card-subtitle {\n color: theming.get-color-from-palette($foreground, secondary-text);\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-card {\n font-family: typography-utils.font-family($config);\n }\n\n .mat-card-title {\n font: {\n size: typography-utils.font-size($config, headline);\n weight: typography-utils.font-weight($config, title);\n }\n }\n\n .mat-card-header .mat-card-title {\n font-size: typography-utils.font-size($config, title);\n }\n\n .mat-card-subtitle,\n .mat-card-content {\n font-size: typography-utils.font-size($config, body-1);\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-card') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $is-dark-theme: map.get($config, is-dark);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n\n // The color of the checkbox's checkmark / mixedmark.\n $checkbox-mark-color: theming.get-color-from-palette($background, background);\n\n // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,\n // this does not work well with elements layered on top of one another. To get around this we\n // blend the colors together based on the base color and the theme background.\n $white-30pct-opacity-on-dark: #686868;\n $black-26pct-opacity-on-light: #b0b0b0;\n $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light);\n\n .mat-checkbox-frame {\n border-color: theming.get-color-from-palette($foreground, secondary-text);\n }\n\n .mat-checkbox-checkmark {\n fill: $checkbox-mark-color;\n }\n\n .mat-checkbox-checkmark-path {\n // !important is needed here because a stroke must be set as an\n // attribute on the SVG in order for line animation to work properly.\n stroke: $checkbox-mark-color !important;\n }\n\n .mat-checkbox-mixedmark {\n background-color: $checkbox-mark-color;\n }\n\n .mat-checkbox-indeterminate, .mat-checkbox-checked {\n &.mat-primary .mat-checkbox-background {\n background-color: theming.get-color-from-palette($primary);\n }\n\n &.mat-accent .mat-checkbox-background {\n background-color: theming.get-color-from-palette($accent);\n }\n\n &.mat-warn .mat-checkbox-background {\n background-color: theming.get-color-from-palette($warn);\n }\n }\n\n .mat-checkbox-disabled {\n &.mat-checkbox-checked,\n &.mat-checkbox-indeterminate {\n .mat-checkbox-background {\n background-color: $disabled-color;\n }\n }\n\n &:not(.mat-checkbox-checked) {\n .mat-checkbox-frame {\n border-color: $disabled-color;\n }\n }\n\n .mat-checkbox-label {\n color: theming.get-color-from-palette($foreground, secondary-text);\n }\n }\n\n // Switch this to a solid color since we're using `opacity`\n // to control how opaque the ripple should be.\n .mat-checkbox .mat-ripple-element {\n background-color: map.get(map.get($config, foreground), base);\n }\n\n .mat-checkbox-checked:not(.mat-checkbox-disabled),\n .mat-checkbox:active:not(.mat-checkbox-disabled) {\n &.mat-primary .mat-ripple-element {\n background: theming.get-color-from-palette($primary);\n }\n\n &.mat-accent .mat-ripple-element {\n background: theming.get-color-from-palette($accent);\n }\n\n &.mat-warn .mat-ripple-element {\n background: theming.get-color-from-palette($warn);\n }\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-checkbox {\n font-family: typography-utils.font-family($config);\n }\n\n // TODO(kara): Remove this style when fixing vertical baseline\n .mat-checkbox-layout .mat-checkbox-label {\n line-height: typography-utils.line-height($config, body-2);\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-checkbox') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use 'sass:meta';\n@use '../core/style/private';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n$chip-remove-font-size: 18px;\n\n@mixin _element-color($foreground, $background) {\n background-color: $background;\n color: $foreground;\n\n .mat-chip-remove {\n color: $foreground;\n opacity: 0.4;\n }\n}\n\n\n// Applies the background color for a ripple element.\n// If the color value provided is not a Sass color,\n// we assume that we've been given a CSS variable.\n// Since we can't perform alpha-blending on a CSS variable,\n// we instead add the opacity directly to the ripple element.\n@mixin _ripple-background($palette, $default-contrast, $opacity) {\n $background-color: theming.get-color-from-palette($palette, $default-contrast, $opacity);\n background-color: $background-color;\n @if (meta.type-of($background-color) != color) {\n opacity: $opacity;\n }\n}\n\n@mixin _palette-styles($palette) {\n @include _element-color(theming.get-color-from-palette($palette, default-contrast),\n theming.get-color-from-palette($palette));\n\n .mat-ripple-element {\n @include _ripple-background($palette, default-contrast, 0.1);\n }\n}\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $is-dark-theme: map.get($config, is-dark);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n $unselected-background: theming.get-color-from-palette($background, unselected-chip);\n $unselected-foreground: theming.get-color-from-palette($foreground, text);\n\n .mat-chip.mat-standard-chip {\n @include _element-color($unselected-foreground, $unselected-background);\n\n &:not(.mat-chip-disabled) {\n &:active {\n @include private.private-theme-elevation(3, $config);\n }\n\n .mat-chip-remove:hover {\n opacity: 0.54;\n }\n }\n\n &.mat-chip-disabled {\n opacity: 0.4;\n }\n\n &::after {\n background: map.get($foreground, base);\n }\n }\n\n .mat-chip.mat-standard-chip.mat-chip-selected {\n &.mat-primary {\n @include _palette-styles($primary);\n }\n\n &.mat-warn {\n @include _palette-styles($warn);\n }\n\n &.mat-accent {\n @include _palette-styles($accent);\n }\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-chip {\n font-size: typography-utils.font-size($config, body-2);\n font-weight: typography-utils.font-weight($config, body-2);\n\n .mat-chip-trailing-icon.mat-icon,\n .mat-chip-remove.mat-icon {\n font-size: $chip-remove-font-size;\n }\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-chips') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n\n\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n .mat-table {\n background: theming.get-color-from-palette($background, 'card');\n }\n\n .mat-table thead, .mat-table tbody, .mat-table tfoot,\n mat-header-row, mat-row, mat-footer-row,\n [mat-header-row], [mat-row], [mat-footer-row],\n .mat-table-sticky {\n background: inherit;\n }\n\n mat-row, mat-header-row, mat-footer-row,\n th.mat-header-cell, td.mat-cell, td.mat-footer-cell {\n border-bottom-color: theming.get-color-from-palette($foreground, divider);\n }\n\n .mat-header-cell {\n color: theming.get-color-from-palette($foreground, secondary-text);\n }\n\n .mat-cell, .mat-footer-cell {\n color: theming.get-color-from-palette($foreground, text);\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-table {\n font-family: typography-utils.font-family($config);\n }\n\n .mat-header-cell {\n font-size: typography-utils.font-size($config, caption);\n font-weight: typography-utils.font-weight($config, body-2);\n }\n\n .mat-cell, .mat-footer-cell {\n font-size: typography-utils.font-size($config, body-1);\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-table') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:color';\n@use 'sass:map';\n@use 'sass:math';\n@use 'sass:meta';\n@use '../core/style/private';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n$selected-today-box-shadow-width: 1px;\n$selected-fade-amount: 0.6;\n$range-fade-amount: 0.2;\n$today-fade-amount: 0.2;\n$calendar-body-font-size: 13px !default;\n$calendar-weekday-table-font-size: 11px !default;\n\n@mixin _color($palette) {\n @include date-range-colors(\n theming.get-color-from-palette($palette, default, $range-fade-amount));\n\n .mat-calendar-body-selected {\n background-color: theming.get-color-from-palette($palette);\n color: theming.get-color-from-palette($palette, default-contrast);\n }\n\n .mat-calendar-body-disabled > .mat-calendar-body-selected {\n $background: theming.get-color-from-palette($palette);\n\n @if (meta.type-of($background) == color) {\n background-color: color.adjust($background, $alpha: -$selected-fade-amount);\n }\n @else {\n // If we couldn't resolve to background to a color (e.g. it's a CSS variable),\n // fall back to fading the content out via `opacity`.\n opacity: $today-fade-amount;\n }\n }\n\n .mat-calendar-body-today.mat-calendar-body-selected {\n box-shadow: inset 0 0 0 $selected-today-box-shadow-width\n theming.get-color-from-palette($palette, default-contrast);\n }\n\n .cdk-keyboard-focused .mat-calendar-body-active,\n .cdk-program-focused .mat-calendar-body-active {\n @include _highlighted-cell($palette);\n }\n\n @media (hover: hover) {\n .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover {\n @include _highlighted-cell($palette);\n }\n }\n}\n\n// Utility mixin to target cells that aren't selected. Used to make selector easier to follow.\n@mixin _unselected-cell {\n &:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n @content;\n }\n}\n\n// Styles for a highlighted calendar cell (e.g. hovered or focused).\n@mixin _highlighted-cell($palette) {\n & > .mat-calendar-body-cell-content {\n @include _unselected-cell {\n background-color: theming.get-color-from-palette($palette, 0.3);\n }\n }\n}\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $foreground: map.get($config, foreground);\n $background: map.get($config, background);\n $disabled-color: theming.get-color-from-palette($foreground, disabled-text);\n\n .mat-calendar-arrow {\n fill: theming.get-color-from-palette($foreground, icon);\n }\n\n // The prev/next buttons need a bit more specificity to\n // avoid being overwritten by the .mat-icon-button.\n .mat-datepicker-toggle,\n .mat-datepicker-content .mat-calendar-next-button,\n .mat-datepicker-content .mat-calendar-previous-button {\n color: theming.get-color-from-palette($foreground, icon);\n }\n\n .mat-calendar-table-header-divider::after {\n background: theming.get-color-from-palette($foreground, divider);\n }\n\n .mat-calendar-table-header,\n .mat-calendar-body-label {\n color: theming.get-color-from-palette($foreground, secondary-text);\n }\n\n .mat-calendar-body-cell-content,\n .mat-date-range-input-separator {\n color: theming.get-color-from-palette($foreground, text);\n border-color: transparent;\n }\n\n .mat-calendar-body-disabled > .mat-calendar-body-cell-content {\n @include _unselected-cell {\n color: $disabled-color;\n }\n }\n\n .mat-form-field-disabled .mat-date-range-input-separator {\n color: $disabled-color;\n }\n\n .mat-calendar-body-in-preview {\n $divider-color: theming.get-color-from-palette($foreground, divider);\n\n @if meta.type-of($divider-color) == color {\n // The divider color is set under the assumption that it'll be used\n // for a solid border, but because we're using a dashed border for the\n // preview range, we need to bump its opacity to ensure that it's visible.\n color: rgba($divider-color, math.min(opacity($divider-color) * 2, 1));\n }\n @else {\n color: $divider-color;\n }\n }\n\n .mat-calendar-body-today {\n @include _unselected-cell {\n // Note: though it's not text, the border is a hint about the fact that this is today's date,\n // so we use the hint color.\n border-color: theming.get-color-from-palette($foreground, hint-text);\n }\n }\n\n .mat-calendar-body-disabled > .mat-calendar-body-today {\n @include _unselected-cell {\n $color: theming.get-color-from-palette($foreground, hint-text);\n\n @if (meta.type-of($color) == color) {\n border-color: color.adjust($color, $alpha: -$today-fade-amount);\n }\n @else {\n // If the color didn't resolve to a color value, but something like a CSS variable, we can't\n // fade it out so we fall back to reducing the element opacity. Note that we don't use the\n // $mat-datepicker-today-fade-amount, because hint text usually has some opacity applied\n // to it already and we don't want them to stack on top of each other.\n opacity: 0.5;\n }\n }\n }\n\n @include _color(map.get($config, primary));\n\n .mat-datepicker-content {\n @include private.private-theme-elevation(4, $config);\n background-color: theming.get-color-from-palette($background, card);\n color: theming.get-color-from-palette($foreground, text);\n\n &.mat-accent {\n @include _color(map.get($config, accent));\n }\n\n &.mat-warn {\n @include _color(map.get($config, warn));\n }\n }\n\n .mat-datepicker-content-touch {\n @include private.private-theme-elevation(24, $config);\n }\n\n .mat-datepicker-toggle-active {\n color: theming.get-color-from-palette(map.get($config, primary), text);\n\n &.mat-accent {\n color: theming.get-color-from-palette(map.get($config, accent), text);\n }\n\n &.mat-warn {\n color: theming.get-color-from-palette(map.get($config, warn), text);\n }\n }\n\n .mat-date-range-input-inner[disabled] {\n color: theming.get-color-from-palette($foreground, disabled-text);\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-calendar {\n font-family: typography-utils.font-family($config);\n }\n\n .mat-calendar-body {\n font-size: $calendar-body-font-size;\n }\n\n .mat-calendar-body-label,\n .mat-calendar-period-button {\n font: {\n size: typography-utils.font-size($config, button);\n weight: typography-utils.font-weight($config, button);\n }\n }\n\n .mat-calendar-table-header th {\n font: {\n size: $calendar-weekday-table-font-size;\n weight: typography-utils.font-weight($config, body-1);\n }\n }\n}\n\n@mixin date-range-colors(\n $range-color,\n $comparison-color: rgba(#f9ab00, $range-fade-amount),\n $overlap-color: #a8dab5,\n $overlap-selected-color: color.adjust($overlap-color, $lightness: -30%)) {\n\n .mat-calendar-body-in-range::before {\n background: $range-color;\n }\n\n .mat-calendar-body-comparison-identical,\n .mat-calendar-body-in-comparison-range::before {\n background: $comparison-color;\n }\n\n .mat-calendar-body-comparison-bridge-start::before,\n [dir='rtl'] .mat-calendar-body-comparison-bridge-end::before {\n background: linear-gradient(to right, $range-color 50%, $comparison-color 50%);\n }\n\n .mat-calendar-body-comparison-bridge-end::before,\n [dir='rtl'] .mat-calendar-body-comparison-bridge-start::before {\n background: linear-gradient(to left, $range-color 50%, $comparison-color 50%);\n }\n\n .mat-calendar-body-in-range > .mat-calendar-body-comparison-identical,\n .mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::after {\n background: $overlap-color;\n }\n\n .mat-calendar-body-comparison-identical.mat-calendar-body-selected,\n .mat-calendar-body-in-comparison-range > .mat-calendar-body-selected {\n background: $overlap-selected-color;\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-datepicker') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/style/private';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n .mat-dialog-container {\n @include private.private-theme-elevation(24, $config);\n background: theming.get-color-from-palette($background, dialog);\n color: theming.get-color-from-palette($foreground, text);\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-dialog-title {\n @include typography-utils.typography-level($config, title);\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-dialog') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/density/private/compatibility';\n@use '../core/theming/theming';\n@use '../core/style/private';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use './expansion-variables';\n@use './expansion-mixins';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n .mat-expansion-panel {\n @include private.private-theme-overridable-elevation(2, $config);\n background: theming.get-color-from-palette($background, card);\n color: theming.get-color-from-palette($foreground, text);\n }\n\n .mat-action-row {\n border-top-color: theming.get-color-from-palette($foreground, divider);\n }\n\n @include expansion-mixins.private-expansion-focus {\n background: theming.get-color-from-palette($background, hover);\n }\n\n // Disable the hover on touch devices since it can appear like it is stuck. We can't use\n // `@media (hover)` above, because the desktop support browser support isn't great.\n @media (hover: none) {\n .mat-expansion-panel:not(.mat-expanded):not([aria-disabled='true'])\n .mat-expansion-panel-header:hover {\n background: theming.get-color-from-palette($background, card);\n }\n }\n\n .mat-expansion-panel-header-title {\n color: theming.get-color-from-palette($foreground, text);\n }\n\n .mat-expansion-panel-header-description,\n .mat-expansion-indicator::after {\n color: theming.get-color-from-palette($foreground, secondary-text);\n }\n\n .mat-expansion-panel-header[aria-disabled='true'] {\n color: theming.get-color-from-palette($foreground, disabled-button);\n\n .mat-expansion-panel-header-title,\n .mat-expansion-panel-header-description {\n color: inherit;\n }\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-expansion-panel-header {\n font: {\n family: typography-utils.font-family($config, subheading-1);\n size: typography-utils.font-size($config, subheading-1);\n weight: typography-utils.font-weight($config, subheading-1);\n }\n }\n\n .mat-expansion-panel-content {\n @include typography-utils.typography-level($config, body-1);\n }\n}\n\n@mixin density($config-or-theme) {\n $density-scale: theming.get-density-config($config-or-theme);\n $expanded-height: compatibility.private-density-prop-value(\n expansion-variables.$header-density-config, $density-scale, expanded-height);\n $collapsed-height: compatibility.private-density-prop-value(\n expansion-variables.$header-density-config, $density-scale, collapsed-height);\n\n @include compatibility.private-density-legacy-compatibility() {\n .mat-expansion-panel-header {\n height: $collapsed-height;\n\n &.mat-expanded {\n height: $expanded-height;\n }\n }\n }\n}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-expansion') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n@use './form-field-fill-theme.scss';\n@use './form-field-legacy-theme.scss';\n@use './form-field-outline-theme.scss';\n@use './form-field-standard-theme.scss';\n\n// Color styles that apply to all appearances of the form-field.\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n $is-dark-theme: map.get($config, is-dark);\n\n // Label colors. Required is used for the `*` star shown in the label.\n $label-color:\n theming.get-color-from-palette($foreground, secondary-text, if($is-dark-theme, 0.7, 0.6));\n $focused-label-color: theming.get-color-from-palette($primary, text);\n $required-label-color: theming.get-color-from-palette($accent, text);\n\n // Underline colors.\n $underline-color-base:\n theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 1, 0.87));\n $underline-color-accent: theming.get-color-from-palette($accent, text);\n $underline-color-warn: theming.get-color-from-palette($warn, text);\n $underline-focused-color: theming.get-color-from-palette($primary, text);\n\n .mat-form-field-label {\n color: $label-color;\n }\n\n .mat-hint {\n color: $label-color;\n }\n\n .mat-form-field.mat-focused .mat-form-field-label {\n color: $focused-label-color;\n\n &.mat-accent {\n color: $underline-color-accent;\n }\n\n &.mat-warn {\n color: $underline-color-warn;\n }\n }\n\n .mat-focused .mat-form-field-required-marker {\n color: $required-label-color;\n }\n\n .mat-form-field-ripple {\n background-color: $underline-color-base;\n }\n\n .mat-form-field.mat-focused {\n .mat-form-field-ripple {\n background-color: $underline-focused-color;\n\n &.mat-accent {\n background-color: $underline-color-accent;\n }\n\n &.mat-warn {\n background-color: $underline-color-warn;\n }\n }\n }\n\n .mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid) {\n .mat-form-field-infix::after {\n color: $underline-focused-color;\n }\n\n &.mat-accent .mat-form-field-infix::after {\n color: $underline-color-accent;\n }\n\n &.mat-warn .mat-form-field-infix::after {\n color: $underline-color-warn;\n }\n }\n\n // Styling for the error state of the form field. Note that while the same can be\n // achieved with the ng-* classes, we use this approach in order to ensure that the same\n // logic is used to style the error state and to show the error messages.\n .mat-form-field.mat-form-field-invalid {\n .mat-form-field-label {\n color: $underline-color-warn;\n\n &.mat-accent,\n .mat-form-field-required-marker {\n color: $underline-color-warn;\n }\n }\n\n .mat-form-field-ripple,\n .mat-form-field-ripple.mat-accent {\n background-color: $underline-color-warn;\n }\n }\n\n .mat-error {\n color: $underline-color-warn;\n }\n\n @include form-field-legacy-theme.legacy-color($config);\n @include form-field-standard-theme.standard-color($config);\n @include form-field-fill-theme.fill-color($config);\n @include form-field-outline-theme.outline-color($config);\n}\n\n// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,\n// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some\n// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters\n// an unknown pseudo-class it will discard the entire rule set.\n$dedupe: 0;\n\n// Applies a floating label above the form field control itself.\n@mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) {\n transform: translateY(-$infix-margin-top - $infix-padding + $dedupe)\n scale($font-scale);\n width: math.div(100%, $font-scale) + $dedupe;\n\n $dedupe: $dedupe + 0.00001 !global;\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n // The unit-less line-height from the font config.\n $line-height: typography-utils.line-height($config, input);\n\n // The amount to scale the font for the floating label and subscript.\n $subscript-font-scale: 0.75;\n // The amount to scale the font for the prefix and suffix icons.\n $prefix-suffix-icon-font-scale: 1.5;\n\n // The padding on the infix. Mocks show half of the text size.\n $infix-padding: 0.5em;\n // The margin applied to the form-field-infix to reserve space for the floating label.\n // If the line-height is given as a unitless number, coerce it to `em`.\n $infix-margin-top: $subscript-font-scale *\n typography-utils.private-coerce-unitless-to-em($line-height);\n // Font size to use for the label and subscript text.\n $subscript-font-size: $subscript-font-scale * 100%;\n // Font size to use for the for the prefix and suffix icons.\n $prefix-suffix-icon-font-size: $prefix-suffix-icon-font-scale * 100%;\n // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.\n // Mocks show half of the text size, but this margin is applied to an element with the subscript\n // text font size, so we need to divide by the scale factor to make it half of the original text\n // size.\n $subscript-margin-top: math.div(0.5em, $subscript-font-scale);\n // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's\n // absolutely positioned. This is a combination of the subscript's margin and line-height, but we\n // need to multiply by the subscript font scale factor since the wrapper has a larger font size.\n $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;\n\n .mat-form-field {\n @include typography-utils.typography-level($config, input);\n }\n\n .mat-form-field-wrapper {\n padding-bottom: $wrapper-padding-bottom;\n }\n\n .mat-form-field-prefix,\n .mat-form-field-suffix {\n // Allow icons in a prefix or suffix to adapt to the correct size.\n .mat-icon {\n font-size: $prefix-suffix-icon-font-size;\n line-height: $line-height;\n }\n\n // Allow icon buttons in a prefix or suffix to adapt to the correct size.\n .mat-icon-button {\n height: $prefix-suffix-icon-font-scale * 1em;\n width: $prefix-suffix-icon-font-scale * 1em;\n\n .mat-icon {\n height: typography-utils.private-coerce-unitless-to-em($line-height);\n line-height: $line-height;\n }\n }\n }\n\n .mat-form-field-infix {\n padding: $infix-padding 0;\n // Throws off the baseline if we do it as a real margin, so we do it as a border instead.\n border-top: $infix-margin-top solid transparent;\n }\n\n .mat-form-field-can-float {\n &.mat-form-field-should-float .mat-form-field-label,\n .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {\n @include _label-floating(\n $subscript-font-scale, $infix-padding, $infix-margin-top);\n }\n\n // Server-side rendered matInput with a label attribute but label not shown\n // (used as a pure CSS stand-in for mat-form-field-should-float).\n .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper\n .mat-form-field-label {\n @include _label-floating(\n $subscript-font-scale, $infix-padding, $infix-margin-top);\n }\n }\n\n .mat-form-field-label-wrapper {\n top: -$infix-margin-top;\n padding-top: $infix-margin-top;\n }\n\n .mat-form-field-label {\n top: $infix-margin-top + $infix-padding;\n }\n\n .mat-form-field-underline {\n // We want the underline to start at the end of the content box, not the padding box,\n // so we move it up by the padding amount.\n bottom: $wrapper-padding-bottom;\n }\n\n .mat-form-field-subscript-wrapper {\n font-size: $subscript-font-size;\n margin-top: $subscript-margin-top;\n\n // We want the subscript to start at the end of the content box, not the padding box,\n // so we move it up by the padding amount (adjusted for the smaller font size);\n top: calc(100% - #{math.div($wrapper-padding-bottom, $subscript-font-scale)});\n }\n\n @include form-field-legacy-theme.legacy-typography($config);\n @include form-field-standard-theme.standard-typography($config);\n @include form-field-fill-theme.fill-typography($config);\n @include form-field-outline-theme.outline-typography($config);\n}\n\n@mixin density($config-or-theme) {\n $density-scale: theming.get-density-config($config-or-theme);\n @include form-field-legacy-theme.private-form-field-legacy-density($density-scale);\n @include form-field-standard-theme.private-form-field-standard-density($density-scale);\n @include form-field-fill-theme.private-form-field-fill-density($density-scale);\n @include form-field-outline-theme.private-form-field-outline-density($density-scale);\n}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use '../core/theming/theming';\n@use '../core/style/form-common';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n// Theme styles that only apply to the legacy appearance of the form-field.\n\n@mixin legacy-color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $foreground: map.get($config, foreground);\n $is-dark-theme: map.get($config, is-dark);\n\n $label-color: theming.get-color-from-palette($foreground, secondary-text);\n $underline-color:\n theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.7, 0.42));\n\n .mat-form-field-appearance-legacy {\n .mat-form-field-label {\n color: $label-color;\n }\n\n .mat-hint {\n color: $label-color;\n }\n\n .mat-form-field-underline {\n background-color: $underline-color;\n }\n\n &.mat-form-field-disabled .mat-form-field-underline {\n @include form-common.private-control-disabled-underline($underline-color);\n }\n }\n}\n\n// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,\n// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some\n// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters\n// an unknown pseudo-class it will discard the entire rule set.\n$legacy-dedupe: 0;\n\n// Applies a floating label above the form field control itself.\n@mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) {\n // We use perspective to fix the text blurriness as described here:\n // http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/\n // This results in a small jitter after the label floats on Firefox, which the\n // translateZ fixes.\n transform: translateY(-$infix-margin-top - $infix-padding) scale($font-scale) perspective(100px)\n translateZ(0.001px + $legacy-dedupe);\n width: math.div(100%, $font-scale) + $legacy-dedupe;\n\n $legacy-dedupe: $legacy-dedupe + 0.00001 !global;\n}\n\n// Same as mixin above, but omits the translateZ for printing purposes.\n@mixin _label-floating-print($font-scale, $infix-padding, $infix-margin-top) {\n // This results in a small jitter after the label floats on Firefox, which the\n // translateZ fixes.\n transform: translateY(-$infix-margin-top - $infix-padding + $legacy-dedupe)\n scale($font-scale);\n // The tricks above used to smooth out the animation on chrome and firefox actually make things\n // worse on IE, so we don't include them in the IE version.\n $legacy-dedupe: $legacy-dedupe + 0.00001 !global;\n}\n\n@mixin legacy-typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n // The unit-less line-height from the font config.\n $line-height: typography-utils.line-height($config, input);\n // The amount to scale the font for the floating label and subscript.\n $subscript-font-scale: 0.75;\n // The amount of space between the top of the line and the top of the actual text\n // (as a fraction of the font-size).\n $line-spacing: math.div($line-height - 1, 2);\n // The padding on the infix. Mocks show half of the text size, but seem to measure from the edge\n // of the text itself, not the edge of the line; therefore we subtract off the line spacing.\n $infix-padding: 0.5em - $line-spacing;\n // The margin applied to the form-field-infix to reserve space for the floating label.\n // If the line-height is given as a unitless number, coerce it to `em`.\n $infix-margin-top:\n $subscript-font-scale * typography-utils.private-coerce-unitless-to-em($line-height);\n // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.\n // Mocks show half of the text size, but this margin is applied to an element with the subscript\n // text font size, so we need to divide by the scale factor to make it half of the original text\n // size. We again need to subtract off the line spacing since the mocks measure to the edge of the\n // text, not the edge of the line.\n $subscript-margin-top: math.div(0.5em, $subscript-font-scale) - ($line-spacing * 2);\n // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's\n // absolutely positioned. This is a combination of the subscript's margin and line-height, but we\n // need to multiply by the subscript font scale factor since the wrapper has a larger font size.\n $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;\n\n .mat-form-field-appearance-legacy {\n .mat-form-field-wrapper {\n padding-bottom: $wrapper-padding-bottom;\n }\n\n .mat-form-field-infix {\n padding: $infix-padding 0;\n }\n\n &.mat-form-field-can-float {\n &.mat-form-field-should-float .mat-form-field-label,\n .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {\n @include _label-floating(\n $subscript-font-scale, $infix-padding, $infix-margin-top);\n }\n\n // @breaking-change 8.0.0 will rely on AutofillMonitor instead.\n .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper\n .mat-form-field-label {\n @include _label-floating(\n $subscript-font-scale, $infix-padding, $infix-margin-top);\n }\n\n // Server-side rendered matInput with a label attribute but label not shown\n // (used as a pure CSS stand-in for mat-form-field-should-float).\n .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper\n .mat-form-field-label {\n @include _label-floating(\n $subscript-font-scale, $infix-padding, $infix-margin-top);\n }\n }\n\n .mat-form-field-label {\n top: $infix-margin-top + $infix-padding;\n }\n\n .mat-form-field-underline {\n // We want the underline to start at the end of the content box, not the padding box,\n // so we move it up by the padding amount.\n bottom: $wrapper-padding-bottom;\n }\n\n .mat-form-field-subscript-wrapper {\n margin-top: $subscript-margin-top;\n\n // We want the subscript to start at the end of the content box, not the padding box,\n // so we move it up by the padding amount (adjusted for the smaller font size);\n top: calc(100% - #{math.div($wrapper-padding-bottom, $subscript-font-scale)});\n }\n }\n\n // translateZ causes the label to not appear while printing, so we override it to not\n // apply translateZ while printing\n @media print {\n .mat-form-field-appearance-legacy {\n &.mat-form-field-can-float {\n &.mat-form-field-should-float .mat-form-field-label,\n .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {\n @include _label-floating-print(\n $subscript-font-scale, $infix-padding, $infix-margin-top);\n }\n\n // @breaking-change 8.0.0 will rely on AutofillMonitor instead.\n .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper\n .mat-form-field-label {\n @include _label-floating-print(\n $subscript-font-scale, $infix-padding, $infix-margin-top);\n }\n\n // Server-side rendered matInput with a label attribute but label not shown\n // (used as a pure CSS stand-in for mat-form-field-should-float).\n .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper\n .mat-form-field-label {\n @include _label-floating-print(\n $subscript-font-scale, $infix-padding, $infix-margin-top);\n }\n }\n }\n }\n}\n\n@mixin private-form-field-legacy-density($config-or-theme) {}\n\n@mixin legacy-theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field-legacy') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include legacy-color($color);\n }\n @if $density != null {\n @include private-form-field-legacy-density($density);\n }\n @if $typography != null {\n @include legacy-typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n// Theme styles that only apply to the fill appearance of the form-field.\n\n@mixin fill-color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $foreground: map.get($config, foreground);\n $is-dark-theme: map.get($config, is-dark);\n\n $fill-background:\n theming.get-color-from-palette($foreground, base, if($is-dark-theme, 0.1, 0.04));\n $fill-disabled-background:\n theming.get-color-from-palette($foreground, base, if($is-dark-theme, 0.05, 0.02));\n $underline-color:\n theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.5, 0.42));\n $label-disabled-color: theming.get-color-from-palette($foreground, disabled-text);\n\n .mat-form-field-appearance-fill {\n .mat-form-field-flex {\n background-color: $fill-background;\n }\n\n &.mat-form-field-disabled .mat-form-field-flex {\n background-color: $fill-disabled-background;\n }\n\n .mat-form-field-underline::before {\n background-color: $underline-color;\n }\n\n &.mat-form-field-disabled {\n .mat-form-field-label {\n color: $label-disabled-color;\n }\n\n .mat-form-field-underline::before {\n background-color: transparent;\n }\n }\n }\n}\n\n// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,\n// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some\n// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters\n// an unknown pseudo-class it will discard the entire rule set.\n$fill-dedupe: 0;\n\n// Applies a floating label above the form field control itself.\n@mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) {\n transform: translateY(-$infix-margin-top - $infix-padding + $fill-dedupe)\n scale($font-scale);\n width: math.div(100%, $font-scale) + $fill-dedupe;\n\n $fill-dedupe: $fill-dedupe + 0.00001 !global;\n}\n\n@mixin fill-typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n // The unit-less line-height from the font config.\n $line-height: typography-utils.line-height($config, input);\n // The amount to scale the font for the floating label and subscript.\n $subscript-font-scale: 0.75;\n // The padding on top of the infix.\n $infix-padding-top: 0.25em;\n // The padding below the infix.\n $infix-padding-bottom: 0.75em;\n // The margin applied to the form-field-infix to reserve space for the floating label.\n $infix-margin-top:\n $subscript-font-scale * typography-utils.private-coerce-unitless-to-em($line-height);\n // The amount we offset the label from the input text in the fill appearance.\n $fill-appearance-label-offset: -0.5em;\n\n .mat-form-field-appearance-fill {\n .mat-form-field-infix {\n padding: $infix-padding-top 0 $infix-padding-bottom 0;\n }\n\n .mat-form-field-label {\n top: $infix-margin-top + $infix-padding-top;\n margin-top: $fill-appearance-label-offset;\n }\n\n &.mat-form-field-can-float {\n &.mat-form-field-should-float .mat-form-field-label,\n .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {\n @include _label-floating(\n $subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,\n $infix-margin-top);\n }\n\n // Server-side rendered matInput with a label attribute but label not shown\n // (used as a pure CSS stand-in for mat-form-field-should-float).\n .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper\n .mat-form-field-label {\n @include _label-floating(\n $subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,\n $infix-margin-top);\n }\n }\n }\n}\n\n@mixin private-form-field-fill-density($config-or-theme) {}\n\n@mixin fill-theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field-fill') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include fill-color($color);\n }\n @if $density != null {\n @include private-form-field-fill-density($density);\n }\n @if $typography != null {\n @include fill-typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n// Theme styles that only apply to the outline appearance of the form-field.\n\n@mixin outline-color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $foreground: map.get($config, foreground);\n $is-dark-theme: map.get($config, is-dark);\n\n $label-disabled-color: theming.get-color-from-palette($foreground, disabled-text);\n $outline-color:\n theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.3, 0.12));\n $outline-color-hover:\n theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 1, 0.87));\n $outline-color-primary: theming.get-color-from-palette($primary);\n $outline-color-accent: theming.get-color-from-palette($accent);\n $outline-color-warn: theming.get-color-from-palette($warn);\n $outline-color-disabled:\n theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.15, 0.06));\n\n .mat-form-field-appearance-outline {\n .mat-form-field-outline {\n color: $outline-color;\n }\n\n .mat-form-field-outline-thick {\n color: $outline-color-hover;\n }\n\n &.mat-focused {\n .mat-form-field-outline-thick {\n color: $outline-color-primary;\n }\n\n &.mat-accent .mat-form-field-outline-thick {\n color: $outline-color-accent;\n }\n\n &.mat-warn .mat-form-field-outline-thick {\n color: $outline-color-warn;\n }\n }\n\n // Class repeated so that rule is specific enough to override focused accent color case.\n &.mat-form-field-invalid.mat-form-field-invalid {\n .mat-form-field-outline-thick {\n color: $outline-color-warn;\n }\n }\n\n &.mat-form-field-disabled {\n .mat-form-field-label {\n color: $label-disabled-color;\n }\n\n .mat-form-field-outline {\n color: $outline-color-disabled;\n }\n }\n }\n}\n\n// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,\n// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some\n// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters\n// an unknown pseudo-class it will discard the entire rule set.\n$outline-dedupe: 0;\n\n// Applies a floating label above the form field control itself.\n@mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) {\n transform: translateY(-$infix-margin-top - $infix-padding + $outline-dedupe)\n scale($font-scale);\n width: math.div(100%, $font-scale) + $outline-dedupe;\n\n $outline-dedupe: $outline-dedupe + 0.00001 !global;\n}\n\n@mixin outline-typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n // The unit-less line-height from the font config.\n $line-height: typography-utils.line-height($config, input);\n // The amount to scale the font for the floating label and subscript.\n $subscript-font-scale: 0.75;\n // The padding above and below the infix.\n $infix-padding: 1em;\n // The margin applied to the form-field-infix to reserve space for the floating label.\n $infix-margin-top:\n $subscript-font-scale * typography-utils.private-coerce-unitless-to-em($line-height);\n // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.\n // Mocks show half of the text size, but this margin is applied to an element with the subscript\n // text font size, so we need to divide by the scale factor to make it half of the original text\n // size.\n $subscript-margin-top: math.div(0.5em, $subscript-font-scale);\n // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's\n // absolutely positioned. This is a combination of the subscript's margin and line-height, but we\n // need to multiply by the subscript font scale factor since the wrapper has a larger font size.\n $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;\n // The amount we offset the label from the input text in the outline appearance.\n $outline-appearance-label-offset: -0.25em;\n\n .mat-form-field-appearance-outline {\n .mat-form-field-infix {\n padding: $infix-padding 0 $infix-padding 0;\n }\n\n .mat-form-field-label {\n top: $infix-margin-top + $infix-padding;\n margin-top: $outline-appearance-label-offset;\n }\n\n &.mat-form-field-can-float {\n &.mat-form-field-should-float .mat-form-field-label,\n .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {\n @include _label-floating(\n $subscript-font-scale, $infix-padding + $outline-appearance-label-offset,\n $infix-margin-top);\n }\n\n // Server-side rendered matInput with a label attribute but label not shown\n // (used as a pure CSS stand-in for mat-form-field-should-float).\n .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper\n .mat-form-field-label {\n @include _label-floating(\n $subscript-font-scale, $infix-padding + $outline-appearance-label-offset,\n $infix-margin-top);\n }\n }\n }\n}\n\n@mixin private-form-field-outline-density($config-or-theme) {}\n\n@mixin outline-theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field-outline') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include outline-color($color);\n }\n @if $density != null {\n @include private-form-field-outline-density($density);\n }\n @if $typography != null {\n @include outline-typography($typography);\n }\n }\n}\n\n","@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/style/list-common';\n\n\n// Include this empty mixin for consistency with the other components.\n@mixin color($config-or-theme) {}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-grid-tile-header,\n .mat-grid-tile-footer {\n @include list-common.base(typography-utils.font-size($config, caption));\n font-size: typography-utils.font-size($config, body-1);\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-grid-list') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","// This mixin will ensure that lines that overflow the container will hide the overflow and\n// truncate neatly with an ellipsis.\n@mixin truncate-line() {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n// Mixin to provide all mat-line styles, changing secondary font size based on whether the list\n// is in dense mode.\n@mixin base($secondary-font-size) {\n .mat-line {\n @include truncate-line();\n display: block;\n box-sizing: border-box;\n\n // all lines but the top line should have smaller text\n &:nth-child(n+2) {\n font-size: $secondary-font-size;\n }\n }\n}\n\n// This mixin normalizes default element styles, e.g. font weight for heading text.\n@mixin normalize-text() {\n & > * {\n margin: 0;\n padding: 0;\n font-weight: normal;\n font-size: inherit;\n }\n}\n\n// This mixin provides base styles for the wrapper around mat-line elements in a list.\n@mixin wrapper-base() {\n @include normalize-text();\n\n display: flex;\n flex-direction: column;\n flex: auto;\n box-sizing: border-box;\n overflow: hidden;\n\n // Must remove wrapper when lines are empty or it takes up horizontal\n // space and pushes other elements to the right.\n &:empty {\n display: none;\n }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use '../core/theming/palette';\n@use '../core/theming/theming';\n@use '../core/style/form-common';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/style/vendor-prefixes';\n\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $foreground: map.get($config, foreground);\n\n .mat-form-field-type-mat-native-select .mat-form-field-infix::after {\n color: theming.get-color-from-palette($foreground, secondary-text);\n }\n\n .mat-input-element:disabled,\n .mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after {\n color: theming.get-color-from-palette($foreground, disabled-text);\n }\n\n .mat-input-element {\n caret-color: theming.get-color-from-palette($primary, text);\n\n @include vendor-prefixes.input-placeholder {\n color: form-common.private-control-placeholder-color($config);\n }\n\n // On dark themes we set the native `select` color to some shade of white,\n // however the color propagates to all of the `option` elements, which are\n // always on a white background inside the dropdown, causing them to blend in.\n // Since we can't change background of the dropdown, we need to explicitly\n // reset the color of the options to something dark.\n @if (map.get($config, is-dark)) {\n &:not(.mat-native-select-inline) {\n option {\n color: palette.$dark-primary-text;\n }\n\n option:disabled {\n color: palette.$dark-disabled-text;\n }\n }\n }\n }\n\n .mat-form-field.mat-accent .mat-input-element {\n caret-color: theming.get-color-from-palette($accent, text);\n }\n\n .mat-form-field.mat-warn .mat-input-element,\n .mat-form-field-invalid .mat-input-element {\n caret-color: theming.get-color-from-palette($warn, text);\n }\n\n .mat-form-field-type-mat-native-select.mat-form-field-invalid .mat-form-field-infix::after {\n color: theming.get-color-from-palette($warn, text);\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n // The unit-less line-height from the font config.\n $line-height: typography-utils.line-height($config, input);\n\n // The amount of space between the top of the line and the top of the actual text\n // (as a fraction of the font-size).\n $line-spacing: math.div($line-height - 1, 2);\n\n // <input> elements seem to have their height set slightly too large on Safari causing the text to\n // be misaligned w.r.t. the placeholder. Adding this margin corrects it.\n input.mat-input-element {\n margin-top: typography-utils.private-coerce-unitless-to-em(-$line-spacing);\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-input') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/style/private';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n .mat-menu-panel {\n @include private.private-theme-overridable-elevation(4, $config);\n background: theming.get-color-from-palette($background, 'card');\n }\n\n .mat-menu-item {\n background: transparent;\n color: theming.get-color-from-palette($foreground, 'text');\n\n &[disabled] {\n &,\n .mat-menu-submenu-icon,\n .mat-icon-no-color {\n color: theming.get-color-from-palette($foreground, 'disabled');\n }\n }\n }\n\n .mat-menu-item .mat-icon-no-color,\n .mat-menu-submenu-icon {\n color: theming.get-color-from-palette($foreground, 'icon');\n }\n\n .mat-menu-item:hover,\n .mat-menu-item.cdk-program-focused,\n .mat-menu-item.cdk-keyboard-focused,\n .mat-menu-item-highlighted {\n &:not([disabled]) {\n background: theming.get-color-from-palette($background, 'hover');\n }\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-menu-item {\n font: {\n family: typography-utils.font-family($config, body-1);\n size: typography-utils.font-size($config, body-1);\n weight: typography-utils.font-weight($config, body-1);\n }\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-menu') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/density/private/compatibility';\n@use './paginator-variables';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $foreground: map.get($config, foreground);\n $background: map.get($config, background);\n\n .mat-paginator {\n background: theming.get-color-from-palette($background, 'card');\n }\n\n .mat-paginator,\n .mat-paginator-page-size .mat-select-trigger {\n color: theming.get-color-from-palette($foreground, secondary-text);\n }\n\n .mat-paginator-decrement,\n .mat-paginator-increment {\n border-top: 2px solid theming.get-color-from-palette($foreground, 'icon');\n border-right: 2px solid theming.get-color-from-palette($foreground, 'icon');\n }\n\n .mat-paginator-first,\n .mat-paginator-last {\n border-top: 2px solid theming.get-color-from-palette($foreground, 'icon');\n }\n\n .mat-icon-button[disabled] {\n .mat-paginator-decrement,\n .mat-paginator-increment,\n .mat-paginator-first,\n .mat-paginator-last {\n border-color: theming.get-color-from-palette($foreground, 'disabled');\n }\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-paginator,\n .mat-paginator-page-size .mat-select-trigger {\n font: {\n family: typography-utils.font-family($config, caption);\n size: typography-utils.font-size($config, caption);\n }\n }\n}\n\n@mixin density($config-or-theme) {\n $density-scale: theming.get-density-config($config-or-theme);\n $height: compatibility.private-density-prop-value(paginator-variables.$density-config,\n $density-scale, height);\n\n @include compatibility.private-density-legacy-compatibility() {\n .mat-paginator-container {\n min-height: $height;\n }\n }\n}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-paginator') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n@mixin _color($palette) {\n &.mat-radio-checked .mat-radio-outer-circle {\n border-color: theming.get-color-from-palette($palette);\n }\n\n .mat-radio-inner-circle,\n .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),\n &.mat-radio-checked .mat-radio-persistent-ripple,\n &:active .mat-radio-persistent-ripple {\n background-color: theming.get-color-from-palette($palette);\n }\n}\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n .mat-radio-outer-circle {\n border-color: theming.get-color-from-palette($foreground, secondary-text);\n }\n\n .mat-radio-button {\n &.mat-primary {\n @include _color($primary);\n }\n\n &.mat-accent {\n @include _color($accent);\n }\n\n &.mat-warn {\n @include _color($warn);\n }\n\n // This needs extra specificity, because the classes above are combined\n // (e.g. `.mat-radio-button.mat-accent`) which increases their specificity a lot.\n // TODO: consider making the selectors into descendants (`.mat-primary .mat-radio-button`).\n &.mat-radio-disabled {\n &.mat-radio-checked .mat-radio-outer-circle,\n .mat-radio-outer-circle {\n border-color: theming.get-color-from-palette($foreground, disabled);\n }\n\n .mat-radio-ripple .mat-ripple-element,\n .mat-radio-inner-circle {\n background-color: theming.get-color-from-palette($foreground, disabled);\n }\n\n .mat-radio-label-content {\n color: theming.get-color-from-palette($foreground, disabled);\n }\n }\n\n // Switch this to a solid color since we're using `opacity`\n // to control how opaque the ripple should be.\n .mat-ripple-element {\n background-color: map.get($foreground, base);\n }\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-radio-button {\n font-family: typography-utils.font-family($config);\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-radio') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/style/private';\n@use '../core/style/form-common';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $foreground: map.get($config, foreground);\n $background: map.get($config, background);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n\n .mat-select-value {\n color: theming.get-color-from-palette($foreground, text);\n }\n\n .mat-select-placeholder {\n color: form-common.private-control-placeholder-color($config);\n }\n\n .mat-select-disabled .mat-select-value {\n color: theming.get-color-from-palette($foreground, disabled-text);\n }\n\n .mat-select-arrow {\n color: theming.get-color-from-palette($foreground, secondary-text);\n }\n\n .mat-select-panel {\n background: theming.get-color-from-palette($background, card);\n @include private.private-theme-overridable-elevation(4, $config);\n\n .mat-option.mat-selected:not(.mat-option-multiple) {\n background: theming.get-color-from-palette($background, hover, 0.12);\n }\n }\n\n .mat-form-field {\n &.mat-focused {\n &.mat-primary .mat-select-arrow {\n color: theming.get-color-from-palette($primary, text);\n }\n\n &.mat-accent .mat-select-arrow {\n color: theming.get-color-from-palette($accent, text);\n }\n\n &.mat-warn .mat-select-arrow {\n color: theming.get-color-from-palette($warn, text);\n }\n }\n\n .mat-select.mat-select-invalid .mat-select-arrow {\n color: theming.get-color-from-palette($warn, text);\n }\n\n .mat-select.mat-select-disabled .mat-select-arrow {\n color: theming.get-color-from-palette($foreground, disabled-text);\n }\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n // The unit-less line-height from the font config.\n $line-height: typography-utils.line-height($config, input);\n\n .mat-select {\n font-family: typography-utils.font-family($config);\n }\n\n .mat-select-trigger {\n height: typography-utils.private-coerce-unitless-to-em($line-height);\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-select') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/style/private';\n@use '../core/theming/palette';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n@mixin _checked-color($palette, $thumb-checked-hue) {\n &.mat-checked {\n .mat-slide-toggle-thumb {\n background-color: theming.get-color-from-palette($palette, $thumb-checked-hue);\n }\n\n .mat-slide-toggle-bar {\n // Opacity is determined from the specs for the selection controls.\n // See: https://material.io/design/components/selection-controls.html#specs\n background-color: theming.get-color-from-palette($palette, $thumb-checked-hue, 0.54);\n }\n\n .mat-ripple-element {\n // Set no opacity for the ripples because the ripple opacity will be adjusted dynamically\n // based on the type of interaction with the slide-toggle (e.g. for hover, focus)\n background-color: theming.get-color-from-palette($palette, $thumb-checked-hue);\n }\n }\n}\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $is-dark: map.get($config, is-dark);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n // Color hues are based on the specs which briefly show the hues that are applied to a switch.\n // The 2018 specs no longer describe how dark switches should look like. Due to the lack of\n // information for dark themed switches, we partially keep the old behavior that is based on\n // the previous specifications. For the checked color we always use the `default` hue because\n // that follows MDC and also makes it easier for people to create a custom theme without needing\n // to specify each hue individually.\n $thumb-unchecked-hue: if($is-dark, 400, 50);\n $thumb-checked-hue: default;\n\n $bar-unchecked-color: theming.get-color-from-palette($foreground, disabled);\n $ripple-unchecked-color: theming.get-color-from-palette($foreground, base);\n\n .mat-slide-toggle {\n @include _checked-color($accent, $thumb-checked-hue);\n\n &.mat-primary {\n @include _checked-color($primary, $thumb-checked-hue);\n }\n\n &.mat-warn {\n @include _checked-color($warn, $thumb-checked-hue);\n }\n\n &:not(.mat-checked) .mat-ripple-element {\n // Set no opacity for the ripples because the ripple opacity will be adjusted dynamically\n // based on the type of interaction with the slide-toggle (e.g. for hover, focus)\n background-color: $ripple-unchecked-color;\n }\n }\n\n .mat-slide-toggle-thumb {\n @include private.private-theme-elevation(1, $config);\n background-color: theming.get-color-from-palette(palette.$grey-palette, $thumb-unchecked-hue);\n }\n\n .mat-slide-toggle-bar {\n background-color: $bar-unchecked-color;\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-slide-toggle-content {\n font-family: typography-utils.font-family($config);\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-slide-toggle') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n\n","@use 'sass:map';\n@use 'sass:meta';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n@mixin _inner-content-theme($palette) {\n .mat-slider-track-fill,\n .mat-slider-thumb,\n .mat-slider-thumb-label {\n background-color: theming.get-color-from-palette($palette);\n }\n\n .mat-slider-thumb-label-text {\n color: theming.get-color-from-palette($palette, default-contrast);\n }\n\n .mat-slider-focus-ring {\n $opacity: 0.2;\n $color: theming.get-color-from-palette($palette, default, $opacity);\n background-color: $color;\n\n // `mat-color` uses `rgba` for the opacity which won't work with\n // CSS variables so we need to use `opacity` as a fallback.\n @if (meta.type-of($color) != color) {\n opacity: $opacity;\n }\n }\n}\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n $mat-slider-off-color: theming.get-color-from-palette($foreground, slider-off);\n $mat-slider-off-focused-color: theming.get-color-from-palette($foreground, slider-off-active);\n $mat-slider-disabled-color: theming.get-color-from-palette($foreground, slider-off);\n $mat-slider-labeled-min-value-thumb-color:\n theming.get-color-from-palette($foreground, slider-min);\n $mat-slider-labeled-min-value-thumb-label-color:\n theming.get-color-from-palette($foreground, slider-off);\n $mat-slider-tick-opacity: 0.7;\n $mat-slider-tick-color:\n theming.get-color-from-palette($foreground, base, $mat-slider-tick-opacity);\n $mat-slider-tick-size: 2px;\n\n .mat-slider-track-background {\n background-color: $mat-slider-off-color;\n }\n\n .mat-slider {\n &.mat-primary {\n @include _inner-content-theme($primary);\n }\n\n &.mat-accent {\n @include _inner-content-theme($accent);\n }\n\n &.mat-warn {\n @include _inner-content-theme($warn);\n }\n }\n\n .mat-slider:hover,\n .mat-slider.cdk-focused {\n .mat-slider-track-background {\n background-color: $mat-slider-off-focused-color;\n }\n }\n\n .mat-slider.mat-slider-disabled {\n .mat-slider-track-background,\n .mat-slider-track-fill,\n .mat-slider-thumb {\n background-color: $mat-slider-disabled-color;\n }\n\n &:hover {\n .mat-slider-track-background {\n background-color: $mat-slider-disabled-color;\n }\n }\n }\n\n .mat-slider.mat-slider-min-value {\n .mat-slider-focus-ring {\n $opacity: 0.12;\n $color: theming.get-color-from-palette($foreground, base, $opacity);\n background-color: $color;\n\n // `mat-color` uses `rgba` for the opacity which won't work with\n // CSS variables so we need to use `opacity` as a fallback.\n @if (meta.type-of($color) != color) {\n opacity: $opacity;\n }\n }\n\n &.mat-slider-thumb-label-showing {\n .mat-slider-thumb,\n .mat-slider-thumb-label {\n background-color: $mat-slider-labeled-min-value-thumb-color;\n }\n\n &.cdk-focused {\n .mat-slider-thumb,\n .mat-slider-thumb-label {\n background-color: $mat-slider-labeled-min-value-thumb-label-color;\n }\n }\n }\n\n &:not(.mat-slider-thumb-label-showing) {\n .mat-slider-thumb {\n border-color: $mat-slider-off-color;\n background-color: transparent;\n }\n\n &:hover,\n &.cdk-focused {\n .mat-slider-thumb {\n border-color: $mat-slider-off-focused-color;\n }\n\n &.mat-slider-disabled .mat-slider-thumb {\n border-color: $mat-slider-disabled-color;\n }\n }\n }\n }\n\n .mat-slider-has-ticks .mat-slider-wrapper::after {\n border-color: $mat-slider-tick-color;\n\n // `mat-color` uses `rgba` for the opacity which won't work with\n // CSS variables so we need to use `opacity` as a fallback.\n @if (meta.type-of($mat-slider-tick-color) != color) {\n opacity: $mat-slider-tick-opacity;\n }\n }\n\n .mat-slider-horizontal .mat-slider-ticks {\n background-image: repeating-linear-gradient(to right, $mat-slider-tick-color,\n $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);\n // Firefox doesn't draw the gradient correctly with 'to right'\n // (see https://bugzilla.mozilla.org/show_bug.cgi?id=1314319).\n background-image: -moz-repeating-linear-gradient(0.0001deg, $mat-slider-tick-color,\n $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);\n\n // `mat-color` uses `rgba` for the opacity which won't work with\n // CSS variables so we need to use `opacity` as a fallback.\n @if (meta.type-of($mat-slider-tick-color) != color) {\n opacity: $mat-slider-tick-opacity;\n }\n }\n\n .mat-slider-vertical .mat-slider-ticks {\n background-image: repeating-linear-gradient(to bottom, $mat-slider-tick-color,\n $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);\n\n // `mat-color` uses `rgba` for the opacity which won't work with\n // CSS variables so we need to use `opacity` as a fallback.\n @if (meta.type-of($mat-slider-tick-color) != color) {\n opacity: $mat-slider-tick-opacity;\n }\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-slider-thumb-label-text {\n font: {\n family: typography-utils.font-family($config);\n size: typography-utils.font-size($config, caption);\n weight: typography-utils.font-weight($config, body-2);\n }\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-slider') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/density/private/compatibility';\n@use './stepper-variables';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $foreground: map.get($config, foreground);\n $background: map.get($config, background);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n\n .mat-step-header {\n &.cdk-keyboard-focused,\n &.cdk-program-focused,\n &:hover:not([aria-disabled]),\n &:hover[aria-disabled='false'] {\n background-color: theming.get-color-from-palette($background, hover);\n }\n\n &:hover[aria-disabled='true'] {\n cursor: default;\n }\n\n // On touch devices the :hover state will linger on the element after a tap.\n // Reset it via `@media` after the declaration, because the media query isn't\n // supported by all browsers yet.\n @media (hover: none) {\n &:hover {\n background: none;\n }\n }\n\n .mat-step-label,\n .mat-step-optional {\n // TODO(josephperrott): Update to using a corrected disabled-text contrast\n // instead of secondary-text.\n color: theming.get-color-from-palette($foreground, secondary-text);\n }\n\n .mat-step-icon {\n // TODO(josephperrott): Update to using a corrected disabled-text contrast\n // instead of secondary-text.\n background-color: theming.get-color-from-palette($foreground, secondary-text);\n color: theming.get-color-from-palette($primary, default-contrast);\n }\n\n .mat-step-icon-selected,\n .mat-step-icon-state-done,\n .mat-step-icon-state-edit {\n background-color: theming.get-color-from-palette($primary);\n color: theming.get-color-from-palette($primary, default-contrast);\n }\n\n &.mat-accent {\n .mat-step-icon {\n color: theming.get-color-from-palette($accent, default-contrast);\n }\n\n .mat-step-icon-selected,\n .mat-step-icon-state-done,\n .mat-step-icon-state-edit {\n background-color: theming.get-color-from-palette($accent);\n color: theming.get-color-from-palette($accent, default-contrast);\n }\n }\n\n &.mat-warn {\n .mat-step-icon {\n color: theming.get-color-from-palette($warn, default-contrast);\n }\n\n .mat-step-icon-selected,\n .mat-step-icon-state-done,\n .mat-step-icon-state-edit {\n background-color: theming.get-color-from-palette($warn);\n color: theming.get-color-from-palette($warn, default-contrast);\n }\n }\n\n .mat-step-icon-state-error {\n background-color: transparent;\n color: theming.get-color-from-palette($warn, text);\n }\n\n .mat-step-label.mat-step-label-active {\n color: theming.get-color-from-palette($foreground, text);\n }\n\n .mat-step-label.mat-step-label-error {\n color: theming.get-color-from-palette($warn, text);\n }\n }\n\n .mat-stepper-horizontal, .mat-stepper-vertical {\n background-color: theming.get-color-from-palette($background, card);\n }\n\n .mat-stepper-vertical-line::before {\n border-left-color: theming.get-color-from-palette($foreground, divider);\n }\n\n .mat-horizontal-stepper-header::before,\n .mat-horizontal-stepper-header::after,\n .mat-stepper-horizontal-line {\n border-top-color: theming.get-color-from-palette($foreground, divider);\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-stepper-vertical, .mat-stepper-horizontal {\n font-family: typography-utils.font-family($config);\n }\n\n .mat-step-label {\n font: {\n size: typography-utils.font-size($config, body-1);\n weight: typography-utils.font-weight($config, body-1);\n };\n }\n\n .mat-step-sub-label-error {\n font-weight: normal;\n }\n\n .mat-step-label-error {\n font-size: typography-utils.font-size($config, body-2);\n }\n\n .mat-step-label-selected {\n font: {\n size: typography-utils.font-size($config, body-2);\n weight: typography-utils.font-weight($config, body-2);\n };\n }\n}\n\n@mixin density($config-or-theme) {\n $density-scale: theming.get-density-config($config-or-theme);\n $height: compatibility.private-density-prop-value(stepper-variables.$density-config,\n $density-scale, height);\n $vertical-padding: math.div($height - stepper-variables.$label-header-height, 2);\n\n @include compatibility.private-density-legacy-compatibility() {\n .mat-horizontal-stepper-header {\n height: $height;\n }\n\n .mat-stepper-label-position-bottom .mat-horizontal-stepper-header,\n .mat-vertical-stepper-header {\n padding: $vertical-padding stepper-variables.$side-gap;\n }\n\n // Ensures that the vertical lines for the step content exceed into the step\n // headers with a given distance (`$mat-stepper-line-gap`) to the step icon.\n .mat-stepper-vertical-line::before {\n top: stepper-variables.$line-gap - $vertical-padding;\n bottom: stepper-variables.$line-gap - $vertical-padding;\n }\n\n // Ensures that the horizontal lines for the step header are centered vertically.\n .mat-stepper-label-position-bottom .mat-horizontal-stepper-header {\n &::after, &::before {\n top: $vertical-padding + math.div(stepper-variables.$label-header-height, 2);\n }\n }\n\n // Ensures that the horizontal line for the step content is aligned centered vertically.\n .mat-stepper-label-position-bottom .mat-stepper-horizontal-line {\n top: $vertical-padding + math.div(stepper-variables.$label-header-height, 2);\n }\n }\n}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-stepper') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n $header-border: 1px solid theming.get-color-from-palette($foreground, divider);\n\n .mat-tab-nav-bar,\n .mat-tab-header {\n border-bottom: $header-border;\n }\n\n .mat-tab-group-inverted-header {\n .mat-tab-nav-bar,\n .mat-tab-header {\n border-top: $header-border;\n border-bottom: none;\n }\n }\n\n .mat-tab-label, .mat-tab-link {\n color: theming.get-color-from-palette($foreground, text);\n\n &.mat-tab-disabled {\n color: theming.get-color-from-palette($foreground, disabled-text);\n }\n }\n\n .mat-tab-header-pagination-chevron {\n border-color: theming.get-color-from-palette($foreground, text);\n }\n\n .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n border-color: theming.get-color-from-palette($foreground, disabled-text);\n }\n\n // Remove header border when there is a background color\n .mat-tab-group[class*='mat-background-'] > .mat-tab-header,\n .mat-tab-nav-bar[class*='mat-background-'] {\n border-bottom: none;\n border-top: none;\n }\n\n .mat-tab-group, .mat-tab-nav-bar {\n $theme-colors: (\n primary: $primary,\n accent: $accent,\n warn: $warn\n );\n\n @each $name, $color in $theme-colors {\n // Set the foreground color of the tabs\n &.mat-#{$name} {\n @include _label-focus-color($color);\n @include _ink-bar-color($color);\n\n // Override ink bar when background color is the same\n &.mat-background-#{$name} {\n > .mat-tab-header, > .mat-tab-link-container {\n @include _ink-bar-color($color, default-contrast);\n }\n }\n }\n }\n\n @each $name, $color in $theme-colors {\n // Set background color of the tabs and override focus color\n &.mat-background-#{$name} {\n @include _label-focus-color($color);\n @include _tabs-background($color);\n }\n }\n }\n}\n\n@mixin _ink-bar-color($color, $hue: default) {\n .mat-ink-bar {\n background-color: theming.get-color-from-palette($color, $hue);\n }\n}\n\n@mixin _label-focus-color($tab-focus-color) {\n .mat-tab-label,\n .mat-tab-link {\n &.cdk-keyboard-focused,\n &.cdk-program-focused {\n &:not(.mat-tab-disabled) {\n background-color: theming.get-color-from-palette($tab-focus-color, lighter, 0.3);\n }\n }\n }\n}\n\n@mixin _tabs-background($background-color) {\n // Note that these selectors target direct descendants so\n // that the styles don't apply to any nested tab groups.\n\n // Set background color for the tab group\n > .mat-tab-header, > .mat-tab-link-container, > .mat-tab-header-pagination {\n background-color: theming.get-color-from-palette($background-color);\n }\n\n // Set labels to contrast against background\n > .mat-tab-header .mat-tab-label, > .mat-tab-link-container .mat-tab-link {\n color: theming.get-color-from-palette($background-color, default-contrast);\n\n &.mat-tab-disabled {\n color: theming.get-color-from-palette($background-color, default-contrast, 0.4);\n }\n }\n\n // Set pagination chevrons to contrast background\n > .mat-tab-header .mat-tab-header-pagination-chevron,\n > .mat-tab-header-pagination .mat-tab-header-pagination-chevron,\n > .mat-tab-link-container .mat-focus-indicator::before,\n > .mat-tab-header .mat-focus-indicator::before {\n border-color: theming.get-color-from-palette($background-color, default-contrast);\n }\n\n > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,\n > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n // Set the color opacity via `opacity`, rather than `rgba`, because it may be a CSS variable.\n border-color: theming.get-color-from-palette($background-color, default-contrast, 1);\n opacity: 0.4;\n }\n\n // Set ripples color to be the contrast color of the new background. Otherwise the ripple\n // color will be based on the app background color.\n > .mat-tab-header .mat-ripple-element,\n > .mat-tab-link-container .mat-ripple-element,\n > .mat-tab-header-pagination .mat-ripple-element {\n // Set the color opacity via `opacity`, rather than `rgba`, because it may be a CSS variable.\n background-color: theming.get-color-from-palette($background-color, default-contrast, 1);\n opacity: 0.12;\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-tab-group {\n font-family: typography-utils.font-family($config);\n }\n\n .mat-tab-label, .mat-tab-link {\n font: {\n family: typography-utils.font-family($config, button);\n size: typography-utils.font-size($config, button);\n weight: typography-utils.font-weight($config, button);\n }\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-tabs') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/density/private/compatibility';\n@use '../core/style/variables';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use './toolbar-variables';\n\n@mixin _height($height) {\n .mat-toolbar-multiple-rows {\n min-height: $height;\n }\n .mat-toolbar-row, .mat-toolbar-single-row {\n height: $height;\n }\n}\n\n@mixin _palette-styles($palette) {\n background: theming.get-color-from-palette($palette);\n color: theming.get-color-from-palette($palette, default-contrast);\n}\n\n@mixin _form-field-overrides {\n .mat-form-field-underline,\n .mat-form-field-ripple,\n .mat-focused .mat-form-field-ripple {\n background-color: currentColor;\n }\n\n .mat-form-field-label,\n .mat-focused .mat-form-field-label,\n .mat-select-value,\n .mat-select-arrow,\n .mat-form-field.mat-focused .mat-select-arrow {\n color: inherit;\n }\n\n .mat-input-element {\n caret-color: currentColor;\n }\n}\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n .mat-toolbar {\n background: theming.get-color-from-palette($background, app-bar);\n color: theming.get-color-from-palette($foreground, text);\n\n &.mat-primary {\n @include _palette-styles($primary);\n }\n\n &.mat-accent {\n @include _palette-styles($accent);\n }\n\n &.mat-warn {\n @include _palette-styles($warn);\n }\n\n @include _form-field-overrides;\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-toolbar,\n .mat-toolbar h1,\n .mat-toolbar h2,\n .mat-toolbar h3,\n .mat-toolbar h4,\n .mat-toolbar h5,\n .mat-toolbar h6 {\n @include typography-utils.typography-level($config, title);\n margin: 0;\n }\n}\n\n@mixin density($config-or-theme) {\n $density-scale: theming.get-density-config($config-or-theme);\n $height-desktop: compatibility.private-density-prop-value(\n toolbar-variables.$desktop-density-config, $density-scale, height);\n $height-mobile: compatibility.private-density-prop-value(\n toolbar-variables.$mobile-density-config, $density-scale, height);\n\n @include compatibility.private-density-legacy-compatibility() {\n // Set the default height for the toolbar.\n @include _height($height-desktop);\n\n // As per specs, toolbars should have a different height in mobile devices. This has been\n // specified in the old guidelines and is still observable in the new specifications by\n // looking at the spec images. See: https://material.io/design/components/app-bars-top.html#anatomy\n @media (variables.$xsmall) {\n @include _height($height-mobile);\n }\n }\n}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-toolbar') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n$target-height: 22px;\n$font-size: 10px;\n$vertical-padding: math.div($target-height - $font-size, 2);\n\n$handset-target-height: 30px;\n$handset-font-size: 14px;\n$handset-vertical-padding: math.div($handset-target-height - $handset-font-size, 2);\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $background: map.get($config, background);\n\n .mat-tooltip {\n background: theming.get-color-from-palette($background, tooltip, 0.9);\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-tooltip {\n font-family: typography-utils.font-family($config);\n font-size: $font-size;\n padding-top: $vertical-padding;\n padding-bottom: $vertical-padding;\n }\n\n .mat-tooltip-handset {\n font-size: $handset-font-size;\n padding-top: $handset-vertical-padding;\n padding-bottom: $handset-vertical-padding;\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-tooltip') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/style/list-common';\n\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n .mat-list-base {\n .mat-list-item {\n color: theming.get-color-from-palette($foreground, text);\n }\n\n .mat-list-option {\n color: theming.get-color-from-palette($foreground, text);\n }\n\n .mat-subheader {\n color: theming.get-color-from-palette($foreground, secondary-text);\n }\n\n .mat-list-item-disabled {\n background-color: theming.get-color-from-palette($background, disabled-list-option);\n color: theming.get-color-from-palette($foreground, disabled-text);\n }\n }\n\n .mat-list-option,\n .mat-nav-list .mat-list-item,\n .mat-action-list .mat-list-item {\n &:hover, &:focus {\n background: theming.get-color-from-palette($background, 'hover');\n }\n }\n\n .mat-list-single-selected-option {\n &, &:hover, &:focus {\n background: theming.get-color-from-palette($background, hover, 0.12);\n }\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n $font-family: typography-utils.font-family($config);\n\n .mat-list-item {\n font-family: $font-family;\n }\n\n .mat-list-option {\n font-family: $font-family;\n }\n\n // Default list\n .mat-list-base {\n .mat-list-item {\n font-size: typography-utils.font-size($config, subheading-2);\n @include list-common.base(typography-utils.font-size($config, body-1));\n }\n\n .mat-list-option {\n font-size: typography-utils.font-size($config, subheading-2);\n @include list-common.base(typography-utils.font-size($config, body-1));\n }\n\n .mat-subheader {\n font-family: typography-utils.font-family($config, body-2);\n font-size: typography-utils.font-size($config, body-2);\n font-weight: typography-utils.font-weight($config, body-2);\n }\n }\n\n // Dense list\n .mat-list-base[dense] {\n .mat-list-item {\n font-size: typography-utils.font-size($config, caption);\n @include list-common.base(typography-utils.font-size($config, caption));\n }\n\n .mat-list-option {\n font-size: typography-utils.font-size($config, caption);\n @include list-common.base(typography-utils.font-size($config, caption));\n }\n\n .mat-subheader {\n font-family: $font-family;\n font-size: typography-utils.font-size($config, caption);\n font-weight: typography-utils.font-weight($config, body-2);\n }\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-list') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../theming/theming';\n@use '../typography/typography';\n@use '../typography/typography-utils';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $foreground: map.get($config, foreground);\n $background: map.get($config, background);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n\n .mat-option {\n color: theming.get-color-from-palette($foreground, text);\n\n &:hover:not(.mat-option-disabled),\n &:focus:not(.mat-option-disabled) {\n background: theming.get-color-from-palette($background, hover);\n }\n\n // In multiple mode there is a checkbox to show that the option is selected.\n &.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {\n background: theming.get-color-from-palette($background, hover);\n }\n\n &.mat-active {\n background: theming.get-color-from-palette($background, hover);\n color: theming.get-color-from-palette($foreground, text);\n }\n\n &.mat-option-disabled {\n color: theming.get-color-from-palette($foreground, hint-text);\n }\n }\n\n .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {\n color: theming.get-color-from-palette($primary, text);\n }\n\n .mat-accent .mat-option.mat-selected:not(.mat-option-disabled) {\n color: theming.get-color-from-palette($accent, text);\n }\n\n .mat-warn .mat-option.mat-selected:not(.mat-option-disabled) {\n color: theming.get-color-from-palette($warn, text);\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-option {\n font: {\n family: typography-utils.font-family($config);\n size: typography-utils.font-size($config, subheading-2);\n }\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-option') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../theming/theming';\n@use '../typography/typography';\n@use '../typography/typography-utils';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $foreground: map.get($config, foreground);\n\n .mat-optgroup-label {\n color: theming.get-color-from-palette($foreground, secondary-text);\n }\n\n .mat-optgroup-disabled .mat-optgroup-label {\n color: theming.get-color-from-palette($foreground, hint-text);\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-optgroup-label {\n @include typography-utils.typography-level($config, body-2);\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-optgroup') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/theming/theming';\n@use '../core/theming/palette';\n@use '../core/style/private';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $is-dark-theme: map.get($config, is-dark);\n $accent: map.get($config, accent);\n\n .mat-snack-bar-container {\n // Use the primary text on the dark theme, even though the lighter one uses\n // a secondary, because the contrast on the light primary text is poor.\n color: if($is-dark-theme, palette.$dark-primary-text, palette.$light-secondary-text);\n background: if($is-dark-theme, map.get(palette.$grey-palette, 50), #323232);\n\n @include private.private-theme-elevation(6, $config);\n }\n\n .mat-simple-snackbar-action {\n color: if($is-dark-theme, inherit, theming.get-color-from-palette($accent, text));\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-simple-snackbar {\n font: {\n family: typography-utils.font-family($config, body-1);\n size: typography-utils.font-size($config, body-1);\n }\n }\n\n .mat-simple-snackbar-action {\n line-height: 1;\n font: {\n family: inherit;\n size: inherit;\n weight: typography-utils.font-weight($config, button);\n }\n }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-snack-bar') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/density/private/compatibility';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use './tree-variables';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n .mat-tree {\n background: theming.get-color-from-palette($background, 'card');\n }\n\n .mat-tree-node,\n .mat-nested-tree-node {\n color: theming.get-color-from-palette($foreground, text);\n }\n}\n\n@mixin typography($config-or-theme) {\n $config: typography.private-typography-to-2014-config(\n theming.get-typography-config($config-or-theme));\n .mat-tree {\n font-family: typography-utils.font-family($config);\n }\n\n .mat-tree-node,\n .mat-nested-tree-node {\n font-weight: typography-utils.font-weight($config, body-1);\n font-size: typography-utils.font-size($config, body-1);\n }\n}\n\n@mixin density($config-or-theme) {\n $density-scale: theming.get-density-config($config-or-theme);\n $height: compatibility.private-density-prop-value(tree-variables.$density-config,\n $density-scale, height);\n\n @include compatibility.private-density-legacy-compatibility() {\n .mat-tree-node {\n min-height: $height;\n }\n }\n}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-tree') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n\n","@use '../../../cdk/a11y';\n\n@mixin ripple() {\n // The host element of an mat-ripple directive should always have a position of \"absolute\" or\n // \"relative\" so that the ripples inside are correctly positioned relatively to the container.\n .mat-ripple {\n overflow: hidden;\n\n // By default, every ripple container should have position: relative in favor of creating an\n // easy API for developers using the MatRipple directive.\n position: relative;\n\n // Promote containers that have ripples to a new layer. We want to target `:not(:empty)`,\n // because we don't want all ripple containers to have their own layer since they're used in a\n // lot of places and the layer is only relevant while animating. Note that ideally we'd use\n // the `contain` property here (see #13175), because `:empty` can be broken by having extra\n // text inside the element, but it isn't very well supported yet.\n &:not(:empty) {\n transform: translateZ(0);\n }\n }\n\n .mat-ripple.mat-ripple-unbounded {\n overflow: visible;\n }\n\n .mat-ripple-element {\n position: absolute;\n border-radius: 50%;\n pointer-events: none;\n\n transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);\n transform: scale(0);\n\n // In high contrast mode the ripple is opaque, causing it to obstruct the content.\n @include a11y.high-contrast(active, off) {\n display: none;\n }\n }\n}\n","/// Emits a CSS class, `.cdk-visually-hidden`. This class can be applied to an element\n/// to make that element visually hidden while remaining available to assistive technology.\n@mixin a11y-visually-hidden() {\n .cdk-visually-hidden {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n\n // This works around a Chrome bug that can cause the tab to crash when large amounts of\n // non-English text get wrapped: https://bugs.chromium.org/p/chromium/issues/detail?id=1201444\n white-space: nowrap;\n\n // Avoid browsers rendering the focus ring in some cases.\n outline: 0;\n\n // Avoid some cases where the browser will still render the native controls (see #9049).\n -webkit-appearance: none;\n -moz-appearance: none;\n }\n}\n\n/// @deprecated Use `a11y-visually-hidden`.\n@mixin a11y() {\n @include a11y-visually-hidden;\n}\n\n/// Emits the mixin's content nested under `$selector-context` if `$selector-context`\n/// is non-empty.\n/// @param {String} selector-context The selector under which to nest the mixin's content.\n@mixin _optionally-nest-content($selector-context) {\n @if ($selector-context == '') {\n @content;\n }\n @else {\n #{$selector-context} {\n @content;\n }\n }\n}\n\n/// Applies styles for users in high contrast mode. Note that this only applies\n/// to Microsoft browsers. Chrome can be included by checking for the `html[hc]`\n/// attribute, however Chrome handles high contrast differently.\n///\n/// @param {String} target Type of high contrast setting to target. Defaults to `active`, can be\n/// `white-on-black` or `black-on-white`.\n/// @param {String} encapsulation Whether to emit styles for view encapsulation. Values are:\n/// * `on` - works for `Emulated`, `Native`, and `ShadowDom`\n/// * `off` - works for `None`\n/// * `any` - works for all encapsulation modes by emitting the CSS twice (default).\n@mixin high-contrast($target: active, $encapsulation: 'any') {\n @if ($target != 'active' and $target != 'black-on-white' and $target != 'white-on-black') {\n @error 'Unknown cdk-high-contrast value \"#{$target}\" provided. ' +\n 'Allowed values are \"active\", \"black-on-white\", and \"white-on-black\"';\n }\n\n @if ($encapsulation != 'on' and $encapsulation != 'off' and $encapsulation != 'any') {\n @error 'Unknown cdk-high-contrast encapsulation \"#{$encapsulation}\" provided. ' +\n 'Allowed values are \"on\", \"off\", and \"any\"';\n }\n\n // If the selector context has multiple parts, such as `.section, .region`, just doing\n // `.cdk-high-contrast-xxx #{&}` will only apply the parent selector to the first part of the\n // context. We address this by nesting the selector context under .cdk-high-contrast.\n @at-root {\n $selector-context: #{&};\n\n @if ($encapsulation != 'on') {\n // Note that if this selector is updated, the same change has to be made inside\n // `_overlay.scss` which can't depend on this mixin due to some infrastructure limitations.\n .cdk-high-contrast-#{$target} {\n @include _optionally-nest-content($selector-context) {\n @content;\n }\n }\n }\n\n @if ($encapsulation != 'off') {\n .cdk-high-contrast-#{$target} :host {\n @include _optionally-nest-content($selector-context) {\n @content;\n }\n }\n }\n }\n}\n","// We want overlays to always appear over user content, so set a baseline\n// very high z-index for the overlay container, which is where we create the new\n// stacking context for all overlays.\n$overlay-container-z-index: 1000 !default;\n$overlay-z-index: 1000 !default;\n$overlay-backdrop-z-index: 1000 !default;\n\n// Background color for all of the backdrops\n$overlay-backdrop-color: rgba(0, 0, 0, 0.32) !default;\n\n// Default backdrop animation is based on the Material Design swift-ease-out.\n$backdrop-animation-duration: 400ms !default;\n$backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;\n\n/// Emits structural styles required for cdk/overlay to function.\n@mixin overlay() {\n .cdk-overlay-container, .cdk-global-overlay-wrapper {\n // Disable events from being captured on the overlay container.\n pointer-events: none;\n\n // The container should be the size of the viewport.\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n }\n\n // The overlay-container is an invisible element which contains all individual overlays.\n .cdk-overlay-container {\n position: fixed;\n z-index: $overlay-container-z-index;\n\n &:empty {\n // Hide the element when it doesn't have any child nodes. This doesn't\n // include overlays that have been detached, rather than disposed.\n display: none;\n }\n }\n\n // We use an extra wrapper element in order to use make the overlay itself a flex item.\n // This makes centering the overlay easy without running into the subpixel rendering\n // problems tied to using `transform` and without interfering with the other position\n // strategies.\n .cdk-global-overlay-wrapper {\n display: flex;\n position: absolute;\n z-index: $overlay-z-index;\n }\n\n // A single overlay pane.\n .cdk-overlay-pane {\n // Note: it's important for this one to start off `absolute`,\n // in order for us to be able to measure it correctly.\n position: absolute;\n pointer-events: auto;\n box-sizing: border-box;\n z-index: $overlay-z-index;\n\n // For connected-position overlays, we set `display: flex` in\n // order to force `max-width` and `max-height` to take effect.\n display: flex;\n max-width: 100%;\n max-height: 100%;\n }\n\n .cdk-overlay-backdrop {\n // TODO(jelbourn): reuse sidenav fullscreen mixin.\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n\n z-index: $overlay-backdrop-z-index;\n pointer-events: auto;\n -webkit-tap-highlight-color: transparent;\n transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function;\n opacity: 0;\n\n &.cdk-overlay-backdrop-showing {\n opacity: 1;\n\n // Note that we can't import and use the `high-contrast` mixin from `_a11y.scss`, because\n // this file will be copied to the top-level `cdk` package when putting together the files\n // for npm. Any relative import paths we use here will become invalid once the file is copied.\n .cdk-high-contrast-active & {\n // In high contrast mode the rgba background will become solid\n // so we need to fall back to making it opaque using `opacity`.\n opacity: 0.6;\n }\n }\n }\n\n .cdk-overlay-dark-backdrop {\n background: $overlay-backdrop-color;\n }\n\n .cdk-overlay-transparent-backdrop {\n // Note: as of Firefox 57, having the backdrop be `background: none` will prevent it from\n // capturing the user's mouse scroll events. Since we also can't use something like\n // `rgba(0, 0, 0, 0)`, we work around the inconsistency by not setting the background at\n // all and using `opacity` to make the element transparent.\n &, &.cdk-overlay-backdrop-showing {\n opacity: 0;\n }\n }\n\n // Overlay parent element used with the connected position strategy. Used to constrain the\n // overlay element's size to fit within the viewport.\n .cdk-overlay-connected-position-bounding-box {\n position: absolute;\n z-index: $overlay-z-index;\n\n // We use `display: flex` on this element exclusively for centering connected overlays.\n // When *not* centering, a top/left/bottom/right will be set which overrides the normal\n // flex layout.\n display: flex;\n\n // We use the `column` direction here to avoid some flexbox issues in Edge\n // when using the \"grow after open\" options.\n flex-direction: column;\n\n // Add some dimensions so the element has an `innerText` which some people depend on in tests.\n min-width: 1px;\n min-height: 1px;\n }\n\n // Used when disabling global scrolling.\n .cdk-global-scrollblock {\n position: fixed;\n\n // Necessary for the content not to lose its width. Note that we're using 100%, instead of\n // 100vw, because 100vw includes the width plus the scrollbar, whereas 100% is the width\n // that the element had before we made it `fixed`.\n width: 100%;\n\n // Note: this will always add a scrollbar to whatever element it is on, which can\n // potentially result in double scrollbars. It shouldn't be an issue, because we won't\n // block scrolling on a page that doesn't have a scrollbar in the first place.\n overflow-y: scroll;\n }\n}\n","// Structural styles for the autosize text fields.\n@mixin text-field-autosize() {\n // Remove the resize handle on autosizing textareas, because whatever height\n // the user resized to will be overwritten once they start typing again.\n textarea.cdk-textarea-autosize {\n resize: none;\n }\n\n // This class is temporarily applied to the textarea when it is being measured. It is immediately\n // removed when measuring is complete. We use `!important` rules here to make sure user-specified\n // rules do not interfere with the measurement.\n textarea.cdk-textarea-autosize-measuring {\n @include _autosize-measuring-base;\n height: auto !important;\n overflow: hidden !important;\n }\n\n // Similar to the `cdk-textarea-autosize-measuring` class, but only applied on Firefox. We need\n // to use this class, because Firefox has a bug where changing the `overflow` breaks the user's\n // ability to undo/redo what they were typing (see #16629). This class is only scoped to Firefox,\n // because the measurements there don't seem to be affected by the `height: 0`, whereas on other\n // browsers they are, e.g. Chrome detects longer text and IE does't resize back to normal.\n // Identical issue report: https://bugzilla.mozilla.org/show_bug.cgi?id=448784\n textarea.cdk-textarea-autosize-measuring-firefox {\n @include _autosize-measuring-base;\n height: 0 !important;\n }\n}\n\n// Core styles that enable monitoring autofill state of text fields.\n@mixin text-field-autofill() {\n // Keyframes that apply no styles, but allow us to monitor when an text field becomes autofilled\n // by watching for the animation events that are fired when they start. Note: the /*!*/ comment is\n // needed to prevent LibSass from stripping the keyframes out.\n // Based on: https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7\n @keyframes cdk-text-field-autofill-start {/*!*/}\n @keyframes cdk-text-field-autofill-end {/*!*/}\n\n .cdk-text-field-autofill-monitored:-webkit-autofill {\n // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire.\n animation: cdk-text-field-autofill-start 0s 1ms;\n }\n\n .cdk-text-field-autofill-monitored:not(:-webkit-autofill) {\n // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire.\n animation: cdk-text-field-autofill-end 0s 1ms;\n }\n}\n\n@mixin _autosize-measuring-base {\n // Having 2px top and bottom padding seems to fix a bug where Chrome gets an incorrect\n // measurement. We just have to account for it later and subtract it off the final result.\n padding: 2px 0 !important;\n box-sizing: content-box !important;\n}\n\n// Used to generate UIDs for keyframes used to change the text field autofill styles.\n$autofill-color-frame-count: 0;\n\n// Mixin used to apply custom background and foreground colors to an autofilled text field.\n// Based on: https://stackoverflow.com/questions/2781549/\n// removing-input-background-colour-for-chrome-autocomplete#answer-37432260\n@mixin text-field-autofill-color($background, $foreground:'') {\n @keyframes cdk-text-field-autofill-color-#{$autofill-color-frame-count} {\n to {\n background: $background;\n @if $foreground != '' { color: $foreground; }\n }\n }\n\n &:-webkit-autofill {\n animation: cdk-text-field-autofill-color-#{$autofill-color-frame-count} both;\n }\n\n &.cdk-text-field-autofill-monitored:-webkit-autofill {\n // Since Chrome 80 we need a 1ms delay for cdk-text-field-autofill-start, or the animationstart\n // event won't fire.\n animation: cdk-text-field-autofill-start 0s 1ms,\n cdk-text-field-autofill-color-#{$autofill-color-frame-count} both;\n }\n\n $autofill-color-frame-count: $autofill-color-frame-count + 1 !global;\n}\n\n// @deprecated Use `autosize` and `autofill` instead.\n@mixin text-field {\n @include text-field-autosize();\n @include text-field-autofill();\n}\n","@use 'sass:map';\n@use '../style/layout-common';\n\n/// Mixin that turns on strong focus indicators.\n///\n/// @example\n/// .my-app {\n/// @include mat-strong-focus-indicators($config);\n/// }\n@mixin strong-focus-indicators($config: ()) {\n // Default focus indicator config.\n $default-config: (\n border-style: solid,\n border-width: 3px,\n border-radius: 4px,\n );\n\n // Merge default config with user config.\n $config: map.merge($default-config, $config);\n $border-style: map.get($config, border-style);\n $border-width: map.get($config, border-width);\n $border-radius: map.get($config, border-radius);\n\n // Base styles for focus indicators.\n .mat-focus-indicator::before {\n @include layout-common.fill();\n box-sizing: border-box;\n pointer-events: none;\n border: $border-width $border-style transparent;\n border-radius: $border-radius;\n\n .cdk-high-contrast-active & {\n display: none;\n }\n }\n\n // By default, all focus indicators are flush with the bounding box of their\n // host element. For particular elements (listed below), default inset/offset\n // values are necessary to ensure that the focus indicator is sufficiently\n // contrastive and renders appropriately.\n\n .mat-focus-indicator.mat-flat-button::before,\n .mat-focus-indicator.mat-raised-button::before,\n .mat-focus-indicator.mat-fab::before,\n .mat-focus-indicator.mat-mini-fab::before,\n .mat-focus-indicator.mat-chip::before,\n .mat-focus-indicator.mat-sort-header-container::before {\n margin: -($border-width + 2px);\n }\n\n .mat-focus-indicator.mat-stroked-button::before,\n .mat-focus-indicator.mat-calendar-body-cell-content::before {\n margin: -($border-width + 3px);\n }\n\n .mat-focus-indicator.mat-tab-link::before,\n .mat-focus-indicator.mat-tab-label::before {\n margin: 5px;\n }\n\n // Render the focus indicator on focus. Defining a pseudo element's\n // content will cause it to render.\n\n // Checkboxes, radios, and slide toggles render focus indicators when the\n // associated visually-hidden input is focused.\n .mat-checkbox-input:focus ~ .mat-focus-indicator::before,\n .mat-radio-input:focus ~ .mat-focus-indicator::before,\n .mat-slide-toggle-input:focus ~ .mat-slide-toggle-thumb-container .mat-focus-indicator::before,\n\n // For options, render the focus indicator when the class .mat-active\n // is present.\n .mat-focus-indicator.mat-option.mat-active::before,\n\n // For calendar cells, render the focus indicator when the parent cell is\n // focused.\n .mat-calendar-body-cell:focus .mat-focus-indicator::before,\n\n // Stepper headers have the focus indicator as a descendant,\n // because `::before` is used for other styling.\n .mat-step-header:focus .mat-focus-indicator::before,\n\n // For all other components, render the focus indicator on focus.\n .mat-focus-indicator:focus::before {\n content: '';\n }\n}\n\n// Mixin that ensures focus indicator host elements are positioned so that the focus indicator\n// pseudo element within is positioned relative to the host. Private mixin included within\n// `mat-core`.\n@mixin private-strong-focus-indicators-positioning() {\n .mat-focus-indicator {\n position: relative;\n }\n}\n","@use '../../cdk/overlay';\n@use '../../cdk/a11y';\n@use '../../cdk/text-field';\n\n// Core styles that can be used to apply material design treatments to any element.\n@use './ripple/ripple';\n@use './focus-indicators/focus-indicators';\n@use './typography/all-typography';\n\n// Mixin that renders all of the core styles that are not theme-dependent.\n@mixin core($typography-config: null) {\n @include all-typography.all-component-typographies($typography-config);\n @include ripple.ripple();\n @include a11y.a11y-visually-hidden();\n @include overlay.overlay();\n @include text-field.text-field-autosize();\n @include text-field.text-field-autofill();\n\n @include focus-indicators.private-strong-focus-indicators-positioning();\n @include _mdc-core();\n}\n\n// Mixin that renders all of the core MDC styles. Private mixin included with `mat-core`.\n@mixin _mdc-core() {\n @include _mdc-strong-focus-indicators-positioning();\n}\n\n// Mixin that ensures focus indicator host elements are positioned so that the focus indicator\n// pseudo element within is positioned relative to the host. Private mixin included within\n// `_mat-mdc-core`.\n@mixin _mdc-strong-focus-indicators-positioning() {\n .mat-mdc-focus-indicator {\n position: relative;\n }\n}\n","@use 'sass:map';\n@use 'sass:meta';\n@use '../theming/theming';\n\n// Colors for the ripple elements.\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $foreground: map.get($config, foreground);\n $foreground-base: map.get($foreground, base);\n $color-opacity: 0.1;\n\n .mat-ripple-element {\n // If the ripple color is resolves to a color *type*, we can use it directly, otherwise\n // (e.g. it resolves to a CSS variable) we fall back to using the color and setting an opacity.\n @if (meta.type-of($foreground-base) == color) {\n background-color: rgba($foreground-base, $color-opacity);\n }\n @else {\n background-color: $foreground-base;\n opacity: $color-opacity;\n }\n }\n}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-ripple') {\n $color: theming.get-color-config($theme);\n @if $color != null {\n @include color($color);\n }\n }\n}\n","@use 'sass:map';\n@use '../../theming/theming';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $is-dark-theme: map.get($config, is-dark);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $background: map.get($config, background);\n\n // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,\n // this does not work well with elements layered on top of one another. To get around this we\n // blend the colors together based on the base color and the theme background.\n $white-30pct-opacity-on-dark: #686868;\n $black-26pct-opacity-on-light: #b0b0b0;\n $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light);\n $colored-box-selector: '.mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-indeterminate';\n\n .mat-pseudo-checkbox {\n color: theming.get-color-from-palette(map.get($config, foreground), secondary-text);\n\n &::after {\n color: theming.get-color-from-palette($background, background);\n }\n }\n\n .mat-pseudo-checkbox-disabled {\n color: $disabled-color;\n }\n\n .mat-primary .mat-pseudo-checkbox-checked,\n .mat-primary .mat-pseudo-checkbox-indeterminate {\n background: theming.get-color-from-palette(map.get($config, primary));\n }\n\n // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the\n // theme from their parent, rather than implementing their own theming, which is why we\n // don't attach to the `mat-*` classes. Also note that this needs to be below `.mat-primary`\n // in order to allow for the color to be overwritten if the checkbox is inside a parent that\n // has `mat-accent` and is placed inside another parent that has `mat-primary`.\n .mat-pseudo-checkbox-checked,\n .mat-pseudo-checkbox-indeterminate,\n .mat-accent .mat-pseudo-checkbox-checked,\n .mat-accent .mat-pseudo-checkbox-indeterminate {\n background: theming.get-color-from-palette(map.get($config, accent));\n }\n\n .mat-warn .mat-pseudo-checkbox-checked,\n .mat-warn .mat-pseudo-checkbox-indeterminate {\n background: theming.get-color-from-palette(map.get($config, warn));\n }\n\n .mat-pseudo-checkbox-checked,\n .mat-pseudo-checkbox-indeterminate {\n &.mat-pseudo-checkbox-disabled {\n background: $disabled-color;\n }\n }\n}\n\n@mixin typography($config-or-theme) {}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-pseudo-checkbox') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use 'theming/theming';\n@use './style/private';\n@use './ripple/ripple-theme';\n@use './option/option-theme';\n@use './option/optgroup-theme';\n@use './selection/pseudo-checkbox/pseudo-checkbox-theme';\n@use './style/elevation';\n\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n // Wrapper element that provides the theme background when the user's content isn't\n // inside of a `mat-sidenav-container`. Note that we need to exclude the ampersand\n // selector in case the mixin is included at the top level.\n .mat-app-background#{if(&, ', &.mat-app-background', '')} {\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n background-color: theming.get-color-from-palette($background, background);\n color: theming.get-color-from-palette($foreground, text);\n }\n\n // Provides external CSS classes for each elevation value. Each CSS class is formatted as\n // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is\n // elevated.\n @for $zValue from 0 through 24 {\n .#{elevation.$prefix}#{$zValue} {\n @include private.private-theme-elevation($zValue, $config);\n }\n }\n\n // Marker that is used to determine whether the user has added a theme to their page.\n @at-root {\n .mat-theme-loaded-marker {\n display: none;\n }\n }\n}\n\n// Mixin that renders all of the core styles that depend on the theme.\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n // Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that\n // there won't be multiple warnings. e.g. if `mat-core-theme` reports a warning, then\n // the imported themes (such as `mat-ripple-theme`) should not report again.\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-core') {\n @include ripple-theme.theme($theme);\n @include option-theme.theme($theme);\n @include optgroup-theme.theme($theme);\n @include pseudo-checkbox-theme.theme($theme);\n\n $color: theming.get-color-config($theme);\n @if $color != null {\n @include color($color);\n }\n }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use 'sass:meta';\n@use 'variables';\n\n\n// A collection of mixins and CSS classes that can be used to apply elevation to a material\n// element.\n// See: https://material.io/design/environment/elevation.html\n// Examples:\n//\n//\n// .mat-foo {\n// @include $mat-elevation(2);\n//\n// &:active {\n// @include $mat-elevation(8);\n// }\n// }\n//\n// <div id=\"external-card\" class=\"mat-elevation-z2\"><p>Some content</p></div>\n//\n// For an explanation of the design behind how elevation is implemented, see the design doc at\n// https://goo.gl/Kq0k9Z.\n\n// Colors for umbra, penumbra, and ambient shadows. As described in the design doc, each elevation\n// level is created using a set of 3 shadow values, one for umbra (the shadow representing the\n// space completely obscured by an object relative to its light source), one for penumbra (the\n// space partially obscured by an object), and one for ambient (the space which contains the object\n// itself). For a further explanation of these terms and their meanings, see\n// https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra.\n\n// Maps for the different shadow sets and their values within each z-space. These values were\n// created by taking a few reference shadow sets created by Google's Designers and interpolating\n// all of the values between them.\n\n@function _get-umbra-map($color, $opacity) {\n $shadow-color: if(meta.type-of($color) == color, rgba($color, $opacity * 0.2), $color);\n\n @return (\n 0: '0px 0px 0px 0px #{$shadow-color}',\n 1: '0px 2px 1px -1px #{$shadow-color}',\n 2: '0px 3px 1px -2px #{$shadow-color}',\n 3: '0px 3px 3px -2px #{$shadow-color}',\n 4: '0px 2px 4px -1px #{$shadow-color}',\n 5: '0px 3px 5px -1px #{$shadow-color}',\n 6: '0px 3px 5px -1px #{$shadow-color}',\n 7: '0px 4px 5px -2px #{$shadow-color}',\n 8: '0px 5px 5px -3px #{$shadow-color}',\n 9: '0px 5px 6px -3px #{$shadow-color}',\n 10: '0px 6px 6px -3px #{$shadow-color}',\n 11: '0px 6px 7px -4px #{$shadow-color}',\n 12: '0px 7px 8px -4px #{$shadow-color}',\n 13: '0px 7px 8px -4px #{$shadow-color}',\n 14: '0px 7px 9px -4px #{$shadow-color}',\n 15: '0px 8px 9px -5px #{$shadow-color}',\n 16: '0px 8px 10px -5px #{$shadow-color}',\n 17: '0px 8px 11px -5px #{$shadow-color}',\n 18: '0px 9px 11px -5px #{$shadow-color}',\n 19: '0px 9px 12px -6px #{$shadow-color}',\n 20: '0px 10px 13px -6px #{$shadow-color}',\n 21: '0px 10px 13px -6px #{$shadow-color}',\n 22: '0px 10px 14px -6px #{$shadow-color}',\n 23: '0px 11px 14px -7px #{$shadow-color}',\n 24: '0px 11px 15px -7px #{$shadow-color}'\n );\n}\n\n@function _get-penumbra-map($color, $opacity) {\n $shadow-color: if(meta.type-of($color) == color, rgba($color, $opacity * 0.14), $color);\n\n @return (\n 0: '0px 0px 0px 0px #{$shadow-color}',\n 1: '0px 1px 1px 0px #{$shadow-color}',\n 2: '0px 2px 2px 0px #{$shadow-color}',\n 3: '0px 3px 4px 0px #{$shadow-color}',\n 4: '0px 4px 5px 0px #{$shadow-color}',\n 5: '0px 5px 8px 0px #{$shadow-color}',\n 6: '0px 6px 10px 0px #{$shadow-color}',\n 7: '0px 7px 10px 1px #{$shadow-color}',\n 8: '0px 8px 10px 1px #{$shadow-color}',\n 9: '0px 9px 12px 1px #{$shadow-color}',\n 10: '0px 10px 14px 1px #{$shadow-color}',\n 11: '0px 11px 15px 1px #{$shadow-color}',\n 12: '0px 12px 17px 2px #{$shadow-color}',\n 13: '0px 13px 19px 2px #{$shadow-color}',\n 14: '0px 14px 21px 2px #{$shadow-color}',\n 15: '0px 15px 22px 2px #{$shadow-color}',\n 16: '0px 16px 24px 2px #{$shadow-color}',\n 17: '0px 17px 26px 2px #{$shadow-color}',\n 18: '0px 18px 28px 2px #{$shadow-color}',\n 19: '0px 19px 29px 2px #{$shadow-color}',\n 20: '0px 20px 31px 3px #{$shadow-color}',\n 21: '0px 21px 33px 3px #{$shadow-color}',\n 22: '0px 22px 35px 3px #{$shadow-color}',\n 23: '0px 23px 36px 3px #{$shadow-color}',\n 24: '0px 24px 38px 3px #{$shadow-color}'\n );\n}\n\n@function _get-ambient-map($color, $opacity) {\n $shadow-color: if(meta.type-of($color) == color, rgba($color, $opacity * 0.12), $color);\n\n @return (\n 0: '0px 0px 0px 0px #{$shadow-color}',\n 1: '0px 1px 3px 0px #{$shadow-color}',\n 2: '0px 1px 5px 0px #{$shadow-color}',\n 3: '0px 1px 8px 0px #{$shadow-color}',\n 4: '0px 1px 10px 0px #{$shadow-color}',\n 5: '0px 1px 14px 0px #{$shadow-color}',\n 6: '0px 1px 18px 0px #{$shadow-color}',\n 7: '0px 2px 16px 1px #{$shadow-color}',\n 8: '0px 3px 14px 2px #{$shadow-color}',\n 9: '0px 3px 16px 2px #{$shadow-color}',\n 10: '0px 4px 18px 3px #{$shadow-color}',\n 11: '0px 4px 20px 3px #{$shadow-color}',\n 12: '0px 5px 22px 4px #{$shadow-color}',\n 13: '0px 5px 24px 4px #{$shadow-color}',\n 14: '0px 5px 26px 4px #{$shadow-color}',\n 15: '0px 6px 28px 5px #{$shadow-color}',\n 16: '0px 6px 30px 5px #{$shadow-color}',\n 17: '0px 6px 32px 5px #{$shadow-color}',\n 18: '0px 7px 34px 6px #{$shadow-color}',\n 19: '0px 7px 36px 6px #{$shadow-color}',\n 20: '0px 8px 38px 7px #{$shadow-color}',\n 21: '0px 8px 40px 7px #{$shadow-color}',\n 22: '0px 8px 42px 7px #{$shadow-color}',\n 23: '0px 9px 44px 8px #{$shadow-color}',\n 24: '0px 9px 46px 8px #{$shadow-color}'\n );\n}\n\n// The default duration value for elevation transitions.\n$transition-duration: 280ms !default;\n\n// The default easing value for elevation transitions.\n$transition-timing-function: variables.$fast-out-slow-in-timing-function;\n\n// The default color for elevation shadows.\n$color: black !default;\n\n// The default opacity scaling value for elevation shadows.\n$opacity: 1 !default;\n\n// Prefix for elevation-related selectors.\n$prefix: 'mat-elevation-z';\n\n// Applies the correct css rules to an element to give it the elevation specified by $zValue.\n// The $zValue must be between 0 and 24.\n@mixin elevation($zValue, $color: $color, $opacity: $opacity) {\n @if meta.type-of($zValue) != number or not math.is-unitless($zValue) {\n @error '$zValue must be a unitless number';\n }\n @if $zValue < 0 or $zValue > 24 {\n @error '$zValue must be between 0 and 24';\n }\n\n box-shadow: #{map.get(_get-umbra-map($color, $opacity), $zValue)},\n #{map.get(_get-penumbra-map($color, $opacity), $zValue)},\n #{map.get(_get-ambient-map($color, $opacity), $zValue)};\n}\n\n// Applies the elevation to an element in a manner that allows\n// consumers to override it via the Material elevation classes.\n@mixin overridable-elevation(\n $zValue,\n $color: $color,\n $opacity: $opacity) {\n &:not([class*='#{$prefix}']) {\n @include elevation($zValue, $color, $opacity);\n }\n}\n\n// Returns a string that can be used as the value for a transition property for elevation.\n// Calling this function directly is useful in situations where a component needs to transition\n// more than one property.\n//\n// .foo {\n// transition: mat-elevation-transition-property-value(), opacity 100ms ease;\n// }\n@function private-transition-property-value(\n $duration: $transition-duration,\n $easing: $transition-timing-function) {\n @return box-shadow #{$duration} #{$easing};\n}\n\n// Applies the correct css rules needed to have an element transition between elevations.\n// This mixin should be applied to elements whose elevation values will change depending on their\n// context (e.g. when active or disabled).\n//\n// NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can\n// be used in the same way by clients.\n@mixin elevation-transition(\n $duration: $transition-duration,\n $easing: $transition-timing-function) {\n transition: private-transition-property-value($duration, $easing);\n}\n","@use 'sass:map';\n@use '../core/style/private';\n@use '../core/theming/theming';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $foreground: map.get($config, foreground);\n $background: map.get($config, background);\n\n .mat-autocomplete-panel {\n @include private.private-theme-overridable-elevation(4, $config);\n background: theming.get-color-from-palette($background, card);\n color: theming.get-color-from-palette($foreground, text);\n\n // Selected options in autocompletes should not be gray, but we\n // only want to override the background for selected options if\n // they are *not* in hover or focus state. This change has to be\n // made here because base option styles are shared between the\n // autocomplete and the select.\n .mat-option.mat-selected:not(.mat-active):not(:hover) {\n background: theming.get-color-from-palette($background, card);\n\n &:not(.mat-option-disabled) {\n color: theming.get-color-from-palette($foreground, text);\n }\n }\n }\n}\n\n@mixin typography($config-or-theme) {}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-autocomplete') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $foreground: map.get($config, foreground);\n\n .mat-divider {\n border-top-color: theming.get-color-from-palette($foreground, divider);\n }\n\n .mat-divider-vertical {\n border-right-color: theming.get-color-from-palette($foreground, divider);\n }\n}\n\n@mixin typography($config-or-theme) {}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-divider') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@mixin private-expansion-focus {\n .mat-expansion-panel {\n & .mat-expansion-panel-header.cdk-keyboard-focused,\n & .mat-expansion-panel-header.cdk-program-focused,\n &:not(.mat-expanded) .mat-expansion-panel-header:hover {\n &:not([aria-disabled='true']) {\n @content;\n }\n }\n }\n}\n","@use 'sass:map';\n@use '../theming/theming';\n\n// Renders a gradient for showing the dashed line when the input is disabled.\n// Unlike using a border, a gradient allows us to adjust the spacing of the dotted line\n// to match the Material Design spec.\n@mixin private-control-disabled-underline($color) {\n background-image: linear-gradient(to right, $color 0%, $color 33%, transparent 0%);\n background-size: 4px 100%;\n background-repeat: repeat-x;\n}\n\n// Figures out the color of the placeholder for a form control.\n// Used primarily to prevent the various form controls from\n// becoming out of sync since these colors aren't in a palette.\n@function private-control-placeholder-color($config) {\n $foreground: map.get($config, foreground);\n $is-dark-theme: map.get($config, is-dark);\n @return theming.get-color-from-palette($foreground, secondary-text,\n if($is-dark-theme, 0.5, 0.42));\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/style/form-common';\n\n\n// Theme styles that only apply to the standard appearance of the form-field.\n\n@mixin standard-color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $foreground: map.get($config, foreground);\n $is-dark-theme: map.get($config, is-dark);\n $underline-color:\n theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.7, 0.42));\n\n .mat-form-field-appearance-standard {\n .mat-form-field-underline {\n background-color: $underline-color;\n }\n\n &.mat-form-field-disabled .mat-form-field-underline {\n @include form-common.private-control-disabled-underline($underline-color);\n }\n }\n}\n\n@mixin standard-typography($config-or-theme) {}\n\n@mixin private-form-field-standard-density($config-or-theme) {}\n\n@mixin standard-theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field-standard') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include standard-color($color);\n }\n @if $density != null {\n @include private-form-field-standard-density($density);\n }\n @if $typography != null {\n @include standard-typography($typography);\n }\n }\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n .mat-icon {\n &.mat-primary {\n color: theming.get-color-from-palette($primary, text);\n }\n\n &.mat-accent {\n color: theming.get-color-from-palette($accent, text);\n }\n\n &.mat-warn {\n color: theming.get-color-from-palette($warn, text);\n }\n }\n}\n\n@mixin typography($config-or-theme) {}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-icon') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n\n","// stylelint-disable material/no-prefixes\n@mixin user-select($value) {\n -webkit-user-select: $value;\n -moz-user-select: $value;\n user-select: $value;\n}\n\n@mixin input-placeholder {\n &::placeholder {\n @content;\n }\n\n &::-moz-placeholder {\n @content;\n }\n\n &::-webkit-input-placeholder {\n @content;\n }\n\n // Note: this isn't necessary anymore since we don't support\n // IE, but it caused some presubmit failures in #23416.\n &:-ms-input-placeholder {\n @content;\n }\n}\n\n@mixin cursor-grab {\n cursor: -webkit-grab;\n cursor: grab;\n}\n\n@mixin cursor-grabbing {\n cursor: -webkit-grabbing;\n cursor: grabbing;\n}\n\n@mixin backface-visibility($value) {\n -webkit-backface-visibility: $value;\n backface-visibility: $value;\n}\n\n@mixin position-sticky($important: false) {\n position: -webkit-sticky #{if($important, '!important', '')};\n position: sticky #{if($important, '!important', '')};\n}\n\n@mixin private-color-adjust($value) {\n -webkit-print-color-adjust: $value;\n color-adjust: $value;\n}\n\n@mixin private-background-clip($value) {\n -webkit-background-clip: $value;\n background-clip: $value;\n}\n// stylelint-enable\n","@use 'sass:map';\n@use 'sass:meta';\n@use 'sass:color';\n@use '../core/theming/theming';\n\n// Approximates the correct buffer color by using a mix between the theme color\n// and the theme's background color.\n@function _get-buffer-color($theme, $background) {\n $theme-color: theming.get-color-from-palette($theme);\n // Return fallback color if the theme uses variables to define colors.\n @if (meta.type-of($theme-color) != 'color' or meta.type-of($background) != 'color') {\n @return theming.get-color-from-palette($theme, lighter);\n }\n @return color.mix($theme-color, $background, $weight: 25%);\n}\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $background: map.get(map.get($config, background), background);\n\n .mat-progress-bar-background {\n fill: _get-buffer-color($primary, $background);\n }\n\n .mat-progress-bar-buffer {\n background-color: _get-buffer-color($primary, $background);\n }\n\n .mat-progress-bar-fill::after {\n background-color: theming.get-color-from-palette($primary);\n }\n\n .mat-progress-bar.mat-accent {\n .mat-progress-bar-background {\n fill: _get-buffer-color($accent, $background);\n }\n\n .mat-progress-bar-buffer {\n background-color: _get-buffer-color($accent, $background);\n }\n\n .mat-progress-bar-fill::after {\n background-color: theming.get-color-from-palette($accent);\n }\n }\n\n .mat-progress-bar.mat-warn {\n .mat-progress-bar-background {\n fill: _get-buffer-color($warn, $background);\n }\n\n .mat-progress-bar-buffer {\n background-color: _get-buffer-color($warn, $background);\n }\n\n .mat-progress-bar-fill::after {\n background-color: theming.get-color-from-palette($warn);\n }\n }\n}\n\n@mixin typography($config-or-theme) {}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-progress-bar') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n\n","@use 'sass:map';\n@use '../core/theming/theming';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n\n .mat-progress-spinner, .mat-spinner {\n circle {\n stroke: theming.get-color-from-palette($primary);\n }\n\n &.mat-accent circle {\n stroke: theming.get-color-from-palette($accent);\n }\n\n &.mat-warn circle {\n stroke: theming.get-color-from-palette($warn);\n }\n }\n}\n\n@mixin typography($config-or-theme) {}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-progress-spinner') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:color';\n@use 'sass:map';\n@use 'sass:meta';\n@use '../core/style/private';\n@use '../core/theming/theming';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $primary: map.get($config, primary);\n $accent: map.get($config, accent);\n $warn: map.get($config, warn);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n $drawer-background-color: theming.get-color-from-palette($background, dialog);\n $drawer-container-background-color: theming.get-color-from-palette($background, background);\n $drawer-push-background-color: theming.get-color-from-palette($background, dialog);\n $drawer-side-border: solid 1px theming.get-color-from-palette($foreground, divider);\n\n .mat-drawer-container {\n background-color: $drawer-container-background-color;\n color: theming.get-color-from-palette($foreground, text);\n }\n\n .mat-drawer {\n background-color: $drawer-background-color;\n color: theming.get-color-from-palette($foreground, text);\n\n &.mat-drawer-push {\n background-color: $drawer-push-background-color;\n }\n\n &:not(.mat-drawer-side) {\n // The elevation of z-16 is noted in the design specifications.\n // See https://material.io/design/components/navigation-drawer.html\n @include private.private-theme-elevation(16, $config);\n }\n }\n\n .mat-drawer-side {\n border-right: $drawer-side-border;\n\n &.mat-drawer-end {\n border-left: $drawer-side-border;\n border-right: none;\n }\n }\n\n [dir='rtl'] .mat-drawer-side {\n border-left: $drawer-side-border;\n border-right: none;\n\n &.mat-drawer-end {\n border-left: none;\n border-right: $drawer-side-border;\n }\n }\n\n .mat-drawer-backdrop.mat-drawer-shown {\n $opacity: 0.6;\n $backdrop-color: theming.get-color-from-palette($background, card, $opacity);\n\n @if (meta.type-of($backdrop-color) == color) {\n // We use invert() here to have the darken the background color expected to be used. If the\n // background is light, we use a dark backdrop. If the background is dark,\n // we use a light backdrop.\n background-color: color.invert($backdrop-color);\n }\n @else {\n // If we couldn't resolve the backdrop color to a color value, fall back to using\n // `opacity` to make it opaque since its end value could be a solid color.\n background-color: $backdrop-color;\n opacity: $opacity;\n }\n }\n}\n\n@mixin typography($config-or-theme) {}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-sidenav') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@use 'sass:color';\n@use 'sass:map';\n@use 'sass:meta';\n@use '../core/theming/theming';\n\n@mixin color($config-or-theme) {\n $config: theming.get-color-config($config-or-theme);\n $background: map.get($config, background);\n $foreground: map.get($config, foreground);\n\n .mat-sort-header-arrow {\n $table-background: theming.get-color-from-palette($background, 'card');\n $text-color: theming.get-color-from-palette($foreground, secondary-text);\n\n // Because the arrow is made up of multiple elements that are stacked on top of each other,\n // we can't use the semi-transparent color from the theme directly. If the value is a color\n // *type*, we convert it into a solid color by taking the opacity from the rgba value and\n // using the value to determine the percentage of the background to put into foreground\n // when mixing the colors together. Otherwise, if it resolves to something different\n // (e.g. it resolves to a CSS variable), we use the color directly.\n @if (meta.type-of($table-background) == color and meta.type-of($text-color) == color) {\n $text-opacity: opacity($text-color);\n color: color.mix($table-background, rgba($text-color, 1), (1 - $text-opacity) * 100%);\n }\n @else {\n color: $text-color;\n }\n }\n}\n\n@mixin typography($config-or-theme) {}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n $theme: theming.private-legacy-get-theme($theme-or-color-config);\n @include theming.private-check-duplicate-theme-styles($theme, 'mat-sort') {\n $color: theming.get-color-config($theme);\n $density: theming.get-density-config($theme);\n $typography: theming.get-typography-config($theme);\n\n @if $color != null {\n @include color($color);\n }\n @if $density != null {\n @include _density($density);\n }\n @if $typography != null {\n @include typography($typography);\n }\n }\n}\n","@import '../dialogs/dialog-theme';\n@import '../json-formatter/json-formatter-theme';\n@import '../message/message-theme';\n\n@function td-typography-config(\n $font-family: '\"Roboto\", \"Helvetica Neue\", sans-serif',\n $headline: td-typography-level(24px, 32px, 400),\n $title: td-typography-level(20px, 32px, 500),\n $subheading-2: td-typography-level(16px, 28px, 400),\n $subheading-1: td-typography-level(15px, 24px, 400),\n $body-2: td-typography-level(14px, 24px, 500),\n $body-1: td-typography-level(14px, 20px, 400),\n $caption: td-typography-level(12px, 20px, 400)\n) {\n @return (\n font-family: $font-family,\n headline: $headline,\n title: $title,\n subheading-2: $subheading-2,\n subheading-1: $subheading-1,\n body-2: $body-2,\n body-1: $body-1,\n caption: $caption\n );\n}\n\n@mixin td-typography($config: null) {\n @if $config == null {\n $config: td-typography-config();\n }\n\n body {\n font-family: td-font-family($config);\n }\n @include td-dialog-typography($config);\n @include td-json-formatter-typography($config);\n @include td-message-typography($config);\n @include td-layout-typography($config);\n}\n","@import '../common/styles/theme-functions';\n@import '../common/styles/typography-functions';\n\n@mixin td-dialog-typography($config) {\n .td-dialog-title {\n font: {\n family: td-font-family($config);\n size: td-font-size($config, title);\n weight: td-font-weight($config, title);\n }\n }\n\n .td-dialog-message {\n font: {\n family: td-font-family($config);\n size: td-font-size($config, subheading-2);\n weight: td-font-weight($config, subheading-2);\n }\n\n line-height: td-line-height($config, subheading-2);\n }\n}\n@mixin td-dialog-theme($theme) {\n $primary: map-get($theme, primary);\n $accent: map-get($theme, accent);\n $warn: map-get($theme, warn);\n $foreground: map-get($theme, foreground);\n $background: map-get($theme, background);\n\n .mat-toolbar.td-window-dialog-toolbar {\n color: mat-color($foreground, text);\n border-bottom: 1px solid mat-color($foreground, divider);\n background: none;\n }\n\n .td-dialog-message {\n color: mat-color($foreground, secondary-text);\n }\n}\n","@import '../common/styles/theme-functions';\n@import '../common/styles/typography-functions';\n\n@mixin td-json-formatter-typography($config) {\n .td-key {\n font: {\n family: td-font-family($config);\n size: td-font-size($config, body-1);\n }\n }\n}\n\n@mixin td-json-formatter-theme($theme) {\n $primary: map-get($theme, primary);\n $accent: map-get($theme, accent);\n $warn: map-get($theme, warn);\n $foreground: map-get($theme, foreground);\n $background: map-get($theme, background);\n\n .td-json-formatter-wrapper {\n .function::after,\n .date::after,\n .td-object-name::after,\n .td-array-length::after {\n content: '\\200E';\n }\n\n .td-key {\n &.td-key-node {\n &:focus,\n &:hover {\n background-color: mat-color($background, hover);\n }\n\n .td-node-icon {\n color: mat-color($foreground, secondary-text);\n }\n }\n }\n\n .key {\n color: mat-color($primary);\n }\n\n .value {\n .string {\n color: mat-color($warn);\n }\n\n .number {\n color: mat-color($accent);\n }\n\n .boolean {\n color: mat-color($accent);\n }\n\n .null,\n .undefined {\n color: mat-color($foreground, disabled-text);\n }\n\n .function {\n color: mat-color($primary);\n }\n\n .date {\n color: mat-color($foreground, text);\n }\n }\n }\n}\n","@import '../common/styles/theme-functions';\n@import '../common/styles/typography-functions';\n\n@mixin td-message-typography($config) {\n .td-message-label {\n font: {\n family: td-font-family($config);\n size: td-font-size($config, body-2);\n weight: 600;\n }\n\n line-height: td-line-height($config, body-2);\n }\n\n .td-message-sublabel {\n font: {\n family: td-font-family($config);\n size: td-font-size($config, body-1);\n }\n }\n}\n\n@mixin td-message-theme($theme) {\n $primary: map-get($theme, primary);\n $accent: map-get($theme, accent);\n $warn: map-get($theme, warn);\n\n .td-message {\n &.mat-primary {\n color: mat-color($primary);\n background-color: mat-color($primary, 0.15);\n }\n\n &.mat-accent {\n color: mat-color($accent);\n background-color: mat-color($accent, 0.15);\n }\n\n &.mat-warn {\n color: mat-color($warn);\n background-color: mat-color($warn, 0.15);\n }\n }\n}\n","@import '../common/styles/elevation';\n@import '../common/styles/theme-functions';\n@import '../common/styles/typography-functions';\n\n@mixin td-layout-typography($config) {\n td-navigation-drawer {\n .td-navigation-drawer-title {\n font: {\n family: td-font-family($config);\n size: td-font-size($config, subheading-2);\n }\n }\n\n .td-navigation-drawer-name {\n font: {\n family: td-font-family($config);\n size: td-font-size($config, body-1);\n weight: 500;\n }\n\n line-height: td-line-height($config, body-1);\n }\n\n .td-navigation-drawer-menu-toggle {\n font: {\n family: td-font-family($config);\n size: td-font-size($config, body-2);\n weight: 400;\n }\n\n line-height: td-line-height($config, body-2);\n }\n }\n}\n\n@mixin td-layout-theme($theme) {\n $primary: map-get($theme, primary);\n $accent: map-get($theme, accent);\n $warn: map-get($theme, warn);\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-drawer-container {\n background-color: mat-color($background, status-bar);\n }\n\n [mat-icon-button].td-layout-menu-button {\n margin-left: 0;\n\n ::ng-deep [dir='rtl'] & {\n margin-right: 0;\n margin-left: 6px;\n }\n }\n\n td-layout-nav,\n td-layout-nav-list,\n td-layout-manage-list,\n td-layout-card-over,\n td-navigation-drawer,\n td-layout {\n mat-toolbar {\n @include mat-elevation(1);\n\n z-index: 1;\n }\n }\n\n body[dense] td-layout-nav,\n body[dense] td-layout-nav-list,\n body[dense] td-layout-card-over,\n td-layout-nav[dense],\n td-layout-nav-list[dense],\n td-layout-card-over[dense] {\n mat-toolbar.td-layout-toolbar {\n &.mat-toolbar-row,\n &.mat-toolbar-single-row {\n height: 48px;\n }\n }\n }\n\n body[dense] td-layout-card-over,\n td-layout-card-over[dense] {\n .td-layout-card-over-wrapper {\n margin: -48px;\n margin-left: 0;\n margin-right: 0;\n }\n }\n\n .mat-drawer-side.td-layout-sidenav {\n @include mat-elevation(2);\n }\n\n .td-layout-footer {\n background: mat-color($background, app-bar);\n color: mat-color($foreground, text);\n @include mat-elevation(2);\n\n &.mat-primary {\n background: mat-color($primary);\n\n &,\n mat-icon {\n color: mat-color($primary, default-contrast);\n }\n }\n\n &.mat-accent {\n background: mat-color($accent);\n\n &,\n mat-icon {\n color: mat-color($accent, default-contrast);\n }\n }\n\n &.mat-warn {\n background: mat-color($warn);\n\n &,\n mat-icon {\n color: mat-color($warn, default-contrast);\n }\n }\n }\n}\n","@mixin td-breadcrumbs-theme($theme) {\n $foreground: map-get($theme, foreground);\n\n td-breadcrumb {\n &:last-of-type {\n font-weight: bold;\n cursor: default;\n }\n }\n}\n","@import './styles/theme-functions';\n\n@mixin td-common-theme($theme) {\n $warn: map-get($theme, warn);\n $foreground: map-get($theme, foreground);\n $background: map-get($theme, background);\n\n mat-list-item,\n .mat-list-item-content {\n mat-icon {\n color: mat-color($foreground, icon);\n\n &[matListAvatar] {\n background-color: mat-color($background, hover);\n }\n }\n }\n\n .mat-list-text {\n p {\n color: mat-color($foreground, disabled);\n }\n }\n\n table.mat-table {\n background: transparent;\n }\n\n .mat-row {\n &:hover,\n &:focus {\n background-color: map-get($background, hover);\n }\n }\n}\n","@import 'variables';\n\n// A collection of mixins and CSS classes that can be used to apply elevation to a material\n// element.\n// See: https://www.google.com/design/spec/what-is-material/elevation-shadows.html\n// Examples:\n//\n//\n// .mat-foo {\n// @include $mat-elevation(2);\n//\n// &:active {\n// @include $mat-elevation(8);\n// }\n// }\n//\n// <div id=\"external-card\" class=\"mat-elevation-z2\"><p>Some content</p></div>\n//\n// For an explanation of the design behind how elevation is implemented, see the design doc at\n// https://goo.gl/Kq0k9Z.\n\n// Colors for umbra, penumbra, and ambient shadows. As described in the design doc, each elevation\n// level is created using a set of 3 shadow values, one for umbra (the shadow representing the\n// space completely obscured by an object relative to its light source), one for penumbra (the\n// space partially obscured by an object), and one for ambient (the space which contains the object\n// itself). For a further explanation of these terms and their meanings, see\n// https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra.\n\n$_umbra-color: rgba(black, 0.2);\n$_penumbra-color: rgba(black, 0.14);\n$_ambient-color: rgba(black, 0.12);\n\n// Maps for the different shadow sets and their values within each z-space. These values were\n// created by taking a few reference shadow sets created by Google's Designers and interpolating\n// all of the values between them.\n\n$_umbra-elevation-map: (\n 0: '0px 0px 0px 0px #{$_umbra-color}',\n 1: '0px 2px 1px -1px #{$_umbra-color}',\n 2: '0px 3px 1px -2px #{$_umbra-color}',\n 3: '0px 3px 3px -2px #{$_umbra-color}',\n 4: '0px 2px 4px -1px #{$_umbra-color}',\n 5: '0px 3px 5px -1px #{$_umbra-color}',\n 6: '0px 3px 5px -1px #{$_umbra-color}',\n 7: '0px 4px 5px -2px #{$_umbra-color}',\n 8: '0px 5px 5px -3px #{$_umbra-color}',\n 9: '0px 5px 6px -3px #{$_umbra-color}',\n 10: '0px 6px 6px -3px #{$_umbra-color}',\n 11: '0px 6px 7px -4px #{$_umbra-color}',\n 12: '0px 7px 8px -4px #{$_umbra-color}',\n 13: '0px 7px 8px -4px #{$_umbra-color}',\n 14: '0px 7px 9px -4px #{$_umbra-color}',\n 15: '0px 8px 9px -5px #{$_umbra-color}',\n 16: '0px 8px 10px -5px #{$_umbra-color}',\n 17: '0px 8px 11px -5px #{$_umbra-color}',\n 18: '0px 9px 11px -5px #{$_umbra-color}',\n 19: '0px 9px 12px -6px #{$_umbra-color}',\n 20: '0px 10px 13px -6px #{$_umbra-color}',\n 21: '0px 10px 13px -6px #{$_umbra-color}',\n 22: '0px 10px 14px -6px #{$_umbra-color}',\n 23: '0px 11px 14px -7px #{$_umbra-color}',\n 24: '0px 11px 15px -7px #{$_umbra-color}',\n);\n\n$_penumbra-elevation-map: (\n 0: '0px 0px 0px 0px #{$_penumbra-color}',\n 1: '0px 1px 1px 0px #{$_penumbra-color}',\n 2: '0px 2px 2px 0px #{$_penumbra-color}',\n 3: '0px 3px 4px 0px #{$_penumbra-color}',\n 4: '0px 4px 5px 0px #{$_penumbra-color}',\n 5: '0px 5px 8px 0px #{$_penumbra-color}',\n 6: '0px 6px 10px 0px #{$_penumbra-color}',\n 7: '0px 7px 10px 1px #{$_penumbra-color}',\n 8: '0px 8px 10px 1px #{$_penumbra-color}',\n 9: '0px 9px 12px 1px #{$_penumbra-color}',\n 10: '0px 10px 14px 1px #{$_penumbra-color}',\n 11: '0px 11px 15px 1px #{$_penumbra-color}',\n 12: '0px 12px 17px 2px #{$_penumbra-color}',\n 13: '0px 13px 19px 2px #{$_penumbra-color}',\n 14: '0px 14px 21px 2px #{$_penumbra-color}',\n 15: '0px 15px 22px 2px #{$_penumbra-color}',\n 16: '0px 16px 24px 2px #{$_penumbra-color}',\n 17: '0px 17px 26px 2px #{$_penumbra-color}',\n 18: '0px 18px 28px 2px #{$_penumbra-color}',\n 19: '0px 19px 29px 2px #{$_penumbra-color}',\n 20: '0px 20px 31px 3px #{$_penumbra-color}',\n 21: '0px 21px 33px 3px #{$_penumbra-color}',\n 22: '0px 22px 35px 3px #{$_penumbra-color}',\n 23: '0px 23px 36px 3px #{$_penumbra-color}',\n 24: '0px 24px 38px 3px #{$_penumbra-color}',\n);\n\n$_ambient-elevation-map: (\n 0: '0px 0px 0px 0px #{$_ambient-color}',\n 1: '0px 1px 3px 0px #{$_ambient-color}',\n 2: '0px 1px 5px 0px #{$_ambient-color}',\n 3: '0px 1px 8px 0px #{$_ambient-color}',\n 4: '0px 1px 10px 0px #{$_ambient-color}',\n 5: '0px 1px 14px 0px #{$_ambient-color}',\n 6: '0px 1px 18px 0px #{$_ambient-color}',\n 7: '0px 2px 16px 1px #{$_ambient-color}',\n 8: '0px 3px 14px 2px #{$_ambient-color}',\n 9: '0px 3px 16px 2px #{$_ambient-color}',\n 10: '0px 4px 18px 3px #{$_ambient-color}',\n 11: '0px 4px 20px 3px #{$_ambient-color}',\n 12: '0px 5px 22px 4px #{$_ambient-color}',\n 13: '0px 5px 24px 4px #{$_ambient-color}',\n 14: '0px 5px 26px 4px #{$_ambient-color}',\n 15: '0px 6px 28px 5px #{$_ambient-color}',\n 16: '0px 6px 30px 5px #{$_ambient-color}',\n 17: '0px 6px 32px 5px #{$_ambient-color}',\n 18: '0px 7px 34px 6px #{$_ambient-color}',\n 19: '0px 7px 36px 6px #{$_ambient-color}',\n 20: '0px 8px 38px 7px #{$_ambient-color}',\n 21: '0px 8px 40px 7px #{$_ambient-color}',\n 22: '0px 8px 42px 7px #{$_ambient-color}',\n 23: '0px 9px 44px 8px #{$_ambient-color}',\n 24: '0px 9px 46px 8px #{$_ambient-color}',\n);\n\n// The css property used for elevation. In most cases this should not be changed. It is exposed\n// as a variable for abstraction / easy use when needing to reference the property directly, for\n// example in a will-change rule.\n$mat-elevation-property: box-shadow !default;\n\n// The default duration value for elevation transitions.\n$mat-elevation-transition-duration: 280ms !default;\n\n// The default easing value for elevation transitions.\n$mat-elevation-transition-timing-function: $mat-fast-out-slow-in-timing-function;\n\n// The default color for elevation shadows.\n$mat-elevation-color: black !default;\n\n// The default opacity scaling value for elevation shadows.\n$mat-elevation-opacity: 1 !default;\n\n// Applies the correct css rules to an element to give it the elevation specified by $zValue.\n// The $zValue must be between 0 and 24.\n@mixin mat-elevation($zValue, $color: $mat-elevation-color, $opacity: $mat-elevation-opacity) {\n @if type-of($zValue) != number or not unitless($zValue) {\n @error '$zValue must be a unitless number';\n }\n @if $zValue < 0 or $zValue > 24 {\n @error '$zValue must be between 0 and 24';\n }\n\n box-shadow: #{map-get(_get-umbra-map($color, $opacity), $zValue)},\n #{map-get(_get-penumbra-map($color, $opacity), $zValue)}, #{map-get(_get-ambient-map($color, $opacity), $zValue)};\n}\n\n// Returns a string that can be used as the value for a transition property for elevation.\n// Calling this function directly is useful in situations where a component needs to transition\n// more than one property.\n//\n// .foo {\n// transition: mat-elevation-transition-property-value(), opacity 100ms ease;\n// will-change: $mat-elevation-property, opacity;\n// }\n@function mat-elevation-transition-property-value(\n $duration: $mat-elevation-transition-duration,\n $easing: $mat-elevation-transition-timing-function\n) {\n @return #{$mat-elevation-property} #{$duration} #{$easing};\n}\n\n// Applies the correct css rules needed to have an element transition between elevations.\n// This mixin should be applied to elements whose elevation values will change depending on their\n// context (e.g. when active or disabled).\n//\n// NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can\n// be used in the same way by clients.\n@mixin mat-elevation-transition(\n $duration: $mat-elevation-transition-duration,\n $easing: $mat-elevation-transition-timing-function\n) {\n transition: mat-elevation-transition-property-value($duration, $easing);\n will-change: $mat-elevation-property;\n}\n\n// Colors for umbra, penumbra, and ambient shadows. As described in the design doc, each elevation\n// level is created using a set of 3 shadow values, one for umbra (the shadow representing the\n// space completely obscured by an object relative to its light source), one for penumbra (the\n// space partially obscured by an object), and one for ambient (the space which contains the object\n// itself). For a further explanation of these terms and their meanings, see\n// https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra.\n\n// Maps for the different shadow sets and their values within each z-space. These values were\n// created by taking a few reference shadow sets created by Google's Designers and interpolating\n// all of the values between them.\n\n@function _get-umbra-map($color, $opacity) {\n @return (\n 0: '0px 0px 0px 0px #{rgba($color, $opacity * 0.2)}',\n 1: '0px 2px 1px -1px #{rgba($color, $opacity * 0.2)}',\n 2: '0px 3px 1px -2px #{rgba($color, $opacity * 0.2)}',\n 3: '0px 3px 3px -2px #{rgba($color, $opacity * 0.2)}',\n 4: '0px 2px 4px -1px #{rgba($color, $opacity * 0.2)}',\n 5: '0px 3px 5px -1px #{rgba($color, $opacity * 0.2)}',\n 6: '0px 3px 5px -1px #{rgba($color, $opacity * 0.2)}',\n 7: '0px 4px 5px -2px #{rgba($color, $opacity * 0.2)}',\n 8: '0px 5px 5px -3px #{rgba($color, $opacity * 0.2)}',\n 9: '0px 5px 6px -3px #{rgba($color, $opacity * 0.2)}',\n 10: '0px 6px 6px -3px #{rgba($color, $opacity * 0.2)}',\n 11: '0px 6px 7px -4px #{rgba($color, $opacity * 0.2)}',\n 12: '0px 7px 8px -4px #{rgba($color, $opacity * 0.2)}',\n 13: '0px 7px 8px -4px #{rgba($color, $opacity * 0.2)}',\n 14: '0px 7px 9px -4px #{rgba($color, $opacity * 0.2)}',\n 15: '0px 8px 9px -5px #{rgba($color, $opacity * 0.2)}',\n 16: '0px 8px 10px -5px #{rgba($color, $opacity * 0.2)}',\n 17: '0px 8px 11px -5px #{rgba($color, $opacity * 0.2)}',\n 18: '0px 9px 11px -5px #{rgba($color, $opacity * 0.2)}',\n 19: '0px 9px 12px -6px #{rgba($color, $opacity * 0.2)}',\n 20: '0px 10px 13px -6px #{rgba($color, $opacity * 0.2)}',\n 21: '0px 10px 13px -6px #{rgba($color, $opacity * 0.2)}',\n 22: '0px 10px 14px -6px #{rgba($color, $opacity * 0.2)}',\n 23: '0px 11px 14px -7px #{rgba($color, $opacity * 0.2)}',\n 24: '0px 11px 15px -7px #{rgba($color, $opacity * 0.2)}'\n );\n}\n\n@function _get-penumbra-map($color, $opacity) {\n @return (\n 0: '0px 0px 0px 0px #{rgba($color, $opacity * 0.14)}',\n 1: '0px 1px 1px 0px #{rgba($color, $opacity * 0.14)}',\n 2: '0px 2px 2px 0px #{rgba($color, $opacity * 0.14)}',\n 3: '0px 3px 4px 0px #{rgba($color, $opacity * 0.14)}',\n 4: '0px 4px 5px 0px #{rgba($color, $opacity * 0.14)}',\n 5: '0px 5px 8px 0px #{rgba($color, $opacity * 0.14)}',\n 6: '0px 6px 10px 0px #{rgba($color, $opacity * 0.14)}',\n 7: '0px 7px 10px 1px #{rgba($color, $opacity * 0.14)}',\n 8: '0px 8px 10px 1px #{rgba($color, $opacity * 0.14)}',\n 9: '0px 9px 12px 1px #{rgba($color, $opacity * 0.14)}',\n 10: '0px 10px 14px 1px #{rgba($color, $opacity * 0.14)}',\n 11: '0px 11px 15px 1px #{rgba($color, $opacity * 0.14)}',\n 12: '0px 12px 17px 2px #{rgba($color, $opacity * 0.14)}',\n 13: '0px 13px 19px 2px #{rgba($color, $opacity * 0.14)}',\n 14: '0px 14px 21px 2px #{rgba($color, $opacity * 0.14)}',\n 15: '0px 15px 22px 2px #{rgba($color, $opacity * 0.14)}',\n 16: '0px 16px 24px 2px #{rgba($color, $opacity * 0.14)}',\n 17: '0px 17px 26px 2px #{rgba($color, $opacity * 0.14)}',\n 18: '0px 18px 28px 2px #{rgba($color, $opacity * 0.14)}',\n 19: '0px 19px 29px 2px #{rgba($color, $opacity * 0.14)}',\n 20: '0px 20px 31px 3px #{rgba($color, $opacity * 0.14)}',\n 21: '0px 21px 33px 3px #{rgba($color, $opacity * 0.14)}',\n 22: '0px 22px 35px 3px #{rgba($color, $opacity * 0.14)}',\n 23: '0px 23px 36px 3px #{rgba($color, $opacity * 0.14)}',\n 24: '0px 24px 38px 3px #{rgba($color, $opacity * 0.14)}'\n );\n}\n\n@function _get-ambient-map($color, $opacity) {\n @return (\n 0: '0px 0px 0px 0px #{rgba($color, $opacity * 0.12)}',\n 1: '0px 1px 3px 0px #{rgba($color, $opacity * 0.12)}',\n 2: '0px 1px 5px 0px #{rgba($color, $opacity * 0.12)}',\n 3: '0px 1px 8px 0px #{rgba($color, $opacity * 0.12)}',\n 4: '0px 1px 10px 0px #{rgba($color, $opacity * 0.12)}',\n 5: '0px 1px 14px 0px #{rgba($color, $opacity * 0.12)}',\n 6: '0px 1px 18px 0px #{rgba($color, $opacity * 0.12)}',\n 7: '0px 2px 16px 1px #{rgba($color, $opacity * 0.12)}',\n 8: '0px 3px 14px 2px #{rgba($color, $opacity * 0.12)}',\n 9: '0px 3px 16px 2px #{rgba($color, $opacity * 0.12)}',\n 10: '0px 4px 18px 3px #{rgba($color, $opacity * 0.12)}',\n 11: '0px 4px 20px 3px #{rgba($color, $opacity * 0.12)}',\n 12: '0px 5px 22px 4px #{rgba($color, $opacity * 0.12)}',\n 13: '0px 5px 24px 4px #{rgba($color, $opacity * 0.12)}',\n 14: '0px 5px 26px 4px #{rgba($color, $opacity * 0.12)}',\n 15: '0px 6px 28px 5px #{rgba($color, $opacity * 0.12)}',\n 16: '0px 6px 30px 5px #{rgba($color, $opacity * 0.12)}',\n 17: '0px 6px 32px 5px #{rgba($color, $opacity * 0.12)}',\n 18: '0px 7px 34px 6px #{rgba($color, $opacity * 0.12)}',\n 19: '0px 7px 36px 6px #{rgba($color, $opacity * 0.12)}',\n 20: '0px 8px 38px 7px #{rgba($color, $opacity * 0.12)}',\n 21: '0px 8px 40px 7px #{rgba($color, $opacity * 0.12)}',\n 22: '0px 8px 42px 7px #{rgba($color, $opacity * 0.12)}',\n 23: '0px 9px 44px 8px #{rgba($color, $opacity * 0.12)}',\n 24: '0px 9px 46px 8px #{rgba($color, $opacity * 0.12)}'\n );\n}\n","@import '../common/styles/variables';\n@import '../common/styles/elevation';\n@import '../common/styles/theme-functions';\n\n@mixin td-file-theme($theme) {\n $background: map-get($theme, background);\n\n td-file-upload {\n .td-file-upload-cancel {\n mat-icon {\n background-color: mat-color($background, background);\n }\n }\n }\n\n td-file-input {\n /**\n * Class that is added ondragenter by the [TdFileDrop] directive.\n */\n .drop-zone {\n transition: background $swift-ease-out-duration $swift-ease-out-timing-function,\n mat-elevation-transition-property-value();\n @include mat-elevation(8);\n }\n }\n}\n","@mixin td-side-sheet-theme($theme) {\n $background: map-get($theme, background);\n $dialog: map-get($background, dialog);\n\n .td-side-sheet-container {\n background-color: $dialog;\n }\n}\n"]}