themes/luci-theme-rosy/htdocs/luci-static/rosy/cascade.css

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