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