package/luci/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 .table { display: table; }
  36 .tr { display: table-row; }
  37 .thead { display: table-header-group; }
  38 .tbody { display: table-row-group; }
  39 .tfoot { display: table-footer-group; }
  40 .td, .th {
  41     vertical-align: middle;
  42     text-align: center;
  43     display: table-cell;
  44     padding: .5em;
  45 }
  46
  47 .th {
  48     font-weight: bold;
  49 }
  50
  51 .table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
  52 .table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
  53
  54 .cbi-button-up,
  55 .cbi-button-down,
  56 .cbi-value-helpicon,
  57 .showSide,
  58 .main > .loading > span {
  59     font-family: 'icomoon' !important;
  60     speak: none;
  61     font-style: normal !important;
  62     font-weight: normal !important;
  63     font-variant: normal !important;
  64     text-transform: none !important;
  65     line-height: 1;
  66
  67     -webkit-font-smoothing: antialiased;
  68     -moz-osx-font-smoothing: grayscale;
  69 }
  70
  71 * {
  72     margin: 0;
  73     padding: 0;
  74     box-sizing: border-box;
  75 }
  76
  77 .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  78     font-family: inherit;
  79     font-weight: 400;
  80     line-height: 1.1;
  81     color: inherit;
  82 }
  83
  84 html {
  85     -webkit-text-size-adjust: 100%;
  86     -ms-text-size-adjust: 100%;
  87 }
  88
  89 body {
  90     font-size: 0.8rem;
  91     background-color: #EEE;
  92 }
  93
  94 html, body {
  95     margin: 0px;
  96     padding: 0px;
  97     height: 100%;
  98     font-family: Microsoft Yahei, WenQuanYi Micro Hei, sans-serif, "Helvetica Neue", Helvetica, Hiragino Sans GB;
  99 }
 100
 101 select {
 102     padding: 0.36rem 0.8rem;
 103     color: #555;
 104     background-color: #fff;
 105     background-image: none;
 106     border: 1px solid #ccc;
 107 }
 108
 109 select,
 110 input,
 111 .cbi-dropdown {
 112     background-color: transparent;
 113     color: rgba(0, 0, 0, .87);
 114     border: none;
 115     border-bottom: 2px solid rgba(0, 0, 0, .26);
 116     outline: 0;
 117     padding: 0;
 118     box-shadow: none;
 119     border-radius: 0;
 120     background-image: none;
 121     height: 1.8rem;
 122     font-size: 0.8rem;
 123 }
 124
 125 select:not([multiple="multiple"]):focus,
 126 input:focus {
 127     border-color: #0099CC;
 128 }
 129
 130 select[multiple="multiple"] {
 131     height: auto;
 132 }
 133
 134 code {
 135     color: #0099CC;
 136 }
 137
 138 abbr {
 139     color: #005470;
 140     text-decoration: underline;
 141     cursor: help;
 142 }
 143
 144 hr {
 145     margin: 1rem 0;
 146     border-color: #EEE;
 147     opacity: 0.1;
 148 }
 149
 150 header, .main {
 151     width: 100%;
 152     position: absolute;
 153 }
 154
 155 header {
 156     height: 4rem;
 157     box-shadow: 0 2px 5px rgba(0, 0, 0, .26);
 158     transition: box-shadow .2s;
 159     float: left;
 160     position: fixed;
 161     z-index: 2000;
 162 }
 163
 164 footer {
 165     text-align: right;
 166     padding: 1rem;
 167     color: #aaa;
 168     font-size: 0.8rem;
 169     text-shadow: 0px 0px 2px #BBB;
 170 }
 171
 172 footer > a {
 173     color: #aaa;
 174     text-decoration: none;
 175 }
 176
 177 .main {
 178     top: 4rem;
 179     bottom: 0rem;
 180     position: relative;
 181     height: 100%;
 182     height: calc(100% - 4rem);
 183 }
 184
 185 .main > .loading {
 186     position: fixed;
 187     width: 100%;
 188     height: 100%;
 189     z-index: 1000;
 190     display: block;
 191     background-color: rgb(240, 240, 240);
 192     top: 0;
 193 }
 194
 195 .main > .loading > span {
 196     display: block;
 197     text-align: center;
 198     margin-top: 2rem;
 199     color: #888;
 200     font-size: 1.2rem;
 201 }
 202
 203 .main > .loading > span > .loading-img:before {
 204     content: "\e603";
 205 }
 206
 207 .main > .loading > span > .loading-img {
 208     animation: anim-rotate 2s infinite linear;
 209     margin-right: 0.2rem;
 210     display: inline-block;
 211 }
 212
 213 @keyframes anim-rotate {
 214     0% {
 215         -webkit-transform: rotate(0);
 216         -ms-transform: rotate(0);
 217         transform: rotate(0);
 218     }
 219     100% {
 220         -webkit-transform: rotate(360deg);
 221         -ms-transform: rotate(360deg);
 222         transform: rotate(360deg)
 223     }
 224 }
 225
 226 .main-left {
 227     float: left;
 228     top: 4rem;
 229     width: 15%;
 230     width: calc(0% + 15rem);
 231     height: 100%;
 232     height: calc(100% - 4rem);
 233     background-color: white;
 234     overflow-x: auto;
 235     position: fixed;
 236 }
 237
 238 .main-right {
 239     width: 85%;
 240     width: calc(100% - 15rem);
 241     float: right;
 242     height: 100%;
 243     background-color: #EEE;
 244 }
 245
 246 .main-right > #maincontent {
 247     background-color: #EEE;
 248 }
 249
 250 .pull-right {
 251     float: right;
 252 }
 253
 254 .pull-left {
 255     float: left;
 256 }
 257
 258 header {
 259     background: #0099CC;
 260     color: white;
 261 }
 262
 263 header > .container {
 264     margin-top: 0.5rem;
 265     padding: 0.5rem 1rem 0 1rem;
 266 }
 267
 268 header > .container > .brand {
 269     font-size: 1.4rem;
 270     color: white;
 271     text-decoration: none;
 272     cursor: default;
 273     vertical-align: text-bottom;
 274 }
 275
 276 .danger {
 277     background-color: #FA8072 !important;
 278     color: black;
 279 }
 280
 281 .warning {
 282     background-color:  #F0E68C !important;
 283     color: black;
 284 }
 285
 286 .success {
 287     background-color: #90EE90 !important;
 288     color: black;
 289 }
 290
 291 .alert-message {
 292     margin: 2rem 0 0 0;
 293     padding: 1rem;
 294     border: 0;
 295     font-weight: normal;
 296     font-style: normal;
 297     line-height: 1;
 298     font-family: inherit;
 299     min-width: inherit;
 300     overflow: auto;
 301     border-radius: 0;
 302     background-color: #FFF;
 303     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
 304 }
 305
 306 .error {
 307     color: red;
 308 }
 309
 310 .alert-message > h4 {
 311     font-weight: bold;
 312     font-size: 110%;
 313 }
 314
 315 .alert-message > * {
 316     margin: .5rem 0;
 317 }
 318
 319 #maincontent > .container > div:nth-child(1).alert-message.warning > a {
 320     font: inherit;
 321     overflow: visible;
 322     text-transform: none;
 323     display: inline-block;
 324     margin-bottom: 0;
 325     font-weight: 400;
 326     text-align: center;
 327     white-space: nowrap;
 328     vertical-align: middle;
 329     touch-action: manipulation;
 330     cursor: pointer;
 331     -webkit-user-select: none;
 332     -moz-user-select: none;
 333     -ms-user-select: none;
 334     user-select: none;
 335     background-image: none;
 336     min-width: 6rem;
 337     padding: 0.5rem 1rem;
 338     font-size: 0.9rem;
 339     line-height: 1.42857143;
 340     color: #fff;
 341     background-color: #5bc0de;
 342     border-color: #46b8da;
 343     margin-top: 2rem;
 344     text-decoration: inherit;
 345 }
 346
 347 .main > .main-left > .nav {
 348     margin-top: 0.5rem;
 349 }
 350
 351 .main > .main-left > .nav > li a {
 352     color: #404040;
 353     display: block;
 354 }
 355
 356 .main > .main-left > .nav > li:nth-last-child(1) {
 357     margin-top: 2rem;
 358     font-size: 1.2rem;
 359 }
 360
 361 .main > .main-left > .nav > li {
 362     padding: 0.5rem 1rem;
 363     cursor: pointer;
 364 }
 365
 366 .main > .main-left > .nav > .slide {
 367     padding: 0;
 368 }
 369
 370 .main > .main-left > .nav > .slide > ul {
 371     display: none;
 372 }
 373
 374 .main > .main-left > .nav > .slide > .menu {
 375     display: block;
 376     padding: 0.5rem 1rem;
 377     text-decoration: none;
 378     cursor: default;
 379     font-size: 1.15rem;
 380 }
 381
 382 .main > .main-left > .nav > li:hover,
 383 .main > .main-left > .nav > .slide > .menu:hover {
 384     background: #D4D4D4;
 385 }
 386
 387 .main > .main-left > .nav > .slide:hover {
 388     background: none;
 389 }
 390
 391 .main > .main-left > .nav > .slide > .slide-menu > li {
 392     padding: 0.4rem 2rem;
 393 }
 394
 395 .main > .main-left > .nav > .slide > .slide-menu > .active {
 396     background-color: #0099CC;
 397 }
 398
 399 .main > .main-left > .nav > .slide > .slide-menu > li > a {
 400     text-decoration: none;
 401     white-space: nowrap;
 402 }
 403
 404 .main > .main-left > .nav > .slide > .slide-menu > .active > a {
 405     color: white;
 406 }
 407
 408 .main > .main-left > .nav > .slide > .slide-menu > li:hover {
 409     background: #D4D4D4;
 410 }
 411
 412 .main > .main-left > .nav > .slide > .slide-menu > .active:hover {
 413     background-color: #0099CC;
 414     cursor: hand;
 415 }
 416
 417 li {
 418     list-style-type: none;
 419 }
 420
 421 #maincontent > .container {
 422     margin: 0 2rem 1rem 2rem;
 423 }
 424
 425 h1 {
 426     font-size: 2rem;
 427     padding-bottom: 10px;
 428     border-bottom: 1px solid #eee;
 429 }
 430
 431 h2 {
 432     margin: 2rem 0 0 0;
 433     font-size: 1.8rem;
 434     padding-bottom: 10px;
 435     border-bottom: 1px solid #eee;
 436 }
 437
 438 h3 {
 439     margin: 2rem 0 0 0;
 440     font-size: 1.4rem;
 441     padding-bottom: 10px;
 442 }
 443
 444 h4 {
 445
 446 }
 447
 448 fieldset {
 449     margin: 2rem 0 0 0;
 450     padding: 2rem;
 451     border: 0;
 452     font-weight: normal;
 453     font-style: normal;
 454     line-height: 1;
 455     font-family: inherit;
 456     min-width: inherit;
 457     border-radius: 0;
 458     background-color: #FFF;
 459     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
 460
 461     -webkit-overflow-scrolling: touch;
 462 }
 463
 464 .cbi-map-descr + fieldset {
 465     margin-top: 1rem;
 466 }
 467
 468 fieldset > legend {
 469     display: none !important;
 470 }
 471
 472 fieldset > fieldset {
 473     margin: 0;
 474     padding: 0;
 475     border: none;
 476     box-shadow: none;
 477 }
 478
 479 .panel-title {
 480     width: 100%;
 481     display: block;
 482     line-height: 1;
 483     color: #404040;
 484     font-size: 1.4rem;
 485     padding-bottom: 1rem;
 486     border-bottom: 1px solid #eee;
 487 }
 488
 489 table,
 490 .table {
 491     border-spacing: 0;
 492     border-collapse: collapse;
 493     width: 100%;
 494     border: 1px solid #eee;
 495 }
 496
 497 table > tbody > tr > td, table > tbody > tr > th, table > tfoot > tr > td, table > tfoot > tr > th, table > thead > tr > td, table > thead > tr > th,
 498 .table > .tbody > .tr > .td, .table > .tbody > .tr > .th, .table > .tfoot > .tr > .td, .table > .tfoot > .tr > .th, .table > .thead > .tr > .td, .table > .thead > .tr > .th {
 499     padding: .5rem;
 500     border-top: 1px solid #ddd;
 501     white-space: nowrap;
 502 }
 503
 504 .cbi-section-table-cell {
 505     text-align: center;
 506 }
 507
 508 .cbi-section-table-row {
 509     text-align: center;
 510 }
 511
 512 fieldset > table > tbody > tr:nth-of-type(2n),
 513 fieldset > .table > .tbody > .tr:nth-of-type(2n) {
 514     background-color: #f9f9f9;
 515 }
 516
 517 fieldset > table > tbody > tr:nth-of-type(2n),
 518 fieldset > .table > .tbody > .tr:nth-of-type(2n) {
 519     background-color: #f9f9f9;
 520 }
 521
 522 /* fix progress bar */
 523 #swaptotal > div,
 524 #swapfree > div,
 525 #memfree > div,
 526 #membuff > div,
 527 #conns > div,
 528 #memtotal > div {
 529     width: 100% !important;
 530     height: 1.2rem !important;
 531 }
 532
 533 #swaptotal > div > div,
 534 #swapfree > div > div,
 535 #memfree > div > div,
 536 #membuff > div > div,
 537 #conns > div > div,
 538 #memtotal > div > div {
 539     height: 100% !important;
 540     background-color: #0099CC !important;
 541 }
 542
 543 /* fix multiple table */
 544
 545 table table,
 546 .table .table {
 547     border: none;
 548 }
 549
 550 .cbi-value-field table,
 551 .cbi-value-field .table {
 552     border: none;
 553 }
 554
 555 td > table > tbody > tr > td,
 556 .td > .table > .tbody > .tr > .td {
 557     border: none;
 558 }
 559
 560 .cbi-value-field > table > tbody > tr > td,
 561 .cbi-value-field > .table > .tbody > .tr > .td {
 562     border: none;
 563 }
 564
 565 /* button style */
 566
 567 .btn, .cbi-button {
 568     -webkit-appearance: none;
 569     text-transform: uppercase;
 570     color: rgba(0, 0, 0, 0.87);
 571     background-color: #F0F0F0;
 572     transition: all 0.2s ease-in-out;
 573     display: inline-block;
 574     padding: 0 0.8rem;
 575     border: none;
 576     border-radius: 0.2rem;
 577     cursor: pointer;
 578     -ms-touch-action: manipulation;
 579     touch-action: manipulation;
 580     background-image: none;
 581     text-align: center;
 582     vertical-align: middle;
 583     white-space: nowrap;
 584     -webkit-user-select: none;
 585     -moz-user-select: none;
 586     -ms-user-select: none;
 587     user-select: none;
 588     font-size: 0.8rem;
 589     width: auto !important;
 590     display: inline-block;
 591     text-decoration: none;
 592 }
 593
 594 .btn:hover,
 595 .btn:focus,
 596 .btn:active,
 597 .cbi-button:hover,
 598 .cbi-button:focus,
 599 .cbi-button:active {
 600     color: rgba(0, 0, 0, 0.87);
 601     outline: 0;
 602     text-decoration: none;
 603     color: rgba(0, 0, 0, 0.87);
 604 }
 605
 606 .btn:hover,
 607 .btn:focus,
 608 .cbi-button:hover,
 609 .cbi-button:focus {
 610     box-shadow: 0 0px 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
 611 }
 612
 613 .btn:active,
 614 .cbi-button:active {
 615     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
 616 }
 617
 618 .btn:disabled,
 619 .cbi-button:disabled {
 620     cursor: not-allowed;
 621     pointer-events: none;
 622     opacity: 0.60;
 623     box-shadow: none;
 624 }
 625
 626 .btn + .btn,
 627 form.inline + form.inline,
 628 .cbi-button + .cbi-button {
 629     margin-left: 0.6rem;
 630 }
 631
 632 .cbi-button-reset,
 633 .cbi-input-remove {
 634     color: #fff !important;
 635     background-color: #f0ad4e !important;
 636     border-color: #eea236 !important;
 637 }
 638
 639 .cbi-input-find,
 640 .cbi-input-save,
 641 .cbi-button-add,
 642 .cbi-button-save,
 643 .cbi-button-find,
 644 .cbi-input-reload,
 645 .cbi-button-reload {
 646     color: #fff !important;
 647     background-color: #337ab7 !important;
 648     border-color: #2e6da4 !important;
 649 }
 650
 651 .cbi-input-apply,
 652 .cbi-button-apply,
 653 .cbi-button-edit {
 654     color: #fff !important;
 655     background-color: #5bc0de !important;
 656     border-color: #46b8da !important;
 657 }
 658
 659 .cbi-input-reset,
 660 .cbi-section-remove > .cbi-button,
 661 .cbi-button-remove {
 662     color: #fff !important;
 663     background-color: #d9534f !important;
 664     border-color: #d43f3a !important;
 665 }
 666
 667 .a-to-btn {
 668     text-decoration: none;
 669 }
 670
 671 /* table */
 672
 673 .tabs {
 674     margin: 0 -2rem;
 675     padding-left: 0.5rem;
 676     background-color: #FFFFFF;
 677 }
 678
 679 .cbi-tabmenu > li,
 680 .tabs > li {
 681     display: inline-block;
 682     padding: 0.6rem 0rem;
 683 }
 684
 685 .cbi-tabmenu > li > a,
 686 .tabs > li > a {
 687     text-decoration: none;
 688     color: #404040;
 689     padding: 0.5rem 0.8rem;
 690 }
 691
 692 .tabs > li[class~="active"],
 693 .tabs > li:hover {
 694     cursor: pointer;
 695     border-bottom: 0.2rem solid #0099CC;
 696     color: #0099CC;
 697     margin-bottom: -0.18751rem;
 698 }
 699
 700 .tabs > li[class~="active"] > a {
 701     color: #0099cc;
 702 }
 703
 704 .tabs > li:hover {
 705     border-bottom: 0.18751rem solid #C9C9C9;
 706 }
 707
 708 .cbi-tabmenu {
 709     border-top: 1px solid #D4D4D4;
 710     border-left: 1px solid #D4D4D4;
 711     border-right: 1px solid #D4D4D4;
 712 }
 713
 714 .cbi-tabmenu > li:hover {
 715     background-color: #F1F1F1;
 716 }
 717
 718 .cbi-tabmenu > li[class~="cbi-tab"] {
 719     background-color: white;
 720 }
 721
 722 .cbi-tabmenu {
 723     background-color: #D4D4D4;
 724 }
 725
 726 .cbi-section-remove:nth-of-type(2n),
 727 .cbi-section-node:nth-of-type(2n){
 728     background-color: #f9f9f9;
 729 }
 730
 731 .cbi-section-node-tabbed {
 732     padding: 0;
 733     margin-top: 0;
 734     border-bottom: 1px solid #D4D4D4;
 735     border-left: 1px solid #D4D4D4;
 736     border-right: 1px solid #D4D4D4;
 737 }
 738
 739 .cbi-tabcontainer > .cbi-value:nth-of-type(2n) {
 740     background-color: #f9f9f9;
 741 }
 742
 743 .cbi-value-field,
 744 .cbi-value-description {
 745     display: table-cell;
 746     line-height: 1.25;
 747 }
 748
 749 .cbi-value-helpicon > img {
 750     display: none;
 751 }
 752
 753 .cbi-value-helpicon:before {
 754     content: "\f059";
 755 }
 756
 757 .cbi-value-description {
 758     font-size: small;
 759     opacity: 0.5;
 760     padding: 0.5rem 0 0 0;
 761 }
 762
 763 .cbi-value-title {
 764     word-wrap: break-word;
 765     padding-top: 0.6rem;
 766     width: 23rem;
 767     float: left;
 768     text-align: right;
 769     padding-right: 2rem;
 770     display: table-cell;
 771 }
 772
 773 .cbi-value {
 774     padding: 0.3rem 1rem;
 775     display: inline-block;
 776     width: 100%;
 777 }
 778
 779 .cbi-section-table-descr > .cbi-section-table-cell,
 780 .cbi-section-table-titles > .cbi-section-table-cell {
 781     border: none;
 782 }
 783
 784 .cbi-rowstyle-2 {
 785     background-color: #eee;
 786 }
 787
 788 .cbi-rowstyle-2 .cbi-button-up,
 789 .cbi-rowstyle-2 .cbi-button-down {
 790     background-color: #FFF !important;
 791 }
 792
 793 .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
 794     width: auto !important;
 795 }
 796
 797 /* desc */
 798 .cbi-section-descr,
 799 .cbi-map-descr {
 800     padding: 0.5rem;
 801     color: #999;
 802     font-size: small;
 803 }
 804
 805
 806 .cbi-dropdown {
 807     display: inline-flex;
 808     cursor: pointer;
 809     position: relative;
 810     padding: 0;
 811     height: auto;
 812 }
 813
 814 .cbi-dropdown:focus {
 815     outline: 2px solid #4b6e9b;
 816 }
 817
 818 .cbi-dropdown > ul {
 819     margin: 0 !important;
 820     padding: 0;
 821     list-style: none;
 822     overflow-x: hidden;
 823     overflow-y: auto;
 824     display: flex;
 825     width: 100%;
 826 }
 827
 828 .cbi-dropdown > ul.preview {
 829     display: none;
 830 }
 831
 832 .cbi-dropdown > .open {
 833     border: 2px outset #eee;
 834     flex-basis: 15px;
 835     background: #eee;
 836 }
 837
 838 .cbi-dropdown > .open,
 839 .cbi-dropdown > .more {
 840     flex-grow: 0;
 841     flex-shrink: 0;
 842     display: flex;
 843     flex-direction: column;
 844     justify-content: center;
 845     text-align: center;
 846     line-height: 2em;
 847     padding: 0 .25em;
 848 }
 849
 850 .cbi-dropdown > .more,
 851 .cbi-dropdown > ul > li[placeholder] {
 852     color: #777;
 853     font-weight: bold;
 854     text-shadow: 1px 1px 0px #fff;
 855     display: none;
 856 }
 857
 858 .cbi-dropdown > ul > li {
 859     display: none;
 860     padding: .25em;
 861     white-space: nowrap;
 862     overflow: hidden;
 863     text-overflow: ellipsis;
 864     flex-shrink: 1;
 865     flex-grow: 1;
 866     align-items: center;
 867     align-self: center;
 868     min-height: 20px;
 869 }
 870
 871 .cbi-dropdown > ul > li .hide-open { display: initial; }
 872 .cbi-dropdown > ul > li .hide-close { display: none; }
 873
 874 .cbi-dropdown > ul > li[display]:not([display="0"]) {
 875     border-left: 1px solid #ccc;
 876 }
 877
 878 .cbi-dropdown[empty] > ul {
 879     max-width: 1px;
 880 }
 881
 882 .cbi-dropdown > ul > li > form {
 883     display: none;
 884     margin: 0;
 885     padding: 0;
 886     pointer-events: none;
 887 }
 888
 889 .cbi-dropdown > ul > li img {
 890     vertical-align: middle;
 891     margin-right: .25em;
 892 }
 893
 894 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
 895     margin: 0;
 896     height: auto;
 897 }
 898
 899 .cbi-dropdown > ul > li input[type="text"] {
 900     height: 20px;
 901 }
 902
 903 .cbi-dropdown[open] {
 904     position: relative;
 905 }
 906
 907 .cbi-dropdown[open] > ul.dropdown {
 908     display: block;
 909     background: #f6f6f5;
 910     border: 1px solid #918e8c;
 911     box-shadow: 0 0 4px #918e8c;
 912     position: absolute;
 913     z-index: 1000;
 914     max-width: none;
 915     min-width: 100%;
 916     width: auto;
 917 }
 918
 919 .cbi-dropdown > ul > li[display],
 920 .cbi-dropdown[open] > ul.preview,
 921 .cbi-dropdown[open] > ul.dropdown > li,
 922 .cbi-dropdown[multiple] > ul > li > label,
 923 .cbi-dropdown[multiple][open] > ul.dropdown > li,
 924 .cbi-dropdown[multiple][more] > .more,
 925 .cbi-dropdown[multiple][empty] > .more {
 926     flex-grow: 1;
 927     display: flex;
 928     align-items: center;
 929 }
 930
 931 .cbi-dropdown[empty] > ul > li,
 932 .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
 933 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
 934     display: block;
 935 }
 936
 937 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
 938 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: initial; }
 939
 940 .cbi-dropdown[open] > ul.dropdown > li {
 941     border-bottom: 1px solid #ccc;
 942 }
 943
 944 .cbi-dropdown[open] > ul.dropdown > li[selected] {
 945     background: #b0d0f0;
 946 }
 947
 948 .cbi-dropdown[open] > ul.dropdown > li.focus {
 949     background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
 950 }
 951
 952 .cbi-dropdown[open] > ul.dropdown > li:last-child {
 953     margin-bottom: 0;
 954     border-bottom: none;
 955 }
 956
 957 .cbi-dropdown[disabled] {
 958     pointer-events: none;
 959     opacity: .6;
 960 }
 961
 962 .cbi-dropdown .zonebadge {
 963     width: 100%;
 964 }
 965
 966 .cbi-dropdown[open] .zonebadge {
 967     width: auto;
 968 }
 969
 970
 971 /* luci */
 972
 973 .hidden {
 974     display: none
 975 }
 976
 977 .left {
 978     text-align: left !important;
 979 }
 980
 981 .right {
 982     text-align: right !important;
 983 }
 984
 985 .center {
 986     text-align: center !important;
 987 }
 988
 989 .inline {
 990     display: inline;
 991 }
 992
 993 .cbi-page-actions {
 994     border-top: 1px solid #eee;
 995     padding-top: 1rem;
 996     text-align: right;
 997 }
 998
 999 /* input */
1000 .cbi-value input[type="password"],
1001 .cbi-value input[type="text"] {
1002     min-width: 15rem;
1003 }
1004
1005 /* select */
1006 .cbi-value-field .cbi-dropdown {
1007     min-width: 15rem;
1008 }
1009
1010 .cbi-value-field .cbi-input-select {
1011     width: 15rem;
1012 }
1013
1014 .ifacebadge {
1015     display: inline-flex;
1016     border-bottom: 1px solid #CCCCCC;
1017     padding: 0.5rem 1rem;
1018     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1019     background: #fff;
1020 }
1021
1022 td > .ifacebadge,
1023 .td > .ifacebadge {
1024     background-color: #F0F0F0;
1025     font-size: 0.9rem;
1026 }
1027
1028 .ifacebadge > em,
1029 .ifacebadge > img {
1030     display: inline-block;
1031     margin: 0 .2rem;
1032     align-self: start;
1033 }
1034
1035 .ifacebadge > img + img {
1036     margin: 0 .2rem 0 0;
1037 }
1038
1039 .network-status-table {
1040     display: flex;
1041     flex-wrap: wrap;
1042 }
1043
1044 .network-status-table .ifacebox {
1045     margin: .5em;
1046     flex-grow: 1;
1047 }
1048
1049 .network-status-table .ifacebox-body {
1050     display: flex;
1051     flex-direction: column;
1052     height: 100%;
1053 }
1054
1055 .network-status-table .ifacebox-body > span {
1056     flex: 10;
1057 }
1058
1059 .network-status-table .ifacebox-body > div {
1060     display: flex;
1061     flex-wrap: wrap;
1062 }
1063
1064 .network-status-table .ifacebox-body .ifacebadge {
1065     flex: 1;
1066     margin: .5em .25em 0 .25em;
1067     padding: .5em;
1068     min-width: 220px;
1069     background-color: #fff;
1070     align-items: center;
1071 }
1072
1073 /*textarea*/
1074
1075 .cbi-input-textarea {
1076     width: 100%;
1077     min-height: 14rem;
1078     padding: 0.8rem;
1079     font-size: 0.8rem;
1080     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
1081     color: black;
1082 }
1083
1084 #syslog {
1085     width: 100%;
1086     min-height: 15rem;
1087     padding: 1rem;
1088     font-size: small;
1089     color: #5F5F5F;
1090
1091     margin-bottom: 20px;
1092     border-radius: 0;
1093     background-color: #FFF;
1094     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
1095     border: none;
1096 }
1097
1098 /* change */
1099
1100 .uci-change-list {
1101     font-family: monospace;
1102 }
1103
1104 .uci-change-list ins,
1105 .uci-change-legend-label ins {
1106     text-decoration: none;
1107     border: 1px solid #00FF00;
1108     background-color: #CCFFCC;
1109     display: block;
1110     padding: 2px;
1111 }
1112
1113 .uci-change-list del,
1114 .uci-change-legend-label del {
1115     text-decoration: none;
1116     border: 1px solid #FF0000;
1117     background-color: #FFCCCC;
1118     display: block;
1119     font-style: normal;
1120     padding: 2px;
1121 }
1122
1123 .uci-change-list var,
1124 .uci-change-legend-label var {
1125     text-decoration: none;
1126     border: 1px solid #CCCCCC;
1127     background-color: #EEEEEE;
1128     display: block;
1129     font-style: normal;
1130     padding: 2px;
1131 }
1132
1133 .uci-change-list var ins,
1134 .uci-change-list var del {
1135     border: none;
1136     white-space: pre;
1137     font-style: normal;
1138     padding: 0px;
1139 }
1140
1141 .uci-change-legend {
1142     padding: 5px;
1143 }
1144
1145 .uci-change-legend-label {
1146     width: 150px;
1147     float: left;
1148 }
1149
1150 .uci-change-legend-label > ins,
1151 .uci-change-legend-label > del,
1152 .uci-change-legend-label > var {
1153     float: left;
1154     margin-right: 4px;
1155     width: 10px;
1156     height: 10px;
1157     display: block;
1158 }
1159
1160 .uci-change-legend-label var ins,
1161 .uci-change-legend-label var del {
1162     line-height: 6px;
1163     border: none;
1164 }
1165
1166 .uci-change-list var,
1167 .uci-change-list del,
1168 .uci-change-list ins {
1169     padding: 0.5rem;
1170 }
1171
1172 /* other fix */
1173 #iwsvg,
1174 #iwsvg2,
1175 #bwsvg {
1176     border: 1px solid #D4D4D4 !important;
1177     border-top: none !important;
1178 }
1179
1180 .ifacebox {
1181     border: 1px solid #999;
1182     background-color: #f9f9f9;
1183     display: inline-flex;
1184     flex-direction: column;
1185     line-height: 1.2em;
1186     min-width: 100px;
1187 }
1188
1189 .ifacebox-head {
1190     padding: .25em;
1191     background: #eee;
1192 }
1193
1194 .ifacebox-head.active {
1195     background: #90c0e0;
1196 }
1197
1198 .ifacebox-body {
1199     padding: .25em;
1200 }
1201
1202 .cbi-image-button {
1203     margin-left: 0.5rem;
1204 }
1205
1206 .zonebadge {
1207     padding: 0.2rem 0.5rem;
1208     display: inline-block;
1209     cursor: pointer;
1210 }
1211
1212 .zonebadge > .ifacebadge {
1213     padding: .2rem .3rem;
1214     margin: 0.1rem 0.2rem;
1215     border: 1px solid #6C6C6C;
1216 }
1217
1218 .zonebadge > input[type="text"] {
1219     padding: 0.16rem 1rem;
1220     min-width: 10rem;
1221     margin-top: 0.3rem;
1222 }
1223
1224 .zonebadge > em,
1225 .zonebadge > strong {
1226     margin: 0 0.2rem;
1227     display: inline-block;
1228 }
1229
1230 .cbi-value-field .cbi-input-checkbox,
1231 .cbi-value-field .cbi-input-radio {
1232     margin-top: 0.5rem;
1233     height: 1rem;
1234 }
1235
1236 .cbi-value-field > input + .cbi-value-description {
1237     padding: 0;
1238 }
1239
1240 .cbi-value-field > ul > li {
1241     display: flex;
1242 }
1243
1244 .cbi-value-field > ul > li > label {
1245     margin-top: 0.5rem;
1246 }
1247
1248 .cbi-value-field > ul > li .ifacebadge {
1249     background-color: #eee;
1250     margin-left: 0.4rem;
1251     margin-top: -0.5rem;
1252 }
1253
1254 .cbi-section-table-row > .cbi-value-field .cbi-dropdown {
1255     min-width: 7rem;
1256 }
1257
1258 .cbi-section-table-row > .cbi-value-field .cbi-input-select {
1259     width: 7rem;
1260 }
1261
1262 .cbi-section-create > .cbi-button-add {
1263     margin: 0.5rem;
1264 }
1265
1266 .cbi-section-remove {
1267     padding: 0.5rem;
1268 }
1269
1270 div.cbi-value var, td.cbi-value-field var, .td.cbi-value-field var {
1271     font-style: italic;
1272     color: #0069D6;
1273 }
1274
1275 small {
1276     font-size: 90%;
1277     white-space: normal;
1278     line-height: 1.42857143;
1279 }
1280
1281 .cbi-button-up,
1282 .cbi-button-down {
1283     display: inline-block;
1284     min-width: 0;
1285     padding: 0.2rem 0.3rem;
1286     font-size: 1.2rem;
1287 }
1288
1289 .cbi-optionals {
1290     padding: 1rem 1rem 0 1rem;
1291     border-top: 1px solid #CCC;
1292 }
1293
1294 #diag-rc-output > pre {
1295     background-color: #f5f5f5;
1296     display: block;
1297     padding: 8.5px;
1298     margin: 0 0 18px;
1299     line-height: 1.5rem;
1300     -moz-border-radius: 3px;
1301     white-space: pre-wrap;
1302     word-wrap: break-word;
1303     font-size: 1.4rem;
1304     color: #404040;
1305 }
1306
1307 input[name="ping"],
1308 input[name="traceroute"],
1309 input[name="nslookup"] {
1310     width: 80%;
1311 }
1312
1313 header > .container > .pull-right > * {
1314     position: relative;
1315     top: 0.45rem;
1316     cursor: pointer;
1317 }
1318
1319 #xhr_poll_status > .label.success {
1320     background-color: #14CE14;
1321 }
1322
1323 .label {
1324     padding: 0.3rem 0.8rem;
1325     font-size: 0.8rem;
1326     font-weight: bold;
1327     color: #ffffff !important;
1328     text-transform: uppercase;
1329     white-space: nowrap;
1330     background-color: #bfbfbf;
1331     -webkit-border-radius: 3px;
1332     -moz-border-radius: 3px;
1333     border-radius: 3px;
1334     text-shadow: none;
1335     text-decoration: none;
1336 }
1337
1338 .notice {
1339     background-color: #5BC0DE;
1340 }
1341
1342 .showSide {
1343     display: none;
1344 }
1345
1346 .darkMask {
1347     width: 100%;
1348     height: 100%;
1349     position: fixed;
1350     background-color: rgba(0, 0, 0, 0.56);
1351     content: "";
1352     z-index: 99;
1353     display: none;
1354 }
1355
1356 /* fix Main Login*/
1357 .node-main-login > .main > .main-left {
1358     display: none;
1359 }
1360
1361 .node-main-login > .main > .main-right {
1362     width: 100%;
1363 }
1364
1365 .node-main-login > .main fieldset {
1366     padding: 0.5rem;
1367     margin-bottom: 1rem;
1368     display: inline;
1369     background: none;
1370     border: none;
1371     box-shadow: none;
1372     overflow: hidden;
1373 }
1374
1375 .node-main-login > .main .cbi-value-title {
1376     width: 7rem;
1377 }
1378
1379 .node-main-login > .main #maincontent {
1380
1381     text-align: center;
1382 }
1383
1384 .node-main-login > .main .container {
1385     display: inline-block;
1386     padding: 2rem 4rem;
1387     margin-top: 2rem !important;
1388     background-color: #FFF;
1389     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
1390     text-align: left;
1391 }
1392
1393 .node-main-login > .main form > div:nth-last-child(1) {
1394     float: right;
1395 }
1396
1397 .node-main-login > .main .cbi-value {
1398     display: block;
1399 }
1400
1401 .node-main-login > .main .cbi-value > * {
1402     display: inline-block !important;
1403 }
1404
1405 .node-main-login > .main .cbi-input-user,
1406 .node-main-login > .main .cbi-input-password {
1407     min-width: 15rem;
1408 }
1409
1410 .node-main-login footer {
1411     bottom: 0;
1412     position: absolute;
1413     width: 100%;
1414 }
1415
1416 /* fix status overview */
1417
1418 .node-status-overview > .main fieldset:nth-child(4) .td:nth-child(2) {
1419     white-space: normal;
1420 }
1421
1422 /* fix status processes */
1423
1424 .node-status-processes > .main .table .tr .td:nth-child(3) {
1425     white-space: normal;
1426 }
1427
1428 .node-status-iptables > .main div > .cbi-map > form {
1429     margin: 2rem 2rem 0 0;
1430 }
1431
1432 /* fix system reboot */
1433
1434 .node-system-reboot > .main > .main-right p,
1435 .node-system-reboot > .main > .main-right h3 {
1436     padding-left: 2rem;
1437 }
1438
1439 /* fix Services  Network Shares*/
1440 .node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-title {
1441     margin-bottom: 1rem;
1442     width: auto;
1443 }
1444
1445 .node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-field {
1446     display: list-item;
1447 }
1448
1449 .node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-description {
1450     padding-top: 1rem;
1451 }
1452
1453 /* fix System Software*/
1454 .node-system-packages > .main table tr td:nth-child(1) {
1455     width: auto !important;
1456 }
1457
1458 .node-system-packages > .main table tr td:nth-last-child(1) {
1459     white-space: normal;
1460     font-size: small;
1461     color: #404040;
1462 }
1463
1464 .node-system-packages > .main .cbi-tabmenu > li > a, .tabs > li > a {
1465     padding: 0.5rem 0.8rem;
1466 }
1467
1468 .node-system-packages > .main .cbi-value > pre {
1469     background-color: #eee;
1470     padding: 0.5rem;
1471     overflow: auto;
1472 }
1473
1474 .cbi-tabmenu + .cbi-section {
1475     margin-top: 0;
1476 }
1477
1478 /* fix network firewall*/
1479 .node-network-firewall > .main .cbi-section-table-row > .cbi-value-field .cbi-input-select {
1480     min-width: 4rem;
1481 }
1482
1483 .node-status-iptables fieldset,
1484 .node-system-packages fieldset,
1485 .node-system-flashops fieldset {
1486     margin-top: 0;
1487 }
1488
1489 .node-status-iptables .cbi-tabmenu,
1490 .node-system-packages .cbi-tabmenu,
1491 .node-system-flashops .cbi-tabmenu {
1492     border: none;
1493     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
1494 }
1495
1496 .node-system-flashops form.inline + form.inline {
1497     margin-left: 0;
1498 }
1499
1500 #cbi-firewall-redirect table *,
1501 #cbi-network-switch_vlan table *,
1502 #cbi-firewall-zone table * {
1503     font-size: small;
1504 }
1505
1506 #cbi-firewall-redirect table input[type="text"],
1507 #cbi-network-switch_vlan table input[type="text"],
1508 #cbi-firewall-zone table input[type="text"] {
1509     width: 5rem;
1510 }
1511
1512 #cbi-firewall-redirect table select,
1513 #cbi-network-switch_vlan table select,
1514 #cbi-firewall-zone table select {
1515     min-width: 3.5rem;
1516 }
1517
1518 /* language fix */
1519 body.lang_pl.node-main-login .cbi-value-title {
1520     width: 12rem;
1521 }
1522
1523 @media screen and (max-width: 1600px) {
1524     .main-left {
1525         width: calc(0% + 13rem);
1526     }
1527
1528     .main-right {
1529         width: calc(100% - 13rem);
1530     }
1531
1532     .btn,
1533     .cbi-button {
1534         padding: 0.3rem 0.6rem;
1535         font-size: 0.8rem;
1536     }
1537
1538     header > .container > .pull-right > * {
1539         top: 0.35rem;
1540     }
1541
1542     .label {
1543         padding: 0.2rem 0.6rem;
1544     }
1545
1546     .cbi-value-title {
1547         width: 15rem;
1548         padding-right: 0.6rem;
1549     }
1550
1551     fieldset {
1552         padding: 1rem;
1553     }
1554
1555     .cbi-input-textarea {
1556         font-size: small;
1557     }
1558
1559     .node-status-iptables > .main fieldset li > a {
1560         padding: 0.3rem 0.6rem;
1561     }
1562 }
1563
1564 @media screen and (max-width: 1280px) {
1565     header {
1566         height: 3.5rem;
1567     }
1568
1569     header > .container {
1570         margin-top: 0.25rem;
1571     }
1572
1573     .main {
1574         top: 3.5rem;
1575         height: calc(100% - 3.5rem);
1576     }
1577
1578     .main-left {
1579         width: calc(0% + 13rem);
1580         top: 3.5rem;
1581         height: calc(100% - 3.5rem);
1582     }
1583
1584     .main-right {
1585         width: calc(100% - 13rem);
1586     }
1587
1588     .cbi-tabmenu > li > a, .tabs > li > a {
1589         padding: 0.2rem 0.5rem;
1590     }
1591
1592     .panel-title {
1593         font-size: 1.1rem;
1594         padding-bottom: 1rem;
1595     }
1596
1597     table {
1598         font-size: 0.7rem !important;
1599         width: 100% !important;
1600     }
1601
1602     .main > .main-left > .nav > li,
1603     .main > .main-left > .nav > li a,
1604     .main > .main-left > .nav > .slide > .menu {
1605         font-size: 0.9rem;
1606     }
1607
1608     .main > .main-left > .nav > .slide > .slide-menu > li > a {
1609         font-size: 0.7rem;
1610     }
1611 }
1612
1613 @media screen and (max-width: 992px) {
1614     .main-left {
1615         width: 0;
1616         position: fixed;
1617         z-index: 100;
1618     }
1619
1620     .main-right {
1621         width: 100%;
1622     }
1623
1624     .showSide {
1625         padding: 0.1rem;
1626         margin-right: 0.5rem;
1627         display: inline-block;
1628     }
1629
1630     .showSide:before {
1631         content: "\e20e";
1632         font-size: 1.7rem;
1633     }
1634
1635     .node-main-login .showSide {
1636         display: none !important;
1637     }
1638
1639     .cbi-value-title {
1640         width: 9rem;
1641         padding-right: 1rem;
1642     }
1643
1644     .node-network-diagnostics > .main .cbi-map fieldset > div * {
1645         width: 100% !important;
1646     }
1647
1648     .node-network-diagnostics > .main .cbi-map fieldset > div input[type="text"] {
1649         margin: 3rem 0 0 0 !important;
1650     }
1651
1652     .node-network-diagnostics > .main .cbi-map fieldset > div:nth-child(4) input[type="text"] {
1653         margin: 0 !important;
1654     }
1655
1656     .node-network-diagnostics > .main .cbi-map fieldset > div select,
1657     .node-network-diagnostics > .main .cbi-map fieldset > div input[type="button"] {
1658         margin: 1rem 0 0 0;
1659     }
1660
1661     .node-network-diagnostics > .main .cbi-map fieldset > div {
1662         width: 100% !important;
1663     }
1664
1665     #diag-rc-output > pre {
1666         font-size: 1rem;
1667     }
1668
1669     .node-main-login > .main .cbi-value-title {
1670         text-align: left;
1671     }
1672 }
1673
1674 @media screen and (max-width: 480px) {
1675     body {
1676         font-size: 1rem;
1677     }
1678
1679     fieldset {
1680         padding: 1rem;
1681         margin: 1rem 0 0 0;
1682     }
1683
1684     .tabs {
1685         margin: 0 -1rem;
1686     }
1687
1688     #maincontent > .container {
1689         margin: 0 1rem 1.5rem 1rem;
1690     }
1691
1692     .main > .main-left > .nav > .slide > .menu {
1693         font-size: 1.3rem;
1694     }
1695
1696     .main > .main-left > .nav > .slide > .slide-menu > li > a {
1697         font-size: 1.1rem;
1698     }
1699
1700     .cbi-value-title {
1701         width: 100%;
1702         min-width: 0rem !important;
1703         display: block;
1704         margin-top: 1rem;
1705         margin-bottom: 0.5rem;
1706         text-align: left;
1707     }
1708
1709     .cbi-value-field, .cbi-value-description {
1710         width: 100%;
1711     }
1712
1713     .cbi-value > .cbi-value-field {
1714         display: inline-block;
1715     }
1716
1717     .cbi-tabmenu > li, .tabs > li {
1718         padding: 0.6rem 0rem;
1719     }
1720
1721     .cbi-tabmenu > li > a, .tabs > li > a {
1722         padding: 0.2rem 0.3rem;
1723         font-size: 0.9rem;
1724     }
1725
1726     .cbi-page-actions > div > input {
1727         display: none;
1728     }
1729
1730     .node-main-login > .main .container {
1731         padding: 0.5rem 1rem 2rem 1rem;
1732     }
1733
1734     .node-main-login > .main .cbi-value {
1735         padding: 0;
1736     }
1737
1738     .node-main-login > .main form > div:nth-last-child(1) {
1739         margin-top: 2rem;
1740     }
1741
1742     .node-main-login > .main .cbi-value-title {
1743         width: 100% !important;
1744         font-size: 1.2rem;
1745     }
1746
1747     .node-main-login > .main fieldset {
1748         margin: 0;
1749         padding: 0.5rem;
1750     }
1751
1752     h2 {
1753         font-size: 2rem;
1754     }
1755
1756     .tabs > li > a {
1757         font-size: 0.9rem;
1758     }
1759
1760     select,
1761     input {
1762         font-size: 0.9rem;
1763     }
1764
1765     .mobile-hide {
1766         display: none;
1767     }
1768
1769     .panel-title {
1770         font-size: 1.4rem;
1771         padding-bottom: 1rem;
1772     }
1773
1774     .node-system-packages > .main .cbi-value.cbi-value-last > div {
1775         width: 100% !important;
1776     }
1777
1778     .node-system-packages > .main .cbi-value .cbi-value-field input {
1779         width: 100%;
1780     }
1781
1782     .node-status-iptables > .main div > .cbi-map > form {
1783         position: static !important;
1784         margin: 0 0 2rem 0;
1785         padding: 2rem;
1786         border: 0;
1787         font-weight: normal;
1788         font-style: normal;
1789         line-height: 1;
1790         font-family: inherit;
1791         min-width: inherit;
1792         border-radius: 0;
1793         background-color: #FFF;
1794         box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
1795         -webkit-overflow-scrolling: touch;
1796     }
1797
1798     .node-status-iptables > .main div > .cbi-map > form input[type="submit"] {
1799         width: 100% !important;
1800         margin: 0;
1801     }
1802
1803     .node-status-iptables > .main div > .cbi-map > form input[type="submit"] + input[type="submit"] {
1804         margin-top: 1rem;
1805     }
1806 }
1807
1808 @media screen and (min-width: 992px) {
1809     .cbi-value input[type="password"],
1810     .cbi-value input[type="text"],
1811     .cbi-value-field .cbi-input-select {
1812         width: 20rem;
1813     }
1814
1815     .cbi-value-field .cbi-dropdown {
1816         min-width: 20rem;
1817     }
1818 }
1819
1820 @media screen and (min-width: 1280px) {
1821     .cbi-value input[type="password"],
1822     .cbi-value input[type="text"],
1823     .cbi-value-field .cbi-input-select {
1824         width: 22rem;
1825     }
1826
1827     .cbi-value-field .cbi-dropdown {
1828         min-width: 22rem;
1829     }
1830 }
1831
1832 @media screen and (min-width: 1600px) {
1833     .cbi-value input[type="password"],
1834     .cbi-value input[type="text"],
1835     .cbi-value-field .cbi-input-select {
1836         width: 25rem;
1837     }
1838
1839     .cbi-value-field .cbi-dropdown {
1840         min-width: 25rem;
1841     }
1842 }