9dbfcaecdd6b6f623e79dc741891dddcce251d3e
[project/luci.git] / themes / luci-theme-material / htdocs / luci-static / material / css / style.css
1 @font-face {
2     font-family: 'icomoon';
3     src: url('../fonts/font.eot');
4     src: url('../fonts/font.eot') format('embedded-opentype'),
5     url('../fonts/font.ttf') format('truetype'),
6     url('../fonts/font.woff') format('woff'),
7     url('../fonts/font.svg') format('svg');
8     font-weight: normal;
9     font-style: normal;
10 }
11
12 .cbi-button-up,
13 .cbi-button-down,
14 .cbi-value-helpicon,
15 .showSide,
16 [class^="icon-"], [class*=" icon-"] {
17     font-family: 'icomoon' !important;
18     speak: none;
19     font-style: normal !important;
20     font-weight: normal !important;
21     font-variant: normal !important;
22     text-transform: none !important;
23     line-height: 1;
24
25     -webkit-font-smoothing: antialiased;
26     -moz-osx-font-smoothing: grayscale;
27 }
28
29 * {
30     margin: 0;
31     padding: 0;
32     font-size: 1rem;
33     font-size: 100%;
34     box-sizing: border-box;
35 }
36
37 .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
38     font-family: inherit;
39     font-weight: 500;
40     line-height: 1.1;
41     color: inherit;
42 }
43
44 html, body {
45     margin: 0px;
46     padding: 0px;
47     height: 100%;
48     font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
49 }
50
51 select {
52     padding: 0.36rem 0.8rem;
53     color: #555;
54     background-color: #fff;
55     background-image: none;
56     border: 1px solid #ccc;
57 }
58
59 input {
60     padding: 0.36rem 0.5rem;
61 }
62
63 code {
64     color: #0099CC;
65 }
66
67 abbr {
68     color: #0099CC;
69     text-decoration: underline;
70     cursor: help;
71 }
72
73 header, footer, .main {
74     width: 100%;
75     position: absolute;
76 }
77
78 header {
79     height: 4rem;
80     box-shadow: 0 2px 5px rgba(0, 0, 0, .26);
81     transition: box-shadow .2s;
82     float: left;
83     position: fixed;
84     z-index: 101;
85 }
86
87 .main {
88     top: 4rem;
89     bottom: 0rem;
90 }
91
92 .main-left {
93     float: left;
94     width: 15%;
95     width: calc(0% + 17rem);
96     height: 100%;
97     overflow-y: auto;
98     background-color: white;
99 }
100
101 .main-right {
102     width: 85%;
103     width: calc(100% - 17rem);
104     float: right;
105     overflow-y: auto;
106     height: 100%;
107     background-color: #EEE;
108 }
109
110 .pull-right {
111     float: right;
112 }
113
114 .pull-left {
115     float: left;
116 }
117
118 header {
119     background: #0099CC;
120     color: white;
121 }
122
123 header > .container {
124     margin-top: 0.5rem;
125     padding: 0.5rem 1rem 0 1rem;
126 }
127
128 header > .container > .brand {
129     font-size: 1.5rem;
130     color: white;
131     text-decoration: none;
132     cursor: default;
133     vertical-align: text-bottom;
134 }
135
136 .warning {
137     background-color: #FF7D60;
138     color: #FFF;
139 }
140
141 .errorbox,
142 .alert-message {
143     margin: 2rem 0 0 0;
144     padding: 2rem;
145     border: 0;
146     font-weight: normal;
147     font-style: normal;
148     font-size: 100%;
149     line-height: 1;
150     font-family: inherit;
151     min-width: inherit;
152     overflow: auto;
153     border-radius: 0;
154     background-color: #FFF;
155     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
156 }
157
158 .errorbox{
159     color: #fff;
160     background-color: #f0ad4e;
161     border-color: #eea236;
162 }
163
164 #maincontent > .container > div:nth-child(1).alert-message.warning > a {
165     box-sizing: border-box;
166     font: inherit;
167     overflow: visible;
168     text-transform: none;
169     display: inline-block;
170     margin-bottom: 0;
171     font-weight: 400;
172     text-align: center;
173     white-space: nowrap;
174     vertical-align: middle;
175     touch-action: manipulation;
176     cursor: pointer;
177     -webkit-user-select: none;
178     -moz-user-select: none;
179     -ms-user-select: none;
180     user-select: none;
181     background-image: none;
182     min-width: 6rem;
183     padding: 0.5rem 1rem;
184     font-size: 1.1rem;
185     line-height: 1.42857143;
186     color: #fff;
187     background-color: #5bc0de;
188     border-color: #46b8da;
189     margin-top: 2rem;
190     text-decoration: inherit;
191 }
192
193 .main > .main-left > .nav {
194     margin-top: 0.5rem;
195 }
196
197 .main > .main-left > .nav > li a {
198     color: #404040;
199 }
200
201 .main > .main-left > .nav > li:nth-last-child(1) {
202     margin-top: 2rem;
203 }
204
205 .main > .main-left > .nav > li {
206     padding: 0.5rem 1rem;
207     cursor: pointer;
208 }
209
210 .main > .main-left > .nav > .slide {
211     padding: 0;
212 }
213
214 .main > .main-left > .nav > .slide > ul {
215     display: none;
216 }
217
218 .main > .main-left > .nav > .slide > .menu {
219     display: block;
220     padding: 0.5rem 1rem;
221     text-decoration: none;
222     cursor: default;
223     font-size: 1.2rem;
224 }
225
226 .main > .main-left > .nav > li:hover,
227 .main > .main-left > .nav > .slide > .menu:hover {
228     background: #D4D4D4;
229 }
230
231 .main > .main-left > .nav > .slide:hover {
232     background: none;
233 }
234
235 .main > .main-left > .nav > .slide > .slide-menu > li {
236     padding: 0.4rem 2rem;
237 }
238
239 .main > .main-left > .nav > .slide > .slide-menu > .active {
240     background-color: #0099CC;
241 }
242
243 .main > .main-left > .nav > .slide > .slide-menu > li > a {
244     text-decoration: none;
245     white-space: nowrap;
246 }
247
248 .main > .main-left > .nav > .slide > .slide-menu > .active > a {
249     color: white;
250 }
251
252 .main > .main-left > .nav > .slide > .slide-menu > li:hover {
253     background: #D4D4D4;
254 }
255
256 .main > .main-left > .nav > .slide > .slide-menu > .active:hover {
257     background-color: #0099CC;
258     cursor: hand;
259 }
260
261 li {
262     list-style-type: none;
263 }
264
265 #maincontent > .container {
266     margin: 0 2rem 3rem 2rem;
267 }
268
269 h1 {
270     font-size: 4rem;
271     padding-bottom: 10px;
272     border-bottom: 1px solid #eee;
273 }
274
275 h2 {
276     margin: 2rem 0 0 0;
277     font-size: 2.5rem;
278     padding-bottom: 10px;
279     border-bottom: 1px solid #eee;
280 }
281
282 h3 {
283     margin: 2rem 0 0 0;
284     font-size: 2rem;
285     padding-bottom: 10px;
286 }
287
288 h4 {
289
290 }
291
292 fieldset {
293     margin: 2rem 0 0 0;
294     padding: 2rem;
295     border: 0;
296     font-weight: normal;
297     font-style: normal;
298     font-size: 100%;
299     line-height: 1;
300     font-family: inherit;
301
302     min-width: inherit;
303     overflow: auto;
304
305     border-radius: 0;
306     background-color: #FFF;
307     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
308 }
309
310 fieldset > legend {
311     display: none !important;
312 }
313
314 fieldset > fieldset {
315     margin: 0;
316     padding: 0;
317     border: none;
318     box-shadow: none;
319 }
320
321 .panel-title {
322     width: 100%;
323     display: block;
324     line-height: 1;
325     color: #404040;
326     font-size: 1.9rem;
327     padding-bottom: 2rem;
328     border-bottom: 1px solid #eee;
329 }
330
331 table {
332     border-spacing: 0;
333     border-collapse: collapse;
334     width: 100%;
335     border: 1px solid #eee;
336 }
337
338 table > tbody > tr > td, table > tbody > tr > th, table > tfoot > tr > td, table > tfoot > tr > th, table > thead > tr > td, table > thead > tr > th {
339     padding: 8px;
340     line-height: 1.42857143;
341     border-top: 1px solid #ddd;
342
343     white-space: nowrap;
344 }
345
346 .cbi-section-table-cell {
347     text-align: center;
348 }
349
350 .cbi-section-table-row {
351     text-align: center;
352 }
353
354 fieldset > table > tbody > tr:nth-of-type(odd) {
355     background-color: #f9f9f9;
356 }
357
358 footer {
359     position: fixed;
360     z-index: 1000;
361     bottom: 0;
362     left: 0;
363 }
364
365 /* 进度条fix */
366 #memfree > div,
367 #membuff > div,
368 #conns > div,
369 #memtotal > div {
370     width: 100% !important;
371     height: 1.4rem !important;
372 }
373
374 #memfree > div > div,
375 #membuff > div > div,
376 #conns > div > div,
377 #memtotal > div > div {
378     height: 1.4rem !important;
379     background-color: #0099CC !important;
380 }
381
382 /* 多重table fix*/
383
384 table table {
385     border: none;
386 }
387
388 .cbi-value-field table {
389     border: none;
390 }
391
392 td > table > tbody > tr > td {
393     border: none;
394 }
395
396 .cbi-value-field > table > tbody > tr > td {
397     border: none;
398 }
399
400 /* button 样式 */
401
402 .cbi-button {
403     box-sizing: border-box;
404     font: inherit;
405     overflow: visible;
406     text-transform: none;
407     display: inline-block;
408     margin-bottom: 0;
409     font-weight: 400;
410     text-align: center;
411     white-space: nowrap;
412     vertical-align: middle;
413     touch-action: manipulation;
414     cursor: pointer;
415     -webkit-user-select: none;
416     -moz-user-select: none;
417     -ms-user-select: none;
418     user-select: none;
419     background-image: none;
420     border: 1px solid transparent;
421     color: #333;
422     background-color: #fff;
423     border-color: #ccc;
424     min-width: 6rem;
425     padding: 0.5rem 1rem;
426     font-size: 1.1rem;
427     line-height: 1.42857143;
428 }
429
430 .cbi-button-reset,
431 .cbi-input-remove {
432     color: #fff;
433     background-color: #f0ad4e;
434     border-color: #eea236;
435 }
436
437 .cbi-input-save,
438 .cbi-button-add,
439 .cbi-button-save,
440 .cbi-button-find,
441 .cbi-input-reload,
442 .cbi-button-reload {
443     color: #fff !important;
444     background-color: #337ab7 !important;
445     border-color: #2e6da4 !important;
446 }
447
448 .cbi-input-apply,
449 .cbi-button-apply,
450 .cbi-button-edit {
451     color: #fff !important;
452     background-color: #5bc0de !important;
453     border-color: #46b8da !important;
454 }
455
456 .cbi-input-reset,
457 .cbi-button-remove {
458     color: #fff !important;
459     background-color: #d9534f !important;
460     border-color: #d43f3a !important;
461 }
462
463 /* table */
464
465 .tabs {
466     margin: 0 -2rem;
467     padding-left: 0.5rem;
468     background-color: #FFFFFF;
469 }
470
471 .cbi-tabmenu > li,
472 .tabs > li {
473     display: inline-block;
474     padding: 0.9rem 0rem;
475 }
476
477 .cbi-tabmenu > li > a,
478 .tabs > li > a {
479     text-decoration: none;
480     color: #404040;
481     padding: 0.9rem 1.5rem;
482 }
483
484 .tabs > li[class~="active"],
485 .tabs > li:hover {
486     cursor: pointer;
487     background-color: white;
488     border-bottom: 0.2rem solid #0099CC;
489     color: #0099CC;
490 }
491
492 .tabs > li[class~="active"] > a {
493     color: #0099cc;
494 }
495
496 .tabs > li:hover {
497     border-bottom: 0.2rem solid #C9C9C9;
498 }
499
500 .cbi-tabmenu {
501     border-top: 1px solid #D4D4D4;
502     border-left: 1px solid #D4D4D4;
503     border-right: 1px solid #D4D4D4;
504 }
505
506 .cbi-tabmenu > li:hover {
507     background-color: #F1F1F1;
508 }
509
510 .cbi-tabmenu > li[class~="cbi-tab"] {
511     background-color: white;
512 }
513
514 .cbi-tabmenu {
515     background-color: #D4D4D4;
516 }
517
518 .cbi-section-node-tabbed {
519     padding: 0;
520     margin-top: 0;
521     border-bottom: 1px solid #D4D4D4;
522     border-left: 1px solid #D4D4D4;
523     border-right: 1px solid #D4D4D4;
524 }
525
526 .cbi-tabcontainer > .cbi-value:nth-of-type(2n) {
527     background-color: #f9f9f9;
528 }
529
530 .cbi-value-field,
531 .cbi-value-description {
532     display: table-cell;
533 }
534
535 .cbi-value-helpicon > img {
536     display: none;
537 }
538
539 .cbi-value-helpicon:before {
540     content: "\f059";
541 }
542
543 .cbi-value-description {
544     font-size: small;
545     opacity: 0.5;
546     padding: 0.5rem 0 0 0;
547 }
548
549 .cbi-value-title {
550     padding-top: 0.6rem;
551     min-width: 23rem;
552     display: inline-block;
553     float: left;
554     text-align: right;
555     padding-right: 2rem;
556 }
557
558 .cbi-value {
559     padding: 1rem;
560 }
561
562 .cbi-section-table-descr > .cbi-section-table-cell,
563 .cbi-section-table-titles > .cbi-section-table-cell {
564     border: none;
565 }
566
567 .cbi-rowstyle-2 {
568     background-color: #eee;
569 }
570
571 .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
572     width: auto !important;
573 }
574
575 /* desc */
576 .cbi-section-descr,
577 .cbi-map-descr {
578     padding: 0.5rem;
579     color: #999;
580 }
581
582 /* luci */
583
584 .hidden {
585     display: none
586 }
587
588 .left {
589     text-align: left !important;
590 }
591
592 .right {
593     text-align: right !important;
594 }
595
596 .inline {
597     display: inline-block;
598 }
599
600 .cbi-page-actions {
601     border-top: 1px solid #eee;
602     padding-top: 2rem;
603     text-align: right;
604 }
605
606 /* input */
607 .cbi-value input[type="password"],
608 .cbi-value input[type="text"] {
609     box-sizing: border-box;
610     padding: 0.36rem 1rem;
611     color: #555;
612     min-width: 15rem;
613     background-color: #fff;
614     background-image: none;
615     border: 1px solid #ccc;
616     margin-bottom: 0.3rem;
617 }
618
619 .cbi-value-field input[type="password"],
620 .cbi-value-field input[type="text"] {
621     box-sizing: border-box;
622     padding: 0.36rem 1rem;
623     color: #555;
624     background-color: #fff;
625     background-image: none;
626     border: 1px solid #ccc;
627 }
628
629 /* select */
630 .cbi-value-field .cbi-input-select {
631     width: 95%;
632     min-width: 15rem;
633     padding: 0.36rem 0.8rem;
634     color: #555;
635     background-color: #fff;
636     background-image: none;
637     border: 1px solid #ccc;
638 }
639
640 .ifacebadge {
641     display: inline-block;
642     min-width: 8rem;
643     border: 1px solid #CCCCCC;
644     padding: 0.5rem 1rem;
645     -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
646     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
647     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
648 }
649
650 .ifacebadge > img {
651     float: right;
652     margin-left: 0.3rem;
653 }
654
655 /*textarea*/
656
657 .cbi-input-textarea {
658     box-sizing: border-box;
659     width: 100%;
660     min-height: 15rem;
661     padding: 1rem;
662     font-size: 1.2rem;
663 }
664
665 #syslog {
666     width: 90%;
667     width: calc(100% - 2rem);
668     min-height: 15rem;
669     padding: 1rem;
670     font-size: 1rem;
671     color: #5F5F5F;
672
673     margin-bottom: 20px;
674     border-radius: 0;
675     background-color: #FFF;
676     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
677     border: none;
678 }
679
680 /* change */
681
682 .uci-change-list {
683     font-family: monospace;
684 }
685
686 .uci-change-list ins,
687 .uci-change-legend-label ins {
688     text-decoration: none;
689     border: 1px solid #00FF00;
690     background-color: #CCFFCC;
691     display: block;
692     padding: 2px;
693 }
694
695 .uci-change-list del,
696 .uci-change-legend-label del {
697     text-decoration: none;
698     border: 1px solid #FF0000;
699     background-color: #FFCCCC;
700     display: block;
701     font-style: normal;
702     padding: 2px;
703 }
704
705 .uci-change-list var,
706 .uci-change-legend-label var {
707     text-decoration: none;
708     border: 1px solid #CCCCCC;
709     background-color: #EEEEEE;
710     display: block;
711     font-style: normal;
712     padding: 2px;
713 }
714
715 .uci-change-list var ins,
716 .uci-change-list var del {
717     /*display: inline;*/
718     border: none;
719     white-space: pre;
720     font-style: normal;
721     padding: 0px;
722 }
723
724 .uci-change-legend {
725     padding: 5px;
726 }
727
728 .uci-change-legend-label {
729     width: 150px;
730     float: left;
731 }
732
733 .uci-change-legend-label > ins,
734 .uci-change-legend-label > del,
735 .uci-change-legend-label > var {
736     float: left;
737     margin-right: 4px;
738     width: 10px;
739     height: 10px;
740     display: block;
741 }
742
743 .uci-change-legend-label var ins,
744 .uci-change-legend-label var del {
745     line-height: 6px;
746     border: none;
747 }
748
749 .uci-change-list var,
750 .uci-change-list del,
751 .uci-change-list ins {
752     padding: 0.5rem;
753 }
754
755 /* other fix */
756 #iwsvg,
757 #iwsvg2,
758 #bwsvg {
759     border: 1px solid #D4D4D4 !important;
760     border-top: none !important;
761 }
762
763 .ifacebox {
764     border: 1px solid #999;
765     background-color: #f9f9f9;
766 }
767
768 .cbi-image-button {
769     margin-left: 0.5rem;
770 }
771
772 .zonebadge {
773     padding: 0.2rem 0.5rem;
774     display: inline-block;
775     cursor: pointer;
776 }
777
778 .zonebadge > .ifacebadge {
779     padding: 0.2rem 1rem;
780     margin: 0.3rem;
781     border: 1px solid #6C6C6C;
782 }
783
784 .zonebadge > input[type="text"] {
785     padding: 0.16rem 1rem;
786     min-width: 10rem;
787     margin-top: 0.3rem;
788 }
789
790 .cbi-value-field .cbi-input-checkbox,
791 .cbi-value-field .cbi-input-radio {
792     margin-top: 1rem;
793 }
794
795 .cbi-section-table-row > .cbi-value-field .cbi-input-select {
796     min-width: 7rem;
797 }
798
799 .cbi-section-create > .cbi-button-add {
800     margin: 0.5rem;
801 }
802
803 div.cbi-value var, td.cbi-value-field var {
804     font-style: italic;
805     color: #0069D6;
806 }
807
808 small {
809     font-size: smaller;
810     white-space: normal;
811 }
812
813 .cbi-button-up,
814 .cbi-button-down {
815     display: inline-block;
816     min-width: 0;
817     padding: 0.2rem 0.3rem;
818     font-size: 1.3rem;
819 }
820
821 #diag-rc-output > pre {
822     background-color: #f5f5f5;
823     display: block;
824     padding: 8.5px;
825     margin: 0 0 18px;
826     line-height: 1.5rem;
827     -moz-border-radius: 3px;
828     white-space: pre-wrap;
829     word-wrap: break-word;
830     font-size: 1.5rem;
831     color: #404040;
832 }
833
834 input[name="ping"],
835 input[name="traceroute"],
836 input[name="nslookup"] {
837     width: 80%;
838 }
839
840 #xhr_poll_status {
841     position: relative;
842     top: 0.45rem;
843     cursor: pointer;
844 }
845
846 #xhr_poll_status > .label.success {
847     background-color: #14CE14;
848 }
849
850 #xhr_poll_status > .label {
851     padding: 0.3rem 0.8rem;
852     font-size: 1rem;
853     box-sizing: border-box;
854     font-weight: bold;
855     color: #ffffff !important;
856     text-transform: uppercase;
857     white-space: nowrap;
858     background-color: #bfbfbf;
859     -webkit-border-radius: 3px;
860     -moz-border-radius: 3px;
861     border-radius: 3px;
862     text-shadow: none;
863 }
864
865 .showSide {
866     display: none;
867 }
868
869 .darkMask {
870     width: 100%;
871     height: 100%;
872     position: fixed;
873     background-color: rgba(0, 0, 0, 0.56);
874     content: "";
875     z-index: 99;
876     display: none;
877 }
878
879 /* fix Main Login*/
880 .node-main-login > .main > .main-left {
881     display: none;
882 }
883
884 .node-main-login > .main > .main-right {
885     width: 100%;
886 }
887
888 .node-main-login > .main fieldset {
889     margin-bottom: 2rem;
890     margin-bottom: 2rem;
891     display: inline;
892     background: none;
893     border: none;
894     box-shadow: none;
895 }
896
897 .node-main-login > .main .cbi-value-title {
898     min-width: 6rem;
899 }
900
901 .node-main-login > .main #maincontent {
902
903     text-align: center;
904 }
905
906 .node-main-login > .main .container {
907     display: inline-block;
908     padding: 2rem 4rem;
909     margin-top: 2rem !important;
910     background-color: #FFF;
911     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
912     text-align: left;
913 }
914
915 .node-main-login > .main form > div:nth-last-child(1) {
916     float: right;
917 }
918
919 /* fix status processes */
920
921 .node-status-processes > .main table tr td:nth-child(3) {
922     white-space: normal;
923 }
924
925 .node-status-firewall > .main fieldset li {
926     display: inline-block;
927 }
928
929 .node-status-firewall > .main fieldset li > a {
930     box-sizing: border-box;
931     font: inherit;
932     overflow: visible;
933     text-transform: none;
934     margin-bottom: 0;
935     font-weight: 400;
936     text-align: center;
937     white-space: nowrap;
938     vertical-align: middle;
939     touch-action: manipulation;
940     cursor: pointer;
941     -webkit-user-select: none;
942     -moz-user-select: none;
943     -ms-user-select: none;
944     user-select: none;
945     background-image: none;
946     border: 1px solid transparent;
947     color: #333;
948     min-width: 6rem;
949     padding: 0.5rem 1rem;
950     font-size: 1.1rem;
951     line-height: 1.42857143;
952     background-color: #f0ad4e;
953     border-color: #eea236;
954
955     color: #fff;
956     text-decoration: none;
957 }
958
959 /* fix system reboot */
960
961 .node-system-reboot > .main > .main-right p,
962 .node-system-reboot > .main > .main-right h3 {
963     padding-left: 2rem;
964 }
965
966 .node-system-reboot > .main > .main-right p > a {
967     margin-top: 2rem;
968     text-decoration: none;
969     box-sizing: border-box;
970     font: inherit;
971     overflow: visible;
972     text-transform: none;
973     display: inline-block;
974     margin-bottom: 0;
975     font-weight: 400;
976     text-align: center;
977     white-space: nowrap;
978     vertical-align: middle;
979     touch-action: manipulation;
980     cursor: pointer;
981     -webkit-user-select: none;
982     -moz-user-select: none;
983     -ms-user-select: none;
984     user-select: none;
985     background-image: none;
986     border: 1px solid transparent;
987     min-width: 6rem;
988     padding: 0.5rem 1rem;
989     font-size: 1.1rem;
990     line-height: 1.42857143;
991     text-decoration: none;
992     color: #fff;
993     background-color: #d9534f !important;
994     border-color: #d43f3a !important;
995 }
996
997 /* fix Services  Network Shares*/
998 .node-services-network_shares > .main .cbi-tabcontainer:nth-child(3) .cbi-value-title {
999     margin-bottom: 1rem;
1000 }
1001
1002 .node-services-network_shares > .main .cbi-tabcontainer:nth-child(3) .cbi-value-field {
1003     display: list-item;
1004 }
1005
1006 .node-services-network_shares > .main .cbi-tabcontainer:nth-child(3) .cbi-value-description {
1007     padding-top: 1rem;
1008 }
1009
1010 /* fix System Software*/
1011 .node-system-software > .main table tr td:nth-child(4) {
1012     white-space: normal;
1013     font-size: small;
1014     color: #404040;
1015 }
1016
1017 .node-system-software > .main .cbi-tabmenu > li > a, .tabs > li > a {
1018     padding: 0.5rem 1rem;
1019 }
1020
1021 .node-status-firewall fieldset,
1022 .node-system-software fieldset,
1023 .node-system-backup_flash_firmware fieldset {
1024     margin-top: 0;
1025 }
1026
1027 .node-status-firewall .cbi-tabmenu,
1028 .node-system-software .cbi-tabmenu,
1029 .node-system-backup_flash_firmware .cbi-tabmenu {
1030     border: none;
1031     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
1032 }
1033
1034 @media screen and (max-width: 1600px) {
1035     .main-left {
1036         width: calc(0% + 15rem);
1037     }
1038
1039     .main-right {
1040         width: calc(100% - 15rem);
1041     }
1042
1043     .cbi-button {
1044         padding: 0.3rem 0.6rem;
1045         font-size: 1rem;
1046         line-height: 1.5;
1047     }
1048
1049     #xhr_poll_status {
1050         top: 0.35rem;
1051     }
1052
1053     #xhr_poll_status > .label {
1054         padding: 0.2rem 0.6rem;
1055     }
1056
1057     .cbi-value-title {
1058         min-width: 15rem;
1059     }
1060
1061     fieldset {
1062         padding: 1rem;
1063     }
1064 }
1065
1066 @media screen and (max-width: 1280px) {
1067     .cbi-tabmenu > li > a, .tabs > li > a {
1068         padding: 0.2rem 0.5rem;
1069     }
1070 }
1071
1072 @media screen and (max-width: 992px) {
1073     * {
1074         font-size: 100%;
1075     }
1076
1077     .main-left {
1078         width: 0;
1079         position: fixed;
1080         z-index: 100;
1081     }
1082
1083     .main-right {
1084         width: 100%;
1085     }
1086
1087     .showSide {
1088         padding: 0.1rem;
1089         margin-right: 0.5rem;
1090         display: inline-block;
1091     }
1092
1093     .showSide:before {
1094         content: "\e20e";
1095         font-size: 1.7rem;
1096     }
1097
1098     .node-main-login .showSide {
1099         display: none !important;
1100     }
1101
1102     .cbi-value-title {
1103         min-width: 6rem;
1104     }
1105
1106
1107     .node-network-diagnostics > .main .cbi-map fieldset > div *{
1108         width: 100% !important;
1109     }
1110
1111     .node-network-diagnostics > .main .cbi-map fieldset > div input[type="text"]{
1112         margin: 3rem 0 0 0 !important;
1113     }
1114
1115     .node-network-diagnostics > .main .cbi-map fieldset > div:nth-child(4) input[type="text"]{
1116         margin: 0 !important;
1117     }
1118
1119     .node-network-diagnostics > .main .cbi-map fieldset > div select,
1120     .node-network-diagnostics > .main .cbi-map fieldset > div input[type="button"]{
1121         margin: 1rem 0 0 0;
1122     }
1123
1124     .node-network-diagnostics > .main .cbi-map fieldset > div{
1125         width: 100% !important;
1126     }
1127
1128
1129     #diag-rc-output > pre {
1130         font-size: 1.2rem;
1131     }
1132 }
1133
1134 @media screen and (max-width: 480px) {
1135     * {
1136         font-size: 90%;
1137     }
1138
1139     fieldset {
1140         padding: 1rem;
1141         margin: 1rem 0 0 0;
1142     }
1143
1144     .tabs {
1145         margin: 0 -1rem;
1146     }
1147
1148     #maincontent > .container {
1149         margin: 0 1rem 1.5rem 1rem;
1150     }
1151
1152     .main > .main-left > .nav > .slide > .menu {
1153         font-size: 1.3rem;
1154     }
1155
1156     .main > .main-left > .nav > .slide > .slide-menu > li > a {
1157         font-size: 1.1rem;
1158     }
1159
1160     .cbi-value-title {
1161         min-width: 0rem !important;
1162         display: block;
1163         margin-top: 1rem;
1164         margin-bottom: 0.5rem;
1165     }
1166
1167     .cbi-value-field, .cbi-value-description {
1168         width: 100%;
1169         box-sizing: border-box;
1170     }
1171
1172     .cbi-value > .cbi-value-field {
1173         display: inline-block;
1174     }
1175
1176     .cbi-tabmenu > li, .tabs > li {
1177         padding: 0.6rem 0rem;
1178     }
1179
1180     .cbi-tabmenu > li > a, .tabs > li > a {
1181         padding: 0.2rem 0.7rem;
1182     }
1183
1184     .cbi-page-actions > div {
1185         display: none;
1186     }
1187
1188     .node-main-login > .main .container {
1189         padding: 0.5rem 1rem 2rem 1rem;
1190     }
1191
1192     .node-main-login > .main .cbi-value {
1193         padding: 0;
1194     }
1195
1196     .node-main-login > .main form > div:nth-last-child(1) {
1197         margin-top: 2rem;
1198     }
1199
1200     .node-main-login > .main .cbi-value-title {
1201         font-size: 1.2rem;
1202     }
1203
1204     .node-main-login > .main fieldset {
1205         margin: 0;
1206     }
1207
1208     h2 {
1209         font-size: 2rem;
1210     }
1211
1212     .tabs > li > a {
1213         font-size: 1.2rem;
1214     }
1215
1216     header {
1217         height: 3.5rem;
1218     }
1219
1220     header > .container {
1221         margin-top: 0.25rem;
1222     }
1223
1224     .main {
1225         top: 3.5rem;
1226     }
1227
1228     select,
1229     input {
1230         font-size: 1.2rem;
1231     }
1232 }