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