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