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
 161 header {
 162         display: none;
 163         height: 3rem;
 164         z-index: 1000;
 165 }
 166
 167 header .container {
 168     padding: 0 0.5rem;
 169 }
 170
 171 select {
 172         padding: .36rem .8rem;
 173         color: #555;
 174         border: thin solid #ccc;
 175         background-color: #fff;
 176         background-image: none;
 177 }
 178
 179 pre {
 180         overflow: auto;
 181 }
 182
 183 code {
 184         font-size: 1rem;
 185         font-size-adjust: .35;
 186         padding: 1px 3px;
 187         color: #101010;
 188         border: thin solid #999;
 189         border-radius: 2px;
 190         background: #ddd;
 191 }
 192
 193 abbr {
 194         cursor: help;
 195         text-decoration: underline;
 196         color: #005470;
 197 }
 198
 199 hr {
 200         margin: 1rem 0;
 201         opacity: .1;
 202         border-color: #eee;
 203 }
 204
 205 textarea {
 206         resize: none;
 207         border-radius: 20px;
 208 }
 209
 210 .pull-right {
 211         float: right;
 212 }
 213
 214 .pull-left {
 215         float: left;
 216 }
 217
 218 .nowrap:not(.td) {
 219         white-space: nowrap;
 220 }
 221
 222 [disabled="disabled"] {
 223         pointer-events: none;
 224 }
 225
 226 #xhr_poll_status {
 227         display: flex;
 228 }
 229
 230 .danger {
 231         background-color: #f794b0 !important;
 232 }
 233
 234 .warning {
 235         background-color: #f0e68c !important;
 236 }
 237
 238 .success {
 239         background-color: #f24c7c !important;
 240 }
 241
 242 .notice {
 243         background-color: #468ea4 !important;
 244 }
 245
 246 .error {
 247         color: #f00;
 248 }
 249
 250 ul {
 251         line-height: normal;
 252 }
 253
 254 li {
 255         list-style-type: none;
 256 }
 257
 258 h1 {
 259         font-size: 2rem;
 260         padding-bottom: 10px;
 261         border-bottom: thin solid #eee;
 262 }
 263
 264 h2 {
 265         font-size: 1.8rem;
 266         margin: 2rem 0 0 0;
 267         padding-bottom: 10px;
 268         color: #354057;
 269 }
 270
 271 h3 {
 272         font-size: 1.4rem;
 273         margin: 2rem 0 0 0;
 274         padding-bottom: 10px;
 275 }
 276
 277 h4 {
 278         font-size: 1.2rem;
 279         margin: 2rem 0 0 0;
 280         padding-bottom: 10px;
 281 }
 282
 283 h5 {
 284         font-size: 1rem;
 285         margin: 2rem 0 0 0;
 286         padding-bottom: 10px;
 287 }
 288
 289 .cbi-section,
 290 .cbi-section-error,
 291 #cbi-network > .cbi-section-node,
 292 #cbi-wireless > .cbi-section-node,
 293 #cbi-wireless > #wifi_assoclist_table,
 294 [data-page^="admin-system-admin"]:not(.login) .cbi-map:not(#cbi-dropbear),
 295 [data-page="admin-system-opkg"] #maincontent > .container {
 296         font-family: inherit;
 297         font-weight: normal;
 298         font-style: normal;
 299         line-height: normal;
 300         min-width: inherit;
 301         margin: 1rem 0 0 0;
 302         padding: 2rem;
 303         border-radius: 20px;
 304         background-color: #fff;
 305 }
 306
 307 fieldset {
 308         border: none;
 309 }
 310
 311 .cbi-map-descr + fieldset {
 312         margin-top: 1rem;
 313         border: none;
 314 }
 315
 316 .cbi-section > legend {
 317         display: none !important;
 318 }
 319
 320 fieldset > fieldset,
 321 .cbi-section > .cbi-section {
 322         margin: 0;
 323         padding: 0;
 324         border: 0;
 325         box-shadow: none;
 326 }
 327
 328 .cbi-section > h3:first-child,
 329 .panel-title {
 330         font-size: 1.4rem;
 331         line-height: 1;
 332         display: block;
 333         width: 100%;
 334         margin: 0;
 335         margin-bottom: .5rem;
 336         color: #354057;
 337 }
 338
 339 /* btn 按钮 */
 340 .cbi-button-up,
 341 .cbi-button-down,
 342 .cbi-value-helpicon,
 343 .showSide {
 344         font-family: "icomoon" !important;
 345         font-weight: normal;
 346         font-style: normal;
 347         font-variant: normal;
 348         line-height: 1;
 349         text-transform: none;
 350         -webkit-font-smoothing: antialiased;
 351         speak: none;
 352 }
 353
 354 * {
 355         box-sizing: border-box;
 356         margin: 0;
 357         padding: 0;
 358 }
 359
 360 .btn,
 361 button,
 362 select,
 363 input,
 364 .cbi-dropdown {
 365         height: 1.8rem;
 366         padding: 0;
 367         color: rgba(0, 0, 0, .87);
 368         border: 0;
 369         border-bottom: 2px solid rgba(0, 0, 0, .26);
 370         border-radius: 0;
 371         outline: 0;
 372         background-color: transparent;
 373         background-image: none;
 374         box-shadow: none;
 375         vertical-align: bottom;
 376 }
 377
 378 select,
 379 .cbi-dropdown {
 380         width: inherit;
 381 }
 382
 383 select:not([multiple="multiple"]):focus,
 384 input:not(.cbi-button):focus,
 385 .cbi-dropdown:focus,
 386 .cbi-dynlist > .item:focus {
 387         border-color: #09c;
 388 }
 389
 390 select[multiple="multiple"] {
 391         height: auto;
 392 }
 393
 394 /* footer 尾部 */
 395 footer {
 396         font-size: .8rem;
 397         overflow: hidden;
 398         padding: 1rem;
 399         text-align: right;
 400         color: #aaa;
 401         width: 100%;
 402         float: right;
 403 }
 404
 405 footer > a {
 406         text-decoration: none;
 407         color: #aaa;
 408 }
 409
 410 /* Main interface 主界面 */
 411 .loading {
 412         position: fixed;
 413         z-index: 3000;
 414         top: 0;
 415         display: block;
 416         width: 100%;
 417         height: 100%;
 418         pointer-events: none;
 419         background-color: #354057;
 420 }
 421
 422 .loading > span {
 423         font-family: monospace;
 424         font-size: 2.0rem;
 425         font-size-adjust: .35;
 426         position: relative;
 427         top: 12.5%;
 428         display: block;
 429         text-align: center;
 430         color: #888;
 431 }
 432
 433 .loading > span > .loading-img {
 434         font-family: "icomoon" !important;
 435         font-size: 1.0rem;
 436         display: inline-block;
 437         margin-right: 1rem;
 438         animation: anim-rotate 2s infinite linear;
 439         vertical-align: middle;
 440 }
 441
 442 @keyframes anim-rotate {
 443         0% {
 444                 -webkit-transform: rotate(0);
 445                 -ms-transform: rotate(0);
 446                 transform: rotate(0);
 447         }
 448
 449         100% {
 450                 -webkit-transform: rotate(360deg);
 451                 -ms-transform: rotate(360deg);
 452                 transform: rotate(360deg);
 453         }
 454 }
 455
 456 .Processes #maincontent > .container {
 457         margin-right: 0;
 458 }
 459
 460 /* Main interface left 左主界面 */
 461 .main-left {
 462         position: fixed;
 463         top: 10px;
 464         bottom: 10px;
 465         left: 10px;
 466         width: 15%;
 467         border-radius: 20px;
 468         background-color: #7f8ba5;
 469         z-index: 2000;
 470         min-width: 210px;
 471 }
 472
 473 .main-left .nav-container {
 474         position: absolute;
 475         top: 10px;
 476         left: 10px;
 477         bottom: 10px;
 478         background-color: #354057;
 479         width: 100%;
 480         border-radius: 20px;
 481 }
 482
 483 .main-left .nav-container .navbar-container {
 484         position: absolute;
 485         overflow: hidden;
 486         bottom: 10px;
 487         top: 82px;
 488         width: 100%;
 489         height: calc(100% - 92px);
 490 }
 491
 492 .main-left .nav-container .brand {
 493         color: #fff;
 494         text-decoration: none;
 495         font-size: 18px;
 496         display: block;
 497         text-align: center;
 498         padding: 36px 0 24px;
 499         border-bottom: 1px solid #fff;
 500         margin: 0 15px;
 501 }
 502
 503 .main-left .nav {
 504         margin-top: .5rem;
 505 }
 506
 507 .main-left .nav > li {
 508         padding: .5rem 1rem;
 509         cursor: pointer;
 510 }
 511
 512 .main-left .nav > li a {
 513         display: block;
 514         color: #fff;
 515 }
 516
 517 .main-left .nav > .slide {
 518         padding: 0;
 519 }
 520
 521 .main-left .nav > .slide > ul {
 522         display: none;
 523 }
 524
 525 .main-left .nav > .slide > .menu {
 526         font-size: 1.15rem;
 527         display: block;
 528         padding: .5rem 1rem;
 529         text-decoration: none;
 530         color: #fff;
 531         width: 90%;
 532         border-radius: 0 25px 25px 0;
 533 }
 534
 535 .main-left .nav > .slide > .menu.active {
 536         background: #485267;
 537 }
 538
 539 .main-left .nav > li:hover,
 540 .main-left .nav > .slide > .menu:hover,
 541 .main-left .nav > .slide > .slide-menu > li:hover {
 542         background: #485267;
 543 }
 544
 545 .main-left .nav > .slide:hover {
 546         background: none;
 547 }
 548
 549 .main-left .nav > .slide > .slide-menu > li {
 550         margin: 5px 0;
 551         padding: 10px 2rem;
 552         width: 90%;
 553         border-radius: 0 25px 25px 0;
 554 }
 555
 556 .main-left .nav > .slide > .slide-menu > .active {
 557         background-color: #f24c7c !important;
 558         width: 80%;
 559         border-radius: 0 25px 25px 0;
 560 }
 561
 562 .main-left .nav > .slide > .slide-menu > li > a {
 563         white-space: nowrap;
 564         text-decoration: none;
 565 }
 566
 567 .main-left .nav > .slide > .slide-menu > .active > a {
 568         color: #fff;
 569 }
 570
 571 .main-left .nav > .slide > .slide-menu > .active:hover {
 572         cursor: hand;
 573 }
 574
 575 /* Main interface right 右主界面 */
 576 .main-right .container .alert,
 577 .main-right .container .alert-message {
 578         margin-top: 1rem;
 579 }
 580
 581 .main-right .container .alert-message {
 582         padding: 1rem;
 583         margin-top: 1rem;
 584         border-radius: 20px;
 585         background-color: #fff !important;
 586 }
 587
 588 .main-right .container .alert-message h4 {
 589         margin-top: 1rem;
 590         background: url(./no-pwd.png) no-repeat left 1px / 28px;
 591     padding: 7px 0 0 32px;
 592 }
 593
 594 .main-right .container .alert-message .btn {
 595         margin-top: .8rem;
 596         padding: 7px 6px;
 597         background-color: #468ea4;
 598         border-radius: 20px;
 599         color: #fff;
 600 }
 601
 602 /* table 表格 */
 603 table {
 604         border-spacing: 0;
 605         border-collapse: collapse;
 606 }
 607
 608 table,
 609 .table {
 610         overflow: hidden;
 611         width: 100%;
 612         border: 1px solid #ddd;
 613         border-radius: 10px;
 614 }
 615
 616 table > tbody > tr > td,
 617 table > tbody > tr > th,
 618 table > tfoot > tr > td,
 619 table > tfoot > tr > th,
 620 table > thead > tr > td,
 621 table > thead > tr > th,
 622 .table > .tbody > .tr > .td,
 623 .table > .tbody > .tr > .th,
 624 .table > .tfoot > .tr > .td,
 625 .table > .tfoot > .tr > .th,
 626 .table > .thead > .tr > .td,
 627 .table > .thead > .tr > .th,
 628 .table > .tr > .td.cbi-value-field,
 629 .table > .tr > .th.cbi-section-table-cell {
 630         padding: .5rem;
 631 }
 632
 633 .container > .cbi-section:first-of-type > .table[width="100%"] > .tr > .td {
 634         padding: .6rem;
 635 }
 636
 637 .cbi-section-table-cell {
 638         line-height: 1.1;
 639         align-self: flex-end;
 640         flex: 1 1 auto;
 641 }
 642
 643 tr > td,
 644 tr > th,
 645 .tr > .td,
 646 .tr > .th,
 647 .cbi-section-table-row::before,
 648 #cbi-wireless > #wifi_assoclist_table > .tr:nth-child(2) {
 649         border-top: thin solid #ddd;
 650 }
 651
 652 tr:first-child > td .tr:first-child > .td,
 653 #cbi-wireless .td,
 654 #cbi-network .tr:first-child > .td,
 655 .table[width="100%"] > .tr:first-child > .td,
 656 [data-page="admin-network-diagnostics"] .tr > .td,
 657 .tr.table-titles > .th,
 658 .tr.cbi-section-table-titles > .th {
 659         border-top: 0 !important;
 660 }
 661
 662 .cbi-section-table-row {
 663         margin-bottom: 1rem;
 664         text-align: center !important;
 665         background: #f4f4f4;
 666 }
 667
 668 .cbi-section-table-row:last-child {
 669         margin-bottom: 0;
 670 }
 671
 672 .cbi-section-table-row > .cbi-value-field .cbi-input-select,
 673 .cbi-section-table-row > .cbi-value-field .cbi-input-text,
 674 .cbi-section-table-row > .cbi-value-field .cbi-input-password,
 675 .cbi-section-table-row > .cbi-value-field .cbi-dropdown {
 676         width: 100%;
 677 }
 678
 679 .cbi-section-table-row > .cbi-value-field [data-dynlist] > input,
 680 .cbi-section-table-row > .cbi-value-field input.cbi-input-password {
 681         width: calc(100% - 1.5rem);
 682 }
 683
 684 .cbi-section-table-row .td {
 685         text-align: center !important;
 686 }
 687
 688 div > table > tbody > tr:nth-of-type(2n),
 689 div > .table > .tr:nth-of-type(2n) {
 690         background-color: #f9f9f9;
 691 }
 692
 693 /* fix multiple table */
 694 table table,
 695 .table .table {
 696         border: 0;
 697 }
 698
 699 .cbi-value-field table,
 700 .cbi-value-field .table {
 701         border: 0;
 702 }
 703
 704 td > table > tbody > tr > td,
 705 .td > .table > .tbody > .tr > .td {
 706         border: 0;
 707 }
 708
 709 .cbi-value-field > table > tbody > tr > td,
 710 .cbi-value-field > .table > .tbody > .tr > .td {
 711         border: 0;
 712 }
 713
 714 /* button style */
 715 .btn,
 716 .cbi-button,
 717 .item::after {
 718         font-size: .8rem;
 719         display: inline-block;
 720         width: auto !important;
 721         padding: 0 .8rem;
 722         cursor: pointer;
 723         -webkit-user-select: none;
 724         -moz-user-select: none;
 725         -ms-user-select: none;
 726         user-select: none;
 727         transition: all .2s ease-in-out;
 728         text-align: center;
 729         vertical-align: middle;
 730         white-space: nowrap;
 731         text-decoration: none;
 732         color: rgba(0, 0, 0, .87);
 733         border: 0;
 734         border-radius: 20px;
 735         background-color: #f0f0f0;
 736         background-image: none;
 737         -webkit-appearance: none;
 738         -ms-touch-action: manipulation;
 739         touch-action: manipulation;
 740 }
 741
 742 .cbi-button:not(select) {
 743         -webkit-appearance: none !important;
 744 }
 745
 746 form[method="post"] + form[method="post"],
 747 .cbi-button + .cbi-button {
 748         margin-left: .6rem;
 749 }
 750
 751 .btn:hover,
 752 .btn:focus,
 753 .btn:active,
 754 .cbi-button:hover,
 755 .cbi-button:focus,
 756 .cbi-button:active,
 757 .item:hover::after,
 758 .item:focus::after,
 759 .item:active::after,
 760 .cbi-page-actions .cbi-button-apply + .cbi-button-save:hover,
 761 .cbi-page-actions .cbi-button-apply + .cbi-button-save:focus,
 762 .cbi-page-actions .cbi-button-apply + .cbi-button-save:active {
 763         text-decoration: none;
 764         outline: 0;
 765 }
 766
 767 .btn:disabled,
 768 .cbi-button:disabled {
 769         cursor: not-allowed;
 770         pointer-events: none;
 771         opacity: .5;
 772         box-shadow: none;
 773 }
 774
 775 /* gray */
 776 .modal div[class="btn"],
 777 .cbi-button-find,
 778 .cbi-button-link,
 779 .cbi-button-up,
 780 .cbi-button-down,
 781 .cbi-button-neutral,
 782 .cbi-button[name="zero"],
 783 .cbi-button[name="restart"],
 784 .cbi-button[onclick="hide_empty(this)"] {
 785     border: 1px solid;
 786 }
 787
 788 /* dark blue */
 789 .btn.primary,
 790 .cbi-page-actions .cbi-button-save,
 791 .cbi-page-actions .cbi-button-apply + .cbi-button-save,
 792 .cbi-button-add,
 793 .cbi-button-save,
 794 .cbi-button-positive,
 795 .cbi-button-link,
 796 .cbi-button[value="Enable"],
 797 .cbi-button[value="Scan"],
 798 .cbi-button[value^="Back"],
 799 .cbi-button-neutral[onclick="handleConfig(event)"] {
 800         font-weight: normal;
 801         color: #2e6da4;
 802         border: thin solid #2e6da4;
 803         background-color: transparent;
 804 }
 805
 806 /* light blue */
 807 .cbi-page-actions .cbi-button-apply,
 808 .cbi-section-actions .cbi-button-edit,
 809 .cbi-button-edit,
 810 .cbi-button-apply,
 811 .cbi-button-reload,
 812 .cbi-button-action,
 813 .cbi-button[value="Submit"],
 814 .cbi-button[value$="Apply"],
 815 .cbi-button[onclick="addKey(event)"] {
 816     font-weight: normal;
 817     color: #fff;
 818     border: 1px solid #468ea4;
 819     background-color: #468ea4;
 820 }
 821
 822 /* red */
 823 .btn.danger,
 824 .cbi-section-remove > .cbi-button,
 825 .cbi-button-remove,
 826 .cbi-button-reset,
 827 .cbi-button-negative,
 828 .cbi-button[value="Stop"],
 829 .cbi-button[value="Kill"],
 830 .cbi-button[onclick="reboot(this)"],
 831 .cbi-button-neutral[value="Restart"] {
 832         padding: 5px .8rem;
 833     font-weight: 100;
 834     color: #f24b7c;
 835     background-color: transparent;
 836     border: 1px solid #f24b7c;
 837 }
 838
 839 /* yellow */
 840 .btn[value="Dismiss"],
 841 .cbi-button[value="Terminate"],
 842 .cbi-button[value="Reset"],
 843 .cbi-button[value="Disabled"],
 844 .cbi-button[onclick^="iface_reconnect"],
 845 .cbi-button[onclick="handleReset(event)"],
 846 .cbi-button-neutral[value="Disable"] {
 847         font-weight: normal;
 848         color: #9a4569;
 849         border: 1px solid #9a4569;
 850         background-color: transparent;
 851 }
 852
 853 /* green */
 854 .cbi-button-success,
 855 .cbi-button-download,
 856 .cbi-button[name="backup"],
 857 .cbi-button[value="Upload"],
 858 .cbi-button[value="Save mtdblock"] {
 859     font-weight: normal;
 860     color: #468ea4;
 861     border: thin solid #468ea4;
 862     background-color: transparent;
 863 }
 864
 865 .cbi-page-actions .cbi-button-link:first-child {
 866         float: left;
 867 }
 868
 869 .a-to-btn {
 870         text-decoration: none;
 871 }
 872
 873 .cbi-value-field .cbi-button-add {
 874         padding: 1px 6px;
 875 }
 876
 877 .cbi-value-field .cbi-button-neutral {
 878         padding: 1px 8px;
 879 }
 880
 881 /* tabs & menu 选项卡 & 菜单栏 */
 882 .tabs {
 883         margin-top: 1rem;
 884         background-color: #fff;
 885         border-radius: 20px;
 886 }
 887
 888 .tabs > li {
 889     margin-right: .8rem;
 890         padding: 6px 10px;
 891     position: relative;
 892     display: inline-block;
 893     text-align: center;
 894 }
 895
 896 .tabs > li a {
 897     color: #468EA4;
 898         font-size: 14px;
 899         text-decoration: none;
 900         position: relative;
 901         z-index: 1;
 902 }
 903 .tabs > li::after {
 904     content: '';
 905     background-color: #cccccc82;
 906     position: absolute;
 907     width: 0;
 908     height: 100%;
 909     bottom: 0;
 910     border-radius: 20px;
 911     left: 50%;
 912     transform: translateX(-50%);
 913 }
 914
 915 .tabs > li:hover::after {
 916     transition: width .35s;
 917     width: calc(100% + 4px);
 918 }
 919
 920 .tabs > li.active::after {
 921     width: calc(100% + 4px);
 922     background-color: #468ea473;
 923 }
 924
 925 .cbi-tabmenu > li {
 926         display: inline-block;
 927         padding: .6rem 0;
 928 }
 929
 930 .cbi-tabmenu > li > a {
 931         padding: .5rem .8rem;
 932         text-decoration: none;
 933         color: #404040;
 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 #modal_overlay .alert-message.warning {
1459         background-color:  #fff !important;
1460         margin-bottom: 10px;
1461 }
1462
1463 body.modal-overlay-active #modal_overlay {
1464         right: 0;
1465         left: 0;
1466         opacity: 1;
1467 }
1468
1469 .spinning {
1470         position: relative;
1471         padding-left: 32px !important;
1472 }
1473
1474 .spinning::before {
1475         position: absolute;
1476         top: 0;
1477         bottom: 0;
1478         left: .2em;
1479         width: 32px;
1480         content: " ";
1481         background: url(../resources/icons/loading.gif) no-repeat center;
1482         background-size: 16px;
1483 }
1484
1485 /* luci */
1486 .hidden {
1487         display: none;
1488 }
1489
1490 .left,
1491 .left::before {
1492         text-align: left !important;
1493 }
1494
1495 .right,
1496 .right::before {
1497         text-align: right !important;
1498 }
1499
1500 .center,
1501 .center::before {
1502         text-align: center !important;
1503 }
1504
1505 .top {
1506         align-self: flex-start !important;
1507         vertical-align: top !important;
1508 }
1509
1510 .bottom {
1511         align-self: flex-end !important;
1512         vertical-align: bottom !important;
1513 }
1514
1515 .inline {
1516         display: inline;
1517 }
1518
1519 .cbi-page-actions {
1520         padding-top: 1rem;
1521         text-align: right;
1522 }
1523
1524 .cbi-page-actions > form[method="post"] {
1525         display: inline-block;
1526 }
1527
1528 /* input */
1529 .cbi-value input[type="password"],
1530 .cbi-value input[type="text"] {
1531         min-width: 15rem;
1532 }
1533
1534 /* select */
1535 .cbi-value-field .cbi-dropdown,
1536 .cbi-value-field .cbi-input-select {
1537         min-width: 15rem;
1538 }
1539
1540 .cbi-value-field .cbi-input-invalid {
1541         color: #f00;
1542         border-bottom-color: #f00;
1543 }
1544
1545 /* progressbar */
1546 .cbi-progressbar {
1547         position: relative;
1548         min-width: 170px;
1549         height: 20px;
1550         margin: 4px 0;
1551         background: #a9cad4;
1552         color: #fff;
1553         border-radius: 20px;
1554         overflow: hidden;
1555 }
1556
1557 .cbi-progressbar > div {
1558         width: 0;
1559         height: 100%;
1560         background: #468ea4;
1561         border-radius: 20px;
1562 }
1563
1564 .cbi-progressbar::after {
1565         font-family: monospace;
1566         font-size: 10px;
1567         font-size-adjust: .38;
1568         line-height: normal;
1569         position: absolute;
1570         top: 50%;
1571         right: 0;
1572         bottom: 2px;
1573         left: 0;
1574         content: attr(title);
1575         text-align: center;
1576         white-space: pre;
1577         transform: translateY(-50%);
1578 }
1579
1580 .th[data-type="button"],
1581 .td[data-type="button"],
1582 .th[data-type="fvalue"],
1583 .td[data-type="fvalue"] {
1584         flex: 1 1 2em;
1585         text-align: center;
1586 }
1587
1588 .ifacebadge {
1589         display: inline-flex;
1590         padding: .5rem .8rem;
1591         background: #eee;
1592         border-radius: 20px;
1593 }
1594
1595 td > .ifacebadge,
1596 .td > .ifacebadge {
1597         font-size: .8rem;
1598         background-color: #d4d4d4;
1599         border-radius: 20px;
1600 }
1601
1602 .ifacebadge > em,
1603 .ifacebadge > img {
1604         display: inline-block;
1605         align-self: flex-start;
1606         margin: 0 .2rem;
1607 }
1608
1609 .ifacebadge > img + img {
1610         margin: 0 .2rem 0 0;
1611 }
1612
1613 .network-status-table {
1614         display: flex;
1615         flex-wrap: wrap;
1616 }
1617
1618 .network-status-table .ifacebox {
1619         flex-grow: 1;
1620         margin: .5em;
1621         border-radius: 20px;
1622         overflow: hidden;
1623 }
1624
1625 .network-status-table .ifacebox-body {
1626         display: flex;
1627         flex-direction: column;
1628         height: 100%;
1629         background: #f5f5f5;
1630 }
1631
1632 .network-status-table .ifacebox-body > span {
1633         flex: 10 10 auto;
1634         font-size: 12px;
1635 }
1636
1637 .network-status-table .ifacebox-body > div {
1638         display: flex;
1639         flex-wrap: wrap;
1640 }
1641
1642 .network-status-table .ifacebox-body .ifacebadge {
1643         align-items: center;
1644         flex: 1 1 auto;
1645         min-width: 220px;
1646         margin: .5em .25em 0 .25em;
1647         padding: .5em;
1648         background-color: #fff;
1649         border-radius: 20px;
1650 }
1651
1652 /* textarea */
1653 .cbi-input-textarea {
1654         font-family: monospace;
1655         width: 100%;
1656         min-height: 14rem;
1657         padding: .8rem;
1658         color: #000;
1659 }
1660
1661 #syslog {
1662         font-size: small;
1663         width: 100%;
1664         min-height: 15rem;
1665         margin-bottom: 20px;
1666         padding: 1rem;
1667         resize: none;
1668         color: #333;
1669         border: 0;
1670         border-radius: 20px;
1671         background-color: #fff;
1672 }
1673
1674 #syslog:focus {
1675         outline: 0;
1676 }
1677
1678 /* config changes */
1679 .uci-change-list {
1680         font-family: monospace;
1681 }
1682
1683 .uci-change-list ins,
1684 .uci-change-legend-label ins {
1685         display: block;
1686         padding: 2px;
1687         text-decoration: none;
1688         border: thin solid #0f0;
1689         background-color: #cfc;
1690 }
1691
1692 .uci-change-list del,
1693 .uci-change-legend-label del {
1694         font-style: normal;
1695         display: block;
1696         padding: 2px;
1697         text-decoration: none;
1698         border: thin solid #f00;
1699         background-color: #fcc;
1700 }
1701
1702 .uci-change-list var,
1703 .uci-change-legend-label var {
1704         font-style: normal;
1705         display: block;
1706         padding: 2px;
1707         text-decoration: none;
1708         border: thin solid #ccc;
1709         background-color: #eee;
1710 }
1711
1712 .uci-change-list var ins,
1713 .uci-change-list var del {
1714         font-style: normal;
1715         padding: 0;
1716         white-space: pre;
1717         border: 0;
1718 }
1719
1720 .uci-change-legend {
1721         padding: 5px;
1722 }
1723
1724 .uci-change-legend-label {
1725         float: left;
1726         width: 150px;
1727 }
1728
1729 .uci-change-legend-label > ins,
1730 .uci-change-legend-label > del,
1731 .uci-change-legend-label > var {
1732         display: block;
1733         float: left;
1734         width: 10px;
1735         height: 10px;
1736         margin-right: 4px;
1737 }
1738
1739 .uci-change-legend-label var ins,
1740 .uci-change-legend-label var del {
1741         line-height: .4;
1742         border: 0;
1743 }
1744
1745 .uci-change-list var,
1746 .uci-change-list del,
1747 .uci-change-list ins {
1748         padding: .5rem;
1749 }
1750
1751 /* other fix */
1752 #iwsvg,
1753 #iwsvg2,
1754 #bwsvg {
1755         border: 1px solid #d4d4d4 !important;
1756         border-radius: 20px;
1757 }
1758
1759 .lang_enTraffic #bwsvg,
1760 .lang_enWireless #iwsvg {
1761         border: 1px solid #d4d4d4 !important;
1762         border-radius: 0 0 20px 20px;
1763 }
1764
1765 #iwsvg,
1766 [data-page="admin-status-realtime-bandwidth"] #bwsvg {
1767         border-top: 0 !important;
1768 }
1769
1770 .ifacebox {
1771         line-height: 1.25;
1772         display: inline-flex;
1773         flex-direction: column;
1774         min-width: 100px;
1775         background-color: #f9f9f9;
1776         border-radius: 10px;
1777 }
1778
1779 .ifacebox-head {
1780         padding: .5em;
1781         background: #eee;
1782         color: #333;
1783         font-size: 14px;
1784         border-radius: 10px 10px 0 0;
1785 }
1786
1787 strong {
1788         font-weight: 100;
1789 }
1790
1791 .ifacebox-head.active {
1792         background: #5bc0de;
1793 }
1794
1795 .ifacebox-body {
1796         padding: .8em;
1797         border-radius: 0 0 10px 10px;
1798 }
1799
1800 .cbi-image-button {
1801         margin-left: .5rem;
1802 }
1803
1804 .zonebadge {
1805         display: inline-block;
1806         padding: .2rem .5rem;
1807         border-radius: 20px;
1808 }
1809
1810 .zonebadge .ifacebadge {
1811         margin: .1rem .2rem;
1812         padding: .2rem .3rem;
1813         border: thin solid #6c6c6c;
1814         height: 26px;
1815 }
1816
1817 .zonebadge > input[type="text"] {
1818         min-width: 10rem;
1819         margin-top: .3rem;
1820         padding: .16rem 1rem;
1821 }
1822
1823 .zonebadge > em,
1824 .zonebadge > strong {
1825         display: inline-block;
1826         margin: 0 .2rem;
1827 }
1828
1829 .cbi-value-field .cbi-input-checkbox,
1830 .cbi-value-field .cbi-input-radio {
1831         margin-top: .15rem;
1832 }
1833
1834 .cbi-value-field > ul > li {
1835         display: flex;
1836 }
1837
1838 .cbi-value-field > ul > li > label {
1839         margin-top: .5rem;
1840 }
1841
1842 .cbi-value-field > ul > li .ifacebadge {
1843         margin-top: -.5rem;
1844         margin-left: .4rem;
1845         background-color: #eee;
1846 }
1847
1848 .cbi-section-table-row > .cbi-value-field .cbi-dropdown {
1849         min-width: 7rem;
1850 }
1851
1852 .cbi-section-create {
1853         display: inline-flex;
1854         align-items: center;
1855         margin: .5rem -3px;
1856 }
1857
1858 .cbi-section-create > * {
1859         margin: .5rem;
1860 }
1861
1862 .cbi-section-remove {
1863         padding: .5rem;
1864 }
1865
1866 div.cbi-value var,
1867 td.cbi-value-field var,
1868 .td.cbi-value-field var {
1869         font-style: italic;
1870         color: #0069d6;
1871 }
1872
1873 small {
1874         font-size: 90%;
1875         line-height: 1.42857143;
1876         white-space: normal;
1877 }
1878
1879 .cbi-button-up,
1880 .cbi-button-down {
1881         font-size: 1.2rem;
1882         display: inline-block;
1883         min-width: 0;
1884         padding: .2rem .3rem;
1885 }
1886
1887 .cbi-optionals {
1888         padding: 1rem 1rem 0 1rem;
1889         border-top: thin solid #ccc;
1890 }
1891
1892 .cbi-dropdown-container {
1893         position: relative;
1894 }
1895
1896 .cbi-tooltip-container,
1897 span[data-tooltip],
1898 span[data-tooltip] .label {
1899         cursor: help !important;
1900 }
1901
1902 .cbi-tooltip {
1903         position: absolute;
1904         z-index: 1000;
1905         left: -1000px;
1906         padding: 2px 5px;
1907         transition: opacity .25s ease-out;
1908         white-space: pre;
1909         pointer-events: none;
1910         opacity: 0;
1911         border-radius: 3px;
1912         background: #fff;
1913 }
1914
1915 .cbi-tooltip-container:hover .cbi-tooltip {
1916         left: auto;
1917         transition: opacity .25s ease-in;
1918         opacity: 1;
1919         height: 38px;
1920 }
1921
1922 .zonebadge .cbi-tooltip {
1923         margin: -1.5rem 0 0 -.5rem;
1924         padding: .25rem;
1925         background: inherit;
1926 }
1927
1928 .zonebadge-empty {
1929         color: #404040;
1930         background: repeating-linear-gradient(
1931                 45deg,
1932                 rgba(204, 204, 204, .5),
1933                 rgba(204, 204, 204, .5) 5px,
1934                 rgba(255, 255, 255, .5) 5px,
1935                 rgba(255, 255, 255, .5) 10px
1936         );
1937 }
1938
1939 .zone-forwards {
1940         display: flex;
1941         min-width: 10rem;
1942 }
1943
1944 .zone-forwards > * {
1945         flex: 1 1 45%;
1946 }
1947
1948 .zone-forwards > span {
1949         flex-basis: 10%;
1950         padding: 0 .25rem;
1951         text-align: center;
1952 }
1953
1954 .zone-forwards .zone-src,
1955 .zone-forwards .zone-dest {
1956         display: flex;
1957         flex-direction: column;
1958 }
1959
1960 .label {
1961         font-size: .8rem;
1962         padding: .3rem .8rem;
1963         white-space: nowrap;
1964         text-decoration: none;
1965         color: #fff !important;
1966         -moz-border-radius: 3px;
1967         border-radius: 20px;
1968         background-color: #bfbfbf;
1969 }
1970
1971 label > input[type="checkbox"],
1972 label > input[type="radio"] {
1973         position: relative;
1974         top: .4rem;
1975         right: .2rem;
1976         margin: 0;
1977         vertical-align: bottom;
1978 }
1979
1980 .showSide {
1981         display: none;
1982 }
1983
1984 .darkMask {
1985         position: fixed;
1986         z-index: 99;
1987         display: none;
1988         width: 100%;
1989         height: 100%;
1990         content: "";
1991         background-color: rgba(0, 0, 0, .56);
1992 }
1993
1994 /* diagnostics */
1995 #diag-rc-output > pre,
1996 #command-rc-output > pre {
1997         font-size: 1.2rem;
1998         font-size-adjust: .35;
1999         line-height: normal;
2000         display: block;
2001         width: 100%;
2002         padding: 8.5px;
2003         white-space: pre;
2004         color: #eee;
2005         background-color: #101010;
2006 }
2007
2008 [data-page="admin-network-diagnostics"] .table {
2009         box-shadow: none;
2010 }
2011
2012 input[name="ping"],
2013 input[name="traceroute"],
2014 input[name="nslookup"] {
2015         width: 80%;
2016 }
2017
2018 /* fix Main Login 登录界面*/
2019 .login .main-right {
2020         background: url(./loginBG.png) no-repeat center center / cover;
2021         text-align: center;
2022 }
2023
2024 .login header {
2025         margin-top: 10px;
2026 }
2027
2028 .login > .main {
2029         position: relative;
2030         height: 100%;
2031 }
2032
2033 .login > .main .main-left {
2034         display: none;
2035 }
2036
2037 .login .brand {
2038         display: block;
2039         color: #fff;
2040         font-size: 24px;
2041         text-decoration: none;
2042 }
2043
2044 .login > .main .cbi-value-title {
2045         display: none;
2046 }
2047
2048 .login > .main #maincontent {
2049         margin-top: 5rem;
2050         padding-bottom: 20px;
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     height: 24px;
2142     width: 24px;
2143     display: inline-block;
2144     background: url(./op-eye.png) no-repeat center center / cover;
2145     position: absolute;
2146     top: 8px;
2147     right: 12px;
2148 }
2149
2150 .login > .main .cbi-value-last .cbi-value-field.op-eye > div {
2151     background-image: url(./cl-eye.png);
2152 }
2153
2154 .login > .main .cbi-value .cbi-input-text {
2155         margin: 0 0 16px;
2156         padding-left: 36px;
2157         width: 100%;
2158     height: 42px;
2159     border: 1px solid #556270;
2160         border-radius: 20px;
2161         background: #fff no-repeat 11px center / 19px;
2162 }
2163
2164 .login > .main .cbi-value .cbi-input-text {
2165         background-image: url(./user.png);
2166 }
2167
2168 .login > .main .cbi-value-last .cbi-input-text {
2169         background-image: url(./pwd.png);
2170 }
2171
2172 .login .cbi-section {
2173         padding: 0;
2174         box-shadow: none;
2175         background-color: transparent;
2176 }
2177
2178 .login .cbi-page-actions .cbi-button-apply,
2179 .login .cbi-button-apply {
2180     border: 1px solid #f24b7c;
2181     background-color: #f24b7c;
2182 }
2183
2184 .login .cbi-button[value="Reset"] {
2185     color: #fff;
2186     border: 1px solid #9a4569;
2187     background-color: #9a4569;
2188 }
2189
2190 .login footer {
2191         padding: 0;
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         display: block;
2211         position: fixed;
2212         top: 1rem;
2213         right: 1rem;
2214         border: 1px solid #ddd;
2215         background-color: #fff;
2216         border-radius: 20px;
2217         width: calc(85% - 20px - 2rem);
2218 }
2219
2220 .logged-in .main {
2221         overflow: hidden;
2222 }
2223
2224 .logged-in header .container {
2225         height: 100%;
2226 }
2227
2228 .logged-in header .container .btn-con {
2229         height: 3rem;
2230         line-height: 3rem;
2231 }
2232
2233 .logged-in header .container .btn-con #xhr_poll_status {
2234         display: inline-block;
2235 }
2236
2237 .logged-in header .container .btn-con .logout {
2238         background-color: #354057;
2239 }
2240
2241 .logged-in header .container .btn-con .logout a {
2242         color: #fff;
2243         text-decoration: none;
2244 }
2245
2246 .logged-in .logoImg,
2247 .login-info .logoImg {
2248         display: none;
2249 }
2250
2251 .logged-in .main-right {
2252         float: right;
2253         width: 84%;
2254         height: 100%;
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         display: table;
2445 }
2446
2447 #cbi-network-switch_vlan #vlan_table {
2448         overflow-x: auto;
2449 }
2450
2451 #cbi-firewall-zone .td.cbi-section-actions {
2452         width: 100%;
2453 }
2454
2455 /* applyreboot fix */
2456 #applyreboot-container {
2457         margin: 2rem;
2458 }
2459
2460 #applyreboot-section {
2461         line-height: 300%;
2462         margin: 2rem;
2463 }
2464
2465 /* openvpn bug fix */
2466 .OpenVPN a {
2467         line-height: initial !important;
2468 }
2469
2470 /* custom commands */
2471 .commandbox {
2472         width: 24% !important;
2473         padding: .5rem 1rem;
2474         border-bottom: thin solid #ccc;
2475         background: #eee;
2476 }
2477
2478 .commandbox h3 {
2479         line-height: normal !important;
2480         overflow: hidden;
2481         margin: 6px 0 !important;
2482         white-space: nowrap;
2483         text-overflow: ellipsis;
2484 }
2485
2486 .commandbox div {
2487         left: auto !important;
2488 }
2489
2490 .commandbox code {
2491         position: absolute;
2492         overflow-x: hidden;
2493         overflow-y: auto;
2494         max-width: 60%;
2495         max-height: 55px;
2496         margin-top: -3px;
2497         margin-left: 4px;
2498         padding: 2px 3px;
2499         text-overflow: ellipsis;
2500 }
2501
2502 .commandbox p:first-of-type {
2503         margin-top: -6px;
2504 }
2505
2506 .commandbox p:nth-of-type(2) {
2507         margin-top: 2px;
2508 }
2509
2510 [data-page^="admin-system-commands"] .panel-title,
2511 [data-page^="command-cfg"] .mobile-hide,
2512 [data-page^="command-cfg"] header .container > #logo {
2513         display: none;
2514 }
2515
2516 .PC-hide {
2517         display: none;
2518 }
2519
2520 @media screen and (max-width: 1600px) {
2521         header .container > #logo {
2522                 margin: 0 2.5rem 0 .5rem;
2523         }
2524
2525         .cbi-dynlist > .item {
2526                 max-width: 21.9rem;
2527         }
2528
2529         .btn:not(button),
2530         .cbi-button {
2531                 font-size: .8rem;
2532                 padding: .3rem .6rem;
2533         }
2534
2535         .label {
2536                 padding: .2rem .6rem;
2537         }
2538
2539         .cbi-value-title {
2540                 width: 15rem;
2541                 padding-right: .6rem;
2542         }
2543
2544         fieldset,
2545         .cbi-section {
2546                 padding: 1rem;
2547         }
2548
2549         .cbi-input-textarea {
2550                 font-size: small;
2551         }
2552
2553         .node-admin-status > .main fieldset li > a {
2554                 padding: .3rem .6rem;
2555         }
2556
2557         #cbi-firewall-zone > .table {
2558                 display: block;
2559         }
2560 }
2561
2562 @media screen and (max-width: 1400px) {
2563         .logged-in header {
2564                 width: calc(100% - 230px - 2rem);
2565         }
2566         .logged-in .main-right {
2567                 width: calc(100% - 230px);
2568         }
2569
2570         .cbi-dynlist > .item {
2571                 max-width: 19.9rem;
2572         }
2573
2574         .cbi-tabmenu > li > a,
2575         .tabs > li > a {
2576                 padding: .2rem .5rem;
2577         }
2578
2579         .panel-title {
2580                 font-size: 1.1rem;
2581                 padding-bottom: 1rem;
2582         }
2583
2584         table {
2585                 font-size: .7rem !important;
2586                 width: 100% !important;
2587         }
2588
2589         .table .cbi-input-text {
2590                 width: 100%;
2591         }
2592
2593         .main .main-left > .nav > li,
2594         .main .main-left > .nav > li a,
2595         .main .main-left > .nav > .slide > .menu {
2596                 font-size: .9rem;
2597         }
2598
2599         .main .main-left > .nav > .slide > .slide-menu > li > a {
2600                 font-size: .7rem;
2601         }
2602
2603         #modal_overlay {
2604                 top: 3.5rem;
2605         }
2606
2607         [data-page="admin-network-firewall-forwards"] .table:not(.cbi-section-table) {
2608                 display: block;
2609         }
2610
2611         [data-page="admin-network-firewall-forwards"] .table:not(.cbi-section-table),
2612         [data-page="admin-network-firewall-rules"] .table:not(.cbi-section-table),
2613         [data-page="admin-network-hosts"] .table {
2614                 overflow-y: visible;
2615         }
2616
2617         .commandbox {
2618                 width: 32% !important;
2619         }
2620 }
2621
2622 @media screen and (max-width: 992px) {
2623         .login .main-right {
2624                 background: #354057;
2625         }
2626
2627         .login > .main #maincontent {
2628                 width: 90%;
2629         }
2630
2631         .logged-in header {
2632                 width: calc(100% - 2rem);
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: 0;
2646                 bottom: 0;
2647                 left: 0;
2648                 right: 0;
2649                 border-radius: 0;
2650                 background-color: rgba(0, 0, 0, .3);
2651         }
2652
2653         .logged-in .main-left .nav-container {
2654                 top: 0;
2655                 left: 0;
2656                 width: 50%;
2657                 border-radius: 0;
2658                 bottom: 0;
2659                 height: 100%;
2660         }
2661
2662         .logged-in .main-left .nav-container .navbar-container {
2663                 overflow-y: scroll;
2664         }
2665
2666         .logged-in .main-right {
2667                 width: 100%;
2668         }
2669
2670         [data-page^="command-cfg"] header .container > .brand {
2671                 display: block;
2672                 margin-top: -1.75rem;
2673         }
2674
2675         .cbi-dynlist > .item {
2676                 max-width: 14.9rem;
2677         }
2678
2679         .showSide {
2680                 display: inline-block;
2681                 cursor: pointer;
2682                 width: 30px;
2683         }
2684
2685         .showSide::before {
2686                 content: '';
2687                 display: inline-block;
2688                 height: 24px;
2689                 width: 30px;
2690                 background: url(./menu-logo.png) no-repeat center center / 100%;
2691                 vertical-align: middle;
2692         }
2693
2694         .login > .main .cbi-value-title {
2695                 text-align: left;
2696         }
2697
2698         .cbi-value-title {
2699                 width: 9rem;
2700                 padding-right: 1rem;
2701         }
2702
2703         #diag-rc-output > pre,
2704         #command-rc-output > pre {
2705                 font-size: 1rem;
2706         }
2707
2708         .table {
2709                 display: block;
2710         }
2711
2712         #packages.table {
2713                 display: grid;
2714         }
2715
2716         .tr {
2717                 display: flex;
2718                 flex-direction: row;
2719                 flex-wrap: wrap;
2720         }
2721
2722         .Overview .table[width="100%"] > .tr {
2723                 flex-wrap: nowrap;
2724         }
2725
2726         .tr.placeholder {
2727                 border-bottom: thin solid #ddd;
2728         }
2729
2730         .tr.placeholder > .td,
2731         #cbi-firewall .tr > .td,
2732         #iptables .tr:nth-child(2) > .td,
2733         #cbi-network .tr:nth-child(2) > .td,
2734         .cbi-section #wifi_assoclist_table .tr > .td {
2735                 border-top: 0;
2736         }
2737
2738         .th,
2739         .td {
2740                 display: inline-block;
2741                 align-self: flex-start;
2742                 flex: 2 2 25%;
2743                 text-overflow: ellipsis;
2744                 word-wrap: break-word;
2745         }
2746
2747         .td select,
2748         .td input[type="text"] {
2749                 width: 100%;
2750                 word-wrap: normal;
2751         }
2752
2753         .td [data-dynlist] > input,
2754         .td input.cbi-input-password {
2755                 width: calc(100% - 1.5rem);
2756         }
2757
2758         .td[data-type="button"],
2759         .td[data-type="fvalue"] {
2760                 flex: 1 1 12.5%;
2761                 text-align: left;
2762         }
2763
2764         .th.cbi-value-field,
2765         .td.cbi-value-field,
2766         .th.cbi-section-table-cell,
2767         .td.cbi-section-table-cell {
2768                 flex-basis: auto;
2769                 padding-top: 1rem;
2770         }
2771
2772         .cbi-section-table-row {
2773                 display: flex;
2774                 flex-direction: row;
2775                 flex-wrap: wrap;
2776                 justify-content: space-between;
2777         }
2778
2779         .td.cbi-value-field,
2780         .cbi-section-table-cell {
2781                 display: inline-block;
2782                 flex: 10 10 auto;
2783                 flex-basis: 50%;
2784                 text-align: center;
2785         }
2786
2787         .td.cbi-section-actions {
2788                 vertical-align: bottom;
2789         }
2790
2791         .tr.table-titles,
2792         .tr.cbi-section-table-titles,
2793         .tr.cbi-section-table-descr {
2794                 display: none;
2795         }
2796
2797         .tr[data-title]::before,
2798         .tr.cbi-section-table-titles.named::before {
2799                 font-size: .9rem;
2800                 display: block;
2801                 flex: 1 1 100%;
2802                 border-bottom: thin solid rgba(0, 0, 0, .26);
2803                 background: #90c0e0;
2804         }
2805
2806         .td[data-title],
2807         [data-page^="admin-status-realtime"] .td[id] {
2808                 text-align: left;
2809         }
2810
2811         .td[data-title]::before {
2812                 display: block;
2813         }
2814
2815         .cbi-button + .cbi-button {
2816                 margin-left: 0;
2817         }
2818
2819         .td.cbi-section-actions > * > *,
2820         .td.cbi-section-actions > * > form > * {
2821                 margin: 2.1px 3px;
2822         }
2823
2824         .Firewall form {
2825                 font-family: inherit;
2826                 font-weight: normal;
2827                 font-style: normal;
2828                 line-height: normal;
2829                 position: static !important;
2830                 min-width: inherit;
2831                 margin: 0 0 2rem 0;
2832                 padding: 2rem;
2833                 border: 0;
2834                 border-radius: 0;
2835                 background-color: #fff;
2836         }
2837
2838         .Firewall form input {
2839                 width: 100% !important;
2840                 margin: 0;
2841                 margin-top: 1rem;
2842         }
2843
2844         .Firewall .center,
2845         .Firewall .center::before {
2846                 text-align: left !important;
2847         }
2848
2849         .commandbox {
2850                 width: 100% !important;
2851         }
2852
2853         /* The scroll bar of the navigation bar is compatible with each browser. */
2854         /* Google */
2855         .logged-in .main-left .navbar-container::-webkit-scrollbar {
2856                 width: 6px;
2857                 background: transparent;
2858         }
2859
2860         .logged-in .main-left .navbar-container::-webkit-scrollbar-button {
2861                 display: none;
2862         }
2863
2864         .logged-in .main-left .navbar-container::-webkit-scrollbar-thumb {
2865                 background-color: #ffffff61;
2866                 border-radius: 10px;
2867         }
2868
2869         .logged-in .main-left .navbar-container::-webkit-scrollbar-thumb {
2870                 background-color: #839dd67a;
2871                 border-radius: 10px;
2872         }
2873
2874         .logged-in .main-left .navbar-container:hover::-webkit-scrollbar-thumb {
2875                 background-color: #839dd67a;
2876         }
2877
2878         /* IE */
2879         .logged-in .main-left .navbar-container {
2880                 scrollbar-track-color: transparent;
2881                 scrollbar-face-color: #839dd67a;
2882                 scrollbar-arrow-color: transparent;
2883                 scrollbar-3dlight-color: transparent;
2884                 scrollbar-highlight-color: transparent;
2885                 scrollbar-shadow-color: transparent;
2886                 scrollbar-darkshadow-color: transparent;
2887                 scrollbar-base-color: transparent;
2888         }
2889
2890         .logged-in .main-left .navbar-container:hover {
2891                 scrollbar-face-color: #839dd67a;
2892         }
2893 }
2894
2895 @media screen and (max-width: 600px) {
2896         body {
2897                 font-size: .8rem;
2898         }
2899
2900         .cbi-progressbar::after {
2901                 font-size: .95em;
2902                 line-height: 1.5;
2903         }
2904
2905         fieldset,
2906         .cbi-section {
2907                 margin: 1rem 0 0 0;
2908                 padding: 1rem;
2909         }
2910
2911         .tabs {
2912                 margin: 0 -1rem;
2913         }
2914
2915         .main-left .nav-container {
2916                 width: 70%;
2917         }
2918
2919         .main .main-left > .nav > .slide > .menu {
2920                 font-size: 1.2rem;
2921         }
2922
2923         .main .main-left > .nav > .slide > .slide-menu > li > a {
2924                 font-size: 1rem;
2925         }
2926
2927         .cbi-value-title {
2928                 display: block;
2929                 width: 100%;
2930                 min-width: 0 !important;
2931                 margin-top: 1rem;
2932                 margin-bottom: .5rem;
2933                 text-align: left;
2934         }
2935
2936         .cbi-value-field,
2937         .cbi-value-description {
2938                 width: 100%;
2939         }
2940
2941         .cbi-value > .cbi-value-field {
2942                 display: inline-block;
2943         }
2944
2945         .cbi-tabmenu > li,
2946         .tabs > li {
2947                 padding: .6rem 0;
2948         }
2949
2950         .cbi-tabmenu > li > a,
2951         .tabs > li > a {
2952                 font-size: .9rem;
2953                 padding: .2rem .3rem;
2954         }
2955
2956         .cbi-page-actions > div > input {
2957                 display: none;
2958         }
2959
2960         .cbi-page-actions > .cbi-button {
2961                 margin-top: .2rem;
2962         }
2963
2964         .login > .main .cbi-value {
2965                 padding: 0;
2966         }
2967
2968         .login > .main form > div:nth-last-child(1) {
2969                 margin-top: 2rem;
2970         }
2971
2972         .login > .main .cbi-value-title {
2973                 font-size: 1.2rem;
2974                 width: 100% !important;
2975         }
2976
2977         .login > .main fieldset {
2978                 margin: 0;
2979                 padding: .5rem;
2980         }
2981
2982         .commandbox p:first-of-type {
2983                 margin-top: -8px;
2984         }
2985
2986         #diag-rc-output > pre,
2987         #command-rc-output > pre {
2988                 font-size: .8rem;
2989         }
2990
2991         h2 {
2992                 font-size: 2rem;
2993         }
2994
2995         .tabs > li > a {
2996                 font-size: .9rem;
2997         }
2998
2999         select,
3000         input {
3001                 font-size: .9rem;
3002         }
3003
3004         code {
3005                 font-size: .8rem;
3006         }
3007
3008         .panel-title {
3009                 font-size: 1.4rem;
3010                 padding-bottom: 1rem;
3011         }
3012
3013         .node-system-packages > .main .cbi-value.cbi-value-last > div {
3014                 width: 100% !important;
3015         }
3016
3017         .node-system-packages > .main .cbi-value .cbi-value-field input {
3018                 width: 100%;
3019         }
3020
3021         .th,
3022         .td {
3023                 flex-basis: 50%;
3024         }
3025
3026         .td.cbi-value-field {
3027                 flex-basis: 100%;
3028         }
3029
3030         .td.cbi-value-field[data-type="button"],
3031         .td.cbi-value-field[data-type="fvalue"] {
3032                 flex-basis: 25%;
3033                 text-align: left;
3034         }
3035
3036         .tr[data-title]::before,
3037         .tr.cbi-section-table-titles.named::before {
3038                 font-size: 1rem;
3039         }
3040
3041         td > .ifacebadge,
3042         .td > .ifacebadge {
3043                 font-size: .62rem;
3044         }
3045
3046         #cbi-wireless .td {
3047                 overflow: hidden;
3048         }
3049
3050         .hide-sm,
3051         .hide-xs:not([data-title="MAC-Address"]) {
3052                 display: none;
3053         }
3054
3055         .mobile-hide {
3056                 display: none;
3057         }
3058 }
3059
3060 @media screen and (min-width: 1152px) {
3061         .cbi-value input[type="password"],
3062         .cbi-value input[type="text"] {
3063                 min-width: 20rem;
3064         }
3065
3066         .cbi-value-field .cbi-input-select {
3067                 width: 20rem;
3068         }
3069
3070         .cbi-value-field .cbi-dropdown {
3071                 min-width: 20rem;
3072         }
3073
3074         .cbi-section-node .tr {
3075                 overflow: hidden;
3076         }
3077 }
3078
3079 @media screen and (min-width: 1366px) {
3080         .cbi-value input[type="password"],
3081         .cbi-value input[type="text"] {
3082                 min-width: 22rem;
3083         }
3084
3085         .cbi-value-field .cbi-input-select {
3086                 width: 22rem;
3087         }
3088
3089         .cbi-value-field .cbi-dropdown {
3090                 min-width: 22rem;
3091         }
3092 }
3093
3094 @media screen and (min-width: 1600px) {
3095         .cbi-value input[type="password"],
3096         .cbi-value input[type="text"] {
3097                 min-width: 25rem;
3098         }
3099
3100         .cbi-value-field .cbi-input-select {
3101                 width: 25rem;
3102         }
3103
3104         .cbi-value-field .cbi-dropdown {
3105                 min-width: 25rem;
3106         }
3107 }