jqx.material-purple.css 62 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834
  1. /*Rounded Corners*/
  2. /*top-left rounded Corners*/
  3. .jqx-rc-tl-material-purple {
  4. -moz-border-radius-topleft: 2px;
  5. -webkit-border-top-left-radius: 2px;
  6. border-top-left-radius: 2px;
  7. }
  8. /*top-right rounded Corners*/
  9. .jqx-rc-tr-material-purple {
  10. -moz-border-radius-topright: 2px;
  11. -webkit-border-top-right-radius: 2px;
  12. border-top-right-radius: 2px;
  13. }
  14. /*bottom-left rounded Corners*/
  15. .jqx-rc-bl-material-purple {
  16. -moz-border-radius-bottomleft: 2px;
  17. -webkit-border-bottom-left-radius: 2px;
  18. border-bottom-left-radius: 2px;
  19. }
  20. /*bottom-right rounded Corners*/
  21. .jqx-rc-br-material-purple {
  22. -moz-border-radius-bottomright: 2px;
  23. -webkit-border-bottom-right-radius: 2px;
  24. border-bottom-right-radius: 2px;
  25. }
  26. /*top rounded Corners*/
  27. .jqx-rc-t-material-purple {
  28. -moz-border-radius-topleft: 2px;
  29. -webkit-border-top-left-radius: 2px;
  30. border-top-left-radius: 2px;
  31. -moz-border-radius-topright: 2px;
  32. -webkit-border-top-right-radius: 2px;
  33. border-top-right-radius: 2px;
  34. }
  35. /*bottom rounded Corners*/
  36. .jqx-rc-b-material-purple {
  37. -moz-border-radius-bottomleft: 2px;
  38. -webkit-border-bottom-left-radius: 2px;
  39. border-bottom-left-radius: 2px;
  40. -moz-border-radius-bottomright: 2px;
  41. -webkit-border-bottom-right-radius: 2px;
  42. border-bottom-right-radius: 2px;
  43. }
  44. /*right rounded Corners*/
  45. .jqx-rc-r-material-purple {
  46. -moz-border-radius-topright: 2px;
  47. -webkit-border-top-right-radius: 2px;
  48. border-top-right-radius: 2px;
  49. -moz-border-radius-bottomright: 2px;
  50. -webkit-border-bottom-right-radius: 2px;
  51. border-bottom-right-radius: 2px;
  52. }
  53. /*left rounded Corners*/
  54. .jqx-rc-l-material-purple {
  55. -moz-border-radius-topleft: 2px;
  56. -webkit-border-top-left-radius: 2px;
  57. border-top-left-radius: 2px;
  58. -moz-border-radius-bottomleft: 2px;
  59. -webkit-border-bottom-left-radius: 2px;
  60. border-bottom-left-radius: 2px;
  61. }
  62. /*all rounded Corners*/
  63. .jqx-rc-all-material-purple {
  64. -moz-border-radius: 2px;
  65. -webkit-border-radius: 2px;
  66. border-radius: 2px;
  67. }
  68. .jqx-widget-material-purple, .jqx-widget-header-material-purple, .jqx-fill-state-normal-material-purple,
  69. .jqx-widget-content-material-purple, .jqx-fill-state-hover-material-purple, .jqx-fill-state-pressed-material-purple {
  70. font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  71. font-size: 14px;
  72. }
  73. .jqx-widget-material-purple {
  74. font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  75. font-size: 14px;
  76. color: #555;
  77. }
  78. .jqx-widget-content-material-purple {
  79. font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  80. font-size: 14px;
  81. color: #555;
  82. background-color: #ffffff;
  83. border-color: #E0E0E0;
  84. }
  85. .jqx-widget-header-material-purple {
  86. background-color: #fff;
  87. border-color: #E0E0E0;
  88. color: #757575;
  89. font-weight: 500;
  90. *zoom: 1;
  91. font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  92. background: #fff;
  93. color: #757575;
  94. font-size: 14px;
  95. }
  96. .jqx-fill-state-normal-material-purple {
  97. border-color: #6200EE;
  98. *zoom: 1;
  99. background: #fafafa;
  100. }
  101. .jqx-widget-material-purple input::selection, input.jqx-input-widget-material-purple::selection, .jqx-widget-content-material-purple input::selection {
  102. background: #6200EE;
  103. color: #fff;
  104. }
  105. .jqx-toolbar-material-purple{
  106. border-color: #e0e0e0;
  107. }
  108. .jqx-button-material-purple, jqx-button-material-purple.jqx-fill-state-normal-material-purple {
  109. color: #fff;
  110. background: #6200EE;
  111. border-color: #6200EE;
  112. *zoom: 1;
  113. outline: none;
  114. transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  115. border-radius: 2px;
  116. }
  117. .jqx-button-material-purple button, jqx-button-material-purple input {
  118. background: transparent;
  119. color: inherit;
  120. border:none;
  121. outline: none;
  122. }
  123. .jqx-slider-button-material-purple {
  124. padding:3px;
  125. background: transparent;
  126. border:transparent;
  127. }
  128. .jqx-button-material-purple.float {
  129. border-radius: 100%;
  130. min-height: 48px;
  131. min-width: 48px;
  132. width: 48px;
  133. height: 48px;
  134. max-height: 48px;
  135. max-width:48px;
  136. }
  137. .jqx-button-material-purple.outlined {
  138. background: transparent;
  139. color: #6200EE;
  140. border-width: 2px;
  141. }
  142. .jqx-button-material-purple.flat {
  143. background: transparent;
  144. color: #6200EE;
  145. border: none;
  146. }
  147. .jqx-fill-state-hover-material-purple {
  148. }
  149. .jqx-fill-state-pressed-material-purple {
  150. }
  151. .jqx-fill-state-hover-material-purple, .jqx-fill-state-focus-material-purple {
  152. text-decoration: none;
  153. }
  154. .jqx-expander-header.jqx-fill-state-hover-material-purple,
  155. .jqx-expander-header.jqx-fill-state-normal-material-purple,
  156. .jqx-expander-header.jqx-fill-state-pressed-material-purple
  157. {
  158. background: #fff;
  159. border-color: #e0e0e0;
  160. }
  161. .jqx-expander-header.jqx-fill-state-hover-material-purple {
  162. background: #F5F5F5;
  163. }
  164. .jqx-expander-header-material-purple {
  165. padding:10px;
  166. }
  167. .jqx-button-material-purple.jqx-fill-state-hover {
  168. opacity: 0.9;
  169. cursor: pointer;
  170. box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  171. *zoom: 1;
  172. }
  173. .jqx-button-material-purple.jqx-fill-state-hover.outlined,
  174. .jqx-button-material-purple.jqx-fill-state-hover.flat {
  175. color: #6200EE;
  176. box-shadow: none;
  177. }
  178. .jqx-button-material-purple.jqx-fill-state-pressed {
  179. cursor: pointer;
  180. background: #883DF2;
  181. box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  182. }
  183. .jqx-button-material-purple.jqx-fill-state-pressed.float {
  184. box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  185. }
  186. .jqx-slider-button-material-purple.jqx-fill-state-pressed-material-purple,
  187. .jqx-button-material-purple.jqx-fill-state-pressed.outlined,
  188. .jqx-button-material-purple.jqx-fill-state-pressed.flat {
  189. background: rgba(99,0,238,0.15);
  190. box-shadow: none;
  191. }
  192. .jqx-button-material-purple.jqx-fill-state-focus {
  193. background: #883DF2;
  194. box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  195. }
  196. .jqx-slider-button-material-purple.jqx-fill-state-focus-material-purple {
  197. background: transparent;
  198. border-color: transparent;
  199. box-shadow:none;
  200. }
  201. .jqx-button-material-purple.jqx-fill-state-focus.outlined,
  202. .jqx-button-material-purple.jqx-fill-state-focus.flat {
  203. box-shadow: none;
  204. background: rgba(99,0,238,0.15);
  205. color: #883DF2;
  206. }
  207. .jqx-dropdownlist-state-normal-material-purple, .jqx-dropdownlist-state-hover-material-purple, .jqx-dropdownlist-state-selected-material-purple,
  208. .jqx-scrollbar-button-state-hover-material-purple, .jqx-scrollbar-button-state-normal-material-purple, .jqx-scrollbar-button-state-pressed-material-purple,
  209. .jqx-scrollbar-thumb-state-normal-horizontal-material-purple, .jqx-scrollbar-thumb-state-hover-horizontal-material-purple, .jqx-scrollbar-thumb-state-pressed-horizontal-material-purple,
  210. .jqx-scrollbar-thumb-state-normal-material-purple, .jqx-scrollbar-thumb-state-pressed-material-purple, .jqx-tree-item-hover-material-purple, .jqx-tree-item-selected-material-purple,
  211. .jqx-tree-item-material-purple, .jqx-menu-item-material-purple, .jqx-menu-item-hover-material-purple, .jqx-menu-item-selected-material-purple, .jqx-menu-item-top-material-purple, .jqx-menu-item-top-hover-material-purple,
  212. .jqx-menu-item-top-selected-material-purple, .jqx-slider-button-material-purple, .jqx-slider-slider-material-purple {
  213. -webkit-transition: background-color 100ms linear;
  214. -moz-transition: background-color 100ms linear;
  215. -o-transition: background-color 100ms linear;
  216. -ms-transition: background-color 100ms linear;
  217. transition: background-color 100ms linear;
  218. }
  219. .jqx-primary-material-purple.jqx-input-label-material-purple {
  220. color: #1ca8dd !important;
  221. }
  222. .jqx-primary-material-purple.jqx-input-bar-material-purple:before {
  223. background: #1ca8dd !important;
  224. }
  225. .jqx-success-material-purple.jqx-input-label-material-purple {
  226. color: #5cb85c !important;
  227. }
  228. .jqx-success-material-purple.jqx-input-bar-material-purple:before {
  229. background: #5cb85c !important;
  230. }
  231. .jqx-inverse-material-purple.jqx-input-label-material-purple {
  232. color: #666 !important;
  233. }
  234. .jqx-inverse-material-purple.jqx-input-bar-material-purple:before {
  235. background: #666 !important;
  236. }
  237. .jqx-danger-material-purple.jqx-input-label-material-purple {
  238. color: #d9534f !important;
  239. }
  240. .jqx-danger-material-purple.jqx-input-bar-material-purple:before {
  241. background: #d9534f !important;
  242. }
  243. .jqx-warning-material-purple.jqx-input-label-material-purple {
  244. color: #f0ad4e !important;
  245. }
  246. .jqx-warning-material-purple.jqx-input-bar-material-purple:before {
  247. background: #f0ad4e !important;
  248. }
  249. .jqx-info-material-purple.jqx-input-label-material-purple {
  250. color: #5bc0de !important;
  251. }
  252. .jqx-info-material-purple.jqx-input-bar-material-purple:before {
  253. background: #5bc0de !important;
  254. }
  255. .jqx-slider-tooltip-material-purple.jqx-primary-slider, .jqx-slider-tooltip-material-purple.jqx-primary-slider .jqx-fill-state-normal-material-purple {
  256. border-color: #1ca8dd;
  257. background: #1ca8dd;
  258. }
  259. .jqx-slider-tooltip-material-purple.jqx-success-slider, .jqx-slider-tooltip-material-purple.jqx-success-slider .jqx-fill-state-normal-material-purple {
  260. border-color: #5cb85c;
  261. background: #5cb85c;
  262. }
  263. .jqx-slider-tooltip-material-purple.jqx-inverse-slider, .jqx-slider-tooltip-material-purple.jqx-inverse-slider .jqx-fill-state-normal-material-purple {
  264. border-color: #666;
  265. background: #666;
  266. }
  267. .jqx-slider-tooltip-material-purple.jqx-danger-slider, .jqx-slider-tooltip-material-purple.jqx-danger-slider .jqx-fill-state-normal-material-purple {
  268. border-color: #d9534f;
  269. background: #d9534f;
  270. }
  271. .jqx-slider-tooltip-material-purple.jqx-warning-slider, .jqx-slider-tooltip-material-purple.jqx-warning-slider .jqx-fill-state-normal-material-purple {
  272. border-color: #f0ad4e;
  273. background: #f0ad4e;
  274. }
  275. .jqx-slider-tooltip-material-purple.jqx-info-slider, .jqx-slider-tooltip-material-purple.jqx-info-slider .jqx-fill-state-normal-material-purple {
  276. border-color: #5bc0de;
  277. background: #5bc0de;
  278. }
  279. .jqx-primary-material-purple {
  280. color: #1ca8dd !important;
  281. background: #fff !important;
  282. border-color: #1ca8dd !important;
  283. text-shadow: none !important;
  284. }
  285. .jqx-primary-material-purple.jqx-dropdownlist-state-normal-material-purple,
  286. .jqx-primary-material-purple.jqx-slider-button-material-purple,
  287. .jqx-primary-material-purple.jqx-slider-slider-material-purple,
  288. .jqx-primary-material-purple.jqx-combobox-arrow-normal-material-purple,
  289. .jqx-primary-material-purple.jqx-combobox-arrow-hover-material-purple,
  290. .jqx-primary-material-purple.jqx-action-button-material-purple,
  291. .jqx-primary-material-purple:hover,
  292. .jqx-primary-material-purple:focus,
  293. .jqx-primary-material-purple:active,
  294. .jqx-primary-material-purple.active,
  295. .jqx-primary-material-purple.disabled,
  296. .jqx-primary-material-purple[disabled] {
  297. color: #fff !important;
  298. background: #1ca8dd !important;
  299. border-color: #1ca8dd !important;
  300. text-shadow: none !important;
  301. }
  302. .jqx-fill-state-pressed-material-purple.jqx-primary-material-purple,
  303. .jqx-primary-material-purple:active,
  304. .jqx-primary-material-purple.active {
  305. color: #fff !important;
  306. background-color: #1ca8dd !important;
  307. border-color: #1ca8dd !important;
  308. text-shadow: none !important;
  309. }
  310. .jqx-success-material-purple {
  311. color: #5cb85c !important;
  312. background: #fff !important;
  313. border-color: #5cb85c !important;
  314. text-shadow: none !important;
  315. }
  316. .jqx-success-material-purple.jqx-dropdownlist-state-normal-material-purple,
  317. .jqx-success-material-purple.jqx-slider-button-material-purple,
  318. .jqx-success-material-purple.jqx-slider-slider-material-purple,
  319. .jqx-success-material-purple.jqx-combobox-arrow-normal-material-purple,
  320. .jqx-success-material-purple.jqx-combobox-arrow-hover-material-purple,
  321. .jqx-success-material-purple.jqx-action-button-material-purple,
  322. .jqx-success-material-purple:hover,
  323. .jqx-success-material-purple:focus,
  324. .jqx-success-material-purple:active,
  325. .jqx-success-material-purple.active,
  326. .jqx-success-material-purple.disabled,
  327. .jqx-success-material-purple[disabled] {
  328. color: #fff !important;
  329. background: #5cb85c !important;
  330. border-color: #5cb85c !important;
  331. text-shadow: none !important;
  332. }
  333. .jqx-fill-state-pressed-material-purple.jqx-success-material-purple,
  334. .jqx-success-material-purple:active,
  335. .jqx-success-material-purple.active {
  336. text-shadow: none !important;
  337. color: #fff !important;
  338. background: #5cb85c !important;
  339. border-color: #5cb85c !important;
  340. }
  341. .jqx-inverse-material-purple {
  342. text-shadow: none !important;
  343. color: #666 !important;
  344. background: #fff !important;
  345. border-color: #cccccc !important;
  346. }
  347. .jqx-inverse-material-purple.jqx-dropdownlist-state-normal-material-purple,
  348. .jqx-inverse-material-purple.jqx-slider-button-material-purple,
  349. .jqx-inverse-material-purple.jqx-slider-slider-material-purple,
  350. .jqx-inverse-material-purple.jqx-combobox-arrow-hover-material-purple,
  351. .jqx-inverse-material-purple.jqx-combobox-arrow-normal-material-purple,
  352. .jqx-inverse-material-purple.jqx-action-button-material-purple,
  353. .jqx-inverse-material-purple:hover,
  354. .jqx-inverse-material-purple:focus,
  355. .jqx-inverse-material-purple:active,
  356. .jqx-inverse-material-purple.active,
  357. .jqx-inverse-material-purple.disabled,
  358. .jqx-inverse-material-purple[disabled] {
  359. text-shadow: none !important;
  360. color: #666 !important;
  361. background: #cccccc !important;
  362. border-color: #cccccc !important;
  363. }
  364. .jqx-fill-state-pressed-material-purple.jqx-inverse-material-purple,
  365. .jqx-inverse-material-purple:active,
  366. .jqx-inverse-material-purple.active {
  367. text-shadow: none !important;
  368. color: #666 !important;
  369. background: #cccccc !important;
  370. border-color: #cccccc !important;
  371. }
  372. .jqx-danger-material-purple {
  373. text-shadow: none !important;
  374. color: #d9534f !important;
  375. background: #fff !important;
  376. border-color: #d9534f !important;
  377. }
  378. .jqx-danger-material-purple.jqx-dropdownlist-state-normal-material-purple,
  379. .jqx-danger-material-purple.jqx-slider-button-material-purple,
  380. .jqx-danger-material-purple.jqx-slider-slider-material-purple,
  381. .jqx-danger-material-purple.jqx-combobox-arrow-hover-material-purple,
  382. .jqx-danger-material-purple.jqx-combobox-arrow-normal-material-purple,
  383. .jqx-danger-material-purple.jqx-action-button-material-purple,
  384. .jqx-danger-material-purple:hover,
  385. .jqx-danger-material-purple:focus,
  386. .jqx-danger-material-purple:active,
  387. .jqx-danger-material-purple.active,
  388. .jqx-danger-material-purple.disabled,
  389. .jqx-danger-material-purple[disabled] {
  390. text-shadow: none !important;
  391. color: #fff !important;
  392. background: #d9534f !important;
  393. border-color: #d9534f !important;
  394. }
  395. .jqx-fill-state-pressed-material-purple.jqx-danger-material-purple,
  396. .jqx-danger-material-purple:active,
  397. .jqx-danger-material-purple.active {
  398. text-shadow: none !important;
  399. color: #fff !important;
  400. background: #d9534f !important;
  401. border-color: #d9534f !important;
  402. }
  403. .jqx-validator-error-label-material-purple {
  404. color: #d9534f !important;
  405. }
  406. .jqx-warning-material-purple {
  407. text-shadow: none !important;
  408. color: #f0ad4e !important;
  409. background: #fff !important;
  410. border-color: #f0ad4e !important;
  411. }
  412. .jqx-warning-material-purple.jqx-dropdownlist-state-normal-material-purple,
  413. .jqx-warning-material-purple.jqx-slider-button-material-purple,
  414. .jqx-warning-material-purple.jqx-slider-slider-material-purple,
  415. .jqx-warning-material-purple.jqx-combobox-arrow-hover-material-purple,
  416. .jqx-warning-material-purple.jqx-combobox-arrow-normal-material-purple,
  417. .jqx-warning-material-purple.jqx-action-button-material-purple,
  418. .jqx-warning-material-purple:hover,
  419. .jqx-warning-material-purple:focus,
  420. .jqx-warning-material-purple:active,
  421. .jqx-warning-material-purple.active,
  422. .jqx-warning-material-purple.disabled,
  423. .jqx-warning-material-purple[disabled] {
  424. text-shadow: none !important;
  425. color: #fff !important;
  426. background: #f0ad4e !important;
  427. border-color: #f0ad4e !important;
  428. }
  429. .jqx-fill-state-pressed-material-purple.jqx-warning-material-purple,
  430. .jqx-warning-material-purple:active,
  431. .jqx-warning-material-purple.active {
  432. text-shadow: none !important;
  433. color: #fff !important;
  434. background: #f0ad4e !important;
  435. border-color: #f0ad4e !important;
  436. }
  437. .jqx-info-material-purple {
  438. text-shadow: none !important;
  439. color: #5bc0de !important;
  440. background: #fff !important;
  441. border-color: #5bc0de !important;
  442. }
  443. .jqx-info-material-purple.jqx-dropdownlist-state-normal-material-purple,
  444. .jqx-info-material-purple.jqx-slider-button-material-purple,
  445. .jqx-info-material-purple.jqx-slider-slider-material-purple,
  446. .jqx-info-material-purple.jqx-combobox-arrow-hover-material-purple,
  447. .jqx-info-material-purple.jqx-combobox-arrow-normal-material-purple,
  448. .jqx-info-material-purple.jqx-action-button-material-purple,
  449. .jqx-info-material-purple:hover,
  450. .jqx-info-material-purple:focus,
  451. .jqx-info-material-purple:active,
  452. .jqx-info-material-purple.active,
  453. .jqx-info-material-purple.disabled,
  454. .jqx-info-material-purple[disabled] {
  455. color: #fff !important;
  456. background: #5bc0de !important;
  457. border-color: #5bc0de !important;
  458. text-shadow: none !important;
  459. }
  460. .jqx-fill-state-pressed-material-purple.jqx-info-material-purple,
  461. .jqx-info-material-purple:active,
  462. .jqx-info-material-purple.active {
  463. text-shadow: none !important;
  464. color: #fff !important;
  465. background: #5bc0de !important;
  466. border-color: #5bc0de !important;
  467. }
  468. .jqx-fill-state-pressed-material-purple {
  469. background-image: none;
  470. outline: 0;
  471. }
  472. .jqx-grid-group-column-material-purple {
  473. border-color: transparent;
  474. }
  475. .jqx-grid-column-menubutton-material-purple {
  476. border-width: 0px;
  477. }
  478. .jqx-grid-groups-row-material-purple > span {
  479. padding-left: 4px;
  480. }
  481. .jqx-grid-cell-material-purple {
  482. -webkit-box-shadow: none;
  483. -moz-box-shadow: none;
  484. box-shadow: none;
  485. }
  486. .jqx-grid-pager-top-material-purple .jqx-button-material-purple,
  487. .jqx-grid-pager-material-purple .jqx-button-material-purple {
  488. color: rgba(0,0,0,.54) !important;
  489. background-color: transparent;
  490. border-color: transparent;
  491. top: -4px;
  492. position: relative;
  493. height:30px !important;
  494. width:30px !important;
  495. border-radius:50%;
  496. }
  497. .jqx-grid-pager-input-material-purple {
  498. padding:0px !important;
  499. }
  500. .jqx-grid-pager-top-material-purple .jqx-button-material-purple > div,
  501. .jqx-grid-pager-material-purple .jqx-button-material-purple > div {
  502. top: 3px;
  503. position: relative;
  504. left: 3px;
  505. }
  506. .jqx-grid-pager-top-material-purple .jqx-button-material-purple.jqx-fill-state-hover,
  507. .jqx-grid-pager-top-material-purple .jqx-button-material-purple.jqx-fill-state-pressed,
  508. .jqx-grid-pager-material-purple .jqx-button-material-purple.jqx-fill-state-hover,
  509. .jqx-grid-pager-material-purple .jqx-button-material-purple.jqx-fill-state-pressed
  510. {
  511. color: rgba(0,0,0,.54) !important;
  512. background-color: transparent;
  513. border-color: transparent;
  514. box-shadow: none;
  515. }
  516. .jqx-grid-pager-top-material-purple .jqx-grid-pager-number-material-purple,
  517. .jqx-grid-pager-material-purple .jqx-grid-pager-number-material-purple {
  518. background-color: transparent;
  519. border-color: transparent;
  520. color: rgba(0,0,0,.54) !important;
  521. font-size:12px;
  522. }
  523. .jqx-grid-pager-top-material-purple .jqx-grid-pager-number-material-purple:hover,
  524. .jqx-grid-pager-material-purple .jqx-grid-pager-number-material-purple:hover {
  525. font-size:12px;
  526. }
  527. .jqx-grid-pager-top-material-purple .jqx-grid-pager-number-material-purple.jqx-fill-state-pressed-material-purple ,
  528. .jqx-grid-pager-material-purple .jqx-grid-pager-number-material-purple.jqx-fill-state-pressed-material-purple {
  529. color: #6200EE !important;
  530. font-weight: bold !important;
  531. }
  532. .jqx-grid-column-menubutton-material-purple {
  533. background-color: transparent;
  534. border-color: #E0E0E0 !important;
  535. }
  536. .jqx-cell-material-purple {
  537. font-size: 14px;
  538. }
  539. .jqx-calendar-material-purple > div {
  540. padding: 10px;
  541. box-sizing: border-box;
  542. }
  543. .jqx-calendar-row-header-material-purple, .jqx-calendar-top-left-header-material-purple {
  544. background-color: #f0f0f0;
  545. border: 0px solid #f2f2f2;
  546. }
  547. .jqx-calendar-column-header-material-purple {
  548. background-color: #FFF;
  549. border-top: 1px solid #FFF;
  550. border-bottom: 1px solid #e9e9e9;
  551. }
  552. .jqx-expander-header-material-purple {
  553. padding-top: 10px;
  554. padding-bottom: 10px;
  555. }
  556. .jqx-ribbon-header-vertical-material-purple, .jqx-widget-header-vertical-material-purple {
  557. background: #fff;
  558. }
  559. .jqx-scrollbar-state-normal-material-purple {
  560. background-color: #f5f5f5;
  561. border: 1px solid #f5f5f5;
  562. border-left-color: #ddd;
  563. }
  564. .jqx-scrollbar-thumb-state-normal-material-purple, .jqx-scrollbar-thumb-state-normal-horizontal-material-purple {
  565. background: #f5f5f5;
  566. border-color: #b3b3b3;
  567. }
  568. .jqx-scrollbar-thumb-state-hover-material-purple, .jqx-scrollbar-thumb-state-hover-horizontal-material-purple {
  569. background: #e6e6e6;
  570. border-color: #b3b3b3;
  571. box-shadow: none;
  572. -webkit-box-shadow: none;
  573. -moz-box-shadow: none;
  574. }
  575. .jqx-progressbar-material-purple {
  576. background: #f7f7f7 !important;
  577. -webkit-box-shadow: none;
  578. -moz-box-shadow: none;
  579. box-shadow: none;
  580. }
  581. .jqx-progressbar-value-material-purple, .jqx-splitter-collapse-button-horizontal-material-purple {
  582. background: #6200EE;
  583. }
  584. .jqx-splitter-collapse-button-vertical-material-purple, .jqx-progressbar-value-vertical-material-purple {
  585. background: #6200EE;
  586. }
  587. .jqx-scrollbar-thumb-state-pressed-material-purple, .jqx-splitter-splitbar-vertical-material-purple, .jqx-splitter-splitbar-horizontal-material-purple, .jqx-scrollbar-thumb-state-pressed-horizontal-material-purple,
  588. .jqx-scrollbar-button-state-pressed-material-purple {
  589. background: #d9d9d9;
  590. border-color: #b3b3b3;
  591. box-shadow: none;
  592. -webkit-box-shadow: none;
  593. -moz-box-shadow: none;
  594. }
  595. .jqx-grid-column-sortdescbutton-material-purple, jqx-grid-column-filterbutton-material-purple, .jqx-grid-column-sortascbutton-material-purple {
  596. background-color: transparent;
  597. border-style: solid;
  598. border-width: 0px 0px 0px 0px;
  599. border-color: #E0E0E0;
  600. }
  601. .jqx-menu-vertical-material-purple {
  602. background: #ffffff;
  603. filter: none;
  604. }
  605. .jqx-grid-bottomright-material-purple, .jqx-panel-bottomright-material-purple, .jqx-listbox-bottomright-material-purple {
  606. background-color: #fafafa;
  607. }
  608. .jqx-window-material-purple, .jqx-tooltip-material-purple {
  609. box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
  610. }
  611. .jqx-tooltip-material-purple, .jqx-tooltip-material-purple.jqx-popup-material-purple, .jqx-tooltip-material-purple .jqx-fill-state-normal-material-purple {
  612. background: #6F6F6F;
  613. border-color: #6F6F6F;
  614. box-shadow:none;
  615. color: #fff;
  616. }
  617. .jqx-docking-material-purple .jqx-window-material-purple {
  618. box-shadow: none;
  619. }
  620. .jqx-docking-panel-material-purple .jqx-window-material-purple {
  621. box-shadow: none;
  622. }
  623. .jqx-checkbox-material-purple {
  624. line-height:20px;
  625. overflow: visible;
  626. }
  627. .jqx-radiobutton-material-purple {
  628. overflow: visible;
  629. box-shadow: none;
  630. -webkit-box-shadow: none;
  631. -moz-box-shadow: none;
  632. background-repeat: no-repeat;
  633. background: none;
  634. line-height:20px;
  635. }
  636. .jqx-radiobutton-material-purple-material-purple, .jqx-radiobutton-hover-material-purple {
  637. -moz-border-radius: 100%;
  638. -webkit-border-radius: 100%;
  639. border-radius: 100%;
  640. background-repeat: no-repeat;
  641. transition: background-color ease-in .3s;
  642. }
  643. .jqx-radiobutton-check-checked-material-purple {
  644. filter: none;
  645. background: #fff;
  646. background-repeat: no-repeat;
  647. -moz-border-radius: 100%;
  648. -webkit-border-radius: 100%;
  649. border-radius: 100%;
  650. }
  651. .jqx-radiobutton-check-indeterminate-material-purple {
  652. filter: none;
  653. background: #999;
  654. -moz-border-radius: 100%;
  655. -webkit-border-radius: 100%;
  656. border-radius: 100%;
  657. }
  658. .jqx-radiobutton-check-indeterminate-disabled-material-purple {
  659. filter: none;
  660. background: #999;
  661. -moz-border-radius: 100%;
  662. -webkit-border-radius: 100%;
  663. border-radius: 100%;
  664. }
  665. .jqx-checkbox-default-material-purple,
  666. .jqx-radiobutton-default-material-purple
  667. {
  668. border-width: 1px;
  669. border-color: #E0E0E0;
  670. background-color: #fff;
  671. overflow: visible;
  672. }
  673. .jqx-tree-material-purple .jqx-checkbox-material-purple .jqx-checkbox-default-material-purple,
  674. .jqx-checkbox-material-purple[checked] .jqx-checkbox-default-material-purple,
  675. .jqx-tree-grid-checkbox[checked].jqx-checkbox-default-material-purple,
  676. .jqx-radiobutton-material-purple[checked] .jqx-radiobutton-default-material-purple
  677. {
  678. background-color: #6200EE;
  679. border-color: #6200EE;
  680. }
  681. .jqx-checkbox-check-checked-material-purple {
  682. background: transparent url(images/material_check_white.png) center center no-repeat;
  683. }
  684. .jqx-checkbox-check-indeterminate-material-purple {
  685. width:14px !important;
  686. height:14px !important;
  687. position:relative;
  688. top: 1px;
  689. left: 1px;
  690. background: white;
  691. }
  692. .jqx-tree-material-purple .jqx-checkbox-check-indeterminate-material-purple {
  693. width:12px !important;
  694. height:12px !important;
  695. top: 2px;
  696. left:2px;
  697. }
  698. .jqx-checkbox-hover-material-purple,
  699. .jqx-radiobutton-hover-material-purple {
  700. background-color: #6200EE;
  701. border-color: #6200EE;
  702. }
  703. .jqx-slider-slider-material-purple {
  704. transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
  705. }
  706. .jqx-slider-slider-material-purple:active {
  707. transform: scale(1.2);
  708. box-shadow: rgba(0,0,0,0.3) 0 0 10px;
  709. }
  710. .jqx-slider-material-purple[discrete] .jqx-slider-slider-material-purple:active
  711. {
  712. transform: scaleX(0);
  713. }
  714. .jqx-slider-slider-horizontal-material-purple {
  715. background: #6200EE;
  716. }
  717. .jqx-slider-slider-vertical-material-purple {
  718. background: #6200EE;
  719. }
  720. .jqx-slider-tooltip-material-purple {
  721. width: 25px;
  722. height: 25px;
  723. transform-origin: 50% 100%;
  724. border-radius: 50%;
  725. transform: scale(0) rotate(45deg);
  726. padding:0px;
  727. background: transparent !important;
  728. }
  729. .jqx-slider-tooltip-material-purple.init {
  730. transform: scale(1) rotate(45deg);
  731. }
  732. .jqx-slider-tooltip-material-purple.hide {
  733. transition: transform 0.2s ease;
  734. transform-origin:50% 100%;
  735. transform: scale(0) rotate(45deg);
  736. }
  737. .jqx-slider-tooltip-material-purple.show {
  738. transition: transform 0.2s ease;
  739. transform: scale(1) rotate(45deg);
  740. }
  741. .jqx-slider-tooltip-material-purple .jqx-tooltip-arrow-t-b,
  742. .jqx-slider-tooltip-material-purple .jqx-tooltip-arrow-l-r {
  743. display:none;
  744. visibility:hidden;
  745. }
  746. .jqx-slider-tooltip-material-purple, .jqx-slider-tooltip-material-purple .jqx-fill-state-normal-material-purple {
  747. border-radius: 15px 15px 0px;
  748. display: flex;
  749. align-items: center;
  750. justify-content: center;
  751. background: #6200EE;
  752. color: #fff;
  753. font-size:11px;
  754. }
  755. .jqx-slider-tooltip-material-purple.far, .jqx-slider-tooltip-material-purple.far .jqx-fill-state-normal-material-purple {
  756. border-radius: 0px 15px 15px 15px;
  757. }
  758. .jqx-slider-tooltip-material-purple.vertical, .jqx-slider-tooltip-material-purple.vertical .jqx-fill-state-normal-material-purple {
  759. border-radius: 15px 0px 15px 15px;
  760. }
  761. .jqx-slider-tooltip-material-purple.vertical.far, .jqx-slider-tooltip-material-purple.vertical.far .jqx-fill-state-normal-material-purple {
  762. border-radius: 15px 15px 15px 0px;
  763. }
  764. .jqx-slider-tooltip-material-purple {
  765. background:transparent;
  766. border:none !important;
  767. box-shadow:none;
  768. }
  769. .jqx-slider-tooltip-material-purple .jqx-tooltip-main-material-purple {
  770. top: -7px;
  771. right: 11px;
  772. }
  773. .jqx-slider-tooltip-material-purple.far .jqx-tooltip-main-material-purple {
  774. top: 3px;
  775. right: 4px;
  776. }
  777. .jqx-slider-tooltip-material-purple.vertical .jqx-tooltip-main-material-purple {
  778. top: -3px;
  779. right: 3px;
  780. }
  781. .jqx-slider-tooltip-material-purple .jqx-tooltip-text {
  782. background: transparent;
  783. border:none;
  784. padding: 0px;
  785. overflow:visible;
  786. }
  787. .jqx-slider-tooltip-material-purple .jqx-tooltip-text>span {
  788. transform: rotate(-45deg);
  789. }
  790. .jqx-slider-tooltip-material-purple.range {
  791. width: 35px;
  792. height:35px;
  793. }
  794. .jqx-slider-rangebar-material-purple {
  795. border-color: #6200EE;
  796. background: #6200EE;
  797. }
  798. .jqx-slider-track-horizontal-material-purple, .jqx-slider-track-vertical-material-purple {
  799. border-color: #E0E0E0;
  800. background: #f0f0f0;
  801. }
  802. .jqx-slider-button-material-purple {
  803. -moz-border-radius: 100%;
  804. -webkit-border-radius: 100%;
  805. border-radius: 100%;
  806. }
  807. .jqx-slider-button-material-purple.jqx-fill-state-normal-material-purple,
  808. .jqx-slider-button-material-purple.jqx-fill-state-hover-material-purple,
  809. .jqx-slider-button-material-purple.jqx-fill-state-pressed-material-purple
  810. {
  811. background: transparent !important;
  812. }
  813. .jqx-listitem-state-hover-material-purple,
  814. .jqx-listitem-state-selected-material-purple,
  815. .jqx-listitem-state-normal-material-purple {
  816. padding: 5px;
  817. }
  818. .jqx-scheduler-edit-dialog-label-material-purple {
  819. line-height: 35px;
  820. padding-top: 6px;
  821. padding-bottom: 6px;
  822. }
  823. .jqx-scheduler-edit-dialog-field-material-purple {
  824. line-height: 35px;
  825. padding-top: 6px;
  826. padding-bottom: 6px;
  827. }
  828. .jqx-scheduler-edit-dialog-label-rtl-material-purple {
  829. line-height: 35px;
  830. padding-top: 6px;
  831. padding-bottom: 6px;
  832. }
  833. .jqx-scheduler-edit-dialog-field-rtl-material-purple {
  834. line-height: 35px;
  835. padding-top: 6px;
  836. padding-bottom: 6px;
  837. }
  838. /*applied to a list item when the item is selected.*/
  839. .jqx-listitem-state-hover-material-purple, .jqx-menu-item-hover-material-purple, .jqx-tree-item-hover-material-purple, .jqx-calendar-cell-hover-material-purple, .jqx-grid-cell-hover-material-purple,
  840. .jqx-menu-vertical-material-purple .jqx-menu-item-top-hover-material-purple, .jqx-input-popup-material-purple .jqx-fill-state-hover-material-purple,
  841. .jqx-input-popup-material-purple .jqx-fill-state-pressed-material-purple {
  842. color: #333 !important;
  843. border-color: #F5F5F5;
  844. text-decoration: none;
  845. background-color: #F5F5F5;
  846. background-repeat: repeat-x;
  847. outline: 0;
  848. background: #F5F5F5; /* Old browsers */
  849. -webkit-box-shadow: none;
  850. -moz-box-shadow: none;
  851. box-shadow: none;
  852. background-position: 0 0;
  853. }
  854. .jqx-scheduler-cell-hover-material-purple {
  855. border-color: #F5F5F5 !important;
  856. background: #F5F5F5 !important;
  857. }
  858. .jqx-listitem-state-selected-material-purple, .jqx-menu-item-selected-material-purple, .jqx-tree-item-selected-material-purple, .jqx-calendar-cell-selected-material-purple, .jqx-grid-cell-selected-material-purple,
  859. .jqx-menu-vertical-material-purple .jqx-menu-item-top-selected-material-purple, .jqx-grid-selectionarea-material-purple, .jqx-input-button-header-material-purple, .jqx-input-button-innerHeader-material-purple {
  860. color: #6200EE !important;
  861. border-color: #ECE0FD !important;
  862. background: #ECE0FD; /* Old browsers */
  863. box-shadow: none;
  864. }
  865. .jqx-scheduler-cell-selected-material-purple {
  866. border-color: #ECE0FD !important;
  867. background: #ECE0FD !important;
  868. }
  869. .jqx-grid-cell-material-purple .jqx-button-material-purple, .jqx-grid-cell-material-purple .jqx-button-material-purple.jqx-fill-state-hover-material-purple, .jqx-grid-cell-material-purple .jqx-button-material-purple.jqx-fill-state-pressed-material-purple {
  870. -webkit-box-shadow: none;
  871. -moz-box-shadow: none;
  872. box-shadow: none;
  873. -webkit-transition: none;
  874. -moz-transition: none;
  875. -o-transition: none;
  876. transition: none;
  877. }
  878. .jqx-popup-material-purple {
  879. border: 1px solid #E0E0E0;
  880. *border-right-width: 2px;
  881. *border-bottom-width: 2px;
  882. -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
  883. -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
  884. }
  885. .jqx-grid-column-sortascbutton-material-purple, .jqx-expander-arrow-bottom-material-purple, .jqx-window-collapse-button-material-purple, .jqx-menu-item-arrow-up-material-purple, .jqx-menu-item-arrow-up-selected-material-purple, .jqx-menu-item-arrow-top-up-material-purple, .jqx-icon-arrow-up-material-purple, .jqx-icon-arrow-up-hover-material-purple, .jqx-icon-arrow-up-selected-material-purple {
  886. background-image: url('images/material-icon-up.png');
  887. background-repeat: no-repeat;
  888. background-position: center;
  889. }
  890. .jqx-widget-material-purple .jqx-grid-group-expand-material-purple, .jqx-grid-group-expand-material-purple, .jqx-grid-column-menubutton-material-purple, .jqx-grid-column-sortdescbutton-material-purple, .jqx-expander-arrow-top-material-purple, .jqx-window-collapse-button-collapsed-material-purple, .jqx-menu-item-arrow-down-material-purple, .jqx-menu-item-arrow-down-selected-material-purple, .jqx-menu-item-arrow-down-material-purple, .jqx-icon-arrow-down-material-purple, .jqx-icon-arrow-down-hover-material-purple, .jqx-icon-arrow-down-selected-material-purple {
  891. background-image: url('images/material-icon-down.png');
  892. background-repeat: no-repeat;
  893. background-position: center;
  894. }
  895. .jqx-tabs-arrow-left-material-purple, .jqx-menu-item-arrow-left-selected-material-purple, .jqx-menu-item-arrow-top-left, .jqx-icon-arrow-left-material-purple, .jqx-icon-arrow-down-left-material-purple, .jqx-icon-arrow-left-selected-material-purple {
  896. background-image: url('images/material-icon-left.png');
  897. background-repeat: no-repeat;
  898. background-position: center;
  899. }
  900. .jqx-widget-material-purple .jqx-grid-group-collapse-material-purple, .jqx-grid-group-collapse-material-purple, .jqx-tabs-arrow-right-material-purple, .jqx-menu-item-arrow-right-selected-material-purple, .jqx-menu-item-arrow-top-right-material-purple, .jqx-icon-arrow-right-material-purple, .jqx-icon-arrow-right-hover-material-purple, .jqx-icon-arrow-right-selected-material-purple {
  901. background-image: url('images/material-icon-right.png');
  902. background-repeat: no-repeat;
  903. background-position: center;
  904. }
  905. .jqx-tree-item-arrow-collapse-rtl-material-purple, .jqx-tree-item-arrow-collapse-hover-rtl-material-purple {
  906. background-image: url(images/material-icon-left.png);
  907. }
  908. .jqx-menu-item-arrow-left-selected-material-purple {
  909. background-image: url('images/material-icon-left.png');
  910. background-repeat: no-repeat;
  911. background-position: center;
  912. }
  913. .jqx-menu-item-arrow-right-selected-material-purple {
  914. background-image: url('images/material-icon-right.png');
  915. background-repeat: no-repeat;
  916. background-position: center;
  917. }
  918. .jqx-input-button-content-material-purple {
  919. font-size: 10px;
  920. }
  921. .jqx-widget .jqx-grid-column-header-cell-material-purple {
  922. padding-top: 8px;
  923. padding-bottom: 8px;
  924. height:30px;
  925. }
  926. .jqx-widget .jqx-grid-row-cell-material-purple {
  927. padding-top: 8px;
  928. padding-bottom: 8px;
  929. height:30px;
  930. }
  931. .jqx-widget .jqx-grid-cell, .jqx-widget .jqx-grid-column-header, .jqx-widget .jqx-grid-group-cell {
  932. border-color: #E0E0E0;
  933. }
  934. .jqx-combobox-material-purple .jqx-icon-close-material-purple {
  935. background-image:url(images/close_white.png)
  936. }
  937. .jqx-combobox-material-purple, .jqx-input-material-purple {
  938. border-color: #E0E0E0;
  939. color: #555555;
  940. background-color: #ffffff;
  941. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  942. -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  943. }
  944. .jqx-combobox-content-material-purple,
  945. .jqx-datetimeinput-content-material-purple
  946. {
  947. border-color: transparent;
  948. }
  949. .jqx-combobox-arrow-normal-material-purple {
  950. background: #fff;
  951. border-color: transparent;
  952. }
  953. .jqx-combobox-content-focus-material-purple,
  954. .jqx-combobox-state-focus-material-purple,
  955. .jqx-numberinput-focus-material-purple {
  956. outline: none;
  957. }
  958. .jqx-input-group-material-purple {
  959. position: relative;
  960. display: inline-block;
  961. overflow: visible;
  962. border: none;
  963. box-shadow: none;
  964. }
  965. .jqx-input-group-material-purple input {
  966. width: 100%;
  967. height: 100%;
  968. box-sizing: border-box;
  969. }
  970. .jqx-input-group-material-purple textarea {
  971. width: 100%;
  972. height: 100%;
  973. outline: none;
  974. resize: none;
  975. border-left: none;
  976. border-right: none;
  977. border-top: none;
  978. border-bottom-color: #e0e0e0;
  979. }
  980. .jqx-numberinput-material-purple,
  981. .jqx-maskedinput-material-purple
  982. {
  983. position:relative;
  984. }
  985. .jqx-numberinput-material-purple input {
  986. height:100% !important;
  987. }
  988. .jqx-input-material-purple.jqx-validator-error-element {
  989. border-color: transparent !important;
  990. border-bottom: 1px solid #df2227 !important;
  991. }
  992. .jqx-input-material-purple input,
  993. .jqx-dropdownlist-state-normal-material-purple,
  994. .jqx-combobox-state-normal-material-purple,
  995. .jqx-datetimeinput-material-purple,
  996. .jqx-numberinput-material-purple,
  997. .jqx-maskedinput-material-purple
  998. {
  999. background: #fff;
  1000. border-color: #fff;
  1001. border-radius: 0;
  1002. box-shadow: none;
  1003. border-bottom: 1px solid #E0E0E0;
  1004. outline: none;
  1005. }
  1006. .jqx-datetimeinput-material-purple .jqx-action-button-material-purple,
  1007. .jqx-datetimeinput-material-purple .jqx-action-button-rtl-material-purple
  1008. {
  1009. background-color: transparent;
  1010. border-color: transparent;
  1011. }
  1012. .jqx-datetimeinput-material-purple, .jqx-datetimeinput-material-purple > div,
  1013. .jqx-numberinput-material-purple, .jqx-numberinput-material-purple > div,
  1014. .jqx-maskedinput-material-purple, .jqx-maskedinput-material-purple > div,
  1015. .jqx-dropdownlist-state-normal-material-purple, .jqx-dropdownlist-state-normal-material-purple > div, .jqx-dropdownlist-state-normal-material-purple > div > div,
  1016. .jqx-combobox-state-normal-material-purple, .jqx-combobox-state-normal-material-purple > div, .jqx-combobox-state-normal-material-purple > div > div {
  1017. overflow: visible !important;
  1018. }
  1019. .jqx-input-material-purple input:focus {
  1020. border-radius: 0;
  1021. box-shadow: none;
  1022. }
  1023. .jqx-input-material-purple input, input[type="text"].jqx-input-material-purple, input[type="password"].jqx-input-material-purple, input[type="text"].jqx-widget-content-material-purple, input[type="textarea"].jqx-widget-content-material-purple, textarea.jqx-input-material-purple {
  1024. font-size: 14px;
  1025. resize: none;
  1026. background: #fff;
  1027. border: none;
  1028. border-radius: 0;
  1029. box-sizing:border-box;
  1030. box-shadow: none;
  1031. border-bottom: 1px solid #E0E0E0;
  1032. }
  1033. .jqx-input-label {
  1034. visibility:inherit;
  1035. }
  1036. .jqx-input-bar{
  1037. visibility:inherit;
  1038. }
  1039. input:focus ~ .jqx-input-label-material-purple,
  1040. textarea:focus ~ .jqx-input-label-material-purple,
  1041. .jqx-input-widget-material-purple[hint=true] .jqx-input-label,
  1042. .jqx-text-area-material-purple[hint=true] .jqx-input-label,
  1043. .jqx-dropdownlist-state-selected-material-purple .jqx-input-label,
  1044. .jqx-dropdownlist-state-normal-material-purple[hint=true] .jqx-input-label,
  1045. .jqx-combobox-state-normal-material-purple[hint=true] .jqx-input-label,
  1046. .jqx-combobox-material-purple .jqx-input-label.focused,
  1047. .jqx-dropdownlist-material-purple .jqx-input-label.focused,
  1048. .jqx-datetimeinput-material-purple[hint=true] .jqx-input-label,
  1049. .jqx-maskedinput-material-purple[hint=true] .jqx-input-label,
  1050. .jqx-numberinput-material-purple[hint=true] .jqx-input-label,
  1051. .jqx-formattedinput-material-purple[hint=true] .jqx-input-label
  1052. {
  1053. top: -15px;
  1054. font-size: 12px;
  1055. color: #6200EE;
  1056. }
  1057. .jqx-dropdownlist-material-purple[default-placeholder="true"] .jqx-input-label {
  1058. visibility: hidden;
  1059. }
  1060. input:focus ~ .jqx-input-bar:before,
  1061. textarea:focus ~ .jqx-input-bar:before,
  1062. .jqx-dropdownlist-state-selected-material-purple .jqx-input-bar:before,
  1063. .jqx-dropdownlist-material-purple .jqx-input-bar.focused:before,
  1064. .jqx-complex-input-group-material-purple .jqx-input-bar.focused::before,
  1065. .jqx-combobox-material-purple .jqx-input-bar.focused:before,
  1066. .jqx-combobox-state-selected-material-purple .jqx-input-bar:before {
  1067. width: 100%;
  1068. }
  1069. .jqx-complex-input-group-material-purple .jqx-fill-state-normal-material-purple {
  1070. border-color: #fafafa;
  1071. }
  1072. input[type="password"] {
  1073. letter-spacing: 0.3em;
  1074. }
  1075. .jqx-input-widget-material-purple.jqx-rtl > input {
  1076. direction: rtl
  1077. }
  1078. .jqx-input-label-material-purple {
  1079. color: #E0E0E0;
  1080. font-size: 14px;
  1081. font-weight: normal;
  1082. position: absolute;
  1083. pointer-events: none;
  1084. left: 2px;
  1085. top:10px;
  1086. top: calc(50% - 7px);
  1087. transition: 300ms ease all;
  1088. }
  1089. .jqx-input-label.initial {
  1090. transition: none;
  1091. }
  1092. .jqx-input-bar {
  1093. position: relative;
  1094. display: block;
  1095. z-index:1;
  1096. }
  1097. .jqx-input-bar-material-purple:before {
  1098. content: '';
  1099. height: 2px;
  1100. width: 0;
  1101. bottom: 0px;
  1102. position: absolute;
  1103. background: #6200EE;
  1104. transition: 300ms ease all;
  1105. left: 0%;
  1106. }
  1107. .jqx-formatted-input-spin-button-material-purple, .jqx-input-group-addon-material-purple {
  1108. border-color: #fff;
  1109. background: #fff;
  1110. }
  1111. .jqx-dropdownlist-state-selected-material-purple,
  1112. .jqx-combobox-state-selected-material-purple {
  1113. color: #6200EE;
  1114. }
  1115. .jqx-dropdownlist-state-normal-material-purple .jqx-icon-arrow-down-material-purple,
  1116. .jqx-combobox-state-normal-material-purple .jqx-icon-arrow-down-material-purple,
  1117. .sorticon.descending .jqx-grid-column-sorticon-material-purple,
  1118. .jqx-tree-item-arrow-expand-material-purple,
  1119. .jqx-expander-header-material-purple .jqx-icon-arrow-down
  1120. {
  1121. transform: rotate(0deg);
  1122. transition: transform 0.2s ease-out;
  1123. }
  1124. .jqx-expander-header-material-purple .jqx-icon-arrow-up {
  1125. transform: rotate(180deg);
  1126. transition: transform 0.2s ease-out;
  1127. background-image: url('images/material-icon-down.png');
  1128. }
  1129. .jqx-tree-item-arrow-collapse-material-purple
  1130. {
  1131. transform: rotate(-90deg);
  1132. background-image: url('images/material-icon-down.png');
  1133. background-repeat: no-repeat;
  1134. background-position: center;
  1135. transition: transform 0.2s ease-out;
  1136. }
  1137. .jqx-dropdownlist-state-selected-material-purple .jqx-icon-arrow-down-material-purple,
  1138. .jqx-combobox-state-selected-material-purple .jqx-icon-arrow-down-material-purple,
  1139. .sorticon.ascending .jqx-grid-column-sorticon-material-purple
  1140. {
  1141. transform: rotate(180deg);
  1142. transition: transform 0.2s ease-out;
  1143. left: -1px;
  1144. }
  1145. .jqx-combobox-state-selected-material-purple .jqx-icon-arrow-down-material-purple{
  1146. left:-1px;
  1147. }
  1148. .jqx-listbox-container {
  1149. margin-top: 1px;
  1150. }
  1151. input[type="text"].jqx-input-material-purple:-moz-placeholder, input[type="text"].jqx-widget-content-material-purple:-moz-placeholder, input[type="textarea"].jqx-widget-content-material-purple:-moz-placeholder, textarea.jqx-input-material-purple:-moz-placeholder {
  1152. color: #999999;
  1153. }
  1154. input[type="text"].jqx-input-material-purple:-webkit-input-placeholder, input[type="text"].jqx-widget-content-material-purple:-webkit-input-placeholder, input[type="textarea"].jqx-widget-content-material-purple:-webkit-input-placeholder, textarea.jqx-input-material-purple:-webkit-input-placeholder {
  1155. color: #999999;
  1156. }
  1157. input[type="text"].jqx-input-material-purple:-ms-input-placeholder, input[type="text"].jqx-widget-content-material-purple:-ms-input-placeholder, input[type="textarea"].jqx-widget-content-material-purple:-ms-input-placeholder, textarea.jqx-input-material-purple:-ms-input-placeholder {
  1158. color: #999999;
  1159. }
  1160. .jqx-combobox-content-focus-material-purple, .jqx-combobox-state-focus-material-purple, .jqx-fill-state-focus-material-purple,
  1161. .jqx-numberinput-focus-material-purple {
  1162. outline: none;
  1163. }
  1164. .jqx-popup-material-purple.jqx-fill-state-focus-material-purple {
  1165. outline: none;
  1166. border-color: #E0E0E0 !important;
  1167. }
  1168. .jqx-datetimeinput-content, .jqx-datetimeinput-container {
  1169. overflow: visible !important;
  1170. }
  1171. .jqx-text-area-material-purple, .jqx-text-area-material-purple > div {
  1172. overflow:visible !important;
  1173. }
  1174. .jqx-text-area-element-material-purple {
  1175. box-sizing: border-box;
  1176. }
  1177. .jqx-pivotgrid-content-wrapper.jqx-fill-state-normal-material-purple {
  1178. border-color: #E0E0E0;
  1179. }
  1180. .jqx-grid-cell-material-purple.jqx-grid-cell-selected-material-purple > .jqx-grid-group-expand-material-purple {
  1181. background-image: url('images/material-icon-down.png');
  1182. background-repeat: no-repeat;
  1183. background-position: center;
  1184. }
  1185. .jqx-grid-cell-material-purple.jqx-grid-cell-selected-material-purple > .jqx-grid-group-collapse-material-purple {
  1186. background-image: url('images/material-icon-right.png');
  1187. background-repeat: no-repeat;
  1188. background-position: center;
  1189. }
  1190. .jqx-grid-cell-material-purple.jqx-grid-cell-selected-material-purple > .jqx-grid-group-collapse-rtl-material-purple {
  1191. background-image: url('images/material-icon-left.png');
  1192. background-repeat: no-repeat;
  1193. background-position: center;
  1194. }
  1195. .jqx-grid-cell-material-purple.jqx-grid-cell-selected-material-purple > .jqx-grid-group-expand-rtl-material-purple {
  1196. background-image: url('images/material-icon-down.png');
  1197. background-repeat: no-repeat;
  1198. background-position: center;
  1199. }
  1200. .jqx-tabs-title-selected-top-material-purple, .jqx-tabs-selection-tracker-top-material-purple {
  1201. border-color: transparent;
  1202. filter: none;
  1203. background: #fff;
  1204. color: #333;
  1205. -webkit-box-shadow: none;
  1206. -moz-box-shadow: none;
  1207. box-shadow: none;
  1208. }
  1209. .jqx-tabs-title-material-purple, .jqx-ribbon-item-material-purple {
  1210. color: #333;
  1211. }
  1212. .jqx-tabs-title-selected-bottom-material-purple,
  1213. .jqx-tabs-title-selected-top-material-purple
  1214. {
  1215. color: #6200EE;
  1216. font-weight:500;
  1217. padding-top:5px;
  1218. padding-bottom:5px;
  1219. }
  1220. .jqx-tabs-title.jqx-fill-state-hover-material-purple {
  1221. border-color: transparent;
  1222. }
  1223. .jqx-ribbon-item-material-purple {
  1224. cursor: pointer;
  1225. }
  1226. .jqx-ribbon-item-selected-material-purple {
  1227. color: #6200EE;
  1228. font-weight:500;
  1229. border-color: transparent;
  1230. }
  1231. .jqx-ribbon-item-hover-material-purple {
  1232. background: transparent;
  1233. }
  1234. .jqx-ribbon-header-top-material-purple {
  1235. border-color: transparent;
  1236. border-bottom-color: #E0E0E0;
  1237. }
  1238. .jqx-ribbon-header-bottom-material-purple {
  1239. border-color: transparent;
  1240. border-top-color: #E0E0E0;
  1241. }
  1242. .jqx-ribbon-header-right-material-purple {
  1243. border-color: transparent;
  1244. border-left-color:#E0E0E0;
  1245. }
  1246. .jqx-ribbon-header-left-material-purple {
  1247. border-color: transparent;
  1248. border-right-color:#E0E0E0;
  1249. }
  1250. .jqx-tabs-title-selected-bottom-material-purple, .jqx-tabs-selection-tracker-bottom-material-purple {
  1251. border-color: transparent;
  1252. border-top: 1px solid #fff;
  1253. filter: none;
  1254. background: #fff;
  1255. -webkit-box-shadow: none;
  1256. -moz-box-shadow: none;
  1257. box-shadow: none;
  1258. }
  1259. .jqx-tabs-material-purple, .jqx-ribbon-material-purple {
  1260. border-color: transparent;
  1261. }
  1262. .jqx-tabs-header-material-purple, .jqx-ribbon-header-material-purple {
  1263. background: transparent;
  1264. }
  1265. .jqx-tabs-position-bottom .jqx-tabs-header-material-purple {
  1266. border-color: transparent;
  1267. }
  1268. .jqx-layout-material-purple .jqx-tabs-header-material-purple, .jqx-layout-material-purple .jqx-ribbon-header-material-purple {
  1269. background: #fff;
  1270. border-color: #E0E0E0;
  1271. }
  1272. .jqx-tabs-title-bottom {
  1273. border-color: transparent;
  1274. }
  1275. .jqx-tabs-title-hover-top-material-purple, .jqx-tabs-title-hover-bottom-material-purple, .jqx-tabs-header-material-purple {
  1276. -webkit-box-shadow: none !important;
  1277. -moz-box-shadow: none !important;
  1278. box-shadow: none !important;
  1279. background: transparent;
  1280. }
  1281. .jqx-tabs-content-material-purple {
  1282. box-sizing: border-box;
  1283. border: 1px solid #E0E0E0;
  1284. border-top-color: transparent;
  1285. padding:5px;
  1286. }
  1287. .jqx-tabs-bar-material-purple {
  1288. position: absolute;
  1289. bottom: 0;
  1290. background: #6200EE;
  1291. height: 2px;
  1292. z-index:10;
  1293. transition: .5s cubic-bezier(.35,0,.25,1);
  1294. }
  1295. .jqx-tabs-bar-material-purple.vertical {
  1296. width: 2px;
  1297. }
  1298. .jqx-tabs-position-bottom .jqx-tabs-bar-material-purple {
  1299. top: 0;
  1300. }
  1301. .jqx-layout-material-purple {
  1302. background-color: #cccccc;
  1303. }
  1304. .jqx-kanban-column-header-collapsed-material-purple {
  1305. background: -moz-linear-gradient(0deg, rgba(248,248,248,1) 0%, rgba(234,234,234,1) 100%); /* ff3.6+ */
  1306. background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(248,248,248,1)), color-stop(100%, rgba(234,234,234,1))); /* safari4+,chrome */
  1307. background: -webkit-linear-gradient(0deg, rgba(248,248,248,1) 0%, rgba(234,234,234,1) 100%); /* safari5.1+,chrome10+ */
  1308. background: -o-linear-gradient(0deg, rgba(248,248,248,1) 0%, rgba(234,234,234,1) 100%); /* opera 11.10+ */
  1309. background: -ms-linear-gradient(0deg, rgba(248,248,248,1) 0%, rgba(234,234,234,1) 100%); /* ie10+ */
  1310. background: linear-gradient(90deg, rgba(248,248,248,1) 0%, rgba(234,234,234,1) 100%); /* w3c */
  1311. }
  1312. .jqx-calendar-material-purple > div {
  1313. padding: 10px;
  1314. box-sizing: border-box;
  1315. }
  1316. .jqx-calendar-cell-material-purple {
  1317. border-radius: 50%;
  1318. font-size:12px;
  1319. }
  1320. .jqx-calendar-cell-year-material-purple,
  1321. .jqx-calendar-cell-decade-material-purple {
  1322. border-radius: 25%;
  1323. }
  1324. .jqx-calendar-title-content-material-purple {
  1325. font-weight:bold;
  1326. }
  1327. .jqx-calendar-column-cell-material-purple {
  1328. color: rgba(0,0,0,.38);
  1329. font-size:12px;
  1330. }
  1331. .jqx-grid-column-menubutton-material-purple {
  1332. background-image: url('images/material-icon-down.png');
  1333. }
  1334. .jqx-tabs-close-button-material-purple {
  1335. background-image: url(images/close.png);
  1336. background-repeat: no-repeat;
  1337. background-position: center;
  1338. }
  1339. .jqx-tabs-close-button-selected-material-purple {
  1340. background-image: url(images/close.png);
  1341. background-repeat: no-repeat;
  1342. background-position: center;
  1343. }
  1344. .jqx-tabs-close-button-hover-material-purple {
  1345. background-image: url(images/close.png);
  1346. background-repeat: no-repeat;
  1347. background-position: center;
  1348. }
  1349. .jqx-scrollbar-button-state-pressed-material-purple .jqx-icon-arrow-up-selected-material-purple {
  1350. background-image: url('images/material-icon-up.png');
  1351. background-repeat: no-repeat;
  1352. background-position: center;
  1353. }
  1354. .jqx-scrollbar-button-state-pressed-material-purple .jqx-icon-arrow-down-selected-material-purple {
  1355. background-image: url('images/material-icon-down.png');
  1356. background-repeat: no-repeat;
  1357. background-position: center;
  1358. }
  1359. .jqx-scrollbar-button-state-pressed-material-purple .jqx-icon-arrow-left-selected-material-purple {
  1360. background-image: url('images/material-icon-left.png');
  1361. background-repeat: no-repeat;
  1362. background-position: center;
  1363. }
  1364. .jqx-scrollbar-button-state-pressed-material-purple .jqx-icon-arrow-right-selected-material-purple {
  1365. background-image: url('images/material-icon-right.png');
  1366. background-repeat: no-repeat;
  1367. background-position: center;
  1368. }
  1369. .jqx-grid-cell-material-purple.jqx-grid-cell-selected-material-purple > .jqx-grid-group-expand-material-purple {
  1370. background-image: url('images/material-icon-down.png');
  1371. background-repeat: no-repeat;
  1372. background-position: center;
  1373. }
  1374. .jqx-grid-cell-material-purple.jqx-grid-cell-selected-material-purple > .jqx-grid-group-collapse-material-purple {
  1375. background-image: url('images/material-icon-right.png');
  1376. background-repeat: no-repeat;
  1377. background-position: center;
  1378. }
  1379. .jqx-grid-cell-material-purple.jqx-grid-cell-selected-material-purple > .jqx-grid-group-collapse-rtl-material-purple {
  1380. background-image: url('images/material-icon-left.png');
  1381. background-repeat: no-repeat;
  1382. background-position: center;
  1383. }
  1384. .jqx-grid-cell-material-purple.jqx-grid-cell-selected-material-purple > .jqx-grid-group-expand-rtl-material-purple {
  1385. background-image: url('images/material-icon-down.png');
  1386. background-repeat: no-repeat;
  1387. background-position: center;
  1388. }
  1389. .jqx-grid-group-collapse-material-purple {
  1390. background-image: url(images/material-icon-right.png);
  1391. background-position: 50% 50%;
  1392. background-repeat: no-repeat;
  1393. }
  1394. .jqx-grid-group-collapse-rtl-material-purple {
  1395. padding-right: 0px;
  1396. background-image: url(images/material-icon-left.png);
  1397. background-position: 50% 50%;
  1398. background-repeat: no-repeat;
  1399. }
  1400. .jqx-grid-group-expand-material-purple, .jqx-grid-group-expand-rtl-material-purple {
  1401. padding-right: 0px;
  1402. background-image: url(images/material-icon-down.png);
  1403. background-position: 50% 50%;
  1404. background-repeat: no-repeat;
  1405. }
  1406. .jqx-grid-cell-filter-row-material-purple {
  1407. background-color: #fafafa;
  1408. }
  1409. .jqx-icon-arrow-first-material-purple {
  1410. background-image: url('images/material-icon-first.png');
  1411. background-repeat: no-repeat;
  1412. background-position: center;
  1413. }
  1414. .jqx-icon-arrow-last-material-purple {
  1415. background-image: url('images/material-icon-last.png');
  1416. background-repeat: no-repeat;
  1417. background-position: center;
  1418. }
  1419. .jqx-icon-arrow-first-hover-material-purple {
  1420. background-image: url('images/material-icon-first.png');
  1421. background-repeat: no-repeat;
  1422. background-position: center;
  1423. }
  1424. .jqx-icon-arrow-last-hover-material-purple {
  1425. background-image: url('images/material-icon-last.png');
  1426. background-repeat: no-repeat;
  1427. background-position: center;
  1428. }
  1429. .jqx-icon-arrow-first-selected-material-purple {
  1430. background-image: url('images/material-icon-first.png');
  1431. background-repeat: no-repeat;
  1432. background-position: center;
  1433. }
  1434. .jqx-icon-arrow-last-selected-material-purple {
  1435. background-image: url('images/material-icon-last.png');
  1436. background-repeat: no-repeat;
  1437. background-position: center;
  1438. }
  1439. .jqx-fill-state-pressed-material-purple .jqx-icon-arrow-first-selected-material-purple {
  1440. background-image: url('images/material-icon-first-white.png');
  1441. background-repeat: no-repeat;
  1442. background-position: center;
  1443. }
  1444. .jqx-fill-state-pressed-material-purple .jqx-icon-arrow-last-selected-material-purple {
  1445. background-image: url('images/material-icon-last-white.png');
  1446. background-repeat: no-repeat;
  1447. background-position: center;
  1448. }
  1449. .jqx-fill-state-pressed-material-purple .jqx-icon-arrow-left-selected-material-purple {
  1450. background-image: url('images/material-icon-left-white.png');
  1451. background-repeat: no-repeat;
  1452. background-position: center;
  1453. }
  1454. .jqx-fill-state-pressed-material-purple .jqx-icon-arrow-right-selected-material-purple {
  1455. background-image: url('images/material-icon-right-white.png');
  1456. background-repeat: no-repeat;
  1457. background-position: center;
  1458. }
  1459. .jqx-primary .jqx-icon-arrow-down-material-purple, .jqx-warning .jqx-icon-arrow-down-material-purple, .jqx-danger .jqx-icon-arrow-down-material-purple, .jqx-success .jqx-icon-arrow-down-material-purple, .jqx-info .jqx-icon-arrow-down-material-purple {
  1460. background-image: url('images/material-icon-down.png');
  1461. }
  1462. .jqx-primary .jqx-icon-arrow-down-selected-material-purple, .jqx-warning .jqx-icon-arrow-down-selected-material-purple, .jqx-danger .jqx-icon-arrow-down-selected-material-purple, .jqx-success .jqx-icon-arrow-down-selected-material-purple, .jqx-info .jqx-icon-arrow-down-selected-material-purple {
  1463. background-image: url('images/material-icon-down.png');
  1464. }
  1465. .jqx-primary .jqx-icon-arrow-down-hover-material-purple, .jqx-warning .jqx-icon-arrow-down-hover-material-purple, .jqx-danger .jqx-icon-arrow-down-hover-material-purple, .jqx-success .jqx-icon-arrow-down-hover-material-purple, .jqx-info .jqx-icon-arrow-down-hover-material-purple {
  1466. background-image: url('images/material-icon-down.png');
  1467. }
  1468. .jqx-primary .jqx-icon-arrow-up-material-purple, .jqx-warning .jqx-icon-arrow-up-material-purple, .jqx-danger .jqx-icon-arrow-up-material-purple, .jqx-success .jqx-icon-arrow-up-material-purple, .jqx-info .jqx-icon-arrow-up-material-purple {
  1469. background-image: url('images/material-icon-up.png');
  1470. }
  1471. .jqx-primary .jqx-icon-arrow-up-selected-material-purple, .jqx-warning .jqx-icon-arrow-up-selected-material-purple, .jqx-danger .jqx-icon-arrow-up-selected-material-purple, .jqx-success .jqx-icon-arrow-up-selected-material-purple, .jqx-info .jqx-icon-arrow-up-selected-material-purple {
  1472. background-image: url('images/material-icon-up.png');
  1473. }
  1474. .jqx-primary .jqx-icon-arrow-up-hover-material-purple, .jqx-warning .jqx-icon-arrow-up-hover-material-purple, .jqx-danger .jqx-icon-arrow-up-hover-material-purple, .jqx-success .jqx-icon-arrow-up-hover-material-purple, .jqx-info .jqx-icon-arrow-up-hover-material-purple {
  1475. background-image: url('images/material-icon-up.png');
  1476. }
  1477. .jqx-primary .jqx-icon-arrow-left-material-purple, .jqx-warning .jqx-icon-arrow-left-material-purple, .jqx-danger .jqx-icon-arrow-left-material-purple, .jqx-success .jqx-icon-arrow-left-material-purple, .jqx-info .jqx-icon-arrow-left-material-purple {
  1478. background-image: url('images/material-icon-left.png');
  1479. }
  1480. .jqx-primary .jqx-icon-arrow-left-selected-material-purple, .jqx-warning .jqx-icon-arrow-left-selected-material-purple, .jqx-danger .jqx-icon-arrow-left-selected-material-purple, .jqx-success .jqx-icon-arrow-left-selected-material-purple, .jqx-info .jqx-icon-arrow-left-selected-material-purple {
  1481. background-image: url('images/material-icon-left.png');
  1482. }
  1483. .jqx-primary .jqx-icon-arrow-left-hover-material-purple, .jqx-warning .jqx-icon-arrow-left-hover-material-purple, .jqx-danger .jqx-icon-arrow-left-hover-material-purple, .jqx-success .jqx-icon-arrow-left-hover-material-purple, .jqx-info .jqx-icon-arrow-left-hover-material-purple {
  1484. background-image: url('images/material-icon-left.png');
  1485. }
  1486. .jqx-primary .jqx-icon-arrow-right-material-purple, .jqx-warning .jqx-icon-arrow-right-material-purple, .jqx-danger .jqx-icon-arrow-right-material-purple, .jqx-success .jqx-icon-arrow-right-material-purple, .jqx-info .jqx-icon-arrow-right-material-purple {
  1487. background-image: url('images/material-icon-right.png');
  1488. }
  1489. .jqx-primary .jqx-icon-arrow-right-selected-material-purple, .jqx-warning .jqx-icon-arrow-right-selected-material-purple, .jqx-danger .jqx-icon-arrow-right-selected-material-purple, .jqx-success .jqx-icon-arrow-right-selected-material-purple, .jqx-info .jqx-icon-arrow-right-selected-material-purple {
  1490. background-image: url('images/material-icon-right.png');
  1491. }
  1492. .jqx-primary .jqx-icon-arrow-right-hover-material-purple, .jqx-warning .jqx-icon-arrow-right-hover-material-purple, .jqx-danger .jqx-icon-arrow-right-hover-material-purple, .jqx-success .jqx-icon-arrow-right-hover-material-purple, .jqx-info .jqx-icon-arrow-right-hover-material-purple {
  1493. background-image: url('images/material-icon-right.png');
  1494. }
  1495. /* Ripple effect */
  1496. .ripple {
  1497. position: relative;
  1498. transform: translate3d(0, 0, 0);
  1499. overflow:hidden;
  1500. }
  1501. .ink {
  1502. display: block;
  1503. position: absolute;
  1504. pointer-events: none;
  1505. border-radius: 0%;
  1506. transform: scaleX(0);
  1507. background: rgba(98,0,238,0.5);
  1508. opacity: 0.25;
  1509. }
  1510. .outlined .ink, .flat .ink {
  1511. background: rgba(98,0,238,0.5);
  1512. overflow:hidden;
  1513. }
  1514. .ink.animate {
  1515. animation: ripple .7s ease;
  1516. animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  1517. }
  1518. .jqx-checkbox-material-purple .ripple,
  1519. .jqx-radiobutton-material-purple .ripple
  1520. {
  1521. overflow:visible;
  1522. }
  1523. .jqx-checkbox-material-purple .ink,
  1524. .jqx-radiobutton-material-purple .ink
  1525. {
  1526. transform: scale(0);
  1527. background: #6200EE;
  1528. border-radius: 50%;
  1529. }
  1530. .jqx-checkbox-material-purple .ink.animate,
  1531. .jqx-radiobutton-material-purple .ink.animate
  1532. {
  1533. animation: checkRipple 0.3s ease;
  1534. animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  1535. }
  1536. .jqx-checkbox-material-purple .ink.active,
  1537. .jqx-radiobutton-material-purple .ink.active
  1538. {
  1539. opacity: 0.2;
  1540. transform: scale(2);
  1541. }
  1542. .jqx-checkbox-default-material-purple.active .ink,
  1543. .jqx-radiobutton-default-material-purple.active .ink
  1544. {
  1545. opacity: 0.2;
  1546. transform: scale(2);
  1547. }
  1548. /* Ripple effect */
  1549. .buttonRipple {
  1550. background-position: center;
  1551. transition: background 0.8s;
  1552. }
  1553. .buttonRipple:hover {
  1554. background: #6200EE radial-gradient(circle, transparent 1%, #6200EE 1%) center/15000%;
  1555. }
  1556. .buttonRipple:active {
  1557. background-color: #ECE0FD;
  1558. background-size: 100%;
  1559. transition: background 0s;
  1560. }
  1561. .buttonRipple:active:not(:hover) {
  1562. color: #333;
  1563. }
  1564. @keyframes ripple {
  1565. 100% {
  1566. opacity: 0;
  1567. transform: scale(5);
  1568. animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  1569. }
  1570. }
  1571. @keyframes checkRipple {
  1572. 100% {
  1573. opacity: 0.2;
  1574. transform: scale(2);
  1575. animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  1576. }
  1577. }
  1578. .jqx-fill-state-pressed-material-purple-purple .jqx-icon-delete-material-purple
  1579. {
  1580. background-image: url('images/icon-delete-white.png');
  1581. }
  1582. .jqx-fill-state-pressed-material-purple .jqx-icon-edit-material-purple
  1583. {
  1584. background-image: url('images/icon-edit-white.png');
  1585. }
  1586. .jqx-fill-state-pressed-material-purple .jqx-icon-save-material-purple
  1587. {
  1588. background-image: url('images/icon-save-white.png');
  1589. }
  1590. .jqx-fill-state-pressed-material-purple .jqx-icon-cancel-material-purple
  1591. {
  1592. background-image: url('images/icon-cancel-white.png');
  1593. }
  1594. .jqx-fill-state-pressed-material-purple .jqx-icon-search-material-purple
  1595. {
  1596. background-image: url(images/search_white.png);
  1597. }
  1598. .jqx-fill-state-pressed-material-purple .jqx-icon-plus-material-purple
  1599. {
  1600. background-image: url(images/plus_white.png);
  1601. }
  1602. .jqx-fill-state-pressed-material-purple .jqx-menu-minimized-button-material-purple {
  1603. background-image: url('images/icon-menu-minimized-white.png');
  1604. }
  1605. .jqx-fill-state-hover-material-purple .jqx-editor-toolbar-icon-material-purple, .jqx-fill-state-pressed-material-purple .jqx-editor-toolbar-icon-material-purple {
  1606. background: url('images/html_editor_white.png') no-repeat;
  1607. }
  1608. .jqx-fill-state-hover-material-purple .jqx-editor-toolbar-icon-fontsize-material-purple,
  1609. .jqx-fill-state-pressed-material-purple .jqx-editor-toolbar-icon-fontsize-material-purple,
  1610. .jqx-fill-state-hover-material-purple .jqx-editor-toolbar-icon-forecolor-material-purple,
  1611. .jqx-fill-state-pressed-material-purple .jqx-editor-toolbar-icon-forecolor-material-purple
  1612. {
  1613. background: url('images/html_editor.png') no-repeat;
  1614. }
  1615. .jqx-editor-toolbar-button-material-purple{
  1616. border-color: #ddd;
  1617. box-shadow: none !important;
  1618. color: #333;
  1619. }
  1620. /*applied to the timepicker*/
  1621. .jqx-needle-central-circle-material-purple {
  1622. fill: rgb(98, 0, 238);
  1623. }
  1624. .jqx-needle-material-purple {
  1625. fill: rgb(98, 0, 238);
  1626. }
  1627. .jqx-time-picker .jqx-header .jqx-selected-material-purple:focus {
  1628. outline: 2px solid rgba(98, 0, 238, 0.5);
  1629. box-shadow: 0px 0px 4px 2px rgba(98, 0, 238, 0.125);
  1630. }
  1631. .jqx-svg-picker-material-purple:focus {
  1632. border: 1px solid rgb(98, 0, 238) !important;
  1633. }