@transferwise/components 0.0.0-experimental-4568e68 → 0.0.0-experimental-20a9e0c

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