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