Issue #23853: Incorporated widget-refactor logic into ContactWidget
[xtuple] / lib / enyo-x / source / stylesheets / screen.css
1 /*
2   To compile this .less file to .css:
3   lessc screen.less > ../stylesheets/screen.css
4   Use -compress for a compressed .css with no comments
5 */
6 /*!
7  *  Font Awesome 3.2.1
8  *  the iconic font designed for Bootstrap
9  *  ------------------------------------------------------------------------------
10  *  The full suite of pictographic icons, examples, and documentation can be
11  *  found at http://fontawesome.io.  Stay up to date on Twitter at
12  *  http://twitter.com/fontawesome.
13  *
14  *  License
15  *  ------------------------------------------------------------------------------
16  *  - The Font Awesome font is licensed under SIL OFL 1.1 -
17  *    http://scripts.sil.org/OFL
18  *  - Font Awesome CSS, LESS, and SASS files are licensed under MIT License -
19  *    http://opensource.org/licenses/mit-license.html
20  *  - Font Awesome documentation licensed under CC BY 3.0 -
21  *    http://creativecommons.org/licenses/by/3.0/
22  *  - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
23  *    "Font Awesome by Dave Gandy - http://fontawesome.io"
24  *
25  *  Author - Dave Gandy
26  *  ------------------------------------------------------------------------------
27  *  Email: dave@fontawesome.io
28  *  Twitter: http://twitter.com/davegandy
29  *  Work: Lead Product Designer @ Kyruus - http://kyruus.com
30  */
31 /* FONT PATH
32  * -------------------------- */
33 @font-face {
34   font-family: 'FontAwesome';
35   src: url('../../lib/font-awesome/font/fontawesome-webfont.eot?v=3.2.1');
36   src: url('../../lib/font-awesome/font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../../lib/font-awesome/font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../../lib/font-awesome/font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../../lib/font-awesome/font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
37   font-weight: normal;
38   font-style: normal;
39 }
40 /* FONT AWESOME CORE
41  * -------------------------- */
42 [class^="icon-"],
43 [class*=" icon-"] {
44   font-family: FontAwesome;
45   font-weight: normal;
46   font-style: normal;
47   text-decoration: inherit;
48   -webkit-font-smoothing: antialiased;
49   *margin-right: .3em;
50 }
51 [class^="icon-"]:before,
52 [class*=" icon-"]:before {
53   text-decoration: inherit;
54   display: inline-block;
55   speak: none;
56 }
57 /* makes the font 33% larger relative to the icon container */
58 .icon-large:before {
59   vertical-align: -10%;
60   font-size: 1.33333333em;
61 }
62 /* makes sure icons active on rollover in links */
63 a [class^="icon-"],
64 a [class*=" icon-"] {
65   display: inline;
66 }
67 /* increased font size for icon-large */
68 [class^="icon-"].icon-fixed-width,
69 [class*=" icon-"].icon-fixed-width {
70   display: inline-block;
71   width: 1.14285714em;
72   text-align: right;
73   padding-right: 0.28571429em;
74 }
75 [class^="icon-"].icon-fixed-width.icon-large,
76 [class*=" icon-"].icon-fixed-width.icon-large {
77   width: 1.42857143em;
78 }
79 .icons-ul {
80   margin-left: 2.14285714em;
81   list-style-type: none;
82 }
83 .icons-ul > li {
84   position: relative;
85 }
86 .icons-ul .icon-li {
87   position: absolute;
88   left: -2.14285714em;
89   width: 2.14285714em;
90   text-align: center;
91   line-height: inherit;
92 }
93 [class^="icon-"].hide,
94 [class*=" icon-"].hide {
95   display: none;
96 }
97 .icon-muted {
98   color: #eeeeee;
99 }
100 .icon-light {
101   color: #ffffff;
102 }
103 .icon-dark {
104   color: #333333;
105 }
106 .icon-border {
107   border: solid 1px #eeeeee;
108   padding: .2em .25em .15em;
109   -webkit-border-radius: 3px;
110   -moz-border-radius: 3px;
111   border-radius: 3px;
112 }
113 .icon-2x {
114   font-size: 2em;
115 }
116 .icon-2x.icon-border {
117   border-width: 2px;
118   -webkit-border-radius: 4px;
119   -moz-border-radius: 4px;
120   border-radius: 4px;
121 }
122 .icon-3x {
123   font-size: 3em;
124 }
125 .icon-3x.icon-border {
126   border-width: 3px;
127   -webkit-border-radius: 5px;
128   -moz-border-radius: 5px;
129   border-radius: 5px;
130 }
131 .icon-4x {
132   font-size: 4em;
133 }
134 .icon-4x.icon-border {
135   border-width: 4px;
136   -webkit-border-radius: 6px;
137   -moz-border-radius: 6px;
138   border-radius: 6px;
139 }
140 .icon-5x {
141   font-size: 5em;
142 }
143 .icon-5x.icon-border {
144   border-width: 5px;
145   -webkit-border-radius: 7px;
146   -moz-border-radius: 7px;
147   border-radius: 7px;
148 }
149 .pull-right {
150   float: right;
151 }
152 .pull-left {
153   float: left;
154 }
155 [class^="icon-"].pull-left,
156 [class*=" icon-"].pull-left {
157   margin-right: .3em;
158 }
159 [class^="icon-"].pull-right,
160 [class*=" icon-"].pull-right {
161   margin-left: .3em;
162 }
163 /* BOOTSTRAP SPECIFIC CLASSES
164  * -------------------------- */
165 /* Bootstrap 2.0 sprites.less reset */
166 [class^="icon-"],
167 [class*=" icon-"] {
168   display: inline;
169   width: auto;
170   height: auto;
171   line-height: normal;
172   vertical-align: baseline;
173   background-image: none;
174   background-position: 0% 0%;
175   background-repeat: repeat;
176   margin-top: 0;
177 }
178 /* more sprites.less reset */
179 .icon-white,
180 .nav-pills > .active > a > [class^="icon-"],
181 .nav-pills > .active > a > [class*=" icon-"],
182 .nav-list > .active > a > [class^="icon-"],
183 .nav-list > .active > a > [class*=" icon-"],
184 .navbar-inverse .nav > .active > a > [class^="icon-"],
185 .navbar-inverse .nav > .active > a > [class*=" icon-"],
186 .dropdown-menu > li > a:hover > [class^="icon-"],
187 .dropdown-menu > li > a:hover > [class*=" icon-"],
188 .dropdown-menu > .active > a > [class^="icon-"],
189 .dropdown-menu > .active > a > [class*=" icon-"],
190 .dropdown-submenu:hover > a > [class^="icon-"],
191 .dropdown-submenu:hover > a > [class*=" icon-"] {
192   background-image: none;
193 }
194 /* keeps Bootstrap styles with and without icons the same */
195 .btn [class^="icon-"].icon-large,
196 .nav [class^="icon-"].icon-large,
197 .btn [class*=" icon-"].icon-large,
198 .nav [class*=" icon-"].icon-large {
199   line-height: .9em;
200 }
201 .btn [class^="icon-"].icon-spin,
202 .nav [class^="icon-"].icon-spin,
203 .btn [class*=" icon-"].icon-spin,
204 .nav [class*=" icon-"].icon-spin {
205   display: inline-block;
206 }
207 .nav-tabs [class^="icon-"],
208 .nav-pills [class^="icon-"],
209 .nav-tabs [class*=" icon-"],
210 .nav-pills [class*=" icon-"],
211 .nav-tabs [class^="icon-"].icon-large,
212 .nav-pills [class^="icon-"].icon-large,
213 .nav-tabs [class*=" icon-"].icon-large,
214 .nav-pills [class*=" icon-"].icon-large {
215   line-height: .9em;
216 }
217 .btn [class^="icon-"].pull-left.icon-2x,
218 .btn [class*=" icon-"].pull-left.icon-2x,
219 .btn [class^="icon-"].pull-right.icon-2x,
220 .btn [class*=" icon-"].pull-right.icon-2x {
221   margin-top: .18em;
222 }
223 .btn [class^="icon-"].icon-spin.icon-large,
224 .btn [class*=" icon-"].icon-spin.icon-large {
225   line-height: .8em;
226 }
227 .btn.btn-small [class^="icon-"].pull-left.icon-2x,
228 .btn.btn-small [class*=" icon-"].pull-left.icon-2x,
229 .btn.btn-small [class^="icon-"].pull-right.icon-2x,
230 .btn.btn-small [class*=" icon-"].pull-right.icon-2x {
231   margin-top: .25em;
232 }
233 .btn.btn-large [class^="icon-"],
234 .btn.btn-large [class*=" icon-"] {
235   margin-top: 0;
236 }
237 .btn.btn-large [class^="icon-"].pull-left.icon-2x,
238 .btn.btn-large [class*=" icon-"].pull-left.icon-2x,
239 .btn.btn-large [class^="icon-"].pull-right.icon-2x,
240 .btn.btn-large [class*=" icon-"].pull-right.icon-2x {
241   margin-top: .05em;
242 }
243 .btn.btn-large [class^="icon-"].pull-left.icon-2x,
244 .btn.btn-large [class*=" icon-"].pull-left.icon-2x {
245   margin-right: .2em;
246 }
247 .btn.btn-large [class^="icon-"].pull-right.icon-2x,
248 .btn.btn-large [class*=" icon-"].pull-right.icon-2x {
249   margin-left: .2em;
250 }
251 /* Fixes alignment in nav lists */
252 .nav-list [class^="icon-"],
253 .nav-list [class*=" icon-"] {
254   line-height: inherit;
255 }
256 /* EXTRAS
257  * -------------------------- */
258 /* Stacked and layered icon */
259 .icon-stack {
260   position: relative;
261   display: inline-block;
262   width: 2em;
263   height: 2em;
264   line-height: 2em;
265   vertical-align: -35%;
266 }
267 .icon-stack [class^="icon-"],
268 .icon-stack [class*=" icon-"] {
269   display: block;
270   text-align: center;
271   position: absolute;
272   width: 100%;
273   height: 100%;
274   font-size: 1em;
275   line-height: inherit;
276   *line-height: 2em;
277 }
278 .icon-stack .icon-stack-base {
279   font-size: 2em;
280   *line-height: 1em;
281 }
282 /* Animated rotating icon */
283 .icon-spin {
284   display: inline-block;
285   -moz-animation: spin 2s infinite linear;
286   -o-animation: spin 2s infinite linear;
287   -webkit-animation: spin 2s infinite linear;
288   animation: spin 2s infinite linear;
289 }
290 /* Prevent stack and spinners from being taken inline when inside a link */
291 a .icon-stack,
292 a .icon-spin {
293   display: inline-block;
294   text-decoration: none;
295 }
296 @-moz-keyframes spin {
297   0% {
298     -moz-transform: rotate(0deg);
299   }
300   100% {
301     -moz-transform: rotate(359deg);
302   }
303 }
304 @-webkit-keyframes spin {
305   0% {
306     -webkit-transform: rotate(0deg);
307   }
308   100% {
309     -webkit-transform: rotate(359deg);
310   }
311 }
312 @-o-keyframes spin {
313   0% {
314     -o-transform: rotate(0deg);
315   }
316   100% {
317     -o-transform: rotate(359deg);
318   }
319 }
320 @-ms-keyframes spin {
321   0% {
322     -ms-transform: rotate(0deg);
323   }
324   100% {
325     -ms-transform: rotate(359deg);
326   }
327 }
328 @keyframes spin {
329   0% {
330     transform: rotate(0deg);
331   }
332   100% {
333     transform: rotate(359deg);
334   }
335 }
336 /* Icon rotations and mirroring */
337 .icon-rotate-90:before {
338   -webkit-transform: rotate(90deg);
339   -moz-transform: rotate(90deg);
340   -ms-transform: rotate(90deg);
341   -o-transform: rotate(90deg);
342   transform: rotate(90deg);
343   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
344 }
345 .icon-rotate-180:before {
346   -webkit-transform: rotate(180deg);
347   -moz-transform: rotate(180deg);
348   -ms-transform: rotate(180deg);
349   -o-transform: rotate(180deg);
350   transform: rotate(180deg);
351   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
352 }
353 .icon-rotate-270:before {
354   -webkit-transform: rotate(270deg);
355   -moz-transform: rotate(270deg);
356   -ms-transform: rotate(270deg);
357   -o-transform: rotate(270deg);
358   transform: rotate(270deg);
359   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
360 }
361 .icon-flip-horizontal:before {
362   -webkit-transform: scale(-1, 1);
363   -moz-transform: scale(-1, 1);
364   -ms-transform: scale(-1, 1);
365   -o-transform: scale(-1, 1);
366   transform: scale(-1, 1);
367 }
368 .icon-flip-vertical:before {
369   -webkit-transform: scale(1, -1);
370   -moz-transform: scale(1, -1);
371   -ms-transform: scale(1, -1);
372   -o-transform: scale(1, -1);
373   transform: scale(1, -1);
374 }
375 /* ensure rotation occurs inside anchor tags */
376 a .icon-rotate-90:before,
377 a .icon-rotate-180:before,
378 a .icon-rotate-270:before,
379 a .icon-flip-horizontal:before,
380 a .icon-flip-vertical:before {
381   display: inline-block;
382 }
383 /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
384    readers do not read off random characters that represent icons */
385 .icon-glass:before {
386   content: "\f000";
387 }
388 .icon-music:before {
389   content: "\f001";
390 }
391 .icon-search:before {
392   content: "\f002";
393 }
394 .icon-envelope-alt:before {
395   content: "\f003";
396 }
397 .icon-heart:before {
398   content: "\f004";
399 }
400 .icon-star:before {
401   content: "\f005";
402 }
403 .icon-star-empty:before {
404   content: "\f006";
405 }
406 .icon-user:before {
407   content: "\f007";
408 }
409 .icon-film:before {
410   content: "\f008";
411 }
412 .icon-th-large:before {
413   content: "\f009";
414 }
415 .icon-th:before {
416   content: "\f00a";
417 }
418 .icon-th-list:before {
419   content: "\f00b";
420 }
421 .icon-ok:before {
422   content: "\f00c";
423 }
424 .icon-remove:before {
425   content: "\f00d";
426 }
427 .icon-zoom-in:before {
428   content: "\f00e";
429 }
430 .icon-zoom-out:before {
431   content: "\f010";
432 }
433 .icon-power-off:before,
434 .icon-off:before {
435   content: "\f011";
436 }
437 .icon-signal:before {
438   content: "\f012";
439 }
440 .icon-gear:before,
441 .icon-cog:before {
442   content: "\f013";
443 }
444 .icon-trash:before {
445   content: "\f014";
446 }
447 .icon-home:before {
448   content: "\f015";
449 }
450 .icon-file-alt:before {
451   content: "\f016";
452 }
453 .icon-time:before {
454   content: "\f017";
455 }
456 .icon-road:before {
457   content: "\f018";
458 }
459 .icon-download-alt:before {
460   content: "\f019";
461 }
462 .icon-download:before {
463   content: "\f01a";
464 }
465 .icon-upload:before {
466   content: "\f01b";
467 }
468 .icon-inbox:before {
469   content: "\f01c";
470 }
471 .icon-play-circle:before {
472   content: "\f01d";
473 }
474 .icon-rotate-right:before,
475 .icon-repeat:before {
476   content: "\f01e";
477 }
478 .icon-refresh:before {
479   content: "\f021";
480 }
481 .icon-list-alt:before {
482   content: "\f022";
483 }
484 .icon-lock:before {
485   content: "\f023";
486 }
487 .icon-flag:before {
488   content: "\f024";
489 }
490 .icon-headphones:before {
491   content: "\f025";
492 }
493 .icon-volume-off:before {
494   content: "\f026";
495 }
496 .icon-volume-down:before {
497   content: "\f027";
498 }
499 .icon-volume-up:before {
500   content: "\f028";
501 }
502 .icon-qrcode:before {
503   content: "\f029";
504 }
505 .icon-barcode:before {
506   content: "\f02a";
507 }
508 .icon-tag:before {
509   content: "\f02b";
510 }
511 .icon-tags:before {
512   content: "\f02c";
513 }
514 .icon-book:before {
515   content: "\f02d";
516 }
517 .icon-bookmark:before {
518   content: "\f02e";
519 }
520 .icon-print:before {
521   content: "\f02f";
522 }
523 .icon-camera:before {
524   content: "\f030";
525 }
526 .icon-font:before {
527   content: "\f031";
528 }
529 .icon-bold:before {
530   content: "\f032";
531 }
532 .icon-italic:before {
533   content: "\f033";
534 }
535 .icon-text-height:before {
536   content: "\f034";
537 }
538 .icon-text-width:before {
539   content: "\f035";
540 }
541 .icon-align-left:before {
542   content: "\f036";
543 }
544 .icon-align-center:before {
545   content: "\f037";
546 }
547 .icon-align-right:before {
548   content: "\f038";
549 }
550 .icon-align-justify:before {
551   content: "\f039";
552 }
553 .icon-list:before {
554   content: "\f03a";
555 }
556 .icon-indent-left:before {
557   content: "\f03b";
558 }
559 .icon-indent-right:before {
560   content: "\f03c";
561 }
562 .icon-facetime-video:before {
563   content: "\f03d";
564 }
565 .icon-picture:before {
566   content: "\f03e";
567 }
568 .icon-pencil:before {
569   content: "\f040";
570 }
571 .icon-map-marker:before {
572   content: "\f041";
573 }
574 .icon-adjust:before {
575   content: "\f042";
576 }
577 .icon-tint:before {
578   content: "\f043";
579 }
580 .icon-edit:before {
581   content: "\f044";
582 }
583 .icon-share:before {
584   content: "\f045";
585 }
586 .icon-check:before {
587   content: "\f046";
588 }
589 .icon-move:before {
590   content: "\f047";
591 }
592 .icon-step-backward:before {
593   content: "\f048";
594 }
595 .icon-fast-backward:before {
596   content: "\f049";
597 }
598 .icon-backward:before {
599   content: "\f04a";
600 }
601 .icon-play:before {
602   content: "\f04b";
603 }
604 .icon-pause:before {
605   content: "\f04c";
606 }
607 .icon-stop:before {
608   content: "\f04d";
609 }
610 .icon-forward:before {
611   content: "\f04e";
612 }
613 .icon-fast-forward:before {
614   content: "\f050";
615 }
616 .icon-step-forward:before {
617   content: "\f051";
618 }
619 .icon-eject:before {
620   content: "\f052";
621 }
622 .icon-chevron-left:before {
623   content: "\f053";
624 }
625 .icon-chevron-right:before {
626   content: "\f054";
627 }
628 .icon-plus-sign:before {
629   content: "\f055";
630 }
631 .icon-minus-sign:before {
632   content: "\f056";
633 }
634 .icon-remove-sign:before {
635   content: "\f057";
636 }
637 .icon-ok-sign:before {
638   content: "\f058";
639 }
640 .icon-question-sign:before {
641   content: "\f059";
642 }
643 .icon-info-sign:before {
644   content: "\f05a";
645 }
646 .icon-screenshot:before {
647   content: "\f05b";
648 }
649 .icon-remove-circle:before {
650   content: "\f05c";
651 }
652 .icon-ok-circle:before {
653   content: "\f05d";
654 }
655 .icon-ban-circle:before {
656   content: "\f05e";
657 }
658 .icon-arrow-left:before {
659   content: "\f060";
660 }
661 .icon-arrow-right:before {
662   content: "\f061";
663 }
664 .icon-arrow-up:before {
665   content: "\f062";
666 }
667 .icon-arrow-down:before {
668   content: "\f063";
669 }
670 .icon-mail-forward:before,
671 .icon-share-alt:before {
672   content: "\f064";
673 }
674 .icon-resize-full:before {
675   content: "\f065";
676 }
677 .icon-resize-small:before {
678   content: "\f066";
679 }
680 .icon-plus:before {
681   content: "\f067";
682 }
683 .icon-minus:before {
684   content: "\f068";
685 }
686 .icon-asterisk:before {
687   content: "\f069";
688 }
689 .icon-exclamation-sign:before {
690   content: "\f06a";
691 }
692 .icon-gift:before {
693   content: "\f06b";
694 }
695 .icon-leaf:before {
696   content: "\f06c";
697 }
698 .icon-fire:before {
699   content: "\f06d";
700 }
701 .icon-eye-open:before {
702   content: "\f06e";
703 }
704 .icon-eye-close:before {
705   content: "\f070";
706 }
707 .icon-warning-sign:before {
708   content: "\f071";
709 }
710 .icon-plane:before {
711   content: "\f072";
712 }
713 .icon-calendar:before {
714   content: "\f073";
715 }
716 .icon-random:before {
717   content: "\f074";
718 }
719 .icon-comment:before {
720   content: "\f075";
721 }
722 .icon-magnet:before {
723   content: "\f076";
724 }
725 .icon-chevron-up:before {
726   content: "\f077";
727 }
728 .icon-chevron-down:before {
729   content: "\f078";
730 }
731 .icon-retweet:before {
732   content: "\f079";
733 }
734 .icon-shopping-cart:before {
735   content: "\f07a";
736 }
737 .icon-folder-close:before {
738   content: "\f07b";
739 }
740 .icon-folder-open:before {
741   content: "\f07c";
742 }
743 .icon-resize-vertical:before {
744   content: "\f07d";
745 }
746 .icon-resize-horizontal:before {
747   content: "\f07e";
748 }
749 .icon-bar-chart:before {
750   content: "\f080";
751 }
752 .icon-twitter-sign:before {
753   content: "\f081";
754 }
755 .icon-facebook-sign:before {
756   content: "\f082";
757 }
758 .icon-camera-retro:before {
759   content: "\f083";
760 }
761 .icon-key:before {
762   content: "\f084";
763 }
764 .icon-gears:before,
765 .icon-cogs:before {
766   content: "\f085";
767 }
768 .icon-comments:before {
769   content: "\f086";
770 }
771 .icon-thumbs-up-alt:before {
772   content: "\f087";
773 }
774 .icon-thumbs-down-alt:before {
775   content: "\f088";
776 }
777 .icon-star-half:before {
778   content: "\f089";
779 }
780 .icon-heart-empty:before {
781   content: "\f08a";
782 }
783 .icon-signout:before {
784   content: "\f08b";
785 }
786 .icon-linkedin-sign:before {
787   content: "\f08c";
788 }
789 .icon-pushpin:before {
790   content: "\f08d";
791 }
792 .icon-external-link:before {
793   content: "\f08e";
794 }
795 .icon-signin:before {
796   content: "\f090";
797 }
798 .icon-trophy:before {
799   content: "\f091";
800 }
801 .icon-github-sign:before {
802   content: "\f092";
803 }
804 .icon-upload-alt:before {
805   content: "\f093";
806 }
807 .icon-lemon:before {
808   content: "\f094";
809 }
810 .icon-phone:before {
811   content: "\f095";
812 }
813 .icon-unchecked:before,
814 .icon-check-empty:before {
815   content: "\f096";
816 }
817 .icon-bookmark-empty:before {
818   content: "\f097";
819 }
820 .icon-phone-sign:before {
821   content: "\f098";
822 }
823 .icon-twitter:before {
824   content: "\f099";
825 }
826 .icon-facebook:before {
827   content: "\f09a";
828 }
829 .icon-github:before {
830   content: "\f09b";
831 }
832 .icon-unlock:before {
833   content: "\f09c";
834 }
835 .icon-credit-card:before {
836   content: "\f09d";
837 }
838 .icon-rss:before {
839   content: "\f09e";
840 }
841 .icon-hdd:before {
842   content: "\f0a0";
843 }
844 .icon-bullhorn:before {
845   content: "\f0a1";
846 }
847 .icon-bell:before {
848   content: "\f0a2";
849 }
850 .icon-certificate:before {
851   content: "\f0a3";
852 }
853 .icon-hand-right:before {
854   content: "\f0a4";
855 }
856 .icon-hand-left:before {
857   content: "\f0a5";
858 }
859 .icon-hand-up:before {
860   content: "\f0a6";
861 }
862 .icon-hand-down:before {
863   content: "\f0a7";
864 }
865 .icon-circle-arrow-left:before {
866   content: "\f0a8";
867 }
868 .icon-circle-arrow-right:before {
869   content: "\f0a9";
870 }
871 .icon-circle-arrow-up:before {
872   content: "\f0aa";
873 }
874 .icon-circle-arrow-down:before {
875   content: "\f0ab";
876 }
877 .icon-globe:before {
878   content: "\f0ac";
879 }
880 .icon-wrench:before {
881   content: "\f0ad";
882 }
883 .icon-tasks:before {
884   content: "\f0ae";
885 }
886 .icon-filter:before {
887   content: "\f0b0";
888 }
889 .icon-briefcase:before {
890   content: "\f0b1";
891 }
892 .icon-fullscreen:before {
893   content: "\f0b2";
894 }
895 .icon-group:before {
896   content: "\f0c0";
897 }
898 .icon-link:before {
899   content: "\f0c1";
900 }
901 .icon-cloud:before {
902   content: "\f0c2";
903 }
904 .icon-beaker:before {
905   content: "\f0c3";
906 }
907 .icon-cut:before {
908   content: "\f0c4";
909 }
910 .icon-copy:before {
911   content: "\f0c5";
912 }
913 .icon-paperclip:before,
914 .icon-paper-clip:before {
915   content: "\f0c6";
916 }
917 .icon-save:before {
918   content: "\f0c7";
919 }
920 .icon-sign-blank:before {
921   content: "\f0c8";
922 }
923 .icon-reorder:before {
924   content: "\f0c9";
925 }
926 .icon-list-ul:before {
927   content: "\f0ca";
928 }
929 .icon-list-ol:before {
930   content: "\f0cb";
931 }
932 .icon-strikethrough:before {
933   content: "\f0cc";
934 }
935 .icon-underline:before {
936   content: "\f0cd";
937 }
938 .icon-table:before {
939   content: "\f0ce";
940 }
941 .icon-magic:before {
942   content: "\f0d0";
943 }
944 .icon-truck:before {
945   content: "\f0d1";
946 }
947 .icon-pinterest:before {
948   content: "\f0d2";
949 }
950 .icon-pinterest-sign:before {
951   content: "\f0d3";
952 }
953 .icon-google-plus-sign:before {
954   content: "\f0d4";
955 }
956 .icon-google-plus:before {
957   content: "\f0d5";
958 }
959 .icon-money:before {
960   content: "\f0d6";
961 }
962 .icon-caret-down:before {
963   content: "\f0d7";
964 }
965 .icon-caret-up:before {
966   content: "\f0d8";
967 }
968 .icon-caret-left:before {
969   content: "\f0d9";
970 }
971 .icon-caret-right:before {
972   content: "\f0da";
973 }
974 .icon-columns:before {
975   content: "\f0db";
976 }
977 .icon-sort:before {
978   content: "\f0dc";
979 }
980 .icon-sort-down:before {
981   content: "\f0dd";
982 }
983 .icon-sort-up:before {
984   content: "\f0de";
985 }
986 .icon-envelope:before {
987   content: "\f0e0";
988 }
989 .icon-linkedin:before {
990   content: "\f0e1";
991 }
992 .icon-rotate-left:before,
993 .icon-undo:before {
994   content: "\f0e2";
995 }
996 .icon-legal:before {
997   content: "\f0e3";
998 }
999 .icon-dashboard:before {
1000   content: "\f0e4";
1001 }
1002 .icon-comment-alt:before {
1003   content: "\f0e5";
1004 }
1005 .icon-comments-alt:before {
1006   content: "\f0e6";
1007 }
1008 .icon-bolt:before {
1009   content: "\f0e7";
1010 }
1011 .icon-sitemap:before {
1012   content: "\f0e8";
1013 }
1014 .icon-umbrella:before {
1015   content: "\f0e9";
1016 }
1017 .icon-paste:before {
1018   content: "\f0ea";
1019 }
1020 .icon-lightbulb:before {
1021   content: "\f0eb";
1022 }
1023 .icon-exchange:before {
1024   content: "\f0ec";
1025 }
1026 .icon-cloud-download:before {
1027   content: "\f0ed";
1028 }
1029 .icon-cloud-upload:before {
1030   content: "\f0ee";
1031 }
1032 .icon-user-md:before {
1033   content: "\f0f0";
1034 }
1035 .icon-stethoscope:before {
1036   content: "\f0f1";
1037 }
1038 .icon-suitcase:before {
1039   content: "\f0f2";
1040 }
1041 .icon-bell-alt:before {
1042   content: "\f0f3";
1043 }
1044 .icon-coffee:before {
1045   content: "\f0f4";
1046 }
1047 .icon-food:before {
1048   content: "\f0f5";
1049 }
1050 .icon-file-text-alt:before {
1051   content: "\f0f6";
1052 }
1053 .icon-building:before {
1054   content: "\f0f7";
1055 }
1056 .icon-hospital:before {
1057   content: "\f0f8";
1058 }
1059 .icon-ambulance:before {
1060   content: "\f0f9";
1061 }
1062 .icon-medkit:before {
1063   content: "\f0fa";
1064 }
1065 .icon-fighter-jet:before {
1066   content: "\f0fb";
1067 }
1068 .icon-beer:before {
1069   content: "\f0fc";
1070 }
1071 .icon-h-sign:before {
1072   content: "\f0fd";
1073 }
1074 .icon-plus-sign-alt:before {
1075   content: "\f0fe";
1076 }
1077 .icon-double-angle-left:before {
1078   content: "\f100";
1079 }
1080 .icon-double-angle-right:before {
1081   content: "\f101";
1082 }
1083 .icon-double-angle-up:before {
1084   content: "\f102";
1085 }
1086 .icon-double-angle-down:before {
1087   content: "\f103";
1088 }
1089 .icon-angle-left:before {
1090   content: "\f104";
1091 }
1092 .icon-angle-right:before {
1093   content: "\f105";
1094 }
1095 .icon-angle-up:before {
1096   content: "\f106";
1097 }
1098 .icon-angle-down:before {
1099   content: "\f107";
1100 }
1101 .icon-desktop:before {
1102   content: "\f108";
1103 }
1104 .icon-laptop:before {
1105   content: "\f109";
1106 }
1107 .icon-tablet:before {
1108   content: "\f10a";
1109 }
1110 .icon-mobile-phone:before {
1111   content: "\f10b";
1112 }
1113 .icon-circle-blank:before {
1114   content: "\f10c";
1115 }
1116 .icon-quote-left:before {
1117   content: "\f10d";
1118 }
1119 .icon-quote-right:before {
1120   content: "\f10e";
1121 }
1122 .icon-spinner:before {
1123   content: "\f110";
1124 }
1125 .icon-circle:before {
1126   content: "\f111";
1127 }
1128 .icon-mail-reply:before,
1129 .icon-reply:before {
1130   content: "\f112";
1131 }
1132 .icon-github-alt:before {
1133   content: "\f113";
1134 }
1135 .icon-folder-close-alt:before {
1136   content: "\f114";
1137 }
1138 .icon-folder-open-alt:before {
1139   content: "\f115";
1140 }
1141 .icon-expand-alt:before {
1142   content: "\f116";
1143 }
1144 .icon-collapse-alt:before {
1145   content: "\f117";
1146 }
1147 .icon-smile:before {
1148   content: "\f118";
1149 }
1150 .icon-frown:before {
1151   content: "\f119";
1152 }
1153 .icon-meh:before {
1154   content: "\f11a";
1155 }
1156 .icon-gamepad:before {
1157   content: "\f11b";
1158 }
1159 .icon-keyboard:before {
1160   content: "\f11c";
1161 }
1162 .icon-flag-alt:before {
1163   content: "\f11d";
1164 }
1165 .icon-flag-checkered:before {
1166   content: "\f11e";
1167 }
1168 .icon-terminal:before {
1169   content: "\f120";
1170 }
1171 .icon-code:before {
1172   content: "\f121";
1173 }
1174 .icon-reply-all:before {
1175   content: "\f122";
1176 }
1177 .icon-mail-reply-all:before {
1178   content: "\f122";
1179 }
1180 .icon-star-half-full:before,
1181 .icon-star-half-empty:before {
1182   content: "\f123";
1183 }
1184 .icon-location-arrow:before {
1185   content: "\f124";
1186 }
1187 .icon-crop:before {
1188   content: "\f125";
1189 }
1190 .icon-code-fork:before {
1191   content: "\f126";
1192 }
1193 .icon-unlink:before {
1194   content: "\f127";
1195 }
1196 .icon-question:before {
1197   content: "\f128";
1198 }
1199 .icon-info:before {
1200   content: "\f129";
1201 }
1202 .icon-exclamation:before {
1203   content: "\f12a";
1204 }
1205 .icon-superscript:before {
1206   content: "\f12b";
1207 }
1208 .icon-subscript:before {
1209   content: "\f12c";
1210 }
1211 .icon-eraser:before {
1212   content: "\f12d";
1213 }
1214 .icon-puzzle-piece:before {
1215   content: "\f12e";
1216 }
1217 .icon-microphone:before {
1218   content: "\f130";
1219 }
1220 .icon-microphone-off:before {
1221   content: "\f131";
1222 }
1223 .icon-shield:before {
1224   content: "\f132";
1225 }
1226 .icon-calendar-empty:before {
1227   content: "\f133";
1228 }
1229 .icon-fire-extinguisher:before {
1230   content: "\f134";
1231 }
1232 .icon-rocket:before {
1233   content: "\f135";
1234 }
1235 .icon-maxcdn:before {
1236   content: "\f136";
1237 }
1238 .icon-chevron-sign-left:before {
1239   content: "\f137";
1240 }
1241 .icon-chevron-sign-right:before {
1242   content: "\f138";
1243 }
1244 .icon-chevron-sign-up:before {
1245   content: "\f139";
1246 }
1247 .icon-chevron-sign-down:before {
1248   content: "\f13a";
1249 }
1250 .icon-html5:before {
1251   content: "\f13b";
1252 }
1253 .icon-css3:before {
1254   content: "\f13c";
1255 }
1256 .icon-anchor:before {
1257   content: "\f13d";
1258 }
1259 .icon-unlock-alt:before {
1260   content: "\f13e";
1261 }
1262 .icon-bullseye:before {
1263   content: "\f140";
1264 }
1265 .icon-ellipsis-horizontal:before {
1266   content: "\f141";
1267 }
1268 .icon-ellipsis-vertical:before {
1269   content: "\f142";
1270 }
1271 .icon-rss-sign:before {
1272   content: "\f143";
1273 }
1274 .icon-play-sign:before {
1275   content: "\f144";
1276 }
1277 .icon-ticket:before {
1278   content: "\f145";
1279 }
1280 .icon-minus-sign-alt:before {
1281   content: "\f146";
1282 }
1283 .icon-check-minus:before {
1284   content: "\f147";
1285 }
1286 .icon-level-up:before {
1287   content: "\f148";
1288 }
1289 .icon-level-down:before {
1290   content: "\f149";
1291 }
1292 .icon-check-sign:before {
1293   content: "\f14a";
1294 }
1295 .icon-edit-sign:before {
1296   content: "\f14b";
1297 }
1298 .icon-external-link-sign:before {
1299   content: "\f14c";
1300 }
1301 .icon-share-sign:before {
1302   content: "\f14d";
1303 }
1304 .icon-compass:before {
1305   content: "\f14e";
1306 }
1307 .icon-collapse:before {
1308   content: "\f150";
1309 }
1310 .icon-collapse-top:before {
1311   content: "\f151";
1312 }
1313 .icon-expand:before {
1314   content: "\f152";
1315 }
1316 .icon-euro:before,
1317 .icon-eur:before {
1318   content: "\f153";
1319 }
1320 .icon-gbp:before {
1321   content: "\f154";
1322 }
1323 .icon-dollar:before,
1324 .icon-usd:before {
1325   content: "\f155";
1326 }
1327 .icon-rupee:before,
1328 .icon-inr:before {
1329   content: "\f156";
1330 }
1331 .icon-yen:before,
1332 .icon-jpy:before {
1333   content: "\f157";
1334 }
1335 .icon-renminbi:before,
1336 .icon-cny:before {
1337   content: "\f158";
1338 }
1339 .icon-won:before,
1340 .icon-krw:before {
1341   content: "\f159";
1342 }
1343 .icon-bitcoin:before,
1344 .icon-btc:before {
1345   content: "\f15a";
1346 }
1347 .icon-file:before {
1348   content: "\f15b";
1349 }
1350 .icon-file-text:before {
1351   content: "\f15c";
1352 }
1353 .icon-sort-by-alphabet:before {
1354   content: "\f15d";
1355 }
1356 .icon-sort-by-alphabet-alt:before {
1357   content: "\f15e";
1358 }
1359 .icon-sort-by-attributes:before {
1360   content: "\f160";
1361 }
1362 .icon-sort-by-attributes-alt:before {
1363   content: "\f161";
1364 }
1365 .icon-sort-by-order:before {
1366   content: "\f162";
1367 }
1368 .icon-sort-by-order-alt:before {
1369   content: "\f163";
1370 }
1371 .icon-thumbs-up:before {
1372   content: "\f164";
1373 }
1374 .icon-thumbs-down:before {
1375   content: "\f165";
1376 }
1377 .icon-youtube-sign:before {
1378   content: "\f166";
1379 }
1380 .icon-youtube:before {
1381   content: "\f167";
1382 }
1383 .icon-xing:before {
1384   content: "\f168";
1385 }
1386 .icon-xing-sign:before {
1387   content: "\f169";
1388 }
1389 .icon-youtube-play:before {
1390   content: "\f16a";
1391 }
1392 .icon-dropbox:before {
1393   content: "\f16b";
1394 }
1395 .icon-stackexchange:before {
1396   content: "\f16c";
1397 }
1398 .icon-instagram:before {
1399   content: "\f16d";
1400 }
1401 .icon-flickr:before {
1402   content: "\f16e";
1403 }
1404 .icon-adn:before {
1405   content: "\f170";
1406 }
1407 .icon-bitbucket:before {
1408   content: "\f171";
1409 }
1410 .icon-bitbucket-sign:before {
1411   content: "\f172";
1412 }
1413 .icon-tumblr:before {
1414   content: "\f173";
1415 }
1416 .icon-tumblr-sign:before {
1417   content: "\f174";
1418 }
1419 .icon-long-arrow-down:before {
1420   content: "\f175";
1421 }
1422 .icon-long-arrow-up:before {
1423   content: "\f176";
1424 }
1425 .icon-long-arrow-left:before {
1426   content: "\f177";
1427 }
1428 .icon-long-arrow-right:before {
1429   content: "\f178";
1430 }
1431 .icon-apple:before {
1432   content: "\f179";
1433 }
1434 .icon-windows:before {
1435   content: "\f17a";
1436 }
1437 .icon-android:before {
1438   content: "\f17b";
1439 }
1440 .icon-linux:before {
1441   content: "\f17c";
1442 }
1443 .icon-dribbble:before {
1444   content: "\f17d";
1445 }
1446 .icon-skype:before {
1447   content: "\f17e";
1448 }
1449 .icon-foursquare:before {
1450   content: "\f180";
1451 }
1452 .icon-trello:before {
1453   content: "\f181";
1454 }
1455 .icon-female:before {
1456   content: "\f182";
1457 }
1458 .icon-male:before {
1459   content: "\f183";
1460 }
1461 .icon-gittip:before {
1462   content: "\f184";
1463 }
1464 .icon-sun:before {
1465   content: "\f185";
1466 }
1467 .icon-moon:before {
1468   content: "\f186";
1469 }
1470 .icon-archive:before {
1471   content: "\f187";
1472 }
1473 .icon-bug:before {
1474   content: "\f188";
1475 }
1476 .icon-vk:before {
1477   content: "\f189";
1478 }
1479 .icon-weibo:before {
1480   content: "\f18a";
1481 }
1482 .icon-renren:before {
1483   content: "\f18b";
1484 }
1485 * .font-onyx {
1486   /**
1487      * Icon size set per Onyx standard:
1488      * https://github.com/enyojs/onyx/blob/master/source/Icon.js#L5
1489      */
1490   width: 32px;
1491   height: 32px;
1492   padding: 3px;
1493   text-align: center;
1494 }
1495 * .font-onyx div {
1496   font-size: 22px;
1497   color: #dddddd;
1498   text-shadow: 3px 3px 5px rgba(34, 34, 34, 0.97), 0px 0px 3px rgba(34, 34, 34, 0.97);
1499 }
1500 * .font-onyx .text {
1501   font-size: 12px;
1502 }
1503 .font-onyx.text-icon {
1504   width: 50px;
1505   height: 40px;
1506 }
1507 .font-onyx.icon.button:not(.disabled) {
1508   cursor: pointer;
1509 }
1510 .font-onyx.icon.button:not(.disabled):active div {
1511   color: white;
1512   text-shadow: 2px 2px 5px #0099ff, -2px -2px 5px #0099ff, 2px -2px 5px #0099ff, -2px 2px 5px #0099ff;
1513 }
1514 body {
1515   font-family: 'Helvetica Neue', Helvetica, 'Nimbus Sans L', Arial, sans-serif;
1516   font-size: 100%;
1517   background-color: #fdfdfd;
1518 }
1519 .enyo-fit {
1520   bottom: 4px !important;
1521 }
1522 .disabled {
1523   opacity: 0.8;
1524   cursor: default;
1525 }
1526 a,
1527 .hyperlink {
1528   color: #357ec7;
1529   cursor: pointer;
1530 }
1531 .xv-app-panel {
1532   /* Setting this as min-width overrides enyo-narrow 100% */
1533   width: 320px;
1534   background-color: #fdfdfd;
1535   -webkit-box-shadow: -2px -2px 6px rgba(0, 0, 0, 0.2);
1536   -moz-box-shadow: -2px -2px 6px rgba(0, 0, 0, 0.2);
1537   box-shadow: -2px -2px 6px rgba(0, 0, 0, 0.2);
1538 }
1539 /*
1540   Media query for responsive design. This adapts to smaller
1541   displays.
1542 */
1543 @media (max-width: 480px) {
1544   .pullout-menu {
1545     display: block;
1546     margin: 0;
1547   }
1548   .xv-app-panel > * {
1549     min-width: 100%;
1550     max-width: 100%;
1551   }
1552   .enyo-fit {
1553     margin-bottom: -4px !important;
1554   }
1555 }
1556 .wide > * {
1557   min-width: 50%;
1558 }
1559 .scroll-ios {
1560   overflow: auto;
1561   -webkit-overflow-scrolling: touch;
1562 }
1563 .wide > * {
1564   min-width: 50%;
1565 }
1566 .xv-version-label {
1567   padding: 10px;
1568 }
1569 .xv-popup-button {
1570   margin: 4px;
1571 }
1572 .xv-error,
1573 .xv-negative {
1574   color: #ff0000;
1575 }
1576 /**
1577   Default button bar with margins and border-radius
1578 */
1579 .xv-buttons {
1580   margin: 5px;
1581 }
1582 .xv-buttons.center {
1583   text-align: center;
1584 }
1585 .xv-buttons .onyx-button {
1586   margin: 2px;
1587   min-width: 60px;
1588   background: #e1e1e1;
1589   color: #666666;
1590   font-size: 20px;
1591 }
1592 .xv-buttons .onyx-button.text {
1593   font-size: 17px;
1594   font-family: 'Helvetica Neue', Helvetica, 'Nimbus Sans L', Arial, sans-serif;
1595 }
1596 .xv-buttons .onyx-button.selected {
1597   background: #357ec7;
1598   color: #fdfdfd;
1599 }
1600 .xv-assignment-box .xv-flexible-label {
1601   width: 85%;
1602 }
1603 .xv-assignment-box .xv-label {
1604   width: 250px;
1605 }
1606 .xv-parameter-title {
1607   padding-top: 8px;
1608   font-size: large;
1609   text-align: center;
1610 }
1611 /**
1612   Default popup style
1613 */
1614 .xv-popup {
1615   background: #505050;
1616   margin: 0;
1617   max-height: 400px;
1618   width: 400px;
1619   min-width: 320px;
1620   padding: 7px;
1621   text-align: center;
1622 }
1623 .xv-popup.xv-groupbox-popup {
1624   width: 320px;
1625   margin: 0 4px 0 2px;
1626   padding: 0;
1627   background: #f8f8f8;
1628   text-overflow: ellipsis;
1629   border: 1px solid #d7d7d7;
1630   color: #070707;
1631   padding: 7px;
1632 }
1633 .xv-popup.xv-groupbox-popup .onyx-groupbox-header {
1634   padding: 6px 10px;
1635   border-bottom: 1px solid #d7d7d7;
1636   background: #efefef;
1637   color: #0e0e0e;
1638 }
1639 .xv-popup.xv-groupbox-popup .onyx-groupbox-header i {
1640   margin-right: 10px;
1641 }
1642 .xv-popup.xv-groupbox-popup.small-panel {
1643   width: 600px;
1644 }
1645 .xv-popup.xv-groupbox-popup.medium-panel {
1646   width: 700px;
1647 }
1648 .xv-popup.xv-groupbox-popup.large-panel {
1649   width: 800px;
1650 }
1651 .xv-popup.xv-groupbox-popup .xv-label,
1652 .xv-popup.xv-groupbox-popup .xv-decorated-label,
1653 .xv-popup.xv-groupbox-popup .xv-flexible-label {
1654   width: 120px !important;
1655   max-width: 100%;
1656   padding: 0 8px 0 6px;
1657   text-align: right;
1658   vertical-align: middle;
1659 }
1660 .xv-popup.xv-groupbox-popup.xv-assignment-box .xv-flexible-label,
1661 .xv-popup.xv-groupbox-popup.xv-assignment-box .xv-label {
1662   width: 200px !important;
1663 }
1664 .xv-popup.xv-groupbox-popup .xv-input {
1665   border-bottom: 1px solid #d7d7d7;
1666   margin: 0px;
1667 }
1668 .xv-popup.xv-groupbox-popup .xv-relationwidget .xv-description {
1669   overflow: hidden;
1670   display: -webkit-box;
1671   -webkit-line-clamp: 4;
1672   -webkit-box-orient: vertical;
1673   max-width: 250px;
1674   margin: 5px 5px 5px 80px;
1675   font-size: 0.9em;
1676 }
1677 .xv-popup.xv-groupbox-popup .xv-relationwidget .xv-description.disabled {
1678   color: #777777;
1679 }
1680 .xv-popup.xv-groupbox-popup .enyo-fittable-columns-layout > * {
1681   vertical-align: middle;
1682 }
1683 .xv-popup.xv-groupbox-popup .xv-message {
1684   color: #c51616;
1685   padding: 5px;
1686 }
1687 .xv-my-account-popup {
1688   background-color: #fdfdfd;
1689   color: #000;
1690 }
1691 .xv-my-account-popup .xv-message {
1692   color: red;
1693   padding: 5px;
1694 }
1695 .xv-my-account-popup .onyx-button {
1696   margin: 0 auto 0 auto;
1697 }
1698 .xv-my-account-popup .onyx-input {
1699   padding-left: 10px;
1700   float: right;
1701 }
1702 .xv-sort-popup {
1703   background-color: #fdfdfd;
1704   color: #070707;
1705 }
1706 .xv-sort-popup .xv-groupbox > *:last-child {
1707   text-align: center;
1708   padding: 5px;
1709 }
1710 .xv-sort-popup .xv-groupbox > *:last-child .onyx-button {
1711   margin: 3px;
1712 }
1713 .xv-comment-box {
1714   /* Resets the margin/padding value for blockquote tag in comments */
1715 }
1716 .xv-comment-box .xv-comment-box-repeater {
1717   background: #fdfdfd;
1718 }
1719 .xv-comment-box .xv-comment-box-label {
1720   padding: 5px;
1721   font-size: small;
1722   font-weight: bold;
1723   white-space: nowrap;
1724   overflow: hidden;
1725   text-overflow: ellipsis;
1726 }
1727 .xv-comment-box .xv-comment-box-textblock {
1728   font-size: small;
1729 }
1730 .xv-comment-box .xv-comment-box-textblock.disabled {
1731   color: #777777;
1732 }
1733 .xv-comment-box blockquote {
1734   margin: 0 15px 10px 15px;
1735   padding: 0;
1736 }
1737 .icon-folder-open-alt,
1738 .icon-calendar,
1739 .icon-sort {
1740   color: #357ec7;
1741   vertical-align: middle;
1742 }
1743 .xv-short-textarea .xv-textarea-input {
1744   min-height: 0;
1745 }
1746 .xv-textarea-input {
1747   width: 90%;
1748   min-height: 100px;
1749   margin: 6px;
1750   border: #eee 2px solid;
1751 }
1752 .xv-documents-picker-label {
1753   width: 85px;
1754   padding: 16px 8px 8px 8px;
1755   text-align: right;
1756 }
1757 .xv-documents-picker {
1758   width: 120px;
1759   margin: 6px;
1760 }
1761 .xv-half-check {
1762   background: transparent url(../../../../../../assets/checkbox.png) no-repeat 0 -96px scroll;
1763 }
1764 .xv-menuitem.disabled {
1765   color: #777777;
1766 }
1767 /* This is for styling the moved items in the more toolbar */
1768 .xv-toolbar-moved {
1769   width: 220px;
1770 }
1771 .icon-folder-open-alt,
1772 .icon-calendar,
1773 .icon-sort,
1774 .icon-angle-up,
1775 .icon-angle-down,
1776 .icon-save {
1777   color: #357ec7;
1778   vertical-align: middle;
1779 }
1780 .onyx-toolbar {
1781   height: 55px;
1782   padding: 4px;
1783   background: #505050;
1784   border: none;
1785 }
1786 .onyx-toolbar .onyx-icon-button,
1787 .onyx-toolbar .onyx-popup-decorator {
1788   margin: 0 5px 0 3px;
1789 }
1790 .onyx-toolbar .onyx-icon-button div,
1791 .onyx-toolbar .onyx-popup-decorator div {
1792   text-shadow: none;
1793   color: #fdfdfd;
1794 }
1795 .onyx-toolbar .onyx-icon-button.lock div,
1796 .onyx-toolbar .onyx-popup-decorator.lock div {
1797   color: #ff9c00;
1798 }
1799 .onyx-toolbar .onyx-popup-decorator {
1800   text-align: center;
1801   width: 50px;
1802   height: 40px;
1803 }
1804 .onyx-toolbar .onyx-popup-decorator .onyx-icon-button {
1805   margin: 0;
1806 }
1807 .onyx-toolbar .onyx-menu {
1808   margin-top: 10px;
1809 }
1810 .onyx-toolbar .spacer {
1811   margin: 0;
1812 }
1813 .onyx-toolbar .xv-toolbar-label,
1814 .onyx-toolbar .xv-search {
1815   width: 185px;
1816   margin: 0;
1817   margin-left: 6px;
1818 }
1819 .onyx-toolbar .xv-search {
1820   color: #939393;
1821 }
1822 .xv-navigator .xv-header {
1823   background-color: #fdfdfd;
1824   padding: 6px 12px;
1825   border-bottom: 1px solid #d7d7d7;
1826   height: 28px;
1827   color: #ff6529;
1828   font-size: small;
1829   font-weight: bold;
1830   text-transform: uppercase;
1831   white-space: nowrap;
1832   overflow: hidden;
1833   text-overflow: ellipsis;
1834 }
1835 .xv-navigator > .xv-content-panel {
1836   /**
1837      * The enyo List height calculations really like to override this and make
1838      * the list shorter and not consume all the space available.
1839      */
1840   height: 100%;
1841 }
1842 .xv-navigator .xv-menu-container .xv-panels {
1843   height: 100%;
1844 }
1845 .xv-navigator .xv-menu-container .xv-navigator-menu .xv-list-item {
1846   padding: 12px 10px;
1847   color: #0e0e0e;
1848   background-color: #fdfdfd;
1849   border-bottom: 1px solid #d7d7d7;
1850 }
1851 .xv-navigator .xv-menu-container .xv-navigator-menu .xv-list-item.onyx-selected {
1852   background-color: #357ec7;
1853   color: #fdfdfd;
1854   border-bottom: 2px solid #d8d8d8;
1855 }
1856 /**
1857   Styles for the application startup
1858 */
1859 .xv-startup-panel {
1860   background: #fdfdfd;
1861 }
1862 .xv-startup-panel .xv-startup-divider {
1863   width: 70%;
1864   height: 30px;
1865   line-height: 30px;
1866   margin: 0 auto 10px auto;
1867   top: 200px;
1868   position: relative;
1869   color: #ff6529;
1870   font-family: Segoe UI, Prelude Medium, Helvetica, Verdana, sans-serif;
1871   font-size: 16px;
1872   font-weight: bold;
1873   border: none;
1874 }
1875 .xv-startup-panel .xv-startup-progress {
1876   width: 70%;
1877   margin: 0 auto 0 auto;
1878   top: 200px;
1879   position: relative;
1880 }
1881 .xv-startup-panel .xv-startup-progress.onyx-progress-button {
1882   height: 18px;
1883   line-height: 18px;
1884 }
1885 .xv-startup-panel .xv-startup-progress.onyx-progress-button-bar {
1886   height: 18px;
1887 }
1888 .xv-workspace-container {
1889   background: #fdfdfd;
1890   -webkit-box-shadow: -2px -2px 6px rgba(0, 0, 0, 0.2);
1891   -moz-box-shadow: -2px -2px 6px rgba(0, 0, 0, 0.2);
1892   box-shadow: -2px -2px 6px rgba(0, 0, 0, 0.2);
1893 }
1894 .xv-workspace-container .xv-content-panel .xv-header {
1895   background-color: #fdfdfd;
1896   border-bottom: 1px solid #d7d7d7;
1897   height: 28px;
1898   color: #ff6529;
1899   font-size: small;
1900   font-weight: bold;
1901   text-transform: uppercase;
1902   white-space: nowrap;
1903   overflow: hidden;
1904   text-overflow: ellipsis;
1905   padding: 6px 12px;
1906   border: none;
1907 }
1908 .xv-workspace-container > .xv-menu-container .xv-panels {
1909   height: 100%;
1910 }
1911 .xv-workspace-container > .xv-menu-container .xv-navigator-menu .xv-list-item {
1912   padding: 12px 10px;
1913   color: #0e0e0e;
1914   background-color: #fdfdfd;
1915   border-bottom: 1px solid #d7d7d7;
1916 }
1917 .xv-workspace-container > .xv-menu-container .xv-navigator-menu .xv-list-item.onyx-selected {
1918   background-color: #357ec7;
1919   color: #fdfdfd;
1920   border-bottom: 2px solid #d8d8d8;
1921 }
1922 .xv-workspace-container > .xv-menu-container .xv-header {
1923   background-color: #fdfdfd;
1924   padding: 6px 12px;
1925   border-bottom: 1px solid #d7d7d7;
1926   height: 28px;
1927   color: #ff6529;
1928   font-size: small;
1929   font-weight: bold;
1930   text-transform: uppercase;
1931   white-space: nowrap;
1932   overflow: hidden;
1933   text-overflow: ellipsis;
1934 }
1935 .xv-workspace-container .xv-workspace {
1936   background-color: #fdfdfd;
1937 }
1938 .xv-workspace-container .xv-workspace > .enyo-panels {
1939   width: 100% !important;
1940   height: 100% !important;
1941 }
1942 .xv-workspace-container .xv-workspace .xv-buttons .onyx-button {
1943   border: 1px solid #d7d7d7;
1944 }
1945 .xv-workspace-container .xv-workspace .xv-buttons .onyx-button[disabled] {
1946   opacity: 0.6;
1947   cursor: default;
1948 }
1949 .xv-workspace-container .xv-workspace .panel .xv-buttons {
1950   background-color: #efefef;
1951   margin: 0;
1952 }
1953 .xv-workspace-container .xv-workspace .panel .xv-buttons .onyx-button {
1954   border-radius: 0;
1955   margin: 0;
1956 }
1957 .xv-workspace-container .xv-workspace .xv-workspace-panel {
1958   width: 320px;
1959   margin: 0 4px 0 2px;
1960   padding: 0;
1961   background: #f8f8f8;
1962   text-overflow: ellipsis;
1963   border: 1px solid #d7d7d7;
1964 }
1965 .xv-workspace-container .xv-workspace .xv-workspace-panel .onyx-groupbox-header {
1966   padding: 6px 10px;
1967   border-bottom: 1px solid #d7d7d7;
1968   background: #efefef;
1969   color: #0e0e0e;
1970 }
1971 .xv-workspace-container .xv-workspace .xv-workspace-panel .onyx-groupbox-header i {
1972   margin-right: 10px;
1973 }
1974 .xv-workspace-container .xv-workspace .xv-workspace-panel.small-panel {
1975   width: 600px;
1976 }
1977 .xv-workspace-container .xv-workspace .xv-workspace-panel.medium-panel {
1978   width: 700px;
1979 }
1980 .xv-workspace-container .xv-workspace .xv-workspace-panel.large-panel {
1981   width: 800px;
1982 }
1983 .xv-workspace-container .xv-workspace .xv-workspace-panel .xv-label,
1984 .xv-workspace-container .xv-workspace .xv-workspace-panel .xv-decorated-label,
1985 .xv-workspace-container .xv-workspace .xv-workspace-panel .xv-flexible-label {
1986   width: 120px !important;
1987   max-width: 100%;
1988   padding: 0 8px 0 6px;
1989   text-align: right;
1990   vertical-align: middle;
1991 }
1992 .xv-workspace-container .xv-workspace .xv-workspace-panel.xv-assignment-box .xv-flexible-label,
1993 .xv-workspace-container .xv-workspace .xv-workspace-panel.xv-assignment-box .xv-label {
1994   width: 200px !important;
1995 }
1996 .xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input {
1997   border-bottom: 1px solid #d7d7d7;
1998   margin: 0px;
1999 }
2000 .xv-workspace-container .xv-workspace .xv-workspace-panel .xv-relationwidget .xv-description {
2001   overflow: hidden;
2002   display: -webkit-box;
2003   -webkit-line-clamp: 4;
2004   -webkit-box-orient: vertical;
2005   max-width: 250px;
2006   margin: 5px 5px 5px 80px;
2007   font-size: 0.9em;
2008 }
2009 .xv-workspace-container .xv-workspace .xv-workspace-panel .xv-relationwidget .xv-description.disabled {
2010   color: #777777;
2011 }
2012 .xv-workspace-container .xv-workspace .xv-workspace-panel .enyo-fittable-columns-layout > * {
2013   vertical-align: middle;
2014 }
2015 .xv-workspace-container .xv-workspace .onyx-input-decorator.onyx-disabled {
2016   opacity: 0.8;
2017   cursor: default;
2018 }
2019 .xv-workspace-container .xv-workspace .xv-totals-panel .onyx-input-decorator > input,
2020 .xv-workspace-container .xv-workspace .xv-totals-panel * {
2021   font-size: 14px;
2022 }
2023 .xv-workspace-container .xv-workspace .xv-totals-panel .xv-input {
2024   border: none;
2025 }
2026 /**
2027  * Default ListItem styles when using a ModelDecorator.
2028  */
2029 .xv-list .xv-model-decorator > .xv-list-item .xv-table {
2030   display: table;
2031   width: 100%;
2032   table-layout: fixed;
2033 }
2034 .xv-list .xv-model-decorator > .xv-list-item .xv-table .xv-cell {
2035   display: table-cell;
2036 }
2037 .xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr {
2038   /**
2039         * Default styling for a model's id (as designated by 'idAttribute')
2040         */
2041 }
2042 .xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr.xm-attribute-id {
2043   color: #357ec7;
2044   font-weight: bold;
2045   cursor: pointer;
2046 }
2047 .xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr.xm-attribute-name {
2048   font-weight: bold;
2049 }
2050 .xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr.xm-attributetype-number {
2051   text-align: right;
2052 }
2053 .xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr.xm-attributetype-money {
2054   text-align: right;
2055 }
2056 .xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr.xm-attributetype-date {
2057   text-align: right;
2058 }
2059 .xv-list .xv-model-decorator > .xv-list-item.item-selected .xv-list-attr {
2060   color: white;
2061 }
2062 .xv-list .xv-model-decorator > .xv-list-item.item-selected .xv-list-attr.xm-attribute-id {
2063   color: #ff6529;
2064 }
2065 /**
2066   Styles related to pickers, combo boxes, and relation widgets
2067 */
2068 .onyx-picker-decorator .onyx-button {
2069   padding: 12px 8px 12px 8px;
2070   width: 150px;
2071 }
2072 .onyx-picker .onyx-menu-item {
2073   text-align: left;
2074   text-overflow: ellipsis;
2075 }
2076 .picker-icon {
2077   position: absolute;
2078   right: 0;
2079   margin: 0 10px 0 2px;
2080   color: #070707;
2081 }
2082 .xv-picker-button {
2083   text-align: left;
2084 }
2085 .xv-picker-button .picker-content {
2086   max-width: 100px;
2087   overflow: hidden;
2088 }
2089 .xv-picker-button.disabled {
2090   color: #777777;
2091 }
2092 .xv-picker-label {
2093   color: #070707;
2094   padding: 20px 8px 8px 8px;
2095   text-align: right;
2096   width: 130px;
2097 }
2098 .xv-picker-label.disabled {
2099   color: #777777;
2100 }
2101 .xv-combobox .onyx-input-decorator input {
2102   width: 145px;
2103 }
2104 .xv-combobox .icon-sort {
2105   color: #357ec7;
2106   vertical-align: middle;
2107 }
2108 .xv-combobox-note {
2109   padding: 14px 3px 8px 3px;
2110   text-align: left;
2111 }
2112 /*
2113   Styles relating to the grid box
2114 */
2115 /* Entire box including the grid and the summary panel */
2116 .xv-grid-box {
2117   /**
2118     This is the most general grid row that
2119     is not specific to read-only or selected
2120   */
2121 }
2122 .xv-grid-box.small-panel {
2123   width: 600px;
2124 }
2125 .xv-grid-box.medium-panel {
2126   width: 700px;
2127 }
2128 .xv-grid-box.large-panel {
2129   width: 800px;
2130 }
2131 .xv-grid-box .enyo-list-page > *:first-child .xv-grid-row {
2132   border-top: 0;
2133 }
2134 .xv-grid-box .xv-above-grid-list {
2135   border: 0;
2136 }
2137 .xv-grid-box .xv-scroller {
2138   background: #f8f8f8;
2139 }
2140 .xv-grid-box .xv-grid-attr {
2141   overflow: hidden;
2142   display: -webkit-box;
2143   -webkit-line-clamp: 3;
2144   -webkit-box-orient: vertical;
2145 }
2146 .xv-grid-box .xv-grid-attr.bold {
2147   font-weight: bold;
2148 }
2149 .xv-grid-box .xv-grid-attr.error {
2150   color: #ff0000;
2151 }
2152 .xv-grid-box .xv-grid-attr.emphasis {
2153   color: #009000;
2154 }
2155 .xv-grid-box .xv-grid-attr.warn {
2156   color: #ff9c00;
2157 }
2158 .xv-grid-box .xv-grid-attr.italic {
2159   font-style: italic;
2160 }
2161 .xv-grid-box .xv-grid-attr.placeholder {
2162   font-style: italic;
2163   color: #93a1a1;
2164 }
2165 .xv-grid-box .xv-grid-attr.hyperlink {
2166   color: blue;
2167 }
2168 .xv-grid-box .xv-gridbox-button {
2169   color: #357ec7;
2170   font-size: 18px;
2171   border: none;
2172   background: transparent;
2173 }
2174 .xv-grid-box .xv-grid-row {
2175   font-size: 12px;
2176   background-color: #d8d8d8;
2177   border-bottom: 1px solid #aaaaaa;
2178   vertical-align: top;
2179   /**
2180       This is the grid header row
2181     */
2182 }
2183 .xv-grid-box .xv-grid-row > * {
2184   display: inline-block;
2185 }
2186 .xv-grid-box .xv-grid-row .xv-grid-header {
2187   background-color: #d7d7d7;
2188   color: #0e0e0e;
2189   font-size: .8em;
2190   font-weight: bold;
2191   text-transform: uppercase;
2192   padding-top: 4px;
2193 }
2194 .xv-grid-box .xv-grid-row .xv-grid-header.last {
2195   border-right: none;
2196 }
2197 .xv-grid-box .xv-grid-row > * {
2198   padding: 6px 4px;
2199   border: none;
2200 }
2201 .xv-grid-box .xv-grid-row .line-number {
2202   vertical-align: top;
2203   width: 30px;
2204   text-align: right;
2205 }
2206 .xv-grid-box .xv-grid-row .grid-actions {
2207   display: block;
2208   padding-left: 30px;
2209   border-radius: 4px;
2210   border-width: 0;
2211   background: #f3f3f3;
2212   margin: 6px;
2213 }
2214 .xv-grid-box .xv-grid-row .grid-actions > * {
2215   display: inline-block;
2216   width: 100%;
2217 }
2218 .xv-grid-box .xv-grid-row .grid-item {
2219   vertical-align: top;
2220   width: 175px;
2221 }
2222 .xv-grid-box .xv-grid-row .quantity {
2223   vertical-align: top;
2224   text-align: right;
2225   width: 100px;
2226 }
2227 .xv-grid-box .xv-grid-row .percent {
2228   vertical-align: top;
2229   text-align: right;
2230   width: 90px;
2231 }
2232 .xv-grid-box .xv-grid-row .price {
2233   vertical-align: top;
2234   text-align: right;
2235   width: 90px;
2236 }
2237 .xv-grid-box .xv-grid-row .date {
2238   vertical-align: top;
2239   width: 105px;
2240 }
2241 .xv-grid-box .xv-grid-row .user {
2242   vertical-align: top;
2243   width: 100px;
2244 }
2245 .xv-grid-box .xv-grid-row.readonly {
2246   background: #f8f8f8;
2247   min-height: 56px;
2248 }
2249 .xv-grid-box .xv-grid-row.selected {
2250   background-color: #fdfdfd;
2251   border: 1px solid #ff6529;
2252 }
2253 .xv-grid-box .xv-grid-row.selected .xv-grid-column .onyx-input-decorator {
2254   padding: 0;
2255   width: 100%;
2256   margin: 0;
2257 }
2258 .xv-grid-box .xv-grid-row.selected .xv-grid-column .onyx-input-decorator input {
2259   width: 100%;
2260   font-size: 13px;
2261 }
2262 .xv-grid-box .xv-grid-row.selected .xv-grid-column .onyx-picker-decorator {
2263   padding-top: 6px;
2264   width: 100%;
2265 }
2266 .xv-grid-box .xv-grid-row.selected .xv-grid-column .onyx-picker-decorator .onyx-button {
2267   height: 26px;
2268   padding-top: 3px;
2269   width: 100%;
2270   font-size: 13px;
2271 }
2272 .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-input {
2273   border: none;
2274 }
2275 .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-picker-label {
2276   display: none;
2277 }
2278 .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-datewidget {
2279   margin-right: 10px;
2280   padding-top: 0;
2281 }
2282 .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-datewidget .onyx-input-decorator {
2283   padding: 0;
2284   width: 100%;
2285 }
2286 .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-datewidget .onyx-input-decorator input {
2287   width: 85%;
2288   font-size: 13px;
2289 }
2290 .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-numberwidget {
2291   padding-top: 6px;
2292 }
2293 .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-numberwidget .onyx-input-decorator {
2294   padding: 0;
2295   width: 100%;
2296   margin: 0;
2297 }
2298 .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-numberwidget .onyx-input-decorator input {
2299   width: 100%;
2300   font-size: 13px;
2301 }
2302 .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-combobox {
2303   padding-left: 0;
2304 }
2305 .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-combobox input {
2306   padding-top: 3px;
2307   width: 80px;
2308   font-size: 13px;
2309 }
2310 .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-moneywidget {
2311   padding-bottom: 0;
2312 }
2313 .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-moneywidget .onyx-input-decorator {
2314   padding: 0;
2315   width: 100%;
2316   margin: 0;
2317 }
2318 .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-moneywidget .onyx-input-decorator input {
2319   width: 100%;
2320   font-size: 13px;
2321 }
2322 .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-useraccount-widget .xv-subinput {
2323   width: 80px;
2324   height: 16px;
2325 }
2326 .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-subinput {
2327   width: 100%;
2328 }
2329 .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-input {
2330   padding-top: 6px;
2331   width: 100%;
2332   border: none;
2333 }
2334 .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-label,
2335 .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-flexible-label {
2336   display: none;
2337 }
2338 .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-relationwidget .xv-description {
2339   margin: 0;
2340   margin-top: 5px;
2341 }
2342 .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-relationwidget .onyx-input-decorator {
2343   width: 100%;
2344   padding-top: 6px;
2345 }
2346 .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-relationwidget .onyx-input {
2347   width: 85%;
2348   padding-right: 4px;
2349 }
2350 .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-private-item-site-widget {
2351   border-bottom: 0;
2352 }
2353 .xv-grid-box.xv-groupbox .xv-sales-summary-panel {
2354   border: none;
2355   margin-top: 0;
2356   padding-left: 0;
2357   padding-right: 0;
2358 }
2359 .xv-grid-box.xv-groupbox .xv-sales-summary-panel .xv-sales-summary-total-group {
2360   padding: 0;
2361   border: none;
2362 }
2363 .xv-grid-box.xv-groupbox .xv-sales-summary-panel .xv-sales-summary-total-group .xv-moneywidget {
2364   padding-bottom: 0;
2365   padding-top: 0;
2366 }
2367 .xv-grid-box.xv-groupbox .xv-sales-summary-panel .xv-sales-summary-total-group .xv-moneywidget .xv-input-decorator {
2368   padding-bottom: 0;
2369   padding-top: 0;
2370 }
2371 .xv-grid-box.xv-groupbox .xv-sales-summary-panel .xv-sales-summary-total-group .xv-numberwidget {
2372   padding-bottom: 0;
2373   padding-top: 0;
2374 }
2375 .xv-grid-box.xv-groupbox .xv-sales-summary-panel .xv-sales-summary-total-group .xv-numberwidget .xv-input-decorator {
2376   width: 163px;
2377   padding-bottom: 0;
2378   padding-top: 0;
2379 }
2380 .xv-grid-list .xv-list-column {
2381   vertical-align: top !important;
2382 }
2383 /*
2384   Styles relating to the dashboard
2385 */
2386 /*
2387   Variables for widths/colors
2388 */
2389 .dashboard {
2390   background-color: #d8d8d8;
2391   /*
2392     These styles will only be used
2393     if the chart is in a dashboard
2394   */
2395 }
2396 .dashboard .charts-panels {
2397   overflow-y: auto;
2398 }
2399 .dashboard .selectable-chart {
2400   width: 500px;
2401   height: 230px;
2402 }
2403 .dashboard .selectable-chart .chart-title-bar {
2404   width: 500px;
2405 }
2406 .dashboard .nvtooltip {
2407   color: black;
2408 }
2409 .selectable-chart {
2410   margin: 10px;
2411   color: #357ec7;
2412   overflow: hidden;
2413   /*  The chart-filters may not be need as we are using the class xv-pullout
2414       for styles.  Delete when finished hacking the filter styles.
2415
2416   .chart-filters {
2417           background-color: @white;
2418           
2419           -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
2420           -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
2421           box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
2422   }
2423   
2424   .chart-filters .xv-parameter-panel {
2425           background-color: @ghost;
2426           border: 1px solid @smoke;
2427           margin: 0 4px 6px 0;
2428           width: 100%;
2429   }
2430   
2431   .chart-filters.xv-parameter-panel .onyx-groupbox-header {
2432           padding: 6px 10px;
2433           border-bottom: 1px solid @smoke;
2434           background: @lightest-gray;
2435           color: @near-black;
2436   }
2437
2438   .chart-filters.xv-parameter-panel .enyo-fittable-columns-layout {
2439           border-bottom: 1px solid @smoke;
2440           background: @white;
2441     color: @near-black;
2442     position: relative;
2443     text-align: left;
2444     white-space: nowrap;
2445   }
2446
2447   .chart-filters.xv-parameter-panel .enyo-fittable-columns-layout > * {
2448     vertical-align: middle;
2449   }
2450
2451   .chart-filters.xv-parameter-panel .xv-label {
2452     text-align: right;
2453   }
2454   
2455   */
2456 }
2457 .selectable-chart .xv-list-item {
2458   border-bottom: 1px solid grey;
2459   box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
2460 }
2461 .selectable-chart .xv-list-item .long {
2462   padding-left: 7px;
2463   width: 250px;
2464 }
2465 .selectable-chart .onyx-popup {
2466   margin-top: 40px;
2467   margin-left: 200px;
2468 }
2469 .selectable-chart .chart-title-bar {
2470   height: 48px;
2471   background-color: #efefef;
2472   text-transform: none;
2473   -webkit-border-top-right-radius: 10px;
2474   -moz-border-radius-topright: 10px;
2475   border-top-right-radius: 10px;
2476   -webkit-border-top-left-radius: 10px;
2477   -moz-border-radius-topleft: 10px;
2478   border-top-left-radius: 10px;
2479 }
2480 .selectable-chart .chart-title-bar .chart-title {
2481   padding-top: 8px;
2482   color: #070707;
2483   text-align: center;
2484   /*font-size: 2em;*/
2485   font-weight: normal;
2486   font-family: Helvetica;
2487 }
2488 .selectable-chart .chart-title-bar .chart-sub-title {
2489   /*padding-top: 8px;*/
2490   color: #0000ff;
2491   text-align: center;
2492   font-size: small;
2493   font-weight: normal;
2494   font-family: Helvetica;
2495 }
2496 .selectable-chart .chart-title-bar .remove-icon {
2497   position: absolute;
2498   top: 0;
2499   right: 0;
2500 }
2501 .selectable-chart .chart-title-bar .icon-filter {
2502   color: #070707;
2503   position: absolute;
2504   right: 35px;
2505 }
2506 .selectable-chart .chart-bottom {
2507   background-color: #fdfdfd;
2508   border: 1px solid #444444;
2509   border-top: none;
2510   -webkit-border-bottom-right-radius: 10px;
2511   -moz-border-radius-bottomright: 10px;
2512   border-bottom-right-radius: 10px;
2513   -webkit-border-bottom-left-radius: 10px;
2514   -moz-border-radius-bottomleft: 10px;
2515   border-bottom-left-radius: 10px;
2516 }
2517 .selectable-chart .chart-bottom .xv-picker-label {
2518   width: 100px;
2519   color: #070707;
2520 }
2521 .selectable-chart .chart-bottom .onyx-button {
2522   width: 130px;
2523   padding: 10px 10px;
2524 }
2525 .selectable-chart .chart-filterDrawer {
2526   top: 0px;
2527 }
2528 /**
2529   Styles relating to Lists
2530 */
2531 .xv-list-header {
2532   background-color: #d8d8d8;
2533   color: #fdfdfd;
2534   font-size: .6em;
2535   font-weight: bold;
2536   text-transform: uppercase;
2537   padding-top: 4px;
2538   padding-bottom: 4px;
2539   border-bottom: 1px solid #aaaaaa;
2540 }
2541 .xv-list-header .xv-list-column.last {
2542   border-right: none;
2543 }
2544 .xv-list-header .xv-list-column.name-column,
2545 .xv-list-header .xv-list-column.first,
2546 .xv-list-header .xv-list-column.second,
2547 .xv-list-header .xv-list-column.third,
2548 .xv-list-header .xv-list-column.short,
2549 .xv-list-header .xv-list-column.small,
2550 .xv-list-header .xv-list-column.medium,
2551 .xv-list-header .xv-list-column.descr {
2552   padding-left: 7px;
2553 }
2554 /* List */
2555 .xv-list-column.line-number {
2556   width: 30px;
2557   text-align: right;
2558 }
2559 .xv-list-column.name-column {
2560   width: 200px;
2561 }
2562 .xv-list-column.right-column {
2563   width: 100px;
2564   text-align: right;
2565 }
2566 .xv-list-column.short {
2567   width: 100px;
2568 }
2569 .xv-list-column.small {
2570   width: 125px;
2571 }
2572 .xv-list-column.medium {
2573   width: 150px;
2574 }
2575 .xv-list-column.first {
2576   width: 300px;
2577 }
2578 .xv-list-column.second {
2579   width: 200px;
2580 }
2581 .xv-list-column.third {
2582   width: 100px;
2583 }
2584 .xv-list-column.money,
2585 .xv-list-column.quantity {
2586   width: 75px;
2587   text-align: right;
2588 }
2589 .xv-list-column.descr {
2590   width: 200px;
2591 }
2592 .xv-list-column.icon {
2593   width: 10px;
2594 }
2595 .xv-list {
2596   background: #f8f8f8;
2597 }
2598 .xv-list .xv-list-item > * {
2599   display: inline-block;
2600   vertical-align: middle;
2601 }
2602 .xv-list .xv-list-item {
2603   background-color: #fdfdfd;
2604   border-bottom: 1px solid #d7d7d7;
2605   min-height: 32px;
2606 }
2607 .xv-list .xv-list-item.header {
2608   padding-top: 0;
2609 }
2610 .xv-list .xv-list-item.inactive {
2611   background-color: #d8d8d8;
2612   color: #070707;
2613 }
2614 .xv-list .xv-list-item.inactive .xv-list-column .xv-list-attr {
2615   background: transparent;
2616 }
2617 .xv-list .xv-list-item.inactive .xv-list-column .xv-list-attr.placeholder {
2618   color: #d8d8d8;
2619 }
2620 .xv-list .xv-list-item .xv-list-column .list-icon {
2621   padding: 2px;
2622   color: #666666;
2623   vertical-align: sub;
2624   border: 1px solid #efefef;
2625   -webkit-border-radius: 2px;
2626   -moz-border-radius: 2px;
2627   border-radius: 2px;
2628 }
2629 .xv-list .xv-list-item.item-selected {
2630   background: #226b9a;
2631   background-color: #1f608c;
2632   background-image: -moz-linear-gradient(top, #226b9a, #1a4f77);
2633   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#226b9a), to(#1a4f77));
2634   background-image: -webkit-linear-gradient(top, #226b9a, #1a4f77);
2635   background-image: -o-linear-gradient(top, #226b9a, #1a4f77);
2636   background-image: linear-gradient(to bottom, #226b9a, #1a4f77);
2637   background-repeat: repeat-x;
2638   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff226b9a', endColorstr='#ff1a4f77', GradientType=0);
2639 }
2640 .xv-list .xv-list-item.item-selected .xv-list-attr {
2641   color: #fdfdfd;
2642 }
2643 .xv-list .xv-list-item.item-selected .xv-list-attr.placeholder {
2644   font-style: italic;
2645   color: #99ccff;
2646 }
2647 .xv-list .xv-list-item.item-selected .xv-list-attr.hyperlink {
2648   color: #ff6529;
2649 }
2650 .xv-list .xv-list-item.item-selected .xv-list-attr.header {
2651   background: #99ccff;
2652 }
2653 .xv-list .xv-list-item .xv-list-item-gear {
2654   position: absolute;
2655   right: 0px;
2656   z-index: 999;
2657 }
2658 .xv-list.xv-grid-list {
2659   background: #f8f8f8;
2660 }
2661 .xv-list.xv-grid-list .xv-list-item > * {
2662   vertical-align: top;
2663 }
2664 .xv-list.xv-grid-list .xv-list-item {
2665   padding-top: 7px !important;
2666   padding-bottom: 9px !important;
2667   border-bottom: 1px solid #aaaaaa !important;
2668   background: #f8f8f8;
2669 }
2670 .xv-list.xv-grid-list .xv-list-item.item-selected {
2671   background: #226b9a;
2672   background-color: #1f608c;
2673   background-image: -moz-linear-gradient(top, #226b9a, #1a4f77);
2674   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#226b9a), to(#1a4f77));
2675   background-image: -webkit-linear-gradient(top, #226b9a, #1a4f77);
2676   background-image: -o-linear-gradient(top, #226b9a, #1a4f77);
2677   background-image: linear-gradient(to bottom, #226b9a, #1a4f77);
2678   background-repeat: repeat-x;
2679   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff226b9a', endColorstr='#ff1a4f77', GradientType=0);
2680 }
2681 .xv-list.xv-grid-list .xv-list-item.item-selected .xv-list-attr {
2682   color: #fdfdfd;
2683 }
2684 .xv-list.xv-grid-list .xv-list-item.item-selected .xv-list-attr.placeholder {
2685   font-style: italic;
2686   color: #99ccff;
2687 }
2688 .xv-list.xv-grid-list .xv-list-item.item-selected .xv-list-attr.hyperlink {
2689   color: #ff6529;
2690 }
2691 .xv-list.xv-grid-list .xv-list-item.item-selected .xv-list-attr.header {
2692   background: #99ccff;
2693 }
2694 .xv-list.xv-grid-list .xv-list-item .xv-list-column {
2695   vertical-align: top;
2696 }
2697 .xv-list.xv-grid-list .xv-list-item .xv-list-column .xv-list-attr {
2698   font-size: 12px;
2699 }
2700 .xv-list.xv-grid-list .xv-list-item .xv-list-column.last {
2701   border-right: none;
2702 }
2703 .xv-list.xv-grid-list .xv-list-item .xv-list-column.name-column {
2704   padding-left: 7px;
2705 }
2706 .xv-list.xv-grid-list .xv-list-item .xv-list-column.first {
2707   padding-left: 7px;
2708 }
2709 .xv-list.xv-grid-list .xv-list-item .xv-list-column.second {
2710   padding-left: 7px;
2711 }
2712 .xv-list.xv-grid-list .xv-list-item .xv-list-column.third {
2713   padding-left: 7px;
2714 }
2715 .xv-list.xv-grid-list .xv-list-item .xv-list-column.short {
2716   padding-left: 7px;
2717 }
2718 .xv-list.xv-grid-list .xv-list-item .xv-list-column.small {
2719   padding-left: 7px;
2720 }
2721 .xv-list.xv-grid-list .xv-list-item .xv-list-column.medium {
2722   padding-left: 7px;
2723 }
2724 .xv-list.xv-grid-list .xv-list-item .xv-list-column.descr {
2725   padding-left: 7px;
2726 }
2727 .xv-list.xv-grid-list .xv-list-item .xv-list-column .xv-list-attr {
2728   padding: 0px;
2729 }
2730 .xv-list-attr {
2731   padding: 5px;
2732   font-size: .8em;
2733   white-space: nowrap;
2734   overflow: hidden;
2735   text-overflow: ellipsis;
2736   color: #070707;
2737 }
2738 .xv-list-attr.header {
2739   padding: 4px;
2740   background: #d8d8d8;
2741   font-size: .7em;
2742   font-weight: bold;
2743   text-transform: uppercase;
2744   color: #fdfdfd;
2745 }
2746 .xv-list-attr.footer {
2747   padding: 4px;
2748   background: #d8d8d8;
2749   font-size: .7em;
2750   font-weight: bold;
2751   text-transform: uppercase;
2752   color: #070707;
2753 }
2754 .xv-list-attr.right {
2755   position: absolute;
2756   right: 10px;
2757 }
2758 .xv-list-attr.text-align-right {
2759   text-align: right;
2760 }
2761 .xv-list-attr.bold {
2762   font-weight: bold;
2763 }
2764 .xv-list-attr.error {
2765   color: #ff0000;
2766 }
2767 .xv-list-attr.emphasis {
2768   color: #009000;
2769 }
2770 .xv-list-attr.warn {
2771   color: #ff9c00;
2772 }
2773 .xv-list-attr.italic {
2774   font-style: italic;
2775 }
2776 .xv-list-attr.placeholder {
2777   font-style: italic;
2778   color: #777777;
2779 }
2780 .xv-list-attr.hyperlink {
2781   color: #357ec7;
2782   cursor: pointer;
2783 }
2784 .xv-list-attr.disabled {
2785   color: #777777;
2786 }
2787 /* Navigator */
2788 .xv-navigator-header {
2789   font-size: small;
2790   font-weight: bold;
2791   text-transform: uppercase;
2792   color: #ff6600;
2793   padding-left: 20px;
2794   border-bottom: 1px solid #0e0e0e;
2795 }
2796 .xv-workspace-header {
2797   color: #fdfdfd;
2798   white-space: nowrap;
2799   overflow: hidden;
2800   text-overflow: ellipsis;
2801   padding: 8px 0 0 8px;
2802 }
2803 /**
2804   Styles relating to widgets in the pullout
2805 */
2806 /* Pullout */
2807 .xv-pullout {
2808   /* Setting this as min-width overrides enyo-narrow 100% */
2809   width: 320px;
2810   -webkit-box-shadow: -2px -2px 6px rgba(0, 0, 0, 0.2);
2811   -moz-box-shadow: -2px -2px 6px rgba(0, 0, 0, 0.2);
2812   box-shadow: -2px -2px 6px rgba(0, 0, 0, 0.2);
2813   position: absolute;
2814   top: 55px;
2815   left: 0;
2816   bottom: 0;
2817   background-color: #fdfdfd;
2818   -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
2819   -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
2820   box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
2821 }
2822 .xv-pullout .xv-header {
2823   background-color: #fdfdfd;
2824   padding: 6px 12px;
2825   border-bottom: 1px solid #d7d7d7;
2826   height: 28px;
2827   color: #ff6529;
2828   font-size: small;
2829   font-weight: bold;
2830   text-transform: uppercase;
2831   white-space: nowrap;
2832   overflow: hidden;
2833   text-overflow: ellipsis;
2834   height: 15px;
2835   border: none;
2836 }
2837 .xv-pullout .pullout-grabbutton {
2838   position: absolute;
2839   height: 54px;
2840   width: 50px;
2841   bottom: 25px;
2842   right: -50px;
2843   background-color: #d7d7d7;
2844   box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
2845   -webkit-border-top-right-radius: 10px;
2846   -moz-border-radius-topright: 10px;
2847   border-top-right-radius: 10px;
2848   -webkit-border-bottom-right-radius: 10px;
2849   -moz-border-radius-bottomright: 10px;
2850   border-bottom-right-radius: 10px;
2851 }
2852 .xv-pullout .xv-parameter-panel {
2853   width: 320px;
2854   margin: 0 4px 0 2px;
2855   padding: 0;
2856   background: #f8f8f8;
2857   text-overflow: ellipsis;
2858   border: 1px solid #d7d7d7;
2859   width: 100%;
2860   margin: 0 4px 6px 0;
2861 }
2862 .xv-pullout .xv-parameter-panel .onyx-groupbox-header {
2863   padding: 6px 10px;
2864   border-bottom: 1px solid #d7d7d7;
2865   background: #efefef;
2866   color: #0e0e0e;
2867 }
2868 .xv-pullout .xv-parameter-panel .onyx-groupbox-header i {
2869   margin-right: 10px;
2870 }
2871 .xv-pullout .xv-parameter-panel.small-panel {
2872   width: 600px;
2873 }
2874 .xv-pullout .xv-parameter-panel.medium-panel {
2875   width: 700px;
2876 }
2877 .xv-pullout .xv-parameter-panel.large-panel {
2878   width: 800px;
2879 }
2880 .xv-pullout .xv-parameter-panel .xv-label,
2881 .xv-pullout .xv-parameter-panel .xv-decorated-label,
2882 .xv-pullout .xv-parameter-panel .xv-flexible-label {
2883   width: 120px !important;
2884   max-width: 100%;
2885   padding: 0 8px 0 6px;
2886   text-align: right;
2887   vertical-align: middle;
2888 }
2889 .xv-pullout .xv-parameter-panel.xv-assignment-box .xv-flexible-label,
2890 .xv-pullout .xv-parameter-panel.xv-assignment-box .xv-label {
2891   width: 200px !important;
2892 }
2893 .xv-pullout .xv-parameter-panel .xv-input {
2894   border-bottom: 1px solid #d7d7d7;
2895   margin: 0px;
2896 }
2897 .xv-pullout .xv-parameter-panel .xv-relationwidget .xv-description {
2898   overflow: hidden;
2899   display: -webkit-box;
2900   -webkit-line-clamp: 4;
2901   -webkit-box-orient: vertical;
2902   max-width: 250px;
2903   margin: 5px 5px 5px 80px;
2904   font-size: 0.9em;
2905 }
2906 .xv-pullout .xv-parameter-panel .xv-relationwidget .xv-description.disabled {
2907   color: #777777;
2908 }
2909 .xv-pullout .xv-parameter-panel .enyo-fittable-columns-layout > * {
2910   vertical-align: middle;
2911 }
2912 .xv-pullout .xv-parameter-panel .xv-buttons {
2913   text-align: center;
2914 }
2915 .xv-pullout .xv-parameter-panel .xv-filter-form .xv-list {
2916   height: 150px;
2917 }
2918 .xv-pullout .help-panel {
2919   border: none;
2920   height: 100%;
2921   width: 100%;
2922 }
2923 .xv-pullout .history-panel .xv-list-item {
2924   padding: 12px 10px;
2925   color: #0e0e0e;
2926   background-color: #fdfdfd;
2927   border-bottom: 1px solid #d7d7d7;
2928 }
2929 .xv-pullout .history-panel .xv-list-item.onyx-selected {
2930   background-color: #357ec7;
2931   color: #fdfdfd;
2932   border-bottom: 2px solid #d8d8d8;
2933 }
2934 /**
2935   Styles relating to misc widgets
2936 */
2937 .onyx-input-decorator {
2938   border: 0;
2939 }
2940 .onyx-input-decorator input {
2941   width: 150px;
2942 }
2943 .xv-relationwidget input,
2944 .xv-datewidget input {
2945   width: 135px;
2946 }
2947 .xv-numberwidget input {
2948   text-align: right;
2949   width: 150px;
2950 }
2951 .xv-moneywidget {
2952   padding-top: 6px;
2953   padding-bottom: 2px;
2954 }
2955 .xv-moneywidget .onyx-input-decorator {
2956   font-family: "Lucida Sans Unicode", "Lucida Grande", arial, sans-serif;
2957   margin-right: 5px;
2958 }
2959 .xv-moneywidget .onyx-input-decorator input,
2960 .xv-moneywidget .onyx-input-decorator .xv-money-label {
2961   width: 85px;
2962   text-align: right;
2963 }
2964 .xv-moneywidget .onyx-input-decorator.xv-currency-label {
2965   width: 65px;
2966 }
2967 .xv-moneywidget .xv-picker-button {
2968   width: 65px;
2969   padding: 10px 4px;
2970 }
2971 .spinner .enyo-fittable-columns-layout > * {
2972   vertical-align: middle;
2973 }
2974 .spinner .buttons {
2975   display: block;
2976   padding: 0;
2977   margin: 1px 0 1px 10px;
2978   width: 20px;
2979   height: 20px;
2980   background: transparent;
2981   color: #357ec7;
2982   font-size: 20px;
2983   border: none;
2984 }
2985 .spinner .slider {
2986   margin: 15px 10px;
2987 }
2988 .spinner.xv-numberwidget input {
2989   width: 120px;
2990 }
2991 .xv-dependency-picker .onyx-picker-decorator .onyx-button {
2992   width: 280px;
2993   margin-left: 6px;
2994 }
2995 .xv-dependency-button {
2996   color: #357ec7;
2997   font-size: 24px;
2998   border: none;
2999   background: transparent;
3000 }
3001 /**
3002   Characteristics
3003 */
3004 .xv-characteristic-picker {
3005   border: none;
3006 }
3007 .xv-characteristic-picker .onyx-picker-decorator .onyx-button {
3008   width: 130px;
3009 }
3010 .xv-characteristic-item {
3011   border-bottom: 1px solid #d7d7d7;
3012 }
3013 .xv-characteristic-item .onyx-input-decorator > input {
3014   width: 115px;
3015   margin-top: 10px;
3016   margin-bottom: 10px;
3017 }
3018 .xv-characteristic-item > .xv-input {
3019   border: none;
3020 }
3021 .xv-characteristic-buttons {
3022   margin: 8px;
3023 }
3024 .xv-characteristic-button {
3025   margin-left: 4px;
3026   color: #357ec7;
3027   font-size: 24px;
3028 }
3029 /**
3030   Styles relating to RelationWidgets
3031 */
3032 .xv-relationwidget-completer {
3033   left: -200px;
3034   top: 15px;
3035 }
3036 .xv-completer-sidecar {
3037   color: #93a1a1;
3038 }
3039 .xv-relationwidget-icon {
3040   top: 1px;
3041   left: 8px;
3042   height: 30px;
3043   position: relative;
3044 }
3045 .xv-private-item-site-widget {
3046   border-bottom-color: #aaaaaa;
3047   border-bottom-width: 1px;
3048   border-bottom-style: solid;
3049 }
3050 /* RelationsEditorBox */
3051 .xv-relations-editor-box .xv-groupbox {
3052   margin-right: 0;
3053   padding: 0;
3054   border: none;
3055 }
3056 .xv-relations-editor-box.panel {
3057   width: 350px;
3058 }
3059 /* ListRelationsBox */
3060 .xv-list-relations-box.panel {
3061   width: 625px;
3062 }
3063 .xv-short-relations-box.panel {
3064   width: 500px;
3065 }
3066 .xv-addresswidget {
3067   background-color: #fdfdfd;
3068   padding: 4px;
3069 }
3070 .xv-addresswidget .xv-addresswidget-viewer {
3071   border: 0;
3072   font-size: medium;
3073   display: inline;
3074 }
3075 .xv-addresswidget .xv-addresswidget-viewer.placeholder {
3076   font-style: italic;
3077   color: #93a1a1;
3078 }
3079 .xv-addresswidget .xv-addresswidget-viewer.disabled {
3080   color: #777777;
3081 }
3082 .xv-addresswidget .xv-addresswidget-buttons {
3083   margin-top: 4px;
3084 }
3085 .xv-addresswidget .xv-addresswidget-buttons .xv-addresswidget-button {
3086   margin-right: 4px;
3087 }
3088 .xv-addresswidget-input-decorator,
3089 .xv-addresswidget-combobox-decorator {
3090   background: #fdfdfd;
3091   display: block;
3092   margin: 4px;
3093 }
3094 .xv-addresswidget-input-decorator input,
3095 .xv-addresswidget-combobox-decorator input {
3096   width: 100%;
3097 }
3098 .xv-addresswidget-input-decorator .enyo-fittable-columns-layout > *,
3099 .xv-addresswidget-combobox-decorator .enyo-fittable-columns-layout > * {
3100   vertical-align: middle;
3101 }
3102 .xv-addresswidget-input-decorator.short,
3103 .xv-addresswidget-combobox-decorator.short {
3104   width: 40%;
3105 }
3106 .xv-addresswidget-combobox-decorator {
3107   width: 60%;
3108 }
3109 .xv-button-section .xv-addresswidget-buttons {
3110   margin: 0;
3111   background-color: #666666;
3112 }
3113 .xv-addresswidget-editor-header {
3114   padding: 4px;
3115 }
3116 .xv-addresswidget-editor {
3117   width: 320px;
3118   padding: 8px;
3119   padding-right: 16px;
3120 }
3121 .xv-addresslist-attr {
3122   padding: 5px;
3123   font-size: 13px;
3124   white-space: normal;
3125   overflow: auto;
3126   color: #070707;
3127   background-color: #fdfdfd;
3128 }
3129 .xv-search .xv-header {
3130   background-color: #fdfdfd;
3131   padding: 6px 12px;
3132   border-bottom: 1px solid #d7d7d7;
3133   height: 28px;
3134   color: #ff6529;
3135   font-size: small;
3136   font-weight: bold;
3137   text-transform: uppercase;
3138   white-space: nowrap;
3139   overflow: hidden;
3140   text-overflow: ellipsis;
3141   border: none;
3142 }
3143 .xv-search .xv-search-container {
3144   width: 320px;
3145   margin: 0 4px 0 2px;
3146   padding: 0;
3147   background: #f8f8f8;
3148   text-overflow: ellipsis;
3149   border: 1px solid #d7d7d7;
3150   width: 100%;
3151   margin: 0 4px 6px 0;
3152 }
3153 .xv-search .xv-search-container .onyx-groupbox-header {
3154   padding: 6px 10px;
3155   border-bottom: 1px solid #d7d7d7;
3156   background: #efefef;
3157   color: #0e0e0e;
3158 }
3159 .xv-search .xv-search-container .onyx-groupbox-header i {
3160   margin-right: 10px;
3161 }
3162 .xv-search .xv-search-container.small-panel {
3163   width: 600px;
3164 }
3165 .xv-search .xv-search-container.medium-panel {
3166   width: 700px;
3167 }
3168 .xv-search .xv-search-container.large-panel {
3169   width: 800px;
3170 }
3171 .xv-search .xv-search-container .xv-label,
3172 .xv-search .xv-search-container .xv-decorated-label,
3173 .xv-search .xv-search-container .xv-flexible-label {
3174   width: 120px !important;
3175   max-width: 100%;
3176   padding: 0 8px 0 6px;
3177   text-align: right;
3178   vertical-align: middle;
3179 }
3180 .xv-search .xv-search-container.xv-assignment-box .xv-flexible-label,
3181 .xv-search .xv-search-container.xv-assignment-box .xv-label {
3182   width: 200px !important;
3183 }
3184 .xv-search .xv-search-container .xv-input {
3185   border-bottom: 1px solid #d7d7d7;
3186   margin: 0px;
3187 }
3188 .xv-search .xv-search-container .xv-relationwidget .xv-description {
3189   overflow: hidden;
3190   display: -webkit-box;
3191   -webkit-line-clamp: 4;
3192   -webkit-box-orient: vertical;
3193   max-width: 250px;
3194   margin: 5px 5px 5px 80px;
3195   font-size: 0.9em;
3196 }
3197 .xv-search .xv-search-container .xv-relationwidget .xv-description.disabled {
3198   color: #777777;
3199 }
3200 .xv-search .xv-search-container .enyo-fittable-columns-layout > * {
3201   vertical-align: middle;
3202 }
3203 .xv-search .xv-search-container .xv-buttons {
3204   text-align: center;
3205 }
3206 .xv-search .xv-search-container .xv-filter-form .xv-list {
3207   height: 150px;
3208 }