@covalent/core 2.0.2 → 2.1.0

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 (226) hide show
  1. package/breadcrumbs/covalent-core-breadcrumbs.metadata.json +1 -1
  2. package/bundles/covalent-core-breadcrumbs.umd.js +1 -1
  3. package/bundles/covalent-core-breadcrumbs.umd.min.js +1 -1
  4. package/bundles/covalent-core-breadcrumbs.umd.min.js.map +1 -1
  5. package/bundles/covalent-core-chips.umd.js +1 -1
  6. package/bundles/covalent-core-chips.umd.min.js +1 -1
  7. package/bundles/covalent-core-chips.umd.min.js.map +1 -1
  8. package/bundles/covalent-core-common.umd.js +251 -84
  9. package/bundles/covalent-core-common.umd.js.map +1 -1
  10. package/bundles/covalent-core-common.umd.min.js +1 -1
  11. package/bundles/covalent-core-common.umd.min.js.map +1 -1
  12. package/bundles/covalent-core-data-table.umd.js +4 -4
  13. package/bundles/covalent-core-data-table.umd.js.map +1 -1
  14. package/bundles/covalent-core-data-table.umd.min.js +1 -1
  15. package/bundles/covalent-core-data-table.umd.min.js.map +1 -1
  16. package/bundles/covalent-core-dialogs.umd.js +2 -2
  17. package/bundles/covalent-core-dialogs.umd.min.js +1 -1
  18. package/bundles/covalent-core-dialogs.umd.min.js.map +1 -1
  19. package/bundles/covalent-core-expansion-panel.umd.js +1 -1
  20. package/bundles/covalent-core-expansion-panel.umd.min.js +1 -1
  21. package/bundles/covalent-core-expansion-panel.umd.min.js.map +1 -1
  22. package/bundles/covalent-core-json-formatter.umd.js +1 -1
  23. package/bundles/covalent-core-json-formatter.umd.min.js +1 -1
  24. package/bundles/covalent-core-json-formatter.umd.min.js.map +1 -1
  25. package/bundles/covalent-core-layout.umd.js +8 -7
  26. package/bundles/covalent-core-layout.umd.js.map +1 -1
  27. package/bundles/covalent-core-layout.umd.min.js +1 -1
  28. package/bundles/covalent-core-layout.umd.min.js.map +1 -1
  29. package/bundles/covalent-core-loading.umd.js +1 -1
  30. package/bundles/covalent-core-loading.umd.min.js +1 -1
  31. package/bundles/covalent-core-loading.umd.min.js.map +1 -1
  32. package/bundles/covalent-core-menu.umd.js +1 -1
  33. package/bundles/covalent-core-menu.umd.min.js +1 -1
  34. package/bundles/covalent-core-menu.umd.min.js.map +1 -1
  35. package/bundles/covalent-core-message.umd.js +1 -1
  36. package/bundles/covalent-core-message.umd.min.js +1 -1
  37. package/bundles/covalent-core-message.umd.min.js.map +1 -1
  38. package/bundles/covalent-core-paging.umd.js +1 -1
  39. package/bundles/covalent-core-paging.umd.min.js +1 -1
  40. package/bundles/covalent-core-paging.umd.min.js.map +1 -1
  41. package/bundles/covalent-core-search.umd.js +5 -4
  42. package/bundles/covalent-core-search.umd.js.map +1 -1
  43. package/bundles/covalent-core-search.umd.min.js +1 -1
  44. package/bundles/covalent-core-search.umd.min.js.map +1 -1
  45. package/bundles/covalent-core-sidesheet.umd.js +137 -0
  46. package/bundles/covalent-core-sidesheet.umd.js.map +1 -0
  47. package/bundles/covalent-core-sidesheet.umd.min.js +2 -0
  48. package/bundles/covalent-core-sidesheet.umd.min.js.map +1 -0
  49. package/bundles/covalent-core-steps.umd.js +5 -5
  50. package/bundles/covalent-core-steps.umd.min.js +1 -1
  51. package/bundles/covalent-core-steps.umd.min.js.map +1 -1
  52. package/bundles/covalent-core-tab-select.umd.js +3 -2
  53. package/bundles/covalent-core-tab-select.umd.js.map +1 -1
  54. package/bundles/covalent-core-tab-select.umd.min.js +1 -1
  55. package/bundles/covalent-core-tab-select.umd.min.js.map +1 -1
  56. package/bundles/covalent-core.umd.js +220 -62
  57. package/bundles/covalent-core.umd.js.map +1 -1
  58. package/bundles/covalent-core.umd.min.js +1 -1
  59. package/bundles/covalent-core.umd.min.js.map +1 -1
  60. package/chips/covalent-core-chips.metadata.json +1 -1
  61. package/common/covalent-core-common.d.ts +4 -3
  62. package/common/covalent-core-common.metadata.json +1 -1
  63. package/common/directives/fullscreen/fullscreen.directive.d.ts +22 -0
  64. package/covalent-core.d.ts +8 -7
  65. package/covalent-core.metadata.json +1 -1
  66. package/data-table/README.md +2 -2
  67. package/data-table/covalent-core-data-table.metadata.json +1 -1
  68. package/dialogs/covalent-core-dialogs.metadata.json +1 -1
  69. package/esm2015/breadcrumbs/breadcrumb/breadcrumb.component.js +1 -1
  70. package/esm2015/chips/chips.component.js +1 -1
  71. package/esm2015/common/common.module.js +8 -26
  72. package/esm2015/common/covalent-core-common.js +5 -4
  73. package/esm2015/common/directives/fullscreen/fullscreen.directive.js +136 -0
  74. package/esm2015/covalent-core.js +9 -8
  75. package/esm2015/data-table/data-table-cell/data-table-cell.component.js +1 -1
  76. package/esm2015/data-table/data-table-column/data-table-column.component.js +1 -1
  77. package/esm2015/data-table/data-table.component.js +3 -3
  78. package/esm2015/dialogs/dialog.component.js +1 -1
  79. package/esm2015/dialogs/prompt-dialog/prompt-dialog.component.js +1 -1
  80. package/esm2015/expansion-panel/expansion-panel.component.js +1 -1
  81. package/esm2015/json-formatter/json-formatter.component.js +1 -1
  82. package/esm2015/layout/layout-card-over/layout-card-over.component.js +1 -1
  83. package/esm2015/layout/layout-manage-list/layout-manage-list.component.js +1 -1
  84. package/esm2015/layout/layout-nav/layout-nav.component.js +1 -1
  85. package/esm2015/layout/layout-nav-list/layout-nav-list.component.js +1 -1
  86. package/esm2015/layout/layout.component.js +1 -1
  87. package/esm2015/layout/navigation-drawer/navigation-drawer.component.js +12 -3
  88. package/esm2015/loading/loading.component.js +1 -1
  89. package/esm2015/menu/menu.component.js +1 -1
  90. package/esm2015/message/message.component.js +1 -1
  91. package/esm2015/paging/paging-bar.component.js +1 -1
  92. package/esm2015/search/search-box/search-box.component.js +3 -3
  93. package/esm2015/search/search-input/search-input.component.js +10 -3
  94. package/esm2015/sidesheet/covalent-core-sidesheet.js +9 -0
  95. package/esm2015/sidesheet/index.js +6 -0
  96. package/esm2015/sidesheet/public-api.js +7 -0
  97. package/esm2015/sidesheet/sidesheet.component.js +70 -0
  98. package/esm2015/sidesheet/sidesheet.module.js +33 -0
  99. package/esm2015/steps/nav/nav-step-link/nav-step-link.component.js +1 -1
  100. package/esm2015/steps/nav/nav-steps-horizontal/nav-steps-horizontal.component.js +1 -1
  101. package/esm2015/steps/step-body/step-body.component.js +1 -1
  102. package/esm2015/steps/step-header/step-header.component.js +1 -1
  103. package/esm2015/steps/steps.component.js +1 -1
  104. package/esm2015/tab-select/tab-select.component.js +4 -3
  105. package/esm5/breadcrumbs/breadcrumb/breadcrumb.component.js +1 -1
  106. package/esm5/chips/chips.component.js +1 -1
  107. package/esm5/common/common.module.js +8 -26
  108. package/esm5/common/covalent-core-common.js +5 -4
  109. package/esm5/common/directives/fullscreen/fullscreen.directive.js +184 -0
  110. package/esm5/covalent-core.js +9 -8
  111. package/esm5/data-table/data-table-cell/data-table-cell.component.js +1 -1
  112. package/esm5/data-table/data-table-column/data-table-column.component.js +1 -1
  113. package/esm5/data-table/data-table.component.js +3 -3
  114. package/esm5/dialogs/dialog.component.js +1 -1
  115. package/esm5/dialogs/prompt-dialog/prompt-dialog.component.js +1 -1
  116. package/esm5/expansion-panel/expansion-panel.component.js +1 -1
  117. package/esm5/json-formatter/json-formatter.component.js +1 -1
  118. package/esm5/layout/layout-card-over/layout-card-over.component.js +1 -1
  119. package/esm5/layout/layout-manage-list/layout-manage-list.component.js +1 -1
  120. package/esm5/layout/layout-nav/layout-nav.component.js +1 -1
  121. package/esm5/layout/layout-nav-list/layout-nav-list.component.js +1 -1
  122. package/esm5/layout/layout.component.js +1 -1
  123. package/esm5/layout/navigation-drawer/navigation-drawer.component.js +12 -3
  124. package/esm5/loading/loading.component.js +1 -1
  125. package/esm5/menu/menu.component.js +1 -1
  126. package/esm5/message/message.component.js +1 -1
  127. package/esm5/paging/paging-bar.component.js +1 -1
  128. package/esm5/search/search-box/search-box.component.js +3 -3
  129. package/esm5/search/search-input/search-input.component.js +10 -3
  130. package/esm5/sidesheet/covalent-core-sidesheet.js +9 -0
  131. package/esm5/sidesheet/index.js +6 -0
  132. package/esm5/sidesheet/public-api.js +7 -0
  133. package/esm5/sidesheet/sidesheet.component.js +88 -0
  134. package/esm5/sidesheet/sidesheet.module.js +37 -0
  135. package/esm5/steps/nav/nav-step-link/nav-step-link.component.js +1 -1
  136. package/esm5/steps/nav/nav-steps-horizontal/nav-steps-horizontal.component.js +1 -1
  137. package/esm5/steps/step-body/step-body.component.js +1 -1
  138. package/esm5/steps/step-header/step-header.component.js +1 -1
  139. package/esm5/steps/steps.component.js +1 -1
  140. package/esm5/tab-select/tab-select.component.js +4 -3
  141. package/expansion-panel/covalent-core-expansion-panel.metadata.json +1 -1
  142. package/fesm2015/covalent-core-breadcrumbs.js +1 -1
  143. package/fesm2015/covalent-core-chips.js +1 -1
  144. package/fesm2015/covalent-core-common.js +114 -26
  145. package/fesm2015/covalent-core-common.js.map +1 -1
  146. package/fesm2015/covalent-core-data-table.js +4 -4
  147. package/fesm2015/covalent-core-data-table.js.map +1 -1
  148. package/fesm2015/covalent-core-dialogs.js +2 -2
  149. package/fesm2015/covalent-core-expansion-panel.js +1 -1
  150. package/fesm2015/covalent-core-json-formatter.js +1 -1
  151. package/fesm2015/covalent-core-layout.js +8 -7
  152. package/fesm2015/covalent-core-layout.js.map +1 -1
  153. package/fesm2015/covalent-core-loading.js +1 -1
  154. package/fesm2015/covalent-core-menu.js +1 -1
  155. package/fesm2015/covalent-core-message.js +1 -1
  156. package/fesm2015/covalent-core-paging.js +1 -1
  157. package/fesm2015/covalent-core-search.js +5 -4
  158. package/fesm2015/covalent-core-search.js.map +1 -1
  159. package/fesm2015/covalent-core-sidesheet.js +110 -0
  160. package/fesm2015/covalent-core-sidesheet.js.map +1 -0
  161. package/fesm2015/covalent-core-steps.js +5 -5
  162. package/fesm2015/covalent-core-tab-select.js +3 -2
  163. package/fesm2015/covalent-core-tab-select.js.map +1 -1
  164. package/fesm2015/covalent-core.js +149 -58
  165. package/fesm2015/covalent-core.js.map +1 -1
  166. package/fesm5/covalent-core-breadcrumbs.js +1 -1
  167. package/fesm5/covalent-core-chips.js +1 -1
  168. package/fesm5/covalent-core-common.js +161 -27
  169. package/fesm5/covalent-core-common.js.map +1 -1
  170. package/fesm5/covalent-core-data-table.js +4 -4
  171. package/fesm5/covalent-core-data-table.js.map +1 -1
  172. package/fesm5/covalent-core-dialogs.js +2 -2
  173. package/fesm5/covalent-core-expansion-panel.js +1 -1
  174. package/fesm5/covalent-core-json-formatter.js +1 -1
  175. package/fesm5/covalent-core-layout.js +8 -7
  176. package/fesm5/covalent-core-layout.js.map +1 -1
  177. package/fesm5/covalent-core-loading.js +1 -1
  178. package/fesm5/covalent-core-menu.js +1 -1
  179. package/fesm5/covalent-core-message.js +1 -1
  180. package/fesm5/covalent-core-paging.js +1 -1
  181. package/fesm5/covalent-core-search.js +5 -4
  182. package/fesm5/covalent-core-search.js.map +1 -1
  183. package/fesm5/covalent-core-sidesheet.js +126 -0
  184. package/fesm5/covalent-core-sidesheet.js.map +1 -0
  185. package/fesm5/covalent-core-steps.js +5 -5
  186. package/fesm5/covalent-core-tab-select.js +3 -2
  187. package/fesm5/covalent-core-tab-select.js.map +1 -1
  188. package/fesm5/covalent-core.js +196 -59
  189. package/fesm5/covalent-core.js.map +1 -1
  190. package/json-formatter/covalent-core-json-formatter.metadata.json +1 -1
  191. package/layout/README.md +5 -2
  192. package/layout/covalent-core-layout.metadata.json +1 -1
  193. package/layout/navigation-drawer/navigation-drawer.component.d.ts +7 -0
  194. package/layout/navigation-drawer/navigation-drawer.component.scss +7 -0
  195. package/loading/covalent-core-loading.metadata.json +1 -1
  196. package/menu/covalent-core-menu.metadata.json +1 -1
  197. package/message/covalent-core-message.metadata.json +1 -1
  198. package/package.json +1 -1
  199. package/paging/covalent-core-paging.metadata.json +1 -1
  200. package/search/covalent-core-search.metadata.json +1 -1
  201. package/search/search-box/search-box.component.scss +6 -0
  202. package/search/search-input/README.md +5 -2
  203. package/search/search-input/search-input.component.d.ts +6 -0
  204. package/search/search-input/search-input.component.scss +33 -0
  205. package/sidesheet/README.md +68 -0
  206. package/sidesheet/covalent-core-sidesheet.d.ts +4 -0
  207. package/sidesheet/covalent-core-sidesheet.metadata.json +1 -0
  208. package/sidesheet/index.d.ts +1 -0
  209. package/sidesheet/package.json +13 -0
  210. package/sidesheet/public-api.d.ts +2 -0
  211. package/sidesheet/sidesheet.component.d.ts +13 -0
  212. package/sidesheet/sidesheet.component.scss +96 -0
  213. package/sidesheet/sidesheet.module.d.ts +2 -0
  214. package/steps/covalent-core-steps.metadata.json +1 -1
  215. package/tab-select/covalent-core-tab-select.metadata.json +1 -1
  216. package/tab-select/tab-select.component.scss +3 -0
  217. package/theming/prebuilt/blue-grey-deep-orange.css +89 -86
  218. package/theming/prebuilt/blue-grey-deep-orange.css.map +1 -1
  219. package/theming/prebuilt/blue-orange.css +89 -86
  220. package/theming/prebuilt/blue-orange.css.map +1 -1
  221. package/theming/prebuilt/indigo-pink.css +89 -86
  222. package/theming/prebuilt/indigo-pink.css.map +1 -1
  223. package/theming/prebuilt/orange-light-blue.css +89 -86
  224. package/theming/prebuilt/orange-light-blue.css.map +1 -1
  225. package/theming/prebuilt/teal-orange.css +89 -86
  226. package/theming/prebuilt/teal-orange.css.map +1 -1
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../node_modules/@angular/material/_theming.scss","common/styles/core/_button.scss","common/styles/_layout.scss","theming/prebuilt/orange-light-blue.css","common/styles/_palette-light.scss","common/styles/_elevation.scss","typography/_all-typography.scss","common/styles/_typography-functions.scss","chips/_chips-theme.scss","data-table/_data-table-theme.scss","dialogs/_dialog-theme.scss","expansion-panel/_expansion-panel-theme.scss","json-formatter/_json-formatter-theme.scss","message/_message-theme.scss","paging/_paging-bar-theme.scss","steps/_steps-theme.scss","layout/_layout-theme.scss","breadcrumbs/_breadcrumbs-theme.scss","common/_common-theme.scss","common/styles/_variables.scss","file/_file-theme.scss","loading/_loading-theme.scss","notifications/_notification-count-theme.scss"],"names":[],"mappings":"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BA,oBIjpHY;IJkpHZ,aInoHY,EJ2qHT;EAVH;IA/BA,oBIv1HY;IJw1HZ,aIz0HY,EJq3HT;EAxCH;;;IAGE,+BAA8B,EAC/B;EAED;;;;;IAKE,eAAc,EACf;EAED;IACE,0BAAyB,EAC1B;;AAyDD;EACE,kCIn3GU,EJo3GX;;AAitBD;EACE,kBAp/Ge,EAq/GhB;;AAED;;EAEE,2BA98G2B,EA+8G5B;;AA9rBD;EAGE,gCAp8G6B;EAq8G7B,oBAA8D;EKh0HhE,oIAGyD;UAHzD,4HAGyD,ELg0HxD;;AAED;EACE,eIrwHU,EJswHX;;AMt7HD;EACE,kDCT2B,EDU5B;;AElCD;EAEI,kDDsByB;ECrBzB,gBFUoC,EERvC;;ACND;EAEI,kDFuByB;EEtBzB,gBHUoC;EGTpC,iBHS+C;EGPjD,kBHO4C,EGN7C;;AACD;EAEI,kDFeyB;EEdzB,gBHGoC;EGFpC,iBAAW,EAEd;;ACbD;EAEI,kDHsByB;EGrBzB,gBJKoC;EIJpC,iBJI+C,EIFlD;;AACD;EAEI,kDHeyB;EGdzB,gBJDoC;EIEpC,iBJF+C;EIIjD,kBJJ4C,EIK7C;;ACZD;EAEI,kDJoByB;EInBzB,gBLIoC;EKHpC,iBLG+C,EKDlD;;AACD;EAEI,kDJayB;EIZzB,gBLAoC;EKCpC,iBLD+C,EKGlD;;ACfD;EAEI,kDLsByB;EKrBzB,gBNSoC,EMPvC;;ACLD;EAEI,kDNsByB;EMrBzB,gBPQoC;EOPpC,iBAAW;EAEb,kBPK4C,EOJ7C;;AACD;EAEI,kDNcyB;EMbzB,gBPCoC,EOCvC;;ACbD;EAEI,kDPsByB;EOrBzB,gBRUoC,EQRvC;;ACJD;EAEI,kDRqByB;EQpBzB,gBTOoC;ESNpC,iBTM+C,ESJlD;;AACD;EAEI,kDRcyB;EQbzB,gBTCoC;ESCtC,kBTD4C,ESE7C;;ACbD;EAGM,kDToBuB;ESnBvB,gBVIkC,EUFrC;;AANH;EASM,kDTcuB;ESbvB,gBVCkC;EUAlC,iBAAW;EAEb,kBVF0C,EUG3C;;AAdH;EAiBM,kDTMuB;ESLvB,gBVRkC;EUSlC,iBAAW;EAEb,kBVX0C,EUY3C;;ACxBH;EAEI,kBAAiB;EACjB,gBAAe,EAChB;;ACAH;;EAGI,2BlBkrCyB,EkB9qC1B;EAPH;;IAKM,sClBsoCgB,EkBroCjB;;AAGL;EAEI,2BlBwfyB,EkBvf1B;;AFmBH;EACE,0BhBiiCU,EgBhiCX;;Abw9DH;Ear9DI,eAAc,EAKf;EAJC;IACE,gBAAe;IACf,iBAAgB,EACjB;;AAGH;;;;;;EXiGA,kIAGyD;UAHzD,0HAGyD;EW5FrD,WAAU,EACX;;AAEH;EXsFA,kIAGyD;UAHzD,0HAGyD,EWvFxD;;AACD;EACE,uBhBqgCU;EgBpgCV,2BhB4nC2B;EK3iC7B,kIAGyD;UAHzD,0HAGyD,EWhExD;EAtBD;IAKI,oBZyZQ,EYrZT;IATH;MAOM,aZsaM,EYraP;EARL;IAWI,oBZyIQ,EYrIT;IAfH;MAaM,aZsJM,EYrJP;EAdL;IAiBI,oBZnEQ,EYuET;IArBH;MAmBM,aZtDM,EYuDP;;AD1DL;;;EAII,aIzBQ,EJ0BT;;AALH;EAQI,yCfyeoB,EexerB;;AATH;EAWI,uCfseoB,EererB;;AAZH;EAkBQ,gCfsmCc,EermCf;;AAnBP;EAwBM,gBAAe,EAChB;;AAzBL;EA4BM,gCf4lCgB,Ee3lCjB;;AA7BL;EAgCQ,2BfooCqB,EenoCtB;;AAjCP;EAmCQ,2Bf4csB,Ee3cvB;;AApCP;EAuCU,2BfycmB,EexcpB;;AAxCT;EA4CU,eXxDE,EWyDH;;AA7CT;EAiDM,eXyIM,EWxIP;;AAlDL;EAqDI,afokCa,Ee1jCd;EA/DH;IAuDM,0BXmIM,EWlIP;EAxDL;IA0DM,sCfsbuB,EerbxB;EA3DL;IA6DM,0BfumCuB,EetmCxB;;AA9DL;EAiEI,eX7EQ,EW8ET;;AAlEH;EAoEI,2Bf8lCyB,Ee7lC1B;;AArEH;EAwEI,kCf4lCyB,Ee3lC1B;;AAzEH;EA2EI,kCfqayB,Eepa1B;;AJ1EH;EAEI,kCAAyB;EAAzB,0BAAyB,EAW1B;EAbH;IAKQ,oBQ5BI,ER6BL;EANP;IAUQ,iBQjCI,ERkCL;;AAKP;ENuGA,kIAGyD;UAHzD,0HAGyD;EMxGvD,wBXqmCe,EWxkChB;EA/BD;IAMM,gCXgmCgB,EW/lCjB;EAPL;IAUQ,2BXsoCqB,EWroCtB;EAXP;IAcU,2BXgdmB,EW/cpB;EAfT;IAoBI,2BX4nCyB,EW3nC1B;EArBH;;;IAyBM,uBAAsB,EACvB;EA1BL;IA6BI,2BXgc0B,EW/b3B;;AHrDH;EAGI,oBRgjCQ;EQ/iCR,2BRqqCyB,EQvoC1B;EAlCH;IAOQ,2BRgqCqB,EQ/pCtB;EARP;IAUQ,oBJ+bI,EI3bL;IAdP;MAYU,aJ4cE,EI3cH;EAbT;IAgBQ,oBJ+KI,EI3KL;IApBP;MAkBU,aJ4LE,EI3LH;EAnBT;IAsBQ,oBJ7BI,EIiCL;IA1BP;MAwBU,aJhBE,EIiBH;EAzBT;IA6BM,2BRwduB,EQpdxB;IAjCL;MA+BQ,2BRwoCqB,EQvoCtB;;AAhCP;EAoCI,sCRkdoB,EQjdrB;;AArCH;EAwCM,0BJiaM,EIhaP;;AAzCL;EA6CM,0BJkJM,EIjJP;;AA9CL;EAkDM,0BJzDM,EI0DP;;AAnDL;EAuDM,0BJ9DM,EI+DP;;AAxDL;EA0DM,eJjEM,EIkEP;;AYzEL;EAGM,0BpB2jCK,EoB1jCN;;AAGL;EACE;;MAEE,EAMH;EATD;IAKI,6HfiJsD;IejJtD,qHfiJsD;IejJtD,6GfiJsD;IejJtD,oKfiJsD;IAjB1D,oIAGyD;YAHzD,4HAGyD,EehItD;;AVIH;EACE,2BV8e4B,EU7e7B;;AEVD;;;;EAKI,iBAAgB,EACjB;;AANH;EAWQ,sCZqnCc,EYpnCf;;AAZP;EAcQ,2BZyesB,EYxevB;;AAfP;EAmBI,eRybQ,EQxbT;;AApBH;EAuBM,eR3BM,EQ4BP;;AAxBL;EA0BM,eRwKM,EQvKP;;AA3BL;EA6BM,eRqKM,EQpKP;;AA9BL;;EAiCM,2BZuduB,EYtdxB;;AAlCL;EAoCM,eRwaM,EQvaP;;AArCL;EAuCM,2BZqoCuB,EYpoCxB;;AEvCL;EAEI,2Bdof0B,Ecnf3B;;AOlBH;EAEI,qCrB8oCa,EqB7oCd;;AZoBH;EACE,6CT+esB,ES9evB;;AACD;EACE,0CT4esB,ES3evB;;AACD;EAEI,4CTweoB;ESvepB,aAAY,EACb;;AAJH;EAOM,WAAU,EACX;;AAGL;;EAGI,yCT4doB,ES3drB;;AAJH;;EAOI,2BTsd0B,ESld3B;EAXH;;IASM,0BL+JM,EK9JP;;AAVL;EAeQ,cAAa,EACd;;AAhBP;EAoBI,2BTyc0B,ES5b3B;EAjCH;IAsBM,uBAAsB,EACvB;EAvBL;IA0BQ,2BTocqB,ESnctB;EA3BP;;IA+BM,aTwmCkB,ESvmCnB;;AAhCL;EAoCM,6BTs/BM,ESr/BP;;AArCL;EAuCM,sCT+jCgB,ES9jCjB;;AAxCL;EA4CM,sCT0jCgB,ESzjCjB;;AAGL;EACE,0CLuHU;EKtHV,eLsHU,EKrHX;;AapFD;EjBwIA,kIAGyD;UAHzD,0HAGyD,EiB7HxD;EAdD;IAGI,0BlBAQ;IkBCR,alBcQ,EkBbT;EALH;IAOI,0BlB4cQ;IkB3cR,alB0dQ,EkBzdT;EATH;IAWI,0BlB8LQ;IkB7LR,alB4MQ,EkB3MT;;ATCH;EAEI,eTmcQ;ESlcR,0CTkcQ,ESjcT;;AAJH;EAMI,eTqLQ;ESpLR,0CToLQ,ESnLT;;AARH;EAUI,eTrBQ;ESsBR,0CTtBQ,ESuBT","file":"theming/prebuilt/orange-light-blue.css","sourcesContent":["// Import all the theming functionality.\n// We can use relative imports for imports from the cdk because we bundle everything\n// up into a single flat scss file for material.\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$cdk-z-index-overlay-container: 1000;\n$cdk-z-index-overlay: 1000;\n$cdk-z-index-overlay-backdrop: 1000;\n\n// Background color for all of the backdrops\n$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.32);\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\n@mixin cdk-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: $cdk-z-index-overlay-container;\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: $cdk-z-index-overlay;\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: $cdk-z-index-overlay;\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: $cdk-z-index-overlay-backdrop;\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 // In high contrast mode the rgba background will become solid so we need to fall back\n // to making it opaque using `opacity`. Note that we can't use the `cdk-high-contrast`\n // mixin, because we can't normalize the import path to the _a11y.scss both for the\n // source and when this file is distributed. See #10908.\n @media screen and (-ms-high-contrast: active) {\n opacity: 0.6;\n }\n }\n }\n\n .cdk-overlay-dark-backdrop {\n background: $cdk-overlay-dark-backdrop-background;\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: $cdk-z-index-overlay;\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\n@mixin cdk-a11y {\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 // 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/**\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 * @param target Which kind of high contrast setting to target. Defaults to `active`, can be\n * `white-on-black` or `black-on-white`.\n */\n@mixin cdk-high-contrast($target: active) {\n @media screen and (-ms-high-contrast: $target) {\n @content;\n }\n}\n\n// Core styles that enable monitoring autofill state of text fields.\n@mixin cdk-text-field {\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 animation-name: cdk-text-field-autofill-start;\n }\n\n .cdk-text-field-autofill-monitored:not(:-webkit-autofill) {\n animation-name: cdk-text-field-autofill-end;\n }\n\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 height: auto !important;\n overflow: hidden !important;\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\n// Used to generate UIDs for keyframes used to change the text field autofill styles.\n$cdk-text-field-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 cdk-text-field-autofill-color($background, $foreground:'') {\n @keyframes cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} {\n to {\n background: $background;\n @if $foreground != '' { color: $foreground; }\n }\n }\n\n &:-webkit-autofill {\n animation-name: cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count};\n animation-fill-mode: both;\n }\n\n &.cdk-text-field-autofill-monitored:-webkit-autofill {\n animation-name: cdk-text-field-autofill-start,\n cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count};\n }\n\n $cdk-text-field-autofill-color-frame-count:\n $cdk-text-field-autofill-color-frame-count + 1 !global;\n}\n\n\n// Core styles that can be used to apply material design treatments to any element.\n// Media queries\n// TODO(josephperrott): Change $mat-xsmall and $mat-small usages to rely on BreakpointObserver,\n$mat-xsmall: 'max-width: 599px';\n$mat-small: 'max-width: 959px';\n\n// TODO: Revisit all z-indices before beta\n// z-index master list\n\n$z-index-fab: 20 !default;\n$z-index-drawer: 100 !default;\n\n// Global constants\n$pi: 3.14159265;\n\n// Padding between input toggles and their labels\n$mat-toggle-padding: 8px !default;\n// Width and height of input toggles\n$mat-toggle-size: 20px !default;\n\n// Easing Curves\n// TODO(jelbourn): all of these need to be revisited\n\n// The default animation curves used by material design.\n$mat-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;\n$mat-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;\n$mat-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;\n\n$ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default;\n\n$swift-ease-out-duration: 400ms !default;\n$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;\n$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;\n\n$swift-ease-in-duration: 300ms !default;\n$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;\n$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;\n\n$swift-ease-in-out-duration: 500ms !default;\n$swift-ease-in-out-timing-function: $ease-in-out-curve-function !default;\n$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;\n\n$swift-linear-duration: 80ms !default;\n$swift-linear-timing-function: linear !default;\n$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;\n\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 @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\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// Prefix for elevation-related selectors.\n$_mat-elevation-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 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)},\n #{map-get(_get-ambient-map($color, $opacity), $zValue)};\n}\n\n@mixin _mat-theme-elevation($zValue, $theme, $opacity: $mat-elevation-opacity) {\n $foreground: map-get($theme, foreground);\n $elevation-color: map-get($foreground, elevation);\n $elevation-color-or-default: if($elevation-color == null, $mat-elevation-color, $elevation-color);\n\n @include mat-elevation($zValue, $elevation-color-or-default, $opacity);\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 mat-overridable-elevation(\n $zValue,\n $color: $mat-elevation-color,\n $opacity: $mat-elevation-opacity) {\n &:not([class*='#{$_mat-elevation-prefix}']) {\n @include mat-elevation($zValue, $color, $opacity);\n }\n}\n\n@mixin _mat-theme-overridable-elevation($zValue, $theme, $opacity: $mat-elevation-opacity) {\n $foreground: map-get($theme, foreground);\n $elevation-color: map-get($foreground, elevation);\n $elevation-color-or-default: if($elevation-color == null, $mat-elevation-color, $elevation-color);\n\n @include mat-overridable-elevation($zValue, $elevation-color-or-default, $opacity);\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 mat-elevation-transition-property-value(\n $duration: $mat-elevation-transition-duration,\n $easing: $mat-elevation-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 mat-elevation-transition(\n $duration: $mat-elevation-transition-duration,\n $easing: $mat-elevation-transition-timing-function) {\n transition: mat-elevation-transition-property-value($duration, $easing);\n}\n\n// Color palettes from the Material Design spec.\n// See https://material.io/design/color/\n//\n// Contrast colors are hard-coded because it is too difficult (probably impossible) to\n// calculate them. These contrast colors are pulled from the public Material Design spec swatches.\n// While the contrast colors in the spec are not prescriptive, we use them for convenience.\n\n\n// @deprecated renamed to $dark-primary-text.\n// @breaking-change 8.0.0\n$black-87-opacity: rgba(black, 0.87);\n// @deprecated renamed to $light-primary-text.\n// @breaking-change 8.0.0\n$white-87-opacity: rgba(white, 0.87);\n// @deprecated use $dark-[secondary-text,disabled-text,dividers,focused] instead.\n// @breaking-change 8.0.0\n$black-12-opacity: rgba(black, 0.12);\n// @deprecated use $light-[secondary-text,disabled-text,dividers,focused] instead.\n// @breaking-change 8.0.0\n$white-12-opacity: rgba(white, 0.12);\n// @deprecated use $dark-[secondary-text,disabled-text,dividers,focused] instead.\n// @breaking-change 8.0.0\n$black-6-opacity: rgba(black, 0.06);\n// @deprecated use $light-[secondary-text,disabled-text,dividers,focused] instead.\n// @breaking-change 8.0.0\n$white-6-opacity: rgba(white, 0.06);\n\n$dark-primary-text: rgba(black, 0.87);\n$dark-secondary-text: rgba(black, 0.54);\n$dark-disabled-text: rgba(black, 0.38);\n$dark-dividers: rgba(black, 0.12);\n$dark-focused: rgba(black, 0.12);\n$light-primary-text: white;\n$light-secondary-text: rgba(white, 0.7);\n$light-disabled-text: rgba(white, 0.5);\n$light-dividers: rgba(white, 0.12);\n$light-focused: rgba(white, 0.12);\n\n$mat-red: (\n 50: #ffebee,\n 100: #ffcdd2,\n 200: #ef9a9a,\n 300: #e57373,\n 400: #ef5350,\n 500: #f44336,\n 600: #e53935,\n 700: #d32f2f,\n 800: #c62828,\n 900: #b71c1c,\n A100: #ff8a80,\n A200: #ff5252,\n A400: #ff1744,\n A700: #d50000,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $light-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$mat-pink: (\n 50: #fce4ec,\n 100: #f8bbd0,\n 200: #f48fb1,\n 300: #f06292,\n 400: #ec407a,\n 500: #e91e63,\n 600: #d81b60,\n 700: #c2185b,\n 800: #ad1457,\n 900: #880e4f,\n A100: #ff80ab,\n A200: #ff4081,\n A400: #f50057,\n A700: #c51162,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $light-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$mat-purple: (\n 50: #f3e5f5,\n 100: #e1bee7,\n 200: #ce93d8,\n 300: #ba68c8,\n 400: #ab47bc,\n 500: #9c27b0,\n 600: #8e24aa,\n 700: #7b1fa2,\n 800: #6a1b9a,\n 900: #4a148c,\n A100: #ea80fc,\n A200: #e040fb,\n A400: #d500f9,\n A700: #aa00ff,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $light-primary-text,\n 400: $light-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $light-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$mat-deep-purple: (\n 50: #ede7f6,\n 100: #d1c4e9,\n 200: #b39ddb,\n 300: #9575cd,\n 400: #7e57c2,\n 500: #673ab7,\n 600: #5e35b1,\n 700: #512da8,\n 800: #4527a0,\n 900: #311b92,\n A100: #b388ff,\n A200: #7c4dff,\n A400: #651fff,\n A700: #6200ea,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $light-primary-text,\n 400: $light-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $light-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$mat-indigo: (\n 50: #e8eaf6,\n 100: #c5cae9,\n 200: #9fa8da,\n 300: #7986cb,\n 400: #5c6bc0,\n 500: #3f51b5,\n 600: #3949ab,\n 700: #303f9f,\n 800: #283593,\n 900: #1a237e,\n A100: #8c9eff,\n A200: #536dfe,\n A400: #3d5afe,\n A700: #304ffe,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $light-primary-text,\n 400: $light-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $light-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$mat-blue: (\n 50: #e3f2fd,\n 100: #bbdefb,\n 200: #90caf9,\n 300: #64b5f6,\n 400: #42a5f5,\n 500: #2196f3,\n 600: #1e88e5,\n 700: #1976d2,\n 800: #1565c0,\n 900: #0d47a1,\n A100: #82b1ff,\n A200: #448aff,\n A400: #2979ff,\n A700: #2962ff,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $light-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$mat-light-blue: (\n 50: #e1f5fe,\n 100: #b3e5fc,\n 200: #81d4fa,\n 300: #4fc3f7,\n 400: #29b6f6,\n 500: #03a9f4,\n 600: #039be5,\n 700: #0288d1,\n 800: #0277bd,\n 900: #01579b,\n A100: #80d8ff,\n A200: #40c4ff,\n A400: #00b0ff,\n A700: #0091ea,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$mat-cyan: (\n 50: #e0f7fa,\n 100: #b2ebf2,\n 200: #80deea,\n 300: #4dd0e1,\n 400: #26c6da,\n 500: #00bcd4,\n 600: #00acc1,\n 700: #0097a7,\n 800: #00838f,\n 900: #006064,\n A100: #84ffff,\n A200: #18ffff,\n A400: #00e5ff,\n A700: #00b8d4,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $dark-primary-text,\n )\n);\n\n$mat-teal: (\n 50: #e0f2f1,\n 100: #b2dfdb,\n 200: #80cbc4,\n 300: #4db6ac,\n 400: #26a69a,\n 500: #009688,\n 600: #00897b,\n 700: #00796b,\n 800: #00695c,\n 900: #004d40,\n A100: #a7ffeb,\n A200: #64ffda,\n A400: #1de9b6,\n A700: #00bfa5,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $dark-primary-text,\n )\n);\n\n$mat-green: (\n 50: #e8f5e9,\n 100: #c8e6c9,\n 200: #a5d6a7,\n 300: #81c784,\n 400: #66bb6a,\n 500: #4caf50,\n 600: #43a047,\n 700: #388e3c,\n 800: #2e7d32,\n 900: #1b5e20,\n A100: #b9f6ca,\n A200: #69f0ae,\n A400: #00e676,\n A700: #00c853,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $dark-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $dark-primary-text,\n )\n);\n\n$mat-light-green: (\n 50: #f1f8e9,\n 100: #dcedc8,\n 200: #c5e1a5,\n 300: #aed581,\n 400: #9ccc65,\n 500: #8bc34a,\n 600: #7cb342,\n 700: #689f38,\n 800: #558b2f,\n 900: #33691e,\n A100: #ccff90,\n A200: #b2ff59,\n A400: #76ff03,\n A700: #64dd17,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $dark-primary-text,\n 600: $dark-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $dark-primary-text,\n )\n);\n\n$mat-lime: (\n 50: #f9fbe7,\n 100: #f0f4c3,\n 200: #e6ee9c,\n 300: #dce775,\n 400: #d4e157,\n 500: #cddc39,\n 600: #c0ca33,\n 700: #afb42b,\n 800: #9e9d24,\n 900: #827717,\n A100: #f4ff81,\n A200: #eeff41,\n A400: #c6ff00,\n A700: #aeea00,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $dark-primary-text,\n 600: $dark-primary-text,\n 700: $dark-primary-text,\n 800: $dark-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $dark-primary-text,\n )\n);\n\n$mat-yellow: (\n 50: #fffde7,\n 100: #fff9c4,\n 200: #fff59d,\n 300: #fff176,\n 400: #ffee58,\n 500: #ffeb3b,\n 600: #fdd835,\n 700: #fbc02d,\n 800: #f9a825,\n 900: #f57f17,\n A100: #ffff8d,\n A200: #ffff00,\n A400: #ffea00,\n A700: #ffd600,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $dark-primary-text,\n 600: $dark-primary-text,\n 700: $dark-primary-text,\n 800: $dark-primary-text,\n 900: $dark-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $dark-primary-text,\n )\n);\n\n$mat-amber: (\n 50: #fff8e1,\n 100: #ffecb3,\n 200: #ffe082,\n 300: #ffd54f,\n 400: #ffca28,\n 500: #ffc107,\n 600: #ffb300,\n 700: #ffa000,\n 800: #ff8f00,\n 900: #ff6f00,\n A100: #ffe57f,\n A200: #ffd740,\n A400: #ffc400,\n A700: #ffab00,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $dark-primary-text,\n 600: $dark-primary-text,\n 700: $dark-primary-text,\n 800: $dark-primary-text,\n 900: $dark-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $dark-primary-text,\n )\n);\n\n$mat-orange: (\n 50: #fff3e0,\n 100: #ffe0b2,\n 200: #ffcc80,\n 300: #ffb74d,\n 400: #ffa726,\n 500: #ff9800,\n 600: #fb8c00,\n 700: #f57c00,\n 800: #ef6c00,\n 900: #e65100,\n A100: #ffd180,\n A200: #ffab40,\n A400: #ff9100,\n A700: #ff6d00,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $dark-primary-text,\n 600: $dark-primary-text,\n 700: $dark-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: black,\n )\n);\n\n$mat-deep-orange: (\n 50: #fbe9e7,\n 100: #ffccbc,\n 200: #ffab91,\n 300: #ff8a65,\n 400: #ff7043,\n 500: #ff5722,\n 600: #f4511e,\n 700: #e64a19,\n 800: #d84315,\n 900: #bf360c,\n A100: #ff9e80,\n A200: #ff6e40,\n A400: #ff3d00,\n A700: #dd2c00,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$mat-brown: (\n 50: #efebe9,\n 100: #d7ccc8,\n 200: #bcaaa4,\n 300: #a1887f,\n 400: #8d6e63,\n 500: #795548,\n 600: #6d4c41,\n 700: #5d4037,\n 800: #4e342e,\n 900: #3e2723,\n A100: #d7ccc8,\n A200: #bcaaa4,\n A400: #8d6e63,\n A700: #5d4037,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $light-primary-text,\n 400: $light-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$mat-grey: (\n 50: #fafafa,\n 100: #f5f5f5,\n 200: #eeeeee,\n 300: #e0e0e0,\n 400: #bdbdbd,\n 500: #9e9e9e,\n 600: #757575,\n 700: #616161,\n 800: #424242,\n 900: #212121,\n A100: #ffffff,\n A200: #eeeeee,\n A400: #bdbdbd,\n A700: #616161,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $dark-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $light-primary-text,\n )\n);\n\n// Alias for alternate spelling.\n$mat-gray: $mat-grey;\n\n$mat-blue-grey: (\n 50: #eceff1,\n 100: #cfd8dc,\n 200: #b0bec5,\n 300: #90a4ae,\n 400: #78909c,\n 500: #607d8b,\n 600: #546e7a,\n 700: #455a64,\n 800: #37474f,\n 900: #263238,\n A100: #cfd8dc,\n A200: #b0bec5,\n A400: #78909c,\n A700: #455a64,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $light-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n// Alias for alternate spelling.\n$mat-blue-gray: $mat-blue-grey;\n\n\n// Background palette for light themes.\n$mat-light-theme-background: (\n status-bar: map_get($mat-grey, 300),\n app-bar: map_get($mat-grey, 100),\n background: map_get($mat-grey, 50),\n hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UX\n card: white,\n dialog: white,\n disabled-button: rgba(black, 0.12),\n raised-button: white,\n focused-button: $dark-focused,\n selected-button: map_get($mat-grey, 300),\n selected-disabled-button: map_get($mat-grey, 400),\n disabled-button-toggle: map_get($mat-grey, 200),\n unselected-chip: map_get($mat-grey, 300),\n disabled-list-option: map_get($mat-grey, 200),\n);\n\n// Background palette for dark themes.\n$mat-dark-theme-background: (\n status-bar: black,\n app-bar: map_get($mat-grey, 900),\n background: #303030,\n hover: rgba(white, 0.04), // TODO(kara): check style with Material Design UX\n card: map_get($mat-grey, 800),\n dialog: map_get($mat-grey, 800),\n disabled-button: rgba(white, 0.12),\n raised-button: map-get($mat-grey, 800),\n focused-button: $light-focused,\n selected-button: map_get($mat-grey, 900),\n selected-disabled-button: map_get($mat-grey, 800),\n disabled-button-toggle: black,\n unselected-chip: map_get($mat-grey, 700),\n disabled-list-option: black,\n);\n\n// Foreground palette for light themes.\n$mat-light-theme-foreground: (\n base: black,\n divider: $dark-dividers,\n dividers: $dark-dividers,\n disabled: $dark-disabled-text,\n disabled-button: rgba(black, 0.26),\n disabled-text: $dark-disabled-text,\n elevation: black,\n hint-text: $dark-disabled-text,\n secondary-text: $dark-secondary-text,\n icon: rgba(black, 0.54),\n icons: rgba(black, 0.54),\n text: rgba(black, 0.87),\n slider-min: rgba(black, 0.87),\n slider-off: rgba(black, 0.26),\n slider-off-active: rgba(black, 0.38),\n);\n\n// Foreground palette for dark themes.\n$mat-dark-theme-foreground: (\n base: white,\n divider: $light-dividers,\n dividers: $light-dividers,\n disabled: $light-disabled-text,\n disabled-button: rgba(white, 0.3),\n disabled-text: $light-disabled-text,\n elevation: black,\n hint-text: $light-disabled-text,\n secondary-text: $light-secondary-text,\n icon: white,\n icons: white,\n text: white,\n slider-min: white,\n slider-off: rgba(white, 0.3),\n slider-off-active: rgba(white, 0.3),\n);\n\n\n\n// For a given hue in a palette, return the contrast color from the map of contrast palettes.\n// @param $color-map\n// @param $hue\n@function mat-contrast($palette, $hue) {\n @return map-get(map-get($palette, contrast), $hue);\n}\n\n\n// Creates a map of hues to colors for a theme. This is used to define a theme palette in terms\n// of the Material Design hues.\n// @param $color-map\n// @param $primary\n// @param $lighter\n@function mat-palette($base-palette, $default: 500, $lighter: 100, $darker: 700) {\n $result: map_merge($base-palette, (\n default: map-get($base-palette, $default),\n lighter: map-get($base-palette, $lighter),\n darker: map-get($base-palette, $darker),\n\n default-contrast: mat-contrast($base-palette, $default),\n lighter-contrast: mat-contrast($base-palette, $lighter),\n darker-contrast: mat-contrast($base-palette, $darker)\n ));\n\n // For each hue in the palette, add a \"-contrast\" color to the map.\n @each $hue, $color in $base-palette {\n $result: map_merge($result, (\n '#{$hue}-contrast': mat-contrast($base-palette, $hue)\n ));\n }\n\n @return $result;\n}\n\n\n// Gets a color from a theme palette (the output of mat-palette).\n// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured\n// hues (default, lighter, darker), or any of the aforementioned prefixed with \"-contrast\".\n//\n// @param $color-map The theme palette (output of mat-palette).\n// @param $hue The hue from the palette to use. If this is a value between 0 and 1, it will\n// be treated as opacity.\n// @param $opacity The alpha channel value for the color.\n@function mat-color($palette, $hue: default, $opacity: null) {\n // If hueKey is a number between zero and one, then it actually contains an\n // opacity value, so recall this function with the default hue and that given opacity.\n @if type-of($hue) == number and $hue >= 0 and $hue <= 1 {\n @return mat-color($palette, default, $hue);\n }\n\n $color: map-get($palette, $hue);\n $opacity: if($opacity == null, opacity($color), $opacity);\n\n @return rgba($color, $opacity);\n}\n\n\n// Creates a container object for a light theme to be given to individual component theme mixins.\n@function mat-light-theme($primary, $accent, $warn: mat-palette($mat-red)) {\n @return (\n primary: $primary,\n accent: $accent,\n warn: $warn,\n is-dark: false,\n foreground: $mat-light-theme-foreground,\n background: $mat-light-theme-background,\n );\n}\n\n\n// Creates a container object for a dark theme to be given to individual component theme mixins.\n@function mat-dark-theme($primary, $accent, $warn: mat-palette($mat-red)) {\n @return (\n primary: $primary,\n accent: $accent,\n warn: $warn,\n is-dark: true,\n foreground: $mat-dark-theme-foreground,\n background: $mat-dark-theme-background,\n );\n}\n\n\n\n$mat-ripple-color-opacity: 0.1;\n\n@mixin mat-ripple() {\n\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\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 cdk-high-contrast {\n display: none;\n }\n }\n}\n\n/* Theme for the ripple elements.*/\n@mixin mat-ripple-theme($theme) {\n $foreground: map_get($theme, foreground);\n $foreground-base: map_get($foreground, base);\n\n .mat-ripple-element {\n background-color: rgba($foreground-base, $mat-ripple-color-opacity);\n }\n}\n\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@function mat-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@function mat-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@function mat-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@function mat-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@function mat-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 @return if($font-family == null, $font-family, unquote($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@mixin mat-typography-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. Note\n // that we need to use interpolation for `font-size/line-height` in order to prevent\n // Sass from dividing the two values.\n font: $font-weight #{$font-size}/#{$line-height} $font-family;\n }\n}\n\n// Converts a typography level into CSS styles.\n@mixin mat-typography-level-to-styles($config, $level) {\n $font-size: mat-font-size($config, $level);\n $font-weight: mat-font-weight($config, $level);\n $line-height: mat-line-height($config, $level);\n $font-family: mat-font-family($config, $level);\n\n @include mat-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family);\n letter-spacing: mat-letter-spacing($config, $level);\n}\n\n\n@mixin mat-option-theme($theme) {\n $foreground: map-get($theme, foreground);\n $background: map-get($theme, background);\n $primary: map-get($theme, primary);\n $accent: map-get($theme, accent);\n $warn: map-get($theme, warn);\n\n .mat-option {\n color: mat-color($foreground, text);\n\n &:hover:not(.mat-option-disabled),\n &:focus:not(.mat-option-disabled) {\n background: mat-color($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: mat-color($background, hover);\n }\n\n &.mat-active {\n background: mat-color($background, hover);\n color: mat-color($foreground, text);\n }\n\n &.mat-option-disabled {\n color: mat-color($foreground, hint-text);\n }\n }\n\n .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {\n color: mat-color($primary);\n }\n\n .mat-accent .mat-option.mat-selected:not(.mat-option-disabled) {\n color: mat-color($accent);\n }\n\n .mat-warn .mat-option.mat-selected:not(.mat-option-disabled) {\n color: mat-color($warn);\n }\n}\n\n@mixin mat-option-typography($config) {\n .mat-option {\n font: {\n family: mat-font-family($config, subheading-2);\n size: mat-font-size($config, subheading-2);\n }\n }\n}\n\n\n\n\n\n@mixin mat-optgroup-theme($theme) {\n $foreground: map-get($theme, foreground);\n\n .mat-optgroup-label {\n color: mat-color($foreground, secondary-text);\n }\n\n .mat-optgroup-disabled .mat-optgroup-label {\n color: mat-color($foreground, hint-text);\n }\n}\n\n@mixin mat-optgroup-typography($config) {\n .mat-optgroup-label {\n @include mat-typography-level-to-styles($config, body-2);\n }\n}\n\n\n\n@mixin mat-pseudo-checkbox-theme($theme) {\n $is-dark-theme: map-get($theme, is-dark);\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\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: mat-color(map-get($theme, foreground), secondary-text);\n\n &::after {\n color: mat-color($background, background);\n }\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.\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: mat-color(map-get($theme, accent));\n }\n\n .mat-primary .mat-pseudo-checkbox-checked,\n .mat-primary .mat-pseudo-checkbox-indeterminate {\n background: mat-color(map-get($theme, primary));\n }\n\n .mat-warn .mat-pseudo-checkbox-checked,\n .mat-warn .mat-pseudo-checkbox-indeterminate {\n background: mat-color(map-get($theme, warn));\n }\n\n .mat-pseudo-checkbox-checked {\n &.mat-pseudo-checkbox-disabled {\n background: $disabled-color;\n }\n }\n}\n\n\n\n// Represents a typography level from the Material design spec.\n@function mat-typography-level(\n $font-size,\n $line-height: $font-size,\n $font-weight: 400,\n $font-family: null,\n $letter-spacing: null) {\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// Represents a collection of typography levels.\n// Defaults come from https://material.io/guidelines/style/typography.html\n@function mat-typography-config(\n $font-family: 'Roboto, \"Helvetica Neue\", sans-serif',\n $display-4: mat-typography-level(112px, 112px, 300),\n $display-3: mat-typography-level(56px, 56px, 400),\n $display-2: mat-typography-level(45px, 48px, 400),\n $display-1: mat-typography-level(34px, 40px, 400),\n $headline: mat-typography-level(24px, 32px, 400),\n $title: mat-typography-level(20px, 32px, 500),\n $subheading-2: mat-typography-level(16px, 28px, 400),\n $subheading-1: mat-typography-level(15px, 24px, 400),\n $body-2: mat-typography-level(14px, 24px, 500),\n $body-1: mat-typography-level(14px, 20px, 400),\n $caption: mat-typography-level(12px, 20px, 400),\n $button: mat-typography-level(14px, 14px, 500),\n // Line-height must be unit-less fraction of the font-size.\n $input: mat-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// Adds the base typography styles, based on a config.\n@mixin mat-base-typography($config, $selector: '.mat-typography') {\n .mat-h1, .mat-headline, #{$selector} h1 {\n @include mat-typography-level-to-styles($config, headline);\n margin: 0 0 16px;\n }\n\n .mat-h2, .mat-title, #{$selector} h2 {\n @include mat-typography-level-to-styles($config, title);\n margin: 0 0 16px;\n }\n\n .mat-h3, .mat-subheading-2, #{$selector} h3 {\n @include mat-typography-level-to-styles($config, subheading-2);\n margin: 0 0 16px;\n }\n\n .mat-h4, .mat-subheading-1, #{$selector} h4 {\n @include mat-typography-level-to-styles($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 mat-typography-font-shorthand(\n mat-font-size($config, body-1) * 0.83,\n mat-font-weight($config, body-1),\n mat-line-height($config, body-1),\n mat-font-family($config, body-1)\n );\n\n margin: 0 0 12px;\n }\n\n .mat-h6, #{$selector} h6 {\n @include mat-typography-font-shorthand(\n mat-font-size($config, body-1) * 0.67,\n mat-font-weight($config, body-1),\n mat-line-height($config, body-1),\n mat-font-family($config, body-1)\n );\n\n margin: 0 0 12px;\n }\n\n .mat-body-strong, .mat-body-2 {\n @include mat-typography-level-to-styles($config, body-2);\n }\n\n .mat-body, .mat-body-1, #{$selector} {\n @include mat-typography-level-to-styles($config, body-1);\n\n p {\n margin: 0 0 12px;\n }\n }\n\n .mat-small, .mat-caption {\n @include mat-typography-level-to-styles($config, caption);\n }\n\n // Note: The spec doesn't mention letter spacing. The value comes from\n // eyeballing it until it looked exactly like the spec examples.\n .mat-display-4, #{$selector} .mat-display-4 {\n @include mat-typography-level-to-styles($config, display-4);\n margin: 0 0 56px;\n letter-spacing: -0.05em;\n }\n\n .mat-display-3, #{$selector} .mat-display-3 {\n @include mat-typography-level-to-styles($config, display-3);\n margin: 0 0 64px;\n letter-spacing: -0.02em;\n }\n\n .mat-display-2, #{$selector} .mat-display-2 {\n @include mat-typography-level-to-styles($config, display-2);\n margin: 0 0 64px;\n letter-spacing: -0.005em;\n }\n\n .mat-display-1, #{$selector} .mat-display-1 {\n @include mat-typography-level-to-styles($config, display-1);\n margin: 0 0 64px;\n }\n}\n\n\n\n\n@mixin mat-autocomplete-theme($theme) {\n $foreground: map-get($theme, foreground);\n $background: map-get($theme, background);\n\n .mat-autocomplete-panel {\n @include _mat-theme-overridable-elevation(4, $theme);\n background: mat-color($background, card);\n color: mat-color($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: mat-color($background, card);\n\n &:not(.mat-option-disabled) {\n color: mat-color($foreground, text);\n }\n }\n }\n\n}\n\n@mixin mat-autocomplete-typography($config) { }\n\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\n\n\n\n\n$mat-badge-font-size: 12px;\n$mat-badge-font-weight: 600;\n$mat-badge-default-size: 22px !default;\n$mat-badge-small-size: $mat-badge-default-size - 6;\n$mat-badge-large-size: $mat-badge-default-size + 6;\n\n// Mixin for building offset given different sizes\n@mixin _mat-badge-size($size) {\n .mat-badge-content {\n width: $size;\n height: $size;\n line-height: $size;\n\n @include cdk-high-contrast {\n outline: solid 1px;\n border-radius: 0;\n }\n }\n\n &.mat-badge-above {\n .mat-badge-content {\n top: -$size / 2;\n }\n }\n\n &.mat-badge-below {\n .mat-badge-content {\n bottom: -$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: -$size / 2;\n }\n }\n\n [dir='rtl'] &.mat-badge-before {\n .mat-badge-content {\n left: auto;\n right: -$size / 2;\n }\n }\n\n &.mat-badge-after {\n .mat-badge-content {\n right: -$size / 2;\n }\n }\n\n [dir='rtl'] &.mat-badge-after {\n .mat-badge-content {\n right: auto;\n left: -$size / 2;\n }\n }\n }\n}\n\n@mixin mat-badge-theme($theme) {\n $accent: map-get($theme, accent);\n $warn: map-get($theme, warn);\n $primary: map-get($theme, primary);\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-badge-content {\n color: mat-color($primary, default-contrast);\n background: mat-color($primary);\n }\n\n .mat-badge-accent {\n .mat-badge-content {\n background: mat-color($accent);\n color: mat-color($accent, default-contrast);\n }\n }\n\n .mat-badge-warn {\n .mat-badge-content {\n color: mat-color($warn, default-contrast);\n background: mat-color($warn);\n }\n }\n\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-disabled {\n .mat-badge-content {\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. We convert it into a solid\n // color by taking the opacity from the rgba value and using the value to determine the\n // percentage of the background to put into foreground when mixing the colors together.\n $app-background: mat-color($background, 'background');\n $badge-color: mat-color($foreground, disabled-button);\n $badge-opacity: opacity($badge-color);\n background: mix($app-background, rgba($badge-color, 1), (1 - $badge-opacity) * 100%);\n color: mat-color($foreground, disabled-text);\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 // 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 _mat-badge-size($mat-badge-small-size);\n }\n .mat-badge-medium {\n @include _mat-badge-size($mat-badge-default-size);\n }\n .mat-badge-large {\n @include _mat-badge-size($mat-badge-large-size);\n }\n}\n\n@mixin mat-badge-typography($config) {\n .mat-badge-content {\n font-weight: $mat-badge-font-weight;\n font-size: $mat-badge-font-size;\n font-family: mat-font-family($config);\n }\n\n .mat-badge-small .mat-badge-content {\n font-size: $mat-badge-font-size / 2;\n }\n\n .mat-badge-large .mat-badge-content {\n font-size: $mat-badge-font-size * 2;\n }\n}\n\n\n\n\n\n@mixin mat-bottom-sheet-theme($theme) {\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-bottom-sheet-container {\n @include _mat-theme-elevation(16, $theme);\n background: mat-color($background, dialog);\n color: mat-color($foreground, text);\n }\n}\n\n@mixin mat-bottom-sheet-typography($config) {\n .mat-bottom-sheet-container {\n @include mat-typography-level-to-styles($config, body-1);\n }\n}\n\n\n\n\n\n// Applies a focus style to an mat-button element for each of the supported palettes.\n@mixin _mat-button-focus-overlay-color($theme) {\n $primary: map-get($theme, primary);\n $accent: map-get($theme, accent);\n $warn: map-get($theme, warn);\n\n &.mat-primary .mat-button-focus-overlay {\n background-color: mat-color($primary);\n }\n\n &.mat-accent .mat-button-focus-overlay {\n background-color: mat-color($accent);\n }\n\n &.mat-warn .mat-button-focus-overlay {\n background-color: mat-color($warn);\n }\n\n &[disabled] .mat-button-focus-overlay {\n background-color: transparent;\n }\n}\n\n@mixin _mat-button-ripple-color($theme, $hue, $opacity: 0.1) {\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 background-color: mat-color($primary, $hue, $opacity);\n }\n\n &.mat-accent .mat-ripple-element {\n background-color: mat-color($accent, $hue, $opacity);\n }\n\n &.mat-warn .mat-ripple-element {\n background-color: mat-color($warn, $hue, $opacity);\n }\n}\n\n// Applies a property to an mat-button element for each of the supported palettes.\n@mixin _mat-button-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}: mat-color($primary, $hue);\n }\n &.mat-accent {\n #{$property}: mat-color($accent, $hue);\n }\n &.mat-warn {\n #{$property}: mat-color($warn, $hue);\n }\n\n &.mat-primary, &.mat-accent, &.mat-warn, &[disabled] {\n &[disabled] {\n $palette: if($property == 'color', $foreground, $background);\n #{$property}: mat-color($palette, disabled-button);\n }\n }\n}\n\n@mixin mat-button-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-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 _mat-button-theme-property($theme, 'color', default);\n @include _mat-button-focus-overlay-color($theme);\n\n // Setup the ripple color to be based on the color palette. The opacity can be a bit weaker\n // than for icon-buttons, because normal and stroked buttons have a focus overlay.\n @include _mat-button-ripple-color($theme, default);\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([disabled]) {\n border-color: mat-color($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: mat-color($foreground, text);\n background-color: mat-color($background, raised-button);\n\n @include _mat-button-theme-property($theme, 'color', default-contrast);\n @include _mat-button-theme-property($theme, 'background-color', default);\n @include _mat-button-ripple-color($theme, default-contrast);\n }\n\n // Since icon buttons don't have a focus overlay, the ripple opacity should be the higher\n // than the default value.\n .mat-icon-button {\n @include _mat-button-ripple-color($theme, default, 0.2);\n }\n\n .mat-stroked-button, .mat-flat-button {\n @include _mat-theme-overridable-elevation(0, $theme);\n }\n\n .mat-raised-button {\n @include _mat-theme-overridable-elevation(2, $theme);\n\n &:not([disabled]):active {\n @include _mat-theme-overridable-elevation(8, $theme);\n }\n\n &[disabled] {\n @include _mat-theme-overridable-elevation(0, $theme);\n }\n }\n\n .mat-fab, .mat-mini-fab {\n @include _mat-theme-overridable-elevation(6, $theme);\n\n &:not([disabled]):active {\n @include _mat-theme-overridable-elevation(12, $theme);\n }\n\n &[disabled] {\n @include _mat-theme-overridable-elevation(0, $theme);\n }\n }\n}\n\n@mixin mat-button-typography($config) {\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: mat-font-family($config, button);\n size: mat-font-size($config, button);\n weight: mat-font-weight($config, button);\n }\n }\n}\n\n\n\n\n\n\n@mixin mat-button-toggle-theme($theme) {\n $foreground: map-get($theme, foreground);\n $background: map-get($theme, background);\n $divider-color: mat-color($foreground, divider);\n\n .mat-button-toggle-standalone,\n .mat-button-toggle-group {\n @include _mat-theme-elevation(2, $theme);\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: mat-color($foreground, hint-text);\n\n .mat-button-toggle-focus-overlay {\n background-color: mat-color($background, focused-button);\n }\n }\n\n .mat-button-toggle-appearance-standard {\n color: mat-color($foreground, text);\n background: mat-color($background, card);\n\n .mat-button-toggle-focus-overlay {\n background-color: mat-color($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: mat-color($background, selected-button);\n color: mat-color($foreground, secondary-text);\n\n &.mat-button-toggle-appearance-standard {\n color: mat-color($foreground, text);\n }\n }\n\n .mat-button-toggle-disabled {\n color: mat-color($foreground, disabled-button);\n background-color: mat-color($background, disabled-button-toggle);\n\n &.mat-button-toggle-appearance-standard {\n background: mat-color($background, card);\n }\n\n &.mat-button-toggle-checked {\n background-color: mat-color($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 mat-button-toggle-typography($config) {\n .mat-button-toggle {\n font-family: mat-font-family($config);\n }\n}\n\n\n\n\n\n\n\n@mixin mat-card-theme($theme) {\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-card {\n @include _mat-theme-overridable-elevation(1, $theme);\n background: mat-color($background, card);\n color: mat-color($foreground, text);\n\n // Needs extra specificity to be able to override the elevation selectors.\n &.mat-card-flat {\n @include _mat-theme-overridable-elevation(0, $theme);\n }\n }\n\n .mat-card-subtitle {\n color: mat-color($foreground, secondary-text);\n }\n}\n\n@mixin mat-card-typography($config) {\n .mat-card {\n font-family: mat-font-family($config);\n }\n\n .mat-card-title {\n font: {\n size: mat-font-size($config, headline);\n weight: mat-font-weight($config, title);\n }\n }\n\n .mat-card-header .mat-card-title {\n font-size: mat-font-size($config, title);\n }\n\n .mat-card-subtitle,\n .mat-card-content {\n font-size: mat-font-size($config, body-1);\n }\n}\n\n\n\n\n\n\n@mixin mat-checkbox-theme($theme) {\n $is-dark-theme: map-get($theme, is-dark);\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\n\n // The color of the checkbox's checkmark / mixedmark.\n $checkbox-mark-color: mat-color($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: mat-color(map-get($theme, 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 @include cdk-high-contrast(black-on-white) {\n // Having the one above be !important ends up overriding the browser's automatic\n // color inversion so we need to re-invert it ourselves for black-on-white.\n stroke: #000 !important;\n }\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: mat-color($primary);\n }\n\n &.mat-accent .mat-checkbox-background {\n background-color: mat-color($accent);\n }\n\n &.mat-warn .mat-checkbox-background {\n background-color: mat-color($warn);\n }\n }\n\n .mat-checkbox-disabled {\n &.mat-checkbox-checked:not(.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: $disabled-color;\n }\n\n @include cdk-high-contrast {\n opacity: 0.5;\n }\n }\n\n // This one is moved down here so it can target both\n // the theme colors and the disabled state.\n @include cdk-high-contrast {\n .mat-checkbox-background {\n // Needs to be removed because it hides the checkbox outline.\n background: none;\n }\n }\n\n .mat-checkbox:not(.mat-checkbox-disabled) {\n &.mat-primary .mat-checkbox-ripple .mat-ripple-element {\n background-color: mat-color($primary);\n }\n\n &.mat-accent .mat-checkbox-ripple .mat-ripple-element {\n background-color: mat-color($accent);\n }\n\n &.mat-warn .mat-checkbox-ripple .mat-ripple-element {\n background-color: mat-color($warn);\n }\n }\n}\n\n@mixin mat-checkbox-typography($config) {\n .mat-checkbox {\n font-family: mat-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: mat-line-height($config, body-2);\n }\n}\n\n\n\n\n\n\n$mat-chip-remove-font-size: 18px;\n\n@mixin mat-chips-theme-color($color) {\n @include mat-chips-color(mat-color($color, default-contrast), mat-color($color));\n}\n\n@mixin mat-chips-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 .mat-chip-remove:hover {\n opacity: 0.54;\n }\n}\n\n@mixin mat-chips-theme($theme) {\n $is-dark-theme: map-get($theme, is-dark);\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 $unselected-background: mat-color($background, unselected-chip);\n $unselected-foreground: mat-color($foreground, text);\n\n\n .mat-chip.mat-standard-chip {\n @include mat-chips-color($unselected-foreground, $unselected-background);\n\n &:focus {\n @include _mat-theme-elevation(3, $theme);\n }\n }\n\n .mat-chip.mat-standard-chip.mat-chip-selected {\n\n &.mat-primary {\n @include mat-chips-theme-color($primary);\n }\n\n &.mat-warn {\n @include mat-chips-theme-color($warn);\n }\n\n &.mat-accent {\n @include mat-chips-theme-color($accent);\n }\n }\n}\n\n@mixin mat-chips-typography($config) {\n .mat-chip {\n font-size: mat-font-size($config, body-2);\n font-weight: mat-font-weight($config, body-2);\n\n .mat-chip-trailing-icon.mat-icon,\n .mat-chip-remove.mat-icon {\n font-size: $mat-chip-remove-font-size;\n }\n }\n}\n\n\n\n\n\n@mixin mat-table-theme($theme) {\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-table {\n background: mat-color($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: mat-color($foreground, divider);\n }\n\n .mat-header-cell {\n color: mat-color($foreground, secondary-text);\n }\n\n .mat-cell, .mat-footer-cell {\n color: mat-color($foreground, text);\n }\n}\n\n@mixin mat-table-typography($config) {\n .mat-table {\n font-family: mat-font-family($config);\n }\n\n .mat-header-cell {\n font-size: mat-font-size($config, caption);\n font-weight: mat-font-weight($config, body-2);\n }\n\n .mat-cell, .mat-footer-cell {\n font-size: mat-font-size($config, body-1);\n }\n}\n\n\n\n\n\n\n\n$mat-datepicker-selected-today-box-shadow-width: 1px;\n$mat-datepicker-selected-fade-amount: 0.6;\n$mat-datepicker-today-fade-amount: 0.2;\n$mat-calendar-body-font-size: 13px !default;\n$mat-calendar-weekday-table-font-size: 11px !default;\n\n@mixin _mat-datepicker-color($palette) {\n .mat-calendar-body-selected {\n background-color: mat-color($palette);\n color: mat-color($palette, default-contrast);\n }\n\n .mat-calendar-body-disabled > .mat-calendar-body-selected {\n background-color: fade-out(mat-color($palette), $mat-datepicker-selected-fade-amount);\n }\n\n .mat-calendar-body-today.mat-calendar-body-selected {\n box-shadow: inset 0 0 0 $mat-datepicker-selected-today-box-shadow-width\n mat-color($palette, default-contrast);\n }\n}\n\n@mixin mat-datepicker-theme($theme) {\n $foreground: map-get($theme, foreground);\n $background: map-get($theme, background);\n\n .mat-calendar-arrow {\n border-top-color: mat-color($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: mat-color($foreground, icon);\n }\n\n .mat-calendar-table-header {\n color: mat-color($foreground, hint-text);\n }\n\n .mat-calendar-table-header-divider::after {\n background: mat-color($foreground, divider);\n }\n\n .mat-calendar-body-label {\n color: mat-color($foreground, secondary-text);\n }\n\n .mat-calendar-body-cell-content {\n color: mat-color($foreground, text);\n border-color: transparent;\n }\n\n .mat-calendar-body-disabled > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {\n color: mat-color($foreground, disabled-text);\n }\n\n .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover,\n .cdk-keyboard-focused .mat-calendar-body-active,\n .cdk-program-focused .mat-calendar-body-active {\n & > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {\n background-color: mat-color($background, hover);\n }\n }\n\n .mat-calendar-body-today:not(.mat-calendar-body-selected) {\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: mat-color($foreground, hint-text);\n }\n\n .mat-calendar-body-disabled > .mat-calendar-body-today:not(.mat-calendar-body-selected) {\n border-color: fade-out(mat-color($foreground, hint-text), $mat-datepicker-today-fade-amount);\n }\n\n @include _mat-datepicker-color(map-get($theme, primary));\n\n .mat-datepicker-content {\n @include _mat-theme-elevation(4, $theme);\n background-color: mat-color($background, card);\n color: mat-color($foreground, text);\n\n &.mat-accent {\n @include _mat-datepicker-color(map-get($theme, accent));\n }\n\n &.mat-warn {\n @include _mat-datepicker-color(map-get($theme, warn));\n }\n }\n\n .mat-datepicker-content-touch {\n @include _mat-theme-elevation(0, $theme);\n }\n\n .mat-datepicker-toggle-active {\n color: mat-color(map-get($theme, primary));\n\n &.mat-accent {\n color: mat-color(map-get($theme, accent));\n }\n\n &.mat-warn {\n color: mat-color(map-get($theme, warn));\n }\n }\n}\n\n@mixin mat-datepicker-typography($config) {\n .mat-calendar {\n font-family: mat-font-family($config);\n }\n\n .mat-calendar-body {\n font-size: $mat-calendar-body-font-size;\n }\n\n .mat-calendar-body-label,\n .mat-calendar-period-button {\n font: {\n size: mat-font-size($config, button);\n weight: mat-font-weight($config, button);\n }\n }\n\n .mat-calendar-table-header th {\n font: {\n size: $mat-calendar-weekday-table-font-size;\n weight: mat-font-weight($config, body-1);\n }\n }\n}\n\n\n\n\n\n\n\n@mixin mat-dialog-theme($theme) {\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-dialog-container {\n @include _mat-theme-elevation(24, $theme);\n background: mat-color($background, dialog);\n color: mat-color($foreground, text);\n }\n}\n\n@mixin mat-dialog-typography($config) {\n .mat-dialog-title {\n @include mat-typography-level-to-styles($config, title);\n }\n}\n\n\n\n\n\n\n@mixin mat-expansion-panel-theme($theme) {\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-expansion-panel {\n @include _mat-theme-overridable-elevation(2, $theme);\n background: mat-color($background, card);\n color: mat-color($foreground, text);\n }\n\n .mat-action-row {\n border-top-color: mat-color($foreground, divider);\n }\n\n .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header {\n &:not([aria-disabled='true']) {\n &.cdk-keyboard-focused,\n &.cdk-program-focused,\n &:hover {\n background: mat-color($background, hover);\n }\n }\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: mat-color($background, card);\n }\n }\n\n .mat-expansion-panel-header-title {\n color: mat-color($foreground, text);\n }\n\n .mat-expansion-panel-header-description,\n .mat-expansion-indicator::after {\n color: mat-color($foreground, secondary-text);\n }\n\n .mat-expansion-panel-header[aria-disabled='true'] {\n color: mat-color($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 mat-expansion-panel-typography($config) {\n .mat-expansion-panel-header {\n font: {\n family: mat-font-family($config, subheading-1);\n size: mat-font-size($config, subheading-1);\n weight: mat-font-weight($config, subheading-1);\n }\n }\n\n .mat-expansion-panel-content {\n @include mat-typography-level-to-styles($config, body-1);\n }\n}\n\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 mat-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 mat-line-base($secondary-font-size) {\n .mat-line {\n @include mat-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 mat-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 mat-line-wrapper-base() {\n @include mat-normalize-text();\n\n display: flex;\n flex-direction: column;\n width: 100%;\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\n\n\n// Include this empty mixin for consistency with the other components.\n@mixin mat-grid-list-theme($theme) { }\n\n@mixin mat-grid-list-typography($config) {\n .mat-grid-tile-header,\n .mat-grid-tile-footer {\n @include mat-line-base(mat-font-size($config, caption));\n font-size: mat-font-size($config, body-1);\n }\n}\n\n\n\n\n// Include this empty mixin for consistency with the other components.\n@mixin mat-icon-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-icon {\n &.mat-primary {\n color: mat-color($primary);\n }\n\n &.mat-accent {\n color: mat-color($accent);\n }\n\n &.mat-warn {\n color: mat-color($warn);\n }\n }\n}\n\n@mixin mat-icon-typography($config) { }\n\n\n\n\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 mat-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 _mat-control-placeholder-color($theme) {\n $foreground: map-get($theme, foreground);\n $is-dark-theme: map-get($theme, is-dark);\n @return mat-color($foreground, secondary-text, if($is-dark-theme, 0.5, 0.42));\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 -ms-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 &:-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/* stylelint-enable */\n\n\n\n@mixin mat-input-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\n .mat-form-field-type-mat-native-select .mat-form-field-infix::after {\n color: mat-color($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: mat-color($foreground, disabled-text);\n }\n\n .mat-input-element {\n caret-color: mat-color($primary);\n\n @include input-placeholder {\n color: _mat-control-placeholder-color($theme);\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($theme, is-dark)) {\n option {\n color: $dark-primary-text;\n }\n\n option:disabled {\n color: $dark-disabled-text;\n }\n }\n }\n\n .mat-accent .mat-input-element {\n caret-color: mat-color($accent);\n }\n\n .mat-warn .mat-input-element,\n .mat-form-field-invalid .mat-input-element {\n caret-color: mat-color($warn);\n }\n\n .mat-form-field-type-mat-native-select.mat-form-field-invalid .mat-form-field-infix::after {\n color: mat-color($warn);\n }\n}\n\n@mixin mat-input-typography($config) {\n // The unit-less line-height from the font config.\n $line-height: mat-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: ($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: -$line-spacing * 1em;\n }\n}\n\n\n\n\n\n\n\n@mixin mat-list-theme($theme) {\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-list, .mat-nav-list, .mat-selection-list {\n .mat-list-item {\n color: mat-color($foreground, text);\n }\n\n .mat-list-option {\n color: mat-color($foreground, text);\n }\n\n .mat-subheader {\n color: mat-color($foreground, secondary-text);\n }\n }\n\n .mat-list-item-disabled {\n background-color: mat-color($background, disabled-list-option);\n }\n\n .mat-list-option,\n .mat-nav-list .mat-list-item {\n &:hover, &:focus {\n background: mat-color($background, 'hover');\n }\n }\n}\n\n@mixin mat-list-typography($config) {\n $font-family: mat-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, .mat-nav-list, .mat-selection-list {\n .mat-list-item {\n font-size: mat-font-size($config, subheading-2);\n @include mat-line-base(mat-font-size($config, body-1));\n }\n\n .mat-list-option {\n font-size: mat-font-size($config, subheading-2);\n @include mat-line-base(mat-font-size($config, body-1));\n }\n\n .mat-subheader {\n font-family: mat-font-family($config, body-2);\n font-size: mat-font-size($config, body-2);\n font-weight: mat-font-weight($config, body-2);\n }\n }\n\n // Dense list\n .mat-list[dense], .mat-nav-list[dense], .mat-selection-list[dense] {\n .mat-list-item {\n font-size: mat-font-size($config, caption);\n @include mat-line-base(mat-font-size($config, caption));\n }\n\n .mat-list-option {\n font-size: mat-font-size($config, caption);\n @include mat-line-base(mat-font-size($config, caption));\n }\n\n .mat-subheader {\n font-family: $font-family;\n font-size: mat-font-size($config, caption);\n font-weight: mat-font-weight($config, body-2);\n }\n }\n}\n\n\n\n\n\n\n\n@mixin mat-menu-theme($theme) {\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-menu-panel {\n @include _mat-theme-overridable-elevation(4, $theme);\n background: mat-color($background, 'card');\n }\n\n .mat-menu-item {\n background: transparent;\n color: mat-color($foreground, 'text');\n\n &[disabled] {\n &, &::after {\n color: mat-color($foreground, 'disabled');\n }\n }\n }\n\n .mat-menu-item .mat-icon:not([color]),\n .mat-menu-item-submenu-trigger::after {\n color: mat-color($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: mat-color($background, 'hover');\n }\n }\n}\n\n@mixin mat-menu-typography($config) {\n .mat-menu-item {\n font: {\n family: mat-font-family($config, body-1);\n size: mat-font-size($config, body-1);\n weight: mat-font-weight($config, body-1);\n }\n }\n}\n\n\n\n\n\n\n@mixin mat-paginator-theme($theme) {\n $foreground: map-get($theme, foreground);\n $background: map-get($theme, background);\n\n .mat-paginator {\n background: mat-color($background, 'card');\n }\n\n .mat-paginator,\n .mat-paginator-page-size .mat-select-trigger {\n color: mat-color($foreground, secondary-text);\n }\n\n .mat-paginator-decrement,\n .mat-paginator-increment {\n border-top: 2px solid mat-color($foreground, 'icon');\n border-right: 2px solid mat-color($foreground, 'icon');\n }\n\n .mat-paginator-first,\n .mat-paginator-last {\n border-top: 2px solid mat-color($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: mat-color($foreground, 'disabled');\n }\n }\n}\n\n@mixin mat-paginator-typography($config) {\n .mat-paginator,\n .mat-paginator-page-size .mat-select-trigger {\n font: {\n family: mat-font-family($config, caption);\n size: mat-font-size($config, caption);\n }\n }\n}\n\n\n\n\n\n@mixin mat-progress-bar-theme($theme) {\n $primary: map-get($theme, primary);\n $accent: map-get($theme, accent);\n $warn: map-get($theme, warn);\n\n .mat-progress-bar-background {\n fill: mat-color($primary, lighter);\n }\n\n .mat-progress-bar-buffer {\n background-color: mat-color($primary, lighter);\n }\n\n .mat-progress-bar-fill::after {\n background-color: mat-color($primary);\n }\n\n .mat-progress-bar.mat-accent {\n .mat-progress-bar-background {\n fill: mat-color($accent, lighter);\n }\n\n .mat-progress-bar-buffer {\n background-color: mat-color($accent, lighter);\n }\n\n .mat-progress-bar-fill::after {\n background-color: mat-color($accent);\n }\n }\n\n .mat-progress-bar.mat-warn {\n .mat-progress-bar-background {\n fill: mat-color($warn, lighter);\n }\n\n .mat-progress-bar-buffer {\n background-color: mat-color($warn, lighter);\n }\n\n .mat-progress-bar-fill::after {\n background-color: mat-color($warn);\n }\n }\n}\n\n@mixin mat-progress-bar-typography($config) { }\n\n\n\n\n\n\n@mixin mat-progress-spinner-theme($theme) {\n $primary: map-get($theme, primary);\n $accent: map-get($theme, accent);\n $warn: map-get($theme, warn);\n\n .mat-progress-spinner, .mat-spinner {\n circle {\n stroke: mat-color($primary);\n }\n\n &.mat-accent circle {\n stroke: mat-color($accent);\n }\n\n &.mat-warn circle {\n stroke: mat-color($warn);\n }\n }\n}\n\n@mixin mat-progress-spinner-typography($config) { }\n\n\n\n\n\n@mixin _mat-radio-color($palette) {\n &.mat-radio-checked .mat-radio-outer-circle {\n border-color: mat-color($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: mat-color($palette);\n }\n}\n\n@mixin mat-radio-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-radio-outer-circle {\n border-color: mat-color($foreground, secondary-text);\n }\n\n .mat-radio-button {\n &.mat-primary {\n @include _mat-radio-color($primary);\n }\n\n &.mat-accent {\n @include _mat-radio-color($accent);\n }\n\n &.mat-warn {\n @include _mat-radio-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: mat-color($foreground, disabled);\n }\n\n .mat-radio-ripple .mat-ripple-element,\n .mat-radio-inner-circle {\n background-color: mat-color($foreground, disabled);\n }\n\n .mat-radio-label-content {\n color: mat-color($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 mat-radio-typography($config) {\n .mat-radio-button {\n font-family: mat-font-family($config);\n }\n}\n\n\n\n\n\n\n\n\n@mixin mat-select-theme($theme) {\n $foreground: map-get($theme, foreground);\n $background: map-get($theme, background);\n $primary: map-get($theme, primary);\n $accent: map-get($theme, accent);\n $warn: map-get($theme, warn);\n\n .mat-select-value {\n color: mat-color($foreground, text);\n }\n\n .mat-select-placeholder {\n color: _mat-control-placeholder-color($theme);\n }\n\n .mat-select-disabled .mat-select-value {\n color: mat-color($foreground, disabled-text);\n }\n\n .mat-select-arrow {\n color: mat-color($foreground, secondary-text);\n }\n\n .mat-select-panel {\n background: mat-color($background, card);\n @include _mat-theme-overridable-elevation(4, $theme);\n\n .mat-option.mat-selected:not(.mat-option-multiple) {\n background: mat-color($background, hover, 0.12);\n }\n }\n\n .mat-form-field {\n &.mat-focused {\n &.mat-primary .mat-select-arrow {\n color: mat-color($primary);\n }\n\n &.mat-accent .mat-select-arrow {\n color: mat-color($accent);\n }\n\n &.mat-warn .mat-select-arrow {\n color: mat-color($warn);\n }\n }\n\n .mat-select.mat-select-invalid .mat-select-arrow {\n color: mat-color($warn);\n }\n\n .mat-select.mat-select-disabled .mat-select-arrow {\n color: mat-color($foreground, disabled-text);\n }\n }\n}\n\n@mixin mat-select-typography($config) {\n // The unit-less line-height from the font config.\n $line-height: mat-line-height($config, input);\n\n .mat-select {\n font-family: mat-font-family($config);\n }\n\n .mat-select-trigger {\n height: $line-height * 1em;\n }\n}\n\n\n\n\n\n\n@mixin mat-sidenav-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 // 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 $drawer-backdrop-color: invert(mat-color($background, card, 0.6));\n $drawer-background-color: mat-color($background, dialog);\n $drawer-container-background-color: mat-color($background, background);\n $drawer-push-background-color: mat-color($background, dialog);\n $drawer-side-border: solid 1px mat-color($foreground, divider);\n\n .mat-drawer-container {\n background-color: $drawer-container-background-color;\n color: mat-color($foreground, text);\n }\n\n .mat-drawer {\n background-color: $drawer-background-color;\n color: mat-color($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 _mat-theme-elevation(16, $theme);\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 background-color: $drawer-backdrop-color;\n }\n}\n\n@mixin mat-sidenav-typography($config) { }\n\n\n\n\n\n\n@mixin _mat-slide-toggle-checked($palette, $thumb-checked-hue) {\n // Do not apply the checked colors if the toggle is disabled, because the\n // specificity would be to high for the disabled styles.\n &.mat-checked:not(.mat-disabled) {\n .mat-slide-toggle-thumb {\n background-color: mat-color($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: mat-color($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: mat-color($palette, $thumb-checked-hue);\n }\n }\n}\n\n@mixin mat-slide-toggle-theme($theme) {\n $is-dark: map_get($theme, is-dark);\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 // 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 keep the old behavior that is based on the previous\n // specifications. See: https://material.io/design/components/selection-controls.html#specs\n $thumb-unchecked-hue: if($is-dark, 400, 50);\n $thumb-checked-hue: if($is-dark, 200, default);\n $thumb-disabled-hue: if($is-dark, 800, 400);\n\n $bar-unchecked-color: mat-color($foreground, disabled);\n $bar-disabled-color: if($is-dark, rgba(white, 0.12), rgba(black, 0.1));\n\n $ripple-unchecked-color: mat-color($foreground, base);\n\n .mat-slide-toggle {\n @include _mat-slide-toggle-checked($accent, $thumb-checked-hue);\n\n &.mat-primary {\n @include _mat-slide-toggle-checked($primary, $thumb-checked-hue);\n }\n\n &.mat-warn {\n @include _mat-slide-toggle-checked($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-disabled {\n .mat-slide-toggle-thumb {\n // The thumb of the slide-toggle always uses the hue 400 of the grey palette in dark\n // or light themes. Since this is very specific to the slide-toggle component, we're not\n // providing it in the background palette.\n background-color: mat-color($mat-grey, $thumb-disabled-hue);\n }\n .mat-slide-toggle-bar {\n background-color: $bar-disabled-color;\n }\n }\n\n .mat-slide-toggle-thumb {\n @include _mat-theme-elevation(1, $theme);\n background-color: mat-color($mat-grey, $thumb-unchecked-hue);\n }\n\n .mat-slide-toggle-bar {\n background-color: $bar-unchecked-color;\n }\n}\n\n@mixin mat-slide-toggle-typography($config) {\n .mat-slide-toggle-content {\n font-family: mat-font-family($config);\n }\n}\n\n\n\n\n\n@mixin _mat-slider-inner-content-theme($palette) {\n .mat-slider-track-fill,\n .mat-slider-thumb,\n .mat-slider-thumb-label {\n background-color: mat-color($palette);\n }\n\n .mat-slider-thumb-label-text {\n color: mat-color($palette, default-contrast);\n }\n}\n\n@mixin mat-slider-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-slider-off-color: mat-color($foreground, slider-off);\n $mat-slider-off-focused-color: mat-color($foreground, slider-off-active);\n $mat-slider-disabled-color: mat-color($foreground, slider-off);\n $mat-slider-labeled-min-value-thumb-color: mat-color($foreground, slider-min);\n $mat-slider-labeled-min-value-thumb-label-color: mat-color($foreground, slider-off);\n $mat-slider-focus-ring-color: mat-color($accent, default, 0.2);\n $mat-slider-focus-ring-min-value-color: mat-color($foreground, base, 0.12);\n $mat-slider-tick-color: mat-color($foreground, base, 0.7);\n $mat-slider-tick-size: 2px;\n\n .mat-slider-track-background {\n background-color: $mat-slider-off-color;\n }\n\n .mat-primary {\n @include _mat-slider-inner-content-theme($primary);\n }\n\n .mat-accent {\n @include _mat-slider-inner-content-theme($accent);\n }\n\n .mat-warn {\n @include _mat-slider-inner-content-theme($warn);\n }\n\n .mat-slider-focus-ring {\n background-color: $mat-slider-focus-ring-color;\n }\n\n .mat-slider:hover,\n .cdk-focused {\n .mat-slider-track-background {\n background-color: $mat-slider-off-focused-color;\n }\n }\n\n .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-min-value {\n .mat-slider-focus-ring {\n background-color: $mat-slider-focus-ring-min-value-color;\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\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\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}\n\n@mixin mat-slider-typography($config) {\n .mat-slider-thumb-label-text {\n font: {\n family: mat-font-family($config);\n size: mat-font-size($config, caption);\n weight: mat-font-weight($config, body-2);\n }\n }\n}\n\n\n\n\n\n@mixin mat-stepper-theme($theme) {\n $foreground: map-get($theme, foreground);\n $background: map-get($theme, background);\n $primary: map-get($theme, primary);\n $warn: map-get($theme, warn);\n\n .mat-step-header {\n &.cdk-keyboard-focused,\n &.cdk-program-focused,\n &:hover {\n background-color: mat-color($background, hover);\n }\n\n .mat-step-label,\n .mat-step-optional {\n color: mat-color($foreground, disabled-text);\n }\n\n .mat-step-icon {\n background-color: mat-color($foreground, disabled-text);\n color: mat-color($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: mat-color($primary);\n color: mat-color($primary, default-contrast);\n }\n\n .mat-step-icon-state-error {\n background-color: transparent;\n color: mat-color($warn);\n }\n\n .mat-step-label.mat-step-label-active {\n color: mat-color($foreground, text);\n }\n\n .mat-step-label.mat-step-label-error {\n color: mat-color($warn);\n }\n }\n\n .mat-stepper-horizontal, .mat-stepper-vertical {\n background-color: mat-color($background, card);\n }\n\n .mat-stepper-vertical-line::before {\n border-left-color: mat-color($foreground, divider);\n }\n\n .mat-stepper-horizontal-line {\n border-top-color: mat-color($foreground, divider);\n }\n}\n\n@mixin mat-stepper-typography($config) {\n .mat-stepper-vertical, .mat-stepper-horizontal {\n font-family: mat-font-family($config);\n }\n\n .mat-step-label {\n font: {\n size: mat-font-size($config, body-1);\n weight: mat-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: mat-font-size($config, body-2);\n }\n\n .mat-step-label-selected {\n font: {\n size: mat-font-size($config, body-2);\n weight: mat-font-weight($config, body-2);\n };\n }\n}\n\n@mixin mat-sort-theme($theme) {\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-sort-header-arrow {\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-trasparent color from the theme directly. We convert it into a solid\n // color by taking the opacity from the rgba value and using the value to determine the\n // percentage of the background to put into foreground when mixing the colors together.\n $table-background: mat-color($background, 'card');\n $text-color: mat-color($foreground, secondary-text);\n $text-opacity: opacity($text-color);\n color: mix($table-background, rgba($text-color, 1), (1 - $text-opacity) * 100%);\n }\n}\n\n@mixin mat-sort-typography($config) { }\n\n\n\n\n\n@mixin mat-tabs-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 $header-border: 1px solid mat-color($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: mat-color($foreground, text);\n\n &.mat-tab-disabled {\n color: mat-color($foreground, disabled-text);\n }\n }\n\n .mat-tab-header-pagination-chevron {\n border-color: mat-color($foreground, text);\n }\n\n .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n border-color: mat-color($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 _mat-tab-label-focus($color);\n @include _mat-ink-bar($color);\n\n // Override ink bar when background color is the same\n &.mat-background-#{$name} {\n @include _mat-ink-bar($color, default-contrast);\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 _mat-tab-label-focus($color);\n @include _mat-tabs-background($color);\n }\n }\n }\n}\n\n@mixin _mat-ink-bar($color, $hue: default) {\n .mat-ink-bar {\n background-color: mat-color($color, $hue);\n }\n}\n\n@mixin _mat-tab-label-focus($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: mat-color($tab-focus-color, lighter, 0.3);\n }\n }\n }\n}\n\n@mixin _mat-tabs-background($background-color) {\n // Set background color for the tab group\n .mat-tab-header, .mat-tab-links {\n background-color: mat-color($background-color);\n }\n\n // Set labels to contrast against background\n .mat-tab-label, .mat-tab-link {\n color: mat-color($background-color, default-contrast);\n\n &.mat-tab-disabled {\n color: mat-color($background-color, default-contrast, 0.4);\n }\n }\n\n // Set pagination chevrons to contrast background\n .mat-tab-header-pagination-chevron {\n border-color: mat-color($background-color, default-contrast);\n }\n\n .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n border-color: mat-color($background-color, default-contrast, 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-ripple-element {\n background-color: mat-color($background-color, default-contrast, 0.12);\n }\n}\n\n@mixin mat-tabs-typography($config) {\n .mat-tab-group {\n font-family: mat-font-family($config);\n }\n\n .mat-tab-label, .mat-tab-link {\n font: {\n family: mat-font-family($config, button);\n size: mat-font-size($config, button);\n weight: mat-font-weight($config, button);\n }\n }\n}\n\n\n\n\n\n\n@mixin _mat-toolbar-color($palette) {\n background: mat-color($palette);\n color: mat-color($palette, default-contrast);\n}\n\n@mixin _mat-toolbar-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 mat-toolbar-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-toolbar {\n background: mat-color($background, app-bar);\n color: mat-color($foreground, text);\n\n &.mat-primary {\n @include _mat-toolbar-color($primary);\n }\n\n &.mat-accent {\n @include _mat-toolbar-color($accent);\n }\n\n &.mat-warn {\n @include _mat-toolbar-color($warn);\n }\n\n @include _mat-toolbar-form-field-overrides;\n }\n}\n\n@mixin mat-toolbar-typography($config) {\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 mat-typography-level-to-styles($config, title);\n margin: 0;\n }\n}\n\n\n\n\n\n$mat-tooltip-target-height: 22px;\n$mat-tooltip-font-size: 10px;\n$mat-tooltip-vertical-padding: ($mat-tooltip-target-height - $mat-tooltip-font-size) / 2;\n\n$mat-tooltip-handset-target-height: 30px;\n$mat-tooltip-handset-font-size: 14px;\n$mat-tooltip-handset-vertical-padding:\n ($mat-tooltip-handset-target-height - $mat-tooltip-handset-font-size) / 2;\n\n@mixin mat-tooltip-theme($theme) {\n .mat-tooltip {\n background: mat-color($mat-grey, 700, 0.9);\n }\n}\n\n@mixin mat-tooltip-typography($config) {\n .mat-tooltip {\n font-family: mat-font-family($config);\n font-size: $mat-tooltip-font-size;\n padding-top: $mat-tooltip-vertical-padding;\n padding-bottom: $mat-tooltip-vertical-padding;\n }\n\n .mat-tooltip-handset {\n font-size: $mat-tooltip-handset-font-size;\n padding-top: $mat-tooltip-handset-vertical-padding;\n padding-bottom: $mat-tooltip-handset-vertical-padding;\n }\n}\n\n\n\n\n\n@mixin mat-snack-bar-theme($theme) {\n $is-dark-theme: map-get($theme, is-dark);\n $accent: map-get($theme, 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, $dark-primary-text, $light-secondary-text);\n background: if($is-dark-theme, map-get($mat-grey, 50), #323232);\n\n @include _mat-theme-elevation(6, $theme);\n }\n\n .mat-simple-snackbar-action {\n color: if($is-dark-theme, inherit, mat-color($accent));\n }\n}\n\n@mixin mat-snack-bar-typography($config) {\n .mat-simple-snackbar {\n font: {\n family: mat-font-family($config, body-1);\n size: mat-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: mat-font-weight($config, button);\n }\n }\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n// Theme styles that only apply to the fill appearance of the form-field.\n\n@mixin mat-form-field-fill-theme($theme) {\n $foreground: map-get($theme, foreground);\n $is-dark-theme: map-get($theme, is-dark);\n\n $fill-background: mat-color($foreground, base, if($is-dark-theme, 0.1, 0.04));\n $fill-disabled-background: mat-color($foreground, base, if($is-dark-theme, 0.05, 0.02));\n $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.5, 0.42));\n $label-disabled-color: mat-color($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$mat-form-field-fill-dedupe: 0;\n\n// Applies a floating label above the form field control itself.\n@mixin _mat-form-field-fill-label-floating($font-scale, $infix-padding, $infix-margin-top) {\n transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-fill-dedupe)\n scale($font-scale);\n width: 100% / $font-scale + $mat-form-field-fill-dedupe;\n\n $mat-form-field-fill-dedupe: $mat-form-field-fill-dedupe + 0.00001 !global;\n}\n\n@mixin mat-form-field-fill-typography($config) {\n // The unit-less line-height from the font config.\n $line-height: mat-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: 1em * $line-height * $subscript-font-scale;\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 _mat-form-field-fill-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 _mat-form-field-fill-label-floating(\n $subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,\n $infix-margin-top);\n }\n }\n }\n}\n\n\n\n\n\n\n\n// Theme styles that only apply to the legacy appearance of the form-field.\n\n@mixin mat-form-field-legacy-theme($theme) {\n $foreground: map-get($theme, foreground);\n $is-dark-theme: map-get($theme, is-dark);\n\n $label-color: mat-color($foreground, secondary-text);\n $underline-color: mat-color($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 mat-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$mat-form-field-legacy-dedupe: 0;\n\n// Applies a floating label above the form field control itself.\n@mixin _mat-form-field-legacy-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 + $mat-form-field-legacy-dedupe);\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 -ms-transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-legacy-dedupe)\n scale($font-scale);\n\n width: 100% / $font-scale + $mat-form-field-legacy-dedupe;\n\n $mat-form-field-legacy-dedupe: $mat-form-field-legacy-dedupe + 0.00001 !global;\n}\n\n// Same as mixin above, but omits the translateZ for printing purposes.\n@mixin _mat-form-field-legacy-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 + $mat-form-field-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 $mat-form-field-legacy-dedupe: $mat-form-field-legacy-dedupe + 0.00001 !global;\n}\n\n@mixin mat-form-field-legacy-typography($config) {\n // The unit-less line-height from the font config.\n $line-height: mat-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: ($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 $infix-margin-top: 1em * $line-height * $subscript-font-scale;\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: 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 _mat-form-field-legacy-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 _mat-form-field-legacy-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 _mat-form-field-legacy-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% - #{$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 _mat-form-field-legacy-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 _mat-form-field-legacy-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 _mat-form-field-legacy-label-floating-print(\n $subscript-font-scale, $infix-padding, $infix-margin-top);\n }\n }\n }\n }\n}\n\n\n\n\n\n\n\n// Theme styles that only apply to the outline appearance of the form-field.\n\n@mixin mat-form-field-outline-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 $is-dark-theme: map-get($theme, is-dark);\n\n $label-disabled-color: mat-color($foreground, disabled-text);\n $outline-color: mat-color($foreground, divider, if($is-dark-theme, 0.3, 0.12));\n $outline-color-hover: mat-color($foreground, divider, if($is-dark-theme, 1, 0.87));\n $outline-color-primary: mat-color($primary);\n $outline-color-accent: mat-color($accent);\n $outline-color-warn: mat-color($warn);\n $outline-color-disabled: mat-color($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$mat-form-field-outline-dedupe: 0;\n\n// Applies a floating label above the form field control itself.\n@mixin _mat-form-field-outline-label-floating($font-scale, $infix-padding, $infix-margin-top) {\n transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-outline-dedupe)\n scale($font-scale);\n width: 100% / $font-scale + $mat-form-field-outline-dedupe;\n\n $mat-form-field-outline-dedupe: $mat-form-field-outline-dedupe + 0.00001 !global;\n}\n\n@mixin mat-form-field-outline-typography($config) {\n // The unit-less line-height from the font config.\n $line-height: mat-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: 1em * $line-height * $subscript-font-scale;\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: 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 _mat-form-field-outline-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 _mat-form-field-outline-label-floating(\n $subscript-font-scale, $infix-padding + $outline-appearance-label-offset,\n $infix-margin-top);\n }\n }\n }\n}\n\n\n\n\n\n\n\n// Theme styles that only apply to the standard appearance of the form-field.\n\n@mixin mat-form-field-standard-theme($theme) {\n $foreground: map-get($theme, foreground);\n $is-dark-theme: map-get($theme, is-dark);\n\n $underline-color: mat-color($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 mat-control-disabled-underline($underline-color);\n }\n }\n}\n\n@mixin mat-form-field-standard-typography($config) {}\n\n\n\n// Theme styles that apply to all appearances of the form-field.\n\n@mixin mat-form-field-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 $is-dark-theme: map-get($theme, is-dark);\n\n // Label colors. Required is used for the `*` star shown in the label.\n $label-color: mat-color($foreground, secondary-text, if($is-dark-theme, 0.7, 0.6));\n $focused-label-color: mat-color($primary);\n $required-label-color: mat-color($accent);\n\n // Underline colors.\n $underline-color-base: mat-color($foreground, divider, if($is-dark-theme, 1, 0.87));\n $underline-color-accent: mat-color($accent);\n $underline-color-warn: mat-color($warn);\n $underline-focused-color: mat-color($primary);\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 // 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 mat-form-field-legacy-theme($theme);\n @include mat-form-field-standard-theme($theme);\n @include mat-form-field-fill-theme($theme);\n @include mat-form-field-outline-theme($theme);\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$mat-form-field-dedupe: 0;\n\n// Applies a floating label above the form field control itself.\n@mixin _mat-form-field-label-floating($font-scale, $infix-padding, $infix-margin-top) {\n transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-dedupe)\n scale($font-scale);\n width: 100% / $font-scale + $mat-form-field-dedupe;\n\n $mat-form-field-dedupe: $mat-form-field-dedupe + 0.00001 !global;\n}\n\n@mixin mat-form-field-typography($config) {\n // The unit-less line-height from the font config.\n $line-height: mat-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 $infix-margin-top: 1em * $line-height * $subscript-font-scale;\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: 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 mat-typography-level-to-styles($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: $line-height * 1em;\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 _mat-form-field-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 _mat-form-field-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% - #{$wrapper-padding-bottom / $subscript-font-scale});\n }\n\n @include mat-form-field-legacy-typography($config);\n @include mat-form-field-standard-typography($config);\n @include mat-form-field-fill-typography($config);\n @include mat-form-field-outline-typography($config);\n}\n\n\n\n\n\n@mixin mat-tree-theme($theme) {\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-tree {\n background: mat-color($background, 'card');\n }\n\n .mat-tree-node,\n .mat-nested-tree-node {\n color: mat-color($foreground, text);\n }\n}\n\n@mixin mat-tree-typography($config) {\n .mat-tree {\n font-family: mat-font-family($config);\n }\n\n .mat-tree-node,\n .mat-nested-tree-node {\n font-weight: mat-font-weight($config, body-1);\n font-size: mat-font-size($config, body-1);\n }\n}\n\n\n\n// Includes all of the typographic styles.\n@mixin angular-material-typography($config: null) {\n @if $config == null {\n $config: mat-typography-config();\n }\n\n @include mat-badge-typography($config);\n @include mat-base-typography($config);\n @include mat-autocomplete-typography($config);\n @include mat-bottom-sheet-typography($config);\n @include mat-button-typography($config);\n @include mat-button-toggle-typography($config);\n @include mat-card-typography($config);\n @include mat-checkbox-typography($config);\n @include mat-chips-typography($config);\n @include mat-table-typography($config);\n @include mat-datepicker-typography($config);\n @include mat-dialog-typography($config);\n @include mat-expansion-panel-typography($config);\n @include mat-form-field-typography($config);\n @include mat-grid-list-typography($config);\n @include mat-icon-typography($config);\n @include mat-input-typography($config);\n @include mat-menu-typography($config);\n @include mat-paginator-typography($config);\n @include mat-progress-bar-typography($config);\n @include mat-progress-spinner-typography($config);\n @include mat-radio-typography($config);\n @include mat-select-typography($config);\n @include mat-sidenav-typography($config);\n @include mat-slide-toggle-typography($config);\n @include mat-slider-typography($config);\n @include mat-stepper-typography($config);\n @include mat-sort-typography($config);\n @include mat-tabs-typography($config);\n @include mat-toolbar-typography($config);\n @include mat-tooltip-typography($config);\n @include mat-list-typography($config);\n @include mat-option-typography($config);\n @include mat-optgroup-typography($config);\n @include mat-snack-bar-typography($config);\n @include mat-tree-typography($config);\n}\n\n\n// Mixin that renders all of the core styles that are not theme-dependent.\n@mixin mat-core($typography-config: null) {\n @include angular-material-typography($typography-config);\n @include mat-ripple();\n @include cdk-a11y();\n @include cdk-overlay();\n @include cdk-text-field();\n}\n\n// Mixin that renders all of the core styles that depend on the theme.\n@mixin mat-core-theme($theme) {\n @include mat-ripple-theme($theme);\n @include mat-option-theme($theme);\n @include mat-optgroup-theme($theme);\n @include mat-pseudo-checkbox-theme($theme);\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 .#{$_mat-elevation-prefix}#{$zValue} {\n @include _mat-theme-elevation($zValue, $theme);\n }\n }\n\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($theme, background);\n $foreground: map-get($theme, foreground);\n\n background-color: mat-color($background, background);\n color: mat-color($foreground, text);\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\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n@mixin mat-divider-theme($theme) {\n $foreground: map-get($theme, foreground);\n\n .mat-divider {\n border-top-color: mat-color($foreground, divider);\n }\n\n .mat-divider-vertical {\n border-right-color: mat-color($foreground, divider);\n }\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n// Create a theme.\n@mixin angular-material-theme($theme) {\n @include mat-core-theme($theme);\n @include mat-autocomplete-theme($theme);\n @include mat-badge-theme($theme);\n @include mat-bottom-sheet-theme($theme);\n @include mat-button-theme($theme);\n @include mat-button-toggle-theme($theme);\n @include mat-card-theme($theme);\n @include mat-checkbox-theme($theme);\n @include mat-chips-theme($theme);\n @include mat-table-theme($theme);\n @include mat-datepicker-theme($theme);\n @include mat-dialog-theme($theme);\n @include mat-divider-theme($theme);\n @include mat-expansion-panel-theme($theme);\n @include mat-form-field-theme($theme);\n @include mat-grid-list-theme($theme);\n @include mat-icon-theme($theme);\n @include mat-input-theme($theme);\n @include mat-list-theme($theme);\n @include mat-menu-theme($theme);\n @include mat-paginator-theme($theme);\n @include mat-progress-bar-theme($theme);\n @include mat-progress-spinner-theme($theme);\n @include mat-radio-theme($theme);\n @include mat-select-theme($theme);\n @include mat-sidenav-theme($theme);\n @include mat-slide-toggle-theme($theme);\n @include mat-slider-theme($theme);\n @include mat-stepper-theme($theme);\n @include mat-sort-theme($theme);\n @include mat-tabs-theme($theme);\n @include mat-toolbar-theme($theme);\n @include mat-tooltip-theme($theme);\n @include mat-tree-theme($theme);\n @include mat-snack-bar-theme($theme);\n}\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 bottom: $bottom;\n position: absolute;\n &.fixed {\n position: fixed;\n }\n }\n}\n\n@mixin td-button-utilities() {\n $mat-fab-pos-offset: ($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","/*\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}], [layout#{$name}=\"column\"], [layout#{$name}=\"row\"] {\n box-sizing: border-box;\n display: -webkit-box;\n display: -webkit-flex;\n display: -moz-box;\n display: -ms-flexbox;\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 {\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\"], [layout#{$name}=\"row\"] {\n > [#{$flexName}=\"33\"], > [#{$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\"], > [#{$flexName}=\"34\"] {\n flex: 1 1 34%;\n max-width: 34%;\n max-height: 100%;\n box-sizing: border-box;\n }\n > [#{$flexName}=\"66\"], > [#{$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\"], > [#{$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\"], [layout#{$name}=\"column\"] {\n > [#{$flexName}=\"33\"], > [#{$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\"], > [#{$flexName}=\"34\"] {\n flex: 1 1 34%;\n max-width: 100%;\n max-height: 34%;\n box-sizing: border-box;\n }\n > [#{$flexName}=\"66\"], > [#{$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\"], > [#{$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\n@mixin layout-align-for-name($suffix: null) {\n\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\n [layout-padding] > [flex-sm], [layout-padding] > [flex-lt-md] {\n padding: $layout-gutter-width / 4;\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: $layout-gutter-width / 2;\n }\n [layout-padding] > [flex-gt-md],\n [layout-padding] > [flex-lg] {\n padding: $layout-gutter-width / 1;\n }\n\n [layout-margin] > [flex-sm],\n [layout-margin] > [flex-lt-md] {\n margin: $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: $layout-gutter-width / 2;\n }\n\n [layout-margin] > [flex-gt-md],\n [layout-margin] > [flex-lg] {\n margin: $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], [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\n @media (min-width: $layout-breakpoint-xs) and (max-width: $layout-breakpoint-sm - 1) {\n // SMALL SCREEN\n [hide-sm], [hide-gt-xs] {\n &:not([show-gt-xs]):not([show-sm]):not([show]) {\n display: none;\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\n @media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {\n // MEDIUM SCREEN\n [hide], [hide-gt-xs], [hide-gt-sm] {\n &:not([show-gt-xs]):not([show-gt-sm]):not([show-md]):not([show]) {\n display: none;\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], [hide-gt-xs], [hide-gt-sm], [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 [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], [hide-gt-xs], [hide-gt-sm], [hide-gt-md], [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 [hide-xl]:not([show-xl]):not([show-gt-lg]):not([show]) {\n display: none;\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 * @param target Which kind of high contrast setting to target. Defaults to `active`, can be\n * `white-on-black` or `black-on-white`.\n */\n/* Theme for the ripple elements.*/\n/* stylelint-disable material/no-prefixes */\n/* stylelint-enable */\n/** Mixin to create distinct classes for fab positions, e.g. \".mat-fab-position-bottom-right\". */\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.mat-badge-content {\n font-weight: 600;\n font-size: 12px;\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-badge-small .mat-badge-content {\n font-size: 6px; }\n\n.mat-badge-large .mat-badge-content {\n font-size: 24px; }\n\n.mat-h1, .mat-headline, .mat-typography h1 {\n font: 400 24px/32px Roboto, \"Helvetica Neue\", sans-serif;\n margin: 0 0 16px; }\n\n.mat-h2, .mat-title, .mat-typography h2 {\n font: 500 20px/32px Roboto, \"Helvetica Neue\", sans-serif;\n margin: 0 0 16px; }\n\n.mat-h3, .mat-subheading-2, .mat-typography h3 {\n font: 400 16px/28px Roboto, \"Helvetica Neue\", sans-serif;\n margin: 0 0 16px; }\n\n.mat-h4, .mat-subheading-1, .mat-typography h4 {\n font: 400 15px/24px Roboto, \"Helvetica Neue\", sans-serif;\n margin: 0 0 16px; }\n\n.mat-h5, .mat-typography h5 {\n font: 400 11.62px/20px Roboto, \"Helvetica Neue\", sans-serif;\n margin: 0 0 12px; }\n\n.mat-h6, .mat-typography h6 {\n font: 400 9.38px/20px Roboto, \"Helvetica Neue\", sans-serif;\n margin: 0 0 12px; }\n\n.mat-body-strong, .mat-body-2 {\n font: 500 14px/24px Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-body, .mat-body-1, .mat-typography {\n font: 400 14px/20px Roboto, \"Helvetica Neue\", sans-serif; }\n .mat-body p, .mat-body-1 p, .mat-typography p {\n margin: 0 0 12px; }\n\n.mat-small, .mat-caption {\n font: 400 12px/20px Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-display-4, .mat-typography .mat-display-4 {\n font: 300 112px/112px Roboto, \"Helvetica Neue\", sans-serif;\n margin: 0 0 56px;\n letter-spacing: -0.05em; }\n\n.mat-display-3, .mat-typography .mat-display-3 {\n font: 400 56px/56px Roboto, \"Helvetica Neue\", sans-serif;\n margin: 0 0 64px;\n letter-spacing: -0.02em; }\n\n.mat-display-2, .mat-typography .mat-display-2 {\n font: 400 45px/48px Roboto, \"Helvetica Neue\", sans-serif;\n margin: 0 0 64px;\n letter-spacing: -0.005em; }\n\n.mat-display-1, .mat-typography .mat-display-1 {\n font: 400 34px/40px Roboto, \"Helvetica Neue\", sans-serif;\n margin: 0 0 64px; }\n\n.mat-bottom-sheet-container {\n font: 400 14px/20px Roboto, \"Helvetica Neue\", sans-serif; }\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.mat-button-toggle {\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-card {\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-card-title {\n font-size: 24px;\n font-weight: 500; }\n\n.mat-card-header .mat-card-title {\n font-size: 20px; }\n\n.mat-card-subtitle,\n.mat-card-content {\n font-size: 14px; }\n\n.mat-checkbox {\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-checkbox-layout .mat-checkbox-label {\n line-height: 24px; }\n\n.mat-chip {\n font-size: 14px;\n font-weight: 500; }\n .mat-chip .mat-chip-trailing-icon.mat-icon,\n .mat-chip .mat-chip-remove.mat-icon {\n font-size: 18px; }\n\n.mat-table {\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-header-cell {\n font-size: 12px;\n font-weight: 500; }\n\n.mat-cell, .mat-footer-cell {\n font-size: 14px; }\n\n.mat-calendar {\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-calendar-body {\n font-size: 13px; }\n\n.mat-calendar-body-label,\n.mat-calendar-period-button {\n font-size: 14px;\n font-weight: 500; }\n\n.mat-calendar-table-header th {\n font-size: 11px;\n font-weight: 400; }\n\n.mat-dialog-title {\n font: 500 20px/32px Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-expansion-panel-header {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 15px;\n font-weight: 400; }\n\n.mat-expansion-panel-content {\n font: 400 14px/20px Roboto, \"Helvetica Neue\", sans-serif; }\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\n.mat-form-field-wrapper {\n padding-bottom: 1.34375em; }\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 .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.mat-form-field-infix {\n padding: 0.5em 0;\n border-top: 0.84375em solid transparent; }\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.33333%; }\n\n.mat-form-field-can-float .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper\n.mat-form-field-label {\n transform: translateY(-1.34374em) scale(0.75);\n width: 133.33334%; }\n\n.mat-form-field-label-wrapper {\n top: -0.84375em;\n padding-top: 0.84375em; }\n\n.mat-form-field-label {\n top: 1.34375em; }\n\n.mat-form-field-underline {\n bottom: 1.34375em; }\n\n.mat-form-field-subscript-wrapper {\n font-size: 75%;\n margin-top: 0.66667em;\n top: calc(100% - 1.79167em); }\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 -ms-transform: translateY(-1.28125em) scale(0.75);\n width: 133.33333%; }\n\n.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper\n.mat-form-field-label {\n transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.00101px);\n -ms-transform: translateY(-1.28124em) scale(0.75);\n width: 133.33334%; }\n\n.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper\n.mat-form-field-label {\n transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.00102px);\n -ms-transform: translateY(-1.28123em) scale(0.75);\n width: 133.33335%; }\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.54167em;\n top: calc(100% - 1.66667em); }\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 .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper\n.mat-form-field-label {\n transform: translateY(-1.28121em) scale(0.75); }\n .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper\n.mat-form-field-label {\n transform: translateY(-1.2812em) scale(0.75); } }\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.33333%; }\n\n.mat-form-field-appearance-fill.mat-form-field-can-float .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper\n.mat-form-field-label {\n transform: translateY(-0.59374em) scale(0.75);\n width: 133.33334%; }\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.33333%; }\n\n.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper\n.mat-form-field-label {\n transform: translateY(-1.59374em) scale(0.75);\n width: 133.33334%; }\n\n.mat-grid-tile-header,\n.mat-grid-tile-footer {\n font-size: 14px; }\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 .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\ninput.mat-input-element {\n margin-top: -0.0625em; }\n\n.mat-menu-item {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 14px;\n font-weight: 400; }\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.mat-radio-button {\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-select {\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-select-trigger {\n height: 1.125em; }\n\n.mat-slide-toggle-content {\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\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.mat-stepper-vertical, .mat-stepper-horizontal {\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-step-label {\n font-size: 14px;\n font-weight: 400; }\n\n.mat-step-sub-label-error {\n font-weight: normal; }\n\n.mat-step-label-error {\n font-size: 14px; }\n\n.mat-step-label-selected {\n font-size: 14px;\n font-weight: 500; }\n\n.mat-tab-group {\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\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.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 margin: 0; }\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.mat-tooltip-handset {\n font-size: 14px;\n padding-top: 8px;\n padding-bottom: 8px; }\n\n.mat-list-item {\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-list-option {\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item {\n font-size: 16px; }\n .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .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 .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) {\n font-size: 14px; }\n\n.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option {\n font-size: 16px; }\n .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .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 .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) {\n font-size: 14px; }\n\n.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 14px;\n font-weight: 500; }\n\n.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item {\n font-size: 12px; }\n .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[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 .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) {\n font-size: 12px; }\n\n.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option {\n font-size: 12px; }\n .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[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 .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) {\n font-size: 12px; }\n\n.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 12px;\n font-weight: 500; }\n\n.mat-option {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 16px; }\n\n.mat-optgroup-label {\n font: 500 14px/24px Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-simple-snackbar {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 14px; }\n\n.mat-simple-snackbar-action {\n line-height: 1;\n font-family: inherit;\n font-size: inherit;\n font-weight: 500; }\n\n.mat-tree {\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-tree-node,\n.mat-nested-tree-node {\n font-weight: 400;\n font-size: 14px; }\n\n.mat-ripple {\n overflow: hidden;\n position: relative; }\n\n.mat-ripple.mat-ripple-unbounded {\n overflow: visible; }\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 @media screen and (-ms-high-contrast: active) {\n .mat-ripple-element {\n display: none; } }\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 outline: 0;\n -webkit-appearance: none;\n -moz-appearance: none; }\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.cdk-overlay-container {\n position: fixed;\n z-index: 1000; }\n .cdk-overlay-container:empty {\n display: none; }\n\n.cdk-global-overlay-wrapper {\n display: flex;\n position: absolute;\n z-index: 1000; }\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.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 .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {\n opacity: 1; }\n @media screen and (-ms-high-contrast: active) {\n .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {\n opacity: 0.6; } }\n\n.cdk-overlay-dark-backdrop {\n background: rgba(0, 0, 0, 0.32); }\n\n.cdk-overlay-transparent-backdrop, .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {\n opacity: 0; }\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.cdk-global-scrollblock {\n position: fixed;\n width: 100%;\n overflow-y: scroll; }\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-name: cdk-text-field-autofill-start; }\n\n.cdk-text-field-autofill-monitored:not(:-webkit-autofill) {\n animation-name: cdk-text-field-autofill-end; }\n\ntextarea.cdk-textarea-autosize {\n resize: none; }\n\ntextarea.cdk-textarea-autosize-measuring {\n height: auto !important;\n overflow: hidden !important;\n padding: 2px 0 !important;\n box-sizing: content-box !important; }\n\n.mat-ripple-element {\n background-color: rgba(0, 0, 0, 0.1); }\n\n.mat-option {\n color: rgba(0, 0, 0, 0.87); }\n .mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) {\n background: rgba(0, 0, 0, 0.04); }\n .mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {\n background: rgba(0, 0, 0, 0.04); }\n .mat-option.mat-active {\n background: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.87); }\n .mat-option.mat-option-disabled {\n color: rgba(0, 0, 0, 0.38); }\n\n.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {\n color: #ef6c00; }\n\n.mat-accent .mat-option.mat-selected:not(.mat-option-disabled) {\n color: #039be5; }\n\n.mat-warn .mat-option.mat-selected:not(.mat-option-disabled) {\n color: #e53935; }\n\n.mat-optgroup-label {\n color: rgba(0, 0, 0, 0.54); }\n\n.mat-optgroup-disabled .mat-optgroup-label {\n color: rgba(0, 0, 0, 0.38); }\n\n.mat-pseudo-checkbox {\n color: rgba(0, 0, 0, 0.54); }\n .mat-pseudo-checkbox::after {\n color: #fafafa; }\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.mat-primary .mat-pseudo-checkbox-checked,\n.mat-primary .mat-pseudo-checkbox-indeterminate {\n background: #ef6c00; }\n\n.mat-warn .mat-pseudo-checkbox-checked,\n.mat-warn .mat-pseudo-checkbox-indeterminate {\n background: #e53935; }\n\n.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled {\n background: #b0b0b0; }\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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.mat-app-background {\n background-color: #fafafa;\n color: rgba(0, 0, 0, 0.87); }\n\n.mat-theme-loaded-marker {\n display: none; }\n\n.mat-autocomplete-panel {\n background: white;\n color: rgba(0, 0, 0, 0.87); }\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 .mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover) {\n background: white; }\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.mat-badge-content {\n color: white;\n background: #ef6c00; }\n\n.mat-badge-accent .mat-badge-content {\n background: #039be5;\n color: white; }\n\n.mat-badge-warn .mat-badge-content {\n color: white;\n background: #e53935; }\n\n.mat-badge {\n position: relative; }\n\n.mat-badge-hidden .mat-badge-content {\n display: none; }\n\n.mat-badge-disabled .mat-badge-content {\n background: #b9b9b9;\n color: rgba(0, 0, 0, 0.38); }\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.mat-badge-content.mat-badge-active {\n transform: none; }\n\n.mat-badge-small .mat-badge-content {\n width: 16px;\n height: 16px;\n line-height: 16px; }\n @media screen and (-ms-high-contrast: active) {\n .mat-badge-small .mat-badge-content {\n outline: solid 1px;\n border-radius: 0; } }\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.mat-badge-medium .mat-badge-content {\n width: 22px;\n height: 22px;\n line-height: 22px; }\n @media screen and (-ms-high-contrast: active) {\n .mat-badge-medium .mat-badge-content {\n outline: solid 1px;\n border-radius: 0; } }\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.mat-badge-large .mat-badge-content {\n width: 28px;\n height: 28px;\n line-height: 28px; }\n @media screen and (-ms-high-contrast: active) {\n .mat-badge-large .mat-badge-content {\n outline: solid 1px;\n border-radius: 0; } }\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.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.mat-button, .mat-icon-button, .mat-stroked-button {\n color: inherit;\n background: transparent; }\n .mat-button.mat-primary, .mat-icon-button.mat-primary, .mat-stroked-button.mat-primary {\n color: #ef6c00; }\n .mat-button.mat-accent, .mat-icon-button.mat-accent, .mat-stroked-button.mat-accent {\n color: #039be5; }\n .mat-button.mat-warn, .mat-icon-button.mat-warn, .mat-stroked-button.mat-warn {\n color: #e53935; }\n .mat-button.mat-primary[disabled], .mat-button.mat-accent[disabled], .mat-button.mat-warn[disabled], .mat-button[disabled][disabled], .mat-icon-button.mat-primary[disabled], .mat-icon-button.mat-accent[disabled], .mat-icon-button.mat-warn[disabled], .mat-icon-button[disabled][disabled], .mat-stroked-button.mat-primary[disabled], .mat-stroked-button.mat-accent[disabled], .mat-stroked-button.mat-warn[disabled], .mat-stroked-button[disabled][disabled] {\n color: rgba(0, 0, 0, 0.26); }\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 .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 .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 .mat-button[disabled] .mat-button-focus-overlay, .mat-icon-button[disabled] .mat-button-focus-overlay, .mat-stroked-button[disabled] .mat-button-focus-overlay {\n background-color: transparent; }\n .mat-button.mat-primary .mat-ripple-element, .mat-icon-button.mat-primary .mat-ripple-element, .mat-stroked-button.mat-primary .mat-ripple-element {\n background-color: rgba(239, 108, 0, 0.1); }\n .mat-button.mat-accent .mat-ripple-element, .mat-icon-button.mat-accent .mat-ripple-element, .mat-stroked-button.mat-accent .mat-ripple-element {\n background-color: rgba(3, 155, 229, 0.1); }\n .mat-button.mat-warn .mat-ripple-element, .mat-icon-button.mat-warn .mat-ripple-element, .mat-stroked-button.mat-warn .mat-ripple-element {\n background-color: rgba(229, 57, 53, 0.1); }\n\n.mat-button-focus-overlay {\n background: black; }\n\n.mat-stroked-button:not([disabled]) {\n border-color: rgba(0, 0, 0, 0.12); }\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 .mat-flat-button.mat-primary, .mat-raised-button.mat-primary, .mat-fab.mat-primary, .mat-mini-fab.mat-primary {\n color: white; }\n .mat-flat-button.mat-accent, .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-mini-fab.mat-accent {\n color: white; }\n .mat-flat-button.mat-warn, .mat-raised-button.mat-warn, .mat-fab.mat-warn, .mat-mini-fab.mat-warn {\n color: white; }\n .mat-flat-button.mat-primary[disabled], .mat-flat-button.mat-accent[disabled], .mat-flat-button.mat-warn[disabled], .mat-flat-button[disabled][disabled], .mat-raised-button.mat-primary[disabled], .mat-raised-button.mat-accent[disabled], .mat-raised-button.mat-warn[disabled], .mat-raised-button[disabled][disabled], .mat-fab.mat-primary[disabled], .mat-fab.mat-accent[disabled], .mat-fab.mat-warn[disabled], .mat-fab[disabled][disabled], .mat-mini-fab.mat-primary[disabled], .mat-mini-fab.mat-accent[disabled], .mat-mini-fab.mat-warn[disabled], .mat-mini-fab[disabled][disabled] {\n color: rgba(0, 0, 0, 0.26); }\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 .mat-flat-button.mat-accent, .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-mini-fab.mat-accent {\n background-color: #039be5; }\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 .mat-flat-button.mat-primary[disabled], .mat-flat-button.mat-accent[disabled], .mat-flat-button.mat-warn[disabled], .mat-flat-button[disabled][disabled], .mat-raised-button.mat-primary[disabled], .mat-raised-button.mat-accent[disabled], .mat-raised-button.mat-warn[disabled], .mat-raised-button[disabled][disabled], .mat-fab.mat-primary[disabled], .mat-fab.mat-accent[disabled], .mat-fab.mat-warn[disabled], .mat-fab[disabled][disabled], .mat-mini-fab.mat-primary[disabled], .mat-mini-fab.mat-accent[disabled], .mat-mini-fab.mat-warn[disabled], .mat-mini-fab[disabled][disabled] {\n background-color: rgba(0, 0, 0, 0.12); }\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 .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 .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.mat-icon-button.mat-primary .mat-ripple-element {\n background-color: rgba(239, 108, 0, 0.2); }\n\n.mat-icon-button.mat-accent .mat-ripple-element {\n background-color: rgba(3, 155, 229, 0.2); }\n\n.mat-icon-button.mat-warn .mat-ripple-element {\n background-color: rgba(229, 57, 53, 0.2); }\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.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([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[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.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([disabled]):active:not([class*='mat-elevation-z']), .mat-mini-fab:not([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[disabled]:not([class*='mat-elevation-z']), .mat-mini-fab[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.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.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,\n.mat-button-toggle-group-appearance-standard {\n box-shadow: none; }\n\n.mat-button-toggle {\n color: rgba(0, 0, 0, 0.38); }\n .mat-button-toggle .mat-button-toggle-focus-overlay {\n background-color: rgba(0, 0, 0, 0.12); }\n\n.mat-button-toggle-appearance-standard {\n color: rgba(0, 0, 0, 0.87);\n background: white; }\n .mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay {\n background-color: black; }\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[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.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.mat-button-toggle-checked {\n background-color: #e0e0e0;\n color: rgba(0, 0, 0, 0.54); }\n .mat-button-toggle-checked.mat-button-toggle-appearance-standard {\n color: rgba(0, 0, 0, 0.87); }\n\n.mat-button-toggle-disabled {\n color: rgba(0, 0, 0, 0.26);\n background-color: #eeeeee; }\n .mat-button-toggle-disabled.mat-button-toggle-appearance-standard {\n background: white; }\n .mat-button-toggle-disabled.mat-button-toggle-checked {\n background-color: #bdbdbd; }\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.mat-card {\n background: white;\n color: rgba(0, 0, 0, 0.87); }\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 .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.mat-card-subtitle {\n color: rgba(0, 0, 0, 0.54); }\n\n.mat-checkbox-frame {\n border-color: rgba(0, 0, 0, 0.54); }\n\n.mat-checkbox-checkmark {\n fill: #fafafa; }\n\n.mat-checkbox-checkmark-path {\n stroke: #fafafa !important; }\n @media screen and (-ms-high-contrast: black-on-white) {\n .mat-checkbox-checkmark-path {\n stroke: #000 !important; } }\n\n.mat-checkbox-mixedmark {\n background-color: #fafafa; }\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.mat-checkbox-disabled.mat-checkbox-checked:not(.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: #b0b0b0; }\n\n@media screen and (-ms-high-contrast: active) {\n .mat-checkbox-disabled {\n opacity: 0.5; } }\n\n@media screen and (-ms-high-contrast: active) {\n .mat-checkbox-background {\n background: none; } }\n\n.mat-checkbox:not(.mat-checkbox-disabled).mat-primary .mat-checkbox-ripple .mat-ripple-element {\n background-color: #ef6c00; }\n\n.mat-checkbox:not(.mat-checkbox-disabled).mat-accent .mat-checkbox-ripple .mat-ripple-element {\n background-color: #039be5; }\n\n.mat-checkbox:not(.mat-checkbox-disabled).mat-warn .mat-checkbox-ripple .mat-ripple-element {\n background-color: #e53935; }\n\n.mat-chip.mat-standard-chip {\n background-color: #e0e0e0;\n color: rgba(0, 0, 0, 0.87); }\n .mat-chip.mat-standard-chip .mat-chip-remove {\n color: rgba(0, 0, 0, 0.87);\n opacity: 0.4; }\n .mat-chip.mat-standard-chip .mat-chip-remove:hover {\n opacity: 0.54; }\n .mat-chip.mat-standard-chip:focus {\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.mat-chip-selected.mat-primary {\n background-color: #ef6c00;\n color: white; }\n .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary .mat-chip-remove {\n color: white;\n opacity: 0.4; }\n .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary .mat-chip-remove:hover {\n opacity: 0.54; }\n\n.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn {\n background-color: #e53935;\n color: white; }\n .mat-chip.mat-standard-chip.mat-chip-selected.mat-warn .mat-chip-remove {\n color: white;\n opacity: 0.4; }\n .mat-chip.mat-standard-chip.mat-chip-selected.mat-warn .mat-chip-remove:hover {\n opacity: 0.54; }\n\n.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent {\n background-color: #039be5;\n color: white; }\n .mat-chip.mat-standard-chip.mat-chip-selected.mat-accent .mat-chip-remove {\n color: white;\n opacity: 0.4; }\n .mat-chip.mat-standard-chip.mat-chip-selected.mat-accent .mat-chip-remove:hover {\n opacity: 0.54; }\n\n.mat-table {\n background: white; }\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\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.mat-header-cell {\n color: rgba(0, 0, 0, 0.54); }\n\n.mat-cell, .mat-footer-cell {\n color: rgba(0, 0, 0, 0.87); }\n\n.mat-calendar-arrow {\n border-top-color: rgba(0, 0, 0, 0.54); }\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.mat-calendar-table-header {\n color: rgba(0, 0, 0, 0.38); }\n\n.mat-calendar-table-header-divider::after {\n background: rgba(0, 0, 0, 0.12); }\n\n.mat-calendar-body-label {\n color: rgba(0, 0, 0, 0.54); }\n\n.mat-calendar-body-cell-content {\n color: rgba(0, 0, 0, 0.87);\n border-color: transparent; }\n\n.mat-calendar-body-disabled > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {\n color: rgba(0, 0, 0, 0.38); }\n\n.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected),\n.cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected),\n.cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {\n background-color: rgba(0, 0, 0, 0.04); }\n\n.mat-calendar-body-today:not(.mat-calendar-body-selected) {\n border-color: rgba(0, 0, 0, 0.38); }\n\n.mat-calendar-body-disabled > .mat-calendar-body-today:not(.mat-calendar-body-selected) {\n border-color: rgba(0, 0, 0, 0.18); }\n\n.mat-calendar-body-selected {\n background-color: #ef6c00;\n color: white; }\n\n.mat-calendar-body-disabled > .mat-calendar-body-selected {\n background-color: rgba(239, 108, 0, 0.4); }\n\n.mat-calendar-body-today.mat-calendar-body-selected {\n box-shadow: inset 0 0 0 1px white; }\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 .mat-datepicker-content.mat-accent .mat-calendar-body-selected {\n background-color: #039be5;\n color: white; }\n .mat-datepicker-content.mat-accent .mat-calendar-body-disabled > .mat-calendar-body-selected {\n background-color: rgba(3, 155, 229, 0.4); }\n .mat-datepicker-content.mat-accent .mat-calendar-body-today.mat-calendar-body-selected {\n box-shadow: inset 0 0 0 1px white; }\n .mat-datepicker-content.mat-warn .mat-calendar-body-selected {\n background-color: #e53935;\n color: white; }\n .mat-datepicker-content.mat-warn .mat-calendar-body-disabled > .mat-calendar-body-selected {\n background-color: rgba(229, 57, 53, 0.4); }\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-touch {\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.mat-datepicker-toggle-active {\n color: #ef6c00; }\n .mat-datepicker-toggle-active.mat-accent {\n color: #039be5; }\n .mat-datepicker-toggle-active.mat-warn {\n color: #e53935; }\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.mat-divider {\n border-top-color: rgba(0, 0, 0, 0.12); }\n\n.mat-divider-vertical {\n border-right-color: rgba(0, 0, 0, 0.12); }\n\n.mat-expansion-panel {\n background: white;\n color: rgba(0, 0, 0, 0.87); }\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.mat-action-row {\n border-top-color: rgba(0, 0, 0, 0.12); }\n\n.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']).cdk-keyboard-focused, .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']).cdk-program-focused, .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']):hover {\n background: rgba(0, 0, 0, 0.04); }\n\n@media (hover: none) {\n .mat-expansion-panel:not(.mat-expanded):not([aria-disabled='true'])\n.mat-expansion-panel-header:hover {\n background: white; } }\n\n.mat-expansion-panel-header-title {\n color: rgba(0, 0, 0, 0.87); }\n\n.mat-expansion-panel-header-description,\n.mat-expansion-indicator::after {\n color: rgba(0, 0, 0, 0.54); }\n\n.mat-expansion-panel-header[aria-disabled='true'] {\n color: rgba(0, 0, 0, 0.26); }\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.mat-form-field-label {\n color: rgba(0, 0, 0, 0.6); }\n\n.mat-hint {\n color: rgba(0, 0, 0, 0.6); }\n\n.mat-form-field.mat-focused .mat-form-field-label {\n color: #ef6c00; }\n .mat-form-field.mat-focused .mat-form-field-label.mat-accent {\n color: #039be5; }\n .mat-form-field.mat-focused .mat-form-field-label.mat-warn {\n color: #e53935; }\n\n.mat-focused .mat-form-field-required-marker {\n color: #039be5; }\n\n.mat-form-field-ripple {\n background-color: rgba(0, 0, 0, 0.87); }\n\n.mat-form-field.mat-focused .mat-form-field-ripple {\n background-color: #ef6c00; }\n .mat-form-field.mat-focused .mat-form-field-ripple.mat-accent {\n background-color: #039be5; }\n .mat-form-field.mat-focused .mat-form-field-ripple.mat-warn {\n background-color: #e53935; }\n\n.mat-form-field.mat-form-field-invalid .mat-form-field-label {\n color: #e53935; }\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.mat-error {\n color: #e53935; }\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.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.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.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.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.mat-form-field-type-mat-native-select .mat-form-field-infix::after {\n color: rgba(0, 0, 0, 0.54); }\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.mat-input-element {\n caret-color: #ef6c00; }\n .mat-input-element::placeholder {\n color: rgba(0, 0, 0, 0.42); }\n .mat-input-element::-moz-placeholder {\n color: rgba(0, 0, 0, 0.42); }\n .mat-input-element::-webkit-input-placeholder {\n color: rgba(0, 0, 0, 0.42); }\n .mat-input-element:-ms-input-placeholder {\n color: rgba(0, 0, 0, 0.42); }\n\n.mat-accent .mat-input-element {\n caret-color: #039be5; }\n\n.mat-warn .mat-input-element,\n.mat-form-field-invalid .mat-input-element {\n caret-color: #e53935; }\n\n.mat-form-field-type-mat-native-select.mat-form-field-invalid .mat-form-field-infix::after {\n color: #e53935; }\n\n.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item {\n color: rgba(0, 0, 0, 0.87); }\n\n.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option {\n color: rgba(0, 0, 0, 0.87); }\n\n.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader {\n color: rgba(0, 0, 0, 0.54); }\n\n.mat-list-item-disabled {\n background-color: #eeeeee; }\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 background: rgba(0, 0, 0, 0.04); }\n\n.mat-menu-panel {\n background: white; }\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.mat-menu-item {\n background: transparent;\n color: rgba(0, 0, 0, 0.87); }\n .mat-menu-item[disabled], .mat-menu-item[disabled]::after {\n color: rgba(0, 0, 0, 0.38); }\n\n.mat-menu-item .mat-icon:not([color]),\n.mat-menu-item-submenu-trigger::after {\n color: rgba(0, 0, 0, 0.54); }\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.mat-paginator {\n background: white; }\n\n.mat-paginator,\n.mat-paginator-page-size .mat-select-trigger {\n color: rgba(0, 0, 0, 0.54); }\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.mat-paginator-first,\n.mat-paginator-last {\n border-top: 2px solid rgba(0, 0, 0, 0.54); }\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.mat-progress-bar-background {\n fill: #ffe0b2; }\n\n.mat-progress-bar-buffer {\n background-color: #ffe0b2; }\n\n.mat-progress-bar-fill::after {\n background-color: #ef6c00; }\n\n.mat-progress-bar.mat-accent .mat-progress-bar-background {\n fill: #80d8ff; }\n\n.mat-progress-bar.mat-accent .mat-progress-bar-buffer {\n background-color: #80d8ff; }\n\n.mat-progress-bar.mat-accent .mat-progress-bar-fill::after {\n background-color: #039be5; }\n\n.mat-progress-bar.mat-warn .mat-progress-bar-background {\n fill: #ffcdd2; }\n\n.mat-progress-bar.mat-warn .mat-progress-bar-buffer {\n background-color: #ffcdd2; }\n\n.mat-progress-bar.mat-warn .mat-progress-bar-fill::after {\n background-color: #e53935; }\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.mat-radio-outer-circle {\n border-color: rgba(0, 0, 0, 0.54); }\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),\n.mat-radio-button.mat-primary.mat-radio-checked .mat-radio-persistent-ripple,\n.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),\n.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-persistent-ripple,\n.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),\n.mat-radio-button.mat-warn.mat-radio-checked .mat-radio-persistent-ripple,\n.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.mat-select-value {\n color: rgba(0, 0, 0, 0.87); }\n\n.mat-select-placeholder {\n color: rgba(0, 0, 0, 0.42); }\n\n.mat-select-disabled .mat-select-value {\n color: rgba(0, 0, 0, 0.38); }\n\n.mat-select-arrow {\n color: rgba(0, 0, 0, 0.54); }\n\n.mat-select-panel {\n background: white; }\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 .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) {\n background: rgba(0, 0, 0, 0.12); }\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.mat-drawer-container {\n background-color: #fafafa;\n color: rgba(0, 0, 0, 0.87); }\n\n.mat-drawer {\n background-color: white;\n color: rgba(0, 0, 0, 0.87); }\n .mat-drawer.mat-drawer-push {\n background-color: white; }\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.mat-drawer-side {\n border-right: solid 1px rgba(0, 0, 0, 0.12); }\n .mat-drawer-side.mat-drawer-end {\n border-left: solid 1px rgba(0, 0, 0, 0.12);\n border-right: none; }\n\n[dir='rtl'] .mat-drawer-side {\n border-left: solid 1px rgba(0, 0, 0, 0.12);\n border-right: none; }\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.mat-drawer-backdrop.mat-drawer-shown {\n background-color: rgba(0, 0, 0, 0.6); }\n\n.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {\n background-color: #039be5; }\n\n.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {\n background-color: rgba(3, 155, 229, 0.54); }\n\n.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-ripple-element {\n background-color: #039be5; }\n\n.mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {\n background-color: #ef6c00; }\n\n.mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {\n background-color: rgba(239, 108, 0, 0.54); }\n\n.mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) .mat-ripple-element {\n background-color: #ef6c00; }\n\n.mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {\n background-color: #e53935; }\n\n.mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {\n background-color: rgba(229, 57, 53, 0.54); }\n\n.mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-ripple-element {\n background-color: #e53935; }\n\n.mat-slide-toggle:not(.mat-checked) .mat-ripple-element {\n background-color: black; }\n\n.mat-disabled .mat-slide-toggle-thumb {\n background-color: #bdbdbd; }\n\n.mat-disabled .mat-slide-toggle-bar {\n background-color: rgba(0, 0, 0, 0.1); }\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.mat-slide-toggle-bar {\n background-color: rgba(0, 0, 0, 0.38); }\n\n.mat-slider-track-background {\n background-color: rgba(0, 0, 0, 0.26); }\n\n.mat-primary .mat-slider-track-fill,\n.mat-primary .mat-slider-thumb,\n.mat-primary .mat-slider-thumb-label {\n background-color: #ef6c00; }\n\n.mat-primary .mat-slider-thumb-label-text {\n color: white; }\n\n.mat-accent .mat-slider-track-fill,\n.mat-accent .mat-slider-thumb,\n.mat-accent .mat-slider-thumb-label {\n background-color: #039be5; }\n\n.mat-accent .mat-slider-thumb-label-text {\n color: white; }\n\n.mat-warn .mat-slider-track-fill,\n.mat-warn .mat-slider-thumb,\n.mat-warn .mat-slider-thumb-label {\n background-color: #e53935; }\n\n.mat-warn .mat-slider-thumb-label-text {\n color: white; }\n\n.mat-slider-focus-ring {\n background-color: rgba(3, 155, 229, 0.2); }\n\n.mat-slider:hover .mat-slider-track-background,\n.cdk-focused .mat-slider-track-background {\n background-color: rgba(0, 0, 0, 0.38); }\n\n.mat-slider-disabled .mat-slider-track-background,\n.mat-slider-disabled .mat-slider-track-fill,\n.mat-slider-disabled .mat-slider-thumb {\n background-color: rgba(0, 0, 0, 0.26); }\n\n.mat-slider-disabled:hover .mat-slider-track-background {\n background-color: rgba(0, 0, 0, 0.26); }\n\n.mat-slider-min-value .mat-slider-focus-ring {\n background-color: rgba(0, 0, 0, 0.12); }\n\n.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb,\n.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-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb,\n.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-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-min-value:not(.mat-slider-thumb-label-showing):hover .mat-slider-thumb, .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-min-value:not(.mat-slider-thumb-label-showing):hover.mat-slider-disabled .mat-slider-thumb, .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.mat-slider-has-ticks .mat-slider-wrapper::after {\n border-color: rgba(0, 0, 0, 0.7); }\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.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.mat-step-header.cdk-keyboard-focused, .mat-step-header.cdk-program-focused, .mat-step-header:hover {\n background-color: rgba(0, 0, 0, 0.04); }\n\n.mat-step-header .mat-step-label,\n.mat-step-header .mat-step-optional {\n color: rgba(0, 0, 0, 0.38); }\n\n.mat-step-header .mat-step-icon {\n background-color: rgba(0, 0, 0, 0.38);\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-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.mat-stepper-horizontal, .mat-stepper-vertical {\n background-color: white; }\n\n.mat-stepper-vertical-line::before {\n border-left-color: rgba(0, 0, 0, 0.12); }\n\n.mat-stepper-horizontal-line {\n border-top-color: rgba(0, 0, 0, 0.12); }\n\n.mat-sort-header-arrow {\n color: #757575; }\n\n.mat-tab-nav-bar,\n.mat-tab-header {\n border-bottom: 1px solid rgba(0, 0, 0, 0.12); }\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.mat-tab-label, .mat-tab-link {\n color: rgba(0, 0, 0, 0.87); }\n .mat-tab-label.mat-tab-disabled, .mat-tab-link.mat-tab-disabled {\n color: rgba(0, 0, 0, 0.38); }\n\n.mat-tab-header-pagination-chevron {\n border-color: rgba(0, 0, 0, 0.87); }\n\n.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n border-color: rgba(0, 0, 0, 0.38); }\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.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-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary .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-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent .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-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn .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-links, .mat-tab-nav-bar.mat-background-primary .mat-tab-header, .mat-tab-nav-bar.mat-background-primary .mat-tab-links {\n background-color: #ef6c00; }\n\n.mat-tab-group.mat-background-primary .mat-tab-label, .mat-tab-group.mat-background-primary .mat-tab-link, .mat-tab-nav-bar.mat-background-primary .mat-tab-label, .mat-tab-nav-bar.mat-background-primary .mat-tab-link {\n color: white; }\n .mat-tab-group.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-primary .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .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-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-chevron {\n border-color: white; }\n\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-pagination-disabled .mat-tab-header-pagination-chevron {\n border-color: rgba(255, 255, 255, 0.4); }\n\n.mat-tab-group.mat-background-primary .mat-ripple-element, .mat-tab-nav-bar.mat-background-primary .mat-ripple-element {\n background-color: rgba(255, 255, 255, 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-links, .mat-tab-nav-bar.mat-background-accent .mat-tab-header, .mat-tab-nav-bar.mat-background-accent .mat-tab-links {\n background-color: #039be5; }\n\n.mat-tab-group.mat-background-accent .mat-tab-label, .mat-tab-group.mat-background-accent .mat-tab-link, .mat-tab-nav-bar.mat-background-accent .mat-tab-label, .mat-tab-nav-bar.mat-background-accent .mat-tab-link {\n color: white; }\n .mat-tab-group.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-accent .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .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-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-chevron {\n border-color: white; }\n\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-pagination-disabled .mat-tab-header-pagination-chevron {\n border-color: rgba(255, 255, 255, 0.4); }\n\n.mat-tab-group.mat-background-accent .mat-ripple-element, .mat-tab-nav-bar.mat-background-accent .mat-ripple-element {\n background-color: rgba(255, 255, 255, 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-links, .mat-tab-nav-bar.mat-background-warn .mat-tab-header, .mat-tab-nav-bar.mat-background-warn .mat-tab-links {\n background-color: #e53935; }\n\n.mat-tab-group.mat-background-warn .mat-tab-label, .mat-tab-group.mat-background-warn .mat-tab-link, .mat-tab-nav-bar.mat-background-warn .mat-tab-label, .mat-tab-nav-bar.mat-background-warn .mat-tab-link {\n color: white; }\n .mat-tab-group.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-warn .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .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-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-chevron {\n border-color: white; }\n\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-pagination-disabled .mat-tab-header-pagination-chevron {\n border-color: rgba(255, 255, 255, 0.4); }\n\n.mat-tab-group.mat-background-warn .mat-ripple-element, .mat-tab-nav-bar.mat-background-warn .mat-ripple-element {\n background-color: rgba(255, 255, 255, 0.12); }\n\n.mat-toolbar {\n background: whitesmoke;\n color: rgba(0, 0, 0, 0.87); }\n .mat-toolbar.mat-primary {\n background: #ef6c00;\n color: white; }\n .mat-toolbar.mat-accent {\n background: #039be5;\n color: white; }\n .mat-toolbar.mat-warn {\n background: #e53935;\n color: white; }\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 .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 .mat-toolbar .mat-input-element {\n caret-color: currentColor; }\n\n.mat-tooltip {\n background: rgba(97, 97, 97, 0.9); }\n\n.mat-tree {\n background: white; }\n\n.mat-tree-node,\n.mat-nested-tree-node {\n color: rgba(0, 0, 0, 0.87); }\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.mat-simple-snackbar-action {\n color: #039be5; }\n\nbody {\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.td-chip-content {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 12px; }\n\n.td-data-table-cell {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px; }\n\n.td-data-table-column {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 12px;\n font-weight: 600; }\n\n.td-dialog-title {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 20px;\n font-weight: 500; }\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.td-expansion-label {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 16px;\n font-weight: 400; }\n\n.td-expansion-sublabel {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 14px;\n font-weight: 400; }\n\n.td-key {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 14px; }\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.td-message-sublabel {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 14px; }\n\n.td-paging-bar {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 12px; }\n\n.td-step-label {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 14px;\n font-weight: 500; }\n\n.td-step-sublabel {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 14px;\n line-height: 20px; }\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\ntd-breadcrumb:last-of-type {\n font-weight: bold;\n cursor: default; }\n\nmat-list-item mat-icon,\n.mat-list-item-content mat-icon {\n color: rgba(0, 0, 0, 0.54); }\n mat-list-item mat-icon[matListAvatar],\n .mat-list-item-content mat-icon[matListAvatar] {\n background-color: rgba(0, 0, 0, 0.04); }\n\n.mat-list-text p {\n color: rgba(0, 0, 0, 0.38); }\n\n.mat-drawer-container {\n background-color: #e0e0e0; }\n\n[mat-icon-button].td-layout-menu-button {\n margin-left: 0; }\n ::ng-deep [dir='rtl'] [mat-icon-button].td-layout-menu-button {\n margin-right: 0;\n margin-left: 6px; }\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.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.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 .td-layout-footer.mat-primary {\n background: #ef6c00; }\n .td-layout-footer.mat-primary, .td-layout-footer.mat-primary mat-icon {\n color: white; }\n .td-layout-footer.mat-accent {\n background: #039be5; }\n .td-layout-footer.mat-accent, .td-layout-footer.mat-accent mat-icon {\n color: white; }\n .td-layout-footer.mat-warn {\n background: #e53935; }\n .td-layout-footer.mat-warn, .td-layout-footer.mat-warn mat-icon {\n color: white; }\n\n.td-steps .td-step-content,\n.td-steps .td-step-summary,\n.td-steps .td-step-actions {\n margin: 16px; }\n\n.td-steps .td-horizontal-line {\n border-bottom-color: rgba(0, 0, 0, 0.12); }\n\n.td-steps .td-vertical-line {\n border-left-color: rgba(0, 0, 0, 0.12); }\n\n.td-steps .td-step-link:focus:not(.mat-disabled) .td-step-header, .td-steps .td-step-link:hover:not(.mat-disabled) .td-step-header {\n background: rgba(0, 0, 0, 0.04); }\n\n.td-steps .td-step-header.mat-disabled {\n cursor: default; }\n\n.td-steps .td-step-header:focus:not(.mat-disabled), .td-steps .td-step-header:hover:not(.mat-disabled) {\n background: rgba(0, 0, 0, 0.04); }\n\n.td-steps .td-step-header .td-step-label-wrapper .td-step-label {\n color: rgba(0, 0, 0, 0.87); }\n\n.td-steps .td-step-header .td-step-label-wrapper .td-step-sublabel {\n color: rgba(0, 0, 0, 0.54); }\n\n.td-steps .td-step-header .td-step-label-wrapper.mat-inactive, .td-steps .td-step-header .td-step-label-wrapper.mat-inactive * {\n color: rgba(0, 0, 0, 0.38); }\n\n.td-steps .td-step-header .td-step-label-wrapper.mat-warn, .td-steps .td-step-header .td-step-label-wrapper.mat-warn * {\n color: #e53935; }\n\n.td-steps .td-step-header .mat-complete {\n color: #039be5; }\n\n.td-steps .td-circle {\n color: white; }\n .td-steps .td-circle.mat-active {\n background-color: #039be5; }\n .td-steps .td-circle.mat-inactive {\n background-color: rgba(0, 0, 0, 0.38); }\n .td-steps .td-circle mat-icon {\n fill: rgba(0, 0, 0, 0.87); }\n\n.td-steps .td-triangle {\n color: #e53935; }\n\n.td-steps .td-edit-icon {\n color: rgba(0, 0, 0, 0.54); }\n\n.td-steps .td-step-header-pagination-chevron {\n border-color: rgba(0, 0, 0, 0.87); }\n\n.td-steps .td-step-header-pagination-disabled .td-step-header-pagination-chevron {\n border-color: rgba(0, 0, 0, 0.38); }\n\n.td-expansion-panel-group .td-expansion-panel {\n transition: 120ms ease-in; }\n .td-expansion-panel-group .td-expansion-panel:not(:last-of-type).td-expanded {\n margin-bottom: 16px; }\n .td-expansion-panel-group .td-expansion-panel:not(:first-of-type).td-expanded {\n margin-top: 16px; }\n\n.td-expansion-panel {\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: white; }\n .td-expansion-panel .td-expansion-panel-header:focus:not(.mat-disabled), .td-expansion-panel .td-expansion-panel-header:hover:not(.mat-disabled) {\n background: rgba(0, 0, 0, 0.04); }\n .td-expansion-panel .td-expansion-panel-header .td-expansion-panel-header-content mat-icon.td-expand-icon {\n color: rgba(0, 0, 0, 0.54); }\n .td-expansion-panel .td-expansion-panel-header .td-expansion-panel-header-content.mat-disabled, .td-expansion-panel .td-expansion-panel-header .td-expansion-panel-header-content.mat-disabled * {\n color: rgba(0, 0, 0, 0.38); }\n .td-expansion-panel mat-icon.td-expand-icon {\n color: rgba(0, 0, 0, 0.54); }\n .td-expansion-panel .td-expansion-label, .td-expansion-panel .td-expansion-label *,\n .td-expansion-panel .td-expansion-sublabel,\n .td-expansion-panel .td-expansion-sublabel * {\n vertical-align: middle; }\n .td-expansion-panel .td-expansion-sublabel {\n color: rgba(0, 0, 0, 0.54); }\n\ntd-chips .mat-basic-chip {\n background: #e0e0e0;\n color: rgba(0, 0, 0, 0.87); }\n td-chips .mat-basic-chip:focus:not(.td-chip-disabled) mat-icon:hover {\n color: rgba(0, 0, 0, 0.54); }\n td-chips .mat-basic-chip:focus:not(.td-chip-disabled).mat-primary {\n background: #ef6c00; }\n td-chips .mat-basic-chip:focus:not(.td-chip-disabled).mat-primary, td-chips .mat-basic-chip:focus:not(.td-chip-disabled).mat-primary mat-icon {\n color: white; }\n td-chips .mat-basic-chip:focus:not(.td-chip-disabled).mat-accent {\n background: #039be5; }\n td-chips .mat-basic-chip:focus:not(.td-chip-disabled).mat-accent, td-chips .mat-basic-chip:focus:not(.td-chip-disabled).mat-accent mat-icon {\n color: white; }\n td-chips .mat-basic-chip:focus:not(.td-chip-disabled).mat-warn {\n background: #e53935; }\n td-chips .mat-basic-chip:focus:not(.td-chip-disabled).mat-warn, td-chips .mat-basic-chip:focus:not(.td-chip-disabled).mat-warn mat-icon {\n color: white; }\n td-chips .mat-basic-chip mat-icon.td-chip-removal {\n color: rgba(0, 0, 0, 0.38); }\n td-chips .mat-basic-chip mat-icon.td-chip-removal:hover {\n color: rgba(0, 0, 0, 0.54); }\n\ntd-chips .mat-form-field-underline {\n background-color: rgba(0, 0, 0, 0.42); }\n\ntd-chips.mat-primary .mat-form-field-underline .mat-form-field-ripple {\n background-color: #ef6c00; }\n\ntd-chips.mat-accent .mat-form-field-underline .mat-form-field-ripple {\n background-color: #039be5; }\n\ntd-chips.mat-warn .mat-form-field-underline .mat-form-field-ripple {\n background-color: #e53935; }\n\ntd-chips.ng-invalid .mat-form-field-underline .mat-form-field-ripple {\n background-color: #e53935; }\n\ntd-chips.ng-invalid .mat-form-field-label-wrapper > label.mat-form-field-label.mat-form-field-empty {\n color: #e53935; }\n\ntd-file-upload .td-file-upload-cancel mat-icon {\n background-color: #fafafa; }\n\ntd-file-input {\n /**\n * Class that is added ondragenter by the [TdFileDrop] directive.\n */ }\n td-file-input .drop-zone {\n transition: background 400ms 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.td-dialog-message {\n color: rgba(0, 0, 0, 0.54); }\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: '\\200E'; }\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\ntd-paging-bar, td-paging-bar mat-select .mat-select-value {\n color: rgba(0, 0, 0, 0.54); }\n\n.td-loading-wrapper.td-overlay .td-loading {\n background: rgba(255, 255, 255, 0.8); }\n\ntd-data-table {\n border-bottom: 1px solid rgba(0, 0, 0, 0.12); }\n\n.td-data-table-scrollable {\n border-top: 1px solid rgba(0, 0, 0, 0.12); }\n\n.td-data-table-column-resizer .td-data-table-column-separator {\n border-right: 2px solid rgba(0, 0, 0, 0.12);\n opacity: 0.3; }\n\n.td-data-table-column-resizer:hover .td-data-table-column-separator, .td-data-table-column-resizer.td-resizing .td-data-table-column-separator {\n opacity: 1; }\n\ntable[td-data-table] .td-data-table-column-row,\ntable[td-data-table] .td-data-table-row {\n border-bottom-color: rgba(0, 0, 0, 0.12); }\n\ntable[td-data-table] .mat-checkbox-cell,\ntable[td-data-table] .mat-checkbox-column {\n color: rgba(0, 0, 0, 0.54); }\n table[td-data-table] .mat-checkbox-cell mat-pseudo-checkbox.mat-pseudo-checkbox-checked,\n table[td-data-table] .mat-checkbox-column mat-pseudo-checkbox.mat-pseudo-checkbox-checked {\n background-color: #039be5; }\n\ntable[td-data-table] .td-data-table-cell mat-form-field .mat-form-field-underline {\n display: none; }\n\ntable[td-data-table] .td-data-table-column {\n color: rgba(0, 0, 0, 0.54); }\n table[td-data-table] .td-data-table-column * {\n vertical-align: middle; }\n table[td-data-table] .td-data-table-column mat-icon.td-data-table-sort-icon {\n color: rgba(0, 0, 0, 0.38); }\n table[td-data-table] .td-data-table-column.mat-active,\n table[td-data-table] .td-data-table-column.mat-active mat-icon {\n color: black; }\n\ntable[td-data-table].mat-selectable tbody > tr.td-data-table-row.td-selected {\n background-color: whitesmoke; }\n\ntable[td-data-table].mat-selectable tbody > tr.td-data-table-row:focus {\n background-color: rgba(0, 0, 0, 0.04); }\n\ntable[td-data-table].mat-clickable tbody > tr.td-data-table-row:hover {\n background-color: rgba(0, 0, 0, 0.04); }\n\n.mat-selected-title {\n background-color: rgba(3, 155, 229, 0.12);\n color: #039be5; }\n\n.td-notification-count {\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 .td-notification-count.mat-warn {\n background-color: #e53935;\n color: white; }\n .td-notification-count.mat-primary {\n background-color: #ef6c00;\n color: white; }\n .td-notification-count.mat-accent {\n background-color: #039be5;\n color: white; }\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","$black-87-opacity: rgba(black, 0.87);\n$white-87-opacity: rgba(white, 0.87);\n$black-12-opacity: rgba(black, 0.12);\n$white-12-opacity: rgba(white, 0.12);\n$black-6-opacity: rgba(black, 0.06);\n$white-6-opacity: rgba(white, 0.06);\n\n$mat-red: (\n 50: #ffebee,\n 100: #ffcdd2,\n 200: #ef9a9a,\n 300: #e57373,\n 400: #ef5350,\n 500: #f44336,\n 600: #e53935,\n 700: #d32f2f,\n 800: #c62828,\n 900: #b71c1c,\n A100: #ff8a80,\n A200: #ff5252,\n A400: #ff1744,\n A700: #d50000,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: white,\n A700: white,\n )\n);\n\n$mat-pink: (\n 50: #fce4ec,\n 100: #f8bbd0,\n 200: #f48fb1,\n 300: #f06292,\n 400: #ec407a,\n 500: #e91e63,\n 600: #d81b60,\n 700: #c2185b,\n 800: #ad1457,\n 900: #880e4f,\n A100: #ff80ab,\n A200: #ff4081,\n A400: #f50057,\n A700: #c51162,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: white,\n A700: white,\n )\n);\n\n$mat-purple: (\n 50: #f3e5f5,\n 100: #e1bee7,\n 200: #ce93d8,\n 300: #ba68c8,\n 400: #ab47bc,\n 500: #9c27b0,\n 600: #8e24aa,\n 700: #7b1fa2,\n 800: #6a1b9a,\n 900: #4a148c,\n A100: #ea80fc,\n A200: #e040fb,\n A400: #d500f9,\n A700: #aa00ff,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: white,\n 400: white,\n 500: $white-87-opacity,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: white,\n A700: white,\n )\n);\n\n$mat-deep-purple: (\n 50: #ede7f6,\n 100: #d1c4e9,\n 200: #b39ddb,\n 300: #9575cd,\n 400: #7e57c2,\n 500: #673ab7,\n 600: #5e35b1,\n 700: #512da8,\n 800: #4527a0,\n 900: #311b92,\n A100: #b388ff,\n A200: #7c4dff,\n A400: #651fff,\n A700: #6200ea,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: white,\n 400: white,\n 500: $white-87-opacity,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: $white-87-opacity,\n A700: $white-87-opacity,\n )\n);\n\n$mat-indigo: (\n 50: #e8eaf6,\n 100: #c5cae9,\n 200: #9fa8da,\n 300: #7986cb,\n 400: #5c6bc0,\n 500: #3f51b5,\n 600: #3949ab,\n 700: #303f9f,\n 800: #283593,\n 900: #1a237e,\n A100: #8c9eff,\n A200: #536dfe,\n A400: #3d5afe,\n A700: #304ffe,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: white,\n 400: white,\n 500: $white-87-opacity,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: white,\n A700: $white-87-opacity,\n )\n);\n\n$mat-blue: (\n 50: #e3f2fd,\n 100: #bbdefb,\n 200: #90caf9,\n 300: #64b5f6,\n 400: #42a5f5,\n 500: #2196f3,\n 600: #1e88e5,\n 700: #1976d2,\n 800: #1565c0,\n 900: #0d47a1,\n A100: #82b1ff,\n A200: #448aff,\n A400: #2979ff,\n A700: #2962ff,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: white,\n A700: white,\n )\n);\n\n$mat-light-blue: (\n 50: #e1f5fe,\n 100: #b3e5fc,\n 200: #81d4fa,\n 300: #4fc3f7,\n 400: #29b6f6,\n 500: #03a9f4,\n 600: #039be5,\n 700: #0288d1,\n 800: #0277bd,\n 900: #01579b,\n A100: #80d8ff,\n A200: #40c4ff,\n A400: #00b0ff,\n A700: #0091ea,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: white,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: white,\n )\n);\n\n$mat-cyan: (\n 50: #e0f7fa,\n 100: #b2ebf2,\n 200: #80deea,\n 300: #4dd0e1,\n 400: #26c6da,\n 500: #00bcd4,\n 600: #00acc1,\n 700: #0097a7,\n 800: #00838f,\n 900: #006064,\n A100: #84ffff,\n A200: #18ffff,\n A400: #00e5ff,\n A700: #00b8d4,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: white,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n )\n);\n\n$mat-teal: (\n 50: #e0f2f1,\n 100: #b2dfdb,\n 200: #80cbc4,\n 300: #4db6ac,\n 400: #26a69a,\n 500: #009688,\n 600: #00897b,\n 700: #00796b,\n 800: #00695c,\n 900: #004d40,\n A100: #a7ffeb,\n A200: #64ffda,\n A400: #1de9b6,\n A700: #00bfa5,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n )\n);\n\n$mat-green: (\n 50: #e8f5e9,\n 100: #c8e6c9,\n 200: #a5d6a7,\n 300: #81c784,\n 400: #66bb6a,\n 500: #4caf50,\n 600: #43a047,\n 700: #388e3c,\n 800: #2e7d32,\n 900: #1b5e20,\n A100: #b9f6ca,\n A200: #69f0ae,\n A400: #00e676,\n A700: #00c853,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n )\n);\n\n$mat-light-green: (\n 50: #f1f8e9,\n 100: #dcedc8,\n 200: #c5e1a5,\n 300: #aed581,\n 400: #9ccc65,\n 500: #8bc34a,\n 600: #7cb342,\n 700: #689f38,\n 800: #558b2f,\n 900: #33691e,\n A100: #ccff90,\n A200: #b2ff59,\n A400: #76ff03,\n A700: #64dd17,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $black-87-opacity,\n 700: $black-87-opacity,\n 800: white,\n 900: white,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n )\n);\n\n$mat-lime: (\n 50: #f9fbe7,\n 100: #f0f4c3,\n 200: #e6ee9c,\n 300: #dce775,\n 400: #d4e157,\n 500: #cddc39,\n 600: #c0ca33,\n 700: #afb42b,\n 800: #9e9d24,\n 900: #827717,\n A100: #f4ff81,\n A200: #eeff41,\n A400: #c6ff00,\n A700: #aeea00,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $black-87-opacity,\n 700: $black-87-opacity,\n 800: $black-87-opacity,\n 900: white,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n )\n);\n\n$mat-yellow: (\n 50: #fffde7,\n 100: #fff9c4,\n 200: #fff59d,\n 300: #fff176,\n 400: #ffee58,\n 500: #ffeb3b,\n 600: #fdd835,\n 700: #fbc02d,\n 800: #f9a825,\n 900: #f57f17,\n A100: #ffff8d,\n A200: #ffff00,\n A400: #ffea00,\n A700: #ffd600,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $black-87-opacity,\n 700: $black-87-opacity,\n 800: $black-87-opacity,\n 900: $black-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n )\n);\n\n$mat-amber: (\n 50: #fff8e1,\n 100: #ffecb3,\n 200: #ffe082,\n 300: #ffd54f,\n 400: #ffca28,\n 500: #ffc107,\n 600: #ffb300,\n 700: #ffa000,\n 800: #ff8f00,\n 900: #ff6f00,\n A100: #ffe57f,\n A200: #ffd740,\n A400: #ffc400,\n A700: #ffab00,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $black-87-opacity,\n 700: $black-87-opacity,\n 800: $black-87-opacity,\n 900: $black-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n )\n);\n\n$mat-orange: (\n 50: #fff3e0,\n 100: #ffe0b2,\n 200: #ffcc80,\n 300: #ffb74d,\n 400: #ffa726,\n 500: #ff9800,\n 600: #fb8c00,\n 700: #f57c00,\n 800: #ef6c00,\n 900: #e65100,\n A100: #ffd180,\n A200: #ffab40,\n A400: #ff9100,\n A700: #ff6d00,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $black-87-opacity,\n 700: $black-87-opacity,\n 800: white,\n 900: white,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: black,\n )\n);\n\n$mat-deep-orange: (\n 50: #fbe9e7,\n 100: #ffccbc,\n 200: #ffab91,\n 300: #ff8a65,\n 400: #ff7043,\n 500: #ff5722,\n 600: #f4511e,\n 700: #e64a19,\n 800: #d84315,\n 900: #bf360c,\n A100: #ff9e80,\n A200: #ff6e40,\n A400: #ff3d00,\n A700: #dd2c00,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: white,\n 900: white,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: white,\n A700: white,\n )\n);\n\n$mat-brown: (\n 50: #efebe9,\n 100: #d7ccc8,\n 200: #bcaaa4,\n 300: #a1887f,\n 400: #8d6e63,\n 500: #795548,\n 600: #6d4c41,\n 700: #5d4037,\n 800: #4e342e,\n 900: #3e2723,\n A100: #d7ccc8,\n A200: #bcaaa4,\n A400: #8d6e63,\n A700: #5d4037,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: white,\n 400: white,\n 500: $white-87-opacity,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: white,\n A700: $white-87-opacity,\n )\n);\n\n$mat-grey: (\n 0: #ffffff,\n 50: #fafafa,\n 100: #f5f5f5,\n 200: #eeeeee,\n 300: #e0e0e0,\n 400: #bdbdbd,\n 500: #9e9e9e,\n 600: #757575,\n 700: #616161,\n 800: #424242,\n 900: #212121,\n 1000: #000000,\n A100: #ffffff,\n A200: #eeeeee,\n A400: #bdbdbd,\n A700: #616161,\n contrast: (\n 0: $black-87-opacity,\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n 1000: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $white-87-opacity,\n )\n);\n\n$mat-blue-grey: (\n 50: #eceff1,\n 100: #cfd8dc,\n 200: #b0bec5,\n 300: #90a4ae,\n 400: #78909c,\n 500: #607d8b,\n 600: #546e7a,\n 700: #455a64,\n 800: #37474f,\n 900: #263238,\n A100: #cfd8dc,\n A200: #b0bec5,\n A400: #78909c,\n A700: #455a64,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: white,\n 500: white,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: white,\n A700: $white-87-opacity,\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:\n #{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// 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 @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 transition: mat-elevation-transition-property-value($duration, $easing);\n will-change: $mat-elevation-property;\n}\n","@import '../chips/chips-theme';\n@import '../data-table/data-table-theme';\n@import '../dialogs/dialog-theme';\n@import '../expansion-panel/expansion-panel-theme';\n@import '../json-formatter/json-formatter-theme';\n@import '../message/message-theme';\n@import '../paging/paging-bar-theme';\n@import '../steps/steps-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-chips-typography($config);\n @include td-data-table-typography($config);\n @include td-dialog-typography($config);\n @include td-expansion-panel-typography($config);\n @include td-json-formatter-typography($config);\n @include td-message-typography($config);\n @include td-paging-bar-typography($config);\n @include td-steps-typography($config);\n @include td-layout-typography($config);\n}\n","// Utility for fetching a nested value from a typography config.\n@function _td-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@function td-font-size($config, $level) {\n @return _td-get-type-value($config, $level, font-size);\n}\n\n// Gets the line height for a level inside a typography config.\n@function td-line-height($config, $level) {\n @return _td-get-type-value($config, $level, line-height);\n}\n\n// Gets the font weight for a level inside a typography config.\n@function td-font-weight($config, $level) {\n @return _td-get-type-value($config, $level, font-weight);\n}\n\n// Gets the font-family from a typography config and removes the quotes around it.\n@function td-font-family($config, $level: null) {\n $font-family: map-get($config, font-family);\n\n @if $level != null {\n $font-family: _td-get-type-value($config, $level, font-family);\n }\n\n @return unquote($font-family);\n}\n\n// Represents a typography level from the Material design spec.\n@function td-typography-level($font-size, $line-height: $font-size, $font-weight: 400) {\n @return (\n font-size: $font-size,\n line-height: $line-height,\n font-weight: $font-weight\n );\n}\n","@import '../common/styles/theme-functions';\n@import '../common/styles/typography-functions';\n\n@mixin td-chips-typography($config) {\n .td-chip-content {\n font: {\n family: td-font-family($config);\n size: td-font-size($config, caption);\n }\n }\n}\n\n@mixin td-chips-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 $is-dark-theme: map-get($theme, is-dark);\n\n // chips\n td-chips {\n // chip\n .mat-basic-chip {\n background: mat-color($background, status-bar);\n color: mat-color($foreground, text);\n &:focus:not(.td-chip-disabled) {\n mat-icon:hover {\n color: mat-color($foreground, icon);\n }\n &.mat-primary {\n background: mat-color($primary);\n &, mat-icon {\n color: mat-color($primary, default-contrast);\n }\n }\n &.mat-accent {\n background: mat-color($accent);\n &, mat-icon {\n color: mat-color($accent, default-contrast);\n }\n }\n &.mat-warn {\n background: mat-color($warn);\n &, mat-icon {\n color: mat-color($warn, default-contrast);\n }\n }\n }\n mat-icon.td-chip-removal {\n color: mat-color($foreground, hint-text);\n &:hover {\n color: mat-color($foreground, icon);\n }\n }\n }\n .mat-form-field-underline {\n background-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));\n }\n &.mat-primary {\n .mat-form-field-underline .mat-form-field-ripple {\n background-color: mat-color($primary);\n }\n }\n &.mat-accent {\n .mat-form-field-underline .mat-form-field-ripple {\n background-color: mat-color($accent);\n }\n }\n &.mat-warn {\n .mat-form-field-underline .mat-form-field-ripple {\n background-color: mat-color($warn);\n }\n }\n &.ng-invalid {\n .mat-form-field-underline .mat-form-field-ripple {\n background-color: mat-color($warn);\n }\n .mat-form-field-label-wrapper > label.mat-form-field-label.mat-form-field-empty {\n color: mat-color($warn);\n }\n }\n }\n}\n","@import '../common/styles/typography-functions';\n\n@mixin td-data-table-typography($config) {\n .td-data-table-cell {\n font: {\n family: td-font-family($config);\n size: td-font-size($config, body-1);\n weight: td-font-weight($config, body-1);\n }\n line-height: td-line-height($config, body-1);\n }\n .td-data-table-column {\n font: {\n family: td-font-family($config);\n size: td-font-size($config, caption);\n weight: 600;\n }\n }\n}\n\n@mixin td-data-table-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 td-data-table {\n border-bottom: 1px solid mat-color($foreground, divider);\n }\n .td-data-table-scrollable {\n border-top: 1px solid mat-color($foreground, divider);\n }\n .td-data-table-column-resizer {\n .td-data-table-column-separator {\n border-right: 2px solid mat-color($foreground, divider);\n opacity: 0.3;\n }\n &:hover, &.td-resizing {\n .td-data-table-column-separator {\n opacity: 1;\n }\n }\n }\n table[td-data-table] {\n .td-data-table-column-row,\n .td-data-table-row {\n border-bottom-color: mat-color($foreground, divider);\n }\n .mat-checkbox-cell,\n .mat-checkbox-column {\n color: mat-color($foreground, secondary-text);\n mat-pseudo-checkbox.mat-pseudo-checkbox-checked {\n background-color: mat-color($accent);\n }\n }\n .td-data-table-cell {\n mat-form-field {\n .mat-form-field-underline {\n display: none;\n }\n }\n }\n .td-data-table-column {\n color: mat-color($foreground, secondary-text);\n * {\n vertical-align: middle;\n }\n mat-icon {\n &.td-data-table-sort-icon {\n color: mat-color($foreground, disabled);\n }\n }\n &.mat-active,\n &.mat-active mat-icon {\n color: mat-color($foreground, base);\n }\n }\n &.mat-selectable tbody > tr.td-data-table-row {\n &.td-selected {\n background-color: mat-color($background, 'app-bar');\n }\n &:focus {\n background-color: mat-color($background, 'hover');\n }\n }\n &.mat-clickable tbody > tr.td-data-table-row {\n &:hover {\n background-color: mat-color($background, 'hover');\n }\n }\n }\n .mat-selected-title {\n background-color: mat-color($accent, 0.12);\n color: mat-color($accent);\n }\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 .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 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 .td-dialog-message {\n color: mat-color($foreground, secondary-text);\n }\n}\n","@import '../common/styles/variables';\n@import '../common/styles/elevation';\n@import '../common/styles/theme-functions';\n@import '../common/styles/typography-functions';\n\n@mixin td-expansion-panel-typography($config) {\n .td-expansion-label {\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 .td-expansion-sublabel {\n font: {\n family: td-font-family($config);\n size: td-font-size($config, body-1);\n weight: td-font-weight($config, body-1);\n }\n }\n}\n\n@mixin td-expansion-panel-theme($theme) {\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-expansion-panel-group {\n .td-expansion-panel {\n transition: 120ms ease-in;\n &:not(:last-of-type) {\n &.td-expanded {\n margin-bottom: $margin;\n }\n }\n &:not(:first-of-type) {\n &.td-expanded {\n margin-top: $margin;\n }\n }\n }\n }\n\n .td-expansion-panel {\n @include mat-elevation(1);\n background-color: mat-color($background, card);\n .td-expansion-panel-header {\n &:focus:not(.mat-disabled),\n &:hover:not(.mat-disabled) {\n background: mat-color($background, 'hover');\n }\n .td-expansion-panel-header-content {\n mat-icon.td-expand-icon {\n color: mat-color($foreground, icon);\n }\n &.mat-disabled {\n &, & * {\n color: mat-color($foreground, disabled);\n }\n }\n }\n }\n mat-icon.td-expand-icon {\n color: mat-color($foreground, icon);\n }\n .td-expansion-label,\n .td-expansion-sublabel {\n &, & * {\n vertical-align: middle;\n }\n }\n .td-expansion-sublabel {\n color: mat-color($foreground, secondary-text);\n }\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 .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 .td-key {\n &.td-key-node {\n &:focus,\n &:hover {\n background-color: mat-color($background, hover);\n }\n .td-node-icon {\n color: mat-color($foreground, secondary-text);\n }\n }\n }\n .key {\n color: mat-color($primary);\n }\n .value {\n .string {\n color: mat-color($warn);\n }\n .number {\n color: mat-color($accent);\n }\n .boolean {\n color: mat-color($accent);\n }\n .null,\n .undefined {\n color: mat-color($foreground, disabled-text);\n }\n .function {\n color: mat-color($primary);\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 line-height: td-line-height($config, body-2);\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 &.mat-accent {\n color: mat-color($accent);\n background-color: mat-color($accent, 0.15);\n }\n &.mat-warn {\n color: mat-color($warn);\n background-color: mat-color($warn, 0.15);\n }\n }\n}\n","@import '../common/styles/theme-functions';\n@import '../common/styles/typography-functions';\n\n@mixin td-paging-bar-typography($config) {\n .td-paging-bar {\n font: {\n family: td-font-family($config);\n size: td-font-size($config, caption);\n }\n }\n}\n\n@mixin td-paging-bar-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 td-paging-bar {\n &, & mat-select .mat-select-value {\n color: mat-color($foreground, secondary-text);\n }\n }\n}\n","@import '../common/styles/variables';\n@import '../common/styles/theme-functions';\n@import '../common/styles/typography-functions';\n\n@mixin td-steps-typography($config) {\n .td-step-label {\n font: {\n family: td-font-family($config);\n size: td-font-size($config, body-2);\n weight: td-font-weight($config, body-2);\n }\n }\n .td-step-sublabel {\n font: {\n family: td-font-family($config);\n size: td-font-size($config, body-1);\n }\n line-height: td-line-height($config, body-1);\n }\n}\n\n@mixin td-steps-theme($theme) {\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 .td-steps {\n .td-step-content,\n .td-step-summary,\n .td-step-actions {\n margin: $margin;\n }\n // steps\n .td-horizontal-line {\n border-bottom-color: mat-color($foreground, divider);\n }\n .td-vertical-line {\n border-left-color: mat-color($foreground, divider);\n }\n // header\n .td-step-link {\n &:focus:not(.mat-disabled),\n &:hover:not(.mat-disabled) {\n .td-step-header {\n background: mat-color($background, 'hover');\n }\n }\n }\n .td-step-header {\n &.mat-disabled {\n cursor: default;\n }\n &:focus:not(.mat-disabled),\n &:hover:not(.mat-disabled) {\n background: mat-color($background, 'hover');\n }\n .td-step-label-wrapper {\n .td-step-label {\n color: mat-color($foreground, text);\n }\n .td-step-sublabel {\n color: mat-color($foreground, secondary-text);\n }\n &.mat-inactive {\n &, & * {\n color: mat-color($foreground, disabled);\n }\n }\n &.mat-warn {\n &, & * {\n color: mat-color($warn);\n }\n }\n }\n .mat-complete {\n color: mat-color($accent);\n }\n }\n .td-circle {\n color: mat-color($background, card);\n &.mat-active {\n background-color: mat-color($accent);\n }\n &.mat-inactive {\n background-color: mat-color($foreground, disabled);\n }\n & mat-icon {\n fill: mat-color($foreground, text);\n }\n }\n .td-triangle {\n color: mat-color($warn);\n }\n .td-edit-icon {\n color: mat-color($foreground, icon);\n }\n\n .td-step-header-pagination-chevron {\n border-color: mat-color($foreground, text);\n }\n .td-step-header-pagination-disabled .td-step-header-pagination-chevron {\n border-color: mat-color($foreground, disabled-text);\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 .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 line-height: td-line-height($config, body-1);\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 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 ::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 z-index: 1;\n }\n }\n .mat-drawer-side.td-layout-sidenav {\n @include mat-elevation(2);\n }\n .td-layout-footer {\n background: mat-color($background, app-bar);\n color: mat-color($foreground, text);\n @include mat-elevation(2);\n &.mat-primary {\n background: mat-color($primary);\n &, mat-icon {\n color: mat-color($primary, default-contrast);\n }\n }\n &.mat-accent {\n background: mat-color($accent);\n &, mat-icon {\n color: mat-color($accent, default-contrast);\n }\n }\n &.mat-warn {\n background: mat-color($warn);\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 &[matListAvatar] {\n background-color: mat-color($background, hover);\n }\n }\n }\n .mat-list-text {\n p {\n color: mat-color($foreground, disabled);\n }\n }\n}\n","@import 'theme-functions';\n\n// Teradata UI Platform\n// ------------------------------\n$navigation-drawer-width: 320px !default;\n$padding: 16px;\n$margin: $padding;\n$step-circle: 24px;\n\n// Typography\n// ------------------------------\n$font-family: RobotoDraft, Roboto, 'Helvetica Neue', sans-serif !default;\n$font-size: 10px;\n\n$display-4-font-size-base: rem(11.2) !default;\n$display-3-font-size-base: rem(5.6) !default;\n$display-2-font-size-base: rem(4.5) !default;\n$display-1-font-size-base: rem(3.4) !default;\n$headline-font-size-base: rem(2.4) !default;\n$title-font-size-base: rem(2) !default;\n$subhead-font-size-base: rem(1.6) !default;\n\n$body-font-size-base: rem(1.4) !default;\n$caption-font-size-base: rem(1.2) !default;\n\n// Layout\n$baseline-grid: 8px !default;\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$layout-gutter-width: ($baseline-grid * 2) !default;\n\n// Typography\n$mat-body-font-size-base: rem(1.4) !default;\n\n// App bar variables\n$app-bar-height: 64px;\n\n// card header variables\n$mat-card-header-size: 40px;\n$mat-card-radius: 2px;\n\n// Icons\n$icon-size: rem(2.4);\n\n// Toast\n$toast-height: $baseline-grid * 3 !default;\n$toast-margin: $baseline-grid * 1 !default;\n\n// Whiteframes\n$whiteframe-shadow-z1: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !default;\n$whiteframe-zindex-z1: 1 !default;\n$whiteframe-shadow-z2: 0 8px 17px rgba(0, 0, 0, 0.2) !default;\n$whiteframe-zindex-z2: 2 !default;\n$whiteframe-shadow-z3: 0 17px 50px rgba(0, 0, 0, 0.19) !default;\n$whiteframe-zindex-z3: 3 !default;\n$whiteframe-shadow-z4: 0 16px 28px 0 rgba(0, 0, 0, 0.22) !default;\n$whiteframe-zindex-z4: 4 !default;\n$whiteframe-shadow-z5: 0 27px 24px 0 rgba(0, 0, 0, 0.2) !default;\n$whiteframe-zindex-z5: 5 !default;\n\n// Z-indexes\n$z-index-tooltip: 100 !default;\n$z-index-dialog: 80 !default;\n$z-index-toast: 90 !default;\n$z-index-bottom-sheet: 70 !default;\n$z-index-scroll-mask: 65 !default;\n$z-index-sidenav: 60 !default;\n$z-index-backdrop: 50 !default;\n$z-index-toolbar: 30 !default;\n$z-index-fab: 20 !default;\n$z-index-progress-circular: 2 !default; // Used to fix animation bug in Chrome\n\n// Easing Curves\n\n// The default animation curves used by material design.\n$mat-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;\n$mat-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;\n$mat-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;\n\n$ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default;\n\n$swift-ease-out-duration: 0.4s !default;\n$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;\n$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;\n\n$swift-ease-in-duration: 0.3s !default;\n$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;\n$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;\n\n$swift-ease-in-out-duration: 0.5s !default;\n$swift-ease-in-out-timing-function: cubic-bezier(0.35, 0, 0.25, 1) !default;\n$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;\n\n$swift-linear-duration: 0.08s !default;\n$swift-linear-timing-function: linear !default;\n$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;\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 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","@import '../common/styles/theme-functions';\n\n@mixin td-loading-theme($theme) {\n $background: map-get($theme, background);\n .td-loading-wrapper {\n &.td-overlay .td-loading {\n background: rgba(mat-color($background, dialog), 0.8);\n }\n }\n}\n","@import '../common/styles/variables';\n@import '../common/styles/elevation';\n@import '../common/styles/theme-functions';\n\n@mixin td-notification-count-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-notification-count {\n @include mat-elevation(1);\n &.mat-warn {\n background-color: mat-color($warn);\n color: mat-color($warn, default-contrast);\n }\n &.mat-primary {\n background-color: mat-color($primary);\n color: mat-color($primary, default-contrast);\n }\n &.mat-accent {\n background-color: mat-color($accent);\n color: mat-color($accent, default-contrast);\n }\n }\n}\n"],"sourceRoot":"/source/"}
1
+ {"version":3,"sources":["../../../node_modules/@angular/material/_theming.scss","common/styles/core/_button.scss","common/styles/_layout.scss","theming/prebuilt/orange-light-blue.css","common/styles/_palette-light.scss","common/styles/_elevation.scss","typography/_all-typography.scss","common/styles/_typography-functions.scss","chips/_chips-theme.scss","data-table/_data-table-theme.scss","dialogs/_dialog-theme.scss","expansion-panel/_expansion-panel-theme.scss","json-formatter/_json-formatter-theme.scss","message/_message-theme.scss","paging/_paging-bar-theme.scss","steps/_steps-theme.scss","layout/_layout-theme.scss","breadcrumbs/_breadcrumbs-theme.scss","common/_common-theme.scss","common/styles/_variables.scss","file/_file-theme.scss","loading/_loading-theme.scss","notifications/_notification-count-theme.scss"],"names":[],"mappings":"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AzxF2B,EAwyF5B;EAjBD;IA/BA,oBI79GY;IJ89GZ,aI/8GY,EJm/GT;EANH;IA/BA,oBIvuHY;IJwuHZ,aIztHY,EJiwHT;EAVH;IA/BA,oBI76HY;IJ86HZ,aI/5HY,EJ28HT;EAxCH;;;IAGE,+BAA8B,EAC/B;EAED;;;;;IAKE,eAAc,EACf;EAED;IACE,0BAAyB,EAC1B;;AAyDD;EACE,kCIz8GU,EJ08GX;;AA8tBD;EACE,kBAllHe,EAmlHhB;;AAED;;EAEE,2BA5iH2B,EA6iH5B;;AA3sBD;EAGE,gCArhH6B;EAshH7B,oBAA8D;EKt5HhE,oIAGyD;UAHzD,4HAGyD,ELs5HxD;;AAED;EACE,eI31HU,EJ41HX;;AM5gID;EACE,kDCT2B,EDU5B;;AElCD;EAEI,kDDsByB;ECrBzB,gBFUoC,EERvC;;ACND;EAEI,kDFuByB;EEtBzB,gBHUoC;EGTpC,iBHS+C;EGPjD,kBHO4C,EGN7C;;AACD;EAEI,kDFeyB;EEdzB,gBHGoC;EGFpC,iBAAW,EAEd;;ACbD;EAEI,kDHsByB;EGrBzB,gBJKoC;EIJpC,iBJI+C,EIFlD;;AACD;EAEI,kDHeyB;EGdzB,gBJDoC;EIEpC,iBJF+C;EIIjD,kBJJ4C,EIK7C;;ACZD;EAEI,kDJoByB;EInBzB,gBLIoC;EKHpC,iBLG+C,EKDlD;;AACD;EAEI,kDJayB;EIZzB,gBLAoC;EKCpC,iBLD+C,EKGlD;;ACfD;EAEI,kDLsByB;EKrBzB,gBNSoC,EMPvC;;ACLD;EAEI,kDNsByB;EMrBzB,gBPQoC;EOPpC,iBAAW;EAEb,kBPK4C,EOJ7C;;AACD;EAEI,kDNcyB;EMbzB,gBPCoC,EOCvC;;ACbD;EAEI,kDPsByB;EOrBzB,gBRUoC,EQRvC;;ACJD;EAEI,kDRqByB;EQpBzB,gBTOoC;ESNpC,iBTM+C,ESJlD;;AACD;EAEI,kDRcyB;EQbzB,gBTCoC;ESCtC,kBTD4C,ESE7C;;ACbD;EAGM,kDToBuB;ESnBvB,gBVIkC,EUFrC;;AANH;EASM,kDTcuB;ESbvB,gBVCkC;EUAlC,iBAAW;EAEb,kBVF0C,EUG3C;;AAdH;EAiBM,kDTMuB;ESLvB,gBVRkC;EUSlC,iBAAW;EAEb,kBVX0C,EUY3C;;ACxBH;EAEI,kBAAiB;EACjB,gBAAe,EAChB;;ACAH;;EAGI,2BlBurCyB,EkBnrC1B;EAPH;;IAKM,sClB2oCgB,EkB1oCjB;;AAGL;EAEI,2BlB6fyB,EkB5f1B;;AFmBH;EACE,0BhBsiCU,EgBriCX;;Abg9DH;Ea78DI,eAAc,EAKf;EAJC;IACE,gBAAe;IACf,iBAAgB,EACjB;;AAGH;;;;;;EXiGA,kIAGyD;UAHzD,0HAGyD;EW5FrD,WAAU,EACX;;AAEH;EXsFA,kIAGyD;UAHzD,0HAGyD,EWvFxD;;AACD;EACE,uBhB0gCU;EgBzgCV,2BhBioC2B;EKhjC7B,kIAGyD;UAHzD,0HAGyD,EWhExD;EAtBD;IAKI,oBZyZQ,EYrZT;IATH;MAOM,aZsaM,EYraP;EARL;IAWI,oBZyIQ,EYrIT;IAfH;MAaM,aZsJM,EYrJP;EAdL;IAiBI,oBZnEQ,EYuET;IArBH;MAmBM,aZtDM,EYuDP;;AD1DL;;;EAII,aIzBQ,EJ0BT;;AALH;EAQI,yCf8eoB,Ee7erB;;AATH;EAWI,uCf2eoB,Ee1erB;;AAZH;EAkBQ,gCf2mCc,Ee1mCf;;AAnBP;EAwBM,gBAAe,EAChB;;AAzBL;EA4BM,gCfimCgB,EehmCjB;;AA7BL;EAgCQ,2BfyoCqB,EexoCtB;;AAjCP;EAmCQ,2BfidsB,EehdvB;;AApCP;EAuCU,2Bf8cmB,Ee7cpB;;AAxCT;EA4CU,eXxDE,EWyDH;;AA7CT;EAiDM,eXyIM,EWxIP;;AAlDL;EAqDI,afykCa,Ee/jCd;EA/DH;IAuDM,0BXmIM,EWlIP;EAxDL;IA0DM,sCf2buB,Ee1bxB;EA3DL;IA6DM,0Bf4mCuB,Ee3mCxB;;AA9DL;EAiEI,eX7EQ,EW8ET;;AAlEH;EAoEI,2BfmmCyB,EelmC1B;;AArEH;EAwEI,kCfimCyB,EehmC1B;;AAzEH;EA2EI,kCf0ayB,Eeza1B;;AJ1EH;EAEI,kCAAyB;EAAzB,0BAAyB,EAW1B;EAbH;IAKQ,oBQ5BI,ER6BL;EANP;IAUQ,iBQjCI,ERkCL;;AAKP;ENuGA,kIAGyD;UAHzD,0HAGyD;EMxGvD,wBX0mCe,EW7kChB;EA/BD;IAMM,gCXqmCgB,EWpmCjB;EAPL;IAUQ,2BX2oCqB,EW1oCtB;EAXP;IAcU,2BXqdmB,EWpdpB;EAfT;IAoBI,2BXioCyB,EWhoC1B;EArBH;;;IAyBM,uBAAsB,EACvB;EA1BL;IA6BI,2BXqc0B,EWpc3B;;AHrDH;EAGI,oBRqjCQ;EQpjCR,2BR0qCyB,EQ5oC1B;EAlCH;IAOQ,2BRqqCqB,EQpqCtB;EARP;IAUQ,oBJ+bI,EI3bL;IAdP;MAYU,aJ4cE,EI3cH;EAbT;IAgBQ,oBJ+KI,EI3KL;IApBP;MAkBU,aJ4LE,EI3LH;EAnBT;IAsBQ,oBJ7BI,EIiCL;IA1BP;MAwBU,aJhBE,EIiBH;EAzBT;IA6BM,2BR6duB,EQzdxB;IAjCL;MA+BQ,2BR6oCqB,EQ5oCtB;;AAhCP;EAoCI,sCRudoB,EQtdrB;;AArCH;EAwCM,0BJiaM,EIhaP;;AAzCL;EA6CM,0BJkJM,EIjJP;;AA9CL;EAkDM,0BJzDM,EI0DP;;AAnDL;EAuDM,0BJ9DM,EI+DP;;AAxDL;EA0DM,eJjEM,EIkEP;;AYzEL;EAGM,0BpBgkCK,EoB/jCN;;AAGL;EACE;;MAEE,EAMH;EATD;IAKI,6HfiJsD;IejJtD,qHfiJsD;IejJtD,6GfiJsD;IejJtD,oKfiJsD;IAjB1D,oIAGyD;YAHzD,4HAGyD,EehItD;;AVIH;EACE,2BVmf4B,EUlf7B;;AEVD;;;;EAKI,iBAAgB,EACjB;;AANH;EAWQ,sCZ0nCc,EYznCf;;AAZP;EAcQ,2BZ8esB,EY7evB;;AAfP;EAmBI,eRybQ,EQxbT;;AApBH;EAuBM,eR3BM,EQ4BP;;AAxBL;EA0BM,eRwKM,EQvKP;;AA3BL;EA6BM,eRqKM,EQpKP;;AA9BL;;EAiCM,2BZ4duB,EY3dxB;;AAlCL;EAoCM,eRwaM,EQvaP;;AArCL;EAuCM,2BZ0oCuB,EYzoCxB;;AEvCL;EAEI,2Bdyf0B,Ecxf3B;;AOlBH;EAEI,qCrBmpCa,EqBlpCd;;AZoBH;EACE,6CTofsB,ESnfvB;;AACD;EACE,0CTifsB,EShfvB;;AACD;EAEI,4CT6eoB;ES5epB,aAAY,EACb;;AAJH;EAOM,WAAU,EACX;;AAGL;;EAGI,yCTieoB,ESherB;;AAJH;;EAOI,2BT2d0B,ESvd3B;EAXH;;IASM,0BL+JM,EK9JP;;AAVL;EAeQ,cAAa,EACd;;AAhBP;EAoBI,2BT8c0B,ESjc3B;EAjCH;IAsBM,uBAAsB,EACvB;EAvBL;IA0BQ,2BTycqB,ESxctB;EA3BP;;IA+BM,aT6mCkB,ES5mCnB;;AAhCL;EAoCM,6BT2/BM,ES1/BP;;AArCL;EAuCM,sCTokCgB,ESnkCjB;;AAxCL;EA4CM,sCT+jCgB,ES9jCjB;;AAGL;EACE,0CLuHU;EKtHV,eLsHU,EKrHX;;AapFD;EjBwIA,kIAGyD;UAHzD,0HAGyD,EiB7HxD;EAdD;IAGI,0BlBAQ;IkBCR,alBcQ,EkBbT;EALH;IAOI,0BlB4cQ;IkB3cR,alB0dQ,EkBzdT;EATH;IAWI,0BlB8LQ;IkB7LR,alB4MQ,EkB3MT;;ATCH;EAEI,eTmcQ;ESlcR,0CTkcQ,ESjcT;;AAJH;EAMI,eTqLQ;ESpLR,0CToLQ,ESnLT;;AARH;EAUI,eTrBQ;ESsBR,0CTtBQ,ESuBT","file":"theming/prebuilt/orange-light-blue.css","sourcesContent":["// Import all the theming functionality.\n// We can use relative imports for imports from the cdk because we bundle everything\n// up into a single flat scss file for material.\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$cdk-z-index-overlay-container: 1000;\n$cdk-z-index-overlay: 1000;\n$cdk-z-index-overlay-backdrop: 1000;\n\n// Background color for all of the backdrops\n$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.32);\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\n@mixin cdk-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: $cdk-z-index-overlay-container;\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: $cdk-z-index-overlay;\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: $cdk-z-index-overlay;\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: $cdk-z-index-overlay-backdrop;\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 // In high contrast mode the rgba background will become solid so we need to fall back\n // to making it opaque using `opacity`. Note that we can't use the `cdk-high-contrast`\n // mixin, because we can't normalize the import path to the _a11y.scss both for the\n // source and when this file is distributed. See #10908.\n @media screen and (-ms-high-contrast: active) {\n opacity: 0.6;\n }\n }\n }\n\n .cdk-overlay-dark-backdrop {\n background: $cdk-overlay-dark-backdrop-background;\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: $cdk-z-index-overlay;\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\n@mixin cdk-a11y {\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 // 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// 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 target Which kind of high contrast setting to target. Defaults to `active`, can be\n// `white-on-black` or `black-on-white`.\n@mixin cdk-high-contrast($target: active) {\n @media (-ms-high-contrast: $target) {\n @content;\n }\n}\n\n// Core styles that enable monitoring autofill state of text fields.\n@mixin cdk-text-field {\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 animation-name: cdk-text-field-autofill-start;\n }\n\n .cdk-text-field-autofill-monitored:not(:-webkit-autofill) {\n animation-name: cdk-text-field-autofill-end;\n }\n\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 height: auto !important;\n overflow: hidden !important;\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\n// Used to generate UIDs for keyframes used to change the text field autofill styles.\n$cdk-text-field-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 cdk-text-field-autofill-color($background, $foreground:'') {\n @keyframes cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} {\n to {\n background: $background;\n @if $foreground != '' { color: $foreground; }\n }\n }\n\n &:-webkit-autofill {\n animation-name: cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count};\n animation-fill-mode: both;\n }\n\n &.cdk-text-field-autofill-monitored:-webkit-autofill {\n animation-name: cdk-text-field-autofill-start,\n cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count};\n }\n\n $cdk-text-field-autofill-color-frame-count:\n $cdk-text-field-autofill-color-frame-count + 1 !global;\n}\n\n\n// Core styles that can be used to apply material design treatments to any element.\n// Media queries\n// TODO(josephperrott): Change $mat-xsmall and $mat-small usages to rely on BreakpointObserver,\n$mat-xsmall: 'max-width: 599px';\n$mat-small: 'max-width: 959px';\n\n// TODO: Revisit all z-indices before beta\n// z-index master list\n\n$z-index-fab: 20 !default;\n$z-index-drawer: 100 !default;\n\n// Global constants\n$pi: 3.14159265;\n\n// Padding between input toggles and their labels\n$mat-toggle-padding: 8px !default;\n// Width and height of input toggles\n$mat-toggle-size: 20px !default;\n\n// Easing Curves\n// TODO(jelbourn): all of these need to be revisited\n\n// The default animation curves used by material design.\n$mat-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;\n$mat-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;\n$mat-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;\n\n$ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default;\n\n$swift-ease-out-duration: 400ms !default;\n$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;\n$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;\n\n$swift-ease-in-duration: 300ms !default;\n$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;\n$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;\n\n$swift-ease-in-out-duration: 500ms !default;\n$swift-ease-in-out-timing-function: $ease-in-out-curve-function !default;\n$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;\n\n$swift-linear-duration: 80ms !default;\n$swift-linear-timing-function: linear !default;\n$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;\n\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(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(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(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$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// Prefix for elevation-related selectors.\n$_mat-elevation-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 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)},\n #{map-get(_get-ambient-map($color, $opacity), $zValue)};\n}\n\n@mixin _mat-theme-elevation($zValue, $theme, $opacity: $mat-elevation-opacity) {\n $foreground: map-get($theme, foreground);\n $elevation-color: map-get($foreground, elevation);\n $elevation-color-or-default: if($elevation-color == null, $mat-elevation-color, $elevation-color);\n\n @include mat-elevation($zValue, $elevation-color-or-default, $opacity);\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 mat-overridable-elevation(\n $zValue,\n $color: $mat-elevation-color,\n $opacity: $mat-elevation-opacity) {\n &:not([class*='#{$_mat-elevation-prefix}']) {\n @include mat-elevation($zValue, $color, $opacity);\n }\n}\n\n@mixin _mat-theme-overridable-elevation($zValue, $theme, $opacity: $mat-elevation-opacity) {\n $foreground: map-get($theme, foreground);\n $elevation-color: map-get($foreground, elevation);\n $elevation-color-or-default: if($elevation-color == null, $mat-elevation-color, $elevation-color);\n\n @include mat-overridable-elevation($zValue, $elevation-color-or-default, $opacity);\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 mat-elevation-transition-property-value(\n $duration: $mat-elevation-transition-duration,\n $easing: $mat-elevation-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 mat-elevation-transition(\n $duration: $mat-elevation-transition-duration,\n $easing: $mat-elevation-transition-timing-function) {\n transition: mat-elevation-transition-property-value($duration, $easing);\n}\n\n// Color palettes from the Material Design spec.\n// See https://material.io/design/color/\n//\n// Contrast colors are hard-coded because it is too difficult (probably impossible) to\n// calculate them. These contrast colors are pulled from the public Material Design spec swatches.\n// While the contrast colors in the spec are not prescriptive, we use them for convenience.\n\n\n// @deprecated renamed to $dark-primary-text.\n// @breaking-change 8.0.0\n$black-87-opacity: rgba(black, 0.87);\n// @deprecated renamed to $light-primary-text.\n// @breaking-change 8.0.0\n$white-87-opacity: rgba(white, 0.87);\n// @deprecated use $dark-[secondary-text,disabled-text,dividers,focused] instead.\n// @breaking-change 8.0.0\n$black-12-opacity: rgba(black, 0.12);\n// @deprecated use $light-[secondary-text,disabled-text,dividers,focused] instead.\n// @breaking-change 8.0.0\n$white-12-opacity: rgba(white, 0.12);\n// @deprecated use $dark-[secondary-text,disabled-text,dividers,focused] instead.\n// @breaking-change 8.0.0\n$black-6-opacity: rgba(black, 0.06);\n// @deprecated use $light-[secondary-text,disabled-text,dividers,focused] instead.\n// @breaking-change 8.0.0\n$white-6-opacity: rgba(white, 0.06);\n\n$dark-primary-text: rgba(black, 0.87);\n$dark-secondary-text: rgba(black, 0.54);\n$dark-disabled-text: rgba(black, 0.38);\n$dark-dividers: rgba(black, 0.12);\n$dark-focused: rgba(black, 0.12);\n$light-primary-text: white;\n$light-secondary-text: rgba(white, 0.7);\n$light-disabled-text: rgba(white, 0.5);\n$light-dividers: rgba(white, 0.12);\n$light-focused: rgba(white, 0.12);\n\n$mat-red: (\n 50: #ffebee,\n 100: #ffcdd2,\n 200: #ef9a9a,\n 300: #e57373,\n 400: #ef5350,\n 500: #f44336,\n 600: #e53935,\n 700: #d32f2f,\n 800: #c62828,\n 900: #b71c1c,\n A100: #ff8a80,\n A200: #ff5252,\n A400: #ff1744,\n A700: #d50000,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $light-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$mat-pink: (\n 50: #fce4ec,\n 100: #f8bbd0,\n 200: #f48fb1,\n 300: #f06292,\n 400: #ec407a,\n 500: #e91e63,\n 600: #d81b60,\n 700: #c2185b,\n 800: #ad1457,\n 900: #880e4f,\n A100: #ff80ab,\n A200: #ff4081,\n A400: #f50057,\n A700: #c51162,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $light-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$mat-purple: (\n 50: #f3e5f5,\n 100: #e1bee7,\n 200: #ce93d8,\n 300: #ba68c8,\n 400: #ab47bc,\n 500: #9c27b0,\n 600: #8e24aa,\n 700: #7b1fa2,\n 800: #6a1b9a,\n 900: #4a148c,\n A100: #ea80fc,\n A200: #e040fb,\n A400: #d500f9,\n A700: #aa00ff,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $light-primary-text,\n 400: $light-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $light-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$mat-deep-purple: (\n 50: #ede7f6,\n 100: #d1c4e9,\n 200: #b39ddb,\n 300: #9575cd,\n 400: #7e57c2,\n 500: #673ab7,\n 600: #5e35b1,\n 700: #512da8,\n 800: #4527a0,\n 900: #311b92,\n A100: #b388ff,\n A200: #7c4dff,\n A400: #651fff,\n A700: #6200ea,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $light-primary-text,\n 400: $light-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $light-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$mat-indigo: (\n 50: #e8eaf6,\n 100: #c5cae9,\n 200: #9fa8da,\n 300: #7986cb,\n 400: #5c6bc0,\n 500: #3f51b5,\n 600: #3949ab,\n 700: #303f9f,\n 800: #283593,\n 900: #1a237e,\n A100: #8c9eff,\n A200: #536dfe,\n A400: #3d5afe,\n A700: #304ffe,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $light-primary-text,\n 400: $light-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $light-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$mat-blue: (\n 50: #e3f2fd,\n 100: #bbdefb,\n 200: #90caf9,\n 300: #64b5f6,\n 400: #42a5f5,\n 500: #2196f3,\n 600: #1e88e5,\n 700: #1976d2,\n 800: #1565c0,\n 900: #0d47a1,\n A100: #82b1ff,\n A200: #448aff,\n A400: #2979ff,\n A700: #2962ff,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $light-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$mat-light-blue: (\n 50: #e1f5fe,\n 100: #b3e5fc,\n 200: #81d4fa,\n 300: #4fc3f7,\n 400: #29b6f6,\n 500: #03a9f4,\n 600: #039be5,\n 700: #0288d1,\n 800: #0277bd,\n 900: #01579b,\n A100: #80d8ff,\n A200: #40c4ff,\n A400: #00b0ff,\n A700: #0091ea,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$mat-cyan: (\n 50: #e0f7fa,\n 100: #b2ebf2,\n 200: #80deea,\n 300: #4dd0e1,\n 400: #26c6da,\n 500: #00bcd4,\n 600: #00acc1,\n 700: #0097a7,\n 800: #00838f,\n 900: #006064,\n A100: #84ffff,\n A200: #18ffff,\n A400: #00e5ff,\n A700: #00b8d4,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $dark-primary-text,\n )\n);\n\n$mat-teal: (\n 50: #e0f2f1,\n 100: #b2dfdb,\n 200: #80cbc4,\n 300: #4db6ac,\n 400: #26a69a,\n 500: #009688,\n 600: #00897b,\n 700: #00796b,\n 800: #00695c,\n 900: #004d40,\n A100: #a7ffeb,\n A200: #64ffda,\n A400: #1de9b6,\n A700: #00bfa5,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $dark-primary-text,\n )\n);\n\n$mat-green: (\n 50: #e8f5e9,\n 100: #c8e6c9,\n 200: #a5d6a7,\n 300: #81c784,\n 400: #66bb6a,\n 500: #4caf50,\n 600: #43a047,\n 700: #388e3c,\n 800: #2e7d32,\n 900: #1b5e20,\n A100: #b9f6ca,\n A200: #69f0ae,\n A400: #00e676,\n A700: #00c853,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $dark-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $dark-primary-text,\n )\n);\n\n$mat-light-green: (\n 50: #f1f8e9,\n 100: #dcedc8,\n 200: #c5e1a5,\n 300: #aed581,\n 400: #9ccc65,\n 500: #8bc34a,\n 600: #7cb342,\n 700: #689f38,\n 800: #558b2f,\n 900: #33691e,\n A100: #ccff90,\n A200: #b2ff59,\n A400: #76ff03,\n A700: #64dd17,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $dark-primary-text,\n 600: $dark-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $dark-primary-text,\n )\n);\n\n$mat-lime: (\n 50: #f9fbe7,\n 100: #f0f4c3,\n 200: #e6ee9c,\n 300: #dce775,\n 400: #d4e157,\n 500: #cddc39,\n 600: #c0ca33,\n 700: #afb42b,\n 800: #9e9d24,\n 900: #827717,\n A100: #f4ff81,\n A200: #eeff41,\n A400: #c6ff00,\n A700: #aeea00,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $dark-primary-text,\n 600: $dark-primary-text,\n 700: $dark-primary-text,\n 800: $dark-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $dark-primary-text,\n )\n);\n\n$mat-yellow: (\n 50: #fffde7,\n 100: #fff9c4,\n 200: #fff59d,\n 300: #fff176,\n 400: #ffee58,\n 500: #ffeb3b,\n 600: #fdd835,\n 700: #fbc02d,\n 800: #f9a825,\n 900: #f57f17,\n A100: #ffff8d,\n A200: #ffff00,\n A400: #ffea00,\n A700: #ffd600,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $dark-primary-text,\n 600: $dark-primary-text,\n 700: $dark-primary-text,\n 800: $dark-primary-text,\n 900: $dark-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $dark-primary-text,\n )\n);\n\n$mat-amber: (\n 50: #fff8e1,\n 100: #ffecb3,\n 200: #ffe082,\n 300: #ffd54f,\n 400: #ffca28,\n 500: #ffc107,\n 600: #ffb300,\n 700: #ffa000,\n 800: #ff8f00,\n 900: #ff6f00,\n A100: #ffe57f,\n A200: #ffd740,\n A400: #ffc400,\n A700: #ffab00,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $dark-primary-text,\n 600: $dark-primary-text,\n 700: $dark-primary-text,\n 800: $dark-primary-text,\n 900: $dark-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $dark-primary-text,\n )\n);\n\n$mat-orange: (\n 50: #fff3e0,\n 100: #ffe0b2,\n 200: #ffcc80,\n 300: #ffb74d,\n 400: #ffa726,\n 500: #ff9800,\n 600: #fb8c00,\n 700: #f57c00,\n 800: #ef6c00,\n 900: #e65100,\n A100: #ffd180,\n A200: #ffab40,\n A400: #ff9100,\n A700: #ff6d00,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $dark-primary-text,\n 600: $dark-primary-text,\n 700: $dark-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: black,\n )\n);\n\n$mat-deep-orange: (\n 50: #fbe9e7,\n 100: #ffccbc,\n 200: #ffab91,\n 300: #ff8a65,\n 400: #ff7043,\n 500: #ff5722,\n 600: #f4511e,\n 700: #e64a19,\n 800: #d84315,\n 900: #bf360c,\n A100: #ff9e80,\n A200: #ff6e40,\n A400: #ff3d00,\n A700: #dd2c00,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$mat-brown: (\n 50: #efebe9,\n 100: #d7ccc8,\n 200: #bcaaa4,\n 300: #a1887f,\n 400: #8d6e63,\n 500: #795548,\n 600: #6d4c41,\n 700: #5d4037,\n 800: #4e342e,\n 900: #3e2723,\n A100: #d7ccc8,\n A200: #bcaaa4,\n A400: #8d6e63,\n A700: #5d4037,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $light-primary-text,\n 400: $light-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$mat-grey: (\n 50: #fafafa,\n 100: #f5f5f5,\n 200: #eeeeee,\n 300: #e0e0e0,\n 400: #bdbdbd,\n 500: #9e9e9e,\n 600: #757575,\n 700: #616161,\n 800: #424242,\n 900: #212121,\n A100: #ffffff,\n A200: #eeeeee,\n A400: #bdbdbd,\n A700: #616161,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $dark-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $light-primary-text,\n )\n);\n\n// Alias for alternate spelling.\n$mat-gray: $mat-grey;\n\n$mat-blue-grey: (\n 50: #eceff1,\n 100: #cfd8dc,\n 200: #b0bec5,\n 300: #90a4ae,\n 400: #78909c,\n 500: #607d8b,\n 600: #546e7a,\n 700: #455a64,\n 800: #37474f,\n 900: #263238,\n A100: #cfd8dc,\n A200: #b0bec5,\n A400: #78909c,\n A700: #455a64,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $light-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n// Alias for alternate spelling.\n$mat-blue-gray: $mat-blue-grey;\n\n\n// Background palette for light themes.\n$mat-light-theme-background: (\n status-bar: map_get($mat-grey, 300),\n app-bar: map_get($mat-grey, 100),\n background: map_get($mat-grey, 50),\n hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UX\n card: white,\n dialog: white,\n disabled-button: rgba(black, 0.12),\n raised-button: white,\n focused-button: $dark-focused,\n selected-button: map_get($mat-grey, 300),\n selected-disabled-button: map_get($mat-grey, 400),\n disabled-button-toggle: map_get($mat-grey, 200),\n unselected-chip: map_get($mat-grey, 300),\n disabled-list-option: map_get($mat-grey, 200),\n);\n\n// Background palette for dark themes.\n$mat-dark-theme-background: (\n status-bar: black,\n app-bar: map_get($mat-grey, 900),\n background: #303030,\n hover: rgba(white, 0.04), // TODO(kara): check style with Material Design UX\n card: map_get($mat-grey, 800),\n dialog: map_get($mat-grey, 800),\n disabled-button: rgba(white, 0.12),\n raised-button: map-get($mat-grey, 800),\n focused-button: $light-focused,\n selected-button: map_get($mat-grey, 900),\n selected-disabled-button: map_get($mat-grey, 800),\n disabled-button-toggle: black,\n unselected-chip: map_get($mat-grey, 700),\n disabled-list-option: black,\n);\n\n// Foreground palette for light themes.\n$mat-light-theme-foreground: (\n base: black,\n divider: $dark-dividers,\n dividers: $dark-dividers,\n disabled: $dark-disabled-text,\n disabled-button: rgba(black, 0.26),\n disabled-text: $dark-disabled-text,\n elevation: black,\n hint-text: $dark-disabled-text,\n secondary-text: $dark-secondary-text,\n icon: rgba(black, 0.54),\n icons: rgba(black, 0.54),\n text: rgba(black, 0.87),\n slider-min: rgba(black, 0.87),\n slider-off: rgba(black, 0.26),\n slider-off-active: rgba(black, 0.38),\n);\n\n// Foreground palette for dark themes.\n$mat-dark-theme-foreground: (\n base: white,\n divider: $light-dividers,\n dividers: $light-dividers,\n disabled: $light-disabled-text,\n disabled-button: rgba(white, 0.3),\n disabled-text: $light-disabled-text,\n elevation: black,\n hint-text: $light-disabled-text,\n secondary-text: $light-secondary-text,\n icon: white,\n icons: white,\n text: white,\n slider-min: white,\n slider-off: rgba(white, 0.3),\n slider-off-active: rgba(white, 0.3),\n);\n\n\n\n// For a given hue in a palette, return the contrast color from the map of contrast palettes.\n// @param $color-map\n// @param $hue\n@function mat-contrast($palette, $hue) {\n @return map-get(map-get($palette, contrast), $hue);\n}\n\n\n// Creates a map of hues to colors for a theme. This is used to define a theme palette in terms\n// of the Material Design hues.\n// @param $color-map\n// @param $primary\n// @param $lighter\n@function mat-palette($base-palette, $default: 500, $lighter: 100, $darker: 700) {\n $result: map_merge($base-palette, (\n default: map-get($base-palette, $default),\n lighter: map-get($base-palette, $lighter),\n darker: map-get($base-palette, $darker),\n\n default-contrast: mat-contrast($base-palette, $default),\n lighter-contrast: mat-contrast($base-palette, $lighter),\n darker-contrast: mat-contrast($base-palette, $darker)\n ));\n\n // For each hue in the palette, add a \"-contrast\" color to the map.\n @each $hue, $color in $base-palette {\n $result: map_merge($result, (\n '#{$hue}-contrast': mat-contrast($base-palette, $hue)\n ));\n }\n\n @return $result;\n}\n\n\n// Gets a color from a theme palette (the output of mat-palette).\n// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured\n// hues (default, lighter, darker), or any of the aforementioned prefixed with \"-contrast\".\n//\n// @param $color-map The theme palette (output of mat-palette).\n// @param $hue The hue from the palette to use. If this is a value between 0 and 1, it will\n// be treated as opacity.\n// @param $opacity The alpha channel value for the color.\n@function mat-color($palette, $hue: default, $opacity: null) {\n // If hueKey is a number between zero and one, then it actually contains an\n // opacity value, so recall this function with the default hue and that given opacity.\n @if type-of($hue) == number and $hue >= 0 and $hue <= 1 {\n @return mat-color($palette, default, $hue);\n }\n\n $color: map-get($palette, $hue);\n\n @if (type-of($color) != color) {\n // If the $color resolved to something different from a color (e.g. a CSS variable),\n // we can't apply the opacity anyway so we return the value as is, otherwise Sass can\n // throw an error or output something invalid.\n @return $color;\n }\n\n @return rgba($color, if($opacity == null, opacity($color), $opacity));\n}\n\n\n// Creates a container object for a light theme to be given to individual component theme mixins.\n@function mat-light-theme($primary, $accent, $warn: mat-palette($mat-red)) {\n @return (\n primary: $primary,\n accent: $accent,\n warn: $warn,\n is-dark: false,\n foreground: $mat-light-theme-foreground,\n background: $mat-light-theme-background,\n );\n}\n\n\n// Creates a container object for a dark theme to be given to individual component theme mixins.\n@function mat-dark-theme($primary, $accent, $warn: mat-palette($mat-red)) {\n @return (\n primary: $primary,\n accent: $accent,\n warn: $warn,\n is-dark: true,\n foreground: $mat-dark-theme-foreground,\n background: $mat-dark-theme-background,\n );\n}\n\n\n\n$mat-ripple-color-opacity: 0.1;\n\n@mixin mat-ripple() {\n\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\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 cdk-high-contrast {\n display: none;\n }\n }\n}\n\n/* Theme for the ripple elements.*/\n@mixin mat-ripple-theme($theme) {\n $foreground: map_get($theme, foreground);\n $foreground-base: map_get($foreground, base);\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 (type-of($foreground-base) == color) {\n background-color: rgba($foreground-base, $mat-ripple-color-opacity);\n }\n @else {\n background-color: $foreground-base;\n opacity: $mat-ripple-color-opacity;\n }\n }\n}\n\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@function mat-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@function mat-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@function mat-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@function mat-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@function mat-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(type-of($font-family) == 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@mixin mat-typography-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. Note\n // that we need to use interpolation for `font-size/line-height` in order to prevent\n // Sass from dividing the two values.\n font: $font-weight #{$font-size}/#{$line-height} $font-family;\n }\n}\n\n// Converts a typography level into CSS styles.\n@mixin mat-typography-level-to-styles($config, $level) {\n $font-size: mat-font-size($config, $level);\n $font-weight: mat-font-weight($config, $level);\n $line-height: mat-line-height($config, $level);\n $font-family: mat-font-family($config, $level);\n\n @include mat-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family);\n letter-spacing: mat-letter-spacing($config, $level);\n}\n\n\n@mixin mat-option-theme($theme) {\n $foreground: map-get($theme, foreground);\n $background: map-get($theme, background);\n $primary: map-get($theme, primary);\n $accent: map-get($theme, accent);\n $warn: map-get($theme, warn);\n\n .mat-option {\n color: mat-color($foreground, text);\n\n &:hover:not(.mat-option-disabled),\n &:focus:not(.mat-option-disabled) {\n background: mat-color($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: mat-color($background, hover);\n }\n\n &.mat-active {\n background: mat-color($background, hover);\n color: mat-color($foreground, text);\n }\n\n &.mat-option-disabled {\n color: mat-color($foreground, hint-text);\n }\n }\n\n .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {\n color: mat-color($primary);\n }\n\n .mat-accent .mat-option.mat-selected:not(.mat-option-disabled) {\n color: mat-color($accent);\n }\n\n .mat-warn .mat-option.mat-selected:not(.mat-option-disabled) {\n color: mat-color($warn);\n }\n}\n\n@mixin mat-option-typography($config) {\n .mat-option {\n font: {\n family: mat-font-family($config);\n size: mat-font-size($config, subheading-2);\n }\n }\n}\n\n\n\n\n\n@mixin mat-optgroup-theme($theme) {\n $foreground: map-get($theme, foreground);\n\n .mat-optgroup-label {\n color: mat-color($foreground, secondary-text);\n }\n\n .mat-optgroup-disabled .mat-optgroup-label {\n color: mat-color($foreground, hint-text);\n }\n}\n\n@mixin mat-optgroup-typography($config) {\n .mat-optgroup-label {\n @include mat-typography-level-to-styles($config, body-2);\n }\n}\n\n\n\n@mixin mat-pseudo-checkbox-theme($theme) {\n $is-dark-theme: map-get($theme, is-dark);\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\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: mat-color(map-get($theme, foreground), secondary-text);\n\n &::after {\n color: mat-color($background, background);\n }\n }\n\n .mat-pseudo-checkbox-disabled {\n color: $disabled-color;\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.\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: mat-color(map-get($theme, accent));\n }\n\n .mat-primary .mat-pseudo-checkbox-checked,\n .mat-primary .mat-pseudo-checkbox-indeterminate {\n background: mat-color(map-get($theme, primary));\n }\n\n .mat-warn .mat-pseudo-checkbox-checked,\n .mat-warn .mat-pseudo-checkbox-indeterminate {\n background: mat-color(map-get($theme, 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\n\n// Represents a typography level from the Material design spec.\n@function mat-typography-level(\n $font-size,\n $line-height: $font-size,\n $font-weight: 400,\n $font-family: null,\n $letter-spacing: null) {\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// Represents a collection of typography levels.\n// Defaults come from https://material.io/guidelines/style/typography.html\n@function mat-typography-config(\n $font-family: 'Roboto, \"Helvetica Neue\", sans-serif',\n $display-4: mat-typography-level(112px, 112px, 300),\n $display-3: mat-typography-level(56px, 56px, 400),\n $display-2: mat-typography-level(45px, 48px, 400),\n $display-1: mat-typography-level(34px, 40px, 400),\n $headline: mat-typography-level(24px, 32px, 400),\n $title: mat-typography-level(20px, 32px, 500),\n $subheading-2: mat-typography-level(16px, 28px, 400),\n $subheading-1: mat-typography-level(15px, 24px, 400),\n $body-2: mat-typography-level(14px, 24px, 500),\n $body-1: mat-typography-level(14px, 20px, 400),\n $caption: mat-typography-level(12px, 20px, 400),\n $button: mat-typography-level(14px, 14px, 500),\n // Line-height must be unit-less fraction of the font-size.\n $input: mat-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// Adds the base typography styles, based on a config.\n@mixin mat-base-typography($config, $selector: '.mat-typography') {\n .mat-h1, .mat-headline, #{$selector} h1 {\n @include mat-typography-level-to-styles($config, headline);\n margin: 0 0 16px;\n }\n\n .mat-h2, .mat-title, #{$selector} h2 {\n @include mat-typography-level-to-styles($config, title);\n margin: 0 0 16px;\n }\n\n .mat-h3, .mat-subheading-2, #{$selector} h3 {\n @include mat-typography-level-to-styles($config, subheading-2);\n margin: 0 0 16px;\n }\n\n .mat-h4, .mat-subheading-1, #{$selector} h4 {\n @include mat-typography-level-to-styles($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 mat-typography-font-shorthand(\n mat-font-size($config, body-1) * 0.83,\n mat-font-weight($config, body-1),\n mat-line-height($config, body-1),\n mat-font-family($config, body-1)\n );\n\n margin: 0 0 12px;\n }\n\n .mat-h6, #{$selector} h6 {\n @include mat-typography-font-shorthand(\n mat-font-size($config, body-1) * 0.67,\n mat-font-weight($config, body-1),\n mat-line-height($config, body-1),\n mat-font-family($config, body-1)\n );\n\n margin: 0 0 12px;\n }\n\n .mat-body-strong, .mat-body-2 {\n @include mat-typography-level-to-styles($config, body-2);\n }\n\n .mat-body, .mat-body-1, #{$selector} {\n @include mat-typography-level-to-styles($config, body-1);\n\n p {\n margin: 0 0 12px;\n }\n }\n\n .mat-small, .mat-caption {\n @include mat-typography-level-to-styles($config, caption);\n }\n\n // Note: The spec doesn't mention letter spacing. The value comes from\n // eyeballing it until it looked exactly like the spec examples.\n .mat-display-4, #{$selector} .mat-display-4 {\n @include mat-typography-level-to-styles($config, display-4);\n margin: 0 0 56px;\n letter-spacing: -0.05em;\n }\n\n .mat-display-3, #{$selector} .mat-display-3 {\n @include mat-typography-level-to-styles($config, display-3);\n margin: 0 0 64px;\n letter-spacing: -0.02em;\n }\n\n .mat-display-2, #{$selector} .mat-display-2 {\n @include mat-typography-level-to-styles($config, display-2);\n margin: 0 0 64px;\n letter-spacing: -0.005em;\n }\n\n .mat-display-1, #{$selector} .mat-display-1 {\n @include mat-typography-level-to-styles($config, display-1);\n margin: 0 0 64px;\n }\n}\n\n\n\n\n@mixin mat-autocomplete-theme($theme) {\n $foreground: map-get($theme, foreground);\n $background: map-get($theme, background);\n\n .mat-autocomplete-panel {\n @include _mat-theme-overridable-elevation(4, $theme);\n background: mat-color($background, card);\n color: mat-color($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: mat-color($background, card);\n\n &:not(.mat-option-disabled) {\n color: mat-color($foreground, text);\n }\n }\n }\n\n}\n\n@mixin mat-autocomplete-typography($config) { }\n\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\n\n\n\n\n$mat-badge-font-size: 12px;\n$mat-badge-font-weight: 600;\n$mat-badge-default-size: 22px !default;\n$mat-badge-small-size: $mat-badge-default-size - 6;\n$mat-badge-large-size: $mat-badge-default-size + 6;\n\n// Mixin for building offset given different sizes\n@mixin _mat-badge-size($size) {\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: -$size / 2;\n }\n }\n\n &.mat-badge-below {\n .mat-badge-content {\n bottom: -$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: -$size / 2;\n }\n }\n\n [dir='rtl'] &.mat-badge-before {\n .mat-badge-content {\n left: auto;\n right: -$size / 2;\n }\n }\n\n &.mat-badge-after {\n .mat-badge-content {\n right: -$size / 2;\n }\n }\n\n [dir='rtl'] &.mat-badge-after {\n .mat-badge-content {\n right: auto;\n left: -$size / 2;\n }\n }\n }\n}\n\n@mixin mat-badge-theme($theme) {\n $accent: map-get($theme, accent);\n $warn: map-get($theme, warn);\n $primary: map-get($theme, primary);\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-badge-content {\n color: mat-color($primary, default-contrast);\n background: mat-color($primary);\n\n @include cdk-high-contrast {\n outline: solid 1px;\n border-radius: 0;\n }\n }\n\n .mat-badge-accent {\n .mat-badge-content {\n background: mat-color($accent);\n color: mat-color($accent, default-contrast);\n }\n }\n\n .mat-badge-warn {\n .mat-badge-content {\n color: mat-color($warn, default-contrast);\n background: mat-color($warn);\n }\n }\n\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-disabled {\n .mat-badge-content {\n $app-background: mat-color($background, 'background');\n $badge-color: mat-color($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 (type-of($badge-color) == color and type-of($app-background) == color) {\n $badge-opacity: opacity($badge-color);\n background: mix($app-background, rgba($badge-color, 1), (1 - $badge-opacity) * 100%);\n }\n @else {\n background: $badge-color;\n }\n\n color: mat-color($foreground, disabled-text);\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 // 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 _mat-badge-size($mat-badge-small-size);\n }\n .mat-badge-medium {\n @include _mat-badge-size($mat-badge-default-size);\n }\n .mat-badge-large {\n @include _mat-badge-size($mat-badge-large-size);\n }\n}\n\n@mixin mat-badge-typography($config) {\n .mat-badge-content {\n font-weight: $mat-badge-font-weight;\n font-size: $mat-badge-font-size;\n font-family: mat-font-family($config);\n }\n\n .mat-badge-small .mat-badge-content {\n font-size: $mat-badge-font-size / 2;\n }\n\n .mat-badge-large .mat-badge-content {\n font-size: $mat-badge-font-size * 2;\n }\n}\n\n\n\n\n\n@mixin mat-bottom-sheet-theme($theme) {\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-bottom-sheet-container {\n @include _mat-theme-elevation(16, $theme);\n background: mat-color($background, dialog);\n color: mat-color($foreground, text);\n }\n}\n\n@mixin mat-bottom-sheet-typography($config) {\n .mat-bottom-sheet-container {\n @include mat-typography-level-to-styles($config, body-1);\n }\n}\n\n\n\n\n\n$_mat-button-ripple-opacity: 0.1;\n\n// Applies a focus style to an mat-button element for each of the supported palettes.\n@mixin _mat-button-focus-overlay-color($theme) {\n $primary: map-get($theme, primary);\n $accent: map-get($theme, accent);\n $warn: map-get($theme, warn);\n\n &.mat-primary .mat-button-focus-overlay {\n background-color: mat-color($primary);\n }\n\n &.mat-accent .mat-button-focus-overlay {\n background-color: mat-color($accent);\n }\n\n &.mat-warn .mat-button-focus-overlay {\n background-color: mat-color($warn);\n }\n\n &[disabled] .mat-button-focus-overlay {\n background-color: transparent;\n }\n}\n\n@mixin _mat-button-ripple-color($theme, $hue, $opacity: $_mat-button-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 background-color: mat-color($primary, $hue, $opacity);\n }\n\n &.mat-accent .mat-ripple-element {\n background-color: mat-color($accent, $hue, $opacity);\n }\n\n &.mat-warn .mat-ripple-element {\n background-color: mat-color($warn, $hue, $opacity);\n }\n}\n\n// Applies a property to an mat-button element for each of the supported palettes.\n@mixin _mat-button-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}: mat-color($primary, $hue);\n }\n &.mat-accent {\n #{$property}: mat-color($accent, $hue);\n }\n &.mat-warn {\n #{$property}: mat-color($warn, $hue);\n }\n\n &.mat-primary, &.mat-accent, &.mat-warn, &[disabled] {\n &[disabled] {\n $palette: if($property == 'color', $foreground, $background);\n #{$property}: mat-color($palette, disabled-button);\n }\n }\n}\n\n@mixin mat-button-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-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 _mat-button-theme-property($theme, 'color', default);\n @include _mat-button-focus-overlay-color($theme);\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: $_mat-button-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([disabled]) {\n border-color: mat-color($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: mat-color($foreground, text);\n background-color: mat-color($background, raised-button);\n\n @include _mat-button-theme-property($theme, 'color', default-contrast);\n @include _mat-button-theme-property($theme, 'background-color', default);\n @include _mat-button-ripple-color($theme, default-contrast);\n }\n\n .mat-stroked-button, .mat-flat-button {\n @include _mat-theme-overridable-elevation(0, $theme);\n }\n\n .mat-raised-button {\n @include _mat-theme-overridable-elevation(2, $theme);\n\n &:not([disabled]):active {\n @include _mat-theme-overridable-elevation(8, $theme);\n }\n\n &[disabled] {\n @include _mat-theme-overridable-elevation(0, $theme);\n }\n }\n\n .mat-fab, .mat-mini-fab {\n @include _mat-theme-overridable-elevation(6, $theme);\n\n &:not([disabled]):active {\n @include _mat-theme-overridable-elevation(12, $theme);\n }\n\n &[disabled] {\n @include _mat-theme-overridable-elevation(0, $theme);\n }\n }\n}\n\n@mixin mat-button-typography($config) {\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: mat-font-family($config, button);\n size: mat-font-size($config, button);\n weight: mat-font-weight($config, button);\n }\n }\n}\n\n\n\n\n\n\n@mixin mat-button-toggle-theme($theme) {\n $foreground: map-get($theme, foreground);\n $background: map-get($theme, background);\n $divider-color: mat-color($foreground, divider);\n\n .mat-button-toggle-standalone,\n .mat-button-toggle-group {\n @include _mat-theme-elevation(2, $theme);\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: mat-color($foreground, hint-text);\n\n .mat-button-toggle-focus-overlay {\n background-color: mat-color($background, focused-button);\n }\n }\n\n .mat-button-toggle-appearance-standard {\n color: mat-color($foreground, text);\n background: mat-color($background, card);\n\n .mat-button-toggle-focus-overlay {\n background-color: mat-color($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: mat-color($background, selected-button);\n color: mat-color($foreground, secondary-text);\n\n &.mat-button-toggle-appearance-standard {\n color: mat-color($foreground, text);\n }\n }\n\n .mat-button-toggle-disabled {\n color: mat-color($foreground, disabled-button);\n background-color: mat-color($background, disabled-button-toggle);\n\n &.mat-button-toggle-appearance-standard {\n background: mat-color($background, card);\n }\n\n &.mat-button-toggle-checked {\n background-color: mat-color($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 mat-button-toggle-typography($config) {\n .mat-button-toggle {\n font-family: mat-font-family($config);\n }\n}\n\n\n\n\n\n\n\n@mixin mat-card-theme($theme) {\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-card {\n @include _mat-theme-overridable-elevation(1, $theme);\n background: mat-color($background, card);\n color: mat-color($foreground, text);\n\n // Needs extra specificity to be able to override the elevation selectors.\n &.mat-card-flat {\n @include _mat-theme-overridable-elevation(0, $theme);\n }\n }\n\n .mat-card-subtitle {\n color: mat-color($foreground, secondary-text);\n }\n}\n\n@mixin mat-card-typography($config) {\n .mat-card {\n font-family: mat-font-family($config);\n }\n\n .mat-card-title {\n font: {\n size: mat-font-size($config, headline);\n weight: mat-font-weight($config, title);\n }\n }\n\n .mat-card-header .mat-card-title {\n font-size: mat-font-size($config, title);\n }\n\n .mat-card-subtitle,\n .mat-card-content {\n font-size: mat-font-size($config, body-1);\n }\n}\n\n\n\n\n\n\n@mixin mat-checkbox-theme($theme) {\n $is-dark-theme: map-get($theme, is-dark);\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\n // The color of the checkbox's checkmark / mixedmark.\n $checkbox-mark-color: mat-color($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: mat-color($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 @include cdk-high-contrast(black-on-white) {\n // Having the one above be !important ends up overriding the browser's automatic\n // color inversion so we need to re-invert it ourselves for black-on-white.\n stroke: #000 !important;\n }\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: mat-color($primary);\n }\n\n &.mat-accent .mat-checkbox-background {\n background-color: mat-color($accent);\n }\n\n &.mat-warn .mat-checkbox-background {\n background-color: mat-color($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: mat-color($foreground, secondary-text);\n }\n\n @include cdk-high-contrast {\n opacity: 0.5;\n }\n }\n\n // This one is moved down here so it can target both\n // the theme colors and the disabled state.\n @include cdk-high-contrast {\n .mat-checkbox-background {\n // Needs to be removed because it hides the checkbox outline.\n background: none;\n }\n }\n\n .mat-checkbox:not(.mat-checkbox-disabled) {\n &.mat-primary .mat-checkbox-ripple .mat-ripple-element {\n background-color: mat-color($primary);\n }\n\n &.mat-accent .mat-checkbox-ripple .mat-ripple-element {\n background-color: mat-color($accent);\n }\n\n &.mat-warn .mat-checkbox-ripple .mat-ripple-element {\n background-color: mat-color($warn);\n }\n }\n}\n\n@mixin mat-checkbox-typography($config) {\n .mat-checkbox {\n font-family: mat-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: mat-line-height($config, body-2);\n }\n}\n\n\n\n\n\n\n$mat-chip-remove-font-size: 18px;\n\n@mixin mat-chips-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@mixin mat-chips-theme-color($palette) {\n @include mat-chips-color(mat-color($palette, default-contrast), mat-color($palette));\n\n .mat-ripple-element {\n background: mat-color($palette, default-contrast, 0.1);\n }\n}\n\n@mixin mat-chips-theme($theme) {\n $is-dark-theme: map-get($theme, is-dark);\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 $unselected-background: mat-color($background, unselected-chip);\n $unselected-foreground: mat-color($foreground, text);\n\n .mat-chip.mat-standard-chip {\n @include mat-chips-color($unselected-foreground, $unselected-background);\n\n &:not(.mat-chip-disabled) {\n &:active {\n @include _mat-theme-elevation(3, $theme);\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 mat-chips-theme-color($primary);\n }\n\n &.mat-warn {\n @include mat-chips-theme-color($warn);\n }\n\n &.mat-accent {\n @include mat-chips-theme-color($accent);\n }\n }\n}\n\n@mixin mat-chips-typography($config) {\n .mat-chip {\n font-size: mat-font-size($config, body-2);\n font-weight: mat-font-weight($config, body-2);\n\n .mat-chip-trailing-icon.mat-icon,\n .mat-chip-remove.mat-icon {\n font-size: $mat-chip-remove-font-size;\n }\n }\n}\n\n\n\n\n\n@mixin mat-table-theme($theme) {\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-table {\n background: mat-color($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: mat-color($foreground, divider);\n }\n\n .mat-header-cell {\n color: mat-color($foreground, secondary-text);\n }\n\n .mat-cell, .mat-footer-cell {\n color: mat-color($foreground, text);\n }\n}\n\n@mixin mat-table-typography($config) {\n .mat-table {\n font-family: mat-font-family($config);\n }\n\n .mat-header-cell {\n font-size: mat-font-size($config, caption);\n font-weight: mat-font-weight($config, body-2);\n }\n\n .mat-cell, .mat-footer-cell {\n font-size: mat-font-size($config, body-1);\n }\n}\n\n\n\n\n\n\n\n$mat-datepicker-selected-today-box-shadow-width: 1px;\n$mat-datepicker-selected-fade-amount: 0.6;\n$mat-datepicker-today-fade-amount: 0.2;\n$mat-calendar-body-font-size: 13px !default;\n$mat-calendar-weekday-table-font-size: 11px !default;\n\n@mixin _mat-datepicker-color($palette) {\n .mat-calendar-body-selected {\n background-color: mat-color($palette);\n color: mat-color($palette, default-contrast);\n }\n\n .mat-calendar-body-disabled > .mat-calendar-body-selected {\n $background: mat-color($palette);\n\n @if (type-of($background) == color) {\n background-color: fade-out($background, $mat-datepicker-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: $mat-datepicker-today-fade-amount;\n }\n }\n\n .mat-calendar-body-today.mat-calendar-body-selected {\n box-shadow: inset 0 0 0 $mat-datepicker-selected-today-box-shadow-width\n mat-color($palette, default-contrast);\n }\n}\n\n@mixin mat-datepicker-theme($theme) {\n $foreground: map-get($theme, foreground);\n $background: map-get($theme, background);\n\n .mat-calendar-arrow {\n border-top-color: mat-color($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: mat-color($foreground, icon);\n }\n\n .mat-calendar-table-header {\n color: mat-color($foreground, hint-text);\n }\n\n .mat-calendar-table-header-divider::after {\n background: mat-color($foreground, divider);\n }\n\n .mat-calendar-body-label {\n color: mat-color($foreground, secondary-text);\n }\n\n .mat-calendar-body-cell-content {\n color: mat-color($foreground, text);\n border-color: transparent;\n }\n\n .mat-calendar-body-disabled > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {\n color: mat-color($foreground, disabled-text);\n }\n\n .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover,\n .cdk-keyboard-focused .mat-calendar-body-active,\n .cdk-program-focused .mat-calendar-body-active {\n & > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {\n background-color: mat-color($background, hover);\n }\n }\n\n .mat-calendar-body-today:not(.mat-calendar-body-selected) {\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: mat-color($foreground, hint-text);\n }\n\n .mat-calendar-body-disabled > .mat-calendar-body-today:not(.mat-calendar-body-selected) {\n $color: mat-color($foreground, hint-text);\n\n @if (type-of($color) == color) {\n border-color: fade-out($color, $mat-datepicker-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 @include _mat-datepicker-color(map-get($theme, primary));\n\n .mat-datepicker-content {\n @include _mat-theme-elevation(4, $theme);\n background-color: mat-color($background, card);\n color: mat-color($foreground, text);\n\n &.mat-accent {\n @include _mat-datepicker-color(map-get($theme, accent));\n }\n\n &.mat-warn {\n @include _mat-datepicker-color(map-get($theme, warn));\n }\n }\n\n .mat-datepicker-content-touch {\n @include _mat-theme-elevation(0, $theme);\n }\n\n .mat-datepicker-toggle-active {\n color: mat-color(map-get($theme, primary));\n\n &.mat-accent {\n color: mat-color(map-get($theme, accent));\n }\n\n &.mat-warn {\n color: mat-color(map-get($theme, warn));\n }\n }\n}\n\n@mixin mat-datepicker-typography($config) {\n .mat-calendar {\n font-family: mat-font-family($config);\n }\n\n .mat-calendar-body {\n font-size: $mat-calendar-body-font-size;\n }\n\n .mat-calendar-body-label,\n .mat-calendar-period-button {\n font: {\n size: mat-font-size($config, button);\n weight: mat-font-weight($config, button);\n }\n }\n\n .mat-calendar-table-header th {\n font: {\n size: $mat-calendar-weekday-table-font-size;\n weight: mat-font-weight($config, body-1);\n }\n }\n}\n\n\n\n\n\n\n\n@mixin mat-dialog-theme($theme) {\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-dialog-container {\n @include _mat-theme-elevation(24, $theme);\n background: mat-color($background, dialog);\n color: mat-color($foreground, text);\n }\n}\n\n@mixin mat-dialog-typography($config) {\n .mat-dialog-title {\n @include mat-typography-level-to-styles($config, title);\n }\n}\n\n\n\n\n\n\n@mixin mat-expansion-panel-theme($theme) {\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-expansion-panel {\n @include _mat-theme-overridable-elevation(2, $theme);\n background: mat-color($background, card);\n color: mat-color($foreground, text);\n }\n\n .mat-action-row {\n border-top-color: mat-color($foreground, divider);\n }\n\n .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header {\n &:not([aria-disabled='true']) {\n &.cdk-keyboard-focused,\n &.cdk-program-focused,\n &:hover {\n background: mat-color($background, hover);\n }\n }\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: mat-color($background, card);\n }\n }\n\n .mat-expansion-panel-header-title {\n color: mat-color($foreground, text);\n }\n\n .mat-expansion-panel-header-description,\n .mat-expansion-indicator::after {\n color: mat-color($foreground, secondary-text);\n }\n\n .mat-expansion-panel-header[aria-disabled='true'] {\n color: mat-color($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 mat-expansion-panel-typography($config) {\n .mat-expansion-panel-header {\n font: {\n family: mat-font-family($config, subheading-1);\n size: mat-font-size($config, subheading-1);\n weight: mat-font-weight($config, subheading-1);\n }\n }\n\n .mat-expansion-panel-content {\n @include mat-typography-level-to-styles($config, body-1);\n }\n}\n\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 mat-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 mat-line-base($secondary-font-size) {\n .mat-line {\n @include mat-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 mat-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 mat-line-wrapper-base() {\n @include mat-normalize-text();\n\n display: flex;\n flex-direction: column;\n width: 100%;\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\n\n\n// Include this empty mixin for consistency with the other components.\n@mixin mat-grid-list-theme($theme) { }\n\n@mixin mat-grid-list-typography($config) {\n .mat-grid-tile-header,\n .mat-grid-tile-footer {\n @include mat-line-base(mat-font-size($config, caption));\n font-size: mat-font-size($config, body-1);\n }\n}\n\n\n\n\n// Include this empty mixin for consistency with the other components.\n@mixin mat-icon-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-icon {\n &.mat-primary {\n color: mat-color($primary);\n }\n\n &.mat-accent {\n color: mat-color($accent);\n }\n\n &.mat-warn {\n color: mat-color($warn);\n }\n }\n}\n\n@mixin mat-icon-typography($config) { }\n\n\n\n\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 mat-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 _mat-control-placeholder-color($theme) {\n $foreground: map-get($theme, foreground);\n $is-dark-theme: map-get($theme, is-dark);\n @return mat-color($foreground, secondary-text, if($is-dark-theme, 0.5, 0.42));\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 -ms-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 &:-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/* stylelint-enable */\n\n\n\n@mixin mat-input-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\n .mat-form-field-type-mat-native-select .mat-form-field-infix::after {\n color: mat-color($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: mat-color($foreground, disabled-text);\n }\n\n .mat-input-element {\n caret-color: mat-color($primary);\n\n @include input-placeholder {\n color: _mat-control-placeholder-color($theme);\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($theme, is-dark)) {\n option {\n color: $dark-primary-text;\n }\n\n option:disabled {\n color: $dark-disabled-text;\n }\n }\n }\n\n .mat-accent .mat-input-element {\n caret-color: mat-color($accent);\n }\n\n .mat-warn .mat-input-element,\n .mat-form-field-invalid .mat-input-element {\n caret-color: mat-color($warn);\n }\n\n .mat-form-field-type-mat-native-select.mat-form-field-invalid .mat-form-field-infix::after {\n color: mat-color($warn);\n }\n}\n\n@mixin mat-input-typography($config) {\n // The unit-less line-height from the font config.\n $line-height: mat-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: ($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: -$line-spacing * 1em;\n }\n}\n\n\n\n\n\n\n\n@mixin mat-list-theme($theme) {\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-list-base {\n .mat-list-item {\n color: mat-color($foreground, text);\n }\n\n .mat-list-option {\n color: mat-color($foreground, text);\n }\n\n .mat-subheader {\n color: mat-color($foreground, secondary-text);\n }\n }\n\n .mat-list-item-disabled {\n background-color: mat-color($background, disabled-list-option);\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: mat-color($background, 'hover');\n }\n }\n}\n\n@mixin mat-list-typography($config) {\n $font-family: mat-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: mat-font-size($config, subheading-2);\n @include mat-line-base(mat-font-size($config, body-1));\n }\n\n .mat-list-option {\n font-size: mat-font-size($config, subheading-2);\n @include mat-line-base(mat-font-size($config, body-1));\n }\n\n .mat-subheader {\n font-family: mat-font-family($config, body-2);\n font-size: mat-font-size($config, body-2);\n font-weight: mat-font-weight($config, body-2);\n }\n }\n\n // Dense list\n .mat-list-base[dense] {\n .mat-list-item {\n font-size: mat-font-size($config, caption);\n @include mat-line-base(mat-font-size($config, caption));\n }\n\n .mat-list-option {\n font-size: mat-font-size($config, caption);\n @include mat-line-base(mat-font-size($config, caption));\n }\n\n .mat-subheader {\n font-family: $font-family;\n font-size: mat-font-size($config, caption);\n font-weight: mat-font-weight($config, body-2);\n }\n }\n}\n\n\n\n\n\n\n\n@mixin mat-menu-theme($theme) {\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-menu-panel {\n @include _mat-theme-overridable-elevation(4, $theme);\n background: mat-color($background, 'card');\n }\n\n .mat-menu-item {\n background: transparent;\n color: mat-color($foreground, 'text');\n\n &[disabled] {\n &, &::after {\n color: mat-color($foreground, 'disabled');\n }\n }\n }\n\n .mat-menu-item .mat-icon-no-color,\n .mat-menu-item-submenu-trigger::after {\n color: mat-color($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: mat-color($background, 'hover');\n }\n }\n}\n\n@mixin mat-menu-typography($config) {\n .mat-menu-item {\n font: {\n family: mat-font-family($config, body-1);\n size: mat-font-size($config, body-1);\n weight: mat-font-weight($config, body-1);\n }\n }\n}\n\n\n\n\n\n\n@mixin mat-paginator-theme($theme) {\n $foreground: map-get($theme, foreground);\n $background: map-get($theme, background);\n\n .mat-paginator {\n background: mat-color($background, 'card');\n }\n\n .mat-paginator,\n .mat-paginator-page-size .mat-select-trigger {\n color: mat-color($foreground, secondary-text);\n }\n\n .mat-paginator-decrement,\n .mat-paginator-increment {\n border-top: 2px solid mat-color($foreground, 'icon');\n border-right: 2px solid mat-color($foreground, 'icon');\n }\n\n .mat-paginator-first,\n .mat-paginator-last {\n border-top: 2px solid mat-color($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: mat-color($foreground, 'disabled');\n }\n }\n}\n\n@mixin mat-paginator-typography($config) {\n .mat-paginator,\n .mat-paginator-page-size .mat-select-trigger {\n font: {\n family: mat-font-family($config, caption);\n size: mat-font-size($config, caption);\n }\n }\n}\n\n\n\n\n\n@mixin mat-progress-bar-theme($theme) {\n $primary: map-get($theme, primary);\n $accent: map-get($theme, accent);\n $warn: map-get($theme, warn);\n\n .mat-progress-bar-background {\n fill: mat-color($primary, lighter);\n }\n\n .mat-progress-bar-buffer {\n background-color: mat-color($primary, lighter);\n }\n\n .mat-progress-bar-fill::after {\n background-color: mat-color($primary);\n }\n\n .mat-progress-bar.mat-accent {\n .mat-progress-bar-background {\n fill: mat-color($accent, lighter);\n }\n\n .mat-progress-bar-buffer {\n background-color: mat-color($accent, lighter);\n }\n\n .mat-progress-bar-fill::after {\n background-color: mat-color($accent);\n }\n }\n\n .mat-progress-bar.mat-warn {\n .mat-progress-bar-background {\n fill: mat-color($warn, lighter);\n }\n\n .mat-progress-bar-buffer {\n background-color: mat-color($warn, lighter);\n }\n\n .mat-progress-bar-fill::after {\n background-color: mat-color($warn);\n }\n }\n}\n\n@mixin mat-progress-bar-typography($config) { }\n\n\n\n\n\n\n@mixin mat-progress-spinner-theme($theme) {\n $primary: map-get($theme, primary);\n $accent: map-get($theme, accent);\n $warn: map-get($theme, warn);\n\n .mat-progress-spinner, .mat-spinner {\n circle {\n stroke: mat-color($primary);\n }\n\n &.mat-accent circle {\n stroke: mat-color($accent);\n }\n\n &.mat-warn circle {\n stroke: mat-color($warn);\n }\n }\n}\n\n@mixin mat-progress-spinner-typography($config) { }\n\n\n\n\n\n@mixin _mat-radio-color($palette) {\n &.mat-radio-checked .mat-radio-outer-circle {\n border-color: mat-color($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: mat-color($palette);\n }\n}\n\n@mixin mat-radio-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-radio-outer-circle {\n border-color: mat-color($foreground, secondary-text);\n }\n\n .mat-radio-button {\n &.mat-primary {\n @include _mat-radio-color($primary);\n }\n\n &.mat-accent {\n @include _mat-radio-color($accent);\n }\n\n &.mat-warn {\n @include _mat-radio-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: mat-color($foreground, disabled);\n }\n\n .mat-radio-ripple .mat-ripple-element,\n .mat-radio-inner-circle {\n background-color: mat-color($foreground, disabled);\n }\n\n .mat-radio-label-content {\n color: mat-color($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 mat-radio-typography($config) {\n .mat-radio-button {\n font-family: mat-font-family($config);\n }\n}\n\n\n\n\n\n\n\n\n@mixin mat-select-theme($theme) {\n $foreground: map-get($theme, foreground);\n $background: map-get($theme, background);\n $primary: map-get($theme, primary);\n $accent: map-get($theme, accent);\n $warn: map-get($theme, warn);\n\n .mat-select-value {\n color: mat-color($foreground, text);\n }\n\n .mat-select-placeholder {\n color: _mat-control-placeholder-color($theme);\n }\n\n .mat-select-disabled .mat-select-value {\n color: mat-color($foreground, disabled-text);\n }\n\n .mat-select-arrow {\n color: mat-color($foreground, secondary-text);\n }\n\n .mat-select-panel {\n background: mat-color($background, card);\n @include _mat-theme-overridable-elevation(4, $theme);\n\n .mat-option.mat-selected:not(.mat-option-multiple) {\n background: mat-color($background, hover, 0.12);\n }\n }\n\n .mat-form-field {\n &.mat-focused {\n &.mat-primary .mat-select-arrow {\n color: mat-color($primary);\n }\n\n &.mat-accent .mat-select-arrow {\n color: mat-color($accent);\n }\n\n &.mat-warn .mat-select-arrow {\n color: mat-color($warn);\n }\n }\n\n .mat-select.mat-select-invalid .mat-select-arrow {\n color: mat-color($warn);\n }\n\n .mat-select.mat-select-disabled .mat-select-arrow {\n color: mat-color($foreground, disabled-text);\n }\n }\n}\n\n@mixin mat-select-typography($config) {\n // The unit-less line-height from the font config.\n $line-height: mat-line-height($config, input);\n\n .mat-select {\n font-family: mat-font-family($config);\n }\n\n .mat-select-trigger {\n height: $line-height * 1em;\n }\n}\n\n\n\n\n\n\n@mixin mat-sidenav-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 $drawer-background-color: mat-color($background, dialog);\n $drawer-container-background-color: mat-color($background, background);\n $drawer-push-background-color: mat-color($background, dialog);\n $drawer-side-border: solid 1px mat-color($foreground, divider);\n\n .mat-drawer-container {\n background-color: $drawer-container-background-color;\n color: mat-color($foreground, text);\n }\n\n .mat-drawer {\n background-color: $drawer-background-color;\n color: mat-color($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 _mat-theme-elevation(16, $theme);\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: mat-color($background, card, $opacity);\n\n @if (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: 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 mat-sidenav-typography($config) { }\n\n\n\n\n\n\n@mixin _mat-slide-toggle-checked($palette, $thumb-checked-hue) {\n &.mat-checked {\n .mat-slide-toggle-thumb {\n background-color: mat-color($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: mat-color($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: mat-color($palette, $thumb-checked-hue);\n }\n }\n}\n\n@mixin mat-slide-toggle-theme($theme) {\n $is-dark: map_get($theme, is-dark);\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 // 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: mat-color($foreground, disabled);\n $ripple-unchecked-color: mat-color($foreground, base);\n\n .mat-slide-toggle {\n @include _mat-slide-toggle-checked($accent, $thumb-checked-hue);\n\n &.mat-primary {\n @include _mat-slide-toggle-checked($primary, $thumb-checked-hue);\n }\n\n &.mat-warn {\n @include _mat-slide-toggle-checked($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 _mat-theme-elevation(1, $theme);\n background-color: mat-color($mat-grey, $thumb-unchecked-hue);\n }\n\n .mat-slide-toggle-bar {\n background-color: $bar-unchecked-color;\n }\n}\n\n@mixin mat-slide-toggle-typography($config) {\n .mat-slide-toggle-content {\n font-family: mat-font-family($config);\n }\n}\n\n\n\n\n\n@mixin _mat-slider-inner-content-theme($palette) {\n .mat-slider-track-fill,\n .mat-slider-thumb,\n .mat-slider-thumb-label {\n background-color: mat-color($palette);\n }\n\n .mat-slider-thumb-label-text {\n color: mat-color($palette, default-contrast);\n }\n}\n\n@mixin mat-slider-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-slider-off-color: mat-color($foreground, slider-off);\n $mat-slider-off-focused-color: mat-color($foreground, slider-off-active);\n $mat-slider-disabled-color: mat-color($foreground, slider-off);\n $mat-slider-labeled-min-value-thumb-color: mat-color($foreground, slider-min);\n $mat-slider-labeled-min-value-thumb-label-color: mat-color($foreground, slider-off);\n $mat-slider-focus-ring-color: mat-color($accent, default, 0.2);\n $mat-slider-focus-ring-min-value-color: mat-color($foreground, base, 0.12);\n $mat-slider-tick-color: mat-color($foreground, base, 0.7);\n $mat-slider-tick-size: 2px;\n\n .mat-slider-track-background {\n background-color: $mat-slider-off-color;\n }\n\n .mat-primary {\n @include _mat-slider-inner-content-theme($primary);\n }\n\n .mat-accent {\n @include _mat-slider-inner-content-theme($accent);\n }\n\n .mat-warn {\n @include _mat-slider-inner-content-theme($warn);\n }\n\n .mat-slider-focus-ring {\n background-color: $mat-slider-focus-ring-color;\n }\n\n .mat-slider:hover,\n .cdk-focused {\n .mat-slider-track-background {\n background-color: $mat-slider-off-focused-color;\n }\n }\n\n .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-min-value {\n .mat-slider-focus-ring {\n background-color: $mat-slider-focus-ring-min-value-color;\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\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\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}\n\n@mixin mat-slider-typography($config) {\n .mat-slider-thumb-label-text {\n font: {\n family: mat-font-family($config);\n size: mat-font-size($config, caption);\n weight: mat-font-weight($config, body-2);\n }\n }\n}\n\n\n\n\n\n@mixin mat-stepper-theme($theme) {\n $foreground: map-get($theme, foreground);\n $background: map-get($theme, background);\n $primary: map-get($theme, primary);\n $warn: map-get($theme, warn);\n\n .mat-step-header {\n &.cdk-keyboard-focused,\n &.cdk-program-focused,\n &:hover {\n background-color: mat-color($background, hover);\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: mat-color($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: mat-color($foreground, secondary-text);\n color: mat-color($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: mat-color($primary);\n color: mat-color($primary, default-contrast);\n }\n\n .mat-step-icon-state-error {\n background-color: transparent;\n color: mat-color($warn);\n }\n\n .mat-step-label.mat-step-label-active {\n color: mat-color($foreground, text);\n }\n\n .mat-step-label.mat-step-label-error {\n color: mat-color($warn);\n }\n }\n\n .mat-stepper-horizontal, .mat-stepper-vertical {\n background-color: mat-color($background, card);\n }\n\n .mat-stepper-vertical-line::before {\n border-left-color: mat-color($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: mat-color($foreground, divider);\n }\n}\n\n@mixin mat-stepper-typography($config) {\n .mat-stepper-vertical, .mat-stepper-horizontal {\n font-family: mat-font-family($config);\n }\n\n .mat-step-label {\n font: {\n size: mat-font-size($config, body-1);\n weight: mat-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: mat-font-size($config, body-2);\n }\n\n .mat-step-label-selected {\n font: {\n size: mat-font-size($config, body-2);\n weight: mat-font-weight($config, body-2);\n };\n }\n}\n\n@mixin mat-sort-theme($theme) {\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-sort-header-arrow {\n $table-background: mat-color($background, 'card');\n $text-color: mat-color($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-trasparent 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 (type-of($table-background) == color and type-of($text-color) == color) {\n $text-opacity: opacity($text-color);\n 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 mat-sort-typography($config) { }\n\n\n\n\n\n@mixin mat-tabs-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 $header-border: 1px solid mat-color($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: mat-color($foreground, text);\n\n &.mat-tab-disabled {\n color: mat-color($foreground, disabled-text);\n }\n }\n\n .mat-tab-header-pagination-chevron {\n border-color: mat-color($foreground, text);\n }\n\n .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n border-color: mat-color($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 _mat-tab-label-focus($color);\n @include _mat-ink-bar($color);\n\n // Override ink bar when background color is the same\n &.mat-background-#{$name} {\n @include _mat-ink-bar($color, default-contrast);\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 _mat-tab-label-focus($color);\n @include _mat-tabs-background($color);\n }\n }\n }\n}\n\n@mixin _mat-ink-bar($color, $hue: default) {\n .mat-ink-bar {\n background-color: mat-color($color, $hue);\n }\n}\n\n@mixin _mat-tab-label-focus($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: mat-color($tab-focus-color, lighter, 0.3);\n }\n }\n }\n}\n\n@mixin _mat-tabs-background($background-color) {\n // Set background color for the tab group\n .mat-tab-header, .mat-tab-links {\n background-color: mat-color($background-color);\n }\n\n // Set labels to contrast against background\n .mat-tab-label, .mat-tab-link {\n color: mat-color($background-color, default-contrast);\n\n &.mat-tab-disabled {\n color: mat-color($background-color, default-contrast, 0.4);\n }\n }\n\n // Set pagination chevrons to contrast background\n .mat-tab-header-pagination-chevron {\n border-color: mat-color($background-color, default-contrast);\n }\n\n .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n border-color: mat-color($background-color, default-contrast, 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-ripple-element {\n background-color: mat-color($background-color, default-contrast, 0.12);\n }\n}\n\n@mixin mat-tabs-typography($config) {\n .mat-tab-group {\n font-family: mat-font-family($config);\n }\n\n .mat-tab-label, .mat-tab-link {\n font: {\n family: mat-font-family($config, button);\n size: mat-font-size($config, button);\n weight: mat-font-weight($config, button);\n }\n }\n}\n\n\n\n\n\n\n@mixin _mat-toolbar-color($palette) {\n background: mat-color($palette);\n color: mat-color($palette, default-contrast);\n}\n\n@mixin _mat-toolbar-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 mat-toolbar-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-toolbar {\n background: mat-color($background, app-bar);\n color: mat-color($foreground, text);\n\n &.mat-primary {\n @include _mat-toolbar-color($primary);\n }\n\n &.mat-accent {\n @include _mat-toolbar-color($accent);\n }\n\n &.mat-warn {\n @include _mat-toolbar-color($warn);\n }\n\n @include _mat-toolbar-form-field-overrides;\n }\n}\n\n@mixin mat-toolbar-typography($config) {\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 mat-typography-level-to-styles($config, title);\n margin: 0;\n }\n}\n\n\n\n\n\n$mat-tooltip-target-height: 22px;\n$mat-tooltip-font-size: 10px;\n$mat-tooltip-vertical-padding: ($mat-tooltip-target-height - $mat-tooltip-font-size) / 2;\n\n$mat-tooltip-handset-target-height: 30px;\n$mat-tooltip-handset-font-size: 14px;\n$mat-tooltip-handset-vertical-padding:\n ($mat-tooltip-handset-target-height - $mat-tooltip-handset-font-size) / 2;\n\n@mixin mat-tooltip-theme($theme) {\n .mat-tooltip {\n background: mat-color($mat-grey, 700, 0.9);\n }\n}\n\n@mixin mat-tooltip-typography($config) {\n .mat-tooltip {\n font-family: mat-font-family($config);\n font-size: $mat-tooltip-font-size;\n padding-top: $mat-tooltip-vertical-padding;\n padding-bottom: $mat-tooltip-vertical-padding;\n }\n\n .mat-tooltip-handset {\n font-size: $mat-tooltip-handset-font-size;\n padding-top: $mat-tooltip-handset-vertical-padding;\n padding-bottom: $mat-tooltip-handset-vertical-padding;\n }\n}\n\n\n\n\n\n@mixin mat-snack-bar-theme($theme) {\n $is-dark-theme: map-get($theme, is-dark);\n $accent: map-get($theme, 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, $dark-primary-text, $light-secondary-text);\n background: if($is-dark-theme, map-get($mat-grey, 50), #323232);\n\n @include _mat-theme-elevation(6, $theme);\n }\n\n .mat-simple-snackbar-action {\n color: if($is-dark-theme, inherit, mat-color($accent));\n }\n}\n\n@mixin mat-snack-bar-typography($config) {\n .mat-simple-snackbar {\n font: {\n family: mat-font-family($config, body-1);\n size: mat-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: mat-font-weight($config, button);\n }\n }\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n// Theme styles that only apply to the fill appearance of the form-field.\n\n@mixin mat-form-field-fill-theme($theme) {\n $foreground: map-get($theme, foreground);\n $is-dark-theme: map-get($theme, is-dark);\n\n $fill-background: mat-color($foreground, base, if($is-dark-theme, 0.1, 0.04));\n $fill-disabled-background: mat-color($foreground, base, if($is-dark-theme, 0.05, 0.02));\n $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.5, 0.42));\n $label-disabled-color: mat-color($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$mat-form-field-fill-dedupe: 0;\n\n// Applies a floating label above the form field control itself.\n@mixin _mat-form-field-fill-label-floating($font-scale, $infix-padding, $infix-margin-top) {\n transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-fill-dedupe)\n scale($font-scale);\n width: 100% / $font-scale + $mat-form-field-fill-dedupe;\n\n $mat-form-field-fill-dedupe: $mat-form-field-fill-dedupe + 0.00001 !global;\n}\n\n@mixin mat-form-field-fill-typography($config) {\n // The unit-less line-height from the font config.\n $line-height: mat-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: 1em * $line-height * $subscript-font-scale;\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 _mat-form-field-fill-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 _mat-form-field-fill-label-floating(\n $subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,\n $infix-margin-top);\n }\n }\n }\n}\n\n\n\n\n\n\n\n// Theme styles that only apply to the legacy appearance of the form-field.\n\n@mixin mat-form-field-legacy-theme($theme) {\n $foreground: map-get($theme, foreground);\n $is-dark-theme: map-get($theme, is-dark);\n\n $label-color: mat-color($foreground, secondary-text);\n $underline-color: mat-color($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 mat-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$mat-form-field-legacy-dedupe: 0;\n\n// Applies a floating label above the form field control itself.\n@mixin _mat-form-field-legacy-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 + $mat-form-field-legacy-dedupe);\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 -ms-transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-legacy-dedupe)\n scale($font-scale);\n\n width: 100% / $font-scale + $mat-form-field-legacy-dedupe;\n\n $mat-form-field-legacy-dedupe: $mat-form-field-legacy-dedupe + 0.00001 !global;\n}\n\n// Same as mixin above, but omits the translateZ for printing purposes.\n@mixin _mat-form-field-legacy-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 + $mat-form-field-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 $mat-form-field-legacy-dedupe: $mat-form-field-legacy-dedupe + 0.00001 !global;\n}\n\n@mixin mat-form-field-legacy-typography($config) {\n // The unit-less line-height from the font config.\n $line-height: mat-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: ($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 $infix-margin-top: 1em * $line-height * $subscript-font-scale;\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: 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 _mat-form-field-legacy-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 _mat-form-field-legacy-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 _mat-form-field-legacy-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% - #{$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 _mat-form-field-legacy-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 _mat-form-field-legacy-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 _mat-form-field-legacy-label-floating-print(\n $subscript-font-scale, $infix-padding, $infix-margin-top);\n }\n }\n }\n }\n}\n\n\n\n\n\n\n\n// Theme styles that only apply to the outline appearance of the form-field.\n\n@mixin mat-form-field-outline-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 $is-dark-theme: map-get($theme, is-dark);\n\n $label-disabled-color: mat-color($foreground, disabled-text);\n $outline-color: mat-color($foreground, divider, if($is-dark-theme, 0.3, 0.12));\n $outline-color-hover: mat-color($foreground, divider, if($is-dark-theme, 1, 0.87));\n $outline-color-primary: mat-color($primary);\n $outline-color-accent: mat-color($accent);\n $outline-color-warn: mat-color($warn);\n $outline-color-disabled: mat-color($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$mat-form-field-outline-dedupe: 0;\n\n// Applies a floating label above the form field control itself.\n@mixin _mat-form-field-outline-label-floating($font-scale, $infix-padding, $infix-margin-top) {\n transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-outline-dedupe)\n scale($font-scale);\n width: 100% / $font-scale + $mat-form-field-outline-dedupe;\n\n $mat-form-field-outline-dedupe: $mat-form-field-outline-dedupe + 0.00001 !global;\n}\n\n@mixin mat-form-field-outline-typography($config) {\n // The unit-less line-height from the font config.\n $line-height: mat-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: 1em * $line-height * $subscript-font-scale;\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: 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 _mat-form-field-outline-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 _mat-form-field-outline-label-floating(\n $subscript-font-scale, $infix-padding + $outline-appearance-label-offset,\n $infix-margin-top);\n }\n }\n }\n}\n\n\n\n\n\n\n\n// Theme styles that only apply to the standard appearance of the form-field.\n\n@mixin mat-form-field-standard-theme($theme) {\n $foreground: map-get($theme, foreground);\n $is-dark-theme: map-get($theme, is-dark);\n\n $underline-color: mat-color($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 mat-control-disabled-underline($underline-color);\n }\n }\n}\n\n@mixin mat-form-field-standard-typography($config) {}\n\n\n// Theme styles that apply to all appearances of the form-field.\n@mixin mat-form-field-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 $is-dark-theme: map-get($theme, is-dark);\n\n // Label colors. Required is used for the `*` star shown in the label.\n $label-color: mat-color($foreground, secondary-text, if($is-dark-theme, 0.7, 0.6));\n $focused-label-color: mat-color($primary);\n $required-label-color: mat-color($accent);\n\n // Underline colors.\n $underline-color-base: mat-color($foreground, divider, if($is-dark-theme, 1, 0.87));\n $underline-color-accent: mat-color($accent);\n $underline-color-warn: mat-color($warn);\n $underline-focused-color: mat-color($primary);\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 mat-form-field-legacy-theme($theme);\n @include mat-form-field-standard-theme($theme);\n @include mat-form-field-fill-theme($theme);\n @include mat-form-field-outline-theme($theme);\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$mat-form-field-dedupe: 0;\n\n// Applies a floating label above the form field control itself.\n@mixin _mat-form-field-label-floating($font-scale, $infix-padding, $infix-margin-top) {\n transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-dedupe)\n scale($font-scale);\n width: 100% / $font-scale + $mat-form-field-dedupe;\n\n $mat-form-field-dedupe: $mat-form-field-dedupe + 0.00001 !global;\n}\n\n@mixin mat-form-field-typography($config) {\n // The unit-less line-height from the font config.\n $line-height: mat-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 $infix-margin-top: 1em * $line-height * $subscript-font-scale;\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: 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 mat-typography-level-to-styles($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: $line-height * 1em;\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 _mat-form-field-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 _mat-form-field-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% - #{$wrapper-padding-bottom / $subscript-font-scale});\n }\n\n @include mat-form-field-legacy-typography($config);\n @include mat-form-field-standard-typography($config);\n @include mat-form-field-fill-typography($config);\n @include mat-form-field-outline-typography($config);\n}\n\n\n\n\n\n@mixin mat-tree-theme($theme) {\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-tree {\n background: mat-color($background, 'card');\n }\n\n .mat-tree-node,\n .mat-nested-tree-node {\n color: mat-color($foreground, text);\n }\n}\n\n@mixin mat-tree-typography($config) {\n .mat-tree {\n font-family: mat-font-family($config);\n }\n\n .mat-tree-node,\n .mat-nested-tree-node {\n font-weight: mat-font-weight($config, body-1);\n font-size: mat-font-size($config, body-1);\n }\n}\n\n\n\n// Includes all of the typographic styles.\n@mixin angular-material-typography($config: null) {\n @if $config == null {\n $config: mat-typography-config();\n }\n\n @include mat-badge-typography($config);\n @include mat-base-typography($config);\n @include mat-autocomplete-typography($config);\n @include mat-bottom-sheet-typography($config);\n @include mat-button-typography($config);\n @include mat-button-toggle-typography($config);\n @include mat-card-typography($config);\n @include mat-checkbox-typography($config);\n @include mat-chips-typography($config);\n @include mat-table-typography($config);\n @include mat-datepicker-typography($config);\n @include mat-dialog-typography($config);\n @include mat-expansion-panel-typography($config);\n @include mat-form-field-typography($config);\n @include mat-grid-list-typography($config);\n @include mat-icon-typography($config);\n @include mat-input-typography($config);\n @include mat-menu-typography($config);\n @include mat-paginator-typography($config);\n @include mat-progress-bar-typography($config);\n @include mat-progress-spinner-typography($config);\n @include mat-radio-typography($config);\n @include mat-select-typography($config);\n @include mat-sidenav-typography($config);\n @include mat-slide-toggle-typography($config);\n @include mat-slider-typography($config);\n @include mat-stepper-typography($config);\n @include mat-sort-typography($config);\n @include mat-tabs-typography($config);\n @include mat-toolbar-typography($config);\n @include mat-tooltip-typography($config);\n @include mat-list-typography($config);\n @include mat-option-typography($config);\n @include mat-optgroup-typography($config);\n @include mat-snack-bar-typography($config);\n @include mat-tree-typography($config);\n}\n\n\n// Mixin that renders all of the core styles that are not theme-dependent.\n@mixin mat-core($typography-config: null) {\n @include angular-material-typography($typography-config);\n @include mat-ripple();\n @include cdk-a11y();\n @include cdk-overlay();\n @include cdk-text-field();\n}\n\n// Mixin that renders all of the core styles that depend on the theme.\n@mixin mat-core-theme($theme) {\n @include mat-ripple-theme($theme);\n @include mat-option-theme($theme);\n @include mat-optgroup-theme($theme);\n @include mat-pseudo-checkbox-theme($theme);\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 .#{$_mat-elevation-prefix}#{$zValue} {\n @include _mat-theme-elevation($zValue, $theme);\n }\n }\n\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($theme, background);\n $foreground: map-get($theme, foreground);\n\n background-color: mat-color($background, background);\n color: mat-color($foreground, text);\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\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n@mixin mat-divider-theme($theme) {\n $foreground: map-get($theme, foreground);\n\n .mat-divider {\n border-top-color: mat-color($foreground, divider);\n }\n\n .mat-divider-vertical {\n border-right-color: mat-color($foreground, divider);\n }\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n// Create a theme.\n@mixin angular-material-theme($theme) {\n @include mat-core-theme($theme);\n @include mat-autocomplete-theme($theme);\n @include mat-badge-theme($theme);\n @include mat-bottom-sheet-theme($theme);\n @include mat-button-theme($theme);\n @include mat-button-toggle-theme($theme);\n @include mat-card-theme($theme);\n @include mat-checkbox-theme($theme);\n @include mat-chips-theme($theme);\n @include mat-table-theme($theme);\n @include mat-datepicker-theme($theme);\n @include mat-dialog-theme($theme);\n @include mat-divider-theme($theme);\n @include mat-expansion-panel-theme($theme);\n @include mat-form-field-theme($theme);\n @include mat-grid-list-theme($theme);\n @include mat-icon-theme($theme);\n @include mat-input-theme($theme);\n @include mat-list-theme($theme);\n @include mat-menu-theme($theme);\n @include mat-paginator-theme($theme);\n @include mat-progress-bar-theme($theme);\n @include mat-progress-spinner-theme($theme);\n @include mat-radio-theme($theme);\n @include mat-select-theme($theme);\n @include mat-sidenav-theme($theme);\n @include mat-slide-toggle-theme($theme);\n @include mat-slider-theme($theme);\n @include mat-stepper-theme($theme);\n @include mat-sort-theme($theme);\n @include mat-tabs-theme($theme);\n @include mat-toolbar-theme($theme);\n @include mat-tooltip-theme($theme);\n @include mat-tree-theme($theme);\n @include mat-snack-bar-theme($theme);\n}\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 bottom: $bottom;\n position: absolute;\n &.fixed {\n position: fixed;\n }\n }\n}\n\n@mixin td-button-utilities() {\n $mat-fab-pos-offset: ($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","/*\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}], [layout#{$name}=\"column\"], [layout#{$name}=\"row\"] {\n box-sizing: border-box;\n display: -webkit-box;\n display: -webkit-flex;\n display: -moz-box;\n display: -ms-flexbox;\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 {\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\"], [layout#{$name}=\"row\"] {\n > [#{$flexName}=\"33\"], > [#{$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\"], > [#{$flexName}=\"34\"] {\n flex: 1 1 34%;\n max-width: 34%;\n max-height: 100%;\n box-sizing: border-box;\n }\n > [#{$flexName}=\"66\"], > [#{$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\"], > [#{$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\"], [layout#{$name}=\"column\"] {\n > [#{$flexName}=\"33\"], > [#{$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\"], > [#{$flexName}=\"34\"] {\n flex: 1 1 34%;\n max-width: 100%;\n max-height: 34%;\n box-sizing: border-box;\n }\n > [#{$flexName}=\"66\"], > [#{$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\"], > [#{$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\n@mixin layout-align-for-name($suffix: null) {\n\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\n [layout-padding] > [flex-sm], [layout-padding] > [flex-lt-md] {\n padding: $layout-gutter-width / 4;\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: $layout-gutter-width / 2;\n }\n [layout-padding] > [flex-gt-md],\n [layout-padding] > [flex-lg] {\n padding: $layout-gutter-width / 1;\n }\n\n [layout-margin] > [flex-sm],\n [layout-margin] > [flex-lt-md] {\n margin: $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: $layout-gutter-width / 2;\n }\n\n [layout-margin] > [flex-gt-md],\n [layout-margin] > [flex-lg] {\n margin: $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], [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\n @media (min-width: $layout-breakpoint-xs) and (max-width: $layout-breakpoint-sm - 1) {\n // SMALL SCREEN\n [hide-sm], [hide-gt-xs] {\n &:not([show-gt-xs]):not([show-sm]):not([show]) {\n display: none;\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\n @media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {\n // MEDIUM SCREEN\n [hide], [hide-gt-xs], [hide-gt-sm] {\n &:not([show-gt-xs]):not([show-gt-sm]):not([show-md]):not([show]) {\n display: none;\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], [hide-gt-xs], [hide-gt-sm], [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 [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], [hide-gt-xs], [hide-gt-sm], [hide-gt-md], [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 [hide-xl]:not([show-xl]):not([show-gt-lg]):not([show]) {\n display: none;\n }\n }\n}","/* Theme for the ripple elements.*/\n/* stylelint-disable material/no-prefixes */\n/* stylelint-enable */\n/** Mixin to create distinct classes for fab positions, e.g. \".mat-fab-position-bottom-right\". */\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.mat-badge-content {\n font-weight: 600;\n font-size: 12px;\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-badge-small .mat-badge-content {\n font-size: 6px; }\n\n.mat-badge-large .mat-badge-content {\n font-size: 24px; }\n\n.mat-h1, .mat-headline, .mat-typography h1 {\n font: 400 24px/32px Roboto, \"Helvetica Neue\", sans-serif;\n margin: 0 0 16px; }\n\n.mat-h2, .mat-title, .mat-typography h2 {\n font: 500 20px/32px Roboto, \"Helvetica Neue\", sans-serif;\n margin: 0 0 16px; }\n\n.mat-h3, .mat-subheading-2, .mat-typography h3 {\n font: 400 16px/28px Roboto, \"Helvetica Neue\", sans-serif;\n margin: 0 0 16px; }\n\n.mat-h4, .mat-subheading-1, .mat-typography h4 {\n font: 400 15px/24px Roboto, \"Helvetica Neue\", sans-serif;\n margin: 0 0 16px; }\n\n.mat-h5, .mat-typography h5 {\n font: 400 11.62px/20px Roboto, \"Helvetica Neue\", sans-serif;\n margin: 0 0 12px; }\n\n.mat-h6, .mat-typography h6 {\n font: 400 9.38px/20px Roboto, \"Helvetica Neue\", sans-serif;\n margin: 0 0 12px; }\n\n.mat-body-strong, .mat-body-2 {\n font: 500 14px/24px Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-body, .mat-body-1, .mat-typography {\n font: 400 14px/20px Roboto, \"Helvetica Neue\", sans-serif; }\n .mat-body p, .mat-body-1 p, .mat-typography p {\n margin: 0 0 12px; }\n\n.mat-small, .mat-caption {\n font: 400 12px/20px Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-display-4, .mat-typography .mat-display-4 {\n font: 300 112px/112px Roboto, \"Helvetica Neue\", sans-serif;\n margin: 0 0 56px;\n letter-spacing: -0.05em; }\n\n.mat-display-3, .mat-typography .mat-display-3 {\n font: 400 56px/56px Roboto, \"Helvetica Neue\", sans-serif;\n margin: 0 0 64px;\n letter-spacing: -0.02em; }\n\n.mat-display-2, .mat-typography .mat-display-2 {\n font: 400 45px/48px Roboto, \"Helvetica Neue\", sans-serif;\n margin: 0 0 64px;\n letter-spacing: -0.005em; }\n\n.mat-display-1, .mat-typography .mat-display-1 {\n font: 400 34px/40px Roboto, \"Helvetica Neue\", sans-serif;\n margin: 0 0 64px; }\n\n.mat-bottom-sheet-container {\n font: 400 14px/20px Roboto, \"Helvetica Neue\", sans-serif; }\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.mat-button-toggle {\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-card {\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-card-title {\n font-size: 24px;\n font-weight: 500; }\n\n.mat-card-header .mat-card-title {\n font-size: 20px; }\n\n.mat-card-subtitle,\n.mat-card-content {\n font-size: 14px; }\n\n.mat-checkbox {\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-checkbox-layout .mat-checkbox-label {\n line-height: 24px; }\n\n.mat-chip {\n font-size: 14px;\n font-weight: 500; }\n .mat-chip .mat-chip-trailing-icon.mat-icon,\n .mat-chip .mat-chip-remove.mat-icon {\n font-size: 18px; }\n\n.mat-table {\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-header-cell {\n font-size: 12px;\n font-weight: 500; }\n\n.mat-cell, .mat-footer-cell {\n font-size: 14px; }\n\n.mat-calendar {\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-calendar-body {\n font-size: 13px; }\n\n.mat-calendar-body-label,\n.mat-calendar-period-button {\n font-size: 14px;\n font-weight: 500; }\n\n.mat-calendar-table-header th {\n font-size: 11px;\n font-weight: 400; }\n\n.mat-dialog-title {\n font: 500 20px/32px Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-expansion-panel-header {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 15px;\n font-weight: 400; }\n\n.mat-expansion-panel-content {\n font: 400 14px/20px Roboto, \"Helvetica Neue\", sans-serif; }\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\n.mat-form-field-wrapper {\n padding-bottom: 1.34375em; }\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 .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.mat-form-field-infix {\n padding: 0.5em 0;\n border-top: 0.84375em solid transparent; }\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.33333%; }\n\n.mat-form-field-can-float .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper\n.mat-form-field-label {\n transform: translateY(-1.34374em) scale(0.75);\n width: 133.33334%; }\n\n.mat-form-field-label-wrapper {\n top: -0.84375em;\n padding-top: 0.84375em; }\n\n.mat-form-field-label {\n top: 1.34375em; }\n\n.mat-form-field-underline {\n bottom: 1.34375em; }\n\n.mat-form-field-subscript-wrapper {\n font-size: 75%;\n margin-top: 0.66667em;\n top: calc(100% - 1.79167em); }\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 -ms-transform: translateY(-1.28125em) scale(0.75);\n width: 133.33333%; }\n\n.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper\n.mat-form-field-label {\n transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.00101px);\n -ms-transform: translateY(-1.28124em) scale(0.75);\n width: 133.33334%; }\n\n.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper\n.mat-form-field-label {\n transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.00102px);\n -ms-transform: translateY(-1.28123em) scale(0.75);\n width: 133.33335%; }\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.54167em;\n top: calc(100% - 1.66667em); }\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 .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper\n.mat-form-field-label {\n transform: translateY(-1.28121em) scale(0.75); }\n .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper\n.mat-form-field-label {\n transform: translateY(-1.2812em) scale(0.75); } }\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.33333%; }\n\n.mat-form-field-appearance-fill.mat-form-field-can-float .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper\n.mat-form-field-label {\n transform: translateY(-0.59374em) scale(0.75);\n width: 133.33334%; }\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.33333%; }\n\n.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper\n.mat-form-field-label {\n transform: translateY(-1.59374em) scale(0.75);\n width: 133.33334%; }\n\n.mat-grid-tile-header,\n.mat-grid-tile-footer {\n font-size: 14px; }\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 .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\ninput.mat-input-element {\n margin-top: -0.0625em; }\n\n.mat-menu-item {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 14px;\n font-weight: 400; }\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.mat-radio-button {\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-select {\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-select-trigger {\n height: 1.125em; }\n\n.mat-slide-toggle-content {\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\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.mat-stepper-vertical, .mat-stepper-horizontal {\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-step-label {\n font-size: 14px;\n font-weight: 400; }\n\n.mat-step-sub-label-error {\n font-weight: normal; }\n\n.mat-step-label-error {\n font-size: 14px; }\n\n.mat-step-label-selected {\n font-size: 14px;\n font-weight: 500; }\n\n.mat-tab-group {\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\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.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 margin: 0; }\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.mat-tooltip-handset {\n font-size: 14px;\n padding-top: 8px;\n padding-bottom: 8px; }\n\n.mat-list-item {\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-list-option {\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-list-base .mat-list-item {\n font-size: 16px; }\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 .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 .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 .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.mat-list-base[dense] .mat-list-item {\n font-size: 12px; }\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 .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 .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 .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.mat-option {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 16px; }\n\n.mat-optgroup-label {\n font: 500 14px/24px Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-simple-snackbar {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 14px; }\n\n.mat-simple-snackbar-action {\n line-height: 1;\n font-family: inherit;\n font-size: inherit;\n font-weight: 500; }\n\n.mat-tree {\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-tree-node,\n.mat-nested-tree-node {\n font-weight: 400;\n font-size: 14px; }\n\n.mat-ripple {\n overflow: hidden;\n position: relative; }\n\n.mat-ripple.mat-ripple-unbounded {\n overflow: visible; }\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 @media (-ms-high-contrast: active) {\n .mat-ripple-element {\n display: none; } }\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 outline: 0;\n -webkit-appearance: none;\n -moz-appearance: none; }\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.cdk-overlay-container {\n position: fixed;\n z-index: 1000; }\n .cdk-overlay-container:empty {\n display: none; }\n\n.cdk-global-overlay-wrapper {\n display: flex;\n position: absolute;\n z-index: 1000; }\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.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 .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {\n opacity: 1; }\n @media screen and (-ms-high-contrast: active) {\n .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {\n opacity: 0.6; } }\n\n.cdk-overlay-dark-backdrop {\n background: rgba(0, 0, 0, 0.32); }\n\n.cdk-overlay-transparent-backdrop, .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {\n opacity: 0; }\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.cdk-global-scrollblock {\n position: fixed;\n width: 100%;\n overflow-y: scroll; }\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-name: cdk-text-field-autofill-start; }\n\n.cdk-text-field-autofill-monitored:not(:-webkit-autofill) {\n animation-name: cdk-text-field-autofill-end; }\n\ntextarea.cdk-textarea-autosize {\n resize: none; }\n\ntextarea.cdk-textarea-autosize-measuring {\n height: auto !important;\n overflow: hidden !important;\n padding: 2px 0 !important;\n box-sizing: content-box !important; }\n\n.mat-ripple-element {\n background-color: rgba(0, 0, 0, 0.1); }\n\n.mat-option {\n color: rgba(0, 0, 0, 0.87); }\n .mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) {\n background: rgba(0, 0, 0, 0.04); }\n .mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {\n background: rgba(0, 0, 0, 0.04); }\n .mat-option.mat-active {\n background: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.87); }\n .mat-option.mat-option-disabled {\n color: rgba(0, 0, 0, 0.38); }\n\n.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {\n color: #ef6c00; }\n\n.mat-accent .mat-option.mat-selected:not(.mat-option-disabled) {\n color: #039be5; }\n\n.mat-warn .mat-option.mat-selected:not(.mat-option-disabled) {\n color: #e53935; }\n\n.mat-optgroup-label {\n color: rgba(0, 0, 0, 0.54); }\n\n.mat-optgroup-disabled .mat-optgroup-label {\n color: rgba(0, 0, 0, 0.38); }\n\n.mat-pseudo-checkbox {\n color: rgba(0, 0, 0, 0.54); }\n .mat-pseudo-checkbox::after {\n color: #fafafa; }\n\n.mat-pseudo-checkbox-disabled {\n color: #b0b0b0; }\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.mat-primary .mat-pseudo-checkbox-checked,\n.mat-primary .mat-pseudo-checkbox-indeterminate {\n background: #ef6c00; }\n\n.mat-warn .mat-pseudo-checkbox-checked,\n.mat-warn .mat-pseudo-checkbox-indeterminate {\n background: #e53935; }\n\n.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled,\n.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled {\n background: #b0b0b0; }\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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.mat-app-background {\n background-color: #fafafa;\n color: rgba(0, 0, 0, 0.87); }\n\n.mat-theme-loaded-marker {\n display: none; }\n\n.mat-autocomplete-panel {\n background: white;\n color: rgba(0, 0, 0, 0.87); }\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 .mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover) {\n background: white; }\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.mat-badge-content {\n color: white;\n background: #ef6c00; }\n @media (-ms-high-contrast: active) {\n .mat-badge-content {\n outline: solid 1px;\n border-radius: 0; } }\n\n.mat-badge-accent .mat-badge-content {\n background: #039be5;\n color: white; }\n\n.mat-badge-warn .mat-badge-content {\n color: white;\n background: #e53935; }\n\n.mat-badge {\n position: relative; }\n\n.mat-badge-hidden .mat-badge-content {\n display: none; }\n\n.mat-badge-disabled .mat-badge-content {\n background: #b9b9b9;\n color: rgba(0, 0, 0, 0.38); }\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.mat-badge-content.mat-badge-active {\n transform: none; }\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.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.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.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.mat-button, .mat-icon-button, .mat-stroked-button {\n color: inherit;\n background: transparent; }\n .mat-button.mat-primary, .mat-icon-button.mat-primary, .mat-stroked-button.mat-primary {\n color: #ef6c00; }\n .mat-button.mat-accent, .mat-icon-button.mat-accent, .mat-stroked-button.mat-accent {\n color: #039be5; }\n .mat-button.mat-warn, .mat-icon-button.mat-warn, .mat-stroked-button.mat-warn {\n color: #e53935; }\n .mat-button.mat-primary[disabled], .mat-button.mat-accent[disabled], .mat-button.mat-warn[disabled], .mat-button[disabled][disabled], .mat-icon-button.mat-primary[disabled], .mat-icon-button.mat-accent[disabled], .mat-icon-button.mat-warn[disabled], .mat-icon-button[disabled][disabled], .mat-stroked-button.mat-primary[disabled], .mat-stroked-button.mat-accent[disabled], .mat-stroked-button.mat-warn[disabled], .mat-stroked-button[disabled][disabled] {\n color: rgba(0, 0, 0, 0.26); }\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 .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 .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 .mat-button[disabled] .mat-button-focus-overlay, .mat-icon-button[disabled] .mat-button-focus-overlay, .mat-stroked-button[disabled] .mat-button-focus-overlay {\n background-color: transparent; }\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.mat-button-focus-overlay {\n background: black; }\n\n.mat-stroked-button:not([disabled]) {\n border-color: rgba(0, 0, 0, 0.12); }\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 .mat-flat-button.mat-primary, .mat-raised-button.mat-primary, .mat-fab.mat-primary, .mat-mini-fab.mat-primary {\n color: white; }\n .mat-flat-button.mat-accent, .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-mini-fab.mat-accent {\n color: white; }\n .mat-flat-button.mat-warn, .mat-raised-button.mat-warn, .mat-fab.mat-warn, .mat-mini-fab.mat-warn {\n color: white; }\n .mat-flat-button.mat-primary[disabled], .mat-flat-button.mat-accent[disabled], .mat-flat-button.mat-warn[disabled], .mat-flat-button[disabled][disabled], .mat-raised-button.mat-primary[disabled], .mat-raised-button.mat-accent[disabled], .mat-raised-button.mat-warn[disabled], .mat-raised-button[disabled][disabled], .mat-fab.mat-primary[disabled], .mat-fab.mat-accent[disabled], .mat-fab.mat-warn[disabled], .mat-fab[disabled][disabled], .mat-mini-fab.mat-primary[disabled], .mat-mini-fab.mat-accent[disabled], .mat-mini-fab.mat-warn[disabled], .mat-mini-fab[disabled][disabled] {\n color: rgba(0, 0, 0, 0.26); }\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 .mat-flat-button.mat-accent, .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-mini-fab.mat-accent {\n background-color: #039be5; }\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 .mat-flat-button.mat-primary[disabled], .mat-flat-button.mat-accent[disabled], .mat-flat-button.mat-warn[disabled], .mat-flat-button[disabled][disabled], .mat-raised-button.mat-primary[disabled], .mat-raised-button.mat-accent[disabled], .mat-raised-button.mat-warn[disabled], .mat-raised-button[disabled][disabled], .mat-fab.mat-primary[disabled], .mat-fab.mat-accent[disabled], .mat-fab.mat-warn[disabled], .mat-fab[disabled][disabled], .mat-mini-fab.mat-primary[disabled], .mat-mini-fab.mat-accent[disabled], .mat-mini-fab.mat-warn[disabled], .mat-mini-fab[disabled][disabled] {\n background-color: rgba(0, 0, 0, 0.12); }\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 .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 .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.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.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([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[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.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([disabled]):active:not([class*='mat-elevation-z']), .mat-mini-fab:not([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[disabled]:not([class*='mat-elevation-z']), .mat-mini-fab[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.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.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,\n.mat-button-toggle-group-appearance-standard {\n box-shadow: none; }\n\n.mat-button-toggle {\n color: rgba(0, 0, 0, 0.38); }\n .mat-button-toggle .mat-button-toggle-focus-overlay {\n background-color: rgba(0, 0, 0, 0.12); }\n\n.mat-button-toggle-appearance-standard {\n color: rgba(0, 0, 0, 0.87);\n background: white; }\n .mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay {\n background-color: black; }\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[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.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.mat-button-toggle-checked {\n background-color: #e0e0e0;\n color: rgba(0, 0, 0, 0.54); }\n .mat-button-toggle-checked.mat-button-toggle-appearance-standard {\n color: rgba(0, 0, 0, 0.87); }\n\n.mat-button-toggle-disabled {\n color: rgba(0, 0, 0, 0.26);\n background-color: #eeeeee; }\n .mat-button-toggle-disabled.mat-button-toggle-appearance-standard {\n background: white; }\n .mat-button-toggle-disabled.mat-button-toggle-checked {\n background-color: #bdbdbd; }\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.mat-card {\n background: white;\n color: rgba(0, 0, 0, 0.87); }\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 .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.mat-card-subtitle {\n color: rgba(0, 0, 0, 0.54); }\n\n.mat-checkbox-frame {\n border-color: rgba(0, 0, 0, 0.54); }\n\n.mat-checkbox-checkmark {\n fill: #fafafa; }\n\n.mat-checkbox-checkmark-path {\n stroke: #fafafa !important; }\n @media (-ms-high-contrast: black-on-white) {\n .mat-checkbox-checkmark-path {\n stroke: #000 !important; } }\n\n.mat-checkbox-mixedmark {\n background-color: #fafafa; }\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.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@media (-ms-high-contrast: active) {\n .mat-checkbox-disabled {\n opacity: 0.5; } }\n\n@media (-ms-high-contrast: active) {\n .mat-checkbox-background {\n background: none; } }\n\n.mat-checkbox:not(.mat-checkbox-disabled).mat-primary .mat-checkbox-ripple .mat-ripple-element {\n background-color: #ef6c00; }\n\n.mat-checkbox:not(.mat-checkbox-disabled).mat-accent .mat-checkbox-ripple .mat-ripple-element {\n background-color: #039be5; }\n\n.mat-checkbox:not(.mat-checkbox-disabled).mat-warn .mat-checkbox-ripple .mat-ripple-element {\n background-color: #e53935; }\n\n.mat-chip.mat-standard-chip {\n background-color: #e0e0e0;\n color: rgba(0, 0, 0, 0.87); }\n .mat-chip.mat-standard-chip .mat-chip-remove {\n color: rgba(0, 0, 0, 0.87);\n opacity: 0.4; }\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 .mat-chip.mat-standard-chip:not(.mat-chip-disabled) .mat-chip-remove:hover {\n opacity: 0.54; }\n .mat-chip.mat-standard-chip.mat-chip-disabled {\n opacity: 0.4; }\n .mat-chip.mat-standard-chip::after {\n background: black; }\n\n.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {\n background-color: #ef6c00;\n color: white; }\n .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary .mat-chip-remove {\n color: white;\n opacity: 0.4; }\n .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary .mat-ripple-element {\n background: 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 .mat-chip.mat-standard-chip.mat-chip-selected.mat-warn .mat-chip-remove {\n color: white;\n opacity: 0.4; }\n .mat-chip.mat-standard-chip.mat-chip-selected.mat-warn .mat-ripple-element {\n background: 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 .mat-chip.mat-standard-chip.mat-chip-selected.mat-accent .mat-chip-remove {\n color: white;\n opacity: 0.4; }\n .mat-chip.mat-standard-chip.mat-chip-selected.mat-accent .mat-ripple-element {\n background: rgba(255, 255, 255, 0.1); }\n\n.mat-table {\n background: white; }\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\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.mat-header-cell {\n color: rgba(0, 0, 0, 0.54); }\n\n.mat-cell, .mat-footer-cell {\n color: rgba(0, 0, 0, 0.87); }\n\n.mat-calendar-arrow {\n border-top-color: rgba(0, 0, 0, 0.54); }\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.mat-calendar-table-header {\n color: rgba(0, 0, 0, 0.38); }\n\n.mat-calendar-table-header-divider::after {\n background: rgba(0, 0, 0, 0.12); }\n\n.mat-calendar-body-label {\n color: rgba(0, 0, 0, 0.54); }\n\n.mat-calendar-body-cell-content {\n color: rgba(0, 0, 0, 0.87);\n border-color: transparent; }\n\n.mat-calendar-body-disabled > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {\n color: rgba(0, 0, 0, 0.38); }\n\n.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected),\n.cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected),\n.cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {\n background-color: rgba(0, 0, 0, 0.04); }\n\n.mat-calendar-body-today:not(.mat-calendar-body-selected) {\n border-color: rgba(0, 0, 0, 0.38); }\n\n.mat-calendar-body-disabled > .mat-calendar-body-today:not(.mat-calendar-body-selected) {\n border-color: rgba(0, 0, 0, 0.18); }\n\n.mat-calendar-body-selected {\n background-color: #ef6c00;\n color: white; }\n\n.mat-calendar-body-disabled > .mat-calendar-body-selected {\n background-color: rgba(239, 108, 0, 0.4); }\n\n.mat-calendar-body-today.mat-calendar-body-selected {\n box-shadow: inset 0 0 0 1px white; }\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 .mat-datepicker-content.mat-accent .mat-calendar-body-selected {\n background-color: #039be5;\n color: white; }\n .mat-datepicker-content.mat-accent .mat-calendar-body-disabled > .mat-calendar-body-selected {\n background-color: rgba(3, 155, 229, 0.4); }\n .mat-datepicker-content.mat-accent .mat-calendar-body-today.mat-calendar-body-selected {\n box-shadow: inset 0 0 0 1px white; }\n .mat-datepicker-content.mat-warn .mat-calendar-body-selected {\n background-color: #e53935;\n color: white; }\n .mat-datepicker-content.mat-warn .mat-calendar-body-disabled > .mat-calendar-body-selected {\n background-color: rgba(229, 57, 53, 0.4); }\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-touch {\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.mat-datepicker-toggle-active {\n color: #ef6c00; }\n .mat-datepicker-toggle-active.mat-accent {\n color: #039be5; }\n .mat-datepicker-toggle-active.mat-warn {\n color: #e53935; }\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.mat-divider {\n border-top-color: rgba(0, 0, 0, 0.12); }\n\n.mat-divider-vertical {\n border-right-color: rgba(0, 0, 0, 0.12); }\n\n.mat-expansion-panel {\n background: white;\n color: rgba(0, 0, 0, 0.87); }\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.mat-action-row {\n border-top-color: rgba(0, 0, 0, 0.12); }\n\n.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']).cdk-keyboard-focused, .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']).cdk-program-focused, .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']):hover {\n background: rgba(0, 0, 0, 0.04); }\n\n@media (hover: none) {\n .mat-expansion-panel:not(.mat-expanded):not([aria-disabled='true'])\n.mat-expansion-panel-header:hover {\n background: white; } }\n\n.mat-expansion-panel-header-title {\n color: rgba(0, 0, 0, 0.87); }\n\n.mat-expansion-panel-header-description,\n.mat-expansion-indicator::after {\n color: rgba(0, 0, 0, 0.54); }\n\n.mat-expansion-panel-header[aria-disabled='true'] {\n color: rgba(0, 0, 0, 0.26); }\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.mat-form-field-label {\n color: rgba(0, 0, 0, 0.6); }\n\n.mat-hint {\n color: rgba(0, 0, 0, 0.6); }\n\n.mat-form-field.mat-focused .mat-form-field-label {\n color: #ef6c00; }\n .mat-form-field.mat-focused .mat-form-field-label.mat-accent {\n color: #039be5; }\n .mat-form-field.mat-focused .mat-form-field-label.mat-warn {\n color: #e53935; }\n\n.mat-focused .mat-form-field-required-marker {\n color: #039be5; }\n\n.mat-form-field-ripple {\n background-color: rgba(0, 0, 0, 0.87); }\n\n.mat-form-field.mat-focused .mat-form-field-ripple {\n background-color: #ef6c00; }\n .mat-form-field.mat-focused .mat-form-field-ripple.mat-accent {\n background-color: #039be5; }\n .mat-form-field.mat-focused .mat-form-field-ripple.mat-warn {\n background-color: #e53935; }\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.mat-form-field.mat-form-field-invalid .mat-form-field-label {\n color: #e53935; }\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.mat-error {\n color: #e53935; }\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.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.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.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.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.mat-form-field-type-mat-native-select .mat-form-field-infix::after {\n color: rgba(0, 0, 0, 0.54); }\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.mat-input-element {\n caret-color: #ef6c00; }\n .mat-input-element::placeholder {\n color: rgba(0, 0, 0, 0.42); }\n .mat-input-element::-moz-placeholder {\n color: rgba(0, 0, 0, 0.42); }\n .mat-input-element::-webkit-input-placeholder {\n color: rgba(0, 0, 0, 0.42); }\n .mat-input-element:-ms-input-placeholder {\n color: rgba(0, 0, 0, 0.42); }\n\n.mat-accent .mat-input-element {\n caret-color: #039be5; }\n\n.mat-warn .mat-input-element,\n.mat-form-field-invalid .mat-input-element {\n caret-color: #e53935; }\n\n.mat-form-field-type-mat-native-select.mat-form-field-invalid .mat-form-field-infix::after {\n color: #e53935; }\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-item-disabled {\n background-color: #eeeeee; }\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.mat-menu-panel {\n background: white; }\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.mat-menu-item {\n background: transparent;\n color: rgba(0, 0, 0, 0.87); }\n .mat-menu-item[disabled], .mat-menu-item[disabled]::after {\n color: rgba(0, 0, 0, 0.38); }\n\n.mat-menu-item .mat-icon-no-color,\n.mat-menu-item-submenu-trigger::after {\n color: rgba(0, 0, 0, 0.54); }\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.mat-paginator {\n background: white; }\n\n.mat-paginator,\n.mat-paginator-page-size .mat-select-trigger {\n color: rgba(0, 0, 0, 0.54); }\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.mat-paginator-first,\n.mat-paginator-last {\n border-top: 2px solid rgba(0, 0, 0, 0.54); }\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.mat-progress-bar-background {\n fill: #ffe0b2; }\n\n.mat-progress-bar-buffer {\n background-color: #ffe0b2; }\n\n.mat-progress-bar-fill::after {\n background-color: #ef6c00; }\n\n.mat-progress-bar.mat-accent .mat-progress-bar-background {\n fill: #80d8ff; }\n\n.mat-progress-bar.mat-accent .mat-progress-bar-buffer {\n background-color: #80d8ff; }\n\n.mat-progress-bar.mat-accent .mat-progress-bar-fill::after {\n background-color: #039be5; }\n\n.mat-progress-bar.mat-warn .mat-progress-bar-background {\n fill: #ffcdd2; }\n\n.mat-progress-bar.mat-warn .mat-progress-bar-buffer {\n background-color: #ffcdd2; }\n\n.mat-progress-bar.mat-warn .mat-progress-bar-fill::after {\n background-color: #e53935; }\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.mat-radio-outer-circle {\n border-color: rgba(0, 0, 0, 0.54); }\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),\n.mat-radio-button.mat-primary.mat-radio-checked .mat-radio-persistent-ripple,\n.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),\n.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-persistent-ripple,\n.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),\n.mat-radio-button.mat-warn.mat-radio-checked .mat-radio-persistent-ripple,\n.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.mat-select-value {\n color: rgba(0, 0, 0, 0.87); }\n\n.mat-select-placeholder {\n color: rgba(0, 0, 0, 0.42); }\n\n.mat-select-disabled .mat-select-value {\n color: rgba(0, 0, 0, 0.38); }\n\n.mat-select-arrow {\n color: rgba(0, 0, 0, 0.54); }\n\n.mat-select-panel {\n background: white; }\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 .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) {\n background: rgba(0, 0, 0, 0.12); }\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.mat-drawer-container {\n background-color: #fafafa;\n color: rgba(0, 0, 0, 0.87); }\n\n.mat-drawer {\n background-color: white;\n color: rgba(0, 0, 0, 0.87); }\n .mat-drawer.mat-drawer-push {\n background-color: white; }\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.mat-drawer-side {\n border-right: solid 1px rgba(0, 0, 0, 0.12); }\n .mat-drawer-side.mat-drawer-end {\n border-left: solid 1px rgba(0, 0, 0, 0.12);\n border-right: none; }\n\n[dir='rtl'] .mat-drawer-side {\n border-left: solid 1px rgba(0, 0, 0, 0.12);\n border-right: none; }\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.mat-drawer-backdrop.mat-drawer-shown {\n background-color: rgba(0, 0, 0, 0.6); }\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.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.mat-slide-toggle-bar {\n background-color: rgba(0, 0, 0, 0.38); }\n\n.mat-slider-track-background {\n background-color: rgba(0, 0, 0, 0.26); }\n\n.mat-primary .mat-slider-track-fill,\n.mat-primary .mat-slider-thumb,\n.mat-primary .mat-slider-thumb-label {\n background-color: #ef6c00; }\n\n.mat-primary .mat-slider-thumb-label-text {\n color: white; }\n\n.mat-accent .mat-slider-track-fill,\n.mat-accent .mat-slider-thumb,\n.mat-accent .mat-slider-thumb-label {\n background-color: #039be5; }\n\n.mat-accent .mat-slider-thumb-label-text {\n color: white; }\n\n.mat-warn .mat-slider-track-fill,\n.mat-warn .mat-slider-thumb,\n.mat-warn .mat-slider-thumb-label {\n background-color: #e53935; }\n\n.mat-warn .mat-slider-thumb-label-text {\n color: white; }\n\n.mat-slider-focus-ring {\n background-color: rgba(3, 155, 229, 0.2); }\n\n.mat-slider:hover .mat-slider-track-background,\n.cdk-focused .mat-slider-track-background {\n background-color: rgba(0, 0, 0, 0.38); }\n\n.mat-slider-disabled .mat-slider-track-background,\n.mat-slider-disabled .mat-slider-track-fill,\n.mat-slider-disabled .mat-slider-thumb {\n background-color: rgba(0, 0, 0, 0.26); }\n\n.mat-slider-disabled:hover .mat-slider-track-background {\n background-color: rgba(0, 0, 0, 0.26); }\n\n.mat-slider-min-value .mat-slider-focus-ring {\n background-color: rgba(0, 0, 0, 0.12); }\n\n.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb,\n.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-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb,\n.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-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-min-value:not(.mat-slider-thumb-label-showing):hover .mat-slider-thumb, .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-min-value:not(.mat-slider-thumb-label-showing):hover.mat-slider-disabled .mat-slider-thumb, .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.mat-slider-has-ticks .mat-slider-wrapper::after {\n border-color: rgba(0, 0, 0, 0.7); }\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.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.mat-step-header.cdk-keyboard-focused, .mat-step-header.cdk-program-focused, .mat-step-header:hover {\n background-color: rgba(0, 0, 0, 0.04); }\n\n@media (hover: none) {\n .mat-step-header:hover {\n background: none; } }\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-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.mat-stepper-horizontal, .mat-stepper-vertical {\n background-color: white; }\n\n.mat-stepper-vertical-line::before {\n border-left-color: rgba(0, 0, 0, 0.12); }\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.mat-sort-header-arrow {\n color: #757575; }\n\n.mat-tab-nav-bar,\n.mat-tab-header {\n border-bottom: 1px solid rgba(0, 0, 0, 0.12); }\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.mat-tab-label, .mat-tab-link {\n color: rgba(0, 0, 0, 0.87); }\n .mat-tab-label.mat-tab-disabled, .mat-tab-link.mat-tab-disabled {\n color: rgba(0, 0, 0, 0.38); }\n\n.mat-tab-header-pagination-chevron {\n border-color: rgba(0, 0, 0, 0.87); }\n\n.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n border-color: rgba(0, 0, 0, 0.38); }\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.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-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary .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-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent .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-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn .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-links, .mat-tab-nav-bar.mat-background-primary .mat-tab-header, .mat-tab-nav-bar.mat-background-primary .mat-tab-links {\n background-color: #ef6c00; }\n\n.mat-tab-group.mat-background-primary .mat-tab-label, .mat-tab-group.mat-background-primary .mat-tab-link, .mat-tab-nav-bar.mat-background-primary .mat-tab-label, .mat-tab-nav-bar.mat-background-primary .mat-tab-link {\n color: white; }\n .mat-tab-group.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-primary .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .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-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-chevron {\n border-color: white; }\n\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-pagination-disabled .mat-tab-header-pagination-chevron {\n border-color: rgba(255, 255, 255, 0.4); }\n\n.mat-tab-group.mat-background-primary .mat-ripple-element, .mat-tab-nav-bar.mat-background-primary .mat-ripple-element {\n background-color: rgba(255, 255, 255, 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-links, .mat-tab-nav-bar.mat-background-accent .mat-tab-header, .mat-tab-nav-bar.mat-background-accent .mat-tab-links {\n background-color: #039be5; }\n\n.mat-tab-group.mat-background-accent .mat-tab-label, .mat-tab-group.mat-background-accent .mat-tab-link, .mat-tab-nav-bar.mat-background-accent .mat-tab-label, .mat-tab-nav-bar.mat-background-accent .mat-tab-link {\n color: white; }\n .mat-tab-group.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-accent .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .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-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-chevron {\n border-color: white; }\n\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-pagination-disabled .mat-tab-header-pagination-chevron {\n border-color: rgba(255, 255, 255, 0.4); }\n\n.mat-tab-group.mat-background-accent .mat-ripple-element, .mat-tab-nav-bar.mat-background-accent .mat-ripple-element {\n background-color: rgba(255, 255, 255, 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-links, .mat-tab-nav-bar.mat-background-warn .mat-tab-header, .mat-tab-nav-bar.mat-background-warn .mat-tab-links {\n background-color: #e53935; }\n\n.mat-tab-group.mat-background-warn .mat-tab-label, .mat-tab-group.mat-background-warn .mat-tab-link, .mat-tab-nav-bar.mat-background-warn .mat-tab-label, .mat-tab-nav-bar.mat-background-warn .mat-tab-link {\n color: white; }\n .mat-tab-group.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-warn .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .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-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-chevron {\n border-color: white; }\n\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-pagination-disabled .mat-tab-header-pagination-chevron {\n border-color: rgba(255, 255, 255, 0.4); }\n\n.mat-tab-group.mat-background-warn .mat-ripple-element, .mat-tab-nav-bar.mat-background-warn .mat-ripple-element {\n background-color: rgba(255, 255, 255, 0.12); }\n\n.mat-toolbar {\n background: whitesmoke;\n color: rgba(0, 0, 0, 0.87); }\n .mat-toolbar.mat-primary {\n background: #ef6c00;\n color: white; }\n .mat-toolbar.mat-accent {\n background: #039be5;\n color: white; }\n .mat-toolbar.mat-warn {\n background: #e53935;\n color: white; }\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 .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 .mat-toolbar .mat-input-element {\n caret-color: currentColor; }\n\n.mat-tooltip {\n background: rgba(97, 97, 97, 0.9); }\n\n.mat-tree {\n background: white; }\n\n.mat-tree-node,\n.mat-nested-tree-node {\n color: rgba(0, 0, 0, 0.87); }\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.mat-simple-snackbar-action {\n color: #039be5; }\n\nbody {\n font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.td-chip-content {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 12px; }\n\n.td-data-table-cell {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px; }\n\n.td-data-table-column {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 12px;\n font-weight: 600; }\n\n.td-dialog-title {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 20px;\n font-weight: 500; }\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.td-expansion-label {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 16px;\n font-weight: 400; }\n\n.td-expansion-sublabel {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 14px;\n font-weight: 400; }\n\n.td-key {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 14px; }\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.td-message-sublabel {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 14px; }\n\n.td-paging-bar {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 12px; }\n\n.td-step-label {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 14px;\n font-weight: 500; }\n\n.td-step-sublabel {\n font-family: Roboto, \"Helvetica Neue\", sans-serif;\n font-size: 14px;\n line-height: 20px; }\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\ntd-breadcrumb:last-of-type {\n font-weight: bold;\n cursor: default; }\n\nmat-list-item mat-icon,\n.mat-list-item-content mat-icon {\n color: rgba(0, 0, 0, 0.54); }\n mat-list-item mat-icon[matListAvatar],\n .mat-list-item-content mat-icon[matListAvatar] {\n background-color: rgba(0, 0, 0, 0.04); }\n\n.mat-list-text p {\n color: rgba(0, 0, 0, 0.38); }\n\n.mat-drawer-container {\n background-color: #e0e0e0; }\n\n[mat-icon-button].td-layout-menu-button {\n margin-left: 0; }\n ::ng-deep [dir='rtl'] [mat-icon-button].td-layout-menu-button {\n margin-right: 0;\n margin-left: 6px; }\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.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.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 .td-layout-footer.mat-primary {\n background: #ef6c00; }\n .td-layout-footer.mat-primary, .td-layout-footer.mat-primary mat-icon {\n color: white; }\n .td-layout-footer.mat-accent {\n background: #039be5; }\n .td-layout-footer.mat-accent, .td-layout-footer.mat-accent mat-icon {\n color: white; }\n .td-layout-footer.mat-warn {\n background: #e53935; }\n .td-layout-footer.mat-warn, .td-layout-footer.mat-warn mat-icon {\n color: white; }\n\n.td-steps .td-step-content,\n.td-steps .td-step-summary,\n.td-steps .td-step-actions {\n margin: 16px; }\n\n.td-steps .td-horizontal-line {\n border-bottom-color: rgba(0, 0, 0, 0.12); }\n\n.td-steps .td-vertical-line {\n border-left-color: rgba(0, 0, 0, 0.12); }\n\n.td-steps .td-step-link:focus:not(.mat-disabled) .td-step-header, .td-steps .td-step-link:hover:not(.mat-disabled) .td-step-header {\n background: rgba(0, 0, 0, 0.04); }\n\n.td-steps .td-step-header.mat-disabled {\n cursor: default; }\n\n.td-steps .td-step-header:focus:not(.mat-disabled), .td-steps .td-step-header:hover:not(.mat-disabled) {\n background: rgba(0, 0, 0, 0.04); }\n\n.td-steps .td-step-header .td-step-label-wrapper .td-step-label {\n color: rgba(0, 0, 0, 0.87); }\n\n.td-steps .td-step-header .td-step-label-wrapper .td-step-sublabel {\n color: rgba(0, 0, 0, 0.54); }\n\n.td-steps .td-step-header .td-step-label-wrapper.mat-inactive, .td-steps .td-step-header .td-step-label-wrapper.mat-inactive * {\n color: rgba(0, 0, 0, 0.38); }\n\n.td-steps .td-step-header .td-step-label-wrapper.mat-warn, .td-steps .td-step-header .td-step-label-wrapper.mat-warn * {\n color: #e53935; }\n\n.td-steps .td-step-header .mat-complete {\n color: #039be5; }\n\n.td-steps .td-circle {\n color: white; }\n .td-steps .td-circle.mat-active {\n background-color: #039be5; }\n .td-steps .td-circle.mat-inactive {\n background-color: rgba(0, 0, 0, 0.38); }\n .td-steps .td-circle mat-icon {\n fill: rgba(0, 0, 0, 0.87); }\n\n.td-steps .td-triangle {\n color: #e53935; }\n\n.td-steps .td-edit-icon {\n color: rgba(0, 0, 0, 0.54); }\n\n.td-steps .td-step-header-pagination-chevron {\n border-color: rgba(0, 0, 0, 0.87); }\n\n.td-steps .td-step-header-pagination-disabled .td-step-header-pagination-chevron {\n border-color: rgba(0, 0, 0, 0.38); }\n\n.td-expansion-panel-group .td-expansion-panel {\n transition: 120ms ease-in; }\n .td-expansion-panel-group .td-expansion-panel:not(:last-of-type).td-expanded {\n margin-bottom: 16px; }\n .td-expansion-panel-group .td-expansion-panel:not(:first-of-type).td-expanded {\n margin-top: 16px; }\n\n.td-expansion-panel {\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: white; }\n .td-expansion-panel .td-expansion-panel-header:focus:not(.mat-disabled), .td-expansion-panel .td-expansion-panel-header:hover:not(.mat-disabled) {\n background: rgba(0, 0, 0, 0.04); }\n .td-expansion-panel .td-expansion-panel-header .td-expansion-panel-header-content mat-icon.td-expand-icon {\n color: rgba(0, 0, 0, 0.54); }\n .td-expansion-panel .td-expansion-panel-header .td-expansion-panel-header-content.mat-disabled, .td-expansion-panel .td-expansion-panel-header .td-expansion-panel-header-content.mat-disabled * {\n color: rgba(0, 0, 0, 0.38); }\n .td-expansion-panel mat-icon.td-expand-icon {\n color: rgba(0, 0, 0, 0.54); }\n .td-expansion-panel .td-expansion-label, .td-expansion-panel .td-expansion-label *,\n .td-expansion-panel .td-expansion-sublabel,\n .td-expansion-panel .td-expansion-sublabel * {\n vertical-align: middle; }\n .td-expansion-panel .td-expansion-sublabel {\n color: rgba(0, 0, 0, 0.54); }\n\ntd-chips .mat-basic-chip {\n background: #e0e0e0;\n color: rgba(0, 0, 0, 0.87); }\n td-chips .mat-basic-chip:focus:not(.td-chip-disabled) mat-icon:hover {\n color: rgba(0, 0, 0, 0.54); }\n td-chips .mat-basic-chip:focus:not(.td-chip-disabled).mat-primary {\n background: #ef6c00; }\n td-chips .mat-basic-chip:focus:not(.td-chip-disabled).mat-primary, td-chips .mat-basic-chip:focus:not(.td-chip-disabled).mat-primary mat-icon {\n color: white; }\n td-chips .mat-basic-chip:focus:not(.td-chip-disabled).mat-accent {\n background: #039be5; }\n td-chips .mat-basic-chip:focus:not(.td-chip-disabled).mat-accent, td-chips .mat-basic-chip:focus:not(.td-chip-disabled).mat-accent mat-icon {\n color: white; }\n td-chips .mat-basic-chip:focus:not(.td-chip-disabled).mat-warn {\n background: #e53935; }\n td-chips .mat-basic-chip:focus:not(.td-chip-disabled).mat-warn, td-chips .mat-basic-chip:focus:not(.td-chip-disabled).mat-warn mat-icon {\n color: white; }\n td-chips .mat-basic-chip mat-icon.td-chip-removal {\n color: rgba(0, 0, 0, 0.38); }\n td-chips .mat-basic-chip mat-icon.td-chip-removal:hover {\n color: rgba(0, 0, 0, 0.54); }\n\ntd-chips .mat-form-field-underline {\n background-color: rgba(0, 0, 0, 0.42); }\n\ntd-chips.mat-primary .mat-form-field-underline .mat-form-field-ripple {\n background-color: #ef6c00; }\n\ntd-chips.mat-accent .mat-form-field-underline .mat-form-field-ripple {\n background-color: #039be5; }\n\ntd-chips.mat-warn .mat-form-field-underline .mat-form-field-ripple {\n background-color: #e53935; }\n\ntd-chips.ng-invalid .mat-form-field-underline .mat-form-field-ripple {\n background-color: #e53935; }\n\ntd-chips.ng-invalid .mat-form-field-label-wrapper > label.mat-form-field-label.mat-form-field-empty {\n color: #e53935; }\n\ntd-file-upload .td-file-upload-cancel mat-icon {\n background-color: #fafafa; }\n\ntd-file-input {\n /**\n * Class that is added ondragenter by the [TdFileDrop] directive.\n */ }\n td-file-input .drop-zone {\n transition: background 400ms 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.td-dialog-message {\n color: rgba(0, 0, 0, 0.54); }\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: '\\200E'; }\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\ntd-paging-bar, td-paging-bar mat-select .mat-select-value {\n color: rgba(0, 0, 0, 0.54); }\n\n.td-loading-wrapper.td-overlay .td-loading {\n background: rgba(255, 255, 255, 0.8); }\n\ntd-data-table {\n border-bottom: 1px solid rgba(0, 0, 0, 0.12); }\n\n.td-data-table-scrollable {\n border-top: 1px solid rgba(0, 0, 0, 0.12); }\n\n.td-data-table-column-resizer .td-data-table-column-separator {\n border-right: 2px solid rgba(0, 0, 0, 0.12);\n opacity: 0.3; }\n\n.td-data-table-column-resizer:hover .td-data-table-column-separator, .td-data-table-column-resizer.td-resizing .td-data-table-column-separator {\n opacity: 1; }\n\ntable[td-data-table] .td-data-table-column-row,\ntable[td-data-table] .td-data-table-row {\n border-bottom-color: rgba(0, 0, 0, 0.12); }\n\ntable[td-data-table] .mat-checkbox-cell,\ntable[td-data-table] .mat-checkbox-column {\n color: rgba(0, 0, 0, 0.54); }\n table[td-data-table] .mat-checkbox-cell mat-pseudo-checkbox.mat-pseudo-checkbox-checked,\n table[td-data-table] .mat-checkbox-column mat-pseudo-checkbox.mat-pseudo-checkbox-checked {\n background-color: #039be5; }\n\ntable[td-data-table] .td-data-table-cell mat-form-field .mat-form-field-underline {\n display: none; }\n\ntable[td-data-table] .td-data-table-column {\n color: rgba(0, 0, 0, 0.54); }\n table[td-data-table] .td-data-table-column * {\n vertical-align: middle; }\n table[td-data-table] .td-data-table-column mat-icon.td-data-table-sort-icon {\n color: rgba(0, 0, 0, 0.38); }\n table[td-data-table] .td-data-table-column.mat-active,\n table[td-data-table] .td-data-table-column.mat-active mat-icon {\n color: black; }\n\ntable[td-data-table].mat-selectable tbody > tr.td-data-table-row.td-selected {\n background-color: whitesmoke; }\n\ntable[td-data-table].mat-selectable tbody > tr.td-data-table-row:focus {\n background-color: rgba(0, 0, 0, 0.04); }\n\ntable[td-data-table].mat-clickable tbody > tr.td-data-table-row:hover {\n background-color: rgba(0, 0, 0, 0.04); }\n\n.mat-selected-title {\n background-color: rgba(3, 155, 229, 0.12);\n color: #039be5; }\n\n.td-notification-count {\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 .td-notification-count.mat-warn {\n background-color: #e53935;\n color: white; }\n .td-notification-count.mat-primary {\n background-color: #ef6c00;\n color: white; }\n .td-notification-count.mat-accent {\n background-color: #039be5;\n color: white; }\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","$black-87-opacity: rgba(black, 0.87);\n$white-87-opacity: rgba(white, 0.87);\n$black-12-opacity: rgba(black, 0.12);\n$white-12-opacity: rgba(white, 0.12);\n$black-6-opacity: rgba(black, 0.06);\n$white-6-opacity: rgba(white, 0.06);\n\n$mat-red: (\n 50: #ffebee,\n 100: #ffcdd2,\n 200: #ef9a9a,\n 300: #e57373,\n 400: #ef5350,\n 500: #f44336,\n 600: #e53935,\n 700: #d32f2f,\n 800: #c62828,\n 900: #b71c1c,\n A100: #ff8a80,\n A200: #ff5252,\n A400: #ff1744,\n A700: #d50000,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: white,\n A700: white,\n )\n);\n\n$mat-pink: (\n 50: #fce4ec,\n 100: #f8bbd0,\n 200: #f48fb1,\n 300: #f06292,\n 400: #ec407a,\n 500: #e91e63,\n 600: #d81b60,\n 700: #c2185b,\n 800: #ad1457,\n 900: #880e4f,\n A100: #ff80ab,\n A200: #ff4081,\n A400: #f50057,\n A700: #c51162,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: white,\n A700: white,\n )\n);\n\n$mat-purple: (\n 50: #f3e5f5,\n 100: #e1bee7,\n 200: #ce93d8,\n 300: #ba68c8,\n 400: #ab47bc,\n 500: #9c27b0,\n 600: #8e24aa,\n 700: #7b1fa2,\n 800: #6a1b9a,\n 900: #4a148c,\n A100: #ea80fc,\n A200: #e040fb,\n A400: #d500f9,\n A700: #aa00ff,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: white,\n 400: white,\n 500: $white-87-opacity,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: white,\n A700: white,\n )\n);\n\n$mat-deep-purple: (\n 50: #ede7f6,\n 100: #d1c4e9,\n 200: #b39ddb,\n 300: #9575cd,\n 400: #7e57c2,\n 500: #673ab7,\n 600: #5e35b1,\n 700: #512da8,\n 800: #4527a0,\n 900: #311b92,\n A100: #b388ff,\n A200: #7c4dff,\n A400: #651fff,\n A700: #6200ea,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: white,\n 400: white,\n 500: $white-87-opacity,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: $white-87-opacity,\n A700: $white-87-opacity,\n )\n);\n\n$mat-indigo: (\n 50: #e8eaf6,\n 100: #c5cae9,\n 200: #9fa8da,\n 300: #7986cb,\n 400: #5c6bc0,\n 500: #3f51b5,\n 600: #3949ab,\n 700: #303f9f,\n 800: #283593,\n 900: #1a237e,\n A100: #8c9eff,\n A200: #536dfe,\n A400: #3d5afe,\n A700: #304ffe,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: white,\n 400: white,\n 500: $white-87-opacity,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: white,\n A700: $white-87-opacity,\n )\n);\n\n$mat-blue: (\n 50: #e3f2fd,\n 100: #bbdefb,\n 200: #90caf9,\n 300: #64b5f6,\n 400: #42a5f5,\n 500: #2196f3,\n 600: #1e88e5,\n 700: #1976d2,\n 800: #1565c0,\n 900: #0d47a1,\n A100: #82b1ff,\n A200: #448aff,\n A400: #2979ff,\n A700: #2962ff,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: white,\n A700: white,\n )\n);\n\n$mat-light-blue: (\n 50: #e1f5fe,\n 100: #b3e5fc,\n 200: #81d4fa,\n 300: #4fc3f7,\n 400: #29b6f6,\n 500: #03a9f4,\n 600: #039be5,\n 700: #0288d1,\n 800: #0277bd,\n 900: #01579b,\n A100: #80d8ff,\n A200: #40c4ff,\n A400: #00b0ff,\n A700: #0091ea,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: white,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: white,\n )\n);\n\n$mat-cyan: (\n 50: #e0f7fa,\n 100: #b2ebf2,\n 200: #80deea,\n 300: #4dd0e1,\n 400: #26c6da,\n 500: #00bcd4,\n 600: #00acc1,\n 700: #0097a7,\n 800: #00838f,\n 900: #006064,\n A100: #84ffff,\n A200: #18ffff,\n A400: #00e5ff,\n A700: #00b8d4,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: white,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n )\n);\n\n$mat-teal: (\n 50: #e0f2f1,\n 100: #b2dfdb,\n 200: #80cbc4,\n 300: #4db6ac,\n 400: #26a69a,\n 500: #009688,\n 600: #00897b,\n 700: #00796b,\n 800: #00695c,\n 900: #004d40,\n A100: #a7ffeb,\n A200: #64ffda,\n A400: #1de9b6,\n A700: #00bfa5,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n )\n);\n\n$mat-green: (\n 50: #e8f5e9,\n 100: #c8e6c9,\n 200: #a5d6a7,\n 300: #81c784,\n 400: #66bb6a,\n 500: #4caf50,\n 600: #43a047,\n 700: #388e3c,\n 800: #2e7d32,\n 900: #1b5e20,\n A100: #b9f6ca,\n A200: #69f0ae,\n A400: #00e676,\n A700: #00c853,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n )\n);\n\n$mat-light-green: (\n 50: #f1f8e9,\n 100: #dcedc8,\n 200: #c5e1a5,\n 300: #aed581,\n 400: #9ccc65,\n 500: #8bc34a,\n 600: #7cb342,\n 700: #689f38,\n 800: #558b2f,\n 900: #33691e,\n A100: #ccff90,\n A200: #b2ff59,\n A400: #76ff03,\n A700: #64dd17,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $black-87-opacity,\n 700: $black-87-opacity,\n 800: white,\n 900: white,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n )\n);\n\n$mat-lime: (\n 50: #f9fbe7,\n 100: #f0f4c3,\n 200: #e6ee9c,\n 300: #dce775,\n 400: #d4e157,\n 500: #cddc39,\n 600: #c0ca33,\n 700: #afb42b,\n 800: #9e9d24,\n 900: #827717,\n A100: #f4ff81,\n A200: #eeff41,\n A400: #c6ff00,\n A700: #aeea00,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $black-87-opacity,\n 700: $black-87-opacity,\n 800: $black-87-opacity,\n 900: white,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n )\n);\n\n$mat-yellow: (\n 50: #fffde7,\n 100: #fff9c4,\n 200: #fff59d,\n 300: #fff176,\n 400: #ffee58,\n 500: #ffeb3b,\n 600: #fdd835,\n 700: #fbc02d,\n 800: #f9a825,\n 900: #f57f17,\n A100: #ffff8d,\n A200: #ffff00,\n A400: #ffea00,\n A700: #ffd600,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $black-87-opacity,\n 700: $black-87-opacity,\n 800: $black-87-opacity,\n 900: $black-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n )\n);\n\n$mat-amber: (\n 50: #fff8e1,\n 100: #ffecb3,\n 200: #ffe082,\n 300: #ffd54f,\n 400: #ffca28,\n 500: #ffc107,\n 600: #ffb300,\n 700: #ffa000,\n 800: #ff8f00,\n 900: #ff6f00,\n A100: #ffe57f,\n A200: #ffd740,\n A400: #ffc400,\n A700: #ffab00,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $black-87-opacity,\n 700: $black-87-opacity,\n 800: $black-87-opacity,\n 900: $black-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n )\n);\n\n$mat-orange: (\n 50: #fff3e0,\n 100: #ffe0b2,\n 200: #ffcc80,\n 300: #ffb74d,\n 400: #ffa726,\n 500: #ff9800,\n 600: #fb8c00,\n 700: #f57c00,\n 800: #ef6c00,\n 900: #e65100,\n A100: #ffd180,\n A200: #ffab40,\n A400: #ff9100,\n A700: #ff6d00,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $black-87-opacity,\n 700: $black-87-opacity,\n 800: white,\n 900: white,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: black,\n )\n);\n\n$mat-deep-orange: (\n 50: #fbe9e7,\n 100: #ffccbc,\n 200: #ffab91,\n 300: #ff8a65,\n 400: #ff7043,\n 500: #ff5722,\n 600: #f4511e,\n 700: #e64a19,\n 800: #d84315,\n 900: #bf360c,\n A100: #ff9e80,\n A200: #ff6e40,\n A400: #ff3d00,\n A700: #dd2c00,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: white,\n 900: white,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: white,\n A700: white,\n )\n);\n\n$mat-brown: (\n 50: #efebe9,\n 100: #d7ccc8,\n 200: #bcaaa4,\n 300: #a1887f,\n 400: #8d6e63,\n 500: #795548,\n 600: #6d4c41,\n 700: #5d4037,\n 800: #4e342e,\n 900: #3e2723,\n A100: #d7ccc8,\n A200: #bcaaa4,\n A400: #8d6e63,\n A700: #5d4037,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: white,\n 400: white,\n 500: $white-87-opacity,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: white,\n A700: $white-87-opacity,\n )\n);\n\n$mat-grey: (\n 0: #ffffff,\n 50: #fafafa,\n 100: #f5f5f5,\n 200: #eeeeee,\n 300: #e0e0e0,\n 400: #bdbdbd,\n 500: #9e9e9e,\n 600: #757575,\n 700: #616161,\n 800: #424242,\n 900: #212121,\n 1000: #000000,\n A100: #ffffff,\n A200: #eeeeee,\n A400: #bdbdbd,\n A700: #616161,\n contrast: (\n 0: $black-87-opacity,\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n 1000: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $white-87-opacity,\n )\n);\n\n$mat-blue-grey: (\n 50: #eceff1,\n 100: #cfd8dc,\n 200: #b0bec5,\n 300: #90a4ae,\n 400: #78909c,\n 500: #607d8b,\n 600: #546e7a,\n 700: #455a64,\n 800: #37474f,\n 900: #263238,\n A100: #cfd8dc,\n A200: #b0bec5,\n A400: #78909c,\n A700: #455a64,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: white,\n 500: white,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: white,\n A700: $white-87-opacity,\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:\n #{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// 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 @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 transition: mat-elevation-transition-property-value($duration, $easing);\n will-change: $mat-elevation-property;\n}\n","@import '../chips/chips-theme';\n@import '../data-table/data-table-theme';\n@import '../dialogs/dialog-theme';\n@import '../expansion-panel/expansion-panel-theme';\n@import '../json-formatter/json-formatter-theme';\n@import '../message/message-theme';\n@import '../paging/paging-bar-theme';\n@import '../steps/steps-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-chips-typography($config);\n @include td-data-table-typography($config);\n @include td-dialog-typography($config);\n @include td-expansion-panel-typography($config);\n @include td-json-formatter-typography($config);\n @include td-message-typography($config);\n @include td-paging-bar-typography($config);\n @include td-steps-typography($config);\n @include td-layout-typography($config);\n}\n","// Utility for fetching a nested value from a typography config.\n@function _td-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@function td-font-size($config, $level) {\n @return _td-get-type-value($config, $level, font-size);\n}\n\n// Gets the line height for a level inside a typography config.\n@function td-line-height($config, $level) {\n @return _td-get-type-value($config, $level, line-height);\n}\n\n// Gets the font weight for a level inside a typography config.\n@function td-font-weight($config, $level) {\n @return _td-get-type-value($config, $level, font-weight);\n}\n\n// Gets the font-family from a typography config and removes the quotes around it.\n@function td-font-family($config, $level: null) {\n $font-family: map-get($config, font-family);\n\n @if $level != null {\n $font-family: _td-get-type-value($config, $level, font-family);\n }\n\n @return unquote($font-family);\n}\n\n// Represents a typography level from the Material design spec.\n@function td-typography-level($font-size, $line-height: $font-size, $font-weight: 400) {\n @return (\n font-size: $font-size,\n line-height: $line-height,\n font-weight: $font-weight\n );\n}\n","@import '../common/styles/theme-functions';\n@import '../common/styles/typography-functions';\n\n@mixin td-chips-typography($config) {\n .td-chip-content {\n font: {\n family: td-font-family($config);\n size: td-font-size($config, caption);\n }\n }\n}\n\n@mixin td-chips-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 $is-dark-theme: map-get($theme, is-dark);\n\n // chips\n td-chips {\n // chip\n .mat-basic-chip {\n background: mat-color($background, status-bar);\n color: mat-color($foreground, text);\n &:focus:not(.td-chip-disabled) {\n mat-icon:hover {\n color: mat-color($foreground, icon);\n }\n &.mat-primary {\n background: mat-color($primary);\n &, mat-icon {\n color: mat-color($primary, default-contrast);\n }\n }\n &.mat-accent {\n background: mat-color($accent);\n &, mat-icon {\n color: mat-color($accent, default-contrast);\n }\n }\n &.mat-warn {\n background: mat-color($warn);\n &, mat-icon {\n color: mat-color($warn, default-contrast);\n }\n }\n }\n mat-icon.td-chip-removal {\n color: mat-color($foreground, hint-text);\n &:hover {\n color: mat-color($foreground, icon);\n }\n }\n }\n .mat-form-field-underline {\n background-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));\n }\n &.mat-primary {\n .mat-form-field-underline .mat-form-field-ripple {\n background-color: mat-color($primary);\n }\n }\n &.mat-accent {\n .mat-form-field-underline .mat-form-field-ripple {\n background-color: mat-color($accent);\n }\n }\n &.mat-warn {\n .mat-form-field-underline .mat-form-field-ripple {\n background-color: mat-color($warn);\n }\n }\n &.ng-invalid {\n .mat-form-field-underline .mat-form-field-ripple {\n background-color: mat-color($warn);\n }\n .mat-form-field-label-wrapper > label.mat-form-field-label.mat-form-field-empty {\n color: mat-color($warn);\n }\n }\n }\n}\n","@import '../common/styles/typography-functions';\n\n@mixin td-data-table-typography($config) {\n .td-data-table-cell {\n font: {\n family: td-font-family($config);\n size: td-font-size($config, body-1);\n weight: td-font-weight($config, body-1);\n }\n line-height: td-line-height($config, body-1);\n }\n .td-data-table-column {\n font: {\n family: td-font-family($config);\n size: td-font-size($config, caption);\n weight: 600;\n }\n }\n}\n\n@mixin td-data-table-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 td-data-table {\n border-bottom: 1px solid mat-color($foreground, divider);\n }\n .td-data-table-scrollable {\n border-top: 1px solid mat-color($foreground, divider);\n }\n .td-data-table-column-resizer {\n .td-data-table-column-separator {\n border-right: 2px solid mat-color($foreground, divider);\n opacity: 0.3;\n }\n &:hover, &.td-resizing {\n .td-data-table-column-separator {\n opacity: 1;\n }\n }\n }\n table[td-data-table] {\n .td-data-table-column-row,\n .td-data-table-row {\n border-bottom-color: mat-color($foreground, divider);\n }\n .mat-checkbox-cell,\n .mat-checkbox-column {\n color: mat-color($foreground, secondary-text);\n mat-pseudo-checkbox.mat-pseudo-checkbox-checked {\n background-color: mat-color($accent);\n }\n }\n .td-data-table-cell {\n mat-form-field {\n .mat-form-field-underline {\n display: none;\n }\n }\n }\n .td-data-table-column {\n color: mat-color($foreground, secondary-text);\n * {\n vertical-align: middle;\n }\n mat-icon {\n &.td-data-table-sort-icon {\n color: mat-color($foreground, disabled);\n }\n }\n &.mat-active,\n &.mat-active mat-icon {\n color: mat-color($foreground, base);\n }\n }\n &.mat-selectable tbody > tr.td-data-table-row {\n &.td-selected {\n background-color: mat-color($background, 'app-bar');\n }\n &:focus {\n background-color: mat-color($background, 'hover');\n }\n }\n &.mat-clickable tbody > tr.td-data-table-row {\n &:hover {\n background-color: mat-color($background, 'hover');\n }\n }\n }\n .mat-selected-title {\n background-color: mat-color($accent, 0.12);\n color: mat-color($accent);\n }\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 .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 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 .td-dialog-message {\n color: mat-color($foreground, secondary-text);\n }\n}\n","@import '../common/styles/variables';\n@import '../common/styles/elevation';\n@import '../common/styles/theme-functions';\n@import '../common/styles/typography-functions';\n\n@mixin td-expansion-panel-typography($config) {\n .td-expansion-label {\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 .td-expansion-sublabel {\n font: {\n family: td-font-family($config);\n size: td-font-size($config, body-1);\n weight: td-font-weight($config, body-1);\n }\n }\n}\n\n@mixin td-expansion-panel-theme($theme) {\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-expansion-panel-group {\n .td-expansion-panel {\n transition: 120ms ease-in;\n &:not(:last-of-type) {\n &.td-expanded {\n margin-bottom: $margin;\n }\n }\n &:not(:first-of-type) {\n &.td-expanded {\n margin-top: $margin;\n }\n }\n }\n }\n\n .td-expansion-panel {\n @include mat-elevation(1);\n background-color: mat-color($background, card);\n .td-expansion-panel-header {\n &:focus:not(.mat-disabled),\n &:hover:not(.mat-disabled) {\n background: mat-color($background, 'hover');\n }\n .td-expansion-panel-header-content {\n mat-icon.td-expand-icon {\n color: mat-color($foreground, icon);\n }\n &.mat-disabled {\n &, & * {\n color: mat-color($foreground, disabled);\n }\n }\n }\n }\n mat-icon.td-expand-icon {\n color: mat-color($foreground, icon);\n }\n .td-expansion-label,\n .td-expansion-sublabel {\n &, & * {\n vertical-align: middle;\n }\n }\n .td-expansion-sublabel {\n color: mat-color($foreground, secondary-text);\n }\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 .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 .td-key {\n &.td-key-node {\n &:focus,\n &:hover {\n background-color: mat-color($background, hover);\n }\n .td-node-icon {\n color: mat-color($foreground, secondary-text);\n }\n }\n }\n .key {\n color: mat-color($primary);\n }\n .value {\n .string {\n color: mat-color($warn);\n }\n .number {\n color: mat-color($accent);\n }\n .boolean {\n color: mat-color($accent);\n }\n .null,\n .undefined {\n color: mat-color($foreground, disabled-text);\n }\n .function {\n color: mat-color($primary);\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 line-height: td-line-height($config, body-2);\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 &.mat-accent {\n color: mat-color($accent);\n background-color: mat-color($accent, 0.15);\n }\n &.mat-warn {\n color: mat-color($warn);\n background-color: mat-color($warn, 0.15);\n }\n }\n}\n","@import '../common/styles/theme-functions';\n@import '../common/styles/typography-functions';\n\n@mixin td-paging-bar-typography($config) {\n .td-paging-bar {\n font: {\n family: td-font-family($config);\n size: td-font-size($config, caption);\n }\n }\n}\n\n@mixin td-paging-bar-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 td-paging-bar {\n &, & mat-select .mat-select-value {\n color: mat-color($foreground, secondary-text);\n }\n }\n}\n","@import '../common/styles/variables';\n@import '../common/styles/theme-functions';\n@import '../common/styles/typography-functions';\n\n@mixin td-steps-typography($config) {\n .td-step-label {\n font: {\n family: td-font-family($config);\n size: td-font-size($config, body-2);\n weight: td-font-weight($config, body-2);\n }\n }\n .td-step-sublabel {\n font: {\n family: td-font-family($config);\n size: td-font-size($config, body-1);\n }\n line-height: td-line-height($config, body-1);\n }\n}\n\n@mixin td-steps-theme($theme) {\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 .td-steps {\n .td-step-content,\n .td-step-summary,\n .td-step-actions {\n margin: $margin;\n }\n // steps\n .td-horizontal-line {\n border-bottom-color: mat-color($foreground, divider);\n }\n .td-vertical-line {\n border-left-color: mat-color($foreground, divider);\n }\n // header\n .td-step-link {\n &:focus:not(.mat-disabled),\n &:hover:not(.mat-disabled) {\n .td-step-header {\n background: mat-color($background, 'hover');\n }\n }\n }\n .td-step-header {\n &.mat-disabled {\n cursor: default;\n }\n &:focus:not(.mat-disabled),\n &:hover:not(.mat-disabled) {\n background: mat-color($background, 'hover');\n }\n .td-step-label-wrapper {\n .td-step-label {\n color: mat-color($foreground, text);\n }\n .td-step-sublabel {\n color: mat-color($foreground, secondary-text);\n }\n &.mat-inactive {\n &, & * {\n color: mat-color($foreground, disabled);\n }\n }\n &.mat-warn {\n &, & * {\n color: mat-color($warn);\n }\n }\n }\n .mat-complete {\n color: mat-color($accent);\n }\n }\n .td-circle {\n color: mat-color($background, card);\n &.mat-active {\n background-color: mat-color($accent);\n }\n &.mat-inactive {\n background-color: mat-color($foreground, disabled);\n }\n & mat-icon {\n fill: mat-color($foreground, text);\n }\n }\n .td-triangle {\n color: mat-color($warn);\n }\n .td-edit-icon {\n color: mat-color($foreground, icon);\n }\n\n .td-step-header-pagination-chevron {\n border-color: mat-color($foreground, text);\n }\n .td-step-header-pagination-disabled .td-step-header-pagination-chevron {\n border-color: mat-color($foreground, disabled-text);\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 .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 line-height: td-line-height($config, body-1);\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 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 ::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 z-index: 1;\n }\n }\n .mat-drawer-side.td-layout-sidenav {\n @include mat-elevation(2);\n }\n .td-layout-footer {\n background: mat-color($background, app-bar);\n color: mat-color($foreground, text);\n @include mat-elevation(2);\n &.mat-primary {\n background: mat-color($primary);\n &, mat-icon {\n color: mat-color($primary, default-contrast);\n }\n }\n &.mat-accent {\n background: mat-color($accent);\n &, mat-icon {\n color: mat-color($accent, default-contrast);\n }\n }\n &.mat-warn {\n background: mat-color($warn);\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 &[matListAvatar] {\n background-color: mat-color($background, hover);\n }\n }\n }\n .mat-list-text {\n p {\n color: mat-color($foreground, disabled);\n }\n }\n}\n","@import 'theme-functions';\n\n// Teradata UI Platform\n// ------------------------------\n$navigation-drawer-width: 320px !default;\n$padding: 16px;\n$margin: $padding;\n$step-circle: 24px;\n\n// Typography\n// ------------------------------\n$font-family: RobotoDraft, Roboto, 'Helvetica Neue', sans-serif !default;\n$font-size: 10px;\n\n$display-4-font-size-base: rem(11.2) !default;\n$display-3-font-size-base: rem(5.6) !default;\n$display-2-font-size-base: rem(4.5) !default;\n$display-1-font-size-base: rem(3.4) !default;\n$headline-font-size-base: rem(2.4) !default;\n$title-font-size-base: rem(2) !default;\n$subhead-font-size-base: rem(1.6) !default;\n\n$body-font-size-base: rem(1.4) !default;\n$caption-font-size-base: rem(1.2) !default;\n\n// Layout\n$baseline-grid: 8px !default;\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$layout-gutter-width: ($baseline-grid * 2) !default;\n\n// Typography\n$mat-body-font-size-base: rem(1.4) !default;\n\n// App bar variables\n$app-bar-height: 64px;\n\n// card header variables\n$mat-card-header-size: 40px;\n$mat-card-radius: 2px;\n\n// Icons\n$icon-size: rem(2.4);\n\n// Toast\n$toast-height: $baseline-grid * 3 !default;\n$toast-margin: $baseline-grid * 1 !default;\n\n// Whiteframes\n$whiteframe-shadow-z1: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !default;\n$whiteframe-zindex-z1: 1 !default;\n$whiteframe-shadow-z2: 0 8px 17px rgba(0, 0, 0, 0.2) !default;\n$whiteframe-zindex-z2: 2 !default;\n$whiteframe-shadow-z3: 0 17px 50px rgba(0, 0, 0, 0.19) !default;\n$whiteframe-zindex-z3: 3 !default;\n$whiteframe-shadow-z4: 0 16px 28px 0 rgba(0, 0, 0, 0.22) !default;\n$whiteframe-zindex-z4: 4 !default;\n$whiteframe-shadow-z5: 0 27px 24px 0 rgba(0, 0, 0, 0.2) !default;\n$whiteframe-zindex-z5: 5 !default;\n\n// Z-indexes\n$z-index-tooltip: 100 !default;\n$z-index-dialog: 80 !default;\n$z-index-toast: 90 !default;\n$z-index-bottom-sheet: 70 !default;\n$z-index-scroll-mask: 65 !default;\n$z-index-sidenav: 60 !default;\n$z-index-backdrop: 50 !default;\n$z-index-toolbar: 30 !default;\n$z-index-fab: 20 !default;\n$z-index-progress-circular: 2 !default; // Used to fix animation bug in Chrome\n\n// Easing Curves\n\n// The default animation curves used by material design.\n$mat-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;\n$mat-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;\n$mat-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;\n\n$ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default;\n\n$swift-ease-out-duration: 0.4s !default;\n$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;\n$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;\n\n$swift-ease-in-duration: 0.3s !default;\n$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;\n$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;\n\n$swift-ease-in-out-duration: 0.5s !default;\n$swift-ease-in-out-timing-function: cubic-bezier(0.35, 0, 0.25, 1) !default;\n$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;\n\n$swift-linear-duration: 0.08s !default;\n$swift-linear-timing-function: linear !default;\n$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;\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 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","@import '../common/styles/theme-functions';\n\n@mixin td-loading-theme($theme) {\n $background: map-get($theme, background);\n .td-loading-wrapper {\n &.td-overlay .td-loading {\n background: rgba(mat-color($background, dialog), 0.8);\n }\n }\n}\n","@import '../common/styles/variables';\n@import '../common/styles/elevation';\n@import '../common/styles/theme-functions';\n\n@mixin td-notification-count-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-notification-count {\n @include mat-elevation(1);\n &.mat-warn {\n background-color: mat-color($warn);\n color: mat-color($warn, default-contrast);\n }\n &.mat-primary {\n background-color: mat-color($primary);\n color: mat-color($primary, default-contrast);\n }\n &.mat-accent {\n background-color: mat-color($accent);\n color: mat-color($accent, default-contrast);\n }\n }\n}\n"],"sourceRoot":"/source/"}