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     padding-top: 0.6rem;
 576     min-width: 23rem;
 577     display: inline-block;
 578     float: left;
 579     text-align: right;
 580     padding-right: 2rem;
 581 }
 582
 583 .cbi-value {
 584     padding: 1rem;
 585 }
 586
 587 .cbi-section-table-descr > .cbi-section-table-cell,
 588 .cbi-section-table-titles > .cbi-section-table-cell {
 589     border: none;
 590 }
 591
 592 .cbi-rowstyle-2 {
 593     background-color: #eee;
 594 }
 595
 596 .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
 597     width: auto !important;
 598 }
 599
 600 /* desc */
 601 .cbi-section-descr,
 602 .cbi-map-descr {
 603     padding: 0.5rem;
 604     color: #999;
 605 }
 606
 607 /* luci */
 608
 609 .hidden {
 610     display: none
 611 }
 612
 613 .left {
 614     text-align: left !important;
 615 }
 616
 617 .right {
 618     text-align: right !important;
 619 }
 620
 621 .inline {
 622     display: inline-block;
 623 }
 624
 625 .cbi-page-actions {
 626     border-top: 1px solid #eee;
 627     padding-top: 2rem;
 628     text-align: right;
 629 }
 630
 631 /* input */
 632 .cbi-value input[type="password"],
 633 .cbi-value input[type="text"] {
 634     box-sizing: border-box;
 635     padding: 0.36rem 1rem;
 636     color: #555;
 637     min-width: 15rem;
 638     background-color: #fff;
 639     background-image: none;
 640     border: 1px solid #ccc;
 641     margin-bottom: 0.3rem;
 642 }
 643
 644 .cbi-value-field input[type="password"],
 645 .cbi-value-field input[type="text"] {
 646     box-sizing: border-box;
 647     padding: 0.36rem 1rem;
 648     color: #555;
 649     background-color: #fff;
 650     background-image: none;
 651     border: 1px solid #ccc;
 652 }
 653
 654 /* select */
 655 .cbi-value-field .cbi-input-select {
 656     width: 95%;
 657     min-width: 15rem;
 658     padding: 0.36rem 0.8rem;
 659     color: #555;
 660     background-color: #fff;
 661     background-image: none;
 662     border: 1px solid #ccc;
 663 }
 664
 665 .ifacebadge {
 666     display: inline-block;
 667     min-width: 8rem;
 668     border: 1px solid #CCCCCC;
 669     padding: 0.5rem 1rem;
 670     -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
 671     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
 672     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
 673 }
 674
 675 .ifacebadge > img {
 676     float: right;
 677     margin-left: 0.3rem;
 678 }
 679
 680 /*textarea*/
 681
 682 .cbi-input-textarea {
 683     box-sizing: border-box;
 684     width: 100%;
 685     min-height: 15rem;
 686     padding: 1rem;
 687     font-size: 1.2rem;
 688 }
 689
 690 #syslog {
 691     width: 90%;
 692     width: calc(100% - 2rem);
 693     min-height: 15rem;
 694     padding: 1rem;
 695     font-size: 1rem;
 696     color: #5F5F5F;
 697
 698     margin-bottom: 20px;
 699     border-radius: 0;
 700     background-color: #FFF;
 701     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
 702     border: none;
 703 }
 704
 705 /* change */
 706
 707 .uci-change-list {
 708     font-family: monospace;
 709 }
 710
 711 .uci-change-list ins,
 712 .uci-change-legend-label ins {
 713     text-decoration: none;
 714     border: 1px solid #00FF00;
 715     background-color: #CCFFCC;
 716     display: block;
 717     padding: 2px;
 718 }
 719
 720 .uci-change-list del,
 721 .uci-change-legend-label del {
 722     text-decoration: none;
 723     border: 1px solid #FF0000;
 724     background-color: #FFCCCC;
 725     display: block;
 726     font-style: normal;
 727     padding: 2px;
 728 }
 729
 730 .uci-change-list var,
 731 .uci-change-legend-label var {
 732     text-decoration: none;
 733     border: 1px solid #CCCCCC;
 734     background-color: #EEEEEE;
 735     display: block;
 736     font-style: normal;
 737     padding: 2px;
 738 }
 739
 740 .uci-change-list var ins,
 741 .uci-change-list var del {
 742     border: none;
 743     white-space: pre;
 744     font-style: normal;
 745     padding: 0px;
 746 }
 747
 748 .uci-change-legend {
 749     padding: 5px;
 750 }
 751
 752 .uci-change-legend-label {
 753     width: 150px;
 754     float: left;
 755 }
 756
 757 .uci-change-legend-label > ins,
 758 .uci-change-legend-label > del,
 759 .uci-change-legend-label > var {
 760     float: left;
 761     margin-right: 4px;
 762     width: 10px;
 763     height: 10px;
 764     display: block;
 765 }
 766
 767 .uci-change-legend-label var ins,
 768 .uci-change-legend-label var del {
 769     line-height: 6px;
 770     border: none;
 771 }
 772
 773 .uci-change-list var,
 774 .uci-change-list del,
 775 .uci-change-list ins {
 776     padding: 0.5rem;
 777 }
 778
 779 /* other fix */
 780 #iwsvg,
 781 #iwsvg2,
 782 #bwsvg {
 783     border: 1px solid #D4D4D4 !important;
 784     border-top: none !important;
 785 }
 786
 787 .ifacebox {
 788     border: 1px solid #999;
 789     background-color: #f9f9f9;
 790 }
 791
 792 .cbi-image-button {
 793     margin-left: 0.5rem;
 794 }
 795
 796 .zonebadge {
 797     padding: 0.2rem 0.5rem;
 798     display: inline-block;
 799     cursor: pointer;
 800 }
 801
 802 .zonebadge > .ifacebadge {
 803     padding: 0.2rem 1rem;
 804     margin: 0.3rem;
 805     border: 1px solid #6C6C6C;
 806 }
 807
 808 .zonebadge > input[type="text"] {
 809     padding: 0.16rem 1rem;
 810     min-width: 10rem;
 811     margin-top: 0.3rem;
 812 }
 813
 814 .cbi-value-field .cbi-input-checkbox,
 815 .cbi-value-field .cbi-input-radio {
 816     margin-top: 1rem;
 817 }
 818
 819 .cbi-section-table-row > .cbi-value-field .cbi-input-select {
 820     min-width: 7rem;
 821 }
 822
 823 .cbi-section-create > .cbi-button-add {
 824     margin: 0.5rem;
 825 }
 826
 827 div.cbi-value var, td.cbi-value-field var {
 828     font-style: italic;
 829     color: #0069D6;
 830 }
 831
 832 small {
 833     font-size: smaller;
 834     white-space: normal;
 835 }
 836
 837 .cbi-button-up,
 838 .cbi-button-down {
 839     display: inline-block;
 840     min-width: 0;
 841     padding: 0.2rem 0.3rem;
 842     font-size: 1.3rem;
 843 }
 844
 845 #diag-rc-output > pre {
 846     background-color: #f5f5f5;
 847     display: block;
 848     padding: 8.5px;
 849     margin: 0 0 18px;
 850     line-height: 1.5rem;
 851     -moz-border-radius: 3px;
 852     white-space: pre-wrap;
 853     word-wrap: break-word;
 854     font-size: 1.5rem;
 855     color: #404040;
 856 }
 857
 858 input[name="ping"],
 859 input[name="traceroute"],
 860 input[name="nslookup"] {
 861     width: 80%;
 862 }
 863
 864 header > .container > .pull-right > *{
 865     position: relative;
 866     top: 0.45rem;
 867     cursor: pointer;
 868 }
 869
 870 #xhr_poll_status > .label.success {
 871     background-color: #14CE14;
 872 }
 873
 874 .label {
 875     padding: 0.3rem 0.8rem;
 876     font-size: 1rem;
 877     box-sizing: border-box;
 878     font-weight: bold;
 879     color: #ffffff !important;
 880     text-transform: uppercase;
 881     white-space: nowrap;
 882     background-color: #bfbfbf;
 883     -webkit-border-radius: 3px;
 884     -moz-border-radius: 3px;
 885     border-radius: 3px;
 886     text-shadow: none;
 887     text-decoration: none;
 888 }
 889
 890 .notice{
 891     background-color: #5BC0DE;
 892 }
 893
 894 .showSide {
 895     display: none;
 896 }
 897
 898 .darkMask {
 899     width: 100%;
 900     height: 100%;
 901     position: fixed;
 902     background-color: rgba(0, 0, 0, 0.56);
 903     content: "";
 904     z-index: 99;
 905     display: none;
 906 }
 907
 908 /* fix Main Login*/
 909 .node-main-login > .main > .main-left {
 910     display: none;
 911 }
 912
 913 .node-main-login > .main > .main-right {
 914     width: 100%;
 915 }
 916
 917 .node-main-login > .main fieldset {
 918     margin-bottom: 2rem;
 919     margin-bottom: 2rem;
 920     display: inline;
 921     background: none;
 922     border: none;
 923     box-shadow: none;
 924 }
 925
 926 .node-main-login > .main .cbi-value-title {
 927     min-width: 6rem;
 928 }
 929
 930 .node-main-login > .main #maincontent {
 931
 932     text-align: center;
 933 }
 934
 935 .node-main-login > .main .container {
 936     display: inline-block;
 937     padding: 2rem 4rem;
 938     margin-top: 2rem !important;
 939     background-color: #FFF;
 940     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
 941     text-align: left;
 942 }
 943
 944 .node-main-login > .main form > div:nth-last-child(1) {
 945     float: right;
 946 }
 947
 948 /* fix status processes */
 949
 950 .node-status-processes > .main table tr td:nth-child(3) {
 951     white-space: normal;
 952 }
 953
 954 .node-status-firewall > .main fieldset li {
 955     display: inline-block;
 956 }
 957
 958 .node-status-firewall > .main fieldset li > a {
 959     box-sizing: border-box;
 960     font: inherit;
 961     overflow: visible;
 962     text-transform: none;
 963     margin-bottom: 0;
 964     font-weight: 400;
 965     text-align: center;
 966     white-space: nowrap;
 967     vertical-align: middle;
 968     touch-action: manipulation;
 969     cursor: pointer;
 970     -webkit-user-select: none;
 971     -moz-user-select: none;
 972     -ms-user-select: none;
 973     user-select: none;
 974     background-image: none;
 975     border: 1px solid transparent;
 976     color: #333;
 977     min-width: 6rem;
 978     padding: 0.5rem 1rem;
 979     font-size: 1.1rem;
 980     line-height: 1.42857143;
 981     background-color: #f0ad4e;
 982     border-color: #eea236;
 983
 984     color: #fff;
 985     text-decoration: none;
 986 }
 987
 988 /* fix system reboot */
 989
 990 .node-system-reboot > .main > .main-right p,
 991 .node-system-reboot > .main > .main-right h3 {
 992     padding-left: 2rem;
 993 }
 994
 995 .node-system-reboot > .main > .main-right p > a {
 996     margin-top: 2rem;
 997     text-decoration: none;
 998     box-sizing: border-box;
 999     font: inherit;
1000     overflow: visible;
1001     text-transform: none;
1002     display: inline-block;
1003     margin-bottom: 0;
1004     font-weight: 400;
1005     text-align: center;
1006     white-space: nowrap;
1007     vertical-align: middle;
1008     touch-action: manipulation;
1009     cursor: pointer;
1010     -webkit-user-select: none;
1011     -moz-user-select: none;
1012     -ms-user-select: none;
1013     user-select: none;
1014     background-image: none;
1015     border: 1px solid transparent;
1016     min-width: 6rem;
1017     padding: 0.5rem 1rem;
1018     font-size: 1.1rem;
1019     line-height: 1.42857143;
1020     text-decoration: none;
1021     color: #fff;
1022     background-color: #d9534f !important;
1023     border-color: #d43f3a !important;
1024 }
1025
1026 /* fix Services  Network Shares*/
1027 .node-services-network_shares > .main .cbi-tabcontainer:nth-child(3) .cbi-value-title {
1028     margin-bottom: 1rem;
1029 }
1030
1031 .node-services-network_shares > .main .cbi-tabcontainer:nth-child(3) .cbi-value-field {
1032     display: list-item;
1033 }
1034
1035 .node-services-network_shares > .main .cbi-tabcontainer:nth-child(3) .cbi-value-description {
1036     padding-top: 1rem;
1037 }
1038
1039 /* fix System Software*/
1040 .node-system-software > .main table tr td:nth-child(4) {
1041     white-space: normal;
1042     font-size: small;
1043     color: #404040;
1044 }
1045
1046 .node-system-software > .main .cbi-tabmenu > li > a, .tabs > li > a {
1047     padding: 0.5rem 1rem;
1048 }
1049
1050 .node-status-firewall fieldset,
1051 .node-system-software fieldset,
1052 .node-system-backup_flash_firmware fieldset {
1053     margin-top: 0;
1054 }
1055
1056 .node-status-firewall .cbi-tabmenu,
1057 .node-system-software .cbi-tabmenu,
1058 .node-system-backup_flash_firmware .cbi-tabmenu {
1059     border: none;
1060     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
1061 }
1062
1063 @media screen and (max-width: 1600px) {
1064     .main-left {
1065         width: calc(0% + 15rem);
1066     }
1067
1068     .main-right {
1069         width: calc(100% - 15rem);
1070     }
1071
1072     .cbi-button {
1073         padding: 0.3rem 0.6rem;
1074         font-size: 1rem;
1075         line-height: 1.5;
1076     }
1077
1078     header > .container > .pull-right > * {
1079         top: 0.35rem;
1080     }
1081
1082     .label {
1083         padding: 0.2rem 0.6rem;
1084     }
1085
1086     .cbi-value-title {
1087         min-width: 15rem;
1088     }
1089
1090     fieldset {
1091         padding: 1rem;
1092     }
1093 }
1094
1095 @media screen and (max-width: 1280px) {
1096     .cbi-tabmenu > li > a, .tabs > li > a {
1097         padding: 0.2rem 0.5rem;
1098     }
1099 }
1100
1101 @media screen and (max-width: 992px) {
1102     * {
1103         font-size: 100%;
1104     }
1105
1106     .main-left {
1107         width: 0;
1108         position: fixed;
1109         z-index: 100;
1110     }
1111
1112     .main-right {
1113         width: 100%;
1114     }
1115
1116     .showSide {
1117         padding: 0.1rem;
1118         margin-right: 0.5rem;
1119         display: inline-block;
1120     }
1121
1122     .showSide:before {
1123         content: "\e20e";
1124         font-size: 1.7rem;
1125     }
1126
1127     .node-main-login .showSide {
1128         display: none !important;
1129     }
1130
1131     .cbi-value-title {
1132         min-width: 6rem;
1133     }
1134
1135
1136     .node-network-diagnostics > .main .cbi-map fieldset > div *{
1137         width: 100% !important;
1138     }
1139
1140     .node-network-diagnostics > .main .cbi-map fieldset > div input[type="text"]{
1141         margin: 3rem 0 0 0 !important;
1142     }
1143
1144     .node-network-diagnostics > .main .cbi-map fieldset > div:nth-child(4) input[type="text"]{
1145         margin: 0 !important;
1146     }
1147
1148     .node-network-diagnostics > .main .cbi-map fieldset > div select,
1149     .node-network-diagnostics > .main .cbi-map fieldset > div input[type="button"]{
1150         margin: 1rem 0 0 0;
1151     }
1152
1153     .node-network-diagnostics > .main .cbi-map fieldset > div{
1154         width: 100% !important;
1155     }
1156
1157
1158     #diag-rc-output > pre {
1159         font-size: 1.2rem;
1160     }
1161 }
1162
1163 @media screen and (max-width: 480px) {
1164     * {
1165         font-size: 90%;
1166     }
1167
1168     fieldset {
1169         padding: 1rem;
1170         margin: 1rem 0 0 0;
1171     }
1172
1173     .tabs {
1174         margin: 0 -1rem;
1175     }
1176
1177     #maincontent > .container {
1178         margin: 0 1rem 1.5rem 1rem;
1179     }
1180
1181     .main > .main-left > .nav > .slide > .menu {
1182         font-size: 1.3rem;
1183     }
1184
1185     .main > .main-left > .nav > .slide > .slide-menu > li > a {
1186         font-size: 1.1rem;
1187     }
1188
1189     .cbi-value-title {
1190         min-width: 0rem !important;
1191         display: block;
1192         margin-top: 1rem;
1193         margin-bottom: 0.5rem;
1194     }
1195
1196     .cbi-value-field, .cbi-value-description {
1197         width: 100%;
1198         box-sizing: border-box;
1199     }
1200
1201     .cbi-value > .cbi-value-field {
1202         display: inline-block;
1203     }
1204
1205     .cbi-tabmenu > li, .tabs > li {
1206         padding: 0.6rem 0rem;
1207     }
1208
1209     .cbi-tabmenu > li > a, .tabs > li > a {
1210         padding: 0.2rem 0.7rem;
1211     }
1212
1213     .cbi-page-actions > div > input {
1214         display: none;
1215     }
1216
1217     .node-main-login > .main .container {
1218         padding: 0.5rem 1rem 2rem 1rem;
1219     }
1220
1221     .node-main-login > .main .cbi-value {
1222         padding: 0;
1223     }
1224
1225     .node-main-login > .main form > div:nth-last-child(1) {
1226         margin-top: 2rem;
1227     }
1228
1229     .node-main-login > .main .cbi-value-title {
1230         font-size: 1.2rem;
1231     }
1232
1233     .node-main-login > .main fieldset {
1234         margin: 0;
1235     }
1236
1237     h2 {
1238         font-size: 2rem;
1239     }
1240
1241     .tabs > li > a {
1242         font-size: 1.2rem;
1243     }
1244
1245     header {
1246         height: 3.5rem;
1247     }
1248
1249     header > .container {
1250         margin-top: 0.25rem;
1251     }
1252
1253     .main {
1254         top: 3.5rem;
1255     }
1256
1257     select,
1258     input {
1259         font-size: 1.2rem;
1260     }
1261
1262     .mobile-hide{
1263         display: none;
1264     }
1265 }