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