www/jqwidgets/styles/jqx.blue.css

changeset 733
67bf19c50fcc
equal deleted inserted replaced
732:db4de4f37b65 733:67bf19c50fcc
1 
2 :root {
3 --jqx-grid-row-height: 36px;
4 --jqx-grid-column-height: 48px;
5 --jqx-grid-show-column-lines: 0;
6 --jqx-list-item-height: -1;
7 --jqx-grid-filter-menu-items-height: 30px;
8 --jqx-dropdown-animation: transform;
9 --jqx-datetimeinput-dropdown-height: 280px;
10 --jqx-datetimeinput-dropdown-width: 280px;
11 --jqx-calendar-header-height: 40px;
12 --jqx-calendar-title-height: 49px;
13 --jqx-icon-calendar: '\e829'; /* Code of calendar icon */
14 --jqx-icon-filter: '\f0b0'; /* Code of filter icon */
15 --jqx-icon-menu: '\f0c9'; /* Code of menu icon */
16 --jqx-icon-check: '\e908'; /* Code of check icon */
17 --jqx-icon-first-page: '\e900'; /* Code of first page icon */
18 --jqx-icon-arrow-down: '\e901'; /* Code of down arrow icon */
19 --jqx-icon-arrow-left: '\e902'; /* Code of left arrow icon */
20 --jqx-icon-arrow-right: '\e903'; /* Code of right arrow icon */
21 --jqx-icon-arrow-up: '\e904'; /* Code of up arrow icon */
22 --jqx-icon-arrow-down-filled: '\e812'; /* Code of filled down arrow icon */
23 --jqx-icon-arrow-left-filled: '\e816'; /* Code of filled left arrow icon */
24 --jqx-icon-arrow-right-filled: '\e81e'; /* Code of filled right arrow icon */
25 --jqx-icon-arrow-up-filled: '\e815'; /* Code of filled up arrow icon */
26 --jqx-icon-visibility: '\e90d'; /* Code of visibility icon */
27 --jqx-icon-visibility-off: '\e90e'; /* Code of visibility off icon */
28 --jqx-icon-last-page: '\e905'; /* Code of last page icon */
29 --jqx-icon-close: '\e80d'; /* Code of close icon */
30 --jqx-icon-search: '\e828'; /* Code of search icon */
31 --jqx-primary-rgb: 0, 92, 153;
32 --jqx-primary: rgb(var(--jqx-primary-rgb));
33 --jqx-primary-color: #fff;
34 --jqx-background: #fff;
35 --jqx-background-color: rgba(0,0,0, .88);
36 --jqx-background-hover-rgb: 225, 225, 225;
37 --jqx-background-hover: rgb(var(--jqx-background-hover-rgb));
38 --jqx-background-color-hover: rgba(0,0,0,.54);
39 --jqx-surface-rgb: 155, 190, 65;
40 --jqx-surface: rgb(var(--jqx-surface-rgb));
41 --jqx-surface-color: white;
42 --jqx-border: #E0E0E0;
43 --jqx-border-radius: 4px;
44 --jqx-font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
45 --jqx-font-size: 14px;
46 --jqx-action-button-size: 25px;
47 --jqx-scrollbar-background: #f5f5f5;
48 --jqx-scrollbar-border: #ddd;
49 --jqx-scrollbar-thumb-background: #C1C1C1;
50 --jqx-scrollbar-thumb-border: #b3b3b3;
51 --jqx-scrollbar-thumb-background-hover: #e6e6e6;
52 --jqx-scrollbar-thumb-border-hover: #b3b3b3;
53 --jqx-scrollbar-thumb-background-pressed: #d9d9d9;
54 --jqx-scrollbar-thumb-border-pressed: #b3b3b3;
55 --jqx-scrollbar-button-color-hover: #333;
56 --jqx-scrollbar-button-background-hover: #f5f5f5;
57 --jqx-scrollbar-button-border-hover: #f5f5f5;
58 --jqx-scrollbar-button-color-pressed: #333;
59 --jqx-scrollbar-button-background-pressed: #f5f5f5;
60 --jqx-scrollbar-button-border-pressed: #f5f5f5;
61
62
63 --jqx-primary-rgb: 51, 173, 255;
64 --jqx-primary: rgb(var(--jqx-primary-rgb));
65 --jqx-background: #252526;
66 --jqx-background-color: #E7E7E7;
67 --jqx-surface:#3C3C3C;
68 --jqx-surface-color: #969690;
69 --jqx-border: #414141;
70 --jqx-background-hover-rgb: 60, 60, 60;
71 --jqx-background-hover: rgb(var(--jqx-background-hover-rgb));
72 --jqx-background-color-hover: rgba(255,255,255,.54);
73 --jqx-scrollbar-background: #3E3E42;
74 --jqx-scrollbar-border: #1E1E1E;
75 --jqx-scrollbar-thumb-background: #686868;
76 --jqx-scrollbar-thumb-border: #3E3E42;
77 --jqx-scrollbar-thumb-background-hover: #9E9E9E;
78 --jqx-scrollbar-thumb-border-hover: #9E9E9E;
79 --jqx-scrollbar-thumb-background-pressed: #ffffff;
80 --jqx-scrollbar-thumb-border-pressed: #ffffff;
81
82 }
83
84 .jqx-icon-search-blue,
85 .jqx-icon-close-blue {
86 background-image: none;
87 font-family: jqx-icons;
88 }
89 .jqx-icon-close-blue:after {
90 content: var(--jqx-icon-close);
91 }
92 .jqx-icon-search-blue:after {
93 content: var(--jqx-icon-search);
94 color:
95
96 }
97 .jqx-calendar-blue {
98 width: 280px !important;
99 height: 280px !important;
100 }
101 .jqx-fill-state-normal-blue {
102 background: var(--jqx-background);
103 color: var(--jqx-background-color);
104 border-color: var(--jqx-border);
105 }
106 .jqx-fill-state-hover-blue {
107 background: var(--jqx-background-hover);
108 color: var(--jqx-background-color-hover);
109 border-color: var(--jqx-background-hover);
110 }
111 .jqx-fill-state-pressed-blue {
112 background: var(--jqx-primary);
113 color: var(--jqx-primary-color);
114 border-color: var(--jqx-primary);
115 }
116
117 @font-face {
118 font-family: jqx-icons;
119 src: local('./font/jqx-icons'), url('./font/jqx-icons.woff2') format('woff2'), url('./font/jqx-icons.woff') format('woff'), url('./font/jqx-icons.ttf') format('truetype'), url('./font/jqx-icons.eot') format('embedded-opentype');
120 font-weight: normal;
121 font-style: normal;
122 }
123 /*Rounded Corners*/
124 /*top-left rounded Corners*/
125 .jqx-rc-tl-blue {
126 border-top-left-radius: var(--jqx-border-radius);
127 }
128 /*top-right rounded Corners*/
129 .jqx-rc-tr-blue {
130 border-top-right-radius: var(--jqx-border-radius);
131 }
132 /*bottom-left rounded Corners*/
133 .jqx-rc-bl-blue {
134 border-bottom-left-radius: var(--jqx-border-radius);
135 }
136 /*bottom-right rounded Corners*/
137 .jqx-rc-br-blue {
138 border-bottom-right-radius: var(--jqx-border-radius);
139 }
140 /*top rounded Corners*/
141 .jqx-rc-t-blue {
142 border-top-left-radius: var(--jqx-border-radius);
143 border-top-right-radius: var(--jqx-border-radius);
144 }
145 /*bottom rounded Corners*/
146 .jqx-rc-b-blue {
147 border-bottom-left-radius: var(--jqx-border-radius);
148 border-bottom-right-radius:var(--jqx-border-radius);
149 }
150 /*right rounded Corners*/
151 .jqx-rc-r-blue {
152 border-top-right-radius: var(--jqx-border-radius);
153 border-bottom-right-radius: var(--jqx-border-radius);
154 }
155 /*left rounded Corners*/
156 .jqx-rc-l-blue {
157 border-top-left-radius: var(--jqx-border-radius);
158 border-bottom-left-radius: var(--jqx-border-radius);
159 }
160 /*all rounded Corners*/
161 .jqx-rc-all-blue {
162 border-radius: var(--jqx-border-radius);
163 }
164
165 .jqx-widget-blue, .jqx-widget-header-blue, .jqx-fill-state-normal-blue,
166 .jqx-widget-content-blue, .jqx-fill-state-hover-blue, .jqx-fill-state-pressed-blue {
167 font-family: var(--jqx-font-family);
168 font-size: var(--jqx-font-size);
169 }
170
171 .jqx-widget-blue {
172 font-family: var(--jqx-font-family);
173 font-size: var(--jqx-font-size);
174 color: inherit;
175 border-color:var(--jqx-border);
176 }
177
178 .jqx-widget-content-blue {
179 font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
180 font-size: 14px;
181 color: var(--jqx-background-color);
182 background-color: var(--jqx-background);
183 border-color: var(--jqx-border);
184 }
185 .jqx-grid-table-blue.jqx-grid-table-one-cell {
186 border-right-color: var(--jqx-border);
187 }
188 .jqx-widget-header-blue {
189 background-color: var(--jqx-surface);
190 border-color: var(--jqx-border);
191 font-weight: 500;
192 font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
193 font-size: 14px;
194 background: var(--jqx-surface);
195 color: var(--jqx-surface-color);
196 }
197
198 .jqx-calendar-title-header-blue {
199 text-transform: uppercase;
200 }
201 .jqx-window-header-blue {
202 padding: 10px;
203 text-transform: uppercase;
204 color: var(--jqx-surface-color);
205 background: var(--jqx-surface);
206 }
207 .jqx-calendar tr {
208 border-bottom-color: var(--jqx-border);
209 }
210
211
212 .jqx-widget-blue input::selection, input.jqx-input-widget-blue::selection, .jqx-widget-content-blue input::selection {
213 background: var(--jqx-primary);
214 color: var(--jqx-primary-color);
215 }
216 .jqx-toolbar-blue{
217 border-color: var(--jqx-border);
218 }
219
220 .jqx-toolbar-blue {
221 height: auto !important;
222 display: flex;
223 align-items: center;
224 }
225
226 .jqx-button-blue, .jqx-button-blue.jqx-fill-state-normal-blue {
227 color: var(--jqx-background-color);
228 background-color: var(--jqx-background);
229 border-color: var(--jqx-border);
230 text-transform: uppercase;
231 outline: none;
232 transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
233 border-radius: 4px;
234 box-shadow: 0 0 0 0 rgba(0,0,0,.2), 0 0 0 0 rgba(0,0,0,.14), 0 0 0 0 var(--jqx-border);
235 }
236 .jqx-button-blue.jqx-fill-state-hover-blue,
237 .jqx-button-blue.jqx-fill-state-pressed-blue {
238 background-color: var(--jqx-background-hover);
239 border-color: var(--jqx-border);
240 color: var(--jqx-background-color-hover);
241 }
242
243 .jqx-button-blue.primary {
244 color: var(--jqx-primary-color);
245 background-color: var(--jqx-primary);
246 border-color: var(--jqx-primary);
247 }
248 .jqx-button-blue.jqx-fill-state-hover-blue.primary,
249 .jqx-button-blue.jqx-fill-state-pressed-blue.primary {
250 color: var(--jqx-primary-color);
251 background-color: var(--jqx-primary);
252 border-color: var(--jqx-primary);
253 }
254 .jqx-button-blue.secondary,
255 .jqx-button-blue.jqx-toolbar-tool {
256 background-color: var(--jqx-surface);
257 border-color: var(--jqx-border);
258 color: var(--jqx-surface-color) !important;
259 }
260 .jqx-button-blue.secondary:hover,
261 .jqx-button-blue.jqx-toolbar-tool:hover {
262 background-color: var(--jqx-background-hover);
263 border-color: var(--jqx-border);
264 color: var(--jqx-background-color-hover) !important;
265 }
266 .jqx-button-blue.secondary:active,
267 .jqx-button-blue.jqx-toolbar-tool:active {
268 background-color: var(--jqx-surface);
269 border-color: var(--jqx-border);
270 color: var(--jqx-surface-color) !important;
271 }
272 .jqx-scheduler-edit-dialog-field .jqx-button-blue {
273 padding: 6px 16px;
274 text-transform: uppercase;
275 }
276
277 .jqx-button-blue button, jqx-button-blue input {
278 background: transparent;
279 color: inherit;
280 border:none;
281 outline: none;
282 }
283 .jqx-group-button-normal-blue{
284 box-shadow: none;
285 background: var(--jqx-background);
286 border-color: var(--jqx-border);
287 color: var(--jqx-background-color) !important;
288 border-radius:0px;
289 }
290 .jqx-group-button-normal.jqx-fill-state-hover {
291 box-shadow: none !important;
292 }
293 .jqx-group-button-normal.jqx-fill-state-pressed {
294 box-shadow: none !important;
295 background: var(--jqx-primary) !important;
296 border-color: var(--jqx-primary) !important;
297 color: var(--jqx-primary-color)!important;
298 border-radius:0px;
299 }
300
301
302 .jqx-slider-button-blue {
303 padding:3px;
304 background: transparent;
305 border:transparent;
306 }
307 .jqx-button-blue.float {
308 border-radius: 100%;
309 min-height: 48px;
310 min-width: 48px;
311 width: 48px;
312 height: 48px;
313 max-height: 48px;
314 max-width:48px;
315 }
316
317 .jqx-button-blue.outlined {
318 background: transparent;
319 color: var(--jqx-primary);
320 border-width: 2px;
321 }
322
323 .jqx-button-blue.flat {
324 background: transparent;
325 color: var(--jqx-primary);
326 border: none;
327 }
328
329 .jqx-fill-state-hover-blue, .jqx-fill-state-focus-blue {
330 text-decoration: none;
331 }
332
333 .jqx-expander-header.jqx-fill-state-hover-blue,
334 .jqx-expander-header.jqx-fill-state-normal-blue,
335 .jqx-expander-header.jqx-fill-state-pressed-blue
336 {
337 background: var(--jqx-background-hover);
338 border-color: var(--jqx-border);
339 color:var(--jqx-background-color-hover);
340 }
341 .jqx-expander-header.jqx-fill-state-hover-blue {
342 background: var(--jqx-background-hover);
343 }
344
345 .jqx-expander-header-blue {
346 padding:10px;
347 }
348 .jqx-button-blue.jqx-fill-state-hover {
349 opacity: 0.9;
350 cursor: pointer;
351 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);
352 *zoom: 1;
353 }
354
355 .jqx-button-blue.jqx-fill-state-hover.outlined,
356 .jqx-button-blue.jqx-fill-state-hover.flat {
357 color: var(--jqx-primary);
358 box-shadow: none;
359 }
360
361 .jqx-button-blue.jqx-fill-state-pressed {
362 cursor: pointer;
363 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);
364 }
365
366 .jqx-button-blue.jqx-fill-state-pressed.float {
367 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);
368 }
369
370 .jqx-slider-button-blue.jqx-fill-state-pressed-blue,
371 .jqx-button-blue.jqx-fill-state-pressed.outlined,
372 .jqx-button-blue.jqx-fill-state-pressed.flat {
373 background: rgba(179,229,252,0.15);
374 box-shadow: none;
375 color: var(--jqx-primary);
376 }
377
378 .jqx-button-blue.jqx-fill-state-focus {
379 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);
380 }
381 .jqx-slider-button-blue.jqx-fill-state-focus-blue {
382 background: transparent;
383 border-color: transparent;
384 box-shadow:none;
385 }
386
387 .jqx-button-blue.jqx-fill-state-focus.outlined,
388 .jqx-button-blue.jqx-fill-state-focus.flat {
389 box-shadow: none;
390 background: rgba(rgb(var(--jqx-primary-rgb)),0.15);
391 color: var(--jqx-primary);
392 }
393
394 .jqx-dropdownlist-content-blue {
395 display: flex;
396 align-items: center;
397 height: 100% !important;
398 margin-top: 0px !important;
399 }
400
401 .jqx-dropdownlist-content-blue span {
402 top: 0px !important;
403 }
404 .jqx-dropdownlist-state-normal-blue, .jqx-dropdownlist-state-hover-blue, .jqx-dropdownlist-state-selected-blue,
405 .jqx-scrollbar-button-state-hover-blue, .jqx-scrollbar-button-state-normal-blue, .jqx-scrollbar-button-state-pressed-blue,
406 .jqx-scrollbar-thumb-state-normal-horizontal-blue, .jqx-scrollbar-thumb-state-hover-horizontal-blue, .jqx-scrollbar-thumb-state-pressed-horizontal-blue,
407 .jqx-scrollbar-thumb-state-normal-blue, .jqx-scrollbar-thumb-state-pressed-blue, .jqx-tree-item-hover-blue, .jqx-tree-item-selected-blue,
408 .jqx-tree-item-blue, .jqx-menu-item-blue, .jqx-menu-item-hover-blue, .jqx-menu-item-selected-blue, .jqx-menu-item-top-blue, .jqx-menu-item-top-hover-blue,
409 .jqx-menu-item-top-selected-blue, .jqx-slider-button-blue, .jqx-slider-slider-blue {
410 -webkit-transition: background-color 100ms linear;
411 -moz-transition: background-color 100ms linear;
412 -o-transition: background-color 100ms linear;
413 -ms-transition: background-color 100ms linear;
414 transition: background-color 100ms linear;
415 }
416
417
418 .jqx-primary-blue.jqx-input-label-blue {
419 color: var(--jqx-primary) !important;
420 }
421 .jqx-primary-blue.jqx-input-bar-blue:before {
422 background: var(--jqx-primary) !important;
423 }
424 .jqx-success-blue.jqx-input-label-blue {
425 color: #5cb85c !important;
426 }
427 .jqx-success-blue.jqx-input-bar-blue:before {
428 background: #5cb85c !important;
429 }
430 .jqx-inverse-blue.jqx-input-label-blue {
431 color: #666 !important;
432 }
433 .jqx-inverse-blue.jqx-input-bar-blue:before {
434 background: #666 !important;
435 }
436 .jqx-danger-blue.jqx-input-label-blue {
437 color: #d9534f !important;
438 }
439 .jqx-danger-blue.jqx-input-bar-blue:before {
440 background: #d9534f !important;
441 }
442 .jqx-warning-blue.jqx-input-label-blue {
443 color: #f0ad4e !important;
444 }
445 .jqx-warning-blue.jqx-input-bar-blue:before {
446 background: #f0ad4e !important;
447 }
448 .jqx-info-blue.jqx-input-label-blue {
449 color: #5bc0de !important;
450 }
451 .jqx-info-blue.jqx-input-bar-blue:before {
452 background: #5bc0de !important;
453 }
454
455 .jqx-slider-tooltip-blue.jqx-primary-slider, .jqx-slider-tooltip-blue.jqx-primary-slider .jqx-fill-state-normal-blue {
456 border-color: var(--jqx-primary);
457 background: var(--jqx-primary);
458 }
459 .jqx-slider-tooltip-blue.jqx-success-slider, .jqx-slider-tooltip-blue.jqx-success-slider .jqx-fill-state-normal-blue {
460 border-color: #5cb85c;
461 background: #5cb85c;
462 }
463 .jqx-slider-tooltip-blue.jqx-inverse-slider, .jqx-slider-tooltip-blue.jqx-inverse-slider .jqx-fill-state-normal-blue {
464 border-color: #666;
465 background: #666;
466 }
467 .jqx-slider-tooltip-blue.jqx-danger-slider, .jqx-slider-tooltip-blue.jqx-danger-slider .jqx-fill-state-normal-blue {
468 border-color: #d9534f;
469 background: #d9534f;
470 }
471 .jqx-slider-tooltip-blue.jqx-warning-slider, .jqx-slider-tooltip-blue.jqx-warning-slider .jqx-fill-state-normal-blue {
472 border-color: #f0ad4e;
473 background: #f0ad4e;
474 }
475 .jqx-slider-tooltip-blue.jqx-info-slider, .jqx-slider-tooltip-blue.jqx-info-slider .jqx-fill-state-normal-blue {
476 border-color: #5bc0de;
477 background: #5bc0de;
478 }
479
480
481 .jqx-primary-blue {
482 color: var(--jqx-primary) !important;
483 background: #fff !important;
484 border-color: var(--jqx-primary) !important;
485 text-shadow: none !important;
486 }
487
488 .jqx-primary-blue.jqx-dropdownlist-state-normal-blue,
489 .jqx-primary-blue.jqx-slider-button-blue,
490 .jqx-primary-blue.jqx-slider-slider-blue,
491 .jqx-primary-blue.jqx-combobox-arrow-normal-blue,
492 .jqx-primary-blue.jqx-combobox-arrow-hover-blue,
493 .jqx-primary-blue.jqx-action-button-blue,
494 .jqx-primary-blue:hover,
495 .jqx-primary-blue:focus,
496 .jqx-primary-blue:active,
497 .jqx-primary-blue.active,
498 .jqx-primary-blue.disabled,
499 .jqx-primary-blue[disabled] {
500 color: #fff !important;
501 background: var(--jqx-primary) !important;
502 border-color: var(--jqx-primary) !important;
503 text-shadow: none !important;
504 }
505
506 .jqx-fill-state-pressed-blue.jqx-primary-blue,
507 .jqx-primary-blue:active,
508 .jqx-primary-blue.active {
509 color: #fff !important;
510 background-color: var(--jqx-primary) !important;
511 border-color: var(--jqx-primary) !important;
512 text-shadow: none !important;
513 }
514
515 .jqx-success-blue {
516 color: #5cb85c !important;
517 background: #fff !important;
518 border-color: #5cb85c !important;
519 text-shadow: none !important;
520 }
521
522 .jqx-success-blue.jqx-dropdownlist-state-normal-blue,
523 .jqx-success-blue.jqx-slider-button-blue,
524 .jqx-success-blue.jqx-slider-slider-blue,
525 .jqx-success-blue.jqx-combobox-arrow-normal-blue,
526 .jqx-success-blue.jqx-combobox-arrow-hover-blue,
527 .jqx-success-blue.jqx-action-button-blue,
528 .jqx-success-blue:hover,
529 .jqx-success-blue:focus,
530 .jqx-success-blue:active,
531 .jqx-success-blue.active,
532 .jqx-success-blue.disabled,
533 .jqx-success-blue[disabled] {
534 color: #fff !important;
535 background: #5cb85c !important;
536 border-color: #5cb85c !important;
537 text-shadow: none !important;
538 }
539
540 .jqx-fill-state-pressed-blue.jqx-success-blue,
541 .jqx-success-blue:active,
542 .jqx-success-blue.active {
543 text-shadow: none !important;
544 color: #fff !important;
545 background: #5cb85c !important;
546 border-color: #5cb85c !important;
547 }
548
549 .jqx-inverse-blue {
550 text-shadow: none !important;
551 color: #666 !important;
552 background: #fff !important;
553 border-color: #cccccc !important;
554 }
555
556 .jqx-inverse-blue.jqx-dropdownlist-state-normal-blue,
557 .jqx-inverse-blue.jqx-slider-button-blue,
558 .jqx-inverse-blue.jqx-slider-slider-blue,
559 .jqx-inverse-blue.jqx-combobox-arrow-hover-blue,
560 .jqx-inverse-blue.jqx-combobox-arrow-normal-blue,
561 .jqx-inverse-blue.jqx-action-button-blue,
562 .jqx-inverse-blue:hover,
563 .jqx-inverse-blue:focus,
564 .jqx-inverse-blue:active,
565 .jqx-inverse-blue.active,
566 .jqx-inverse-blue.disabled,
567 .jqx-inverse-blue[disabled] {
568 text-shadow: none !important;
569 color: #666 !important;
570 background: #cccccc !important;
571 border-color: #cccccc !important;
572 }
573
574 .jqx-fill-state-pressed-blue.jqx-inverse-blue,
575 .jqx-inverse-blue:active,
576 .jqx-inverse-blue.active {
577 text-shadow: none !important;
578 color: #666 !important;
579 background: #cccccc !important;
580 border-color: #cccccc !important;
581 }
582
583
584 .jqx-danger-blue {
585 text-shadow: none !important;
586 color: #d9534f !important;
587 background: #fff !important;
588 border-color: #d9534f !important;
589 }
590
591 .jqx-danger-blue.jqx-dropdownlist-state-normal-blue,
592 .jqx-danger-blue.jqx-slider-button-blue,
593 .jqx-danger-blue.jqx-slider-slider-blue,
594 .jqx-danger-blue.jqx-combobox-arrow-hover-blue,
595 .jqx-danger-blue.jqx-combobox-arrow-normal-blue,
596 .jqx-danger-blue.jqx-action-button-blue,
597 .jqx-danger-blue:hover,
598 .jqx-danger-blue:focus,
599 .jqx-danger-blue:active,
600 .jqx-danger-blue.active,
601 .jqx-danger-blue.disabled,
602 .jqx-danger-blue[disabled] {
603 text-shadow: none !important;
604 color: #fff !important;
605 background: #d9534f !important;
606 border-color: #d9534f !important;
607 }
608
609 .jqx-fill-state-pressed-blue.jqx-danger-blue,
610 .jqx-danger-blue:active,
611 .jqx-danger-blue.active {
612 text-shadow: none !important;
613 color: #fff !important;
614 background: #d9534f !important;
615 border-color: #d9534f !important;
616 }
617
618 .jqx-validator-error-label-blue {
619 color: #d9534f !important;
620 }
621
622 .jqx-warning-blue {
623 text-shadow: none !important;
624 color: #f0ad4e !important;
625 background: #fff !important;
626 border-color: #f0ad4e !important;
627 }
628
629 .jqx-warning-blue.jqx-dropdownlist-state-normal-blue,
630 .jqx-warning-blue.jqx-slider-button-blue,
631 .jqx-warning-blue.jqx-slider-slider-blue,
632 .jqx-warning-blue.jqx-combobox-arrow-hover-blue,
633 .jqx-warning-blue.jqx-combobox-arrow-normal-blue,
634 .jqx-warning-blue.jqx-action-button-blue,
635 .jqx-warning-blue:hover,
636 .jqx-warning-blue:focus,
637 .jqx-warning-blue:active,
638 .jqx-warning-blue.active,
639 .jqx-warning-blue.disabled,
640 .jqx-warning-blue[disabled] {
641 text-shadow: none !important;
642 color: #fff !important;
643 background: #f0ad4e !important;
644 border-color: #f0ad4e !important;
645 }
646
647 .jqx-fill-state-pressed-blue.jqx-warning-blue,
648 .jqx-warning-blue:active,
649 .jqx-warning-blue.active {
650 text-shadow: none !important;
651 color: #fff !important;
652 background: #f0ad4e !important;
653 border-color: #f0ad4e !important;
654 }
655
656
657 .jqx-info-blue {
658 text-shadow: none !important;
659 color: #5bc0de !important;
660 background: #fff !important;
661 border-color: #5bc0de !important;
662 }
663
664 .jqx-info-blue.jqx-dropdownlist-state-normal-blue,
665 .jqx-info-blue.jqx-slider-button-blue,
666 .jqx-info-blue.jqx-slider-slider-blue,
667 .jqx-info-blue.jqx-combobox-arrow-hover-blue,
668 .jqx-info-blue.jqx-combobox-arrow-normal-blue,
669 .jqx-info-blue.jqx-action-button-blue,
670 .jqx-info-blue:hover,
671 .jqx-info-blue:focus,
672 .jqx-info-blue:active,
673 .jqx-info-blue.active,
674 .jqx-info-blue.disabled,
675 .jqx-info-blue[disabled] {
676 color: #fff !important;
677 background: #5bc0de !important;
678 border-color: #5bc0de !important;
679 text-shadow: none !important;
680 }
681
682 .jqx-fill-state-pressed-blue.jqx-info-blue,
683 .jqx-info-blue:active,
684 .jqx-info-blue.active {
685 text-shadow: none !important;
686 color: #fff !important;
687 background: #5bc0de !important;
688 border-color: #5bc0de !important;
689 }
690
691 .jqx-fill-state-pressed-blue {
692 background-image: none;
693 outline: 0;
694 }
695
696 .jqx-grid-group-column-blue {
697 border-color: transparent;
698 }
699 .jqx-grid-column-menubutton-blue {
700 border-width: 0px;
701 }
702 .jqx-grid-groups-row-blue > span {
703 padding-left: 4px;
704 }
705 .jqx-grid-column-filterbutton-blue,
706 .jqx-grid-column-menubutton-blue{
707 background-image: none;
708 font-family: 'jqx-icons';
709 display: flex;
710 justify-content: center;
711 align-items: center;
712 margin-top: 0px;
713 }
714
715 .jqx-grid-column-filterbutton-blue:after {
716 content: var(--jqx-icon-filter);
717 background: var(--jqx-surface);
718 color: var(--jqx-surface-color);
719 }
720 .jqx-grid-column-menubutton-blue:after {
721 content: var(--jqx-icon-menu) !important;
722 background: var(--jqx-surface);
723 color: var(--jqx-surface-color);
724 }
725 .jqx-datatable-blue .jqx-grid-column-header-blue {
726 border-right: none !important;
727 }
728
729 .jqx-datatable-blue td.jqx-grid-cell-blue,
730 .jqx-treegrid-blue .jqx-grid-cell-blue{
731 padding-top: 10px;
732 padding-bottom: 9px;
733 font-size: 14px;
734 border-left: none !important;
735 }
736
737 .jqx-grid-cell-blue {
738 background: var(--jqx-background);
739 color: var(--jqx-background-color);
740 -webkit-box-shadow: none;
741 -moz-box-shadow: none;
742 box-shadow: none;
743 }
744
745 .jqx-grid-pager-top-blue .jqx-button-blue,
746 .jqx-grid-pager-blue .jqx-button-blue {
747 color: inherit !important;
748 background-color: transparent !important;
749 border-color: transparent !important;
750 position: relative;
751 top: 0px;
752 border-radius: 4px;
753 display: flex;
754 font-size: 16px;
755 justify-content: center;
756 align-content: center;
757 }
758
759 .jqx-grid-pager-input-blue {
760 padding:0px !important;
761 }
762
763 .jqx-grid-pager-top-blue .jqx-button-blue > div,
764 .jqx-grid-pager-blue .jqx-button-blue > div {
765 top: 0px;
766 position: relative;
767 left: 0px;
768 display: flex;
769 align-items: center;
770 margin-left: 0px !important;
771 }
772
773 .jqx-grid-pager-top-blue .jqx-button-blue.jqx-fill-state-hover,
774 .jqx-grid-pager-blue .jqx-button-blue.jqx-fill-state-hover
775 {
776 color: var(--jqx-background-color-hover);
777 background: var(--jqx-background-hover);
778 border-color: var(--jqx-background-hover);
779 box-shadow: none;
780 }
781 .jqx-grid-pager-top-blue .jqx-button-blue.jqx-fill-state-pressed,
782 .jqx-grid-pager-blue .jqx-button-blue.jqx-fill-state-pressed
783 {
784 background: var(--jqx-primary);
785 }
786 .jqx-grid-pager-blue .jqx-button-blue:hover:after,
787 .jqx-grid-pager-top-blue .jqx-button-blue:hover:after,
788 .jqx-grid-pager-top-blue .jqx-button-blue.jqx-fill-state-pressed-blue:after,
789 .jqx-grid-pager-blue .jqx-button-blue.jqx-fill-state-pressed-blue:after {
790 content: '';
791 position: absolute;
792 width: calc(100% - 4px);
793 height: calc(100% - 4px);
794 border: 2px solid var(--jqx-background);
795 border-radius: 4px;
796 left:0px;
797 top:0px;
798 }
799 .jqx-grid-pager-top-blue .jqx-grid-pager-number-blue,
800 .jqx-grid-pager-blue .jqx-grid-pager-number-blue {
801 background-color: transparent;
802 border-color: transparent;
803 color: inherit;
804 font-size:14px;
805 padding: 6px 10px;
806 border-radius: 4px;
807
808 position: relative;
809 }
810
811 .jqx-grid-pager-top-blue .jqx-grid-pager-number-blue:hover,
812 .jqx-grid-pager-blue .jqx-grid-pager-number-blue:hover {
813 background: var(--jqx-background-hover);
814 color:var(--jqx-background-color-hover) !important;
815 font-size: var(--jqx-font-size);
816 }
817 .jqx-grid-pager-blue .jqx-grid-pager-number-blue:hover:after,
818 .jqx-grid-pager-top-blue .jqx-grid-pager-number-blue:hover:after,
819 .jqx-grid-pager-top-blue .jqx-grid-pager-number-blue.jqx-fill-state-pressed-blue:after,
820 .jqx-grid-pager-blue .jqx-grid-pager-number-blue.jqx-fill-state-pressed-blue:after {
821 content: '';
822 position: absolute;
823 width: calc(100% - 4px);
824 height: calc(100% - 4px);
825 border: 2px solid var(--jqx-background);
826 border-radius: var(--jqx-border-radius);
827 left:0px;
828 top:0px;
829 }
830 .jqx-grid-pager-top-blue .jqx-grid-pager-number-blue.jqx-fill-state-pressed-blue ,
831 .jqx-grid-pager-blue .jqx-grid-pager-number-blue.jqx-fill-state-pressed-blue {
832 font-weight: bold !important;
833 background: var(--jqx-primary);
834 color:var(--jqx-background) !important;
835 }
836
837 .jqx-grid-column-menubutton-blue {
838 background-color: transparent;
839 border-color: var(--jqx-border) !important;
840 }
841
842 .jqx-cell-blue {
843 font-size: 13px;
844 }
845
846 .jqx-calendar-blue > div {
847 padding: 0px;
848 box-sizing: border-box;
849 }
850 .jqx-calendar-month-blue {
851 width: 90%;
852 position: relative;
853 left: 5%;
854 }
855 .jqx-calendar-title-navigation-blue {
856 font-size: 20px;
857 padding: 0px 20px;
858 }
859 .jqx-calendar-row-header-blue, .jqx-calendar-top-left-header-blue {
860 background-color: var(--jqx-background);
861 border: 0px solid var(--jqx-background);
862 }
863
864 .jqx-calendar-column-header-blue {
865 background-color: var(--jqx-background);
866 border-top: 1px solid var(--jqx-background);
867 border-bottom: 1px solid var(--jqx-border);
868 font-size: 12px;
869 color: var(--jqx-background-color);
870 }
871
872 .jqx-expander-header-blue {
873 padding-top: 10px;
874 padding-bottom: 10px;
875 }
876
877 .jqx-ribbon-header-vertical-blue, .jqx-widget-header-vertical-blue {
878 background: var(--jqx-background);
879 }
880
881 .jqx-scrollbar-state-normal-blue {
882 background-color: var(--jqx-scrollbar-background);
883 border: 1px solid var(--jqx-scrollbar-background);
884 border-left-color: var(--jqx-scrollbar-border);
885 }
886
887 .jqx-scrollbar-thumb-state-normal-blue, .jqx-scrollbar-thumb-state-normal-horizontal-blue {
888 background: var(--jqx-scrollbar-thumb-background);
889 border-color: var(--jqx-scrollbar-thumb-border);
890 border-radius: 0px;
891 }
892
893 .jqx-scrollbar-thumb-state-hover-blue, .jqx-scrollbar-thumb-state-hover-horizontal-blue {
894 background: var(--jqx-scrollbar-thumb-background-hover);
895 border-color: var(--jqx-scrollbar-thumb-border-hover);
896 box-shadow: none;
897 -webkit-box-shadow: none;
898 -moz-box-shadow: none;
899 }
900
901 .jqx-progressbar-blue {
902 background: var(--jqx-background) !important;
903 -webkit-box-shadow: none;
904 -moz-box-shadow: none;
905 box-shadow: none;
906 }
907
908 .jqx-progressbar-value-blue, .jqx-splitter-collapse-button-horizontal-blue {
909 background: var(--jqx-primary);
910 }
911
912 .jqx-splitter-collapse-button-vertical-blue, .jqx-progressbar-value-vertical-blue {
913 background: var(--jqx-primary);
914 }
915
916 .jqx-scrollbar-button-state-hover-blue {
917 color: var(--jqx-scrollbar-button-color-hover);
918 background: var(--jqx-scrollbar-button-background-hover);
919 border-color: var(--jqx-scrollbar-button-border-hover);
920 }
921
922
923 .jqx-scrollbar-button-state-pressed-blue {
924 color: var(--jqx-scrollbar-button-color-pressed);
925 background: var(--jqx-scrollbar-button-background-pressed);
926 border-color: var(--jqx-scrollbar-button-border-pressed);
927 }
928
929 .jqx-splitter-splitbar-vertical-blue,
930 .jqx-splitter-splitbar-horizontal-blue {
931 background: var(--jqx-scrollbar-thumb-background);
932 border-color: var(--jqx-scrollbar-thumb-border);
933 }
934
935 .jqx-scrollbar-thumb-state-pressed-blue,
936 .jqx-scrollbar-thumb-state-pressed-horizontal-blue,
937 .jqx-scrollbar-button-state-pressed-blue {
938 background: var(--jqx-scrollbar-thumb-background-pressed);
939 border-color: var(--jqx-scrollbar-thumb-border-pressed);
940 box-shadow: none;
941 }
942
943 .jqx-grid-column-sortdescbutton-blue, jqx-grid-column-filterbutton-blue, .jqx-grid-column-sortascbutton-blue {
944 background-color: transparent;
945 border-style: solid;
946 border-width: 0px 0px 0px 0px;
947 border-color: var(--jqx-border);
948 }
949
950 .jqx-menu-vertical-blue {
951 background: var(--jqx-background);
952 filter: none;
953 }
954
955 .jqx-grid-bottomright-blue, .jqx-panel-bottomright-blue, .jqx-listbox-bottomright-blue {
956 background-color: var(--jqx-scrollbar-background);
957 }
958
959 .jqx-window-blue, .jqx-tooltip-blue {
960 box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
961 }
962 .jqx-tooltip-blue, .jqx-tooltip-blue.jqx-popup-blue, .jqx-tooltip-blue .jqx-fill-state-normal-blue {
963 background: var(--jqx-primary);
964 border-color: var(--jqx-primary);
965 box-shadow:none;
966 color: var(--jqx-primary-color);
967 }
968 .jqx-docking-blue .jqx-window-blue {
969 box-shadow: none;
970 }
971
972 .jqx-docking-panel-blue .jqx-window-blue {
973 box-shadow: none;
974 }
975
976 .jqx-checkbox-blue {
977 line-height:20px;
978 overflow: visible;
979 }
980 .jqx-radiobutton-blue {
981 overflow: visible;
982 box-shadow: none;
983 -webkit-box-shadow: none;
984 -moz-box-shadow: none;
985 background-repeat: no-repeat;
986 background: none;
987 line-height:20px;
988 }
989
990 .jqx-radiobutton-blue-blue, .jqx-radiobutton-hover-blue {
991 border-radius: 100%;
992 background-repeat: no-repeat;
993 transition: background-color ease-in .3s;
994 }
995
996 .jqx-radiobutton-check-checked-blue {
997 filter: none;
998 background: var(--jqx-background);
999 background-repeat: no-repeat;
1000 border-radius: 100%;
1001 }
1002
1003 .jqx-radiobutton-check-indeterminate-blue {
1004 filter: none;
1005 background: var(--jqx-background);
1006 border-radius: 100%;
1007 }
1008
1009 .jqx-radiobutton-check-indeterminate-disabled-blue {
1010 filter: none;
1011 background: var(--jqx-background);
1012 opacity: 0.7;
1013 border-radius: 100%;
1014 }
1015
1016 .jqx-checkbox-default-blue,
1017 .jqx-radiobutton-default-blue
1018 {
1019 border-width: 1px;
1020 border-color: var(--jqx-border);
1021 background-color: var(--jqx-background);
1022 overflow: visible;
1023 }
1024
1025 .jqx-tree-grid-expand-button-blue,
1026 .jqx-tree-grid-collapse-button-blue {
1027 font-size: 16px;
1028 }
1029 .jqx-grid-table-blue .jqx-grid-cell:first-child {
1030 padding-left: 10px;
1031 }
1032 .jqx-tree-grid-title-blue {
1033 margin-left: 5px;
1034 }
1035 .jqx-tree-blue .jqx-checkbox-blue .jqx-checkbox-default-blue,
1036 .jqx-checkbox-blue[checked] .jqx-checkbox-default-blue,
1037 .jqx-tree-grid-checkbox[checked].jqx-checkbox-default-blue,
1038 .jqx-radiobutton-blue[checked] .jqx-radiobutton-default-blue
1039 {
1040 background-color: var(--jqx-primary);
1041 border-color: var(--jqx-primary);
1042 }
1043
1044 .jqx-checkbox-check-checked-blue {
1045 background: none;
1046 font-family: jqx-icons;
1047 }
1048 .jqx-checkbox-check-checked-blue:after {
1049 content: var(--jqx-icon-check);
1050 }
1051 .jqx-checkbox-check-indeterminate-blue {
1052 width:14px !important;
1053 height:14px !important;
1054 position:relative;
1055 top: 1px;
1056 left: 1px;
1057 background: var(--jqx-background);
1058 }
1059 .jqx-tree-blue .jqx-checkbox-check-indeterminate-blue {
1060 width:12px !important;
1061 height:12px !important;
1062 top: 2px;
1063 left:2px;
1064 }
1065
1066 .jqx-checkbox-hover-blue,
1067 .jqx-radiobutton-hover-blue {
1068 background-color: var(--jqx-primary);
1069 border-color: var(--jqx-primary);
1070 }
1071
1072
1073 .jqx-slider-slider-blue {
1074 transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
1075 }
1076
1077 .jqx-slider-slider-blue:active {
1078 transform: scale(1.2);
1079 box-shadow: rgba(0,0,0,0.3) 0 0 10px;
1080 }
1081 .jqx-slider-blue[discrete] .jqx-slider-slider-blue:active
1082 {
1083 transform: scaleX(0);
1084
1085 }
1086 .jqx-slider-slider-horizontal-blue {
1087 background: var(--jqx-primary);
1088 }
1089 .jqx-slider-slider-vertical-blue {
1090 background: var(--jqx-primary);
1091 }
1092 .jqx-slider-tooltip-blue {
1093 width: 25px;
1094 height: 25px;
1095 transform-origin: 50% 100%;
1096 border-radius: 50%;
1097 transform: scale(0) rotate(45deg);
1098 padding:0px;
1099 background: transparent !important;
1100 }
1101 .jqx-slider-tooltip-blue.init {
1102 transform: scale(1) rotate(45deg);
1103 }
1104 .jqx-slider-tooltip-blue.hide {
1105 transition: transform 0.2s ease;
1106 transform-origin:50% 100%;
1107 transform: scale(0) rotate(45deg);
1108 }
1109 .jqx-slider-tooltip-blue.show {
1110 transition: transform 0.2s ease;
1111 transform: scale(1) rotate(45deg);
1112 }
1113
1114
1115 .jqx-slider-tooltip-blue .jqx-tooltip-arrow-t-b,
1116 .jqx-slider-tooltip-blue .jqx-tooltip-arrow-l-r {
1117 display:none;
1118 visibility:hidden;
1119 }
1120
1121 .jqx-slider-tooltip-blue, .jqx-slider-tooltip-blue .jqx-fill-state-normal-blue {
1122 border-radius: 15px 15px 0px;
1123 display: flex;
1124 align-items: center;
1125 justify-content: center;
1126 background: var(--jqx-primary);
1127 color: var(--jqx-primary-color);
1128 font-size:11px;
1129 }
1130 .jqx-slider-tooltip-blue.far, .jqx-slider-tooltip-blue.far .jqx-fill-state-normal-blue {
1131 border-radius: 0px 15px 15px 15px;
1132 }
1133 .jqx-slider-tooltip-blue.vertical, .jqx-slider-tooltip-blue.vertical .jqx-fill-state-normal-blue {
1134 border-radius: 15px 0px 15px 15px;
1135 }
1136 .jqx-slider-tooltip-blue.vertical.far, .jqx-slider-tooltip-blue.vertical.far .jqx-fill-state-normal-blue {
1137 border-radius: 15px 15px 15px 0px;
1138 }
1139 .jqx-slider-tooltip-blue {
1140 background:transparent;
1141 border:none !important;
1142 box-shadow:none;
1143 }
1144 .jqx-slider-tooltip-blue .jqx-tooltip-main-blue {
1145 top: -7px;
1146 right: 11px;
1147 }
1148 .jqx-slider-tooltip-blue.far .jqx-tooltip-main-blue {
1149 top: 3px;
1150 right: 4px;
1151 }
1152 .jqx-slider-tooltip-blue.vertical .jqx-tooltip-main-blue {
1153 top: -3px;
1154 right: 3px;
1155 }
1156 .jqx-slider-tooltip-blue .jqx-tooltip-text {
1157 background: transparent;
1158 border:none;
1159 padding: 0px;
1160 overflow:visible;
1161 }
1162 .jqx-slider-tooltip-blue .jqx-tooltip-text>span {
1163 transform: rotate(-45deg);
1164 }
1165 .jqx-slider-tooltip-blue.range {
1166 width: 35px;
1167 height:35px;
1168 }
1169
1170 .jqx-slider-rangebar-blue {
1171 border-color: var(--jqx-primary);
1172 background: var(--jqx-primary);
1173 }
1174
1175 .jqx-slider-track-horizontal-blue, .jqx-slider-track-vertical-blue {
1176 border-color: var(--jqx-border);
1177 background: var(--jqx-background);
1178 }
1179
1180 .jqx-slider-button-blue {
1181 -moz-border-radius: 100%;
1182 -webkit-border-radius: 100%;
1183 border-radius: 100%;
1184 }
1185 .jqx-slider-button-blue.jqx-fill-state-normal-blue,
1186 .jqx-slider-button-blue.jqx-fill-state-hover-blue,
1187 .jqx-slider-button-blue.jqx-fill-state-pressed-blue
1188 {
1189 background: transparent !important;
1190 }
1191
1192 .jqx-tree-item-blue,
1193 .jqx-tree-item-selected {
1194 padding: 6px;
1195 border-radius: 4px;
1196 }
1197 .jqx-listitem-element-blue .jqx-checkbox-default-blue {
1198 border-radius: 0px;
1199 }
1200 .jqx-listitem-state-hover-blue,
1201 .jqx-listitem-state-selected-blue,
1202 .jqx-listitem-state-normal-blue {
1203 border-radius: 0;
1204 margin:0px;
1205 }
1206
1207 .jqx-scheduler-edit-dialog-label-blue {
1208 font-size: 12px;
1209 text-transform: uppercase;
1210 padding-top: 6px;
1211 padding-bottom: 6px;
1212
1213 }
1214 .jqx-scheduler-edit-dialog-field-blue {
1215 padding-top: 6px;
1216 padding-bottom: 6px;
1217 }
1218 .jqx-scheduler-edit-dialog-label-rtl-blue {
1219 line-height: 35px;
1220 padding-top: 6px;
1221 padding-bottom: 6px;
1222 }
1223 .jqx-scheduler-edit-dialog-field-rtl-blue {
1224 line-height: 35px;
1225 padding-top: 6px;
1226 padding-bottom: 6px;
1227 }
1228 .jqx-menu-horizontal-blue {
1229 height: auto !important;
1230 }
1231 .jqx-menu-horizontal-blue .jqx-menu-item-top-blue {
1232 padding: 8px;
1233 }
1234 .jqx-menu-item-top-blue,
1235 .jqx-menu-item-blue {
1236 padding: 8px;
1237 }
1238 /*applied to a list item when the item is selected.*/
1239 .jqx-listitem-state-hover-blue, .jqx-menu-item-hover-blue, .jqx-tree-item-hover-blue, .jqx-calendar-cell-hover-blue, .jqx-grid-cell-hover-blue,
1240 .jqx-input-popup-blue .jqx-fill-state-hover-blue,
1241 .jqx-input-popup-blue .jqx-fill-state-pressed-blue {
1242 color: var(--jqx-background-color-hover) !important;
1243 border-color: var(--jqx-background-hover);
1244 text-decoration: none;
1245 background-color: var(--jqx-background-hover);
1246 background-repeat: repeat-x;
1247 outline: 0;
1248 background: var(--jqx-background-hover);
1249 box-shadow: none;
1250 background-position: 0 0;
1251 }
1252
1253 .jqx-scheduler-cell-hover-blue {
1254 border-color: var(--jqx-primary) !important;
1255 background: var(--jqx-primary) !important;
1256 color: var(--jqx-background) !important;
1257 }
1258
1259 .jqx-listitem-state-selected-blue, .jqx-menu-item-selected-blue, .jqx-tree-item-selected-blue, .jqx-calendar-cell-selected-blue, .jqx-grid-cell-selected-blue,
1260 .jqx-menu-item-top-selected-blue, .jqx-grid-selectionarea-blue, .jqx-input-button-header-blue, .jqx-input-button-innerHeader-blue {
1261 color: var(--jqx-primary-color) !important;
1262 border-color: var(--jqx-primary) !important;
1263 background: var(--jqx-primary) !important; /* Old browsers */
1264 box-shadow: none;
1265 }
1266
1267 .jqx-grid-cell-blue .jqx-button-blue, .jqx-grid-cell-blue .jqx-button-blue.jqx-fill-state-hover-blue, .jqx-grid-cell-blue .jqx-button-blue.jqx-fill-state-pressed-blue {
1268 box-shadow: none;
1269 transition: none;
1270 }
1271
1272 .jqx-menu-popup-blue{
1273 opacity: 0;
1274 transform-origin: top left;
1275 box-shadow: 0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 3px rgba(0,0,0,.12),0 4px 15px 0 rgba(0,0,0,.2);
1276 background: var(--jqx-background) !important;
1277 }
1278 .jqx-menu-popup-blue.top {
1279 transform: scaleY(0);
1280 transition: transform 0.2s ease-in-out, opacity 0.3s ease-in-out;
1281 }
1282
1283 .jqx-menu-popup-blue.horizontal {
1284 transform: scaleX(0);
1285 transition: transform 0.2s ease-in-out, opacity 0.3s ease-in-out;
1286 }
1287
1288 .jqx-menu-popup-blue.show {
1289 transform: scale(1);
1290 opacity: 1;
1291 }
1292 .jqx-popup-blue {
1293 border: 1px solid var(--jqx-border);
1294 background: var(--jqx-background);
1295 box-shadow: 0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 3px rgba(0,0,0,.12),0 4px 15px 0 rgba(0,0,0,.2);
1296 }
1297 .jqx-menu-popup-blue .jqx-popup-blue {
1298 box-shadow: none;
1299 border: none;
1300 }
1301
1302 .jqx-grid-column-sortascbutton-blue,
1303 .jqx-expander-arrow-bottom-blue,
1304 .jqx-window-collapse-button-blue,
1305 .jqx-menu-item-arrow-up-blue,
1306 .jqx-menu-item-arrow-up-selected-blue,
1307 .jqx-menu-item-arrow-top-up-blue,
1308 .jqx-icon-arrow-up-blue,
1309 .jqx-icon-arrow-up-hover-blue,
1310 .jqx-icon-arrow-up-selected-blue {
1311 background-image: none;
1312 }
1313
1314 .jqx-grid-column-sortascbutton-blue,
1315 .jqx-expander-arrow-bottom-blue,
1316 .jqx-window-collapse-button-blue,
1317 .jqx-menu-item-arrow-up-blue,
1318 .jqx-menu-item-arrow-up-selected-blue,
1319 .jqx-menu-item-arrow-top-up-blue,
1320 .jqx-icon-arrow-up-blue,
1321 .jqx-icon-arrow-up-hover-blue,
1322 .jqx-icon-arrow-up-selected-blue {
1323 background-image: none;
1324 font-family: jqx-icons;
1325 }
1326 .jqx-grid-column-sortascbutton-blue:after,
1327 .jqx-expander-arrow-bottom-blue:after,
1328 .jqx-window-collapse-button-blue:after,
1329 .jqx-menu-item-arrow-up-blue:after,
1330 .jqx-menu-item-arrow-up-selected-blue:after,
1331 .jqx-menu-item-arrow-top-up-blue:after,
1332 .jqx-icon-arrow-up-blue:after,
1333 .jqx-icon-arrow-up-hover-blue:after,
1334 .jqx-icon-arrow-up-selected-blue:after {
1335 content: var(--jqx-icon-arrow-up);
1336 }
1337
1338 .jqx-widget-blue .jqx-grid-group-expand-blue,
1339 .jqx-grid-group-expand-blue,
1340 .jqx-grid-column-sortdescbutton-blue,
1341 .jqx-expander-arrow-top-blue,
1342 .jqx-window-collapse-button-collapsed-blue,
1343 .jqx-menu-item-arrow-down-blue,
1344 .jqx-menu-item-arrow-down-selected-blue,
1345 .jqx-menu-item-arrow-down-blue,
1346 .jqx-icon-arrow-down-blue,
1347 .jqx-icon-arrow-down-hover-blue,
1348 .jqx-icon-arrow-down-selected-blue {
1349 background-image: none;
1350 font-family: jqx-icons;
1351 }
1352 .jqx-widget-blue .jqx-grid-group-expand-blue:after,
1353 .jqx-grid-group-expand-blue:after,
1354 .jqx-grid-column-sortdescbutton-blue:after,
1355 .jqx-expander-arrow-top-blue:after,
1356 .jqx-window-collapse-button-collapsed-blue:after,
1357 .jqx-menu-item-arrow-down-blue:after,
1358 .jqx-menu-item-arrow-down-selected-blue:after,
1359 .jqx-menu-item-arrow-down-blue:after,
1360 .jqx-icon-arrow-down-blue:after,
1361 .jqx-icon-arrow-down-hover-blue:after,
1362 .jqx-icon-arrow-down-selected-blue:after {
1363 content: var(--jqx-icon-arrow-down);
1364 }
1365
1366 .jqx-tabs-arrow-left-blue,
1367 .jqx-menu-item-arrow-left-selected-blue,
1368 .jqx-menu-item-arrow-top-left,
1369 .jqx-icon-arrow-left-blue,
1370 .jqx-icon-arrow-down-left-blue,
1371 .jqx-icon-arrow-left-selected-blue {
1372 background-image: none;
1373 font-family: jqx-icons;
1374 background-repeat: no-repeat;
1375 background-position: center;
1376 }
1377 .jqx-tabs-arrow-left-blue:after,
1378 .jqx-menu-item-arrow-left-selected-blue:after,
1379 .jqx-menu-item-arrow-top-left:after,
1380 .jqx-icon-arrow-left-blue:after,
1381 .jqx-icon-arrow-down-left-blue:after,
1382 .jqx-icon-arrow-left-selected-blue:after {
1383 content: var(--jqx-icon-arrow-left);
1384 }
1385
1386 .jqx-widget-blue .jqx-grid-group-collapse-blue,
1387 .jqx-grid-group-collapse-blue,
1388 .jqx-tabs-arrow-right-blue,
1389 .jqx-menu-item-arrow-right-selected-blue,
1390 .jqx-menu-item-arrow-top-right-blue,
1391 .jqx-icon-arrow-right-blue,
1392 .jqx-icon-arrow-right-hover-blue,
1393 .jqx-icon-arrow-right-selected-blue {
1394 background-image: none;
1395 font-family: jqx-icons;
1396 background-repeat: no-repeat;
1397 background-position: center;
1398 }
1399 .jqx-widget-blue .jqx-grid-group-collapse-blue:after,
1400 .jqx-grid-group-collapse-blue:after,
1401 .jqx-tabs-arrow-right-blue:after,
1402 .jqx-menu-item-arrow-right-selected-blue:after,
1403 .jqx-menu-item-arrow-top-right-blue:after,
1404 .jqx-icon-arrow-right-blue:after,
1405 .jqx-icon-arrow-right-hover-blue:after,
1406 .jqx-icon-arrow-right-selected-blue:after {
1407 content: var(--jqx-icon-arrow-right);
1408 }
1409
1410 .jqx-tree-item-arrow-collapse-rtl-blue,
1411 .jqx-tree-item-arrow-collapse-hover-rtl-blue {
1412 background-image: none;
1413 }
1414
1415 .jqx-tree-item-arrow-collapse-rtl-blue:after,
1416 .jqx-tree-item-arrow-collapse-hover-rtl-blue:after {
1417 content: var(--jqx-icon-arrow-left);
1418 }
1419
1420 .jqx-menu-item-arrow-left-selected-blue {
1421 background-image: none;
1422 }
1423
1424 .jqx-menu-item-arrow-right-selected-blue {
1425 background-image: none;
1426 }
1427
1428 .jqx-input-button-content-blue {
1429 font-size: 10px;
1430 }
1431
1432 .jqx-widget .jqx-grid-column-header-cell-blue {
1433 padding-top: 8px;
1434 padding-bottom: 8px;
1435 height:30px;
1436 }
1437
1438 .jqx-widget .jqx-grid-row-cell-blue {
1439 padding-top: 8px;
1440 padding-bottom: 8px;
1441 height:30px;
1442 }
1443
1444 .jqx-listbox-container-blue,
1445 .jqx-calendar-container-blue {
1446 margin-left: -10px;
1447 }
1448 .jqx-calendar-blue.jqx-popup,
1449 .jqx-listbox-blue.jqx-popup {
1450 margin-left: 9px;
1451 }
1452
1453 .jqx-dropdownbutton-popup,
1454 .jqx-calendar-blue.jqx-popup,
1455 .jqx-listbox-blue.jqx-popup,
1456 .jqx-grid-menu.jqx-popup {
1457 transition: transform 0.25s ease-in-out, opacity 0.35s ease-in-out;
1458 transform: scaleY(0);
1459 opacity: 0;
1460 transform-origin: top left;
1461 display: block !important;
1462 }
1463
1464 .jqx-dropdownbutton-popup.jqx-popup-show,
1465 .jqx-calendar-blue.jqx-popup-show,
1466 .jqx-listbox-blue.jqx-popup-show,
1467 .jqx-grid-menu.jqx-popup-show {
1468 transform: scaleY(1);
1469 opacity: 1;
1470 }
1471
1472 .jqx-widget-blue .jqx-grid-cell {
1473 border-color: var(--jqx-border);
1474 color: var(--jqx-background-color);
1475 }
1476
1477 .jqx-widget-blue .jqx-grid-column-header, .jqx-widget-blue .jqx-grid-group-cell {
1478 border-color: var(--jqx-border);
1479 color: var(--jqx-surface-color);
1480 background: var(--jqx-surface);
1481 }
1482
1483 .jqx-widget-blue .jqx-grid-column-header-blue {
1484 border-color: var(--jqx-border);
1485 font-size: 12px;
1486 color: var(--jqx-surface-color);
1487 font-weight: 500;
1488 }
1489 .jqx-widget-blue .jqx-grid-cell-blue {
1490 border-color: var(--jqx-border);
1491 }
1492 .jqx-widgets-blue .jqx-scheduler-cell-selected span{
1493 color: var(--jqx-background) !important;
1494 }
1495 .jqx-scheduler-time-column-blue,
1496 .jqx-scheduler-toolbar-blue {
1497 background: var(--jqx-surface) !important;
1498 color: var(--jqx-surface-color) !important;
1499 border-color: var(--jqx-border) !important;
1500 }
1501
1502 .jqx-widget-blue.jqx-scheduler-blue .jqx-grid-cell-blue,
1503 .jqx-widget-blue.jqx-scheduler-blue .jqx-grid-column-header-blue {
1504 border-color: transparent;
1505 border-bottom-color: var(--jqx-border);
1506 }
1507
1508 .jqx-widget-blue.jqx-scheduler-blue td.jqx-grid-cell-blue span{
1509 font-size: 10px;
1510 color: var(--jqx-background-color);
1511 }
1512 .jqx-widget-blue.jqx-scheduler-blue td.jqx-grid-cell-blue.jqx-scheduler-cell-hover span,
1513 .jqx-widget-blue.jqx-scheduler-blue td.jqx-grid-cell-blue.jqx-scheduler-cell-selected span{
1514 color:var(--jqx-primary-color);
1515 }
1516
1517 .jqx-passwordinput-password-icon-blue,
1518 .jqx-passwordinput-password-icon-rtl-blue {
1519 background-image: none;
1520 font-family: jqx-icons;
1521 color:var(--jqx-background-color);
1522 }
1523 .jqx-passwordinput-password-icon-blue:after,
1524 .jqx-passwordinput-password-icon-rtl-blue:after {
1525 content: var(--jqx-icon-visibility);
1526 }
1527
1528 .jqx-combobox-blue .jqx-icon-close-blue {
1529 background-image: none;
1530 font-family: jqx-icons;
1531 }
1532
1533 .jqx-combobox-blue .jqx-icon-close-blue:after {
1534 content: var(--jqx-icon-close);
1535 }
1536 .jqx-combobox-blue, .jqx-input-blue {
1537 border-color: var(--jqx-border);
1538 color: var(--jqx-background-color);
1539 background-color: var(--jqx-background);
1540 }
1541
1542 .jqx-combobox-content-blue,
1543 .jqx-datetimeinput-content-blue
1544 {
1545 border-color: transparent;
1546 }
1547
1548
1549 .jqx-combobox-content-focus-blue,
1550 .jqx-combobox-state-focus-blue,
1551 .jqx-numberinput-focus-blue {
1552 outline: none;
1553 }
1554
1555 .jqx-input-group-blue {
1556 position: relative;
1557 display: inline-block;
1558 overflow: visible;
1559 border: none;
1560 box-shadow: none;
1561 }
1562
1563 .jqx-input-group-blue input {
1564 width: 100%;
1565 height: 100%;
1566 box-sizing: border-box;
1567 }
1568 .jqx-input-group-blue textarea {
1569 width: 100%;
1570 height: 100%;
1571 outline: none;
1572 resize: none;
1573 border-left: none;
1574 border-right: none;
1575 border-top: none;
1576 border-bottom-color: var(--jqx-border);
1577 }
1578 .jqx-numberinput-blue,
1579 .jqx-maskedinput-blue
1580 {
1581 position:relative;
1582 }
1583 .jqx-numberinput-blue input {
1584 height:100% !important;
1585 }
1586
1587 .jqx-input-blue.jqx-validator-error-element {
1588 border-color: transparent !important;
1589 border-bottom: 1px solid #df2227 !important;
1590 }
1591 .jqx-input-blue input,
1592 .jqx-dropdownlist-state-normal-blue,
1593 .jqx-combobox-state-normal-blue,
1594 .jqx-numberinput-blue,
1595 .jqx-maskedinput-blue,
1596 .jqx-datetimeinput-blue
1597 {
1598 background: var(--jqx-surface);
1599 border-color: var(--jqx-surface);
1600 border-radius: 0;
1601 color: var(--jqx-surface-color);
1602 box-shadow: none;
1603 border-bottom: 1px solid var(--jqx-border);
1604 outline: none;
1605 }
1606 .jqx-numberinput-blue .jqx-action-button-blue{
1607 border-radius: 0;
1608 font-size:12px;
1609 }
1610 .jqx-numberinput-blue .jqx-action-button-blue > div {
1611 width: 100%;
1612 display: flex;
1613 align-items: center;
1614 justify-content: center;
1615 }
1616 .jqx-maskedinput-blue,
1617 .jqx-combobox-blue,
1618 .jqx-datetimeinput-blue {
1619 background: var(--jqx-background);
1620 color: var(--jqx-background-color);
1621 border-color: var(--jqx-background);
1622 border-bottom: 1px solid var(--jqx-border);
1623 }
1624 .jqx-combobox-blue .jqx-combobox-arrow-normal-blue,
1625 .jqx-datetimeinput-blue .jqx-action-button-blue,
1626 .jqx-datetimeinput-blue .jqx-action-button-rtl-blue
1627 {
1628 background-color: var(--jqx-surface);
1629 border-color: var(--jqx-surface);
1630 color:var(--jqx-surface-color);
1631 }
1632 .jqx-datetimeinput-blue, .jqx-datetimeinput-blue > div,
1633 .jqx-numberinput-blue, .jqx-numberinput-blue > div,
1634 .jqx-maskedinput-blue, .jqx-maskedinput-blue > div,
1635 .jqx-dropdownlist-state-normal-blue, .jqx-dropdownlist-state-normal-blue > div, .jqx-dropdownlist-state-normal-blue > div > div,
1636 .jqx-combobox-state-normal-blue, .jqx-combobox-state-normal-blue > div, .jqx-combobox-state-normal-blue > div > div {
1637 overflow: visible !important;
1638 }
1639
1640 .jqx-input-blue input:focus {
1641 border-radius: 0;
1642 box-shadow: none;
1643 }
1644
1645 .jqx-input-blue input, input[type="text"].jqx-input-blue, input[type="password"].jqx-input-blue, input[type="text"].jqx-widget-content-blue, input[type="textarea"].jqx-widget-content-blue, textarea.jqx-input-blue {
1646 font-size: var(--jqx-font-size);
1647 font-family: var(--jqx-font-family);
1648 resize: none;
1649 background: var(--jqx-background);
1650 color: var(--jqx-background-color);
1651 border: none;
1652 border-radius: 0;
1653 box-sizing:border-box;
1654 box-shadow: none;
1655 border-bottom: 1px solid var(--jqx-border);
1656 }
1657
1658 input[type="text"].jqx-widget-content-blue,
1659 input[type="textarea"].jqx-widget-content-blue {
1660 height: 100%;
1661 }
1662
1663
1664 .jqx-input-label {
1665 visibility:inherit;
1666 }
1667 .jqx-input-bar{
1668 visibility:inherit;
1669 }
1670 input:focus ~ .jqx-input-label-blue,
1671 textarea:focus ~ .jqx-input-label-blue,
1672 .jqx-input-widget-blue[hint=true] .jqx-input-label,
1673 .jqx-text-area-blue[hint=true] .jqx-input-label,
1674 .jqx-dropdownlist-state-selected-blue .jqx-input-label,
1675 .jqx-dropdownlist-state-normal-blue[hint=true] .jqx-input-label,
1676 .jqx-combobox-state-normal-blue[hint=true] .jqx-input-label,
1677 .jqx-combobox-blue .jqx-input-label.focused,
1678 .jqx-dropdownlist-blue .jqx-input-label.focused,
1679 .jqx-datetimeinput-blue[hint=true] .jqx-input-label,
1680 .jqx-maskedinput-blue[hint=true] .jqx-input-label,
1681 .jqx-numberinput-blue[hint=true] .jqx-input-label,
1682 .jqx-formattedinput-blue[hint=true] .jqx-input-label
1683 {
1684 top: -15px;
1685 font-size: 12px;
1686 color: var(--jqx-primary);
1687 opacity: 1;
1688 }
1689 .jqx-dropdownlist-blue[default-placeholder="true"] .jqx-input-label {
1690 visibility: hidden;
1691 }
1692
1693
1694 input:focus ~ .jqx-input-bar:before,
1695 textarea:focus ~ .jqx-input-bar:before,
1696 .jqx-dropdownlist-state-selected-blue .jqx-input-bar:before,
1697 .jqx-dropdownlist-blue .jqx-input-bar.focused:before,
1698 .jqx-combobox-blue .jqx-input-bar.focused:before,
1699 .jqx-complex-input-group-blue .jqx-input-bar.focused::before,
1700 .jqx-combobox-state-selected-blue .jqx-input-bar:before {
1701 width: 100%;
1702 }
1703 .jqx-complex-input-group-blue .jqx-fill-state-normal-blue {
1704 border-color: var(--jqx-border);
1705 }
1706 input[type="password"] {
1707 letter-spacing: 0.3em;
1708 }
1709
1710 .jqx-input-widget-blue.jqx-rtl > input {
1711 direction: rtl
1712 }
1713
1714 .jqx-input-label-blue {
1715 color: var(--jqx-background-color);
1716 font-size: 14px;
1717 font-weight: normal;
1718 position: absolute;
1719 pointer-events: none;
1720 left: 2px;
1721 top:10px;
1722 opacity: 0;
1723 top: calc(50% - 7px);
1724 transition: 300ms ease all;
1725 }
1726 .jqx-input-label.initial {
1727 transition: none;
1728 }
1729 .jqx-input-bar-blue {
1730 position: relative;
1731 display: block;
1732 z-index:1;
1733 }
1734
1735 .jqx-input-bar-blue:before {
1736 content: '';
1737 height: 2px;
1738 width: 0;
1739 bottom: 0px;
1740 position: absolute;
1741 background: var(--jqx-primary);
1742 transition: 300ms ease all;
1743 left: 0%;
1744 }
1745 .jqx-formatted-input-spin-button-blue, .jqx-input-group-addon-blue {
1746 border-color: var(--jqx-background);
1747 color: var(--jqx-background-color);
1748 background: var(--jqx-background);
1749 }
1750 .jqx-dropdownlist-state-selected-blue,
1751 .jqx-combobox-state-selected-blue {
1752 color: var(--jqx-primary);
1753 background: var(--jqx-primary-color);
1754 border-color: var(--jqx-primary-color);
1755 }
1756
1757
1758 .jqx-dropdownlist-state-normal-blue .jqx-icon-arrow-down-blue,
1759 .jqx-combobox-state-normal-blue .jqx-icon-arrow-down-blue,
1760 .sorticon.descending .jqx-grid-column-sorticon-blue,
1761 .jqx-tree-item-arrow-expand-blue,
1762 .jqx-expander-header-blue .jqx-icon-arrow-down
1763 {
1764 transform: rotate(0deg);
1765 display: flex;
1766 align-items: center;
1767 transition: transform 0.2s ease-out;
1768 }
1769 .jqx-expander-header-blue .jqx-icon-arrow-up {
1770 transform: rotate(180deg);
1771 transition: transform 0.2s ease-out;
1772 font-family: jqx-icons;
1773 background-image: none;
1774 }
1775 .jqx-expander-header-blue .jqx-icon-arrow-up:after {
1776 content: var(--jqx-icon-arrow-down);
1777 }
1778 .jqx-tree-item-arrow-expand-blue,
1779 .jqx-tree-item-arrow-collapse-blue
1780 {
1781 font-size: 16px;
1782 }
1783 .jqx-tree-item-arrow-expand-blue {
1784 transform: rotate(180deg);
1785 }
1786
1787 .jqx-tree-item-arrow-expand-blue:after {
1788 content: var(--jqx-icon-arrow-up);
1789 margin-left: 2px;
1790 }
1791 .jqx-tree-item-arrow-collapse-blue
1792 {
1793 transform: rotate(0deg);
1794 background-image: none;
1795 background-repeat: no-repeat;
1796 background-position: center;
1797 transition: transform 0.2s ease-out;
1798 }
1799 .jqx-dropdownlist-state-selected-blue .jqx-icon-arrow-down-blue,
1800 .jqx-combobox-state-selected-blue .jqx-icon-arrow-down-blue,
1801 .sorticon.ascending .jqx-grid-column-sorticon-blue
1802 {
1803 display: flex;
1804 align-items: center;
1805 transform: rotate(180deg);
1806 transition: transform 0.2s ease-out;
1807 left: -1px;
1808 }
1809 .jqx-combobox-state-selected-blue .jqx-icon-arrow-down-blue{
1810 left:-1px;
1811 }
1812 .jqx-listbox-container {
1813 margin-top: 1px;
1814 }
1815
1816 input[type="text"].jqx-input-blue:-moz-placeholder, input[type="text"].jqx-widget-content-blue:-moz-placeholder, input[type="textarea"].jqx-widget-content-blue:-moz-placeholder, textarea.jqx-input-blue:-moz-placeholder {
1817 color: #999999;
1818 }
1819
1820 input[type="text"].jqx-input-blue:-webkit-input-placeholder, input[type="text"].jqx-widget-content-blue:-webkit-input-placeholder, input[type="textarea"].jqx-widget-content-blue:-webkit-input-placeholder, textarea.jqx-input-blue:-webkit-input-placeholder {
1821 color: #999999;
1822 }
1823
1824 input[type="text"].jqx-input-blue:-ms-input-placeholder, input[type="text"].jqx-widget-content-blue:-ms-input-placeholder, input[type="textarea"].jqx-widget-content-blue:-ms-input-placeholder, textarea.jqx-input-blue:-ms-input-placeholder {
1825 color: #999999;
1826 }
1827
1828 .jqx-combobox-content-focus-blue, .jqx-combobox-state-focus-blue, .jqx-fill-state-focus-blue,
1829 .jqx-numberinput-focus-blue {
1830 outline: none;
1831 }
1832
1833 .jqx-popup-blue.jqx-fill-state-focus-blue {
1834 outline: none;
1835 border-color: var(--jqx-border) !important;
1836 }
1837
1838 .jqx-datetimeinput-content, .jqx-datetimeinput-container {
1839 overflow: visible !important;
1840 }
1841 .jqx-text-area-blue, .jqx-text-area-blue > div {
1842 overflow:visible !important;
1843 }
1844 .jqx-text-area-element-blue {
1845 box-sizing: border-box;
1846 }
1847 .jqx-pivotgrid-content-wrapper.jqx-fill-state-normal-blue {
1848 border-color: var(--jqx-border);
1849 }
1850
1851 .jqx-grid-cell-blue.jqx-grid-cell-selected-blue > .jqx-grid-group-expand-blue {
1852 background-image: none;
1853 }
1854
1855 .jqx-grid-cell-blue.jqx-grid-cell-selected-blue > .jqx-grid-group-collapse-blue {
1856 background-image: none;
1857 }
1858
1859 .jqx-grid-cell-blue.jqx-grid-cell-selected-blue > .jqx-grid-group-collapse-rtl-blue {
1860 background-image: none;
1861 }
1862
1863 .jqx-grid-cell-blue.jqx-grid-cell-selected-blue > .jqx-grid-group-expand-rtl-blue {
1864 background-image: none;
1865 }
1866 .jqx-tabs-title-selected-top-blue, .jqx-tabs-selection-tracker-top-blue {
1867 border-color: transparent;
1868 filter: none;
1869 background: inherit;
1870 color: inherit;
1871 -webkit-box-shadow: none;
1872 -moz-box-shadow: none;
1873 box-shadow: none;
1874 }
1875 .jqx-grid-cell-filter-row-blue {
1876 background-color: var(--jqx-surface);
1877 }
1878
1879 .jqx-tabs-title-blue, .jqx-ribbon-item-blue {
1880 color: inherit;
1881 }
1882 .jqx-ribbon-item-selected-blue {
1883 background: inherit;
1884 }
1885 .jqx-tabs-title-selected-bottom-blue,
1886 .jqx-tabs-title-selected-top-blue
1887 {
1888 color: var(--jqx-primary);
1889 font-weight:500;
1890 padding-top:5px;
1891 padding-bottom:5px;
1892 }
1893 .jqx-tabs-title.jqx-fill-state-hover-blue {
1894 border-color: transparent;
1895 }
1896 .jqx-ribbon-item-blue {
1897 cursor: pointer;
1898 }
1899 .jqx-ribbon-item-selected-blue {
1900 color: var(--jqx-primary);
1901 font-weight:500;
1902 border-color: transparent;
1903 }
1904
1905 .jqx-ribbon-item-hover-blue {
1906 background: transparent;
1907 }
1908
1909 .jqx-ribbon-header-top-blue {
1910 border-color: transparent;
1911 border-bottom-color: var(--jqx-border);
1912 }
1913
1914 .jqx-ribbon-header-bottom-blue {
1915 border-color: transparent;
1916 border-top-color: var(--jqx-border);
1917 }
1918
1919 .jqx-ribbon-header-right-blue {
1920 border-color: transparent;
1921 border-left-color:var(--jqx-border);
1922 }
1923
1924 .jqx-ribbon-header-left-blue {
1925 border-color: transparent;
1926 border-right-color:var(--jqx-border);
1927 }
1928
1929 .jqx-tabs-title-selected-bottom-blue, .jqx-tabs-selection-tracker-bottom-blue {
1930 border-color: transparent;
1931 border-top: 1px solid var(--jqx-background);
1932 filter: none;
1933 background: var(--jqx-background);
1934 -webkit-box-shadow: none;
1935 -moz-box-shadow: none;
1936 box-shadow: none;
1937 }
1938
1939 .jqx-tabs-blue, .jqx-ribbon-blue {
1940 border-color: transparent;
1941 }
1942
1943 .jqx-tabs-header-blue {
1944 background: transparent;
1945 }
1946 .jqx-ribbon-header-blue {
1947 background: var(--jqx-surface);
1948 color: var(--jqx-surface-color);
1949 }
1950 .jqx-tabs-position-bottom .jqx-tabs-header-blue {
1951 border-color: transparent;
1952 }
1953 .jqx-layout-blue .jqx-tabs-header-blue, .jqx-layout-blue .jqx-ribbon-header-blue {
1954 background: var(--jqx-background);
1955 border-color: var(--jqx-border);
1956 }
1957 .jqx-tabs-title-bottom {
1958 border-color: transparent;
1959 }
1960 .jqx-tabs-title-hover-top-blue, .jqx-tabs-title-hover-bottom-blue, .jqx-tabs-header-blue {
1961 -webkit-box-shadow: none !important;
1962 -moz-box-shadow: none !important;
1963 box-shadow: none !important;
1964 background: var(--jqx-surface);
1965 color: var(--jqx-surface-color);
1966 }
1967
1968 .jqx-tabs-content-blue {
1969 box-sizing: border-box;
1970 border: 1px solid var(--jqx-border);
1971 border-top-color: transparent;
1972 padding:5px;
1973 }
1974 .jqx-tabs-bar-blue {
1975 position: absolute;
1976 bottom: 0;
1977 background: var(--jqx-primary);
1978 height: 2px;
1979 z-index:10;
1980 transition: .5s cubic-bezier(.35,0,.25,1);
1981 }
1982 .jqx-tabs-bar-blue.vertical {
1983 width: 2px;
1984 }
1985 .jqx-tabs-position-bottom .jqx-tabs-bar-blue {
1986 top: 0;
1987 }
1988
1989
1990 .jqx-layout-blue {
1991 background-color: var(--jqx-background);
1992 }
1993
1994 .jqx-kanban-column-header-collapsed-blue {
1995 background: var(--jqx-surface);
1996 color: var(--jqx-surface-color);
1997 }
1998
1999 .jqx-calendar-cell-blue {
2000 border-radius: 0px;
2001 font-size:12px;
2002 }
2003 .jqx-calendar-cell-blue.jqx-fill-state-pressed-blue {
2004 outline: 2px var(--jqx-primary);
2005 overflow: hidden;
2006 position: relative;
2007 }
2008 .jqx-calendar-cell-blue.jqx-fill-state-pressed-blue:after {
2009 content: '';
2010 width: calc(100% - 4px);
2011 position: absolute;
2012 left: 0px;
2013 top: 0px;
2014 height: calc(100% - 4px);
2015 border: 2px solid var(--jqx-background);
2016 }
2017 .jqx-calendar-cell-year-blue,
2018 .jqx-calendar-cell-decade-blue {
2019 border-radius: 25%;
2020 }
2021 .jqx-calendar-title-content-blue {
2022 font-weight:bold;
2023 }
2024 .jqx-calendar-column-cell-blue {
2025 color: var(--jqx-background-color);
2026 font-size:12px;
2027 }
2028
2029 .jqx-icon-time-blue,
2030 .jqx-icon-time-hover-blue,
2031 .jqx-icon-time-pressed-blue {
2032 background-image: none;
2033 font-family: 'jqx-icons';
2034 display: flex;
2035 font-family: 'jqx-icons';
2036 font-size: 16px;
2037 align-content: center;
2038 justify-content: center;
2039 left: initial !important;
2040 margin-top: 0px;
2041 top: 0px;
2042 left: 0px;
2043 margin: 0;
2044 align-items: center;
2045 width: 100%;
2046 height: 100%;
2047 }
2048
2049 .jqx-icon-time-blue:after,
2050 .jqx-icon-time-hover-blue:after,
2051 .jqx-icon-time-pressed-blue:after {
2052 content: var(--jqx-icon-arrow-down);
2053 }
2054
2055 .jqx-icon-calendar-blue,
2056 .jqx-icon-calendar-hover-blue,
2057 .jqx-icon-calendar-pressed-blue {
2058 background-image: none;
2059 font-family: 'jqx-icons';
2060 left: 0;
2061 top: 0 !important;
2062 margin: 0 !important;
2063 display: flex;
2064 justify-content: center;
2065 align-items: center;
2066 width: 100% !important;
2067 height: 100% !important;
2068 }
2069 .jqx-icon-calendar-blue:after,
2070 .jqx-icon-calendar-hover-blue:after,
2071 .jqx-icon-calendar-pressed-blue:after {
2072 content: var(--jqx-icon-calendar);
2073 }
2074
2075 .jqx-tabs-close-button-blue,
2076 .jqx-tabs-close-button-selected-blue,
2077 .jqx-tabs-close-button-hover-blue {
2078 background-image: none;
2079 }
2080
2081 .jqx-tabs-close-button-blue:after {
2082 content: var(--jqx-icon-close);
2083 }
2084
2085 .jqx-scrollbar-button-state-pressed-blue .jqx-icon-arrow-up-selected-blue {
2086 background-image: none;
2087 }
2088
2089 .jqx-scrollbar-button-state-pressed-blue .jqx-icon-arrow-down-selected-blue {
2090 background-image: none;
2091 }
2092
2093 .jqx-scrollbar-button-state-pressed-blue .jqx-icon-arrow-left-selected-blue {
2094 background-image: none;
2095 }
2096
2097 .jqx-scrollbar-button-state-pressed-blue .jqx-icon-arrow-right-selected-blue {
2098 background-image: none;
2099 }
2100
2101 .jqx-grid-cell-blue.jqx-grid-cell-selected-blue > .jqx-grid-group-expand-blue {
2102 background-image: none;
2103 }
2104
2105 .jqx-grid-cell-blue.jqx-grid-cell-selected-blue > .jqx-grid-group-collapse-blue {
2106 background-image: none;
2107 }
2108
2109 .jqx-grid-cell-blue.jqx-grid-cell-selected-blue > .jqx-grid-group-collapse-rtl-blue {
2110 background-image: none;
2111 }
2112
2113 .jqx-grid-cell-blue.jqx-grid-cell-selected-blue > .jqx-grid-group-expand-rtl-blue {
2114 background-image: none;
2115 }
2116
2117 .jqx-grid-group-collapse-blue {
2118 background-image: none;
2119 }
2120
2121 .jqx-grid-group-collapse-rtl-blue {
2122 background-image: none;
2123 }
2124
2125 .jqx-grid-group-expand-blue, .jqx-grid-group-expand-rtl-blue {
2126 background-image: none;
2127 }
2128
2129 .jqx-icon-arrow-first-blue,
2130 .jqx-icon-arrow-last-blue {
2131 background-image: none;
2132 font-family: jqx-icons;
2133 }
2134 .jqx-icon-arrow-first-blue:after {
2135 content: var(--jqx-icon-first-page);
2136 }
2137 .jqx-icon-arrow-last-blue:after {
2138 content: var(--jqx-icon-last-page);
2139 }
2140
2141 /* Ripple effect */
2142 .ripple {
2143 position: relative;
2144 transform: translate3d(0, 0, 0);
2145 overflow:hidden;
2146 }
2147
2148 .ink {
2149 display: block;
2150 position: absolute;
2151 pointer-events: none;
2152 border-radius: 0%;
2153 transform: scaleX(0);
2154 background: rgba(var(--jqx-primary-rgb),0.5);
2155 opacity: 0.25;
2156 }
2157
2158
2159 .outlined .ink, .flat .ink {
2160 background: rgba(var(--jqx-primary-rgb),0.5);
2161 overflow:hidden;
2162 }
2163
2164 .ink.animate {
2165 animation: ripple .7s ease;
2166 animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2167 }
2168
2169 .jqx-tree-blue .jqx-checkbox-blue {
2170 margin-top: 6px !important;
2171 border-radius: 0px !important;
2172 }
2173 .jqx-tree-item-arrow-expand-blue,
2174 .jqx-tree-item-arrow-collapse-blue {
2175 margin-top: 6px !important;
2176 }
2177
2178 .jqx-checkbox-blue .ripple,
2179 .jqx-radiobutton-blue .ripple
2180 {
2181 overflow:visible;
2182 }
2183 .jqx-checkbox-blue .ink,
2184 .jqx-radiobutton-blue .ink
2185 {
2186 transform: scale(0);
2187 background: var(--jqx-primary);
2188 border-radius: 50%;
2189 }
2190 .jqx-checkbox-blue .ink.animate,
2191 .jqx-radiobutton-blue .ink.animate
2192 {
2193 animation: checkRipple 0.3s ease;
2194 animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2195 }
2196 .jqx-checkbox-blue .ink.active,
2197 .jqx-radiobutton-blue .ink.active
2198 {
2199 opacity: 0.2;
2200 transform: scale(2);
2201 }
2202 .jqx-checkbox-default-blue.active .ink,
2203 .jqx-radiobutton-default-blue.active .ink
2204 {
2205 opacity: 0.2;
2206 transform: scale(2);
2207 }
2208
2209 /* Ripple effect */
2210 /* Ripple effect */
2211 .buttonRipple {
2212 background-position: center;
2213 transition: background 0.8s;
2214 }
2215 .buttonRipple.jqx-button-blue.jqx-fill-state-hover {
2216 color: var(--jqx-background-color-hover);
2217 background: var(--jqx-background-hover) radial-gradient(circle, transparent 1%, var(--jqx-background-hover) 1%) center/15000%;
2218 }
2219 .buttonRipple.jqx-button-blue.jqx-fill-state-pressed {
2220 color: var(--jqx-background-color-hover);
2221 background-color: rgba(var(--jqx-background-hover-rgb), 0.5);
2222 background-size: 100%;
2223 transition: background 0s;
2224 }
2225 .buttonRipple.jqx-button-blue.jqx-fill-state-hover.primary {
2226 color: var(--jqx-primary-color);
2227 background: var(--jqx-primary) radial-gradient(circle, transparent 1%, var(--jqx-primary) 1%) center/15000%;
2228 }
2229 .buttonRipple.jqx-button-blue.jqx-fill-state-pressed.primary {
2230 color: var(--jqx-primary-color);
2231 background-color: rgba(var(--jqx-primary-rgb), 0.8);
2232 background-size: 100%;
2233 transition: background 0s;
2234 }
2235
2236 @keyframes ripple {
2237 100% {
2238 opacity: 0;
2239 transform: scale(5);
2240 animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2241 }
2242 }
2243 @keyframes checkRipple {
2244 100% {
2245 opacity: 0.2;
2246 transform: scale(2);
2247 animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2248 }
2249 }
2250
2251 .jqx-fill-state-pressed-blue .jqx-icon-delete-blue
2252 {
2253 background-image: url('images/icon-delete-white.png');
2254 }
2255 .jqx-fill-state-pressed-blue .jqx-icon-edit-blue
2256 {
2257 background-image: url('images/icon-edit-white.png');
2258 }
2259 .jqx-fill-state-pressed-blue .jqx-icon-save-blue
2260 {
2261 background-image: url('images/icon-save-white.png');
2262 }
2263 .jqx-fill-state-pressed-blue .jqx-icon-cancel-blue
2264 {
2265 background-image: url('images/icon-cancel-white.png');
2266 }
2267 .jqx-fill-state-pressed-blue .jqx-icon-search-blue
2268 {
2269 background-image: url('images/search_white.png');
2270 }
2271 .jqx-fill-state-pressed-blue .jqx-icon-plus-blue
2272 {
2273 background-image: url('images/plus_white.png');
2274 }
2275 .jqx-fill-state-pressed-blue .jqx-menu-minimized-button-blue {
2276 background-image: url('images/icon-menu-minimized-white.png');
2277 }
2278
2279
2280 .jqx-editor-toolbar-icon-blue {
2281 background: url('images/html_editor_white.png') no-repeat;
2282 }
2283
2284 .jqx-fill-state-hover-blue .jqx-editor-toolbar-icon-fontsize-blue,
2285 .jqx-fill-state-pressed-blue .jqx-editor-toolbar-icon-fontsize-blue,
2286 .jqx-fill-state-hover-blue .jqx-editor-toolbar-icon-forecolor-blue,
2287 .jqx-fill-state-pressed-blue .jqx-editor-toolbar-icon-forecolor-blue
2288 {
2289 background: url('images/html_editor.png') no-repeat;
2290 }
2291
2292 .jqx-editor-toolbar-button-blue{
2293 border-color: var(--jqx-border);
2294 box-shadow: none !important;
2295 color: var(--jqx-background-color);
2296 }
2297
2298 .jqx-time-picker .jqx-main-container {
2299 background: var(--jqx-background);
2300 }
2301
2302 /*applied to the timepicker*/
2303 .jqx-needle-central-circle-blue {
2304 fill: var(--jqx-primary);
2305 }
2306 .jqx-time-picker-blue .jqx-label-blue {
2307 fill: var(--jqx-background-color);
2308 }
2309 .jqx-needle-blue {
2310 fill: var(--jqx-primary);
2311 }
2312 .jqx-time-picker .jqx-header .jqx-selected-blue:focus {
2313 outline: 2px solid var(--jqx-primary);
2314 box-shadow: 0px 0px 4px 2px rgba(0, 119, 190, 0.125);
2315 }
2316 .jqx-svg-picker-blue:focus {
2317 border: 1px solid var(--jqx-primary) !important;
2318 }
2319 .jqx-validator-hint-blue {
2320 background: #D94F43;
2321 border-color: #D94F43;
2322 padding: 10px;
2323 }
2324 .jqx-validator-hint-blue img {
2325 display: none;
2326 }

mercurial