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