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