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