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