PluginProbe ʕ •ᴥ•ʔ
VikAppointments Services Booking Calendar / trunk
VikAppointments Services Booking Calendar vtrunk
1.2.21 1.2.20 trunk 1.2.17 1.2.18 1.2.19
vikappointments / admin / assets / css / vikappointments.css
vikappointments / admin / assets / css Last commit date
adapter 6 months ago font-awesome 6 years ago images 7 years ago index.html 7 years ago inspector.css 4 years ago percentage-circle.css 4 years ago vikappointments.css 2 years ago wizard.css 4 years ago
vikappointments.css
4074 lines
1 /* FontAwesome utils */
2
3 i.input-align {
4 font-size: 18px;
5 vertical-align: top;
6 line-height: 28px;
7 margin-left: 20px;
8 }
9 i.input-align.right-space {
10 margin-left: 0;
11 margin-right: 20px;
12 }
13
14 i.medium-big {
15 font-size: 16px;
16 vertical-align: middle;
17 }
18 i.big {
19 font-size: 18px;
20 vertical-align: middle;
21 }
22 i.big-2x {
23 font-size: 20px;
24 vertical-align: middle;
25 }
26
27 i.ok {
28 color: #080;
29 }
30 i.no {
31 color: #900;
32 }
33 i.warn {
34 color: #FF7000;
35 }
36
37 i.hndl {
38 cursor: pointer;
39 }
40
41 i.review-star,
42 td.review-star i {
43 color: #eaca44;
44 }
45 td.review-star i {
46 font-size: 18px;
47 vertical-align: middle;
48 }
49
50 /* link utils */
51
52 a.no-underline,
53 a.no-underline:hover {
54 text-decoration: none;
55 }
56 a.danger {
57 color: #900 !important;
58 }
59
60 /* table utils */
61
62 table .td-primary {
63 font-weight: 500;
64 }
65 table .td-secondary {
66 font-size: smaller;
67 }
68 table .td-pull-left {
69 float: left;
70 }
71 table .td-pull-right {
72 float: right;
73 }
74 table td .badge-table:not(:last-child) {
75 margin-bottom: 2px;
76 }
77 table th label {
78 display: inline-block;
79 font-weight: bold;
80 }
81
82 /* popover */
83
84 table.table-striped i.vap-quest-popover,
85 table.table-striped i.vap-info-tooltip {
86 /* ignore margin when popover is inside a list table */
87 margin-left: 0;
88 transform: none !important;
89 vertical-align: middle;
90 }
91 i.vap-quest-popover,
92 i.vap-info-tooltip {
93 font-size: 14px;
94 vertical-align: top;
95 transform: translateY(50%);
96 margin-left: 10px;
97 color: #999;
98 cursor: pointer;
99 }
100 i.vap-quest-popover:hover,
101 i.vap-info-tooltip:hover {
102 color: #444;
103 }
104
105 .control-label i.vap-quest-popover,
106 .inspector-selection-table i.vap-quest-popover,
107 .card-text-primary i.vap-quest-popover,
108 h3 i.vap-quest-popover {
109 vertical-align: initial;
110 transform: none;
111 margin-left: 5px;
112 }
113 .control-label i.vap-quest-popover,
114 .inspector-selection-table i.vap-quest-popover,
115 .card-text-primary i.vap-quest-popover {
116 font-size: inherit;
117 }
118
119 /* update page */
120
121 .vap-box-error {
122 padding: 10px;
123 border: 2px dashed #900;
124 color: #900;
125 font-weight: bolder;
126 }
127 .vap-box-error hr {
128 border-top-color: #900;
129 }
130
131 .vap-update-changelog {
132 padding: 10px;
133 border: 2px dashed #999;
134 }
135 .vap-update-changelog h2 {
136 margin-bottom: 25px;
137 }
138 .vap-update-changelog ul li strong {
139 display: inline-block;
140 width: 220px;
141 }
142 .vap-update-changelog div.box-separator {
143 border-top: 1px solid #bbb;
144 margin: 20px 0;
145 }
146
147 .vap-update-changelog > *:first-child,
148 .vap-box-error > *:first-child {
149 margin-top: 0;
150 }
151 .vap-update-changelog > *:last-child,
152 .vap-box-error > *:last-child {
153 margin-bottom: 0;
154 }
155
156 /* loading overlay */
157
158 .vap-loading-overlay.lock {
159 position: fixed;
160 top: 0;
161 left: 0;
162 right: 0;
163 bottom: 0;
164 background-color: rgba(63, 63, 63, 0.80);
165 z-index: 10000;
166 }
167 .vap-loading-box {
168 background: url('./images/loading.gif');
169 width: 120px;
170 height: 120px;
171 position: absolute;
172 top: 50%;
173 left: 50%;
174 transform: translate(-50%, -50%);
175 }
176 .vap-loading-box-message {
177 position: absolute;
178 top: 30%;
179 left: 50%;
180 color: #fff;
181 transform: translate(-50%, -50%);
182 text-align: center;
183 font-weight: bolder;
184 border: 1px solid #fff;
185 padding: 10px 20px;
186 }
187
188 /* smart overlay (used in findreservation view) */
189
190 .smart-overlay {
191 position: absolute;
192 width: 300px;
193 max-height: 200px;
194 background: #232323;
195 color: #fff;
196 opacity: 0.8;
197 overflow-y: scroll;
198 }
199 .smart-overlay-loading {
200 padding: 10px;
201 text-align: center;
202 }
203 .smart-overlay .overlay-record {
204 padding: 10px;
205 border-bottom: 1px solid #fff;
206 }
207 .smart-overlay .overlay-record:last-child {
208 border-bottom: 0;
209 }
210 .smart-overlay .overlay-record .record-column {
211 display: inline-block;
212 vertical-align: top;
213 }
214 .smart-overlay .overlay-record .record-column.col-id {
215 width: 20%;
216 }
217 .smart-overlay .overlay-record .record-column.col-name {
218 width: 47%;
219 }
220 .smart-overlay .overlay-record .record-column.col-count {
221 width: 30%;
222 }
223
224 .vaptimeline-hover-tip {
225 display: block;
226 margin: 20px 0;
227 font-size: smaller;
228 font-style: italic;
229 }
230
231 /* custom fields */
232
233 .vap-customf-choose {
234 margin-bottom: 10px !important;
235 }
236
237 /* sortable */
238
239 .vap-sortable {
240 background: url(images/sort-dots.png) center center no-repeat;
241 width: 3px;
242 height: 13px;
243 display: inline-block;
244 float: left;
245 margin: 8px 7px 0;
246 cursor: all-scroll;
247 }
248 .vap-sortable:hover {
249 opacity: 0.70;
250 }
251
252 /* native */
253
254 .icon-48-vikappointments {
255 background: url('./images/icon-48-vikappointments.png') no-repeat;
256 }
257
258 .icon-vikappointments:before {
259 content: "\43";
260 }
261
262 .select2-search .select2-input {
263 width: 100% !important;
264 }
265
266 img.flag {
267 max-width: 20px;
268 }
269
270 img.vap-opt-flag {
271 max-width: 20px;
272 padding-right: 10px;
273 vertical-align: middle;
274 margin-top: -4px;
275 }
276
277 .vapwdclosed {
278 background-image: url('./images/disabled.png');
279 background-position: left center;
280 background-repeat: no-repeat;
281 padding: 5px 0 5px 18px;
282 }
283
284 .scrollable-hor {
285 overflow-x: auto;
286 /* reserve some space on the bottom for the horizontal scrollbar */
287 margin-bottom: 20px;
288 min-width: initial;
289 }
290
291 #vapfooter {
292 font-size: x-small;
293 text-align: center;
294 clear: both;
295 margin: 5px 0 50px 0 !important;
296 padding-top: 10px;
297 }
298
299 .vaprequired {
300 border: 1px solid #FF0000 !important;
301 }
302
303 .vapheadcolactive1 {
304 background: url('./images/sortasc.png') right center no-repeat;
305 padding: 0 14px 0 0;
306 }
307
308 .vapheadcolactive2 {
309 background: url('./images/sortdesc.png') right center no-repeat;
310 padding: 0 14px 0 0;
311 }
312
313 .vaptdday, .vaptdnoday {
314 width: 26px;
315 height: 26px;
316 }
317
318 .vapdivday {
319 text-align: center;
320 vertical-align:middle;
321 font-weight: bold;
322 }
323
324 .vaptdgreen {
325 background-color: #02AE36;
326 }
327
328 .vaptdyellow {
329 background-color: #FFAA00;
330 }
331
332 .vaptdred {
333 background-color: #F01B17;
334 }
335
336 .vaptdgrey {
337 background-color: #fff;
338 color: #666;
339 }
340 .vaptdgrey a {
341 color: #666 !important;
342 }
343 .vaptbodycal td.vaptdred a, .vaptbodycal td.vaptdyellow a, .vaptbodycal td.vaptdgreen a {
344 color: #FFFFFF !important;
345 }
346 .vapcalendardiv {
347 display: inline-block;
348 vertical-align: top;
349 }
350 .vaptimelinewt a {
351 color: #fff !important;
352 background: transparent !important;
353 }
354 .vaptimelinewt div {
355 /*color: #FFFFFF;
356 font-size: 12px;
357 font-weight: bold;
358 padding: 7px 7px 5px;*/
359 }
360 .vap-timeline-block {
361 padding: 7px 10px 7px;
362 font-size: 12px;
363 font-weight: bold;
364 color: #fff;
365 margin: 2px 0;
366 width: auto;
367 height: auto;
368 text-align: center;
369 display: inline-block;
370 border: 0;
371 border-radius: 5px;
372 }
373
374 .vaptlblock0 {
375 background-color: #F01B17;
376 }
377
378 .vaptlblock1 {
379 background-color: #02AE36;
380 }
381
382 .vaptlblock2 {
383 background-color: #FFAA00;
384 }
385 .vapreservationslistdiv {
386 margin: 10px 0 0 0;
387 font-size: 15px;
388 }
389 .vaptimeline {
390 margin-top: 10px;
391 }
392 .vaptimelinewt {
393 display: inline-block;
394 }
395 .vaptimelinewt:not(:last-of-type) {
396 margin-right: 15px;
397 }
398
399 /* new 1.6 timeline layout */
400
401 .vaptimeline .ratesgrid {
402 padding: 0;
403 }
404 .vaptimeline .vaptlblock1:hover {
405 background: #2c8647;
406 }
407 /*.vaptimeline .vaptlblock1.vaptimeselected:hover {
408 background: #069;
409 }*/
410 .vaptimeline .ratesgrid.vaptlblock0, .vaptimeline .ratesgrid.vaptlblock1, .vaptimeline .ratesgrid.vaptlblock2 {
411 background: transparent;
412 }
413 .vaptimeline .ratesgrid.vaptlblock0 .vap-timeline-itemdate {
414 background-color: #F01B17;
415 border-top-left-radius: 5px;
416 border-top-right-radius: 5px;
417 }
418 .vaptimeline .ratesgrid.vaptlblock1 .vap-timeline-itemdate {
419 background-color: #02AE36;
420 border-top-left-radius: 5px;
421 border-top-right-radius: 5px;
422 }
423 .vaptimeline .ratesgrid.vaptlblock2 .vap-timeline-itemdate {
424 background-color: #FFAA00;
425 border-top-left-radius: 5px;
426 border-top-right-radius: 5px;
427 }
428 .vaptimeline .ratesgrid.vaptlblock1:hover .vap-timeline-itemdate {
429 background: #2c8647;
430 }
431 .vaptimeline .ratesgrid.vaptlblock1.vaptimeselected .vap-timeline-itemdate {
432 background-color: #069;
433 }
434 .vaptimeline .ratesgrid span {
435 display: block;
436 }
437 .vaptimeline .ratesgrid .vap-timeline-itemdate {
438 padding: 7px 10px;
439 }
440 .vaptimeline .ratesgrid .vap-timeline-itemdate i,
441 .vaptimeline .ratesgrid .vap-timeline-itemseats i {
442 font-size: 14px;
443 margin-right: 2px;
444 }
445 .vaptimeline .ratesgrid .vap-timeline-itemprice,
446 .vaptimeline .ratesgrid .vap-timeline-itemseats {
447 padding: 7px 10px;
448 background: #ccc;
449 color: #333;
450 border-bottom-left-radius: 5px;
451 border-bottom-right-radius: 5px;
452 }
453
454 /***************************/
455
456 .vaptdselected {
457 background-color: #006699;
458 }
459
460 .vapreservationstatusconfirmed,
461 .vapreservationstatuspending,
462 .vapreservationstatusremoved,
463 .vapreservationstatuscanceled,
464 .vapreservationstatusclosure {
465 text-transform: uppercase;
466 font-weight: bold;
467 text-decoration: none !important;
468 }
469
470 .vapreservationstatusconfirmed {
471 color: #008000 !important;
472 }
473 .vapreservationstatusremoved {
474 color: #990000 !important;
475 }
476 .vapreservationstatuspending {
477 color: #FF7000 !important;
478 }
479 .vapreservationstatuscanceled {
480 color: #F01B17 !important;
481 }
482 .vapreservationstatusclosure {
483 color: #C12F20 !important;
484 }
485
486 .vapreservationstatusconfirmed a, .vapreservationstatuspending a, .vapreservationstatusremoved a, .vapreservationstatuscanceled a {
487 text-transform: uppercase;
488 font-weight: bold;
489 text-decoration: none !important;
490 }
491 .vapreservationstatusconfirmed a:hover, .vapreservationstatuspending a:hover, .vapreservationstatusremoved a:hover, .vapreservationstatuscanceled a:hover {
492 text-transform: uppercase;
493 font-weight: bold;
494 text-decoration: none !important;
495 }
496 .vapreservationstatusconfirmed a {
497 color:#008000 !important;
498 }
499 .vapreservationstatusremoved a {
500 color:#990000 !important;
501 }
502 .vapreservationstatuspending a {
503 color:#FF7000 !important;
504 }
505 .vapreservationstatuscanceled a {
506 color:#F01B17 !important;
507 }
508
509 .vapreservationfilterdiv {
510 float: right;
511 }
512
513 .vapallcalhead {
514 font-size: 18px;
515 background: #eee;
516 border: 1px solid #ddd;
517 font-weight: bold;
518 padding: 5px 10px;
519 margin: 10px 0;
520 border-radius: 5px;
521 display: flex;
522 justify-content: space-between;
523 align-items: center;
524 line-height: 13px;
525 }
526 .vapallcalhead .vaptitleyearsp {
527 color: #666;
528 }
529
530 /* main menu */
531 .vapmenubox {
532 display: inline-block !important;
533 border-radius: 15px;
534 padding: 15px;
535 /*width: 246px;*/
536 width: 200px;
537 color: #fff;
538 text-transform: uppercase;
539 background-position: 95% center !important;
540 }
541 #vapmenumanagementdiv {
542 margin: 0 0 0 20px;
543 }
544 .vapmenubox #vapmenumanagementdivtitle,
545 .vapmenubox #vapmenuappointmentsdivtitle,
546 .vapmenubox #vapmenuportaldivtitle,
547 .vapmenubox #vapmenuglobaldivtitle {
548 font-size: 22px;
549 font-style: italic;
550 margin: 0 0 5px 0;
551 }
552 .vapmenubox a {
553 display: block;
554 width: 70%;
555 color: #fff !important;
556 font-size: 14px;
557 }
558 .vapmenubox .vapmenulinkactive {
559 font-weight: bold;
560 }
561 .vapmenubox a:hover {
562 text-decoration: none !important;
563 font-weight: bold;
564 }
565 #vapmenumanagementdiv {
566 background: #993300;
567 }
568 #vapmenuappointmentsdiv {
569 background: #996600;
570 }
571 #vapmenuportaldiv {
572 background: #BB9900;
573 }
574 #vapmenuglobaldiv {
575 background: #758383;
576 }
577 /* end menu */
578
579 .vapcaltable {
580 font-size: 11px;
581 }
582 .vapcaltable .vaptheadcal tr:first-child td {
583 background: #ddd;
584 padding: 5px 0;
585 font-weight: bold;
586 font-size: 13px;
587 border:1px solid #ccc;
588 }
589 .vaptheadcal .vapthtabcal {
590 padding: 4px 0;
591 text-align: center;
592 }
593 .vapcalendardiv {
594 border: 1px solid #DDDDDD;
595 border-radius: 5px;
596 display: inline-block;
597 padding: 3px;
598 vertical-align: top;
599 margin: 0 3px 8px 0;
600 background: #fff;
601 }
602 .vapcalendardiv:last-child {
603 margin-right: 0;
604 }
605 .vapstatisticelem {
606 margin: 5px;
607 }
608 .vapstatisticelem .vaptheadstat th {
609 text-align: left;
610 padding: 0 7px 0 0;
611 }
612 .vaptbodystat td {
613 border-bottom:1px dotted #ccc;
614 }
615 .vaptbodystat tr:last-child td {
616 border: 0;
617 }
618 .vaptbodystat td {
619 padding: 0 7px 3px 0;
620 width: 43px;
621 }
622 .vapcaltable {
623 border-collapse: collapse;
624 }
625 .vapcaltable .vaptbodycal {
626 padding: 2px;
627 }
628 .vaptbodycal td {
629 border: 1px solid #ddd;
630 }
631 .vapfiltersdiv {
632 display: inline-block;
633 width: 98.8%;
634 border:1px solid #ccc;
635 border-radius: 4px;
636 padding:10px;
637 margin: 10px 0 15px 0;
638 }
639 .vapfiltersdiv .vapempfilterdiv, .vapfiltersdiv .vepserfilterdiv {
640 float: left;
641 }
642 .vapstatfilterdiv {
643 float: right;
644 }
645 .vapempfilterdiv {
646 margin: 0 10px 0 0;
647 }
648 #vapcalstatbutton {
649 background: #999;
650 border-radius: 4px;
651 color: #fff;
652 border:1px solid #ccc;
653 padding:5px;
654 font-size: 12px;
655 cursor: pointer;
656 font-weight: bold;
657 }
658
659 .vapreservationfilterdiv {
660 float: right;
661 }
662 #navigation {
663 display: inline-block;
664 width: 100%;
665 }
666 #navigation ul {
667 margin: 10px 0 0 13px;
668 padding: 0;
669 }
670 #navigation ul li {
671 list-style-type: none;
672 float: left;
673 display: inline-block;
674 margin: 0 0 0 -13px;
675 position: relative;
676 }
677 #navigation ul li a {
678 background: #006699;
679 border:1px solid #003366;
680 border-bottom:1px solid #006699;
681 border-top-left-radius: 10px;
682 border-top-right-radius: 10px;
683 text-align: center;
684 padding: 8px;
685 min-width: 155px;
686 color: #fff;
687 font-weight: bold;
688 display: inline-block;
689 font-style: italic;
690 font-size: 14px;
691 }
692 #navigation ul li a:hover {
693 text-decoration: none;
694 background: #0099CC;
695 }
696 #navigation ul li.vapconfigtabactive a {
697 background: #0099CC;
698 }
699 .veppeoplefilterdiv {
700 margin: 0 0 0 10px;
701 display: inline-block;
702 float: left;
703 }
704
705 .vaporderingsavelink {
706 display: block;
707 overflow: hidden;
708 float: right;
709 margin-right: 8px;
710 }
711
712 .vapchainsp {
713 width: 16px !important;
714 margin-top: 3px;
715 }
716 .vapchainicon {
717 width: 16px !important;
718 height: 16px;
719 display:inline-block !important;
720 overflow: hidden;
721 background: url(./images/chain.png) no-repeat;
722 float: right !important;
723 margin-right: 4px;
724 margin-top: 3px;
725 }
726 .vapresidlistsp {
727 float: left !important;
728 display:inline-block !important;
729 width: auto !important;
730 }
731 .vappackagesp {
732 width: 16px !important;
733 height: 16px;
734 display:inline-block !important;
735 overflow: hidden;
736 background: url(./images/package.png) no-repeat;
737 float: right !important;
738 margin-right: 4px;
739 margin-top: 3px;
740 }
741
742 .vaporderparentbox {
743 cursor: pointer;
744 background: none repeat scroll 0 0 #009922;
745 border: 0 none;
746 border-radius: 5px;
747 color: #FFFFFF;
748 display: inline-block;
749 font-weight: bold;
750 margin: 0 3px 0 0;
751 min-width: 67px;
752 padding: 4px;
753 padding-right: 16px;
754 padding-left: 16px;
755 position: relative;
756 text-transform: uppercase;
757 }
758
759 .vaptcostcoltext {
760 cursor: pointer;
761 }
762
763 .vapresfiltertoolbar, .vapcust-keyfilter-block, .vapemp-keyfilter-block, .vapser-keyfilter-block, .vapgroup-keyfilter-block, .vapmedia-keyfilter-block {
764 margin: 10px 0 10px 0;
765 display: inline-block;
766 width: 100%;
767 }
768
769 .vap-file-toolbar {
770 border: 1px solid #ccc;
771 padding: 5px;
772 }
773
774 .profile-image-wrapper {
775 position: relative !important;
776 }
777 .profile-image-wrapper .vap-customer-image {
778 position: absolute;
779 top: 0;
780 right: 0;
781 }
782 .vap-customer-image {
783 float: right;
784 border: 2px solid #999;
785 border-radius: 50%;
786 padding: 2px;
787 width: 48px;
788 height: 48px;
789 }
790
791 /* search bar */
792 .vap-config-searchbar {
793 position: fixed;
794 bottom:0;
795 right: 0;
796 width:100%;
797 height:80px;
798 background:#eee;
799 z-index: 100;
800 }
801 .vap-config-searchbar-results {
802 display: inline-block;
803 float: left;
804 padding: 15px;
805 }
806 .vap-config-searchbar-gotop {
807 display: inline-block;
808 float: right;
809 padding: 15px;
810 }
811 .vap-config-searchbar-gotop a {
812 padding: 7px 15px;
813 opacity: 0.8;
814 text-decoration: none;
815 background: #05b;
816 color: #fff;
817 }
818 .vap-config-searchbar-gotop a:hover {
819 text-decoration: none;
820 color: #fff;
821 }
822 .vap-config-searchbar-stat {
823 margin-right: 10px;
824 }
825 .vap-config-searchbar-control {
826 margin-right: 5px;
827 }
828 .vap-config-searchbar-control a {
829 width: 20px;
830 height: 20px;
831 display: inline-block;
832 vertical-align: middle;
833 }
834 .vap-left-arrow {
835 background-image: url('./images/lx-arrow.png');
836 }
837 .vap-right-arrow {
838 background-image: url('./images/rx-arrow.png');
839 }
840 .vap-orange-badge {
841 background-color: #ee8844 !important;
842 }
843
844 .badge.tab-badge-count {
845 margin-left: 5px;
846 }
847 .badge.tab-badge-count::before {
848 content: attr(data-count);
849 }
850 .badge.tab-badge-count[data-count="0"] {
851 display: none;
852 }
853
854 /* medias */
855 .vap-mediaimg-filespool {
856 text-align: center;
857 margin: 40px auto;
858 position: relative;
859 display: inline-block;
860 width: 100%;
861 }
862 .vap-mediaimg-block {
863 width: 33%;
864 text-align: center;
865 float: left;
866 }
867 .vap-mediaimg-wrapper, .vap-mediaimg-wrapper-back {
868 width: 50%;
869 display: inline-block;
870 padding: 12px;
871 border: 1px solid #ccc;
872 border-radius: 5px;
873 margin-bottom: 20px;
874 }
875 .vap-mediaimg-thumb, .vap-mediaimg-details {
876 border: 1px solid #eee;
877 height: 160px;
878 position: relative;
879 }
880 .vhd-mediaimg-thumb img {
881 height: 160px;
882 }
883 .vap-mediaimg-thumbchild {
884 max-height: 88%;
885 line-height: 160px;
886 overflow: hidden;
887 }
888 .vap-mediaimg-details {
889 text-align: left;
890 padding-left: 5px;
891 }
892 .vap-mediaimg-details input {
893 width: calc(100% - 50px) !important;
894 }
895 .vap-mediaimg-control label {
896 display: inline-block;
897 word-break: break-all;
898 }
899 .vap-mediaimg-infos {
900 display: none;
901 position: absolute;
902 width: 100%;
903 font-size: 11px;
904 bottom:0;
905 }
906 .vap-mediaimg-info.pull-left {
907 margin-left: 5px;
908 }
909 .vap-mediaimg-info.pull-right {
910 margin-right: 5px;
911 }
912 .vap-media-selected {
913 border-color: #82BBF5;
914 }
915 .vap-media-footer {
916 width: 100%;
917 text-align: center;
918 margin-bottom: 50px;
919 display: inline-block;
920 }
921 .vap-mediaimg-stats {
922 padding: 5px;
923 margin-right: 5px;
924 height: 35%;
925 }
926 .vap-mediaimg-stats.bad {
927 border: 1px solid #cc412b;
928 }
929 .vap-mediaimg-stats.ok {
930 border: 1px solid #10a833;
931 }
932
933 /* all employees timeline */
934 .vaptimeline-empblock {
935 padding: 5px;
936 border: 1px solid #ccc;
937 margin: 10px 10px 10px 0;
938 border-radius: 5px;
939 display: inline-block;
940 }
941 .vaptimeline-empblock h3 {
942 margin: 2px 0 6px 0;
943 }
944
945 /* new medias */
946 .vap-media-droptarget {
947 padding: 5% 20px;
948 text-align:center;
949 border: 2px dashed #bbb;
950 border-radius: 4px;
951 color: #999;
952 }
953 .vap-media-droptarget.drag-enter {
954 border-color: #2B4;
955 }
956 .vap-media-droptarget .lead {
957 font-size: 16px;
958 font-weight: bold;
959 }
960 .vap-media-droptarget a:hover {
961 text-decoration: none;
962 }
963 /* new medias progress bar */
964 .vap-progressbar {
965 width: 200px;
966 height: 22px;
967 border: 1px solid #ddd;
968 border-radius: 5px;
969 overflow: hidden;
970 display:inline-block;
971 margin:0px 10px 5px 5px;
972 vertical-align:top;
973 }
974 .vap-progressbar div {
975 height: 100%;
976 color: #fff;
977 text-align: center;
978 line-height: 22px;
979 width: 0;
980 background-color: #05b4ef;
981 border-radius: 3px;
982 }
983 .vap-progressbar div.completed {
984 background-color: #0fdc84;
985 }
986 .vap-progressbar div.aborted {
987 background-color: #dc2f42;
988 }
989 .vap-progressbar-status:first-child {
990 border-top:1px solid #A9CCD1;
991 }
992 .vap-progressbar-status {
993 border-bottom:1px solid #A9CCD1;
994 min-height:25px;
995 width:700px;
996 padding:10px 10px 0px 10px;
997 vertical-align:top;
998 }
999 .vap-progressbar-status:nth-child(odd) {
1000 background: #EBEFF0;
1001 }
1002 .vap-progressbar-status:nth-child(even) {
1003 background: #EFFFF8;
1004 }
1005 .vap-progressbar-filename {
1006 display: inline-block;
1007 vertical-align: top;
1008 width: 250px;
1009 word-wrap: break-word;
1010 }
1011 .vap-progressbar-filesize {
1012 display:inline-block;
1013 vertical-align:top;
1014 color:#30693D;
1015 width:100px;
1016 margin-left:10px;
1017 margin-right:5px;
1018 }
1019 .vap-progressbar-abort {
1020 background-color:#A8352F;
1021 -moz-border-radius:4px;
1022 -webkit-border-radius:4px;
1023 border-radius:4px;display:inline-block;
1024 color:#fff;
1025 font-family:arial;font-size:13px;font-weight:normal;
1026 padding:4px 15px;
1027 cursor:pointer;
1028 vertical-align:top;
1029 }
1030 .vap-progressbar-info {
1031 display:inline-block;
1032 vertical-align:top;
1033 }
1034
1035 /* entire container, keeps perspective */
1036 .vap-mediaimg-block {
1037 -webkit-perspective: 1000;
1038 -moz-perspective: 1000;
1039 -ms-perspective: 1000;
1040 perspective: 1000;
1041 -ms-transform: perspective(1000px);
1042 -moz-transform: perspective(1000px);
1043 -moz-transform-style: preserve-3d;
1044 -ms-transform-style: preserve-3d;
1045 }
1046 /* flip the pane when hovered */
1047 .vap-mediaimg-block.hover .vap-mediaimg-wrapper-back {
1048 -webkit-transform: rotateY(0deg);
1049 -moz-transform: rotateY(0deg);
1050 -o-transform: rotateY(0deg);
1051 -ms-transform: rotateY(0deg);
1052 transform: rotateY(0deg);
1053 }
1054 .vap-mediaimg-block.hover .vap-mediaimg-wrapper {
1055 -webkit-transform: rotateY(180deg);
1056 -moz-transform: rotateY(180deg);
1057 -o-transform: rotateY(180deg);
1058 transform: rotateY(180deg);
1059 }
1060 /* flip speed goes here */
1061 .vap-mediaimg-innerblock {
1062 -webkit-transition: 0.6s;
1063 -webkit-transform-style: preserve-3d;
1064 -ms-transition: 0.6s;
1065 -moz-transition: 0.6s;
1066 -moz-transform: perspective(1000px);
1067 -moz-transform-style: preserve-3d;
1068 -ms-transform-style: preserve-3d;
1069 transition: 0.6s;
1070 transform-style: preserve-3d;
1071 position: relative;
1072 display: block;
1073 height: 250px;
1074 margin: 0 auto;
1075 width: 250px;
1076 }
1077 /* hide back of pane during swap */
1078 .vap-mediaimg-wrapper, .vap-mediaimg-wrapper-back {
1079 -webkit-backface-visibility: hidden;
1080 -moz-backface-visibility: hidden;
1081 -ms-backface-visibility: hidden;
1082 backface-visibility: hidden;
1083 -webkit-transition: 0.6s;
1084 -webkit-transform-style: preserve-3d;
1085 -webkit-transform: rotateY(0deg);
1086 -moz-transition: 0.6s;
1087 -moz-transform-style: preserve-3d;
1088 -moz-transform: rotateY(0deg);
1089 -o-transition: 0.6s;
1090 -o-transform-style: preserve-3d;
1091 -o-transform: rotateY(0deg);
1092 -ms-transition: 0.6s;
1093 -ms-transform-style: preserve-3d;
1094 -ms-transform: rotateY(0deg);
1095 transition: 0.6s;
1096 transform-style: preserve-3d;
1097 transform: rotateY(0deg);
1098 position: absolute;
1099 top: 0;
1100 width: 100%;
1101 left: 0;
1102 }
1103 /* front pane, placed above back */
1104 .vap-mediaimg-wrapper {
1105 z-index: 2;
1106 /* for firefox 31 but may be not needed
1107 transform: rotateY(0deg);
1108 */
1109 -webkit-transform: rotateY(0deg);
1110 -ms-transform: rotateY(0deg);
1111 }
1112 /* back, initially hidden pane */
1113 .vap-mediaimg-wrapper-back {
1114 -webkit-transform: rotateY(-180deg);
1115 -moz-transform: rotateY(-180deg);
1116 -o-transform: rotateY(-180deg);
1117 -ms-transform: rotateY(-180deg);
1118 transform: rotateY(-180deg);
1119 }
1120 .vap-mediaimg-controls {
1121 margin: 10px 0 0;
1122 }
1123 .vap-mediaimg-controls .pull-left label {
1124 margin: 0 0 0 5px;
1125 font-size: 11px;
1126 }
1127
1128 /* invoices archive */
1129 .vap-archive-fileblock {
1130 display: inline-block;
1131 width: calc(100% / 5 - 65px);
1132 padding: 20px;
1133 text-align: center;
1134 margin: 10px;
1135 vertical-align: top;
1136 }
1137 .vap-archive-filename {
1138 margin: 5px 0 0;
1139 }
1140 .vap-archive-fileblock.selected {
1141 background-color: rgba(84, 147, 204, 0.23);
1142 border-radius: 5px;
1143 }
1144 .vap-archive-year {
1145 padding: 10px;
1146 width: 95%;
1147 border: 1px solid #aaa;
1148 border-radius: 5px;
1149 background-color: #ddd;
1150 text-align: center;
1151 font-weight: bold;
1152 font-size: 16px;
1153 cursor: pointer;
1154 }
1155 .vap-archive-month {
1156 font-size: 18px;
1157 padding: 15px 25px;
1158 border-bottom: 1px solid;
1159 margin-top: 20px;
1160 margin-bottom: 20px;
1161 cursor: pointer;
1162 }
1163 .vap-archive-month:hover {
1164 background-color: rgba(84, 147, 204, 0.23);
1165 }
1166
1167 .vap-archive-main {
1168 width: 100%;
1169 display: inline-block;
1170 }
1171 .vap-archive-main > div {
1172 float: left;
1173 display: inline-block;
1174 }
1175 .vap-archive-main .vap-archive-filestree {
1176 width: 20%;
1177 }
1178 .vap-archive-main .vap-archive-filestree .root {
1179 margin: 0 10px 0 0;
1180 padding: 0;
1181 list-style-type: none;
1182 }
1183 .vap-archive-main .vap-archive-filestree .root > .year {
1184 border-bottom: 1px solid #eee;
1185 font-size: 14px;
1186 font-weight: bold;
1187 }
1188 .vap-archive-main .vap-archive-filestree .root > .year .year-node {
1189 cursor: pointer;
1190 }
1191 .vap-archive-main .vap-archive-filestree .root > .year > div {
1192 position: relative;
1193 padding: 4px 0;
1194 }
1195 .vap-archive-main .vap-archive-filestree .root > .year > div > i {
1196 width: 18px;
1197 }
1198 .vap-archive-main .vap-archive-filestree .root .monthslist {
1199 font-weight: normal;
1200 font-size: 12px;
1201 color: #666;
1202 margin: 2px 0 6px 20px;
1203 padding:0;
1204 list-style-type: none;
1205 }
1206 .vap-archive-main .vap-archive-filestree .root .monthslist .month {
1207 padding: 2px 2px 2px 7px;
1208 }
1209 .vap-archive-main .vap-archive-filestree .root .monthslist a {
1210 display: block;
1211 color: #666;
1212 }
1213 .vap-archive-main .vap-archive-filestree .root .monthslist .picked {
1214 background: #eee;
1215 }
1216 .vap-archive-main .vap-archive-filespool {
1217 width: 80%;
1218 }
1219 .vap-archive-footer {
1220 width: 100%;
1221 text-align: center;
1222 margin-bottom: 50px;
1223 display: inline-block;
1224 }
1225
1226 @media screen and (max-width: 1280px) {
1227 .vap-archive-fileblock {
1228 width: calc(100% / 4 - 65px);
1229 }
1230 }
1231 @media screen and (max-width: 970px) {
1232 .vap-archive-fileblock {
1233 width: calc(100% / 3 - 65px);
1234 }
1235 }
1236 @media screen and (max-width: 860px) {
1237 .vap-archive-fileblock {
1238 width: calc(100% / 2 - 65px);
1239 }
1240 }
1241 @media screen and (max-width: 520px) {
1242 .vap-archive-fileblock {
1243 width: 100%;
1244 }
1245 }
1246
1247 /* employees reports */
1248 .vap-empchart-box {
1249 width: 100%;
1250 margin-bottom: 40px;
1251 }
1252 .vap-linechart-container {
1253 width: 70%;
1254 display: inline-block;
1255 }
1256 .vap-piechart-container {
1257 width: 28%;
1258 display: inline-block;
1259 vertical-align: top;
1260 }
1261 #vap-linechart-legend {
1262 margin: 10px 0 0;
1263 }
1264 .vap-linechart-wrapper .line-legend {
1265 margin: 10px 0 0;
1266 padding: 0;
1267 width: 100%;
1268 display: inline-block;
1269 }
1270 .vap-linechart-wrapper .line-legend li {
1271 float: left;
1272 display: inline-block;
1273 margin: 3px 7px;
1274 }
1275 .vap-linechart-wrapper .line-legend li > span {
1276 display: inline-block;
1277 float: left;
1278 height: 15px;
1279 margin: 0 5px 0 0;
1280 width: 15px;
1281 }
1282 .vap-charts-filter-employees {
1283 display: inline-block;
1284 width: 100%;
1285 }
1286 .vap-charts-filter-employees > div {
1287 float: left;
1288 display: inline-block;
1289 margin: 5px 7px;
1290 }
1291 .vap-charts-employee-control label {
1292 display: inline-block;
1293 }
1294
1295 /* appointment order info basket */
1296 .vap-orderbasket-badge {
1297 display: inline-block;
1298 width: 40%;
1299 padding: 15px 10px;
1300 background-color: #3a93ff;
1301 border-radius: 5px;
1302 margin-bottom: 5px;
1303 text-align: center;
1304 color: #fff;
1305 font-weight: bold;
1306 font-size: 16px;
1307 }
1308 .vap-orderbasket-badge:hover {
1309 opacity: 0.70;
1310 }
1311 .vap-orderbasket-badge.large {
1312 width: 83.6%;
1313 }
1314 .vap-orderbasket-badge.canceled {
1315 background-color: #f01b17;
1316 text-transform: uppercase;
1317 }
1318 .vap-orderbasket-badge.confirmed {
1319 background-color: #008000;
1320 text-transform: uppercase;
1321 }
1322 .vap-orderbasket-badge.removed {
1323 background-color: #990000;
1324 text-transform: uppercase;
1325 }
1326 .vap-orderbasket-badge.pending {
1327 background-color: #FF7000;
1328 text-transform: uppercase;
1329 }
1330 .vap-orderbasket-genericnotes {
1331 border: 2px dashed #ccc;
1332 padding: 10px;
1333 margin-top: 20px;
1334 border-radius: 4px;
1335 }
1336 .vap-orderbasket-option {
1337 margin: 20px 0 0;
1338 }
1339 .vap-orderbasket-option::first-child {
1340 margin: 0;
1341 }
1342 .vap-orderbasket-option-details {
1343 width: 100%;
1344 display: inline-block;
1345 }
1346 .vap-orderbasket-option-details > div {
1347 display: inline-block;
1348 }
1349 .vap-orderbasket-option-details-left {
1350 float: left;
1351 }
1352 .vap-orderbasket-option-details-right {
1353 float: right;
1354 }
1355 .vap-orderbasket-option-details {
1356 font-size: 18px;
1357 }
1358 .vap-orderbasket-option-details-numapp {
1359 margin: 0 50px 0 0;
1360 }
1361 .vap-orderbasket-option-details-quantity {
1362 margin: 0 10px 0 0;
1363 }
1364 .vap-orderbasket-option-details-price {
1365 min-width: 100px;
1366 text-align: right;
1367 display: inline-block;
1368 }
1369
1370 /* options variations */
1371 .vap-option-var {
1372 margin-bottom: 10px;
1373 }
1374 .vap-sort-box {
1375 background: url(images/sort-dots.png) center center no-repeat;
1376 width: 3px;
1377 height: 13px;
1378 display: inline-block;
1379 float: left;
1380 margin: 8px 7px 0;
1381 cursor: all-scroll;
1382 }
1383 .vap-sort-box:hover {
1384 opacity: 0.70;
1385 }
1386
1387 /* import modal */
1388 .vap-importmodal-body {
1389 margin: 30px 0;
1390 }
1391 .vap-importmodal-body .import-file {
1392 background: none repeat scroll 0 0 #eee;
1393 border-radius: 5px;
1394 padding: 5px;
1395 border: 1px solid #ddd;
1396 display: inline-block;
1397 width: 70%;
1398 }
1399 .vap-importmodal-body .import-submit {
1400 display: inline-block;
1401 }
1402 .vap-importmodal-body .import-file input {
1403 line-height: 13px;
1404 }
1405
1406 /* cron job log modal */
1407 .vap-cron-loginfo-head {
1408 width: 100%;
1409 display: inline-block;
1410 }
1411 .vap-cron-loginfo-head-left {
1412 float: left;
1413 padding: 10px 20px;
1414 }
1415 .vap-cron-loginfo-head-right {
1416 float: right;
1417 padding: 10px 20px;
1418 }
1419 .vap-cron-loginfo-middle {
1420 height: 95%;
1421 }
1422 .vap-cron-loginfo-middle pre {
1423 min-height: 90%;
1424 margin: 0 20px;
1425 }
1426
1427 /* 1.5 admin menu */
1428 #vap-main-menu {
1429 display: block;
1430 width: 13%;
1431 min-width: 180px;
1432 vertical-align: top;
1433 background-color: #1a3867; /*7897c8*/
1434 margin-right: 15px;
1435 float: left;
1436 }
1437 @media screen and (max-width : 767px) {
1438 .vap-task-wrapper {
1439 width: 100% !important;
1440 }
1441 #vap-main-menu.vap-leftboard-menu {
1442 width: 100%;
1443 }
1444 #vap-main-menu.vap-leftboard-menu {
1445 display: none;
1446 }
1447 #vap-main-menu.vap-leftboard-menu .split-box.custom {
1448 display: none;
1449 }
1450 }
1451 .vap-task-wrapper {
1452 display: block;
1453 float: left;
1454 width: 85%;
1455 }
1456 .vap-task-wrapper.extended {
1457 width: 95%;
1458 }
1459 .vap-task-wrapper p {
1460 padding: 10px;
1461 }
1462 #vap-main-menu .parent .title {
1463 cursor: pointer;
1464 padding: 10px;
1465 text-transform: uppercase;
1466 font-weight: 500;
1467 font-size: 14px;
1468 color: #fff;
1469 background-color: #1a3867; /*7897c8*/
1470 }
1471 #vap-main-menu .parent .title i:first-child {
1472 font-size: 16px;
1473 }
1474 #vap-main-menu .parent .title.selected {
1475 background-color: #2c6996; /*b1c7ea*/
1476 }
1477 #vap-main-menu .parent .title:not(.selected):hover, #vap-main-menu .parent .title:not(.selected).focus {
1478 background-color: #275d84; /*91acd7*/
1479 }
1480 #vap-main-menu .parent .title span {
1481 width: 73%;
1482 display: inline-block;
1483 word-wrap: break-word;
1484 }
1485 #vap-main-menu .parent i {
1486 margin-right: 8px;
1487 width: 16px;
1488 text-align: center;
1489 }
1490 #vap-main-menu .parent i.vap-angle-dir {
1491 margin: 0 !important;
1492 float: right;
1493 }
1494 #vap-main-menu .wrapper {
1495 padding: 6px 0;
1496 background-color: #142c51; /*5d7bab*/
1497 display: none;
1498 }
1499 #vap-main-menu .wrapper.collapsed {
1500 display: block;
1501 }
1502 #vap-main-menu .wrapper .item {
1503 padding: 5px 0 5px 20px;
1504 font-size: 14px;
1505 }
1506 #vap-main-menu .wrapper .item a {
1507 color: #d6e3f9;
1508 }
1509 #vap-main-menu .wrapper .item a:hover {
1510 color: #fff;
1511 }
1512 #vap-main-menu .wrapper .item.selected a {
1513 color: #fff !important;
1514 font-weight: 500;
1515 }
1516 #vap-main-menu a {
1517 color: #fff;
1518 width: 100%;
1519 display: block;
1520 }
1521 #vap-main-menu a:hover {
1522 color: #fff;
1523 text-decoration: none;
1524 }
1525 /* custom admin menu section */
1526
1527 #vap-main-menu .separator-line {
1528 border-top: 1px dotted #eee;
1529 }
1530 #vap-main-menu .split-box {
1531 text-align: right;
1532 padding: 6px 10px;
1533 font-size: 16px;
1534 }
1535 #vap-main-menu .version-box {
1536 background-color: #4a9468;
1537 padding: 6px 10px;
1538 font-size: 14px;
1539 }
1540 #vap-main-menu .version-box.upd-avail {
1541 background-color: #0d620f;
1542 }
1543 #vap-main-menu .version-box i.upd-avail {
1544 float: right;
1545 margin-top: 2px;
1546 color: orange;
1547 }
1548
1549 /* 1.5 compressed admin menu */
1550 @media screen and (min-width: 768px) {
1551 #vap-main-menu.vap-leftboard-menu.compressed {
1552 min-width: 40px;
1553 width: 40px;
1554 }
1555 #vap-main-menu.vap-leftboard-menu.compressed .parent .title span, #vap-main-menu.vap-leftboard-menu.compressed .parent .title .vap-angle-dir {
1556 display: none;
1557 }
1558 #vap-main-menu.vap-leftboard-menu.compressed .parent .wrapper {
1559 position: absolute;
1560 margin-left: 40px;
1561 padding-right: 20px;
1562 width: 180px;
1563 z-index: 1000;
1564 }
1565 #vap-main-menu.vap-leftboard-menu.compressed .parent .title.collapsed {
1566 position: relative;
1567 background-color: #275d84; /*91acd7*/
1568 width: 220px;
1569 z-index: 1000;
1570 }
1571 #vap-main-menu.vap-leftboard-menu.compressed .parent .title.selected.collapsed {
1572 background-color: #2c6996; /*b1c7ea*/
1573 }
1574 #vap-main-menu.vap-leftboard-menu.compressed .parent .title.collapsed span {
1575 display: inline-block;
1576 margin-left: 16px;
1577 }
1578 #vap-main-menu.vap-leftboard-menu.compressed .split-box {
1579 text-align: left;
1580 }
1581 #vap-main-menu.vap-leftboard-menu.compressed .version-box span {
1582 display: none;
1583 }
1584 }
1585
1586 /* 1.6.3 horizontal menu */
1587 #vap-main-menu.vap-horizontal-menu {
1588 width: 100%;
1589 margin-bottom: 10px;
1590 display: inline-block;
1591 float: none;
1592 margin-right: 0;
1593 padding: 6px 6px 6px 4px;
1594 border-radius: 8px;
1595 box-sizing: border-box;
1596 }
1597 #vap-main-menu.vap-horizontal-menu .parent {
1598 float: left;
1599 width: 200px;
1600 margin: 0 2px;
1601 }
1602 #vap-main-menu.vap-horizontal-menu .parent .title span {
1603 max-width: 200px;
1604 overflow: hidden;
1605 text-overflow: ellipsis;
1606 white-space: nowrap;
1607 display: inline-block;
1608 vertical-align: top;
1609 }
1610 #vap-main-menu.vap-horizontal-menu a {
1611 /*display: inline-block;*/
1612 }
1613 #vap-main-menu.vap-horizontal-menu .title {
1614 padding: 0;
1615 border-radius: 4px;
1616 }
1617 #vap-main-menu.vap-horizontal-menu .title > a {
1618 box-sizing: content-box;
1619 padding: 10px 8px;
1620 width: calc(100% - 16px);
1621 }
1622 #vap-main-menu.vap-horizontal-menu .wrapper {
1623 display: block;
1624 position: absolute;
1625 width: 220px;
1626 z-index: 999;
1627 text-transform: none;
1628 font-weight: normal;
1629 border-radius: 4px;
1630 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
1631 visibility: hidden;
1632 opacity: 0;
1633 transform: scale(0.99) translateY(-0.7em);
1634 transform-origin: top;
1635 transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
1636 transition-duration: 500ms;
1637 transition-property: opacity,transform;
1638 }
1639 #vap-main-menu.vap-horizontal-menu .wrapper.collapsed {
1640 visibility: visible;
1641 opacity: 1;
1642 transform: scale(1) translateY(8px);
1643 }
1644 #vap-main-menu.vap-horizontal-menu .version-box {
1645 float: right;
1646 /*margin-left: auto;*/
1647 padding: 0px;
1648 border-radius: 4px;
1649 }
1650 #vap-main-menu.vap-horizontal-menu .version-box a {
1651 padding: 10px;
1652 }
1653 #vap-main-menu.vap-horizontal-menu .parent i.vap-angle-dir {
1654 line-height: 18px;
1655 }
1656
1657 @media screen and (max-width: 1860px) {
1658 #vap-main-menu.vap-horizontal-menu .parent {
1659 width: 180px;
1660 }
1661 }
1662 @media screen and (max-width: 1690px) {
1663 #vap-main-menu.vap-horizontal-menu .parent {
1664 width: 170px;
1665 }
1666 }
1667 @media screen and (max-width: 1620px) {
1668 #vap-main-menu.vap-horizontal-menu .parent {
1669 width: auto !important;
1670 }
1671 #vap-main-menu.vap-horizontal-menu .title > a {
1672 padding: 14px 15px;
1673 }
1674 #vap-main-menu.vap-horizontal-menu .parent .title > a i:first-child {
1675 font-size: 20px;
1676 width: 18px;
1677 }
1678 #vap-main-menu.vap-horizontal-menu .parent .title > a > span {
1679 width: auto !important;
1680 }
1681 #vap-main-menu.vap-horizontal-menu .parent .title:not(.selected) > a > span {
1682 display: none;
1683 }
1684 #vap-main-menu.vap-horizontal-menu .version-box a {
1685 padding: 15px 10px;
1686 }
1687 }
1688 @media screen and (max-width: 960px) {
1689 #vap-main-menu.vap-horizontal-menu .version-box a {
1690 font-size: 18px;
1691 padding: 12px 15px;
1692 }
1693 #vap-main-menu.vap-horizontal-menu .version-box #vap-version-content {
1694 display: none;
1695 }
1696 }
1697 @media screen and (max-width: 640px) {
1698 #vap-main-menu.vap-horizontal-menu .parent .title > a > span {
1699 display: none;
1700 }
1701 }
1702
1703 /* dashboard */
1704 .vap-dashboard-box {
1705 border: 1px solid #ccc;
1706 margin: 15px 5px 15px 0;
1707 display: inline-block;
1708 }
1709 .vap-dashboard-box.full {
1710 width: 100%;
1711 }
1712 .vap-dashboard-box.big {
1713 width: 64%;
1714 }
1715 .vap-dashboard-box.medium {
1716 width: 49%;
1717 }
1718 .vap-dashboard-box.small {
1719 width: 34%;
1720 }
1721
1722 .vapdash-title {
1723 padding: 10px;
1724 border-bottom: 1px solid #ccc;
1725 background: #f6f6f6 none repeat scroll 0 0;
1726 text-transform: uppercase;
1727 font-size: 16px;
1728 }
1729 .vapdash-container {
1730 width: 100%;
1731 }
1732 .vapdash-tab-head {
1733 display: inline-block;
1734 margin-bottom: 8px;
1735 border: 1px solid #ccc;
1736 border-right: 0;
1737 }
1738 .vapdash-tab-button {
1739 float: left;
1740 display: inline-block;
1741 font-size: 13px;
1742 }
1743 .vapdash-tab-button a {
1744 padding: 10px 20px;
1745 background: #fff;
1746 color: #333;
1747 border-right: 1px solid #ccc;
1748 cursor: pointer;
1749 display: inline-block;
1750 float: left;
1751 }
1752 .vapdash-tab-button a:hover {
1753 text-decoration: none !important;
1754 }
1755 .vapdash-tab-button a.active {
1756 background: #dceef7 none repeat scroll 0 0;
1757 cursor: default;
1758 }
1759
1760 .vap-incoming-table {
1761 width: 100%;
1762 border-collapse: collapse;
1763 }
1764 .vap-incoming-table th{
1765 font-size: 14px;
1766 font-weight: normal;
1767 color: #039;
1768 padding: 12px 15px;
1769 }
1770 .vap-incoming-table td{
1771 font-size: 13px;
1772 color: #669;
1773 border-top:1px solid #e8edff;
1774 padding: 6px 2px;
1775 }
1776 .vap-incoming-table tr:hover td{
1777 color: #339;
1778 background: #eff2ff;
1779 }
1780 .vap-incoming-table th.vapdashtabtitle {
1781 font-size: 13px;
1782 font-weight: bold;
1783 padding: 0 0 5px;
1784 }
1785 .vapdashrowhighlight {
1786 background: #ffeea1 !important;
1787 }
1788
1789 .vap-icon-tooltip {
1790 margin: 0 5px;
1791 }
1792
1793 /* manage packages order */
1794 .vap-packorder-row {
1795 width: 100%;
1796 padding: 10px 0;
1797 }
1798 .vap-packorder-row span {
1799 display: inline-block;
1800 }
1801
1802 /* make recurrence */
1803 .vap-makerec-box {
1804 padding: 15px;
1805 border: 1px solid #ccc;
1806 margin-bottom: 15px;
1807 }
1808 .vap-recurrence-form {
1809 display: inline-block;
1810 vertical-align: top;
1811 }
1812 .vap-recurrence-form > span {
1813 float: left;
1814 display: inline-block;
1815 margin: 0 5px;
1816 }
1817 .vap-recurrence-form > .lbl {
1818 margin-top: 6px;
1819 }
1820 .vap-recurrence-button {
1821 display: inline-block;
1822 margin-left: 30px;
1823 }
1824
1825 .vap-recpreview-box {
1826 padding: 15px;
1827 border: 1px solid #ccc;
1828 margin-bottom: 15px;
1829 }
1830 .vap-recpreview-box .recurrence-date {
1831 padding: 5px 0;
1832 font-size: 14px;
1833 }
1834 .vap-recpreview-box .recurrence-date .format {
1835 width: 200px;
1836 display: inline-block;
1837 }
1838 .vap-recpreview-box .recurrence-date .msg.available {
1839 color: #090;
1840 font-weight: bold;
1841 }
1842 .vap-recpreview-box .recurrence-date .msg.occupied {
1843 color: #900;
1844 font-weight: bold;
1845 }
1846 .vap-recpreview-box .recurrence-date .msg i {
1847 margin-left: 4px;
1848 }
1849 .vap-recpreview-box .recurrence-date .hint-box {
1850 border-bottom: 1px solid #ddd;
1851 padding: 10px 0;
1852 }
1853 .vap-recpreview-box .recurrence-date .hint-box span.hint-text {
1854 margin-left: 10px;
1855 font-size: 13px;
1856 }
1857
1858 .vap-recpreview-button {
1859 margin-top: 15px;
1860 }
1861
1862 .vap-confirmrec-box {
1863 padding: 15px;
1864 border: 1px solid green;
1865 background-color: rgba(0, 163, 0, 0.10);
1866 font-weight: bold;
1867 font-size: 14px;
1868 margin-bottom: 15px;
1869 color: green;
1870 }
1871
1872 .vap-recerror-box {
1873 padding: 15px;
1874 border: 1px solid #a30000;
1875 background-color: rgba(204, 0, 0, 0.10);
1876 font-weight: bold;
1877 font-size: 14px;
1878 margin-bottom: 15px;
1879 color: #a30000;
1880 }
1881
1882 /* Joomla 3.x */
1883 fieldset.adminform {
1884 border: 1px solid #aaa;
1885 background-color: #fff;
1886 padding: 10px;
1887 margin-bottom: 30px;
1888 }
1889
1890 legend.adminlegend {
1891 border-bottom: 0;
1892 width: auto;
1893 padding: 5px;
1894 margin-bottom: 10px;
1895 line-height: inherit;
1896 }
1897
1898 table.admintable td {
1899 border-bottom: 1px solid #ddd;
1900 }
1901 table.admintable td.adminparamcol {
1902 vertical-align: middle;
1903 text-align: right;
1904 border-right: 1px solid #ddd;
1905 background-color: #f7f7f7;
1906 }
1907 .control-label {
1908 max-width: 160px;
1909 }
1910
1911 table.admintable input {
1912 margin-bottom: 0;
1913 }
1914 table.admintable td.adminparamcol .vap-quest-popover {
1915 vertical-align: initial;
1916 transform: none;
1917 }
1918
1919 /* iOS checkbox */
1920
1921 .switch-ios {
1922 display: inline-block;
1923 }
1924 .switch-ios .ios-toggle {
1925 position: absolute;
1926 margin-left: -9999px;
1927 visibility: hidden;
1928 }
1929 .switch-ios .ios-toggle + label {
1930 display: block;
1931 position: relative;
1932 cursor: pointer;
1933 outline: none;
1934 -webkit-user-select: none;
1935 -moz-user-select: none;
1936 -ms-user-select: none;
1937 user-select: none;
1938 }
1939 .switch-ios input.ios-toggle-round + label {
1940 /*width: 56px;*/
1941 width: 48px;
1942 /*height: 30px;*/
1943 height: 28px;
1944 /*background-color: #dddddd;*/
1945 background-color: #e9e9eb;
1946 -webkit-border-radius: 60px;
1947 -moz-border-radius: 60px;
1948 -ms-border-radius: 60px;
1949 -o-border-radius: 60px;
1950 border-radius: 60px;
1951 margin-bottom: 0;
1952 }
1953 .switch-ios input.ios-toggle-round + label:before,
1954 .switch-ios input.ios-toggle-round + label:after {
1955 display: block;
1956 position: absolute;
1957 top: 1px;
1958 left: 1px;
1959 bottom: 1px;
1960 content: "";
1961 }
1962 .switch-ios input.ios-toggle-round + label:before {
1963 right: 1px;
1964 /*background-color: #f1f1f1;*/
1965 background-color: #e3e3e3;
1966 -webkit-border-radius: 60px;
1967 -moz-border-radius: 60px;
1968 -ms-border-radius: 60px;
1969 -o-border-radius: 60px;
1970 border-radius: 60px;
1971 /*-webkit-transition: background 0.4s;*/
1972 -webkit-transition: background 0.3s;
1973 /*-moz-transition: background 0.4s;*/
1974 -moz-transition: background 0.3s;
1975 /*-o-transition: background 0.4s;*/
1976 -o-transition: background 0.3s;
1977 /*transition: background 0.4s;*/
1978 transition: background 0.3s;
1979 }
1980 .switch-ios input.ios-toggle-round + label:after {
1981 /*width: 28px;*/
1982 width: 22px;
1983 height: 22px;
1984 margin-top: 2px;
1985 margin-left: 2px;
1986 /* end changes */
1987 background-color: #fff;
1988 -webkit-border-radius: 100%;
1989 -moz-border-radius: 100%;
1990 -ms-border-radius: 100%;
1991 -o-border-radius: 100%;
1992 border-radius: 100%;
1993 /*-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);*/
1994 /*-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);*/
1995 /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);*/
1996 /*-webkit-transition: margin 0.4s;*/
1997 -webkit-transition: margin 0.3s;
1998 /*-moz-transition: margin 0.4s;*/
1999 -moz-transition: margin 0.3s;
2000 /*-o-transition: margin 0.4s;*/
2001 -o-transition: margin 0.3s;
2002 /*transition: margin 0.4s;*/
2003 transition: margin 0.3s;
2004 }
2005 .switch-ios input.ios-toggle-round:checked + label:before {
2006 /*background-color: #38d873;*/
2007 background-color: #29c962;
2008 }
2009 .switch-ios input.ios-toggle-round:checked + label:after {
2010 /*margin-left: 26px;*/
2011 margin-left: 22px;
2012 }
2013 .switch-ios input.ios-toggle-round[disabled] + label:before {
2014 opacity: 0.1;
2015 }
2016 .switch-ios input.ios-toggle-round[disabled] + label:after {
2017 opacity: 0.8;
2018 }
2019
2020 /* popover */
2021
2022 i.vap-quest-popover {
2023 font-size: 14px;
2024 vertical-align: top;
2025 transform: translateY(50%);
2026 margin-left: 10px;
2027 color: #999;
2028 cursor: pointer;
2029 }
2030 i.vap-quest-popover:hover {
2031 color: #444;
2032 }
2033
2034 /* employee working days */
2035
2036 #wd-edit-fieldset {
2037 /* animate margin while scrolling */
2038 transition: margin 700ms;
2039 }
2040
2041 table.vap-workday-calendar {
2042 width: 100%;
2043 }
2044
2045 table.vap-workday-calendar th {
2046 text-align: center;
2047 }
2048
2049 table.vap-workday-calendar td {
2050 border: 1px solid #ddd;
2051 min-width: 60px;
2052 height: 60px;
2053 background-color: #fff;
2054 padding: 0;
2055 /*overflow: hidden;*/
2056 /* firefox hack to force td borders */
2057 background-clip: padding-box;
2058 }
2059
2060 table.vap-workday-calendar tr td:first-child {
2061 padding-right: 5px;
2062 vertical-align: top;
2063 border: 0;
2064 }
2065 table.vap-workday-calendar tbody td.cell-time:hover {
2066 background-color: rgba(27, 210, 149, 0.50);
2067 cursor: pointer;
2068 }
2069
2070 table.vap-workday-calendar td.time-starts,
2071 table.vap-workday-calendar td.time-ends,
2072 table.vap-workday-calendar td.time-contains {
2073 vertical-align: top;
2074 }
2075 table.vap-workday-calendar td.time-starts:not(.time-ends) {
2076 border-bottom: 0;
2077 }
2078 table.vap-workday-calendar td.time-ends:not(.time-starts) {
2079 border-top: 0;
2080 }
2081 table.vap-workday-calendar td.time-contains {
2082 border-bottom: 0;
2083 border-top: 0;
2084 }
2085
2086 table.vap-workday-calendar td div.time-starts,
2087 table.vap-workday-calendar td div.time-ends,
2088 table.vap-workday-calendar td div.time-contains {
2089 background-color: #1bd295;
2090 height: 100%;
2091 cursor: pointer;
2092 }
2093 table.vap-workday-calendar td div.time-starts:not(.trim-start) {
2094 border-top-left-radius: 5px;
2095 border-top-right-radius: 5px;
2096
2097 text-align: center;
2098 /*line-height: 25px;*/
2099 padding-top: 5px;
2100 font-size: smaller;
2101 font-weight: bold;
2102 box-sizing: border-box;
2103 }
2104 table.vap-workday-calendar td div.time-ends:not(.trim-end) {
2105 border-bottom-left-radius: 5px;
2106 border-bottom-right-radius: 5px;
2107 }
2108
2109 table.vap-workday-calendar td div.day-closed {
2110 background-color: #ff1e31;
2111 height: 100%;
2112 cursor: pointer;
2113 }
2114
2115 table.vap-workday-calendar td div.custom-day {
2116 background-color: #2eb0d2;
2117 }
2118 table.vap-workday-calendar td div.box-selected {
2119 border-left: 4px solid #ffb21e;
2120 /* remove 4px of left border from total width */
2121 width: calc(100% - 4px) !important;
2122 }
2123
2124 /* fix used to display only time-starts with full height */
2125 table.vap-workday-calendar td div.time-contains:not(div.time-starts),
2126 table.vap-workday-calendar td div.time-ends:not(div.time-starts) {
2127 display: none;
2128 }
2129 table.vap-workday-calendar td div.time-starts {
2130 z-index: 1;
2131 }
2132
2133 /* weekly calendar */
2134
2135 .cal-service {
2136 margin: 5px 0;
2137 }
2138 .cal-service .check input[type="checkbox"] {
2139 margin: 0;
2140 }
2141 .cal-service .name {
2142 display: inline-block;
2143 width: 200px;
2144 }
2145 .cal-service .color-thumb {
2146 display: inline-block;
2147 width: 16px;
2148 height: 16px;
2149 border-radius: 50%;
2150 cursor: pointer;
2151 }
2152
2153 .cal-events-list {
2154 margin-top: 15px;
2155 }
2156 .cal-events-list .event-row {
2157 min-height: 36px;
2158 border-top: 1px solid #ddd;
2159 padding: 5px 0;
2160 }
2161 .cal-events-list .event-row > div {
2162 display: inline-block;
2163 vertical-align: middle;
2164 }
2165 .cal-events-list .event-row > div > span {
2166 display: block;
2167 }
2168
2169 .cal-events-list .event-row .event-id {
2170 width: 10%;
2171 }
2172 .cal-events-list .event-row .event-checkin {
2173 width: 25%;
2174 }
2175 .cal-events-list .event-row .event-details {
2176 width: 30%;
2177 }
2178 .cal-events-list .event-row .event-customer {
2179 width: 20%;
2180 }
2181 .cal-events-list .event-row .event-guests {
2182 width: 10%;
2183 text-align: right;
2184 }
2185
2186 .cal-events-list .event-row .event-id > span {
2187 padding-left: 5px;
2188 }
2189 .cal-events-list .event-row .event-checkin .duration {
2190 margin-left: 5px;
2191 }
2192 .cal-events-list .event-row .event-details .service-name {
2193 filter: brightness(90%);
2194 }
2195 .cal-events-list .event-row .event-guests > span {
2196 padding-right: 5px;
2197 }
2198
2199 .cal-events-list .no-event {
2200 border-top: 1px solid #ddd;
2201 padding-left: 0;
2202 }
2203 .cal-events-list .show-all-events {
2204 margin-top: 10px;
2205 }
2206
2207 .slot-pointer {
2208 width: 80px;
2209 height: 40px;
2210 position: absolute;
2211 background: #0766d6;
2212 border-bottom-right-radius: 5px;
2213 border-top-right-radius: 5px;
2214 z-index: 10;
2215 }
2216 .slot-pointer:after {
2217 content: "";
2218 position: absolute;
2219 left: -20px;
2220 bottom: 0;
2221 width: 0;
2222 height: 0;
2223 border-right: 20px solid #0766d6;
2224 border-top: 20px solid transparent;
2225 border-bottom: 20px solid transparent;
2226 }
2227
2228 .service-preferences {
2229 width: 120px;
2230 height: 80px;
2231 background: #ddd;
2232 position: absolute;
2233 -moz-border-radius: 10px;
2234 -webkit-border-radius: 10px;
2235 border-radius: 10px;
2236 }
2237
2238 th.head-date {
2239 cursor: pointer;
2240 }
2241
2242 /* test rates modal */
2243
2244 table.rates-table .rate-child td {
2245 border-top: 1px solid #777;
2246 }
2247 table.rates-table .rate-child ~ .rate-child td {
2248 border-top: 1px solid #ddd;
2249 }
2250 table.rates-table .rate-child:last-child td {
2251 border-bottom: 1px solid #777;
2252 }
2253
2254 table.rates-table .rate-id {
2255 vertical-align: middle;
2256 }
2257 table.rates-table .rate-price {
2258 text-align: center;
2259 vertical-align: middle;
2260 }
2261
2262 table.rates-table .final-cost .rate-price {
2263 font-weight: bold;
2264 font-size: larger;
2265 }
2266
2267 #debug-wrap {
2268 margin: 0 10px;
2269 width: calc(100% - 20px);
2270 }
2271 table.rates-table .debug-error {
2272 color: #b00;
2273 }
2274 #debug-wrap table tfoot td {
2275 text-align: center;
2276 font-style: italic;
2277 }
2278
2279 .use-margin-for-alignment {
2280 margin-top: 5px;
2281 }
2282
2283 /* order status */
2284
2285 .order-status-table {
2286 width: 100%;
2287 }
2288 .order-status-table thead tr {
2289 background: #f2f2f2;
2290 border-bottom: 2px solid #ddd;
2291 }
2292 .order-status-table thead th {
2293 padding: 10px;
2294 text-transform: uppercase;
2295 font-size: .9em;
2296 border-top: 0;
2297 }
2298 .order-status-table td {
2299 padding: 10px !important;
2300 }
2301 .order-status-table .track-comment {
2302 background: #eee;
2303 font-weight: bold;
2304 }
2305 .order-status-table .track-comment td {
2306 border-bottom: 2px solid #ddd;
2307 }
2308 .order-status-table .track-warning {
2309 font-weight: bold;
2310 }
2311
2312 /* order status table : items list */
2313
2314 .track-comment .items-list {
2315 margin: 0 0 0 8px;
2316 }
2317 .track-comment .items-list .item-row {
2318 padding: 8px 0;
2319 list-style: none;
2320 }
2321 .track-comment .items-list .item-row:not(:last-child) {
2322 border-bottom: 1px dotted #fefefe;
2323 }
2324 .track-comment .items-list .item-row-details {
2325 display: flex;
2326 flex-wrap: wrap;
2327 justify-content: space-between;
2328 }
2329 .track-comment .items-list .item-row-details .item-name {
2330 width: 50%;
2331 font-weight: bold;
2332 }
2333 .track-comment .items-list .item-row-details .item-quantity {
2334 width: 10%;
2335 text-align: right;
2336 font-size: smaller;
2337 }
2338 .track-comment .items-list .item-row-details .item-price {
2339 width: 15%;
2340 text-align: right;
2341 font-weight: 500;
2342 color: #002243;
2343 }
2344
2345 /* reports packages */
2346
2347 span.report-pack-group {
2348 display: inline-block;
2349 width: 40%;
2350 }
2351 span.report-pack-total, span.report-pack-count {
2352 display: inline-block;
2353 width: 30%;
2354 text-align: right;
2355 }
2356
2357 /**
2358 * PURCHASER INFO MODAL
2359 */
2360
2361 /* layout */
2362
2363 .order-container {
2364 display: flex;
2365 height: 100%;
2366 }
2367 .order-container .order-left-box {
2368 width: 65%;
2369 border-right: 1px solid #eee;
2370 }
2371 .order-container .order-right-box {
2372 width: 35%;
2373 }
2374 .order-container.appointment .order-left-box,
2375 .order-container.appointment .order-right-box {
2376 overflow-y: scroll;
2377 }
2378
2379 .order-container .order-left-box .order-left-top-box {
2380 display: flex;
2381 border-bottom: 1px solid #eee;
2382 }
2383 .order-container .order-left-box .order-left-top-box .order-global-details,
2384 .order-container .order-left-box .order-left-top-box .order-customer-details {
2385 width: 50%;
2386 padding: 0 10px;
2387 }
2388
2389 .order-container .order-left-box .order-left-bottom-box {
2390 display: flex;
2391 margin-bottom: 12px;
2392 }
2393
2394 .order-container .order-left-box .order-left-bottom-box .order-options-list,
2395 .order-container .order-left-box .order-left-bottom-box .order-custom-fields {
2396 padding: 0 10px;
2397 }
2398 .order-container .order-left-box .order-left-bottom-box .order-options-list {
2399 width: 100%;
2400 }
2401 .order-container .order-left-box .order-left-bottom-box .order-custom-fields:not(:only-of-type) {
2402 width: 60%;
2403 border-left: 1px solid #eee;
2404 }
2405
2406 .order-container .order-right-box .order-payment-details {
2407 padding: 0 10px;
2408 margin-bottom: 10px;
2409 }
2410
2411 /* fieldset */
2412
2413 .order-fields .order-field {
2414 margin-bottom: 8px;
2415 }
2416 .order-fields .order-field label {
2417 display: inline-block;
2418 width: 120px;
2419 word-break: break-word;
2420 }
2421 .order-fields.extended .order-field label {
2422 width: 200px;
2423 }
2424 .order-fields .order-field .order-field-value {
2425 display: inline-block;
2426 vertical-align: top;
2427 }
2428
2429 /* payment box */
2430
2431 .order-payment-details .order-fields {
2432 background-color: #f2f3f5;
2433 padding: 20px 10px;
2434 border-top: 2px solid #bec8d4;
2435 border-bottom: 2px solid #bec8d4;
2436 margin-bottom: 15px;
2437 }
2438 .order-payment-details .order-fields {
2439 color: #002243;
2440 }
2441 .order-payment-details .order-fields label {
2442 color: #909daf;
2443 width: calc(50% - 5px);
2444 text-align: right;
2445 }
2446 .order-payment-details .order-fields .order-field {
2447 margin-bottom: 0;
2448 }
2449 .order-payment-details .order-fields .order-field .order-field-value {
2450 width: calc(50% - 5px);
2451 text-align: right;
2452 }
2453 .order-payment-details .order-fields .order-field.total-cost,
2454 .order-payment-details .order-fields .order-field.total-cost label {
2455 color: #002243;
2456 font-size: 18px;
2457 margin-bottom: 0;
2458 }
2459
2460 .order-payment-details .coupon-box {
2461 border: 2px dashed #bec8d4;
2462 padding: 10px;
2463 background-color: #f2f3f5;
2464 color: #002243;
2465 display: flex;
2466 justify-content: space-between;
2467 }
2468 .order-payment-details .coupon-box .coupon-code {
2469 font-size: 16px;
2470 }
2471 .order-payment-details .coupon-box .coupon-code i {
2472 margin-right: 2px;
2473 }
2474
2475 .order-payment-details .logs-box {
2476 margin-top: 15px;
2477
2478 }
2479
2480 /* invoice */
2481
2482 .invoice-record {
2483 display: flex;
2484 justify-content: space-between;
2485 align-items: center;
2486 margin: 10px 0;
2487 }
2488 .invoice-record .invoice-id {
2489 width: 20%;
2490 text-align: left;
2491 }
2492 .invoice-record:last-child .invoice-id {
2493 font-weight: bold;
2494 font-size: 15px;
2495 color: #002243;
2496 }
2497 .invoice-record .invoice-date {
2498 width: 50%;
2499 text-align: left;
2500 }
2501 .invoice-record .invoice-download {
2502 width: 20%;
2503 text-align: right;
2504 }
2505 .invoice-record .invoice-download i {
2506 opacity: 0.4;
2507 font-size: 24px;
2508 }
2509 .invoice-record .invoice-download a i {
2510 opacity: 1;
2511 }
2512
2513 /* cart items */
2514
2515 .order-items-cart {
2516 background-color: #fbfbfb;
2517 }
2518 .order-items-cart .cart-item-record {
2519 padding: 15px 10px;
2520 border-top: 1px solid #bec8d4;
2521 position: relative;
2522 }
2523 .order-items-cart .cart-item-record:last-child {
2524 border-bottom: 1px solid #bec8d4;
2525 }
2526 .cart-item-record .cart-item-details {
2527 display: flex;
2528 justify-content: space-between;
2529 flex-wrap: wrap;
2530 }
2531 .cart-item-record .cart-item-details .cart-item-name {
2532 width: 60%;
2533 }
2534 .cart-item-record .cart-item-details .cart-item-name .item-prod-name {
2535 font-weight: bold;
2536 font-size: 14px;
2537 }
2538 .cart-item-record .cart-item-details .cart-item-quantity {
2539 width: 10%;
2540 text-align: right;
2541 font-size: smaller;
2542 }
2543 .cart-item-record .cart-item-details .cart-item-price {
2544 width: 15%;
2545 text-align: right;
2546 font-weight: 500;
2547 color: #002243;
2548 }
2549 .cart-item-record .cart-item-details .pack-validthru {
2550 font-style: italic;
2551 position: absolute;
2552 bottom: 15px;
2553 right: 10px;
2554 }
2555
2556 /* form vertical layout */
2557
2558 .form-vertical .control-group .control-label {
2559 max-width: 100%;
2560 width: 100%;
2561 }
2562 .form-vertical .control-label b {
2563 margin-bottom: 5px;
2564 display: block;
2565 }
2566
2567 /* sortable list */
2568
2569 .sortable-handler:not(.inactive) {
2570 cursor: pointer;
2571 }
2572 .vik-sortable-placeholder td {
2573 background: rgba(84, 168, 40, 0.55) !important;
2574 height: 48px;
2575 }
2576
2577 /* textarea */
2578
2579 textarea.full-width {
2580 width: calc(100% - 14px);
2581 }
2582
2583 /* custom fields */
2584
2585 @media screen and (max-width: 1280px) {
2586 .order-custom-fields:not(:only-of-type) .order-fields .order-field label {
2587 display: block;
2588 width: 100%;
2589 }
2590 }
2591
2592 /* intl tel support */
2593
2594 .controls > .iti {
2595 max-width: 100%;
2596 }
2597 .iti input[type="text"],
2598 .iti input[type="tel"] {
2599 box-sizing: initial;
2600 width: 226px !important;
2601 max-width: calc(100% - 45px);
2602 }
2603 .iti .iti__country-list {
2604 border-radius: 4px;
2605 border-color: #e4e7ed;
2606 }
2607 .iti .iti__country-list.iti__country-list--dropup {
2608 margin-bottom: 6px;
2609 }
2610 .iti .iti__country-list:not(.iti__country-list--dropup) {
2611 margin-top: 6px;
2612 }
2613 .iti .iti__selected-flag:focus {
2614 outline: none;
2615 }
2616 .iti .iti__country {
2617 padding: 8px 10px;
2618 }
2619 .iti .iti__country .iti__dial-code {
2620 color: #7f8fa4;
2621 float: right;
2622 margin-right: 5px;
2623 }
2624 .iti .iti__divider {
2625 padding: 0;
2626 margin: 0;
2627 }
2628
2629 /* vertical form */
2630
2631 div[class*="span"].full-width input,
2632 div[class*="span"].full-width .control-group textarea {
2633 width: calc(90% - 14px) !important;
2634 }
2635 div[class*="span"].full-width .iti {
2636 width: 90%;
2637 }
2638 div[class*="span"].full-width .iti input {
2639 width: calc(100% - 60px) !important;
2640 }
2641 div[class*="span"].full-width .input-append,
2642 div[class*="span"].full-width .input-prepend,
2643 div[class*="span"].full-width .btn-group {
2644 display: flex;
2645 width: 90%;
2646 }
2647 div[class*="span"].full-width .input-append > input,
2648 div[class*="span"].full-width .input-prepend > input,
2649 div[class*="span"].full-width .btn-group > input {
2650 flex: 1;
2651 }
2652
2653 div[class*="span"] .inline-fields {
2654 display: flex;
2655 }
2656 div[class*="span"].full-width .inline-fields {
2657 justify-content: space-between;
2658 max-width: 90%;
2659 }
2660 div[class*="span"].full-width .inline-fields > * {
2661 flex: 1;
2662 }
2663 div[class*="span"] .inline-fields > *:not(:first-child) {
2664 margin-left: 10px;
2665 }
2666 div[class*="span"] .select2-container-multi input.select2-input.select2-default {
2667 width: 100% !important;
2668 max-width: 100% !important;
2669 }
2670
2671 div.full-width .form-vertical .control-group input,
2672 div.full-width .form-vertical .control-group textarea,
2673 div.full-width .form-vertical .control-group .select2-container {
2674 width: 100% !important;
2675 }
2676
2677 .flex-auto {
2678 flex: 0 !important;
2679 }
2680 .flex-basis-30 {
2681 flex-basis: 30% !important;
2682 }
2683 .flex-basis-40 {
2684 flex-basis: 40% !important;
2685 }
2686 .flex-basis-50 {
2687 flex-basis: 50% !important;
2688 }
2689 .flex-basis-60 {
2690 flex-basis: 60% !important;
2691 }
2692 .flex-basis-70 {
2693 flex-basis: 70% !important;
2694 }
2695
2696 /* mobile */
2697
2698 @media screen and (max-width: 767px) {
2699 .contentpane.component {
2700 overflow: auto !important;
2701 }
2702 .order-container,
2703 .order-left-top-box,
2704 .order-left-bottom-box {
2705 display: block !important;
2706 }
2707 .order-left-box,
2708 .order-global-details,
2709 .order-customer-details,
2710 .order-options-list,
2711 .order-custom-fields {
2712 width: calc(100% - 10px) !important;
2713 }
2714 .order-right-box {
2715 width: 100% !important;
2716 }
2717
2718 .order-options-list,
2719 .order-custom-fields,
2720 .order-status-history {
2721 height: auto !important;
2722 }
2723
2724 .order-left-box {
2725 border-right: 0 !important;
2726 }
2727 .order-global-details {
2728 padding-bottom: 10px;
2729 border-bottom: 1px solid #eee;
2730 }
2731 .order-customer-details {
2732 padding-bottom: 10px !important;
2733 }
2734 .order-custom-fields {
2735 border-left: 0 !important;
2736 border-bottom: 1px solid #eee !important;
2737 }
2738 .order-options-list {
2739 border-bottom: 1px solid #eee !important;
2740 padding-bottom: 20px !important;
2741 }
2742 .order-right-box {
2743 padding-bottom: 10px !important;
2744 }
2745 }
2746
2747 .tooltip p:last-child {
2748 margin-bottom: 0;
2749 }
2750
2751 /* media queries */
2752
2753 @media screen and (max-width : 1380px) {
2754 #vap-main-menu.vap-horizontal-menu .parent {
2755 width: 150px;
2756 }
2757 #vap-main-menu.vap-horizontal-menu .parent .title span {
2758 max-width: 90px;
2759 overflow: hidden;
2760 text-overflow: ellipsis;
2761 white-space: nowrap;
2762 display: inline-block;
2763 }
2764 }
2765 @media screen and (max-width : 600px) {
2766 .vapdash-container {
2767 overflow-x:auto;
2768 width: 100%;
2769 padding:0;
2770 }
2771 .vap-dashboard-box.big, .vap-dashboard-box.small, .vap-dashboard-box.medium {
2772 width: 100% !important;
2773 }
2774 .vap-incoming-table {
2775 margin-left: 10px;
2776 }
2777 .vapdash-tab-head {
2778 margin-left: 10px;
2779 }
2780 #vap-main-menu a:link, #vap-main-menu a:focus, #vap-main-menu a:active, #vap-main-menu a:visited {
2781 color: #fff;
2782 }
2783 }
2784
2785 /* phone utils */
2786
2787 @media screen and (max-width: 767px) {
2788 .hidden-phone-toggle {
2789 display: none;
2790 }
2791 .phone-center {
2792 text-align: center !important;
2793 }
2794 }
2795 @media screen and (min-width: 768px) {
2796 .mobile-only {
2797 display: none !important;
2798 }
2799 }
2800
2801 /* TinyMCE */
2802
2803 .mce-container {
2804 z-index: 99;
2805 }
2806
2807 /* media gallery */
2808
2809 body.contentpane {
2810 margin: 0;
2811 padding: 0;
2812 }
2813
2814 #jmodal-mediamanager .modal-body {
2815 /* prevent modal scroll */
2816 overflow: hidden !important;
2817 }
2818
2819 .vap-media-modal {
2820 display: flex;
2821 flex-wrap: wrap;
2822 justify-content: space-between;
2823 height: 100vh;
2824 }
2825 .vap-media-modal .vap-media-grid-box {
2826 width: 80%;
2827 }
2828 .vap-media-modal .vap-media-grid-box .btn-toolbar {
2829 padding-left: 10px;
2830 }
2831 .vap-media-modal .vap-media-grid-box .alert {
2832 margin: 0 10px;
2833 }
2834 .vap-media-modal .vap-media-sidebar {
2835 width: calc(20% - 21px);
2836 border-left: 1px solid #ddd;
2837 padding: 10px;
2838 position: relative;
2839 overflow: hidden;
2840 }
2841
2842 .vap-media-modal .vap-media-sidebar .vap-media-droptarget {
2843 padding-top: 20%;
2844 padding-bottom: 20%;
2845 }
2846
2847 .vap-media-modal .vap-media-sidebar .vap-media-inspector {
2848 position: absolute;
2849 padding: 10px;
2850 top: 0;
2851 bottom: 0;
2852 left: 0;
2853 right: 0;
2854 transform: translateX(100%); /* off screen */
2855 background: #f8f8f8;
2856
2857 /*transition: 0.4s ease-out all;
2858 -moz-transition: 0.4s ease-out all;
2859 -webkit-transition: 0.4s ease-out all;*/
2860 }
2861 .vap-media-modal .vap-media-sidebar .vap-media-inspector.slide-in {
2862 transform: translateX(0%);
2863 }
2864
2865 .vap-media-gallery {
2866 display: flex;
2867 flex-wrap: wrap;
2868 justify-content: flex-start;
2869 overflow-y: scroll;
2870 max-height: 90vh;
2871 }
2872 .vap-media-gallery * {
2873 box-sizing: content-box;
2874 }
2875 .vap-media-gallery .vap-media-block {
2876 width: calc(100% / 10 - 20px);
2877 padding: 10px;
2878 }
2879 .vap-media-gallery.vap-usernote-docs .vap-media-block {
2880 width: calc(100% / 5 - 20px);
2881 }
2882 .vap-media-gallery .vap-media-block[data-selected="1"] {
2883 box-shadow: inset 0 0 0 3px #fff,inset 0 0 0 7px #0073aa;
2884 }
2885 .vap-media-gallery .vap-media-block .media-preview {
2886 position: relative;
2887 box-shadow: inset 0 0 15px rgba(0,0,0,.1),inset 0 0 0 1px rgba(0,0,0,.05);
2888 background: #eee;
2889 cursor: pointer;
2890 }
2891 .vap-media-gallery .vap-media-block .media-preview:before {
2892 content: "";
2893 display: block;
2894 padding-top: 100%;
2895 }
2896 .vap-media-gallery .vap-media-block .media-preview .media-thumbnail {
2897 overflow: hidden;
2898 position: absolute;
2899 top: 0;
2900 right: 0;
2901 bottom: 0;
2902 left: 0;
2903 opacity: 1;
2904 transition: opacity .1s;
2905 }
2906 .vap-media-gallery .vap-media-block .media-preview .media-thumbnail .media-centered {
2907 position: absolute;
2908 top: 0;
2909 left: 0;
2910 width: 100%;
2911 height: 100%;
2912 transform: translate(50%,50%);
2913 }
2914
2915 .vap-media-gallery .vap-media-block .media-preview .media-thumbnail i {
2916 font-size: 64px;
2917 color: #1676c7;
2918 }
2919
2920 .vap-media-gallery .vap-media-block .media-preview img {
2921 max-height: 100%;
2922 top: 0;
2923 left: 0;
2924 position: absolute;
2925 }
2926 .vap-media-gallery .vap-media-block .media-preview .media-centered > * {
2927 transform: translate(-50%,-50%);
2928 max-width: initial !important;
2929 }
2930 .vap-media-gallery .vap-media-block .media-preview .media-centered > *.inspector-only {
2931 display: none;
2932 }
2933
2934 .vap-media-inspector .inspector-title {
2935 font-size: 18px;
2936 font-weight: 500;
2937 margin: 5px 0;
2938 }
2939 .vap-media-inspector .inspector-title a {
2940 float: right;
2941 }
2942 .vap-media-inspector .selected-media-pool {
2943 overflow-y: scroll;
2944 height: calc(100vh - 60px);
2945 }
2946 .vap-media-inspector .media-info-box {
2947 display: inline-block;
2948 width: 100%;
2949 padding: 10px 0 15px 0;
2950 }
2951 .vap-media-inspector .media-info-box:not(:last-child) {
2952 border-bottom: 1px solid #ddd;
2953 }
2954 .vap-media-inspector .media-info-box .media-thumbnail-image {
2955 float: left;
2956 width: 40%;
2957 }
2958 .vap-media-inspector .media-info-box .media-thumbnail-image a > * {
2959 max-width: 100%;
2960 }
2961 .vap-media-inspector .media-info-box .media-thumbnail-image i {
2962 font-size: 128px;
2963 color: #1676c7;
2964 }
2965 .vap-media-inspector .media-info-box .media-details {
2966 float: right;
2967 width: calc(60% - 20px);
2968 padding: 0 10px;
2969 }
2970 .vap-media-inspector .media-info-box .media-details > * {
2971 color: #666;
2972 word-break: break-all;
2973 }
2974 .vap-media-inspector .media-info-box .media-details .filename {
2975 font-weight: bold;
2976 color: #444;
2977 }
2978 .vap-media-inspector .media-info-box .media-details a.delete-media-image {
2979 color: #bc0b0b;
2980 }
2981 .vap-media-inspector .media-info-box .media-details a.delete-media-image:hover {
2982 color: #dc3232;
2983 text-decoration: none;
2984 }
2985
2986 @media screen and (max-width: 1600px) {
2987 .vap-media-modal .vap-media-grid-box {
2988 width: 75%;
2989 }
2990 .vap-media-modal .vap-media-sidebar {
2991 width: calc(25% - 21px);
2992 }
2993 .vap-media-gallery .vap-media-block {
2994 width: calc(100% / 9 - 20px);
2995 }
2996 .vap-media-gallery.vap-usernote-docs .vap-media-block {
2997 width: calc(100% / 4 - 20px);
2998 }
2999 }
3000 @media screen and (max-width: 1440px) {
3001 .vap-media-modal .vap-media-grid-box {
3002 width: 70%;
3003 }
3004 .vap-media-modal .vap-media-sidebar {
3005 width: calc(30% - 21px);
3006 }
3007 .vap-media-gallery .vap-media-block {
3008 width: calc(100% / 8 - 20px);
3009 }
3010 .vap-media-gallery.vap-usernote-docs .vap-media-block {
3011 width: calc(100% / 3 - 20px);
3012 }
3013 }
3014 @media screen and (max-width: 1280px) {
3015 .vap-media-modal .vap-media-grid-box {
3016 width: 65%;
3017 }
3018 .vap-media-modal .vap-media-sidebar {
3019 width: calc(35% - 21px);
3020 }
3021 .vap-media-gallery .vap-media-block {
3022 width: calc(100% / 7 - 20px);
3023 }
3024 .vap-media-gallery.vap-usernote-docs .vap-media-block {
3025 width: calc(100% / 2 - 20px);
3026 }
3027 }
3028 @media screen and (max-width: 960px) {
3029 .vap-media-modal .vap-media-grid-box {
3030 width: 60%;
3031 }
3032 .vap-media-modal .vap-media-sidebar {
3033 width: calc(40% - 21px);
3034 }
3035 .vap-media-gallery .vap-media-block {
3036 width: calc(100% / 6 - 20px);
3037 }
3038 .vap-media-gallery.vap-usernote-docs .vap-media-block {
3039 width: calc(100% - 20px);
3040 }
3041 }
3042 @media screen and (max-width: 700px) {
3043 .vap-media-modal .vap-media-grid-box {
3044 width: 100%;
3045 height: 75vh;
3046 }
3047 .vap-media-modal .vap-media-sidebar {
3048 width: calc(100% - 20px);
3049 border-left: 0;
3050 border-top: 1px solid #ddd;
3051 position: absolute;
3052 bottom: 0;
3053 background: #fff;
3054 height: calc(25vh - 20px);
3055 }
3056 .vap-media-gallery {
3057 max-height: calc(75vh - 48px);
3058 }
3059 .vap-media-gallery .vap-media-block {
3060 width: calc(100% / 5 - 20px);
3061 }
3062 .vap-media-gallery.vap-usernote-docs .vap-media-block {
3063 width: calc(100% / 2 - 20px);
3064 }
3065 .vap-media-modal .vap-media-sidebar .vap-media-droptarget,
3066 .vap-media-modal .vap-media-sidebar .vap-media-inspector {
3067 padding-top: 0;
3068 padding-bottom: 0;
3069 height: 100%;
3070 }
3071 .vap-media-modal .vap-media-sidebar .vap-media-inspector {
3072 transform: translate(0%, 100%);
3073 }
3074 .vap-media-modal .vap-media-sidebar .vap-media-inspector.slide-in {
3075 transform: translate(0%, 0%);
3076 }
3077 .vap-media-modal .vap-media-sidebar .vap-media-inspector .selected-media-pool {
3078 height: calc(100% - 28px);
3079 }
3080 .vap-media-modal .vap-media-sidebar .vap-media-droptarget .fa-upload {
3081 font-size: 32px;
3082 margin-top: 8px;
3083 }
3084 }
3085
3086 .vap-media-manager-field button.media-preview {
3087 -webkit-border-radius: 0;
3088 -moz-border-radius: 0;
3089 border-radius: 0;
3090 }
3091
3092 /* cards */
3093
3094 .vap-cards-container {
3095 display: flex;
3096 flex-wrap: wrap;
3097 }
3098 .vap-cards-container .vap-card-fieldset {
3099 width: calc(100% / 3);
3100 }
3101 .vap-cards-container .vap-card-fieldset.up-to-2 {
3102 width: calc(100% / 2);
3103 }
3104 .vap-cards-container .vap-card-fieldset.up-to-1 {
3105 width: 100%;
3106 }
3107 .vap-card {
3108 margin: 10px;
3109 border: 1px solid #ddd;
3110 border-radius: 8px;
3111 overflow: hidden;
3112 position: relative;
3113 height: calc(100% - 22px);
3114
3115 display: flex;
3116 flex-wrap: wrap;
3117 align-content: flex-start;
3118 }
3119 .vap-card.compress {
3120 margin: 5px;
3121 height: calc(100% - 12px);
3122 }
3123 .vap-card .vap-card-image {
3124 position: relative;
3125 overflow: hidden;
3126 max-height: 300px;
3127 width: 100%;
3128 }
3129 .vap-card .vap-card-image:before {
3130 content: " ";
3131 position: absolute;
3132 top: 0;
3133 bottom: -2px;
3134 left: 0;
3135 right: 0;
3136 z-index: 0;
3137 background: linear-gradient(180deg, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.8));
3138 }
3139 .vap-card .vap-card-image img {
3140 width: 100%;
3141 }
3142 .vap-card .vap-card-summary {
3143 padding: 20px;
3144 display: flex;
3145 align-items: center;
3146 background-color: #fff;
3147 width: 100%;
3148 }
3149 .vap-card.compress .vap-card-summary {
3150 padding: 10px;
3151 }
3152 .vap-card .vap-card-summary .card-badge-icon {
3153 width: 64px;
3154 min-width: 64px;
3155 max-width: 64px;
3156 height: 64px;
3157 min-height: 64px;
3158 max-height: 64px;
3159 background: #d92f4c;
3160 border-radius: 50%;
3161 position: relative;
3162 margin-right: 20px;
3163 }
3164 .vap-card.published .vap-card-summary .card-badge-icon {
3165 background: #58b06b;
3166 }
3167 .vap-card .vap-card-summary .card-badge-icon > * {
3168 position: absolute;
3169 top: 50%;
3170 left: 50%;
3171 transform: translate(-50%,-50%);
3172 font-size: 32px;
3173 color: #fff;
3174 }
3175 .vap-card.compress .vap-card-summary .card-badge-icon {
3176 width: 32px;
3177 min-width: 32px;
3178 max-width: 32px;
3179 height: 32px;
3180 min-height: 32px;
3181 max-height: 32px;
3182 }
3183 .vap-card.compress .vap-card-summary .card-badge-icon > * {
3184 font-size: 20px;
3185 }
3186 .vap-card .vap-card-summary .card-text:only-child {
3187 width: 100%;
3188 }
3189 .vap-card .vap-card-summary .card-badge-icon + .card-text {
3190 width: calc(100% - 100px);
3191 }
3192 .vap-card .vap-card-summary .card-text .badge {
3193 margin-right: 5px;
3194 }
3195 .vap-card .vap-card-summary .card-text .card-text-primary {
3196 font-weight: bold;
3197 font-size: 16px;
3198 margin-bottom: 5px;
3199 }
3200 .vap-card .vap-card-summary .card-text > * {
3201 color: #7f8fa4;
3202 }
3203 .vap-card .vap-card-summary .card-text .card-text-secondary {
3204 line-height: 22px;
3205 }
3206 .vap-card .vap-card-summary button.card-edit {
3207 margin-left: auto;
3208 }
3209
3210 @media screen and (max-width: 1280px) {
3211 .vap-cards-container .vap-card-fieldset {
3212 width: calc(100% / 2);
3213 }
3214 .vap-cards-container .vap-card-fieldset.up-to-2 {
3215 width: 100%;
3216 }
3217 }
3218
3219 @media screen and (max-width: 767px) {
3220 .vap-cards-container .vap-card-fieldset {
3221 width: 100%;
3222 }
3223 .vap-cards-container .vap-card-fieldset .vap-card {
3224 /*margin: 10px 0;*/
3225 }
3226 }
3227
3228 /* new card placeholder */
3229
3230 .vap-card-fieldset.add > * {
3231 opacity: 0.7;
3232 cursor: pointer;
3233 height: calc(100% - 22px);
3234 }
3235 .vap-card-fieldset.add > *:hover {
3236 opacity: 1;
3237 }
3238 .vap-card-fieldset.add > * i {
3239 color: #ccc;
3240 font-size: 48px;
3241 position: absolute;
3242 top: 50%;
3243 left: 50%;
3244 transform: translate(-50%,-50%);
3245 }
3246
3247 .vap-card-fieldset.add .vap-card.compress {
3248 min-height: 65px;
3249 }
3250
3251 /* inspector */
3252
3253 .record-inspector .inspector-body .inspector-form .time-control {
3254 display: flex;
3255 flex-wrap: wrap;
3256 justify-content: space-between;
3257 align-items: start;
3258 }
3259 .record-inspector .inspector-body .inspector-form .time-control > * {
3260 width: calc(50% - 2px) !important;
3261 }
3262
3263 /* review card */
3264
3265 .vap-review-card {
3266 padding: 10px;
3267 display: flex;
3268 flex-wrap: wrap;
3269 justify-content: space-between;
3270 }
3271 .vap-review-card .product-slide-left {
3272 padding: 10px;
3273 width: calc(30% - 20px);
3274 background: #f5f5f5;
3275 position: relative;
3276 }
3277 .vap-review-card .review-slide-right {
3278 width: calc(70%);
3279 position: relative;
3280 background: #e0e0e0;
3281 }
3282 .vap-review-card .product-slide-left .product-group {
3283 font-weight: 500;
3284 }
3285 .vap-review-card .review-slide-right .review-card-top {
3286 display: flex;
3287 flex-wrap: wrap;
3288 justify-content: space-between;
3289 background-color: #efefef;
3290 padding: 10px;
3291 }
3292 .vap-review-card .review-slide-right .review-card-top .review-details {
3293 width: calc(60% - 40px);
3294 }
3295 .vap-review-card .review-slide-right .review-card-top .review-details .user-name {
3296 font-weight: 500;
3297 }
3298 .vap-review-card .review-slide-right .review-card-top .review-details .user-email {
3299 font-size: smaller;
3300 }
3301 .vap-review-card .review-slide-right .review-card-top .review-vote {
3302 width: calc(40% - 40px);
3303 text-align: right;
3304 position: relative;
3305 }
3306 .vap-review-card .review-slide-right .review-card-top .review-vote .review-rating i {
3307 font-size: 28px;
3308 color: #eaca44;
3309 }
3310 .vap-review-card .review-slide-right .review-card-top .review-vote .review-date {
3311 position: absolute;
3312 bottom: 0;
3313 right: 0;
3314 }
3315 .vap-review-card .review-slide-right .review-card-content {
3316 background-color: #e0e0e0;
3317 padding: 20px 10px;
3318 margin-bottom: 40px;
3319 }
3320 .vap-review-card .review-slide-right .review-card-empty-content {
3321 padding: 20px 10px;
3322 border-top: 1px solid #e0e0e0;
3323 background-color: #eee;
3324 }
3325 .vap-review-card .review-slide-right .review-card-bottom {
3326 position: absolute;
3327 width: 100%;
3328 bottom: 0;
3329 background: #eee;
3330 }
3331 .vap-review-card .review-slide-right .review-card-bottom .inner {
3332 padding: 10px;
3333 display: flex;
3334 justify-content: space-between;
3335 }
3336
3337 @media screen and (max-width: 767px) {
3338 .vap-review-card .product-slide-left {
3339 display: none;
3340 }
3341 .vap-review-card .review-slide-right {
3342 width: 100%;
3343 }
3344 }
3345
3346 /* admin custom fields */
3347
3348 .separator.custom-field {
3349 position: relative;
3350 }
3351 .separator.custom-field strong {
3352 position: absolute;
3353 top: 50%;
3354 left: 50%;
3355 transform: translate(-50%, -50%);
3356 padding: 10px;
3357 background: #fff;
3358 }
3359 .separator.custom-field hr {
3360 margin: 5px 0;
3361 }
3362
3363 /* order items table */
3364
3365 .order-items-table .order-totals [data-column] > b,
3366 .order-items-table .order-discount td > b {
3367 width: 140px;
3368 display: inline-block;
3369 padding: 2px 0;
3370 }
3371
3372 .order-items-table .order-actions .pull-left {
3373 margin-right: 4px;
3374 }
3375 .order-items-table .order-actions .pull-right {
3376 margin-left: 4px;
3377 }
3378
3379 /* configuration */
3380
3381 .configuration-panel {
3382 margin-top: 15px;
3383 background: #f1f2f8;
3384 border: 1px solid #ddd;
3385 }
3386
3387 .configuration-panel #configuration-navbar {
3388 padding: 15px;
3389 border-bottom: 2px solid #ddd;
3390 }
3391 .configuration-panel #configuration-navbar ul,
3392 .configuration-panel #configuration-body .vaptabview .config-panel-subnav ul {
3393 margin: 0;
3394 padding: 0;
3395 list-style: none;
3396 }
3397 .configuration-panel #configuration-body .vaptabview .config-panel-subnav ul {
3398 margin-bottom: 20px;
3399 }
3400 .configuration-panel #configuration-navbar ul li {
3401 display: inline-block;
3402 margin: 0;
3403 }
3404 .configuration-panel #configuration-navbar ul li a {
3405 display: inline-block;
3406 padding: 4px 12px;
3407 text-decoration: none;
3408 font-weight: bold;
3409 font-size: 14px;
3410 }
3411 .configuration-panel #configuration-navbar ul li.vapconfigtabactive a {
3412 border-radius: 6px;
3413 background: #3071a9;
3414 color: #fff;
3415 }
3416 .configuration-panel #configuration-navbar ul li a:hover {
3417 text-decoration: none;
3418 }
3419
3420 .configuration-panel #configuration-body form {
3421 margin: 0;
3422 }
3423 .configuration-panel #configuration-body .vaptabview {
3424 display: flex;
3425 }
3426
3427 .configuration-panel #configuration-body .vaptabview .config-panel-subnav {
3428 border-right: 1px solid #ddd;
3429 min-width: 200px;
3430 background: #fafafa;
3431 }
3432 .configuration-panel #configuration-body .vaptabview .config-panel-subnav ul li {
3433 display: block;
3434 font-weight: bold;
3435 margin: 0;
3436 padding: 10px 15px;
3437 cursor: pointer;
3438 border-bottom: 1px solid #ddd;
3439 }
3440 .configuration-panel #configuration-body .vaptabview .config-panel-subnav ul li.active {
3441 color: #002243;
3442 cursor: default;
3443 background: #eee;
3444 }
3445 .configuration-panel #configuration-body .vaptabview .config-panel-subnav ul li:not(.active) {
3446 color: #5f6770;
3447 }
3448 .configuration-panel #configuration-body .vaptabview .config-panel-subnav ul li i {
3449 width: 20px;
3450 text-align: center;
3451 }
3452 .configuration-panel #configuration-body .vaptabview .config-panel-tabview {
3453 flex: 1;
3454 padding: 15px;
3455 background: #f6f6f9;
3456 }
3457
3458 .config-panel-tabview .config-fieldset {
3459 border: 1px solid #ddd;
3460 }
3461 .config-panel-tabview .config-fieldset:not(:last-of-type) {
3462 margin-bottom: 15px;
3463 }
3464 .config-panel-tabview .config-fieldset .config-fieldset-head {
3465 padding: 15px;
3466 background: #fbfbfb;
3467 border-bottom: 2px solid #ddd;
3468 }
3469 .config-panel-tabview .config-fieldset .config-fieldset-body {
3470 padding: 8px 15px;
3471 background: #fff;
3472 }
3473 .config-panel-tabview .config-fieldset:last-child {
3474 margin-bottom: 0;
3475 }
3476 .config-panel-tabview .config-fieldset .config-fieldset-head h3 {
3477 margin: 0;
3478 padding: 0;
3479 }
3480 .config-panel-tabview .config-fieldset .control-group {
3481 margin: 8px 0;
3482 display: inline-block;
3483 width: 100%;
3484 }
3485 .config-panel-tabview .config-fieldset .control-group .control-label {
3486 width: 160px;
3487 max-width: 160px;
3488 display: inline-block;
3489 vertical-align: top;
3490 margin-top: 5px;
3491 }
3492 .config-panel-tabview .config-fieldset .control-group .controls {
3493 display: inline-block;
3494 /*vertical-align: top;*/
3495 width: calc(100% - 164px);
3496 }
3497 .config-panel-tabview .config-fieldset .control-group .controls input,
3498 .config-panel-tabview .config-fieldset .control-group .controls .input-append,
3499 .config-panel-tabview .config-fieldset .control-group .controls .input-prepend {
3500 margin-bottom: 0px;
3501 }
3502 .config-panel-tabview .config-fieldset .controls * + .btn-group {
3503 margin-left: 10px;
3504 }
3505 .config-panel-tabview .config-fieldset .controls .btn-group .btn {
3506 min-width: 0;
3507 }
3508 .config-panel-tabview .config-fieldset .controls .badge {
3509 margin-top: 5px;
3510 }
3511
3512 @media screen and (max-width: 767px) {
3513 .configuration-panel #configuration-body .vaptabview .config-panel-subnav {
3514 min-width: 50px;
3515 }
3516 .config-panel-tabview .config-fieldset .control-group .control-label {
3517 width: 100% !important;
3518 max-width: 100% !important;
3519 display: block;
3520 vertical-align: initial;
3521 }
3522 .config-panel-tabview .config-fieldset .control-group .controls {
3523 display: block;
3524 width: 100% !important;
3525 }
3526 }
3527
3528 /* bootstrap */
3529
3530 @media screen and (max-width: 1280px) {
3531 .span4 .control-group .control-label {
3532 float: none;
3533 width: 100%;
3534 display: block;
3535 padding: 0;
3536 margin: 0;
3537 }
3538 .span4 .control-group .controls {
3539 display: block;
3540 width: 100%;
3541 margin: 4px 0 0 0;
3542 padding: 0;
3543 }
3544 .span4 legend + .control-group {
3545 margin-top: 0;
3546 }
3547 }
3548
3549 /* print orders */
3550
3551 .vap-printer-layout {
3552 font-size: 14px !important;
3553 font-family: courier !important;
3554 margin: 10px;
3555 }
3556 .vap-print-order-wrapper:not(:last-child) {
3557 border-bottom: 2px dashed #aaa;
3558 margin-bottom: 20px;
3559 padding-bottom: 15px;
3560 }
3561
3562 .vap-print-box {
3563 padding: 15px 10px;
3564 border: 1px solid #ddd;
3565 margin-bottom: 5px;
3566 }
3567 .vap-print-box .vap-print-field .vap-print-label {
3568 display: inline-block;
3569 width: 140px;
3570 font-weight: bold;
3571 }
3572
3573 .vap-print-item {
3574 padding: 10px 0;
3575 border-bottom: 1px solid #ddd;
3576 }
3577 .vap-print-item:first-child {
3578 padding-top: 0;
3579 }
3580 .vap-print-item:last-child {
3581 border-bottom: 0;
3582 padding-bottom: 0;
3583 }
3584
3585 .vap-print-item .print-item-details:not(:only-of-type) {
3586 border-bottom: 1px solid #ddd;
3587 padding-bottom: 10px;
3588 }
3589 .vap-print-item .print-item-optionslist .print-item-option {
3590 border-bottom: 1px solid #ddd;
3591 padding: 10px 0;
3592 display: flex;
3593 }
3594 .vap-print-item .print-item-optionslist .print-item-option .opt-quantity {
3595 width: 60px;
3596 text-align: right;
3597 margin-right: 6px;
3598 }
3599 .vap-print-item .print-item-optionslist .print-item-option .opt-name {
3600 flex: 1;
3601 font-weight: bold;
3602 }
3603 .vap-print-item .print-item-optionslist .print-item-option .opt-total {
3604 text-align: right,
3605 }
3606 .vap-print-item .print-item-totals {
3607 margin-top: 10px;
3608 }
3609
3610 .vap-print-box .vap-total-row {
3611 text-align: right;
3612 }
3613 .vap-print-box .vap-total-row .vap-print-label {
3614 font-weight: bold;
3615 }
3616 .vap-print-box .vap-total-row .vap-print-label.red {
3617 color: #900;
3618 }
3619 .vap-print-box .vap-total-row .vap-print-amount {
3620 display: inline-block;
3621 width: 120px;
3622 }
3623
3624 /* user notes modal */
3625
3626 .vap-unotes {
3627 padding: 10px 10px 20px 10px;
3628 }
3629 .vap-unotes > h1 {
3630 margin-top: 0;
3631 }
3632 .vap-unotes > ul {
3633 list-style: none;
3634 padding: 0;
3635 margin: 0;
3636 }
3637 .vap-unotes > ul > li {
3638 border: 1px solid #ddd;
3639 margin: 0 0 10px 0;
3640 padding: 0;
3641 }
3642 .vap-unotes > ul > li .usernote-title {
3643 border-bottom: 1px solid #ddd;
3644 padding: 10px;
3645 background-color: #f1f2f8;
3646 }
3647 .vap-unotes > ul > li .usernote-title:last-child {
3648 border-bottom: 0;
3649 }
3650 .vap-unotes > ul > li .usernote-title h4 {
3651 margin: 0 0 5px 0;
3652 }
3653 .vap-unotes > ul > li .usernote-content {
3654 padding: 10px;
3655 }
3656 .vap-unotes > ul > li .usernote-files {
3657 padding: 6px 10px;
3658 }
3659 .vap-unotes > ul > li .usernote-files .usernote-attachment {
3660 padding: 5px;
3661 border: 1px solid #ddd;
3662 margin: 4px 4px 4px 0;
3663 background: #f8f8f8;
3664 border-radius: 2px;
3665 color: #002243;
3666 text-decoration: none;
3667 display: inline-block;
3668
3669 -webkit-transition: background 0.3s;
3670 -moz-transition: background 0.3s;
3671 -o-transition: background 0.3s;
3672 transition: background 0.3s;
3673 }
3674 .vap-unotes > ul > li .usernote-files .usernote-attachment:hover {
3675 text-decoration: none;
3676 background-color: #002243;
3677 color: #fff;
3678 }
3679 .vap-unotes > ul > li .usernote-content + .usernote-files {
3680 border-top: 1px solid #ddd;
3681 }
3682 .vap-unotes *:last-child {
3683 margin-bottom: 0;
3684 }
3685
3686 /* customer info : notes */
3687
3688 .user-notes-container {
3689 width: 100%;
3690 display: flex;
3691 justify-content: space-between;
3692 flex-wrap: wrap;
3693 }
3694 .user-note-box {
3695 background: #e6edf8;
3696 padding: 10px 20px;
3697 width: calc(50% - 55px);
3698 margin-bottom: 30px;
3699 }
3700 .user-note-box legend {
3701 border-bottom-color: #aaa;
3702 }
3703 .user-note-box legend i {
3704 font-size: 16px;
3705 float: right;
3706 line-height: 36px;
3707 }
3708 .user-note-box .user-note-body {
3709 margin-bottom: 30px;
3710 height: 100%;
3711 clear: none;
3712 }
3713 .user-note-box .user-note-footer {
3714 display: inline-block;
3715 width: 100%;
3716 }
3717 .user-note-box .user-note-footer .user-note-tags {
3718 float: left;
3719 }
3720 .user-note-box .user-note-footer .user-note-date {
3721 float: right;
3722 }
3723 .user-note-box fieldset {
3724 height: calc(100% - 50px);
3725 }
3726 .user-note-box.note-draft {
3727 padding: 0px;
3728 position: relative;
3729 width: 100%;
3730 }
3731 .user-note-box.note-draft .textarea-box {
3732 display: flex;
3733 }
3734 .user-note-box.note-draft .textarea-box textarea {
3735 width: 100%;
3736 height: 200px;
3737 resize: vertical;
3738 padding: 10px 30px 10px 10px;
3739 }
3740 .user-note-box.note-draft .tip-box {
3741 position: absolute;
3742 top: 5px;
3743 right: 10px;
3744 }
3745 .user-note-box.note-draft .tags-box {
3746 position: absolute;
3747 bottom: 10px;
3748 left: 12px;
3749 max-width: calc(100% - 250px);
3750 }
3751 .user-note-box.note-draft .status-box {
3752 position: absolute;
3753 bottom: 10px;
3754 right: 12px;
3755 }
3756 .user-note-box.note-draft .tags-box a {
3757 margin-right: 6px;
3758 font-size: 16px;
3759 opacity: 0.4;
3760 text-decoration: none;
3761 }
3762 @media screen and (max-width: 768px) {
3763 .user-note-box {
3764 width: 100%;
3765 }
3766 }
3767
3768 /* clipboard utils */
3769
3770 textarea.keep-active-but-hidden {
3771 width: 0 !important;
3772 height: 0 !important;
3773 opacity: 0 !important;
3774 float: right;
3775 cursor: default;
3776 }
3777
3778 /* analytics widgets builder */
3779
3780 .widgets-builder h3 {
3781 margin-top: 0;
3782 }
3783 .widgets-builder .widgets-position-row {
3784 background-color: #e8e6f0;
3785 padding: 10px 20px 30px 20px;
3786 border-radius: 4px;
3787 min-height: 100px;
3788 margin-bottom: 20px;
3789 cursor: pointer;
3790 position: relative;
3791 }
3792 .widgets-builder .widgets-position-row .widgets-position-container {
3793 display: flex;
3794 justify-content: space-between;
3795 min-height: 80px;
3796 }
3797 .widgets-builder .widgets-position-row.add-new-position {
3798 border: 4px solid #e8e6f0;
3799
3800 -webkit-transition: background 0.5s;
3801 -moz-transition: background 0.5s;
3802 -o-transition: background 0.5s;
3803 transition: background 0.5s;
3804 }
3805 .widgets-builder .widgets-position-row.add-new-position:hover {
3806 background-color: #fff;
3807 }
3808 .widgets-builder .widgets-position-row .widget-thumb {
3809 background-color: #fff;
3810 padding: 10px 10px 5px 10px;
3811 width: 100%;
3812 height: auto !important;
3813 margin: 0 10px;
3814 cursor: pointer;
3815 border-radius: 4px;
3816 position: relative;
3817 }
3818 .widgets-builder .widgets-position-row .widget-thumb.add-new-widget {
3819 background-color: #fff;
3820
3821 -webkit-transition: background 0.5s;
3822 -moz-transition: background 0.5s;
3823 -o-transition: background 0.5s;
3824 transition: background 0.5s;
3825 }
3826 .widgets-builder .widgets-position-row .widget-thumb.add-new-widget:hover {
3827 background-color: #bedce7;
3828 }
3829 .widgets-builder .widgets-position-row.add-new-position i.fa-plus,
3830 .widgets-builder .widgets-position-row .widget-thumb.add-new-widget i.fa-plus {
3831 font-size: 48px;
3832 position: absolute;
3833 top: 50%;
3834 left: 50%;
3835 transform: translate(-50%, -50%);
3836
3837 -webkit-transition: color 0.5;
3838 -moz-transition: color 0.5;
3839 -o-transition: color 0.5;
3840 transition: color 0.5;
3841 }
3842 .widgets-builder .widgets-position-row.add-new-position i.fa-plus {
3843 color: #fff;
3844 }
3845 .widgets-builder .widgets-position-row.add-new-position:hover i.fa-plus {
3846 color: #e8e6f0;
3847 }
3848
3849 .widgets-builder .widgets-position-row .widget-thumb.add-new-widget i.fa-plus {
3850 color: #bedce7;
3851 }
3852 .widgets-builder .widgets-position-row .widget-thumb.add-new-widget:hover i.fa-plus {
3853 color: #fff;
3854 }
3855 .widgets-builder .widgets-position-row i.position-sort-handle,
3856 .widgets-builder .widgets-position-row .widget-thumb i.widget-sort-handle {
3857 position: absolute;
3858 top: 10px;
3859 right: 4px;
3860 width: 20px;
3861 text-align: center;
3862 }
3863
3864 /* analytics widgets */
3865
3866 .dashboard-widgets-container {
3867 display: flex;
3868 justify-content: space-between;
3869 }
3870 .dashboard-widgets-container .dashboard-widget {
3871 border: 1px solid #ddd;
3872 min-height: 200px;
3873 padding: 10px;
3874 position: relative;
3875
3876 /* 22px = 10px padding * 2 + 1px border * 2 */
3877 max-width: calc(100% - 22px);
3878 }
3879 .dashboard-widget .widget-wrapper {
3880 height: 100%;
3881 }
3882 .dashboard-widget .widget-head {
3883 position: relative;
3884 margin-bottom: 10px;
3885 }
3886 .dashboard-widgets-container .dashboard-widget .widget-head h3 {
3887 margin: 0;
3888 color: #476799;
3889 font-size: 18px;
3890 }
3891 .dashboard-widgets-container .dashboard-widget .widget-head .widget-actions {
3892 position: absolute;
3893 top: 0;
3894 right: 0;
3895 font-size: 16px;
3896 }
3897 .dashboard-widgets-container .dashboard-widget .widget-head .widget-actions > *:not(:last-child) {
3898 margin-right: 10px;
3899 }
3900 .dashboard-widgets-container .dashboard-widget:not(:last-child) {
3901 border-right: 0;
3902 }
3903 .dashboard-widgets-container:not(:last-child) .dashboard-widget {
3904 border-bottom: 0;
3905 }
3906 .dashboard-widgets-container:last-child {
3907 margin-bottom: 20px;
3908 }
3909 .dashboard-widget .widget-body {
3910 /*
3911 Extend body height to cover all the space.
3912 100% - (HEAD_HEIGHT + HEAD_MARGINS)
3913 */
3914 height: calc(100% - 30px);
3915 }
3916 .dashboard-widget .widget-body canvas {
3917 z-index: 1;
3918 }
3919 .dashboard-widget .widget-body .canvas-align-top,
3920 .dashboard-widget .widget-body .canvas-align-center,
3921 .dashboard-widget .widget-body .canvas-align-bottom {
3922 height: 100%;
3923 display: flex;
3924 justify-content: center;
3925 }
3926 .dashboard-widget .widget-body .canvas-align-top {
3927 align-items: flex-start;
3928 }
3929 .dashboard-widget .widget-body .canvas-align-center {
3930 align-items: center;
3931 }
3932 .dashboard-widget .widget-body .canvas-align-bottom {
3933 align-items: flex-end;
3934 }
3935 .dashboard-widget .widget-body .widget-floating-box {
3936 display: inline-block;
3937 width: calc(100% - 20px);
3938 position: absolute;
3939 bottom: 10px;
3940 }
3941 .dashboard-widget .widget-body .widget-floating-box.top-right {
3942 display: inline-block;
3943 width: auto;
3944 position: absolute;
3945 bottom: inherit;
3946 right: 10px;
3947 }
3948 .dashboard-widgets-container.dashboard .dashboard-widget {
3949 min-height: 0;
3950 }
3951
3952 @media screen and (max-width: 899px) {
3953 .dashboard-widgets-container {
3954 display: block !important;
3955 margin-bottom: 0 !important;
3956 }
3957 .dashboard-widgets-container .dashboard-widget {
3958 width: 100% !important;
3959 min-height: 0 !important;
3960 }
3961 .dashboard-widget .widget-body {
3962 position: relative;
3963 }
3964 .dashboard-widget .widget-body .widget-floating-box {
3965 position: inherit;
3966 bottom: 0;
3967 }
3968 .dashboard-widget.floating .widget-body .widget-floating-box {
3969 bottom: 10px;
3970 }
3971
3972 .dashboard-widgets-container .dashboard-widget {
3973 border-right: 1px solid #ddd !important;
3974 }
3975 .dashboard-widgets-container .dashboard-widget:not(:last-child) {
3976 border-bottom: 0;
3977 }
3978 .dashboard-widgets-container.floating .dashboard-widget {
3979 border: 0 !important;
3980 }
3981 }
3982
3983 .widget-revenue-table {
3984 border: 1px solid #e2e4e7;
3985 border-bottom: 0;
3986 }
3987 .widget-revenue-table table {
3988 width: 100%;
3989 border-collapse: collapse;
3990
3991 }
3992 .widget-revenue-table table thead th,
3993 .widget-revenue-table table tfoot td {
3994 padding: 16px 24px;
3995 background-color: #f8f9fa;
3996 border-bottom: 1px solid #e2e4e7;
3997 font-weight: bold;
3998 white-space: nowrap;
3999 }
4000 .widget-revenue-table table tr td {
4001 border-bottom: 1px solid #e2e4e7;
4002 padding: 16px 24px;
4003 }
4004 .widget-revenue-table.narrow table thead th,
4005 .widget-revenue-table.narrow table tfoot td {
4006 padding: 8px 12px;
4007 }
4008 .widget-revenue-table.narrow table tr td {
4009 padding: 8px 12px;
4010 }
4011 .widget-revenue-table table thead th.sorted,
4012 .widget-revenue-table table tr td.sorted {
4013 background: #f0f0f0;
4014 }
4015 .widget-revenue-table table .actions-group {
4016 margin-left: 5px;
4017 }
4018 .widget-revenue-table table .actions-group a {
4019 margin: 0 1px;
4020 }
4021 .widget-revenue-table table .actions-group a:hover {
4022 text-decoration: none;
4023 }
4024 .widget-revenue-table table .actions-group i {
4025 font-size: 14px;
4026 }
4027 @media print {
4028 .widget-revenue-table table a[data-order-col] i[class*="fa-"],
4029 .widget-revenue-table table a[data-order-col] span[class*="icon-"] {
4030 display: none;
4031 }
4032 }
4033
4034 /* payment parameters */
4035 .vikpayparamdiv > .payment-logo {
4036 text-align: center;
4037 margin-bottom: 15px;
4038 }
4039
4040 .vap-worktime-import-wrapper .import-editor {
4041 margin-top: 10px;
4042 }
4043 .worktime-import-preview .wd-date > label {
4044 display: inline-block;
4045 font-weight: bold;
4046 margin: 0 5px;
4047 width: auto;
4048 }
4049 .worktime-import-preview .wd-time > label {
4050 display: inline-block;
4051 margin-left: 5px;
4052 width: auto;
4053 }
4054
4055 /* hack used to disable the browser selection */
4056 .vap-disable-selection {
4057 -webkit-touch-callout: none; /* iOS Safari */
4058 -webkit-user-select: none; /* Safari */
4059 -khtml-user-select: none; /* Konqueror HTML */
4060 -moz-user-select: none; /* Old versions of Firefox */
4061 -ms-user-select: none; /* Internet Explorer/Edge */
4062 user-select: none; /* Non-prefixed version, currently
4063 supported by Chrome, Edge, Opera and Firefox */
4064 }
4065
4066 .vap-list-pagination {
4067 display: flex;
4068 justify-content: space-between;
4069 align-items: start;
4070 }
4071
4072 .vap-list-pagination .pagination {
4073 margin: 0;
4074 }