@transferwise/components 46.130.3 → 46.131.1

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 (389) hide show
  1. package/build/flowNavigation/FlowNavigation.js +4 -2
  2. package/build/flowNavigation/FlowNavigation.js.map +1 -1
  3. package/build/flowNavigation/FlowNavigation.mjs +4 -2
  4. package/build/flowNavigation/FlowNavigation.mjs.map +1 -1
  5. package/build/main.css +27004 -7
  6. package/build/styles/css/accordion.css +255 -0
  7. package/build/styles/css/alerts.css +751 -0
  8. package/build/styles/css/background.css +20 -0
  9. package/build/styles/css/badge.css +90 -0
  10. package/build/styles/css/border-radius.css +3 -0
  11. package/build/styles/css/breadcrumbs.css +20 -0
  12. package/build/styles/css/button-groups.css +495 -0
  13. package/build/styles/css/buttons.css +1390 -0
  14. package/build/styles/css/chevron.css +35 -0
  15. package/build/styles/css/circles.css +248 -0
  16. package/build/styles/css/close.css +47 -0
  17. package/build/styles/css/column-layout.css +164 -0
  18. package/build/styles/css/currency-flags.css +46 -0
  19. package/build/styles/css/decision.css +136 -0
  20. package/build/styles/css/dropdowns.css +472 -0
  21. package/build/styles/css/droppable.css +221 -0
  22. package/build/styles/css/flex.css +598 -0
  23. package/build/styles/css/footer.css +129 -0
  24. package/build/styles/css/grid.css +2369 -0
  25. package/build/styles/css/input-groups.css +2740 -0
  26. package/build/styles/css/link-callout.css +20 -0
  27. package/build/styles/css/list-group.css +350 -0
  28. package/build/styles/css/loaders.css +76 -0
  29. package/build/styles/css/media.css +74 -0
  30. package/build/styles/css/modals.css +185 -0
  31. package/build/styles/css/navbar.css +2406 -0
  32. package/build/styles/css/navs.css +296 -0
  33. package/build/styles/css/neptune-social-media.css +144 -0
  34. package/build/styles/css/neptune.css +25724 -0
  35. package/build/styles/css/panels.css +528 -0
  36. package/build/styles/css/popovers.css +661 -0
  37. package/build/styles/css/process.css +483 -0
  38. package/build/styles/css/progress-bars.css +64 -0
  39. package/build/styles/css/ring.css +55 -0
  40. package/build/styles/css/select.css +99 -0
  41. package/build/styles/css/sequences.css +855 -0
  42. package/build/styles/css/table.css +446 -0
  43. package/build/styles/css/tick.css +32 -0
  44. package/build/styles/css/tooltip.css +160 -0
  45. package/build/styles/css/utilities.css +145 -0
  46. package/build/styles/css/wells.css +74 -0
  47. package/build/styles/fonts/TW-Averta-Bold.woff +0 -0
  48. package/build/styles/fonts/TW-Averta-Bold.woff2 +0 -0
  49. package/build/styles/fonts/TW-Averta-Regular.woff +0 -0
  50. package/build/styles/fonts/TW-Averta-Regular.woff2 +0 -0
  51. package/build/styles/fonts/TW-Averta-Semibold.woff +0 -0
  52. package/build/styles/fonts/TW-Averta-Semibold.woff2 +0 -0
  53. package/build/styles/fonts/TransferWise-IconFont.svg +81 -0
  54. package/build/styles/fonts/TransferWise-IconFont.woff +0 -0
  55. package/build/styles/fonts/WiseSans-Heavy.woff2 +0 -0
  56. package/build/styles/fonts/inter-cyrillic-ext-variable-wghtOnly-normal.woff2 +0 -0
  57. package/build/styles/fonts/inter-cyrillic-variable-wghtOnly-normal.woff2 +0 -0
  58. package/build/styles/fonts/inter-greek-ext-variable-wghtOnly-normal.woff2 +0 -0
  59. package/build/styles/fonts/inter-greek-variable-wghtOnly-normal.woff2 +0 -0
  60. package/build/styles/fonts/inter-latin-ext-variable-wghtOnly-normal.woff2 +0 -0
  61. package/build/styles/fonts/inter-latin-variable-wghtOnly-normal.woff2 +0 -0
  62. package/build/styles/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2 +0 -0
  63. package/build/styles/img/bg-dark.svg +31 -0
  64. package/build/styles/img/bg-light.svg +26 -0
  65. package/build/styles/less/legacy-variables.css +0 -0
  66. package/build/styles/less/legacy-variables.less +1299 -0
  67. package/build/styles/less/neptune-tokens.css +0 -0
  68. package/build/styles/less/neptune-tokens.less +275 -0
  69. package/build/styles/less/zindex.css +0 -0
  70. package/build/styles/less/zindex.less +17 -0
  71. package/build/styles/main.css +27004 -7
  72. package/build/styles/props/custom-media.css +11 -0
  73. package/build/styles/props/legacy-custom-props.css +69 -0
  74. package/build/styles/props/neptune-tokens.css +152 -0
  75. package/build/styles/styles/less/accordion.css +255 -0
  76. package/build/styles/styles/less/alerts.css +751 -0
  77. package/build/styles/styles/less/background.css +20 -0
  78. package/build/styles/styles/less/badge.css +90 -0
  79. package/build/styles/styles/less/border-radius.css +3 -0
  80. package/build/styles/styles/less/breadcrumbs.css +20 -0
  81. package/build/styles/styles/less/button-groups.css +495 -0
  82. package/build/styles/styles/less/buttons.css +1390 -0
  83. package/build/styles/styles/less/chevron.css +35 -0
  84. package/build/styles/styles/less/circles.css +248 -0
  85. package/build/styles/styles/less/close.css +47 -0
  86. package/build/styles/styles/less/column-layout.css +164 -0
  87. package/build/styles/styles/less/core/viewport-themes.css +59 -0
  88. package/build/styles/styles/less/currency-flags.css +46 -0
  89. package/build/styles/styles/less/decision.css +136 -0
  90. package/build/styles/styles/less/dropdowns.css +472 -0
  91. package/build/styles/styles/less/droppable.css +221 -0
  92. package/build/styles/styles/less/flex.css +598 -0
  93. package/build/styles/styles/less/footer.css +129 -0
  94. package/build/styles/styles/less/forms/bootstrap-forms.css +2277 -0
  95. package/build/styles/styles/less/forms/checkbox-radio.css +367 -0
  96. package/build/styles/styles/less/grid.css +2369 -0
  97. package/build/styles/styles/less/input-groups.css +2740 -0
  98. package/build/styles/styles/less/link-callout.css +20 -0
  99. package/build/styles/styles/less/list-group.css +350 -0
  100. package/build/styles/styles/less/loaders.css +76 -0
  101. package/build/styles/styles/less/media.css +74 -0
  102. package/build/styles/styles/less/modals.css +185 -0
  103. package/build/styles/styles/less/navbar.css +2406 -0
  104. package/build/styles/styles/less/navs.css +296 -0
  105. package/build/styles/styles/less/neptune-social-media.css +144 -0
  106. package/build/styles/styles/less/neptune.css +25724 -0
  107. package/build/styles/styles/less/panels.css +528 -0
  108. package/build/styles/styles/less/popovers.css +661 -0
  109. package/build/styles/styles/less/process.css +483 -0
  110. package/build/styles/styles/less/progress-bars.css +64 -0
  111. package/build/styles/styles/less/ring.css +55 -0
  112. package/build/styles/styles/less/select.css +99 -0
  113. package/build/styles/styles/less/sequences.css +855 -0
  114. package/build/styles/styles/less/table.css +446 -0
  115. package/build/styles/styles/less/tick.css +32 -0
  116. package/build/styles/styles/less/tooltip.css +160 -0
  117. package/build/styles/styles/less/utilities.css +145 -0
  118. package/build/styles/styles/less/wells.css +74 -0
  119. package/build/styles/styles/props/custom-media.css +11 -0
  120. package/build/styles/styles/props/legacy-custom-props.css +69 -0
  121. package/build/styles/styles/props/neptune-tokens.css +11 -0
  122. package/build/styles/styles/variables/legacy-variables.css +0 -0
  123. package/build/styles/styles/variables/neptune-tokens.css +0 -0
  124. package/build/styles/styles/variables/zindex.css +0 -0
  125. package/build/types/flowNavigation/FlowNavigation.d.ts.map +1 -1
  126. package/package.json +8 -4
  127. package/src/{DisabledComponents.story.tsx → DisabledComponents.test.story.tsx} +1 -1
  128. package/src/accordion/Accordion.less +3 -3
  129. package/src/actionButton/ActionButton.less +1 -1
  130. package/src/actionButton/ActionButton.story.tsx +11 -7
  131. package/src/actionButton/ActionButton.test.story.tsx +49 -0
  132. package/src/avatar/Avatar.less +3 -3
  133. package/src/avatarLayout/AvatarLayout.story.tsx +1 -105
  134. package/src/avatarLayout/AvatarLayout.test.story.tsx +117 -0
  135. package/src/avatarView/AvatarView.story.tsx +1 -104
  136. package/src/avatarView/AvatarView.test.story.tsx +114 -0
  137. package/src/badge/Badge.less +1 -1
  138. package/src/button/LegacyButton.less +1 -1
  139. package/src/button/LegacyButton.story.tsx +1 -26
  140. package/src/button/LegacyButton.test.story.tsx +37 -0
  141. package/src/button/_stories/Button.story.tsx +17 -41
  142. package/src/button/_stories/Button.test.story.tsx +30 -0
  143. package/src/card/Card.less +3 -3
  144. package/src/checkbox/Checkbox.story.tsx +1 -6
  145. package/src/checkbox/Checkbox.test.story.tsx +33 -0
  146. package/src/checkboxButton/CheckboxButton.less +2 -2
  147. package/src/chips/Chip.less +3 -3
  148. package/src/circularButton/CircularButton.story.tsx +0 -6
  149. package/src/circularButton/CircularButton.test.story.tsx +62 -1
  150. package/src/common/Option/Option.less +2 -2
  151. package/src/common/bottomSheet/BottomSheet.less +1 -1
  152. package/src/common/bottomSheet/BottomSheet.story.tsx +0 -55
  153. package/src/common/bottomSheet/BottomSheet.test.story.tsx +118 -2
  154. package/src/common/closeButton/CloseButton.less +1 -1
  155. package/src/common/panel/Panel.less +1 -1
  156. package/src/criticalBanner/CriticalCommsBanner.test.story.tsx +1 -1
  157. package/src/dateLookup/DateLookup.less +1 -1
  158. package/src/dateLookup/DateLookup.story.tsx +0 -18
  159. package/src/dateLookup/DateLookup.test.story.tsx +51 -1
  160. package/src/dateLookup/dateTrigger/DateTrigger.less +2 -2
  161. package/src/decision/Decision.less +1 -1
  162. package/src/definitionList/DefinitionList.less +1 -1
  163. package/src/dimmer/Dimmer.less +2 -2
  164. package/src/divider/Divider.story.tsx +0 -1
  165. package/src/expressiveMoneyInput/ExpressiveMoneyInput.autofocus.docs.mdx +1 -1
  166. package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx +0 -9
  167. package/src/expressiveMoneyInput/ExpressiveMoneyInput.test.story.tsx +23 -0
  168. package/src/field/Field.story.tsx +1 -34
  169. package/src/field/Field.test.story.tsx +56 -0
  170. package/src/flowNavigation/FlowNavigation.less +1 -1
  171. package/src/flowNavigation/FlowNavigation.test.js +7 -0
  172. package/src/flowNavigation/FlowNavigation.tsx +5 -2
  173. package/src/flowNavigation/animatedLabel/AnimatedLabel.less +2 -2
  174. package/src/header/Header.test.story.tsx +1 -1
  175. package/src/info/Info.less +1 -1
  176. package/src/info/Info.story.tsx +1 -34
  177. package/src/info/Info.test.story.tsx +53 -0
  178. package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx +0 -12
  179. package/src/inputWithDisplayFormat/InputWithDisplayFormat.test.story.tsx +33 -0
  180. package/src/inputs/SelectInput/ClearButton/SelectInputClearButton.less +1 -1
  181. package/src/inputs/SelectInput/Options/SelectInputOptions.less +1 -1
  182. package/src/inputs/SelectInput/SelectInput.less +1 -1
  183. package/src/inputs/_common.less +1 -1
  184. package/src/legacylistItem/LegacyListItem.test.story.tsx +1 -1
  185. package/src/link/Link.less +2 -2
  186. package/src/listItem/ListItem.less +1 -1
  187. package/src/listItem/_stories/Breakpoints/ListItem.noMedia.test.story.tsx +1 -1
  188. package/src/listItem/_stories/Breakpoints/ListItem.sideMedia.test.story.tsx +1 -1
  189. package/src/listItem/_stories/Breakpoints/ListItem.stackedMedia.test.story.tsx +1 -1
  190. package/src/listItem/_stories/ListItem.focus.test.story.tsx +1 -1
  191. package/src/listItem/_stories/ListItem.layout.test.story.tsx +1 -1
  192. package/src/listItem/_stories/variants/ListItem.brightGreen.test.story.tsx +1 -1
  193. package/src/listItem/_stories/variants/ListItem.dark.test.story.tsx +1 -1
  194. package/src/listItem/_stories/variants/ListItem.forestGreen.test.story.tsx +1 -1
  195. package/src/listItem/_stories/variants/ListItem.medium.test.story.tsx +1 -1
  196. package/src/listItem/_stories/variants/ListItem.neutral.test.story.tsx +1 -1
  197. package/src/listItem/_stories/variants/ListItem.personal.test.story.tsx +1 -1
  198. package/src/listItem/_stories/variants/ListItem.rtl.test.story.tsx +1 -1
  199. package/src/listItem/_stories/variants/ListItem.small.test.story.tsx +1 -1
  200. package/src/logo/Logo.story.tsx +0 -6
  201. package/src/logo/Logo.test.story.tsx +20 -0
  202. package/src/main.css +27004 -7
  203. package/src/main.less +2 -0
  204. package/src/modal/Modal.story.tsx +0 -26
  205. package/src/modal/Modal.test.story.tsx +125 -0
  206. package/src/moneyInput/MoneyInput.less +2 -2
  207. package/src/moneyInput/MoneyInput.test.story.tsx +1 -1
  208. package/src/navigationOption/NavigationOption.less +3 -3
  209. package/src/navigationOptionsList/NavigationOptionsList.less +1 -1
  210. package/src/overlayHeader/OverlayHeader.less +1 -1
  211. package/src/phoneNumberInput/PhoneNumberInput.less +1 -1
  212. package/src/popover/Popover.less +1 -1
  213. package/src/prompt/ActionPrompt/ActionPrompt.story.tsx +0 -43
  214. package/src/prompt/ActionPrompt/ActionPrompt.test.story.tsx +45 -1
  215. package/src/radioGroup/RadioGroup.test.story.tsx +1 -1
  216. package/src/select/Select.less +5 -5
  217. package/src/slidingPanel/SlidingPanel.less +2 -2
  218. package/src/snackbar/Snackbar.less +3 -3
  219. package/src/stepper/Stepper.less +3 -3
  220. package/src/stepper/Stepper.test.story.tsx +1 -1
  221. package/src/styles/fonts/TW-Averta-Bold.woff +0 -0
  222. package/src/styles/fonts/TW-Averta-Bold.woff2 +0 -0
  223. package/src/styles/fonts/TW-Averta-Regular.woff +0 -0
  224. package/src/styles/fonts/TW-Averta-Regular.woff2 +0 -0
  225. package/src/styles/fonts/TW-Averta-Semibold.woff +0 -0
  226. package/src/styles/fonts/TW-Averta-Semibold.woff2 +0 -0
  227. package/src/styles/fonts/TransferWise-IconFont.svg +81 -0
  228. package/src/styles/fonts/TransferWise-IconFont.woff +0 -0
  229. package/src/styles/fonts/WiseSans-Heavy.woff2 +0 -0
  230. package/src/styles/fonts/inter-cyrillic-ext-variable-wghtOnly-normal.woff2 +0 -0
  231. package/src/styles/fonts/inter-cyrillic-variable-wghtOnly-normal.woff2 +0 -0
  232. package/src/styles/fonts/inter-greek-ext-variable-wghtOnly-normal.woff2 +0 -0
  233. package/src/styles/fonts/inter-greek-variable-wghtOnly-normal.woff2 +0 -0
  234. package/src/styles/fonts/inter-latin-ext-variable-wghtOnly-normal.woff2 +0 -0
  235. package/src/styles/fonts/inter-latin-variable-wghtOnly-normal.woff2 +0 -0
  236. package/src/styles/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2 +0 -0
  237. package/src/styles/img/bg-dark.svg +31 -0
  238. package/src/styles/img/bg-light.svg +26 -0
  239. package/src/styles/less/accordion.css +255 -0
  240. package/src/styles/less/accordion.less +15 -0
  241. package/src/styles/less/addons/_background-utilities.less +82 -0
  242. package/src/styles/less/addons/_border.less +3 -0
  243. package/src/styles/less/addons/_display-utilities.less +159 -0
  244. package/src/styles/less/addons/_spacing-utilities.less +73 -0
  245. package/src/styles/less/addons/_utilities.less +147 -0
  246. package/src/styles/less/alerts.css +751 -0
  247. package/src/styles/less/alerts.less +252 -0
  248. package/src/styles/less/background.css +20 -0
  249. package/src/styles/less/background.less +24 -0
  250. package/src/styles/less/badge.css +90 -0
  251. package/src/styles/less/badge.less +85 -0
  252. package/src/styles/less/border-radius.css +3 -0
  253. package/src/styles/less/border-radius.less +3 -0
  254. package/src/styles/less/breadcrumbs.css +20 -0
  255. package/src/styles/less/breadcrumbs.less +27 -0
  256. package/src/styles/less/button-groups.css +495 -0
  257. package/src/styles/less/button-groups.less +424 -0
  258. package/src/styles/less/buttons.css +1390 -0
  259. package/src/styles/less/buttons.less +738 -0
  260. package/src/styles/less/chevron.css +35 -0
  261. package/src/styles/less/chevron.less +39 -0
  262. package/src/styles/less/circles.css +248 -0
  263. package/src/styles/less/circles.less +233 -0
  264. package/src/styles/less/close.css +47 -0
  265. package/src/styles/less/close.less +48 -0
  266. package/src/styles/less/column-layout.css +164 -0
  267. package/src/styles/less/column-layout.less +167 -0
  268. package/src/styles/less/components/_component-animations.less +43 -0
  269. package/src/styles/less/core/_fonts.less +97 -0
  270. package/src/styles/less/core/_scaffolding.less +380 -0
  271. package/src/styles/less/core/_typography-utilities.less +255 -0
  272. package/src/styles/less/core/_typography.less +575 -0
  273. package/src/styles/less/core/viewport-themes.css +59 -0
  274. package/src/styles/less/core/viewport-themes.less +65 -0
  275. package/src/styles/less/currency-flags.css +46 -0
  276. package/src/styles/less/currency-flags.less +42 -0
  277. package/src/styles/less/decision.css +136 -0
  278. package/src/styles/less/decision.less +98 -0
  279. package/src/styles/less/dropdowns.css +472 -0
  280. package/src/styles/less/dropdowns.less +365 -0
  281. package/src/styles/less/droppable.css +221 -0
  282. package/src/styles/less/droppable.less +213 -0
  283. package/src/styles/less/flex.css +598 -0
  284. package/src/styles/less/flex.less +113 -0
  285. package/src/styles/less/footer.css +129 -0
  286. package/src/styles/less/footer.less +113 -0
  287. package/src/styles/less/forms/bootstrap-forms.css +2277 -0
  288. package/src/styles/less/forms/bootstrap-forms.less +1218 -0
  289. package/src/styles/less/forms/checkbox-radio.css +367 -0
  290. package/src/styles/less/forms/checkbox-radio.less +330 -0
  291. package/src/styles/less/grid.css +2369 -0
  292. package/src/styles/less/grid.less +187 -0
  293. package/src/styles/less/input-groups.css +2740 -0
  294. package/src/styles/less/input-groups.less +298 -0
  295. package/src/styles/less/link-callout.css +20 -0
  296. package/src/styles/less/link-callout.less +17 -0
  297. package/src/styles/less/list-group.css +350 -0
  298. package/src/styles/less/list-group.less +260 -0
  299. package/src/styles/less/loaders.css +76 -0
  300. package/src/styles/less/loaders.less +91 -0
  301. package/src/styles/less/media.css +74 -0
  302. package/src/styles/less/media.less +68 -0
  303. package/src/styles/less/mixins/_alerts.less +39 -0
  304. package/src/styles/less/mixins/_arrows.less +52 -0
  305. package/src/styles/less/mixins/_border-radius.less +11 -0
  306. package/src/styles/less/mixins/_buttons.less +82 -0
  307. package/src/styles/less/mixins/_center-block.less +7 -0
  308. package/src/styles/less/mixins/_clearfix.less +23 -0
  309. package/src/styles/less/mixins/_flex.less +105 -0
  310. package/src/styles/less/mixins/_forms.less +130 -0
  311. package/src/styles/less/mixins/_grid-framework.less +104 -0
  312. package/src/styles/less/mixins/_grid.less +158 -0
  313. package/src/styles/less/mixins/_hide-text.less +20 -0
  314. package/src/styles/less/mixins/_links.less +7 -0
  315. package/src/styles/less/mixins/_list-group.less +23 -0
  316. package/src/styles/less/mixins/_logical-properties-IE-friendly.less +381 -0
  317. package/src/styles/less/mixins/_logical-properties-modern-browsers.less +226 -0
  318. package/src/styles/less/mixins/_logical-properties.less +5 -0
  319. package/src/styles/less/mixins/_nav-divider.less +10 -0
  320. package/src/styles/less/mixins/_nav-vertical-align.less +10 -0
  321. package/src/styles/less/mixins/_panels.less +23 -0
  322. package/src/styles/less/mixins/_physical-properties.less +110 -0
  323. package/src/styles/less/mixins/_reset-text.less +22 -0
  324. package/src/styles/less/mixins/_sequence.less +203 -0
  325. package/src/styles/less/mixins/_spacing.less +122 -0
  326. package/src/styles/less/mixins/_tab-focus.less +5 -0
  327. package/src/styles/less/mixins/_table-row.less +47 -0
  328. package/src/styles/less/mixins/_text-emphasis.less +39 -0
  329. package/src/styles/less/mixins/_text-overflow.less +8 -0
  330. package/src/styles/less/mixins/_theming.less +7 -0
  331. package/src/styles/less/modals.css +185 -0
  332. package/src/styles/less/modals.less +239 -0
  333. package/src/styles/less/navbar.css +2406 -0
  334. package/src/styles/less/navbar.less +1442 -0
  335. package/src/styles/less/navs.css +296 -0
  336. package/src/styles/less/navs.less +339 -0
  337. package/src/styles/less/neptune-social-media.css +144 -0
  338. package/src/styles/less/neptune-social-media.less +84 -0
  339. package/src/styles/less/neptune.bundle.less +63 -0
  340. package/src/styles/less/neptune.css +25724 -0
  341. package/src/styles/less/panels.css +528 -0
  342. package/src/styles/less/panels.less +410 -0
  343. package/src/styles/less/popovers.css +661 -0
  344. package/src/styles/less/popovers.less +379 -0
  345. package/src/styles/less/process.css +483 -0
  346. package/src/styles/less/process.less +426 -0
  347. package/src/styles/less/progress-bars.css +64 -0
  348. package/src/styles/less/progress-bars.less +55 -0
  349. package/src/styles/less/ring.css +55 -0
  350. package/src/styles/less/ring.less +51 -0
  351. package/src/styles/less/select.css +99 -0
  352. package/src/styles/less/select.less +88 -0
  353. package/src/styles/less/sequences.css +855 -0
  354. package/src/styles/less/sequences.less +511 -0
  355. package/src/styles/less/table.css +446 -0
  356. package/src/styles/less/table.less +385 -0
  357. package/src/styles/less/tick.css +32 -0
  358. package/src/styles/less/tick.less +37 -0
  359. package/src/styles/less/tooltip.css +160 -0
  360. package/src/styles/less/tooltip.less +130 -0
  361. package/src/styles/less/utilities.css +145 -0
  362. package/src/styles/less/utilities.less +153 -0
  363. package/src/styles/less/wells.css +74 -0
  364. package/src/styles/less/wells.less +37 -0
  365. package/src/styles/props/custom-media.css +11 -0
  366. package/src/styles/props/legacy-custom-props.css +69 -0
  367. package/src/styles/props/neptune-tokens.css +11 -0
  368. package/src/styles/variables/legacy-variables.css +0 -0
  369. package/src/styles/variables/legacy-variables.less +1299 -0
  370. package/src/styles/variables/neptune-tokens.css +0 -0
  371. package/src/styles/variables/neptune-tokens.less +12 -0
  372. package/src/styles/variables/zindex.css +0 -0
  373. package/src/styles/variables/zindex.less +17 -0
  374. package/src/summary/Summary.less +1 -1
  375. package/src/summary/Summary.test.story.tsx +1 -1
  376. package/src/switch/Switch.less +4 -4
  377. package/src/table/Table.less +1 -1
  378. package/src/tabs/Tabs.less +4 -4
  379. package/src/tile/Tile.less +1 -1
  380. package/src/tooltip/Tooltip.less +1 -1
  381. package/src/tooltip/Tooltip.story.tsx +0 -21
  382. package/src/tooltip/Tooltip.test.story.tsx +42 -0
  383. package/src/typeahead/Typeahead.less +2 -2
  384. package/src/typeahead/Typeahead.story.tsx +0 -52
  385. package/src/typeahead/Typeahead.test.story.tsx +73 -0
  386. package/src/typeahead/typeaheadOption/TypeaheadOption.less +1 -1
  387. package/src/upload/Upload.less +1 -1
  388. package/src/uploadInput/UploadInput.less +2 -2
  389. package/src/uploadInput/uploadItem/UploadItem.less +1 -1
@@ -0,0 +1,2277 @@
1
+ form {
2
+ margin-bottom: 0;
3
+ }
4
+ fieldset {
5
+ padding: 0;
6
+ margin: 0;
7
+ border: 0;
8
+ min-width: 0;
9
+ }
10
+ legend {
11
+ display: block;
12
+ width: 100%;
13
+ }
14
+ label {
15
+ display: inline-block;
16
+ max-width: 100%;
17
+ margin-bottom: 4px;
18
+ margin-bottom: var(--size-4);
19
+ }
20
+ label,
21
+ .secondary {
22
+ color: #5d7079;
23
+ color: var(--color-content-secondary);
24
+ transition: color ease-in-out 0.15s;
25
+ font-size: 0.875rem;
26
+ font-size: var(--font-size-14);
27
+ line-height: 20px;
28
+ }
29
+ input[type='search'] {
30
+ box-sizing: border-box;
31
+ }
32
+ input[type='number'] {
33
+ -webkit-appearance: textfield;
34
+ -moz-appearance: textfield;
35
+ appearance: textfield;
36
+ }
37
+ input[type='number']::-webkit-outer-spin-button,
38
+ input[type='number']::-webkit-inner-spin-button {
39
+ -webkit-appearance: none;
40
+ appearance: none;
41
+ margin: 0;
42
+ }
43
+ input[type='radio'],
44
+ input[type='checkbox'] {
45
+ margin: 4px 0 0;
46
+ margin-top: 1px;
47
+ line-height: normal;
48
+ }
49
+ input[type='file'] {
50
+ display: block;
51
+ }
52
+ input[type='range'] {
53
+ display: block;
54
+ width: 100%;
55
+ }
56
+ select[multiple],
57
+ select[size] {
58
+ height: auto;
59
+ }
60
+ input[type='file']:focus,
61
+ input[type='radio']:focus,
62
+ input[type='checkbox']:focus {
63
+ outline: var(--ring-outline-color) solid var(--ring-outline-width);
64
+ outline-offset: var(--ring-outline-offset);
65
+ }
66
+ output {
67
+ display: block;
68
+ padding-top: 9px;
69
+ font-size: 1rem;
70
+ font-size: var(--font-size-16);
71
+ line-height: 1.2;
72
+ line-height: var(--line-height-control);
73
+ color: #37517e;
74
+ color: var(--color-content-primary);
75
+ }
76
+ .form-control {
77
+ display: block;
78
+ width: 100%;
79
+ color: #37517e;
80
+ color: var(--color-content-primary);
81
+ background-color: #ffffff;
82
+ background-color: var(--color-background-screen);
83
+ background-image: none;
84
+ border: 1px solid #c9cbce;
85
+ border: 1px solid var(--color-interactive-secondary);
86
+ transition: border-color ease-in-out 0.15s;
87
+ min-height: var(--input-height-base);
88
+ padding: var(--input-padding);
89
+ border-radius: 3px;
90
+ font-weight: 400;
91
+ font-weight: var(--font-weight-regular);
92
+ font-size: 1rem;
93
+ font-size: var(--font-size-16);
94
+ line-height: 150%;
95
+ letter-spacing: -0.011em;
96
+ background-clip: padding-box;
97
+ }
98
+ select.form-control {
99
+ min-height: var(--input-height-base);
100
+ }
101
+ textarea.form-control,
102
+ select[multiple].form-control {
103
+ height: auto;
104
+ }
105
+ .form-control:not(.disabled):not(:disabled):focus {
106
+ border-color: #0081ba;
107
+ border-color: var(--color-interactive-accent-active);
108
+ outline: 0;
109
+ }
110
+ .form-control::-moz-placeholder {
111
+ color: #768e9c;
112
+ color: var(--color-content-tertiary);
113
+ }
114
+ .form-control::placeholder {
115
+ color: #768e9c;
116
+ color: var(--color-content-tertiary);
117
+ }
118
+ textarea.form-control {
119
+ height: 144px;
120
+ }
121
+ .form-control + .text-muted,
122
+ .form-control + .text-primary,
123
+ .form-control + .text-success,
124
+ .form-control + .text-positive,
125
+ .form-control + .text-info,
126
+ .form-control + .text-warning,
127
+ .form-control + .text-negative,
128
+ .form-control + .text-danger {
129
+ margin-top: 8px;
130
+ }
131
+ .form-control:focus {
132
+ border-color: #0081ba;
133
+ border-color: var(--color-interactive-accent-active);
134
+ }
135
+ .np-theme-personal .form-control:not(.disabled):not(:disabled):focus {
136
+ border-color: var(--color-interactive-primary);
137
+ outline: 0;
138
+ }
139
+ .np-theme-personal .form-control:hover {
140
+ border-color: #b5b7ba;
141
+ border-color: var(--color-interactive-secondary-hover);
142
+ }
143
+ .np-theme-personal .form-control:focus {
144
+ border-color: var(--color-interactive-primary);
145
+ }
146
+ input[type='search'] {
147
+ -webkit-appearance: none;
148
+ -moz-appearance: none;
149
+ appearance: none;
150
+ }
151
+ @media screen and (min-device-pixel-ratio: 0) {
152
+ input[type='date'],
153
+ input[type='time'],
154
+ input[type='datetime-local'],
155
+ input[type='month'] {
156
+ line-height: var(--input-height-base);
157
+ }
158
+ input[type='date'].input-sm,
159
+ input[type='time'].input-sm,
160
+ input[type='datetime-local'].input-sm,
161
+ input[type='month'].input-sm,
162
+ .input-group-sm input[type='date'],
163
+ .input-group-sm input[type='time'],
164
+ .input-group-sm input[type='datetime-local'],
165
+ .input-group-sm input[type='month'] {
166
+ line-height: var(--input-height-small);
167
+ }
168
+ input[type='date'].input-lg,
169
+ input[type='time'].input-lg,
170
+ input[type='datetime-local'].input-lg,
171
+ input[type='month'].input-lg,
172
+ .input-group-lg input[type='date'],
173
+ .input-group-lg input[type='time'],
174
+ .input-group-lg input[type='datetime-local'],
175
+ .input-group-lg input[type='month'] {
176
+ line-height: calc(var(--input-height-large) - 1.5);
177
+ line-height: calc(var(--input-height-large) - var(--line-height-body));
178
+ }
179
+ }
180
+ .form-group {
181
+ margin-bottom: 24px;
182
+ }
183
+ .form-group label {
184
+ margin-bottom: 2px;
185
+ }
186
+ .form-group:focus-within .control-label,
187
+ .form-group:focus-within > label {
188
+ color: #37517e;
189
+ color: var(--color-content-primary);
190
+ }
191
+ .row-equal-height > [class*='col-'] > .form-group {
192
+ width: 100%;
193
+ }
194
+ .radio,
195
+ .checkbox {
196
+ position: relative;
197
+ display: block;
198
+ margin-top: 0;
199
+ }
200
+ .radio label,
201
+ .checkbox label {
202
+ min-height: var(--input-height-base);
203
+ margin-bottom: 0;
204
+ cursor: pointer;
205
+ }
206
+ .radio + .radio,
207
+ .checkbox + .checkbox {
208
+ margin-top: 12px;
209
+ }
210
+ .radio input[type='radio'],
211
+ .radio-inline input[type='radio'],
212
+ .checkbox input[type='checkbox'],
213
+ .checkbox-inline input[type='checkbox'] {
214
+ position: absolute;
215
+ margin-left: -20px;
216
+ margin-top: 4px \9;
217
+ }
218
+ [dir="rtl"] .radio input[type='radio'],
219
+ [dir="rtl"] .radio-inline input[type='radio'],
220
+ [dir="rtl"] .checkbox input[type='checkbox'],
221
+ [dir="rtl"] .checkbox-inline input[type='checkbox'] {
222
+ margin-right: -20px;
223
+ margin-left: 0;
224
+ margin-left: initial;
225
+ }
226
+ .radio-inline,
227
+ .checkbox-inline {
228
+ position: relative;
229
+ display: inline-block;
230
+ padding-left: 20px;
231
+ margin-bottom: 0;
232
+ vertical-align: middle;
233
+ font-weight: normal;
234
+ cursor: pointer;
235
+ }
236
+ [dir="rtl"] .radio-inline,
237
+ [dir="rtl"] .checkbox-inline {
238
+ padding-right: 20px;
239
+ padding-left: 0;
240
+ padding-left: initial;
241
+ }
242
+ .radio-inline.disabled,
243
+ .checkbox-inline.disabled,
244
+ fieldset[disabled] .radio-inline,
245
+ fieldset[disabled] .checkbox-inline {
246
+ cursor: not-allowed;
247
+ }
248
+ .radio-inline + .radio-inline,
249
+ .checkbox-inline + .checkbox-inline {
250
+ margin-top: 0;
251
+ margin-left: 10px;
252
+ }
253
+ [dir="rtl"] .radio-inline + .radio-inline,
254
+ [dir="rtl"] .checkbox-inline + .checkbox-inline {
255
+ margin-right: 10px;
256
+ margin-left: 0;
257
+ margin-left: initial;
258
+ }
259
+ input[type='radio'][disabled],
260
+ input[type='checkbox'][disabled],
261
+ input[type='radio'].disabled,
262
+ input[type='checkbox'].disabled,
263
+ fieldset[disabled] input[type='radio'],
264
+ fieldset[disabled] input[type='checkbox'] {
265
+ cursor: not-allowed;
266
+ }
267
+ input[type="password"]::-ms-reveal {
268
+ display: none;
269
+ }
270
+ .radio-disabled label,
271
+ .checkbox-disabled label,
272
+ fieldset[disabled] .radio label,
273
+ fieldset[disabled] .checkbox label {
274
+ cursor: not-allowed;
275
+ }
276
+ .form-control-static {
277
+ margin-bottom: 0;
278
+ min-height: calc(1.2 * 2);
279
+ min-height: calc(var(--line-height-control) * 2);
280
+ color: #5d7079;
281
+ color: var(--color-content-secondary);
282
+ background-color: rgba(134,167,189,0.10196);
283
+ background-color: var(--color-background-neutral);
284
+ border: 1px solid #c9cbce;
285
+ border: 1px solid var(--color-interactive-secondary);
286
+ border-radius: 3px;
287
+ padding: var(--input-padding);
288
+ }
289
+ .form-control-static.input-lg,
290
+ .form-control-static.input-sm {
291
+ padding-left: 0;
292
+ padding-right: 0;
293
+ }
294
+ [dir="rtl"] .form-control-static.input-lg,
295
+ [dir="rtl"] .form-control-static.input-sm {
296
+ padding-right: 0;
297
+ padding-left: 0;
298
+ padding-left: initial;
299
+ }
300
+ [dir="rtl"] .form-control-static.input-lg,
301
+ [dir="rtl"] .form-control-static.input-sm {
302
+ padding-left: 0;
303
+ padding-right: 0;
304
+ padding-right: initial;
305
+ }
306
+ .input-sm {
307
+ min-height: 32px;
308
+ padding: var(--input-padding-small);
309
+ border-radius: 3px;
310
+ font-size: 14px;
311
+ line-height: 24px;
312
+ font-size: 0.875rem;
313
+ font-size: var(--font-size-14);
314
+ line-height: 155%;
315
+ letter-spacing: -0.006em;
316
+ font-weight: 400;
317
+ font-weight: var(--font-weight-regular);
318
+ }
319
+ select.input-sm {
320
+ min-height: 32px;
321
+ }
322
+ textarea.input-sm,
323
+ select[multiple].input-sm {
324
+ height: auto;
325
+ }
326
+ .form-group-sm .form-control,
327
+ .navbar .form-control {
328
+ height: 32px;
329
+ padding: var(--input-padding-small);
330
+ font-size: 0.875rem;
331
+ font-size: var(--font-size-14);
332
+ line-height: 24px;
333
+ border-radius: 3px;
334
+ }
335
+ .form-group-sm select.form-control,
336
+ .navbar select.form-control {
337
+ height: 32px;
338
+ line-height: 32px;
339
+ }
340
+ .form-group-sm textarea.form-control,
341
+ .navbar textarea.form-control,
342
+ .form-group-sm select[multiple].form-control,
343
+ .navbar select[multiple].form-control {
344
+ height: auto;
345
+ }
346
+ .form-group-sm .form-control-static,
347
+ .navbar .form-control-static {
348
+ height: 32px;
349
+ min-height: calc(1.2 + 14px);
350
+ min-height: calc(var(--line-height-control) + 14px);
351
+ padding: var(--input-padding-small);
352
+ font-size: 0.875rem;
353
+ font-size: var(--font-size-14);
354
+ line-height: 24px;
355
+ }
356
+ .input-lg {
357
+ min-height: var(--input-height-large);
358
+ padding: var(--input-padding-large);
359
+ border-radius: 3px;
360
+ font-weight: 400;
361
+ font-weight: var(--font-weight-regular);
362
+ font-size: 1rem;
363
+ font-size: var(--font-size-16);
364
+ line-height: 150%;
365
+ letter-spacing: -0.011em;
366
+ }
367
+ select.input-lg {
368
+ min-height: var(--input-height-large);
369
+ }
370
+ textarea.input-lg,
371
+ select[multiple].input-lg {
372
+ height: auto;
373
+ }
374
+ .form-group-lg {
375
+ position: relative;
376
+ }
377
+ .form-group-lg .input-lg,
378
+ .form-group-lg .input-group-lg > .form-control,
379
+ .form-group-lg .input-group-lg > .input-group-addon {
380
+ height: var(--input-height-large);
381
+ padding: calc(4px + 24px) 12px 4px;
382
+ padding: calc(4px + var(--size-24)) 12px 4px;
383
+ font-size: 22px;
384
+ line-height: 32px;
385
+ }
386
+ .form-group-lg select.form-control {
387
+ line-height: var(--input-height-large);
388
+ }
389
+ .form-group-lg textarea.form-control,
390
+ .form-group-lg select[multiple].form-control {
391
+ height: auto;
392
+ }
393
+ .form-group-lg .form-control-static {
394
+ height: var(--input-height-large);
395
+ min-height: calc(1.2 + 22px);
396
+ min-height: calc(var(--line-height-control) + 22px);
397
+ padding: var(--input-padding-large);
398
+ font-size: 22px;
399
+ line-height: 32px;
400
+ }
401
+ .form-group-lg .control-label {
402
+ position: absolute;
403
+ top: 12px;
404
+ left: 14px;
405
+ margin-bottom: 0;
406
+ z-index: 1;
407
+ }
408
+ [dir="rtl"] .form-group-lg .control-label {
409
+ right: 14px;
410
+ left: auto;
411
+ left: initial;
412
+ }
413
+ .has-feedback {
414
+ position: relative;
415
+ }
416
+ .has-feedback .form-control {
417
+ padding-right: var(--input-height-base);
418
+ }
419
+ [dir="rtl"] .has-feedback .form-control {
420
+ padding-left: var(--input-height-base);
421
+ padding-right: 0;
422
+ padding-right: initial;
423
+ }
424
+ .form-control-feedback {
425
+ position: absolute;
426
+ top: 0;
427
+ right: 0;
428
+ z-index: 2;
429
+ display: block;
430
+ width: 48px;
431
+ height: 48px;
432
+ text-align: center;
433
+ pointer-events: none;
434
+ }
435
+ [dir="rtl"] .form-control-feedback {
436
+ left: 0;
437
+ right: auto;
438
+ right: initial;
439
+ }
440
+ .input-lg + .form-control-feedback,
441
+ .input-group-lg + .form-control-feedback,
442
+ .form-group-lg .form-control + .form-control-feedback {
443
+ width: var(--input-height-large);
444
+ height: var(--input-height-large);
445
+ }
446
+ .input-sm + .form-control-feedback,
447
+ .input-group-sm + .form-control-feedback,
448
+ .form-group-sm .form-control + .form-control-feedback {
449
+ width: 32px;
450
+ height: 32px;
451
+ }
452
+ .focus .control-label,
453
+ .has-focus .control-label {
454
+ color: #37517e;
455
+ color: var(--color-content-primary);
456
+ }
457
+ .focus .input-group-addon,
458
+ .has-focus .input-group-addon {
459
+ border-color: #c9cbce;
460
+ border-color: var(--color-interactive-secondary);
461
+ }
462
+ .focus .input-group-addon:active,
463
+ .has-focus .input-group-addon:active {
464
+ border-color: #a7a9ab;
465
+ border-color: var(--color-interactive-secondary-active);
466
+ }
467
+ .help-block,
468
+ .error-messages {
469
+ margin-top: 12px;
470
+ margin-bottom: 4px;
471
+ border-width: 0;
472
+ border-style: solid;
473
+ border-radius: 10px;
474
+ border-radius: var(--radius-small);
475
+ padding: 4px 16px 3px;
476
+ transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
477
+ }
478
+ .help-block a,
479
+ .error-messages a {
480
+ color: inherit;
481
+ }
482
+ .help-block {
483
+ color: #5d7079;
484
+ color: var(--color-content-secondary);
485
+ border-color: #c9cbce;
486
+ border-color: var(--color-interactive-secondary);
487
+ background-color: rgba(134,167,189,0.10196);
488
+ background-color: var(--color-background-neutral);
489
+ display: block;
490
+ position: relative;
491
+ }
492
+ .help-block::before {
493
+ content: " ";
494
+ position: absolute;
495
+ display: block;
496
+ width: 10px;
497
+ height: 10px;
498
+ left: 20px;
499
+ top: -5px;
500
+ transform: rotate(45deg);
501
+ background-color: inherit;
502
+ }
503
+ [dir="rtl"] .help-block::before {
504
+ right: 20px;
505
+ left: auto;
506
+ left: initial;
507
+ }
508
+ .help-block.arrow-center::before {
509
+ left: 50%;
510
+ margin-left: -5px;
511
+ }
512
+ [dir="rtl"] .help-block.arrow-center::before {
513
+ right: 50%;
514
+ left: auto;
515
+ left: initial;
516
+ }
517
+ [dir="rtl"] .help-block.arrow-center::before {
518
+ margin-right: -5px;
519
+ margin-left: 0;
520
+ margin-left: initial;
521
+ }
522
+ .help-block.arrow-top::before {
523
+ top: -5px;
524
+ bottom: auto;
525
+ }
526
+ .help-block.arrow-left::before {
527
+ left: 20px;
528
+ right: auto;
529
+ }
530
+ [dir="rtl"] .help-block.arrow-left::before {
531
+ right: 20px;
532
+ left: auto;
533
+ left: initial;
534
+ }
535
+ [dir="rtl"] .help-block.arrow-left::before {
536
+ left: auto;
537
+ right: auto;
538
+ right: initial;
539
+ }
540
+ .help-block.arrow-right::before {
541
+ left: auto;
542
+ right: 20px;
543
+ }
544
+ [dir="rtl"] .help-block.arrow-right::before {
545
+ right: auto;
546
+ left: auto;
547
+ left: initial;
548
+ }
549
+ [dir="rtl"] .help-block.arrow-right::before {
550
+ left: 20px;
551
+ right: auto;
552
+ right: initial;
553
+ }
554
+ .help-block.arrow-bottom::before {
555
+ top: auto;
556
+ bottom: -5px;
557
+ }
558
+ .focus .alert,
559
+ .has-focus .alert {
560
+ border-color: #0081ba;
561
+ border-color: var(--color-interactive-accent-active);
562
+ }
563
+ .has-success {
564
+ border-color: #2ead4b !important;
565
+ border-color: var(--color-interactive-positive) !important;
566
+ }
567
+ .has-success .control-label,
568
+ .has-success .radio,
569
+ .has-success .checkbox,
570
+ .has-success .radio-inline,
571
+ .has-success .checkbox-inline,
572
+ .has-success.radio label,
573
+ .has-success.checkbox label,
574
+ .has-success.radio-inline label,
575
+ .has-success.checkbox-inline label,
576
+ .has-success .radio label,
577
+ .has-success .checkbox label,
578
+ .has-success .radio-inline label,
579
+ .has-success .checkbox-inline label,
580
+ .has-success .input-group-addon {
581
+ color: #008026 !important;
582
+ color: var(--color-content-positive) !important;
583
+ border-color: #2ead4b !important;
584
+ border-color: var(--color-interactive-positive) !important;
585
+ }
586
+ .has-success .form-control,
587
+ .has-success .btn-input,
588
+ .has-success .btn-input:not(.disabled):not(:disabled):focus,
589
+ .has-success .btn-input:not(.disabled):not(:disabled):hover,
590
+ .has-success .input-group-addon,
591
+ .has-success .alert {
592
+ border-color: #2ead4b !important;
593
+ border-color: var(--color-interactive-positive) !important;
594
+ }
595
+ .has-success:active .form-control,
596
+ .has-success:focus .form-control,
597
+ .has-success:focus-within .form-control,
598
+ .has-success:active.radio label,
599
+ .has-success:focus.radio label,
600
+ .has-success:focus-within.radio label,
601
+ .has-success:active.checkbox label,
602
+ .has-success:focus.checkbox label,
603
+ .has-success:focus-within.checkbox label,
604
+ .has-success:active .btn-input,
605
+ .has-success:focus .btn-input,
606
+ .has-success:focus-within .btn-input,
607
+ .has-success:active .input-group-addon,
608
+ .has-success:focus .input-group-addon,
609
+ .has-success:focus-within .input-group-addon,
610
+ .has-success:active .input-group .form-control:focus,
611
+ .has-success:focus .input-group .form-control:focus,
612
+ .has-success:focus-within .input-group .form-control:focus,
613
+ .has-success:active .alert,
614
+ .has-success:focus .alert,
615
+ .has-success:focus-within .alert {
616
+ border-color: #069939 !important;
617
+ border-color: var(--color-interactive-positive-hover) !important;
618
+ }
619
+ .has-success:not(.disabled):not(:disabled):hover.radio label,
620
+ .has-success:not(.disabled):not(:disabled):hover.checkbox label,
621
+ .has-success:not(.disabled):not(:disabled):hover .btn-input,
622
+ .has-success:not(.disabled):not(:disabled):hover .alert {
623
+ border-color: #069939 !important;
624
+ border-color: var(--color-interactive-positive-hover) !important;
625
+ }
626
+ .has-success .form-control-feedback {
627
+ color: #008026;
628
+ color: var(--color-content-positive);
629
+ }
630
+ .has-success .radio > label:not(.disabled):not(:disabled),
631
+ .has-success.checkbox > label:not(.disabled):not(:disabled) {
632
+ border-color: #2ead4b;
633
+ border-color: var(--color-interactive-positive);
634
+ color: #37517e;
635
+ color: var(--color-content-primary);
636
+ }
637
+ .has-success .radio > label:not(.disabled):not(:disabled):hover,
638
+ .has-success.checkbox > label:not(.disabled):not(:disabled):hover,
639
+ .has-success .radio > label:focus-within,
640
+ .has-success.checkbox > label:focus-within {
641
+ border-color: #069939 !important;
642
+ border-color: var(--color-interactive-positive-hover) !important;
643
+ }
644
+ .has-success .radio > label:not(.disabled):not(:disabled):hover .tw-checkbox-button,
645
+ .has-success.checkbox > label:not(.disabled):not(:disabled):hover .tw-checkbox-button,
646
+ .has-success .radio > label:focus-within .tw-checkbox-button,
647
+ .has-success.checkbox > label:focus-within .tw-checkbox-button,
648
+ .has-success .radio > label:not(.disabled):not(:disabled):hover .tw-radio-button,
649
+ .has-success.checkbox > label:not(.disabled):not(:disabled):hover .tw-radio-button,
650
+ .has-success .radio > label:focus-within .tw-radio-button,
651
+ .has-success.checkbox > label:focus-within .tw-radio-button {
652
+ border-color: #069939 !important;
653
+ border-color: var(--color-interactive-positive-hover) !important;
654
+ }
655
+ .has-success .radio .tw-checkbox-button,
656
+ .has-success.checkbox .tw-checkbox-button,
657
+ .has-success .radio .tw-radio-button,
658
+ .has-success.checkbox .tw-radio-button {
659
+ border-color: #2ead4b;
660
+ border-color: var(--color-interactive-positive);
661
+ }
662
+ .np-theme-personal .has-success {
663
+ border-color: var(--color-sentiment-positive) !important;
664
+ }
665
+ .np-theme-personal .has-success .control-label,
666
+ .np-theme-personal .has-success .radio,
667
+ .np-theme-personal .has-success .checkbox,
668
+ .np-theme-personal .has-success .radio-inline,
669
+ .np-theme-personal .has-success .checkbox-inline,
670
+ .np-theme-personal .has-success.radio label,
671
+ .np-theme-personal .has-success.checkbox label,
672
+ .np-theme-personal .has-success.radio-inline label,
673
+ .np-theme-personal .has-success.checkbox-inline label,
674
+ .np-theme-personal .has-success .radio label,
675
+ .np-theme-personal .has-success .checkbox label,
676
+ .np-theme-personal .has-success .radio-inline label,
677
+ .np-theme-personal .has-success .checkbox-inline label,
678
+ .np-theme-personal .has-success .input-group-addon {
679
+ color: #37517e !important;
680
+ color: var(--color-content-primary) !important;
681
+ border-color: var(--color-sentiment-positive) !important;
682
+ }
683
+ .np-theme-personal .has-success .form-control,
684
+ .np-theme-personal .has-success .btn-input,
685
+ .np-theme-personal .has-success .btn-input:not(.disabled):not(:disabled):focus,
686
+ .np-theme-personal .has-success .btn-input:not(.disabled):not(:disabled):hover,
687
+ .np-theme-personal .has-success .input-group-addon,
688
+ .np-theme-personal .has-success .alert {
689
+ border-color: var(--color-sentiment-positive) !important;
690
+ }
691
+ .np-theme-personal .has-success:active .form-control,
692
+ .np-theme-personal .has-success:focus .form-control,
693
+ .np-theme-personal .has-success:focus-within .form-control,
694
+ .np-theme-personal .has-success:active.radio label,
695
+ .np-theme-personal .has-success:focus.radio label,
696
+ .np-theme-personal .has-success:focus-within.radio label,
697
+ .np-theme-personal .has-success:active.checkbox label,
698
+ .np-theme-personal .has-success:focus.checkbox label,
699
+ .np-theme-personal .has-success:focus-within.checkbox label,
700
+ .np-theme-personal .has-success:active .btn-input,
701
+ .np-theme-personal .has-success:focus .btn-input,
702
+ .np-theme-personal .has-success:focus-within .btn-input,
703
+ .np-theme-personal .has-success:active .input-group-addon,
704
+ .np-theme-personal .has-success:focus .input-group-addon,
705
+ .np-theme-personal .has-success:focus-within .input-group-addon,
706
+ .np-theme-personal .has-success:active .input-group .form-control:focus,
707
+ .np-theme-personal .has-success:focus .input-group .form-control:focus,
708
+ .np-theme-personal .has-success:focus-within .input-group .form-control:focus,
709
+ .np-theme-personal .has-success:active .alert,
710
+ .np-theme-personal .has-success:focus .alert,
711
+ .np-theme-personal .has-success:focus-within .alert {
712
+ border-color: var(--color-sentiment-positive) !important;
713
+ }
714
+ .np-theme-personal .has-success:not(.disabled):not(:disabled):hover.radio label,
715
+ .np-theme-personal .has-success:not(.disabled):not(:disabled):hover.checkbox label,
716
+ .np-theme-personal .has-success:not(.disabled):not(:disabled):hover .btn-input,
717
+ .np-theme-personal .has-success:not(.disabled):not(:disabled):hover .alert {
718
+ border-color: var(--color-sentiment-positive) !important;
719
+ }
720
+ .np-theme-personal .has-success .form-control-feedback {
721
+ color: #37517e;
722
+ color: var(--color-content-primary);
723
+ }
724
+ .np-theme-personal .has-success .radio > label:not(.disabled):not(:disabled),
725
+ .np-theme-personal .has-success.checkbox > label:not(.disabled):not(:disabled) {
726
+ border-color: var(--color-sentiment-positive);
727
+ color: #37517e;
728
+ color: var(--color-content-primary);
729
+ }
730
+ .np-theme-personal .has-success .radio > label:not(.disabled):not(:disabled):hover,
731
+ .np-theme-personal .has-success.checkbox > label:not(.disabled):not(:disabled):hover,
732
+ .np-theme-personal .has-success .radio > label:focus-within,
733
+ .np-theme-personal .has-success.checkbox > label:focus-within {
734
+ border-color: var(--color-sentiment-positive) !important;
735
+ }
736
+ .np-theme-personal .has-success .radio > label:not(.disabled):not(:disabled):hover .tw-checkbox-button,
737
+ .np-theme-personal .has-success.checkbox > label:not(.disabled):not(:disabled):hover .tw-checkbox-button,
738
+ .np-theme-personal .has-success .radio > label:focus-within .tw-checkbox-button,
739
+ .np-theme-personal .has-success.checkbox > label:focus-within .tw-checkbox-button,
740
+ .np-theme-personal .has-success .radio > label:not(.disabled):not(:disabled):hover .tw-radio-button,
741
+ .np-theme-personal .has-success.checkbox > label:not(.disabled):not(:disabled):hover .tw-radio-button,
742
+ .np-theme-personal .has-success .radio > label:focus-within .tw-radio-button,
743
+ .np-theme-personal .has-success.checkbox > label:focus-within .tw-radio-button {
744
+ border-color: var(--color-sentiment-positive) !important;
745
+ }
746
+ .np-theme-personal .has-success .radio .tw-checkbox-button,
747
+ .np-theme-personal .has-success.checkbox .tw-checkbox-button,
748
+ .np-theme-personal .has-success .radio .tw-radio-button,
749
+ .np-theme-personal .has-success.checkbox .tw-radio-button {
750
+ border-color: var(--color-sentiment-positive);
751
+ }
752
+ .has-info {
753
+ border-color: #00a2dd !important;
754
+ border-color: var(--color-interactive-accent) !important;
755
+ }
756
+ .has-info .control-label,
757
+ .has-info .radio,
758
+ .has-info .checkbox,
759
+ .has-info .radio-inline,
760
+ .has-info .checkbox-inline,
761
+ .has-info.radio label,
762
+ .has-info.checkbox label,
763
+ .has-info.radio-inline label,
764
+ .has-info.checkbox-inline label,
765
+ .has-info .radio label,
766
+ .has-info .checkbox label,
767
+ .has-info .radio-inline label,
768
+ .has-info .checkbox-inline label,
769
+ .has-info .input-group-addon {
770
+ color: #0097c7 !important;
771
+ color: var(--color-content-accent) !important;
772
+ border-color: #00a2dd !important;
773
+ border-color: var(--color-interactive-accent) !important;
774
+ }
775
+ .has-info .form-control,
776
+ .has-info .btn-input,
777
+ .has-info .btn-input:not(.disabled):not(:disabled):focus,
778
+ .has-info .btn-input:not(.disabled):not(:disabled):hover,
779
+ .has-info .input-group-addon,
780
+ .has-info .alert {
781
+ border-color: #00a2dd !important;
782
+ border-color: var(--color-interactive-accent) !important;
783
+ }
784
+ .has-info:active .form-control,
785
+ .has-info:focus .form-control,
786
+ .has-info:focus-within .form-control,
787
+ .has-info:active.radio label,
788
+ .has-info:focus.radio label,
789
+ .has-info:focus-within.radio label,
790
+ .has-info:active.checkbox label,
791
+ .has-info:focus.checkbox label,
792
+ .has-info:focus-within.checkbox label,
793
+ .has-info:active .btn-input,
794
+ .has-info:focus .btn-input,
795
+ .has-info:focus-within .btn-input,
796
+ .has-info:active .input-group-addon,
797
+ .has-info:focus .input-group-addon,
798
+ .has-info:focus-within .input-group-addon,
799
+ .has-info:active .input-group .form-control:focus,
800
+ .has-info:focus .input-group .form-control:focus,
801
+ .has-info:focus-within .input-group .form-control:focus,
802
+ .has-info:active .alert,
803
+ .has-info:focus .alert,
804
+ .has-info:focus-within .alert {
805
+ border-color: #008fc9 !important;
806
+ border-color: var(--color-interactive-accent-hover) !important;
807
+ }
808
+ .has-info:not(.disabled):not(:disabled):hover.radio label,
809
+ .has-info:not(.disabled):not(:disabled):hover.checkbox label,
810
+ .has-info:not(.disabled):not(:disabled):hover .btn-input,
811
+ .has-info:not(.disabled):not(:disabled):hover .alert {
812
+ border-color: #008fc9 !important;
813
+ border-color: var(--color-interactive-accent-hover) !important;
814
+ }
815
+ .has-info .form-control-feedback {
816
+ color: #0097c7;
817
+ color: var(--color-content-accent);
818
+ }
819
+ .has-info .radio > label:not(.disabled):not(:disabled),
820
+ .has-info.checkbox > label:not(.disabled):not(:disabled) {
821
+ border-color: #00a2dd;
822
+ border-color: var(--color-interactive-accent);
823
+ color: #37517e;
824
+ color: var(--color-content-primary);
825
+ }
826
+ .has-info .radio > label:not(.disabled):not(:disabled):hover,
827
+ .has-info.checkbox > label:not(.disabled):not(:disabled):hover,
828
+ .has-info .radio > label:focus-within,
829
+ .has-info.checkbox > label:focus-within {
830
+ border-color: #008fc9 !important;
831
+ border-color: var(--color-interactive-accent-hover) !important;
832
+ }
833
+ .has-info .radio > label:not(.disabled):not(:disabled):hover .tw-checkbox-button,
834
+ .has-info.checkbox > label:not(.disabled):not(:disabled):hover .tw-checkbox-button,
835
+ .has-info .radio > label:focus-within .tw-checkbox-button,
836
+ .has-info.checkbox > label:focus-within .tw-checkbox-button,
837
+ .has-info .radio > label:not(.disabled):not(:disabled):hover .tw-radio-button,
838
+ .has-info.checkbox > label:not(.disabled):not(:disabled):hover .tw-radio-button,
839
+ .has-info .radio > label:focus-within .tw-radio-button,
840
+ .has-info.checkbox > label:focus-within .tw-radio-button {
841
+ border-color: #008fc9 !important;
842
+ border-color: var(--color-interactive-accent-hover) !important;
843
+ }
844
+ .has-info .radio .tw-checkbox-button,
845
+ .has-info.checkbox .tw-checkbox-button,
846
+ .has-info .radio .tw-radio-button,
847
+ .has-info.checkbox .tw-radio-button {
848
+ border-color: #00a2dd;
849
+ border-color: var(--color-interactive-accent);
850
+ }
851
+ .np-theme-personal .has-info {
852
+ border-color: transparent !important;
853
+ }
854
+ .np-theme-personal .has-info .control-label,
855
+ .np-theme-personal .has-info .radio,
856
+ .np-theme-personal .has-info .checkbox,
857
+ .np-theme-personal .has-info .radio-inline,
858
+ .np-theme-personal .has-info .checkbox-inline,
859
+ .np-theme-personal .has-info.radio label,
860
+ .np-theme-personal .has-info.checkbox label,
861
+ .np-theme-personal .has-info.radio-inline label,
862
+ .np-theme-personal .has-info.checkbox-inline label,
863
+ .np-theme-personal .has-info .radio label,
864
+ .np-theme-personal .has-info .checkbox label,
865
+ .np-theme-personal .has-info .radio-inline label,
866
+ .np-theme-personal .has-info .checkbox-inline label,
867
+ .np-theme-personal .has-info .input-group-addon {
868
+ color: #37517e !important;
869
+ color: var(--color-content-primary) !important;
870
+ border-color: transparent !important;
871
+ }
872
+ .np-theme-personal .has-info .form-control,
873
+ .np-theme-personal .has-info .btn-input,
874
+ .np-theme-personal .has-info .btn-input:not(.disabled):not(:disabled):focus,
875
+ .np-theme-personal .has-info .btn-input:not(.disabled):not(:disabled):hover,
876
+ .np-theme-personal .has-info .input-group-addon,
877
+ .np-theme-personal .has-info .alert {
878
+ border-color: transparent !important;
879
+ }
880
+ .np-theme-personal .has-info:active .form-control,
881
+ .np-theme-personal .has-info:focus .form-control,
882
+ .np-theme-personal .has-info:focus-within .form-control,
883
+ .np-theme-personal .has-info:active.radio label,
884
+ .np-theme-personal .has-info:focus.radio label,
885
+ .np-theme-personal .has-info:focus-within.radio label,
886
+ .np-theme-personal .has-info:active.checkbox label,
887
+ .np-theme-personal .has-info:focus.checkbox label,
888
+ .np-theme-personal .has-info:focus-within.checkbox label,
889
+ .np-theme-personal .has-info:active .btn-input,
890
+ .np-theme-personal .has-info:focus .btn-input,
891
+ .np-theme-personal .has-info:focus-within .btn-input,
892
+ .np-theme-personal .has-info:active .input-group-addon,
893
+ .np-theme-personal .has-info:focus .input-group-addon,
894
+ .np-theme-personal .has-info:focus-within .input-group-addon,
895
+ .np-theme-personal .has-info:active .input-group .form-control:focus,
896
+ .np-theme-personal .has-info:focus .input-group .form-control:focus,
897
+ .np-theme-personal .has-info:focus-within .input-group .form-control:focus,
898
+ .np-theme-personal .has-info:active .alert,
899
+ .np-theme-personal .has-info:focus .alert,
900
+ .np-theme-personal .has-info:focus-within .alert {
901
+ border-color: transparent !important;
902
+ }
903
+ .np-theme-personal .has-info:not(.disabled):not(:disabled):hover.radio label,
904
+ .np-theme-personal .has-info:not(.disabled):not(:disabled):hover.checkbox label,
905
+ .np-theme-personal .has-info:not(.disabled):not(:disabled):hover .btn-input,
906
+ .np-theme-personal .has-info:not(.disabled):not(:disabled):hover .alert {
907
+ border-color: transparent !important;
908
+ }
909
+ .np-theme-personal .has-info .form-control-feedback {
910
+ color: #37517e;
911
+ color: var(--color-content-primary);
912
+ }
913
+ .np-theme-personal .has-info .radio > label:not(.disabled):not(:disabled),
914
+ .np-theme-personal .has-info.checkbox > label:not(.disabled):not(:disabled) {
915
+ border-color: transparent;
916
+ color: #37517e;
917
+ color: var(--color-content-primary);
918
+ }
919
+ .np-theme-personal .has-info .radio > label:not(.disabled):not(:disabled):hover,
920
+ .np-theme-personal .has-info.checkbox > label:not(.disabled):not(:disabled):hover,
921
+ .np-theme-personal .has-info .radio > label:focus-within,
922
+ .np-theme-personal .has-info.checkbox > label:focus-within {
923
+ border-color: transparent !important;
924
+ }
925
+ .np-theme-personal .has-info .radio > label:not(.disabled):not(:disabled):hover .tw-checkbox-button,
926
+ .np-theme-personal .has-info.checkbox > label:not(.disabled):not(:disabled):hover .tw-checkbox-button,
927
+ .np-theme-personal .has-info .radio > label:focus-within .tw-checkbox-button,
928
+ .np-theme-personal .has-info.checkbox > label:focus-within .tw-checkbox-button,
929
+ .np-theme-personal .has-info .radio > label:not(.disabled):not(:disabled):hover .tw-radio-button,
930
+ .np-theme-personal .has-info.checkbox > label:not(.disabled):not(:disabled):hover .tw-radio-button,
931
+ .np-theme-personal .has-info .radio > label:focus-within .tw-radio-button,
932
+ .np-theme-personal .has-info.checkbox > label:focus-within .tw-radio-button {
933
+ border-color: transparent !important;
934
+ }
935
+ .np-theme-personal .has-info .radio .tw-checkbox-button,
936
+ .np-theme-personal .has-info.checkbox .tw-checkbox-button,
937
+ .np-theme-personal .has-info .radio .tw-radio-button,
938
+ .np-theme-personal .has-info.checkbox .tw-radio-button {
939
+ border-color: transparent;
940
+ }
941
+ .has-warning {
942
+ border-color: #df8700 !important;
943
+ border-color: var(--color-interactive-warning) !important;
944
+ }
945
+ .has-warning .control-label,
946
+ .has-warning .radio,
947
+ .has-warning .checkbox,
948
+ .has-warning .radio-inline,
949
+ .has-warning .checkbox-inline,
950
+ .has-warning.radio label,
951
+ .has-warning.checkbox label,
952
+ .has-warning.radio-inline label,
953
+ .has-warning.checkbox-inline label,
954
+ .has-warning .radio label,
955
+ .has-warning .checkbox label,
956
+ .has-warning .radio-inline label,
957
+ .has-warning .checkbox-inline label,
958
+ .has-warning .input-group-addon {
959
+ color: #9a6500 !important;
960
+ color: var(--color-content-warning) !important;
961
+ border-color: #df8700 !important;
962
+ border-color: var(--color-interactive-warning) !important;
963
+ }
964
+ .has-warning .form-control,
965
+ .has-warning .btn-input,
966
+ .has-warning .btn-input:not(.disabled):not(:disabled):focus,
967
+ .has-warning .btn-input:not(.disabled):not(:disabled):hover,
968
+ .has-warning .input-group-addon,
969
+ .has-warning .alert {
970
+ border-color: #df8700 !important;
971
+ border-color: var(--color-interactive-warning) !important;
972
+ }
973
+ .has-warning:active .form-control,
974
+ .has-warning:focus .form-control,
975
+ .has-warning:focus-within .form-control,
976
+ .has-warning:active.radio label,
977
+ .has-warning:focus.radio label,
978
+ .has-warning:focus-within.radio label,
979
+ .has-warning:active.checkbox label,
980
+ .has-warning:focus.checkbox label,
981
+ .has-warning:focus-within.checkbox label,
982
+ .has-warning:active .btn-input,
983
+ .has-warning:focus .btn-input,
984
+ .has-warning:focus-within .btn-input,
985
+ .has-warning:active .input-group-addon,
986
+ .has-warning:focus .input-group-addon,
987
+ .has-warning:focus-within .input-group-addon,
988
+ .has-warning:active .input-group .form-control:focus,
989
+ .has-warning:focus .input-group .form-control:focus,
990
+ .has-warning:focus-within .input-group .form-control:focus,
991
+ .has-warning:active .alert,
992
+ .has-warning:focus .alert,
993
+ .has-warning:focus-within .alert {
994
+ border-color: #c97500 !important;
995
+ border-color: var(--color-interactive-warning-hover) !important;
996
+ }
997
+ .has-warning:not(.disabled):not(:disabled):hover.radio label,
998
+ .has-warning:not(.disabled):not(:disabled):hover.checkbox label,
999
+ .has-warning:not(.disabled):not(:disabled):hover .btn-input,
1000
+ .has-warning:not(.disabled):not(:disabled):hover .alert {
1001
+ border-color: #c97500 !important;
1002
+ border-color: var(--color-interactive-warning-hover) !important;
1003
+ }
1004
+ .has-warning .form-control-feedback {
1005
+ color: #9a6500;
1006
+ color: var(--color-content-warning);
1007
+ }
1008
+ .has-warning .radio > label:not(.disabled):not(:disabled),
1009
+ .has-warning.checkbox > label:not(.disabled):not(:disabled) {
1010
+ border-color: #df8700;
1011
+ border-color: var(--color-interactive-warning);
1012
+ color: #37517e;
1013
+ color: var(--color-content-primary);
1014
+ }
1015
+ .has-warning .radio > label:not(.disabled):not(:disabled):hover,
1016
+ .has-warning.checkbox > label:not(.disabled):not(:disabled):hover,
1017
+ .has-warning .radio > label:focus-within,
1018
+ .has-warning.checkbox > label:focus-within {
1019
+ border-color: #c97500 !important;
1020
+ border-color: var(--color-interactive-warning-hover) !important;
1021
+ }
1022
+ .has-warning .radio > label:not(.disabled):not(:disabled):hover .tw-checkbox-button,
1023
+ .has-warning.checkbox > label:not(.disabled):not(:disabled):hover .tw-checkbox-button,
1024
+ .has-warning .radio > label:focus-within .tw-checkbox-button,
1025
+ .has-warning.checkbox > label:focus-within .tw-checkbox-button,
1026
+ .has-warning .radio > label:not(.disabled):not(:disabled):hover .tw-radio-button,
1027
+ .has-warning.checkbox > label:not(.disabled):not(:disabled):hover .tw-radio-button,
1028
+ .has-warning .radio > label:focus-within .tw-radio-button,
1029
+ .has-warning.checkbox > label:focus-within .tw-radio-button {
1030
+ border-color: #c97500 !important;
1031
+ border-color: var(--color-interactive-warning-hover) !important;
1032
+ }
1033
+ .has-warning .radio .tw-checkbox-button,
1034
+ .has-warning.checkbox .tw-checkbox-button,
1035
+ .has-warning .radio .tw-radio-button,
1036
+ .has-warning.checkbox .tw-radio-button {
1037
+ border-color: #df8700;
1038
+ border-color: var(--color-interactive-warning);
1039
+ }
1040
+ .np-theme-personal .has-warning {
1041
+ border-color: var(--color-sentiment-warning) !important;
1042
+ }
1043
+ .np-theme-personal .has-warning .control-label,
1044
+ .np-theme-personal .has-warning .radio,
1045
+ .np-theme-personal .has-warning .checkbox,
1046
+ .np-theme-personal .has-warning .radio-inline,
1047
+ .np-theme-personal .has-warning .checkbox-inline,
1048
+ .np-theme-personal .has-warning.radio label,
1049
+ .np-theme-personal .has-warning.checkbox label,
1050
+ .np-theme-personal .has-warning.radio-inline label,
1051
+ .np-theme-personal .has-warning.checkbox-inline label,
1052
+ .np-theme-personal .has-warning .radio label,
1053
+ .np-theme-personal .has-warning .checkbox label,
1054
+ .np-theme-personal .has-warning .radio-inline label,
1055
+ .np-theme-personal .has-warning .checkbox-inline label,
1056
+ .np-theme-personal .has-warning .input-group-addon {
1057
+ color: #37517e !important;
1058
+ color: var(--color-content-primary) !important;
1059
+ border-color: var(--color-sentiment-warning) !important;
1060
+ }
1061
+ .np-theme-personal .has-warning .form-control,
1062
+ .np-theme-personal .has-warning .btn-input,
1063
+ .np-theme-personal .has-warning .btn-input:not(.disabled):not(:disabled):focus,
1064
+ .np-theme-personal .has-warning .btn-input:not(.disabled):not(:disabled):hover,
1065
+ .np-theme-personal .has-warning .input-group-addon,
1066
+ .np-theme-personal .has-warning .alert {
1067
+ border-color: var(--color-sentiment-warning) !important;
1068
+ }
1069
+ .np-theme-personal .has-warning:active .form-control,
1070
+ .np-theme-personal .has-warning:focus .form-control,
1071
+ .np-theme-personal .has-warning:focus-within .form-control,
1072
+ .np-theme-personal .has-warning:active.radio label,
1073
+ .np-theme-personal .has-warning:focus.radio label,
1074
+ .np-theme-personal .has-warning:focus-within.radio label,
1075
+ .np-theme-personal .has-warning:active.checkbox label,
1076
+ .np-theme-personal .has-warning:focus.checkbox label,
1077
+ .np-theme-personal .has-warning:focus-within.checkbox label,
1078
+ .np-theme-personal .has-warning:active .btn-input,
1079
+ .np-theme-personal .has-warning:focus .btn-input,
1080
+ .np-theme-personal .has-warning:focus-within .btn-input,
1081
+ .np-theme-personal .has-warning:active .input-group-addon,
1082
+ .np-theme-personal .has-warning:focus .input-group-addon,
1083
+ .np-theme-personal .has-warning:focus-within .input-group-addon,
1084
+ .np-theme-personal .has-warning:active .input-group .form-control:focus,
1085
+ .np-theme-personal .has-warning:focus .input-group .form-control:focus,
1086
+ .np-theme-personal .has-warning:focus-within .input-group .form-control:focus,
1087
+ .np-theme-personal .has-warning:active .alert,
1088
+ .np-theme-personal .has-warning:focus .alert,
1089
+ .np-theme-personal .has-warning:focus-within .alert {
1090
+ border-color: var(--color-sentiment-warning) !important;
1091
+ }
1092
+ .np-theme-personal .has-warning:not(.disabled):not(:disabled):hover.radio label,
1093
+ .np-theme-personal .has-warning:not(.disabled):not(:disabled):hover.checkbox label,
1094
+ .np-theme-personal .has-warning:not(.disabled):not(:disabled):hover .btn-input,
1095
+ .np-theme-personal .has-warning:not(.disabled):not(:disabled):hover .alert {
1096
+ border-color: var(--color-sentiment-warning) !important;
1097
+ }
1098
+ .np-theme-personal .has-warning .form-control-feedback {
1099
+ color: #37517e;
1100
+ color: var(--color-content-primary);
1101
+ }
1102
+ .np-theme-personal .has-warning .radio > label:not(.disabled):not(:disabled),
1103
+ .np-theme-personal .has-warning.checkbox > label:not(.disabled):not(:disabled) {
1104
+ border-color: var(--color-sentiment-warning);
1105
+ color: #37517e;
1106
+ color: var(--color-content-primary);
1107
+ }
1108
+ .np-theme-personal .has-warning .radio > label:not(.disabled):not(:disabled):hover,
1109
+ .np-theme-personal .has-warning.checkbox > label:not(.disabled):not(:disabled):hover,
1110
+ .np-theme-personal .has-warning .radio > label:focus-within,
1111
+ .np-theme-personal .has-warning.checkbox > label:focus-within {
1112
+ border-color: var(--color-sentiment-warning) !important;
1113
+ }
1114
+ .np-theme-personal .has-warning .radio > label:not(.disabled):not(:disabled):hover .tw-checkbox-button,
1115
+ .np-theme-personal .has-warning.checkbox > label:not(.disabled):not(:disabled):hover .tw-checkbox-button,
1116
+ .np-theme-personal .has-warning .radio > label:focus-within .tw-checkbox-button,
1117
+ .np-theme-personal .has-warning.checkbox > label:focus-within .tw-checkbox-button,
1118
+ .np-theme-personal .has-warning .radio > label:not(.disabled):not(:disabled):hover .tw-radio-button,
1119
+ .np-theme-personal .has-warning.checkbox > label:not(.disabled):not(:disabled):hover .tw-radio-button,
1120
+ .np-theme-personal .has-warning .radio > label:focus-within .tw-radio-button,
1121
+ .np-theme-personal .has-warning.checkbox > label:focus-within .tw-radio-button {
1122
+ border-color: var(--color-sentiment-warning) !important;
1123
+ }
1124
+ .np-theme-personal .has-warning .radio .tw-checkbox-button,
1125
+ .np-theme-personal .has-warning.checkbox .tw-checkbox-button,
1126
+ .np-theme-personal .has-warning .radio .tw-radio-button,
1127
+ .np-theme-personal .has-warning.checkbox .tw-radio-button {
1128
+ border-color: var(--color-sentiment-warning);
1129
+ }
1130
+ .has-error {
1131
+ border-color: #e74848 !important;
1132
+ border-color: var(--color-interactive-negative) !important;
1133
+ }
1134
+ .has-error .control-label,
1135
+ .has-error .radio,
1136
+ .has-error .checkbox,
1137
+ .has-error .radio-inline,
1138
+ .has-error .checkbox-inline,
1139
+ .has-error.radio label,
1140
+ .has-error.checkbox label,
1141
+ .has-error.radio-inline label,
1142
+ .has-error.checkbox-inline label,
1143
+ .has-error .radio label,
1144
+ .has-error .checkbox label,
1145
+ .has-error .radio-inline label,
1146
+ .has-error .checkbox-inline label,
1147
+ .has-error .input-group-addon {
1148
+ color: #cf2929 !important;
1149
+ color: var(--color-content-negative) !important;
1150
+ border-color: #e74848 !important;
1151
+ border-color: var(--color-interactive-negative) !important;
1152
+ }
1153
+ .has-error .form-control,
1154
+ .has-error .btn-input,
1155
+ .has-error .btn-input:not(.disabled):not(:disabled):focus,
1156
+ .has-error .btn-input:not(.disabled):not(:disabled):hover,
1157
+ .has-error .input-group-addon,
1158
+ .has-error .alert {
1159
+ border-color: #e74848 !important;
1160
+ border-color: var(--color-interactive-negative) !important;
1161
+ }
1162
+ .has-error:active .form-control,
1163
+ .has-error:focus .form-control,
1164
+ .has-error:focus-within .form-control,
1165
+ .has-error:active.radio label,
1166
+ .has-error:focus.radio label,
1167
+ .has-error:focus-within.radio label,
1168
+ .has-error:active.checkbox label,
1169
+ .has-error:focus.checkbox label,
1170
+ .has-error:focus-within.checkbox label,
1171
+ .has-error:active .btn-input,
1172
+ .has-error:focus .btn-input,
1173
+ .has-error:focus-within .btn-input,
1174
+ .has-error:active .input-group-addon,
1175
+ .has-error:focus .input-group-addon,
1176
+ .has-error:focus-within .input-group-addon,
1177
+ .has-error:active .input-group .form-control:focus,
1178
+ .has-error:focus .input-group .form-control:focus,
1179
+ .has-error:focus-within .input-group .form-control:focus,
1180
+ .has-error:active .alert,
1181
+ .has-error:focus .alert,
1182
+ .has-error:focus-within .alert {
1183
+ border-color: #d03238 !important;
1184
+ border-color: var(--color-interactive-negative-hover) !important;
1185
+ }
1186
+ .has-error:not(.disabled):not(:disabled):hover.radio label,
1187
+ .has-error:not(.disabled):not(:disabled):hover.checkbox label,
1188
+ .has-error:not(.disabled):not(:disabled):hover .btn-input,
1189
+ .has-error:not(.disabled):not(:disabled):hover .alert {
1190
+ border-color: #d03238 !important;
1191
+ border-color: var(--color-interactive-negative-hover) !important;
1192
+ }
1193
+ .has-error .form-control-feedback {
1194
+ color: #cf2929;
1195
+ color: var(--color-content-negative);
1196
+ }
1197
+ .has-error .radio > label:not(.disabled):not(:disabled),
1198
+ .has-error.checkbox > label:not(.disabled):not(:disabled) {
1199
+ border-color: #e74848;
1200
+ border-color: var(--color-interactive-negative);
1201
+ color: #37517e;
1202
+ color: var(--color-content-primary);
1203
+ }
1204
+ .has-error .radio > label:not(.disabled):not(:disabled):hover,
1205
+ .has-error.checkbox > label:not(.disabled):not(:disabled):hover,
1206
+ .has-error .radio > label:focus-within,
1207
+ .has-error.checkbox > label:focus-within {
1208
+ border-color: #d03238 !important;
1209
+ border-color: var(--color-interactive-negative-hover) !important;
1210
+ }
1211
+ .has-error .radio > label:not(.disabled):not(:disabled):hover .tw-checkbox-button,
1212
+ .has-error.checkbox > label:not(.disabled):not(:disabled):hover .tw-checkbox-button,
1213
+ .has-error .radio > label:focus-within .tw-checkbox-button,
1214
+ .has-error.checkbox > label:focus-within .tw-checkbox-button,
1215
+ .has-error .radio > label:not(.disabled):not(:disabled):hover .tw-radio-button,
1216
+ .has-error.checkbox > label:not(.disabled):not(:disabled):hover .tw-radio-button,
1217
+ .has-error .radio > label:focus-within .tw-radio-button,
1218
+ .has-error.checkbox > label:focus-within .tw-radio-button {
1219
+ border-color: #d03238 !important;
1220
+ border-color: var(--color-interactive-negative-hover) !important;
1221
+ }
1222
+ .has-error .radio .tw-checkbox-button,
1223
+ .has-error.checkbox .tw-checkbox-button,
1224
+ .has-error .radio .tw-radio-button,
1225
+ .has-error.checkbox .tw-radio-button {
1226
+ border-color: #e74848;
1227
+ border-color: var(--color-interactive-negative);
1228
+ }
1229
+ .np-theme-personal .has-error {
1230
+ border-color: var(--color-sentiment-negative) !important;
1231
+ }
1232
+ .np-theme-personal .has-error .control-label,
1233
+ .np-theme-personal .has-error .radio,
1234
+ .np-theme-personal .has-error .checkbox,
1235
+ .np-theme-personal .has-error .radio-inline,
1236
+ .np-theme-personal .has-error .checkbox-inline,
1237
+ .np-theme-personal .has-error.radio label,
1238
+ .np-theme-personal .has-error.checkbox label,
1239
+ .np-theme-personal .has-error.radio-inline label,
1240
+ .np-theme-personal .has-error.checkbox-inline label,
1241
+ .np-theme-personal .has-error .radio label,
1242
+ .np-theme-personal .has-error .checkbox label,
1243
+ .np-theme-personal .has-error .radio-inline label,
1244
+ .np-theme-personal .has-error .checkbox-inline label,
1245
+ .np-theme-personal .has-error .input-group-addon {
1246
+ color: #37517e !important;
1247
+ color: var(--color-content-primary) !important;
1248
+ border-color: var(--color-sentiment-negative) !important;
1249
+ }
1250
+ .np-theme-personal .has-error .form-control,
1251
+ .np-theme-personal .has-error .btn-input,
1252
+ .np-theme-personal .has-error .btn-input:not(.disabled):not(:disabled):focus,
1253
+ .np-theme-personal .has-error .btn-input:not(.disabled):not(:disabled):hover,
1254
+ .np-theme-personal .has-error .input-group-addon,
1255
+ .np-theme-personal .has-error .alert {
1256
+ border-color: var(--color-sentiment-negative) !important;
1257
+ }
1258
+ .np-theme-personal .has-error:active .form-control,
1259
+ .np-theme-personal .has-error:focus .form-control,
1260
+ .np-theme-personal .has-error:focus-within .form-control,
1261
+ .np-theme-personal .has-error:active.radio label,
1262
+ .np-theme-personal .has-error:focus.radio label,
1263
+ .np-theme-personal .has-error:focus-within.radio label,
1264
+ .np-theme-personal .has-error:active.checkbox label,
1265
+ .np-theme-personal .has-error:focus.checkbox label,
1266
+ .np-theme-personal .has-error:focus-within.checkbox label,
1267
+ .np-theme-personal .has-error:active .btn-input,
1268
+ .np-theme-personal .has-error:focus .btn-input,
1269
+ .np-theme-personal .has-error:focus-within .btn-input,
1270
+ .np-theme-personal .has-error:active .input-group-addon,
1271
+ .np-theme-personal .has-error:focus .input-group-addon,
1272
+ .np-theme-personal .has-error:focus-within .input-group-addon,
1273
+ .np-theme-personal .has-error:active .input-group .form-control:focus,
1274
+ .np-theme-personal .has-error:focus .input-group .form-control:focus,
1275
+ .np-theme-personal .has-error:focus-within .input-group .form-control:focus,
1276
+ .np-theme-personal .has-error:active .alert,
1277
+ .np-theme-personal .has-error:focus .alert,
1278
+ .np-theme-personal .has-error:focus-within .alert {
1279
+ border-color: var(--color-sentiment-negative-hover) !important;
1280
+ }
1281
+ .np-theme-personal .has-error:not(.disabled):not(:disabled):hover.radio label,
1282
+ .np-theme-personal .has-error:not(.disabled):not(:disabled):hover.checkbox label,
1283
+ .np-theme-personal .has-error:not(.disabled):not(:disabled):hover .btn-input,
1284
+ .np-theme-personal .has-error:not(.disabled):not(:disabled):hover .alert {
1285
+ border-color: var(--color-sentiment-negative-hover) !important;
1286
+ }
1287
+ .np-theme-personal .has-error .form-control-feedback {
1288
+ color: #37517e;
1289
+ color: var(--color-content-primary);
1290
+ }
1291
+ .np-theme-personal .has-error .radio > label:not(.disabled):not(:disabled),
1292
+ .np-theme-personal .has-error.checkbox > label:not(.disabled):not(:disabled) {
1293
+ border-color: var(--color-sentiment-negative);
1294
+ color: #37517e;
1295
+ color: var(--color-content-primary);
1296
+ }
1297
+ .np-theme-personal .has-error .radio > label:not(.disabled):not(:disabled):hover,
1298
+ .np-theme-personal .has-error.checkbox > label:not(.disabled):not(:disabled):hover,
1299
+ .np-theme-personal .has-error .radio > label:focus-within,
1300
+ .np-theme-personal .has-error.checkbox > label:focus-within {
1301
+ border-color: var(--color-sentiment-negative-hover) !important;
1302
+ }
1303
+ .np-theme-personal .has-error .radio > label:not(.disabled):not(:disabled):hover .tw-checkbox-button,
1304
+ .np-theme-personal .has-error.checkbox > label:not(.disabled):not(:disabled):hover .tw-checkbox-button,
1305
+ .np-theme-personal .has-error .radio > label:focus-within .tw-checkbox-button,
1306
+ .np-theme-personal .has-error.checkbox > label:focus-within .tw-checkbox-button,
1307
+ .np-theme-personal .has-error .radio > label:not(.disabled):not(:disabled):hover .tw-radio-button,
1308
+ .np-theme-personal .has-error.checkbox > label:not(.disabled):not(:disabled):hover .tw-radio-button,
1309
+ .np-theme-personal .has-error .radio > label:focus-within .tw-radio-button,
1310
+ .np-theme-personal .has-error.checkbox > label:focus-within .tw-radio-button {
1311
+ border-color: var(--color-sentiment-negative-hover) !important;
1312
+ }
1313
+ .np-theme-personal .has-error .radio .tw-checkbox-button,
1314
+ .np-theme-personal .has-error.checkbox .tw-checkbox-button,
1315
+ .np-theme-personal .has-error .radio .tw-radio-button,
1316
+ .np-theme-personal .has-error.checkbox .tw-radio-button {
1317
+ border-color: var(--color-sentiment-negative);
1318
+ }
1319
+ .has-feedback label ~ .form-control-feedback {
1320
+ top: 1.2;
1321
+ top: var(--line-height-control);
1322
+ }
1323
+ .has-feedback label.sr-only ~ .form-control-feedback {
1324
+ top: 0;
1325
+ }
1326
+ @media (min-width: 576px) {
1327
+ .form-inline .form-group {
1328
+ display: inline-block;
1329
+ margin-bottom: 0;
1330
+ vertical-align: middle;
1331
+ }
1332
+ .form-inline .form-control {
1333
+ display: inline-block;
1334
+ width: auto;
1335
+ vertical-align: middle;
1336
+ }
1337
+ .form-inline .form-control-static {
1338
+ display: inline-block;
1339
+ }
1340
+ .form-inline .input-group {
1341
+ display: inline-table;
1342
+ vertical-align: middle;
1343
+ }
1344
+ .form-inline .input-group .input-group-addon,
1345
+ .form-inline .input-group .input-group-btn,
1346
+ .form-inline .input-group .form-control {
1347
+ width: auto;
1348
+ }
1349
+ .form-inline .input-group > .form-control {
1350
+ width: 100%;
1351
+ }
1352
+ .form-inline .control-label {
1353
+ margin-bottom: 0;
1354
+ vertical-align: calc(-2px);
1355
+ }
1356
+ .form-inline .radio,
1357
+ .form-inline .checkbox {
1358
+ display: inline-block;
1359
+ margin-top: 0;
1360
+ margin-bottom: 0;
1361
+ vertical-align: middle;
1362
+ }
1363
+ .form-inline .radio label,
1364
+ .form-inline .checkbox label {
1365
+ padding-left: 0;
1366
+ }
1367
+ [dir="rtl"] .form-inline .radio label,
1368
+ [dir="rtl"] .form-inline .checkbox label {
1369
+ padding-right: 0;
1370
+ padding-left: 0;
1371
+ padding-left: initial;
1372
+ }
1373
+ .form-inline .radio input[type='radio'],
1374
+ .form-inline .checkbox input[type='checkbox'] {
1375
+ position: relative;
1376
+ margin-left: 0;
1377
+ }
1378
+ [dir="rtl"] .form-inline .radio input[type='radio'],
1379
+ [dir="rtl"] .form-inline .checkbox input[type='checkbox'] {
1380
+ margin-right: 0;
1381
+ margin-left: 0;
1382
+ margin-left: initial;
1383
+ }
1384
+ .form-inline .has-feedback .form-control-feedback {
1385
+ top: 0;
1386
+ }
1387
+ }
1388
+ .form-horizontal .radio,
1389
+ .form-horizontal .checkbox,
1390
+ .form-horizontal .radio-inline,
1391
+ .form-horizontal .checkbox-inline {
1392
+ margin-top: 0;
1393
+ margin-bottom: 0;
1394
+ padding-top: 9px;
1395
+ }
1396
+ .form-horizontal .radio,
1397
+ .form-horizontal .checkbox {
1398
+ min-height: calc(1.2 + (8px + 1));
1399
+ min-height: calc(var(--line-height-control) + (8px + 1));
1400
+ }
1401
+ .form-horizontal .form-group {
1402
+ margin-left: -12px;
1403
+ margin-right: -12px;
1404
+ }
1405
+ [dir="rtl"] .form-horizontal .form-group {
1406
+ margin-right: -12px;
1407
+ margin-left: -12px;
1408
+ }
1409
+ [dir="rtl"] .form-horizontal .form-group {
1410
+ margin-left: -12px;
1411
+ margin-right: -12px;
1412
+ }
1413
+ @media (min-width: 576px) {
1414
+ .form-horizontal .control-label {
1415
+ text-align: right;
1416
+ margin-bottom: 0;
1417
+ padding-top: 14px;
1418
+ }
1419
+ [dir="rtl"] .form-horizontal .control-label {
1420
+ text-align: left;
1421
+ }
1422
+ }
1423
+ .form-horizontal .has-feedback .form-control-feedback {
1424
+ right: 12px;
1425
+ }
1426
+ [dir="rtl"] .form-horizontal .has-feedback .form-control-feedback {
1427
+ left: 12px;
1428
+ right: auto;
1429
+ right: initial;
1430
+ }
1431
+ @media (min-width: 576px) {
1432
+ .form-horizontal .form-group-lg .control-label {
1433
+ padding-top: 17px;
1434
+ font-size: 1.25rem;
1435
+ font-size: var(--font-size-20);
1436
+ }
1437
+ }
1438
+ @media (min-width: 576px) {
1439
+ .form-horizontal .form-group-sm .control-label {
1440
+ padding-top: 8px;
1441
+ font-size: 0.875rem;
1442
+ font-size: var(--font-size-14);
1443
+ }
1444
+ }
1445
+ .radio,
1446
+ .checkbox {
1447
+ border-color: #c9cbce;
1448
+ border-color: var(--color-interactive-secondary);
1449
+ }
1450
+ .radio > label,
1451
+ .checkbox > label {
1452
+ position: relative;
1453
+ padding-left: 48px;
1454
+ }
1455
+ [dir="rtl"] .radio > label,
1456
+ [dir="rtl"] .checkbox > label {
1457
+ padding-right: 48px;
1458
+ padding-left: 0;
1459
+ padding-left: initial;
1460
+ }
1461
+ .radio > label input[type="radio"],
1462
+ .checkbox > label input[type="radio"],
1463
+ .radio > label input[type="checkbox"],
1464
+ .checkbox > label input[type="checkbox"] {
1465
+ display: block;
1466
+ position: absolute;
1467
+ top: 13px;
1468
+ left: 40px;
1469
+ }
1470
+ [dir="rtl"] .radio > label input[type="radio"],
1471
+ [dir="rtl"] .checkbox > label input[type="radio"],
1472
+ [dir="rtl"] .radio > label input[type="checkbox"],
1473
+ [dir="rtl"] .checkbox > label input[type="checkbox"] {
1474
+ right: 40px;
1475
+ left: auto;
1476
+ left: initial;
1477
+ }
1478
+ .tw-checkbox-button {
1479
+ border: 1px solid #c9cbce;
1480
+ border: 1px solid var(--color-interactive-secondary);
1481
+ background: #ffffff;
1482
+ background: var(--color-background-screen);
1483
+ width: 22px;
1484
+ height: 22px;
1485
+ border-radius: 3px;
1486
+ display: inline-block;
1487
+ padding: 0;
1488
+ vertical-align: middle;
1489
+ text-align: center;
1490
+ transition: border 0.15s ease-in-out, background-color 0.15s ease-in-out;
1491
+ }
1492
+ .np-theme-personal .tw-checkbox-button {
1493
+ border: none;
1494
+ box-shadow: inset 0 0 0 1px #c9cbce;
1495
+ box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
1496
+ }
1497
+ .tw-checkbox-button .tw-checkbox-check,
1498
+ .tw-checkbox-button .np-tw-checkbox-indeterminate {
1499
+ width: 20px;
1500
+ height: 20px;
1501
+ margin: 0;
1502
+ display: none;
1503
+ color: #ffffff;
1504
+ color: var(--color-background-screen);
1505
+ }
1506
+ .tw-checkbox-button:not(.disabled):not(:disabled):hover,
1507
+ input[type="checkbox"]:hover + .tw-checkbox-button,
1508
+ .checkbox:hover .tw-checkbox-button {
1509
+ border-color: #b5b7ba;
1510
+ border-color: var(--color-interactive-secondary-hover);
1511
+ }
1512
+ .np-theme-personal .tw-checkbox-button:not(.disabled):not(:disabled):hover,
1513
+ .np-theme-personal input[type="checkbox"]:hover + .tw-checkbox-button,
1514
+ .np-theme-personal .checkbox:hover .tw-checkbox-button {
1515
+ box-shadow: inset 0 0 0 1px #b5b7ba;
1516
+ box-shadow: inset 0 0 0 1px var(--color-interactive-secondary-hover);
1517
+ }
1518
+ .tw-checkbox-button:not(.disabled):not(:disabled):focus,
1519
+ .tw-checkbox-button:not(.disabled):not(:disabled).focus,
1520
+ .tw-checkbox-button:not(.disabled):not(:disabled):focus:hover,
1521
+ .tw-checkbox-button:not(.disabled):not(:disabled).focus:hover,
1522
+ input[type="checkbox"]:focus + .tw-checkbox-button,
1523
+ .tw-checkbox-button:not(.disabled):not(:disabled):active,
1524
+ .tw-checkbox-button:not(.disabled):not(:disabled).active,
1525
+ input[type="checkbox"]:active + .tw-checkbox-button {
1526
+ border-color: #c9cbce;
1527
+ border-color: var(--color-interactive-secondary);
1528
+ outline: none;
1529
+ }
1530
+ input[type="checkbox"]:focus-visible + .tw-checkbox-button {
1531
+ outline: var(--ring-outline-color) solid var(--ring-outline-width);
1532
+ outline-offset: var(--ring-outline-offset);
1533
+ }
1534
+ .checkbox input[type="checkbox"]:focus-visible + .tw-checkbox-button {
1535
+ outline: none;
1536
+ }
1537
+ .tw-checkbox-button:checked,
1538
+ .tw-checkbox-button.checked,
1539
+ input[type="checkbox"]:checked + .tw-checkbox-button,
1540
+ input[type="checkbox"]:indeterminate + .tw-checkbox-button {
1541
+ border-color: #00a2dd !important;
1542
+ border-color: var(--color-interactive-accent) !important;
1543
+ background-color: #00a2dd;
1544
+ background-color: var(--color-interactive-accent);
1545
+ }
1546
+ .np-theme-personal .tw-checkbox-button:checked,
1547
+ .np-theme-personal .tw-checkbox-button.checked,
1548
+ .np-theme-personal input[type="checkbox"]:checked + .tw-checkbox-button,
1549
+ .np-theme-personal input[type="checkbox"]:indeterminate + .tw-checkbox-button {
1550
+ background-color: var(--color-interactive-primary);
1551
+ box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
1552
+ }
1553
+ .tw-checkbox-button:checked .tw-checkbox-check,
1554
+ .tw-checkbox-button.checked .tw-checkbox-check,
1555
+ input[type="checkbox"]:checked + .tw-checkbox-button .tw-checkbox-check {
1556
+ display: inline-block;
1557
+ }
1558
+ input[type="checkbox"]:indeterminate + .tw-checkbox-button .np-tw-checkbox-indeterminate {
1559
+ display: inline-block;
1560
+ }
1561
+ .tw-checkbox-button:checked:hover,
1562
+ .tw-checkbox-button.checked:hover,
1563
+ input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button,
1564
+ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:hover + .tw-checkbox-button {
1565
+ border-color: #008fc9 !important;
1566
+ border-color: var(--color-interactive-accent-hover) !important;
1567
+ background-color: #008fc9;
1568
+ background-color: var(--color-interactive-accent-hover);
1569
+ }
1570
+ .np-theme-personal .tw-checkbox-button:checked:hover,
1571
+ .np-theme-personal .tw-checkbox-button.checked:hover,
1572
+ .np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button,
1573
+ .np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:hover + .tw-checkbox-button {
1574
+ border-color: var(--color-interactive-primary-hover) !important;
1575
+ background-color: var(--color-interactive-primary-hover);
1576
+ box-shadow: inset 0 0 0 1px var(--color-interactive-primary-hover);
1577
+ }
1578
+ .tw-checkbox-button:checked:active,
1579
+ .tw-checkbox-button.checked:active,
1580
+ input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button,
1581
+ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-checkbox-button {
1582
+ border-color: #0081ba !important;
1583
+ border-color: var(--color-interactive-accent-active) !important;
1584
+ background-color: #0081ba;
1585
+ background-color: var(--color-interactive-accent-active);
1586
+ }
1587
+ .np-theme-personal .tw-checkbox-button:checked:active,
1588
+ .np-theme-personal .tw-checkbox-button.checked:active,
1589
+ .np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button,
1590
+ .np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-checkbox-button {
1591
+ border-color: var(--color-interactive-primary-active) !important;
1592
+ background-color: var(--color-interactive-primary-active);
1593
+ box-shadow: inset 0 0 0 1px var(--color-interactive-primary-active);
1594
+ }
1595
+ .checkbox.has-error .tw-checkbox-button,
1596
+ .tw-checkbox-button.has-error {
1597
+ border-color: #e74848 !important;
1598
+ border-color: var(--color-interactive-negative) !important;
1599
+ }
1600
+ .checkbox.has-error .tw-checkbox-button:checked,
1601
+ .tw-checkbox-button.has-error:checked,
1602
+ .checkbox.has-error .tw-checkbox-button.checked,
1603
+ .tw-checkbox-button.has-error.checked {
1604
+ background-color: #e74848;
1605
+ background-color: var(--color-interactive-negative);
1606
+ }
1607
+ .checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked + .tw-checkbox-button,
1608
+ .checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate + .tw-checkbox-button {
1609
+ border-color: #e74848 !important;
1610
+ border-color: var(--color-interactive-negative) !important;
1611
+ background-color: #e74848;
1612
+ background-color: var(--color-interactive-negative);
1613
+ }
1614
+ .checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button,
1615
+ .checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:indeterminate + .tw-checkbox-button {
1616
+ border-color: #d03238 !important;
1617
+ border-color: var(--color-interactive-negative-hover) !important;
1618
+ background-color: #d03238;
1619
+ background-color: var(--color-interactive-negative-hover);
1620
+ }
1621
+ .checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button,
1622
+ .checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate + .tw-checkbox-button {
1623
+ border-color: #bf1e2c !important;
1624
+ border-color: var(--color-interactive-negative-active) !important;
1625
+ background-color: #bf1e2c;
1626
+ background-color: var(--color-interactive-negative-active);
1627
+ }
1628
+ .tw-radio-button {
1629
+ width: 24px;
1630
+ height: 24px;
1631
+ border-radius: 50%;
1632
+ border: 1px solid #c9cbce;
1633
+ border: 1px solid var(--color-interactive-secondary);
1634
+ background: #ffffff;
1635
+ background: var(--color-background-screen);
1636
+ display: inline-flex;
1637
+ align-items: center;
1638
+ justify-content: center;
1639
+ padding: 0;
1640
+ transition: border 0.15s ease-in-out;
1641
+ }
1642
+ .np-theme-personal .tw-radio-button {
1643
+ border: none;
1644
+ box-shadow: inset 0 0 0 1px #c9cbce;
1645
+ box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
1646
+ position: relative;
1647
+ top: 0;
1648
+ left: 0;
1649
+ }
1650
+ .tw-radio-button .tw-radio-check {
1651
+ border-radius: 50%;
1652
+ text-align: center;
1653
+ width: 12px;
1654
+ height: 12px;
1655
+ display: block;
1656
+ opacity: 0;
1657
+ transition: all 0.15s ease-in-out;
1658
+ }
1659
+ .radio:not(.disabled):not(:disabled):hover .tw-radio-button,
1660
+ .tw-radio-button:not(.disabled):not(:disabled):hover {
1661
+ border-color: #b5b7ba;
1662
+ border-color: var(--color-interactive-secondary-hover);
1663
+ }
1664
+ .np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button,
1665
+ .np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover {
1666
+ border-color: transparent;
1667
+ box-shadow: inset 0 0 0 1px #b5b7ba;
1668
+ box-shadow: inset 0 0 0 1px var(--color-interactive-secondary-hover);
1669
+ }
1670
+ .np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button:checked,
1671
+ .np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover:checked,
1672
+ .np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button.checked,
1673
+ .np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover.checked {
1674
+ box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
1675
+ }
1676
+ .np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button:checked .tw-radio-check,
1677
+ .np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover:checked .tw-radio-check,
1678
+ .np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button.checked .tw-radio-check,
1679
+ .np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover.checked .tw-radio-check {
1680
+ background-color: var(--color-interactive-primary-hover);
1681
+ }
1682
+ .tw-radio-button:not(.disabled):not(:disabled):focus,
1683
+ .tw-radio-button:not(.disabled):not(:disabled).focus,
1684
+ .tw-radio-button:not(.disabled):not(:disabled):active,
1685
+ .tw-radio-button:not(.disabled):not(:disabled).active {
1686
+ border-color: #a7a9ab;
1687
+ border-color: var(--color-interactive-secondary-active);
1688
+ outline: none;
1689
+ }
1690
+ .tw-radio-button:checked,
1691
+ .tw-radio-button.checked {
1692
+ border-color: #00a2dd !important;
1693
+ border-color: var(--color-interactive-accent) !important;
1694
+ }
1695
+ .tw-radio-button:checked .tw-radio-check,
1696
+ .tw-radio-button.checked .tw-radio-check {
1697
+ opacity: 1;
1698
+ background-color: #00a2dd;
1699
+ background-color: var(--color-interactive-accent);
1700
+ }
1701
+ .np-theme-personal .tw-radio-button:checked,
1702
+ .np-theme-personal .tw-radio-button.checked {
1703
+ border-color: transparent !important;
1704
+ box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
1705
+ }
1706
+ .np-theme-personal .tw-radio-button:checked .tw-radio-check,
1707
+ .np-theme-personal .tw-radio-button.checked .tw-radio-check {
1708
+ background-color: var(--color-interactive-primary);
1709
+ max-height: 12px;
1710
+ max-width: 12px;
1711
+ }
1712
+ .radio.has-error .tw-radio-button,
1713
+ .tw-radio-button.has-error {
1714
+ border-color: #e74848 !important;
1715
+ border-color: var(--color-interactive-negative) !important;
1716
+ }
1717
+ .radio.has-error .tw-radio-button:checked .tw-radio-check,
1718
+ .tw-radio-button.has-error:checked .tw-radio-check,
1719
+ .radio.has-error .tw-radio-button.checked .tw-radio-check,
1720
+ .tw-radio-button.has-error.checked .tw-radio-check {
1721
+ background-color: #e74848;
1722
+ background-color: var(--color-interactive-negative);
1723
+ }
1724
+ .radio .tw-radio-button {
1725
+ position: absolute;
1726
+ left: 13px;
1727
+ top: 11px;
1728
+ }
1729
+ [dir="rtl"] .radio .tw-radio-button {
1730
+ right: 13px;
1731
+ left: auto;
1732
+ left: initial;
1733
+ }
1734
+ .checkbox .tw-checkbox-button {
1735
+ position: absolute;
1736
+ left: 14px;
1737
+ top: 12px;
1738
+ }
1739
+ [dir="rtl"] .checkbox .tw-checkbox-button {
1740
+ right: 14px;
1741
+ left: auto;
1742
+ left: initial;
1743
+ }
1744
+ .form-inline .tw-checkbox-button,
1745
+ .form-inline .tw-radio-button {
1746
+ vertical-align: bottom;
1747
+ }
1748
+ .form-horizontal .checkbox,
1749
+ .form-horizontal .radio {
1750
+ padding-top: 0;
1751
+ }
1752
+ .form-horizontal .checkbox > label,
1753
+ .form-horizontal .radio > label {
1754
+ margin-bottom: 0;
1755
+ }
1756
+ .np-radio.radio,
1757
+ .np-checkbox.checkbox {
1758
+ min-width: -moz-fit-content;
1759
+ min-width: fit-content;
1760
+ }
1761
+ .np-radio.radio .np-radio-button,
1762
+ .np-checkbox.checkbox .np-radio-button,
1763
+ .np-radio.radio .np-checkbox-button,
1764
+ .np-checkbox.checkbox .np-checkbox-button {
1765
+ position: relative;
1766
+ flex-shrink: 0;
1767
+ }
1768
+ .np-radio.radio .tw-checkbox-button,
1769
+ .np-checkbox.checkbox .tw-checkbox-button,
1770
+ .np-radio.radio .tw-radio-button,
1771
+ .np-checkbox.checkbox .tw-radio-button {
1772
+ position: static;
1773
+ }
1774
+ .np-radio.radio > label,
1775
+ .np-checkbox.checkbox > label {
1776
+ display: flex;
1777
+ align-items: center;
1778
+ padding: 8px 16px ;
1779
+ padding: var(--size-8) var(--size-16) ;
1780
+ }
1781
+ [dir="rtl"] .np-radio.radio > label,
1782
+ [dir="rtl"] .np-checkbox.checkbox > label {
1783
+ padding: 8px 16px ;
1784
+ padding: var(--size-8) var(--size-16) ;
1785
+ }
1786
+ .np-radio.radio > label .np-checkbox__text,
1787
+ .np-checkbox.checkbox > label .np-checkbox__text,
1788
+ .np-radio.radio > label .np-radio__text,
1789
+ .np-checkbox.checkbox > label .np-radio__text {
1790
+ display: block;
1791
+ padding-top: 1px;
1792
+ }
1793
+ :not(.np-theme-personal) .np-radio.radio > label .np-checkbox__text,
1794
+ :not(.np-theme-personal) .np-checkbox.checkbox > label .np-checkbox__text,
1795
+ :not(.np-theme-personal) .np-radio.radio > label .np-radio__text,
1796
+ :not(.np-theme-personal) .np-checkbox.checkbox > label .np-radio__text {
1797
+ font-weight: 400;
1798
+ font-weight: var(--font-weight-regular);
1799
+ font-size: 1rem;
1800
+ font-size: var(--font-size-16);
1801
+ line-height: 1.25rem;
1802
+ line-height: var(--line-height-20);
1803
+ padding-top: 3px;
1804
+ }
1805
+ .np-theme-personal .np-radio.radio > label,
1806
+ .np-theme-personal .np-checkbox.checkbox > label {
1807
+ padding: var(--input-padding);
1808
+ }
1809
+ .np-radio .np-radio__avatar {
1810
+ pointer-events: none;
1811
+ }
1812
+ [dir="rtl"] .input-group .input-group-btn + input {
1813
+ border-right: 0 solid transparent;
1814
+ }
1815
+ html:not([dir="rtl"]) .input-group .input-group-btn + input {
1816
+ border-left: 0 solid transparent;
1817
+ }
1818
+ .input-group-addon {
1819
+ color: #5d7079;
1820
+ color: var(--color-content-secondary);
1821
+ transition: border-color ease-in-out 0.15s;
1822
+ }
1823
+ .form-control-feedback,
1824
+ .form-control-feedback.icon {
1825
+ font-size: 24px;
1826
+ line-height: 48px;
1827
+ }
1828
+ .label {
1829
+ padding-top: 0.25em;
1830
+ position: relative;
1831
+ top: -3px;
1832
+ }
1833
+ .label .label-default {
1834
+ color: #5d7079;
1835
+ color: var(--color-content-secondary);
1836
+ background-color: rgba(134,167,189,0.10196);
1837
+ background-color: var(--color-background-neutral);
1838
+ }
1839
+ .form-group {
1840
+ position: relative;
1841
+ font-size: 0.875rem;
1842
+ font-size: var(--font-size-14);
1843
+ }
1844
+ .form-group .row {
1845
+ margin-left: -6px;
1846
+ margin-right: -6px;
1847
+ }
1848
+ [dir="rtl"] .form-group .row {
1849
+ margin-right: -6px;
1850
+ margin-left: 0;
1851
+ margin-left: initial;
1852
+ }
1853
+ [dir="rtl"] .form-group .row {
1854
+ margin-left: -6px;
1855
+ margin-right: 0;
1856
+ margin-right: initial;
1857
+ }
1858
+ .form-group .row [class*='col-'] {
1859
+ padding-left: 6px;
1860
+ padding-right: 6px;
1861
+ }
1862
+ [dir="rtl"] .form-group .row [class*='col-'] {
1863
+ padding-right: 6px;
1864
+ padding-left: 0;
1865
+ padding-left: initial;
1866
+ }
1867
+ [dir="rtl"] .form-group .row [class*='col-'] {
1868
+ padding-left: 6px;
1869
+ padding-right: 0;
1870
+ padding-right: initial;
1871
+ }
1872
+ @media (max-width: 575px) {
1873
+ .form-group .row [class*='col-sm-'] {
1874
+ margin-bottom: 0;
1875
+ }
1876
+ .form-group .row [class*='col-sm-'] .btn-input {
1877
+ margin-bottom: 12px;
1878
+ }
1879
+ }
1880
+ @media (max-width: 767px) {
1881
+ .form-group .row [class*='col-md-'] {
1882
+ margin-bottom: 0;
1883
+ }
1884
+ .form-group .row [class*='col-md-'] .form-control,
1885
+ .form-group .row [class*='col-md-'] .btn-input {
1886
+ margin-bottom: 12px;
1887
+ }
1888
+ }
1889
+ @media (max-width: 991px) {
1890
+ .form-group .row [class*='col-lg-'] {
1891
+ margin-bottom: 0;
1892
+ }
1893
+ .form-group .row [class*='col-lg-'] .form-control,
1894
+ .form-group .row [class*='col-lg-'] .btn-input {
1895
+ margin-bottom: 12px;
1896
+ }
1897
+ }
1898
+ @media (max-width: 1199px) {
1899
+ .form-group .row [class*='col-xl-'] {
1900
+ margin-bottom: 0;
1901
+ }
1902
+ .form-group .row [class*='col-xl-'] .form-control,
1903
+ .form-group .row [class*='col-xl-'] .btn-input {
1904
+ margin-bottom: 12px;
1905
+ }
1906
+ }
1907
+ @media (min-width: 576px) {
1908
+ fieldset .form-group:nth-of-type(odd) {
1909
+ clear: left;
1910
+ }
1911
+ [dir="rtl"] fieldset .form-group:nth-of-type(odd) {
1912
+ clear: right;
1913
+ }
1914
+ }
1915
+ .checkbox > label,
1916
+ .radio > label {
1917
+ display: block;
1918
+ cursor: pointer;
1919
+ padding-top: 12px;
1920
+ padding-bottom: 10px;
1921
+ padding-right: 16px;
1922
+ color: #37517e;
1923
+ color: var(--color-content-primary);
1924
+ background-color: #ffffff;
1925
+ background-color: var(--color-background-screen);
1926
+ border: 1px solid #c9cbce;
1927
+ border: 1px solid var(--color-interactive-secondary);
1928
+ border-radius: 3px;
1929
+ transition: border 0.15s ease-in-out, background-color 0.15s ease-in-out;
1930
+ }
1931
+ [dir="rtl"] .checkbox > label,
1932
+ [dir="rtl"] .radio > label {
1933
+ padding-left: 16px;
1934
+ padding-right: 0;
1935
+ padding-right: initial;
1936
+ }
1937
+ .np-theme-personal .checkbox > label,
1938
+ .np-theme-personal .radio > label {
1939
+ border-radius: 10px;
1940
+ border-radius: var(--radius-small);
1941
+ }
1942
+ .checkbox > label:not(.disabled):not(:disabled):hover,
1943
+ .radio > label:not(.disabled):not(:disabled):hover {
1944
+ border-color: #b5b7ba;
1945
+ border-color: var(--color-interactive-secondary-hover);
1946
+ }
1947
+ .checkbox > label:not(.disabled):not(:disabled).focus,
1948
+ .radio > label:not(.disabled):not(:disabled).focus,
1949
+ .checkbox > label:not(.disabled):not(:disabled).focus:hover,
1950
+ .radio > label:not(.disabled):not(:disabled).focus:hover,
1951
+ .checkbox > label:not(.disabled):not(:disabled).has-focus,
1952
+ .radio > label:not(.disabled):not(:disabled).has-focus,
1953
+ .checkbox > label:not(.disabled):not(:disabled).has-focus:hover,
1954
+ .radio > label:not(.disabled):not(:disabled).has-focus:hover,
1955
+ .checkbox > label:not(.disabled):not(:disabled):focus-within,
1956
+ .radio > label:not(.disabled):not(:disabled):focus-within {
1957
+ border-color: #0081ba;
1958
+ border-color: var(--color-interactive-accent-active);
1959
+ }
1960
+ .np-theme-personal .checkbox > label:not(.disabled):not(:disabled).focus,
1961
+ .np-theme-personal .radio > label:not(.disabled):not(:disabled).focus,
1962
+ .np-theme-personal .checkbox > label:not(.disabled):not(:disabled).focus:hover,
1963
+ .np-theme-personal .radio > label:not(.disabled):not(:disabled).focus:hover,
1964
+ .np-theme-personal .checkbox > label:not(.disabled):not(:disabled).has-focus,
1965
+ .np-theme-personal .radio > label:not(.disabled):not(:disabled).has-focus,
1966
+ .np-theme-personal .checkbox > label:not(.disabled):not(:disabled).has-focus:hover,
1967
+ .np-theme-personal .radio > label:not(.disabled):not(:disabled).has-focus:hover,
1968
+ .np-theme-personal .checkbox > label:not(.disabled):not(:disabled):focus-within,
1969
+ .np-theme-personal .radio > label:not(.disabled):not(:disabled):focus-within {
1970
+ border-color: #c9cbce;
1971
+ border-color: var(--color-interactive-secondary);
1972
+ }
1973
+ .checkbox.checkbox-lg > label,
1974
+ .radio.checkbox-lg > label,
1975
+ .checkbox.radio-lg > label,
1976
+ .radio.radio-lg > label {
1977
+ min-height: 72px;
1978
+ min-height: var(--size-72);
1979
+ }
1980
+ .checkbox.checkbox-lg > label small,
1981
+ .radio.checkbox-lg > label small,
1982
+ .checkbox.radio-lg > label small,
1983
+ .radio.radio-lg > label small,
1984
+ .checkbox.checkbox-lg > label .small,
1985
+ .radio.checkbox-lg > label .small,
1986
+ .checkbox.radio-lg > label .small,
1987
+ .radio.radio-lg > label .small,
1988
+ .checkbox.checkbox-lg > label .body-2,
1989
+ .radio.checkbox-lg > label .body-2,
1990
+ .checkbox.radio-lg > label .body-2,
1991
+ .radio.radio-lg > label .body-2,
1992
+ .checkbox.checkbox-lg > label .np-text-body-default,
1993
+ .radio.checkbox-lg > label .np-text-body-default,
1994
+ .checkbox.radio-lg > label .np-text-body-default,
1995
+ .radio.radio-lg > label .np-text-body-default {
1996
+ display: block;
1997
+ color: #5d7079;
1998
+ color: var(--color-content-secondary);
1999
+ }
2000
+ .error-messages {
2001
+ display: none;
2002
+ color: #cf2929;
2003
+ color: var(--color-content-negative);
2004
+ background-color: rgba(255,135,135,0.10196);
2005
+ background-color: var(--color-background-negative);
2006
+ position: relative;
2007
+ }
2008
+ .error-messages::before {
2009
+ content: " ";
2010
+ position: absolute;
2011
+ display: block;
2012
+ width: 10px;
2013
+ height: 10px;
2014
+ left: 20px;
2015
+ top: -5px;
2016
+ transform: rotate(45deg);
2017
+ background-color: inherit;
2018
+ }
2019
+ [dir="rtl"] .error-messages::before {
2020
+ right: 20px;
2021
+ left: auto;
2022
+ left: initial;
2023
+ }
2024
+ .form-group .error-messages {
2025
+ border-radius: 3px;
2026
+ border-width: 0;
2027
+ margin-top: 12px;
2028
+ }
2029
+ .has-error .error-messages {
2030
+ display: block;
2031
+ }
2032
+ .has-error .error-messages:empty,
2033
+ .has-error .error-messages:-moz-only-whitespace {
2034
+ display: none;
2035
+ }
2036
+ .has-error .error-messages:empty::before,
2037
+ .has-error .error-messages:-moz-only-whitespace::before {
2038
+ display: none;
2039
+ }
2040
+ .error-required,
2041
+ .error-pattern,
2042
+ .error-minlength,
2043
+ .error-maxlength,
2044
+ .error-min,
2045
+ .error-max,
2046
+ .error-async,
2047
+ .error-number,
2048
+ .error-date,
2049
+ .error-time,
2050
+ .error-datetime,
2051
+ .error-email,
2052
+ .error-url,
2053
+ .error-week,
2054
+ .error-month,
2055
+ .error-datetimelocal {
2056
+ display: none;
2057
+ }
2058
+ .ng-invalid-required ~ .error-messages > .error-required,
2059
+ .ng-invalid-pattern ~ .error-messages > .error-pattern,
2060
+ .ng-invalid-minlength ~ .error-messages > .error-minlength,
2061
+ .ng-invalid-maxlength ~ .error-messages > .error-maxlength,
2062
+ .ng-invalid-min ~ .error-messages > .error-min,
2063
+ .ng-invalid-max ~ .error-messages > .error-max,
2064
+ .ng-invalid-async ~ .error-messages > .error-async,
2065
+ .ng-invalid-number ~ .error-messages > .error-number,
2066
+ .ng-invalid-date ~ .error-messages > .error-date,
2067
+ .ng-invalid-time ~ .error-messages > .error-time,
2068
+ .ng-invalid-datetime ~ .error-messages > .error-datetime,
2069
+ .ng-invalid-email ~ .error-messages > .error-email,
2070
+ .ng-invalid-url ~ .error-messages > .error-url,
2071
+ .ng-invalid-week ~ .error-messages > .error-week,
2072
+ .ng-invalid-month ~ .error-messages > .error-month,
2073
+ .ng-invalid-datetimelocal ~ .error-messages > .error-datetimelocal {
2074
+ display: block;
2075
+ }
2076
+ .ng-invalid-required ~ .alert-danger > .error-required,
2077
+ .ng-invalid-pattern ~ .alert-danger > .error-pattern,
2078
+ .ng-invalid-minlength ~ .alert-danger > .error-minlength,
2079
+ .ng-invalid-maxlength ~ .alert-danger > .error-maxlength,
2080
+ .ng-invalid-min ~ .alert-danger > .error-min,
2081
+ .ng-invalid-max ~ .alert-danger > .error-max,
2082
+ .ng-invalid-async ~ .alert-danger > .error-async,
2083
+ .ng-invalid-number ~ .alert-danger > .error-number,
2084
+ .ng-invalid-date ~ .alert-danger > .error-date,
2085
+ .ng-invalid-time ~ .alert-danger > .error-time,
2086
+ .ng-invalid-datetime ~ .alert-danger > .error-datetime,
2087
+ .ng-invalid-email ~ .alert-danger > .error-email,
2088
+ .ng-invalid-url ~ .alert-danger > .error-url,
2089
+ .ng-invalid-week ~ .alert-danger > .error-week,
2090
+ .ng-invalid-month ~ .alert-danger > .error-month,
2091
+ .ng-invalid-datetimelocal ~ .alert-danger > .error-datetimelocal {
2092
+ display: block;
2093
+ }
2094
+ .form-control-placeholder {
2095
+ text-overflow: ellipsis;
2096
+ overflow: hidden;
2097
+ font-weight: 400;
2098
+ font-weight: var(--font-weight-regular);
2099
+ font-size: 1rem;
2100
+ font-size: var(--font-size-16);
2101
+ line-height: 150%;
2102
+ letter-spacing: -0.011em;
2103
+ display: block;
2104
+ width: 100%;
2105
+ color: #768e9c;
2106
+ color: var(--color-content-tertiary);
2107
+ }
2108
+ .np-theme-personal .btn-input,
2109
+ .np-theme-personal .input-group,
2110
+ .np-theme-personal .form-control,
2111
+ .np-theme-personal .input-group-addon,
2112
+ .np-theme-personal .radio > label,
2113
+ .np-theme-personal .checkbox > label {
2114
+ background-color: transparent;
2115
+ background-color: initial;
2116
+ border: none !important;
2117
+ border-radius: 10px;
2118
+ border-radius: var(--radius-small);
2119
+ }
2120
+ .np-theme-personal .btn-input,
2121
+ .np-theme-personal .input-group,
2122
+ .np-theme-personal .form-control,
2123
+ .np-theme-personal .radio > label,
2124
+ .np-theme-personal .checkbox > label {
2125
+ box-shadow: inset 0 0 0 1px #c9cbce;
2126
+ box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
2127
+ transition: box-shadow 0.3s ease-in-out;
2128
+ }
2129
+ .np-theme-personal .input-group > .form-control,
2130
+ .np-theme-personal .input-group > .btn-input,
2131
+ .np-theme-personal .typeahead__input-container .form-control {
2132
+ box-shadow: none !important;
2133
+ }
2134
+ .np-theme-personal .btn-input:not(.disabled):not(:disabled):hover,
2135
+ .np-theme-personal .input-group:not(.disabled):not(:disabled):hover,
2136
+ .np-theme-personal .form-control:not(.disabled):not(:disabled):hover,
2137
+ .np-theme-personal .radio > label:not(.disabled):not(:disabled):hover,
2138
+ .np-theme-personal .checkbox > label:not(.disabled):not(:disabled):hover {
2139
+ box-shadow: inset 0 0 0 2px #b5b7ba;
2140
+ box-shadow: inset 0 0 0 2px var(--color-interactive-secondary-hover);
2141
+ }
2142
+ .np-theme-personal .btn-input:not(.disabled):not(:disabled):hover:has(:checked, .checked),
2143
+ .np-theme-personal .input-group:not(.disabled):not(:disabled):hover:has(:checked, .checked),
2144
+ .np-theme-personal .form-control:not(.disabled):not(:disabled):hover:has(:checked, .checked),
2145
+ .np-theme-personal .radio > label:not(.disabled):not(:disabled):hover:has(:checked, .checked),
2146
+ .np-theme-personal .checkbox > label:not(.disabled):not(:disabled):hover:has(:checked, .checked) {
2147
+ box-shadow: inset 0 0 0 2px var(--color-interactive-primary-hover);
2148
+ }
2149
+ .np-theme-personal .btn-input:not(.disabled):not(:disabled):focus-visible,
2150
+ .np-theme-personal .btn-input:not(.disabled):not(:disabled):has(:focus-visible),
2151
+ .np-theme-personal .input-group:not(.disabled):not(:disabled):focus-visible,
2152
+ .np-theme-personal .input-group:not(.disabled):not(:disabled):has(.form-control:focus-visible, .btn-input:focus-visible),
2153
+ .np-theme-personal .form-control:not(.disabled):not(:disabled):focus-visible,
2154
+ .np-theme-personal .form-control:not(.disabled):not(:disabled):has(:focus-visible),
2155
+ .np-theme-personal .radio > label:not(.disabled):not(:disabled):focus-visible,
2156
+ .np-theme-personal .radio > label:not(.disabled):not(:disabled):has(:focus-visible),
2157
+ .np-theme-personal .checkbox > label:not(.disabled):not(:disabled):focus-visible,
2158
+ .np-theme-personal .checkbox > label:not(.disabled):not(:disabled):has(:focus-visible) {
2159
+ box-shadow: inset 0 0 0 3px var(--color-interactive-primary);
2160
+ }
2161
+ .np-theme-personal .has-error .btn-input,
2162
+ .np-theme-personal .has-error .input-group,
2163
+ .np-theme-personal .has-error .form-control,
2164
+ .np-theme-personal .has-error .radio > label,
2165
+ .np-theme-personal .has-error .checkbox > label {
2166
+ box-shadow: inset 0 0 0 2px var(--color-sentiment-negative);
2167
+ }
2168
+ .np-theme-personal .has-error .input-group:not(.disabled):not(:disabled):hover,
2169
+ .np-theme-personal .has-error .form-control:not(.disabled):not(:disabled):hover,
2170
+ .np-theme-personal .has-error .radio > label:not(.disabled):not(:disabled):hover,
2171
+ .np-theme-personal .has-error .checkbox > label:not(.disabled):not(:disabled):hover {
2172
+ box-shadow: inset 0 0 0 2px var(--color-sentiment-negative-hover);
2173
+ }
2174
+ .np-theme-personal .has-error .input-group:not(.disabled):not(:disabled):active,
2175
+ .np-theme-personal .has-error .input-group:not(.disabled):not(:disabled):focus-visible,
2176
+ .np-theme-personal .has-error .input-group:not(.disabled):not(:disabled):has(:focus-visible),
2177
+ .np-theme-personal .has-error .form-control:not(.disabled):not(:disabled):active,
2178
+ .np-theme-personal .has-error .form-control:not(.disabled):not(:disabled):focus-visible,
2179
+ .np-theme-personal .has-error .form-control:not(.disabled):not(:disabled):has(:focus-visible),
2180
+ .np-theme-personal .has-error .radio > label:not(.disabled):not(:disabled):active,
2181
+ .np-theme-personal .has-error .radio > label:not(.disabled):not(:disabled):focus-visible,
2182
+ .np-theme-personal .has-error .radio > label:not(.disabled):not(:disabled):has(:focus-visible),
2183
+ .np-theme-personal .has-error .checkbox > label:not(.disabled):not(:disabled):active,
2184
+ .np-theme-personal .has-error .checkbox > label:not(.disabled):not(:disabled):focus-visible,
2185
+ .np-theme-personal .has-error .checkbox > label:not(.disabled):not(:disabled):has(:focus-visible) {
2186
+ box-shadow: inset 0 0 0 3px var(--color-sentiment-negative);
2187
+ }
2188
+ .np-theme-personal .has-error .tw-radio-button {
2189
+ border-color: var(--color-sentiment-negative) !important;
2190
+ }
2191
+ .np-theme-personal .has-error .tw-radio-button.checked {
2192
+ box-shadow: inset 0 0 0 1px var(--color-sentiment-negative);
2193
+ }
2194
+ .np-theme-personal .has-error .tw-radio-button.checked .tw-radio-check {
2195
+ background: var(--color-sentiment-negative) !important;
2196
+ }
2197
+ .np-theme-personal .has-error .checkbox:hover .tw-checkbox-button,
2198
+ .np-theme-personal .has-error .radio:not(.disabled):hover .tw-radio-button,
2199
+ .np-theme-personal .has-error .tw-checkbox-button:not(.disabled):not(:disabled):hover,
2200
+ .np-theme-personal .has-error input[type=checkbox]:hover + .tw-checkbox-button,
2201
+ .np-theme-personal .has-error input[type=radio]:not(.disabled):not(:disabled):hover + .tw-radio-button,
2202
+ .np-theme-personal .has-error input[type=checkbox]:not(.disabled):not(:disabled):hover + .tw-checkbox-button {
2203
+ box-shadow: inset 0 0 0 2px var(--color-sentiment-negative-hover);
2204
+ }
2205
+ .np-theme-personal .has-error .tw-checkbox-button.checked,
2206
+ .np-theme-personal .has-error .tw-checkbox-button:checked,
2207
+ .np-theme-personal .has-error input[type=checkbox]:checked + .tw-checkbox-button,
2208
+ .np-theme-personal .has-error .tw-checkbox-button.checked:hover,
2209
+ .np-theme-personal .has-error .tw-checkbox-button:checked:hover,
2210
+ .np-theme-personal .has-error input[type=checkbox]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button {
2211
+ box-shadow: inset 0 0 0 3px var(--color-sentiment-negative);
2212
+ background: var(--color-sentiment-negative);
2213
+ }
2214
+ .np-theme-personal .has-error .checkbox > label:not(.disabled):not(:disabled):active input[type=checkbox] + .tw-checkbox-button,
2215
+ .np-theme-personal .has-error .checkbox > label:not(.disabled):not(:disabled):focus-visible input[type=checkbox] + .tw-checkbox-button,
2216
+ .np-theme-personal .has-error .checkbox > label:not(.disabled):not(:disabled):has(:focus-visible) input[type=checkbox] + .tw-checkbox-button {
2217
+ box-shadow: inset 0 0 0 2px var(--color-sentiment-negative-active);
2218
+ }
2219
+ .np-theme-personal .tw-radio-button,
2220
+ .np-theme-personal .tw-checkbox-button {
2221
+ background-color: transparent;
2222
+ background-color: initial;
2223
+ color: inherit;
2224
+ transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
2225
+ }
2226
+ .np-theme-personal .btn-input:hover,
2227
+ .np-theme-personal .btn-input:active,
2228
+ .np-theme-personal .btn-input:focus,
2229
+ .np-theme-personal .btn-input:focus,
2230
+ .np-theme-personal .btn-input:focus-within,
2231
+ .np-theme-personal.open .btn-input {
2232
+ background-color: transparent !important;
2233
+ background-color: initial !important;
2234
+ }
2235
+ .np-theme-personal .form-group label {
2236
+ margin-bottom: 8px;
2237
+ margin-bottom: var(--padding-x-small);
2238
+ }
2239
+ .np-theme-personal .form-group .np-upload-input label {
2240
+ margin-bottom: 0;
2241
+ }
2242
+ .np-theme-personal .form-group .alert:before,
2243
+ .np-theme-personal .error-messages:before {
2244
+ content: none;
2245
+ }
2246
+ .np-theme-personal .error-messages,
2247
+ .np-theme-personal .alert-detach {
2248
+ color: #5d7079;
2249
+ color: var(--color-content-secondary);
2250
+ margin: 8px 0;
2251
+ margin: var(--padding-x-small) 0;
2252
+ padding: 0;
2253
+ background-color: transparent;
2254
+ background-color: initial;
2255
+ }
2256
+ .np-theme-personal .alert-detach .status-circle {
2257
+ margin-top: 2px;
2258
+ margin-right: 4px;
2259
+ margin-right: var(--size-4);
2260
+ }
2261
+ .np-theme-personal .has-error .error-messages,
2262
+ .np-theme-personal .has-error .alert-detach.alert-danger {
2263
+ color: var(--color-sentiment-negative);
2264
+ }
2265
+ .np-theme-personal .has-success .alert-detach.alert-positive,
2266
+ .np-theme-personal .has-warning .alert-detach.alert-warning,
2267
+ .np-theme-personal .has-error .alert-detach.alert-danger {
2268
+ display: flex;
2269
+ }
2270
+ .has-required::after {
2271
+ content: "\00a0*";
2272
+ color: #cf2929;
2273
+ color: var(--color-content-negative);
2274
+ }
2275
+ .np-theme-personal .has-required::after {
2276
+ color: var(--color-sentiment-negative);
2277
+ }