1 | .ui-jqgrid {
|
---|
2 | .ui-jqgrid-view,
|
---|
3 | .ui-paging-info,
|
---|
4 | .ui-pg-table,
|
---|
5 | .ui-pg-selbox {
|
---|
6 | font-size: @baseFontSize;
|
---|
7 | }
|
---|
8 |
|
---|
9 | .ui-jqgrid-title {
|
---|
10 | float: left;
|
---|
11 | margin: 8px;
|
---|
12 | }
|
---|
13 | .ui-jqgrid-title-rtl {
|
---|
14 | float:right;
|
---|
15 | margin: 8px;
|
---|
16 | }
|
---|
17 | }
|
---|
18 |
|
---|
19 |
|
---|
20 | .ui-jqgrid-view > .ui-jqgrid-titlebar {
|
---|
21 | height: 40px;
|
---|
22 | line-height: 24px;
|
---|
23 | color: #FFF;
|
---|
24 | background: @table-header-bg;
|
---|
25 | padding:0;
|
---|
26 | font-size:15px;
|
---|
27 | }
|
---|
28 |
|
---|
29 |
|
---|
30 | .ui-jqgrid tr.jqgrow.ui-row-rtl td:last-child {
|
---|
31 | border-right:none;
|
---|
32 | border-left:1px solid #E1E1E1;
|
---|
33 | }
|
---|
34 |
|
---|
35 | .ui-jqgrid .ui-jqgrid-hdiv {
|
---|
36 | background-color:@modal-footer-bg;
|
---|
37 | border: 1px solid #D3D3D3;
|
---|
38 | border-width:1px 0 0 1px;
|
---|
39 |
|
---|
40 | line-height: 15px;
|
---|
41 | font-weight: bold;
|
---|
42 | color: #777;
|
---|
43 | text-shadow: none;
|
---|
44 | }
|
---|
45 |
|
---|
46 |
|
---|
47 | .ui-jqgrid .ui-jqgrid-htable {
|
---|
48 | thead {
|
---|
49 | background-color:@modal-footer-bg;
|
---|
50 | }
|
---|
51 | th span.ui-jqgrid-resize {
|
---|
52 | height: 45px !important;
|
---|
53 | }
|
---|
54 | th div {
|
---|
55 | padding-top: 12px;
|
---|
56 | padding-bottom: 12px;
|
---|
57 | }
|
---|
58 | }
|
---|
59 |
|
---|
60 |
|
---|
61 | .ui-jqgrid-hdiv .ui-jqgrid-htable {
|
---|
62 | border-top:none;
|
---|
63 | }
|
---|
64 | //when titlebar is hidden
|
---|
65 | .ui-jqgrid-hdiv .ui-jqgrid-htable {
|
---|
66 | border-top:1px solid #E1E1E1;
|
---|
67 | }
|
---|
68 |
|
---|
69 | .ui-jqgrid-titlebar {
|
---|
70 | position:relative;
|
---|
71 | top:1px;//so it will cover the .ui-jqgrid-htable border if it's visible
|
---|
72 | z-index:1;
|
---|
73 | }
|
---|
74 |
|
---|
75 |
|
---|
76 | .ui-jqgrid {
|
---|
77 | tr.jqgrow , tr.ui-row-ltr , tr.ui-row-rtl{
|
---|
78 | border:none;
|
---|
79 | }
|
---|
80 | tr.ui-row-ltr td, tr.ui-row-rtl td {
|
---|
81 | border-bottom: 1px solid #E1E1E1;
|
---|
82 | padding:6px 4px;
|
---|
83 | border-color:#E1E1E1;
|
---|
84 | }
|
---|
85 |
|
---|
86 | tr.ui-state-highlight.ui-row-ltr td {
|
---|
87 | border-right-color:#C7D3A9;
|
---|
88 | }
|
---|
89 | tr.ui-state-highlight.ui-row-rtl td {
|
---|
90 | border-left-color:#C7D3A9;
|
---|
91 | }
|
---|
92 | }
|
---|
93 |
|
---|
94 | .ui-jqgrid-btable .ui-widget-content {
|
---|
95 | &.ui-priority-secondary{
|
---|
96 | background-image:none;
|
---|
97 | background-color: #F9F9F9;
|
---|
98 | opacity: 1;
|
---|
99 | }
|
---|
100 | &.ui-state-hover {
|
---|
101 | background-image:none;
|
---|
102 | background-color: #EFF4F7;
|
---|
103 | opacity: 1;
|
---|
104 | }
|
---|
105 | &.ui-state-highlight {
|
---|
106 | background-color:#E4EFC9;
|
---|
107 | }
|
---|
108 | }
|
---|
109 |
|
---|
110 |
|
---|
111 |
|
---|
112 | .ui-jqgrid {
|
---|
113 | .ui-jqgrid-pager {
|
---|
114 | line-height: 15px;
|
---|
115 | height: 55px;
|
---|
116 |
|
---|
117 | padding-top:3px !important;
|
---|
118 | padding-bottom:5px !important;
|
---|
119 |
|
---|
120 | background-color:@modal-footer-bg !important;
|
---|
121 |
|
---|
122 | border-bottom: 1px solid #E1E1E1 !important;
|
---|
123 | border-top: 1px solid #E1E1E1 !important;
|
---|
124 | //border:1px solid #E1E1E1 !important;
|
---|
125 | }
|
---|
126 |
|
---|
127 |
|
---|
128 | .ui-pg-input {
|
---|
129 | font-size: inherit;
|
---|
130 | width:24px;
|
---|
131 |
|
---|
132 | height:20px;
|
---|
133 | line-height:16px;
|
---|
134 | .box-sizing(content-box);
|
---|
135 |
|
---|
136 | text-align:center;
|
---|
137 | padding-top:1px; padding-bottom:1px;
|
---|
138 | }
|
---|
139 |
|
---|
140 | .ui-pg-selbox {
|
---|
141 | display: block;
|
---|
142 | height:24px;
|
---|
143 | width:60px;
|
---|
144 | margin: 0;
|
---|
145 | padding: 1px;
|
---|
146 | line-height: normal;
|
---|
147 | }
|
---|
148 |
|
---|
149 | .ui-jqgrid-htable th div{
|
---|
150 | overflow:visible;
|
---|
151 | }
|
---|
152 |
|
---|
153 | .ui-pager-control {
|
---|
154 | height: 50px;
|
---|
155 | position: relative;
|
---|
156 | padding-left:9px;
|
---|
157 | padding-right:9px;
|
---|
158 | }
|
---|
159 |
|
---|
160 |
|
---|
161 | .ui-jqgrid-toppager {
|
---|
162 | height:auto !important;
|
---|
163 | background-color:@modal-footer-bg;
|
---|
164 | border-bottom:1px solid #E1E1E1 !important;
|
---|
165 | }
|
---|
166 |
|
---|
167 | .jqgrow .editable {
|
---|
168 | max-width:90%;
|
---|
169 | max-width:calc(98% - 6px) !important;
|
---|
170 | }
|
---|
171 | }
|
---|
172 |
|
---|
173 |
|
---|
174 |
|
---|
175 | .ui-pg-table .navtable .ui-corner-all{
|
---|
176 | border-radius: 0;
|
---|
177 | }
|
---|
178 |
|
---|
179 |
|
---|
180 | .ui-jqgrid .ui-pg-button:hover {
|
---|
181 | padding: 1px;
|
---|
182 | }
|
---|
183 |
|
---|
184 | .ui-jqgrid .ui-pg-button .ui-separator {
|
---|
185 | margin-left:4px;
|
---|
186 | margin-right:4px;
|
---|
187 | border-color:#C9D4DB;
|
---|
188 | }
|
---|
189 |
|
---|
190 | .ui-jqgrid .ui-jqgrid-btable {
|
---|
191 | border-left:1px solid #E1E1E1;
|
---|
192 | }
|
---|
193 | .ui-jqgrid .ui-jqgrid-bdiv {
|
---|
194 | border-top:1px solid #E1E1E1;
|
---|
195 | //.box-sizing(content-box);
|
---|
196 | }
|
---|
197 |
|
---|
198 |
|
---|
199 |
|
---|
200 |
|
---|
201 | .ui-jqgrid .loading {
|
---|
202 | position: absolute;
|
---|
203 | top: 45%;
|
---|
204 | left: 45%;
|
---|
205 | width: auto;
|
---|
206 | height: auto;
|
---|
207 | z-index:101;
|
---|
208 |
|
---|
209 | padding: 6px;
|
---|
210 | margin: 5px;
|
---|
211 |
|
---|
212 | text-align: center;
|
---|
213 | display: none;
|
---|
214 | font-weight: bold;
|
---|
215 |
|
---|
216 | font-size:12px;
|
---|
217 |
|
---|
218 | background-color:#FFF;
|
---|
219 | border:2px solid #8EB8D1;
|
---|
220 | color:#E2B018;
|
---|
221 | }
|
---|
222 |
|
---|
223 |
|
---|
224 |
|
---|
225 |
|
---|
226 |
|
---|
227 |
|
---|
228 | .ui-jqgrid .ui-search-toolbar {
|
---|
229 | border-top: 1px solid #E1E1E1;
|
---|
230 | }
|
---|
231 | .ui-jqgrid .ui-jqgrid-labels {
|
---|
232 | border-bottom:none;
|
---|
233 | background:#F2F2F2;
|
---|
234 | #gradient > .vertical(@table-labels-grad-color1 , @table-labels-grad-color2);
|
---|
235 |
|
---|
236 | padding:0 !important;
|
---|
237 | border-left:1px solid #E1E1E1 !important;
|
---|
238 |
|
---|
239 | th {
|
---|
240 | border-right:1px solid #E1E1E1 !important;
|
---|
241 | text-align:left !important;
|
---|
242 | }
|
---|
243 | }
|
---|
244 |
|
---|
245 |
|
---|
246 | /* checkbox container */
|
---|
247 | .ui-jqgrid-labels th[id*="_cb"]:first-child > div {
|
---|
248 | padding-top:0;
|
---|
249 | text-align:center !important;
|
---|
250 | }
|
---|
251 |
|
---|
252 |
|
---|
253 |
|
---|
254 |
|
---|
255 | .ui-jqgrid-sortable {
|
---|
256 | padding-left:4px;
|
---|
257 | font-size:@baseFontSize;
|
---|
258 | color:#777;
|
---|
259 | font-weight:bold;
|
---|
260 |
|
---|
261 | &:hover {
|
---|
262 | color:@table-sort-hover;
|
---|
263 | }
|
---|
264 | }
|
---|
265 |
|
---|
266 | th[aria-selected=true] {
|
---|
267 | #gradient > .vertical(#EFF3F8 , #E3E7ED);
|
---|
268 | .ui-jqgrid-sortable {
|
---|
269 | color:@table-sort-active;
|
---|
270 | }
|
---|
271 | }
|
---|
272 |
|
---|
273 |
|
---|
274 |
|
---|
275 | .ui-icon {
|
---|
276 | text-indent:0;
|
---|
277 | color:@table-sort-active;
|
---|
278 | float:none;
|
---|
279 | right:2px;
|
---|
280 | position:absolute;
|
---|
281 |
|
---|
282 | .rtl &{
|
---|
283 | right:auto;
|
---|
284 | left:2px;
|
---|
285 | }
|
---|
286 | }
|
---|
287 |
|
---|
288 |
|
---|
289 | .ui-grid-ico-sort:before {
|
---|
290 | display:inline;
|
---|
291 | content:"\f0d7";
|
---|
292 | font-family:FontAwesome;
|
---|
293 | font-size:12px;
|
---|
294 | }
|
---|
295 | .ui-icon-asc:before {
|
---|
296 | content:"\f0d8";
|
---|
297 | }
|
---|
298 | .ui-state-disabled {
|
---|
299 | color:#BBB;
|
---|
300 | }
|
---|
301 |
|
---|
302 |
|
---|
303 |
|
---|
304 | .ui-pg-table > tbody > tr > .ui-pg-button > .ui-icon {
|
---|
305 | display:inline-block;
|
---|
306 | padding:0;
|
---|
307 | width:24px; height:24px; line-height:22px;
|
---|
308 | text-align:center;
|
---|
309 |
|
---|
310 | position:static;
|
---|
311 | float:none;
|
---|
312 | margin:0 2px !important;
|
---|
313 |
|
---|
314 |
|
---|
315 | color:#808080;
|
---|
316 | border:1px solid #CCC;
|
---|
317 | background-color:#FFF;
|
---|
318 | border-radius:100%;
|
---|
319 |
|
---|
320 | &:hover {
|
---|
321 | color:#699AB5;
|
---|
322 | border-color:#699AB5;
|
---|
323 | }
|
---|
324 | &:before {
|
---|
325 | width:20px;
|
---|
326 | text-align:center;
|
---|
327 | display:inline-block;
|
---|
328 | }
|
---|
329 | }
|
---|
330 |
|
---|
331 | .ui-pg-table > tbody > tr > .ui-pg-button.ui-state-disabled .ui-icon{
|
---|
332 | color:#B0B0B0;
|
---|
333 | background-color:#F7F7F7;
|
---|
334 | border-color:#DDD;
|
---|
335 |
|
---|
336 | .transform(~"scale(0.9)");
|
---|
337 | }
|
---|
338 |
|
---|
339 |
|
---|
340 |
|
---|
341 |
|
---|
342 |
|
---|
343 |
|
---|
344 | .ui-jqgrid-btable {
|
---|
345 | input , textarea, select{
|
---|
346 | padding:2px;
|
---|
347 | width:auto;
|
---|
348 | max-width:100%;
|
---|
349 | margin-bottom:0;
|
---|
350 | }
|
---|
351 | select {
|
---|
352 | padding:1px;
|
---|
353 | height:25px;
|
---|
354 | line-height:25px;
|
---|
355 | }
|
---|
356 | }
|
---|
357 |
|
---|
358 | .ui-pg-div .ui-icon{
|
---|
359 | display:inline-block;
|
---|
360 | width:18px;
|
---|
361 | float:none;
|
---|
362 |
|
---|
363 | position:static;
|
---|
364 | text-align:center;
|
---|
365 | opacity:0.85;
|
---|
366 |
|
---|
367 | .transition(~"all 0.12s");
|
---|
368 | margin:0 1px;
|
---|
369 |
|
---|
370 | vertical-align:middle;
|
---|
371 | cursor:pointer;
|
---|
372 |
|
---|
373 | font-size:17px;
|
---|
374 |
|
---|
375 | &:hover{
|
---|
376 | .transform(~"scale(1.2)");
|
---|
377 | opacity:1;
|
---|
378 | position:static;
|
---|
379 | margin:0 1px;
|
---|
380 | }
|
---|
381 | &:before {
|
---|
382 | font-family:FontAwesome;
|
---|
383 | display:inline;
|
---|
384 | }
|
---|
385 | }
|
---|
386 |
|
---|
387 | .ui-icon-pencil { color:#478FCA; }
|
---|
388 | .ui-icon-pencil:before { content:"\f040"; }
|
---|
389 | .ui-icon-trash { color:#DD5A43; }
|
---|
390 | .ui-icon-trash:before { content:"\f014"; }
|
---|
391 | .ui-icon-disk { color:#69AA46; }
|
---|
392 | .ui-icon-disk:before { content:"\f00c"; }
|
---|
393 | .ui-icon-cancel { color:#DD5A43; }
|
---|
394 | .ui-icon-cancel:before { content:"\f00d"; }
|
---|
395 |
|
---|
396 |
|
---|
397 |
|
---|
398 | .ui-jqdialog-content, .ui-jqdialog .ui-jqdialog-content {
|
---|
399 | font-size:@baseFontSize;
|
---|
400 | padding:4px 0 0;
|
---|
401 |
|
---|
402 | .formdata {
|
---|
403 | font-size:@baseFontSize;
|
---|
404 | padding:6px 12px;
|
---|
405 | }
|
---|
406 |
|
---|
407 | .form-view-data {
|
---|
408 | vertical-align:middle;
|
---|
409 | font-size:@baseFontSize;
|
---|
410 | }
|
---|
411 |
|
---|
412 |
|
---|
413 | &[id*="alertcnt_"]{
|
---|
414 | padding:8px 11px;
|
---|
415 | }
|
---|
416 | }
|
---|
417 |
|
---|
418 | .ui-jqdialog-content {
|
---|
419 | .CaptionTD {
|
---|
420 | font-size:12px;
|
---|
421 | text-align:right;
|
---|
422 | color:#666;
|
---|
423 | }
|
---|
424 | .FormData {
|
---|
425 | border-bottom:1px dotted #E8E8E8;
|
---|
426 | &:last-child {
|
---|
427 | border-bottom:none;
|
---|
428 | }
|
---|
429 |
|
---|
430 | > td {
|
---|
431 | padding-top:6px;
|
---|
432 | padding-bottom:6px;
|
---|
433 | }
|
---|
434 | }
|
---|
435 | input.FormElement {
|
---|
436 | width:auto;
|
---|
437 | }
|
---|
438 | select.FormElement {
|
---|
439 | padding:1px;
|
---|
440 | height:25px;
|
---|
441 | line-height:25px;
|
---|
442 | width:auto;
|
---|
443 | }
|
---|
444 | td.EditButton {
|
---|
445 | padding:8px;
|
---|
446 | }
|
---|
447 | }
|
---|
448 |
|
---|
449 |
|
---|
450 | .EditTable {
|
---|
451 | background-color:@modal-footer-bg;
|
---|
452 | border-top:1px solid #D6E1EA !important;
|
---|
453 | padding:8px;
|
---|
454 |
|
---|
455 | tr:first-child{
|
---|
456 | display:none;
|
---|
457 | }
|
---|
458 |
|
---|
459 |
|
---|
460 | .navButton .fm-button {
|
---|
461 | float:none !important;
|
---|
462 | width:auto !important;
|
---|
463 | margin:1px 1px 2px !important;
|
---|
464 | background-color:transparent;
|
---|
465 | border-radius:100%;
|
---|
466 |
|
---|
467 | &:hover {
|
---|
468 | background-color:transparent;
|
---|
469 | }
|
---|
470 | &:focus {
|
---|
471 | outline:none;
|
---|
472 | }
|
---|
473 |
|
---|
474 | [class*="icon-"] {
|
---|
475 | display:inline-block;
|
---|
476 | color:#999;
|
---|
477 | border:1px solid #AAA;
|
---|
478 | width:26px;
|
---|
479 | height:26px; line-height:26px;
|
---|
480 | text-align:center;
|
---|
481 | border-radius:100%;
|
---|
482 |
|
---|
483 | background-color:#FFF;
|
---|
484 | }
|
---|
485 |
|
---|
486 | &:hover [class*="icon-"] {
|
---|
487 | color:#699AB5;
|
---|
488 | border-color:#699AB5;
|
---|
489 | }
|
---|
490 |
|
---|
491 | &.ui-state-disabled , &.ui-state-disabled:hover {
|
---|
492 | [class*="icon-"] {
|
---|
493 | color:#BBB;
|
---|
494 | border-color:#CCC;
|
---|
495 | .transform(~"scale(0.88)");
|
---|
496 | }
|
---|
497 | }
|
---|
498 |
|
---|
499 | }
|
---|
500 | }
|
---|
501 |
|
---|
502 |
|
---|
503 | .FormGrid .EditTable {
|
---|
504 | background-color:#FFF;
|
---|
505 | border-top:none !important;
|
---|
506 | padding:0;
|
---|
507 |
|
---|
508 | tr:first-child{
|
---|
509 | display:none;
|
---|
510 | }
|
---|
511 | }
|
---|
512 |
|
---|
513 |
|
---|
514 | .ui-jqdialog-content .searchFilter {
|
---|
515 | select {
|
---|
516 | padding:1px;
|
---|
517 | height:26px;
|
---|
518 | line-height:26px;
|
---|
519 | width:auto; max-width:95%;
|
---|
520 | margin-bottom:0;
|
---|
521 | }
|
---|
522 | .input-elm {
|
---|
523 | margin-bottom:0;
|
---|
524 | height:18px;
|
---|
525 | line-height:18px;
|
---|
526 | width:95% !important;
|
---|
527 | padding-left:1px;
|
---|
528 | padding-right:1px;
|
---|
529 |
|
---|
530 | .box-sizing(content-box);
|
---|
531 | }
|
---|
532 |
|
---|
533 | table {
|
---|
534 | margin-left:4px;
|
---|
535 | }
|
---|
536 | tr td {
|
---|
537 | padding:5px 0;
|
---|
538 | }
|
---|
539 |
|
---|
540 | .add-group , .add-rule , .delete-group {
|
---|
541 | margin-left:4px !important;
|
---|
542 | font-size:15px !important;
|
---|
543 | }
|
---|
544 |
|
---|
545 | .delete-rule {
|
---|
546 | border:none;
|
---|
547 | background-color:#FFF;
|
---|
548 | color: #D15B47;
|
---|
549 | font-size: 20px;
|
---|
550 | width: 22px;
|
---|
551 | line-height: 10px;
|
---|
552 | padding: 0;
|
---|
553 | text-shadow: none !important;
|
---|
554 |
|
---|
555 | display:inline-block;
|
---|
556 | .transition(~"all 0.1s");
|
---|
557 | opacity:0.85;
|
---|
558 | &:hover {
|
---|
559 | .transform(~"scale(1.1)");
|
---|
560 | color:#B74635;
|
---|
561 | opacity:1;
|
---|
562 | }
|
---|
563 | }
|
---|
564 |
|
---|
565 |
|
---|
566 | .queryresult {
|
---|
567 | margin-bottom:11px;
|
---|
568 | td.query {
|
---|
569 | padding:6px 11px;
|
---|
570 | border:1px solid #E1E1E1;
|
---|
571 | background-color:#EEEEEE;
|
---|
572 | &:empty {
|
---|
573 | display:none;
|
---|
574 | }
|
---|
575 | }
|
---|
576 | }
|
---|
577 |
|
---|
578 | }
|
---|
579 |
|
---|
580 |
|
---|
581 |
|
---|
582 |
|
---|
583 |
|
---|
584 |
|
---|
585 | .ui-state-error {
|
---|
586 | background-color: @state-danger-bg;
|
---|
587 | border: 1px solid @state-danger-border;
|
---|
588 | color: @state-danger-text;
|
---|
589 |
|
---|
590 | margin:4px 4px 8px;
|
---|
591 | padding: 6px 10px;
|
---|
592 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
---|
593 |
|
---|
594 | font-size:@baseFontSize;
|
---|
595 | }
|
---|
596 |
|
---|
597 |
|
---|
598 |
|
---|
599 | .ui-jqdialog .ui-widget-header {
|
---|
600 | #gradient > .vertical(#FFFFFF , #EEEEEE);
|
---|
601 |
|
---|
602 | border-image: none;
|
---|
603 | border-bottom:1px solid solid;
|
---|
604 | color: #669FC7;
|
---|
605 | min-height: 38px;
|
---|
606 | position: relative;
|
---|
607 |
|
---|
608 | .ui-jqdialog-title{
|
---|
609 | line-height: 38px;
|
---|
610 | margin: 0;
|
---|
611 | padding: 0;
|
---|
612 | padding-left: 12px;
|
---|
613 | text-align: left;
|
---|
614 | }
|
---|
615 | }
|
---|
616 |
|
---|
617 |
|
---|
618 | .widget-header .ui-jqdialog-title{
|
---|
619 | padding-left:0 !important;
|
---|
620 | padding-right:0 !important;
|
---|
621 | }
|
---|
622 |
|
---|
623 | .ui-jqdialog .ui-widget-header .widget-header{
|
---|
624 | border-bottom:none;
|
---|
625 | }
|
---|
626 | .ui-jqdialog .ui-jqdialog-titlebar {
|
---|
627 | border-bottom:1px solid #DDD !important;
|
---|
628 | }
|
---|
629 |
|
---|
630 | .fm-button {
|
---|
631 | margin:0 4px;
|
---|
632 | }
|
---|
633 | .fm-button:not(.btn) {
|
---|
634 | background-color: @btn-default;
|
---|
635 | border-radius: 0 ;
|
---|
636 | box-shadow: none;
|
---|
637 | color: #FFFFFF ;
|
---|
638 | cursor: pointer;
|
---|
639 | display: inline-block;
|
---|
640 | font-size: @baseFontSize;
|
---|
641 | line-height: 28px;padding: 0 12px 1px;
|
---|
642 | margin: 0 8px;
|
---|
643 | position: relative;
|
---|
644 | text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
---|
645 | .transition(~"all 0.15s");
|
---|
646 | vertical-align: middle;
|
---|
647 |
|
---|
648 | }
|
---|
649 | .fm-button.ui-state-default:hover {
|
---|
650 | background-color:@btn-default-hover;
|
---|
651 | }
|
---|
652 |
|
---|
653 |
|
---|
654 |
|
---|