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         height: 100%;
1636 }
1637
1638 .network-status-table .ifacebox-body > div {
1639         display: flex;
1640         flex-wrap: wrap;
1641 }
1642
1643 .network-status-table .ifacebox-body .ifacebadge {
1644         align-items: center;
1645         flex: 1 1 auto;
1646         min-width: 220px;
1647         margin: .5em .25em 0 .25em;
1648         padding: .5em;
1649         background-color: #fff;
1650         border-radius: 20px;
1651 }
1652
1653 /* textarea */
1654 .cbi-input-textarea {
1655         font-family: monospace;
1656         width: 100%;
1657         min-height: 14rem;
1658         padding: .8rem;
1659         color: #000;
1660 }
1661
1662 #syslog {
1663         font-size: small;
1664         width: 100%;
1665         min-height: 15rem;
1666         margin-bottom: 20px;
1667         padding: 1rem;
1668         resize: none;
1669         color: #333;
1670         border: 0;
1671         border-radius: 20px;
1672         background-color: #fff;
1673 }
1674
1675 #syslog:focus {
1676         outline: 0;
1677 }
1678
1679 /* config changes */
1680 .uci-change-list {
1681         font-family: monospace;
1682 }
1683
1684 .uci-change-list ins,
1685 .uci-change-legend-label ins {
1686         display: block;
1687         padding: 2px;
1688         text-decoration: none;
1689         border: thin solid #0f0;
1690         background-color: #cfc;
1691 }
1692
1693 .uci-change-list del,
1694 .uci-change-legend-label del {
1695         font-style: normal;
1696         display: block;
1697         padding: 2px;
1698         text-decoration: none;
1699         border: thin solid #f00;
1700         background-color: #fcc;
1701 }
1702
1703 .uci-change-list var,
1704 .uci-change-legend-label var {
1705         font-style: normal;
1706         display: block;
1707         padding: 2px;
1708         text-decoration: none;
1709         border: thin solid #ccc;
1710         background-color: #eee;
1711 }
1712
1713 .uci-change-list var ins,
1714 .uci-change-list var del {
1715         font-style: normal;
1716         padding: 0;
1717         white-space: pre;
1718         border: 0;
1719 }
1720
1721 .uci-change-legend {
1722         padding: 5px;
1723 }
1724
1725 .uci-change-legend-label {
1726         float: left;
1727         width: 150px;
1728 }
1729
1730 .uci-change-legend-label > ins,
1731 .uci-change-legend-label > del,
1732 .uci-change-legend-label > var {
1733         display: block;
1734         float: left;
1735         width: 10px;
1736         height: 10px;
1737         margin-right: 4px;
1738 }
1739
1740 .uci-change-legend-label var ins,
1741 .uci-change-legend-label var del {
1742         line-height: .4;
1743         border: 0;
1744 }
1745
1746 .uci-change-list var,
1747 .uci-change-list del,
1748 .uci-change-list ins {
1749         padding: .5rem;
1750 }
1751
1752 /* other fix */
1753 #iwsvg,
1754 #iwsvg2,
1755 #bwsvg {
1756         border: 1px solid #d4d4d4 !important;
1757         border-radius: 20px;
1758 }
1759
1760 .lang_enTraffic #bwsvg,
1761 .lang_enWireless #iwsvg {
1762         border: 1px solid #d4d4d4 !important;
1763         border-radius: 0 0 20px 20px;
1764 }
1765
1766 #iwsvg,
1767 [data-page="admin-status-realtime-bandwidth"] #bwsvg {
1768         border-top: 0 !important;
1769 }
1770
1771 .ifacebox {
1772         line-height: 1.25;
1773         display: inline-flex;
1774         flex-direction: column;
1775         min-width: 100px;
1776         background-color: #f9f9f9;
1777         border-radius: 10px;
1778 }
1779
1780 .ifacebox-head {
1781         padding: .5em;
1782         background: #eee;
1783         color: #333;
1784         font-size: 14px;
1785         border-radius: 10px 10px 0 0;
1786 }
1787
1788 strong {
1789         font-weight: 100;
1790 }
1791
1792 .ifacebox-head.active {
1793         background: #5bc0de;
1794 }
1795
1796 .ifacebox-body {
1797         padding: .8em;
1798         border-radius: 0 0 10px 10px;
1799 }
1800
1801 .cbi-image-button {
1802         margin-left: .5rem;
1803 }
1804
1805 .zonebadge {
1806         display: inline-block;
1807         padding: .2rem .5rem;
1808         border-radius: 20px;
1809 }
1810
1811 .zonebadge .ifacebadge {
1812         margin: .1rem .2rem;
1813         padding: .2rem .3rem;
1814         border: thin solid #6c6c6c;
1815         height: 26px;
1816 }
1817
1818 .zonebadge > input[type="text"] {
1819         min-width: 10rem;
1820         margin-top: .3rem;
1821         padding: .16rem 1rem;
1822 }
1823
1824 .zonebadge > em,
1825 .zonebadge > strong {
1826         display: inline-block;
1827         margin: 0 .2rem;
1828 }
1829
1830 .cbi-value-field .cbi-input-checkbox,
1831 .cbi-value-field .cbi-input-radio {
1832         margin-top: .15rem;
1833 }
1834
1835 .cbi-value-field > ul > li {
1836         display: flex;
1837 }
1838
1839 .cbi-value-field > ul > li > label {
1840         margin-top: .5rem;
1841 }
1842
1843 .cbi-value-field > ul > li .ifacebadge {
1844         margin-top: -.5rem;
1845         margin-left: .4rem;
1846         background-color: #eee;
1847 }
1848
1849 .cbi-section-table-row > .cbi-value-field .cbi-dropdown {
1850         min-width: 7rem;
1851 }
1852
1853 .cbi-section-create {
1854         display: inline-flex;
1855         align-items: center;
1856         margin: .5rem -3px;
1857 }
1858
1859 .cbi-section-create > * {
1860         margin: .5rem;
1861 }
1862
1863 .cbi-section-remove {
1864         padding: .5rem;
1865 }
1866
1867 div.cbi-value var,
1868 td.cbi-value-field var,
1869 .td.cbi-value-field var {
1870         font-style: italic;
1871         color: #0069d6;
1872 }
1873
1874 small {
1875         font-size: 90%;
1876         line-height: 1.42857143;
1877         white-space: normal;
1878 }
1879
1880 .cbi-button-up,
1881 .cbi-button-down {
1882         font-size: 1.2rem;
1883         display: inline-block;
1884         min-width: 0;
1885         padding: .2rem .3rem;
1886 }
1887
1888 .cbi-optionals {
1889         padding: 1rem 1rem 0 1rem;
1890         border-top: thin solid #ccc;
1891 }
1892
1893 .cbi-dropdown-container {
1894         position: relative;
1895 }
1896
1897 .cbi-tooltip-container,
1898 span[data-tooltip],
1899 span[data-tooltip] .label {
1900         cursor: help !important;
1901 }
1902
1903 .cbi-tooltip {
1904         position: absolute;
1905         z-index: 1000;
1906         left: -1000px;
1907         padding: 2px 5px;
1908         transition: opacity .25s ease-out;
1909         white-space: pre;
1910         pointer-events: none;
1911         opacity: 0;
1912         border-radius: 3px;
1913         background: #fff;
1914 }
1915
1916 .cbi-tooltip-container:hover .cbi-tooltip {
1917         left: auto;
1918         transition: opacity .25s ease-in;
1919         opacity: 1;
1920         height: 38px;
1921 }
1922
1923 .zonebadge .cbi-tooltip {
1924         margin: -1.5rem 0 0 -.5rem;
1925         padding: .25rem;
1926         background: inherit;
1927 }
1928
1929 .zonebadge-empty {
1930         color: #404040;
1931         background: repeating-linear-gradient(
1932                 45deg,
1933                 rgba(204, 204, 204, .5),
1934                 rgba(204, 204, 204, .5) 5px,
1935                 rgba(255, 255, 255, .5) 5px,
1936                 rgba(255, 255, 255, .5) 10px
1937         );
1938 }
1939
1940 .zone-forwards {
1941         display: flex;
1942         min-width: 10rem;
1943 }
1944
1945 .zone-forwards > * {
1946         flex: 1 1 45%;
1947 }
1948
1949 .zone-forwards > span {
1950         flex-basis: 10%;
1951         padding: 0 .25rem;
1952         text-align: center;
1953 }
1954
1955 .zone-forwards .zone-src,
1956 .zone-forwards .zone-dest {
1957         display: flex;
1958         flex-direction: column;
1959 }
1960
1961 .label {
1962         font-size: .8rem;
1963         padding: .3rem .8rem;
1964         white-space: nowrap;
1965         text-decoration: none;
1966         color: #fff !important;
1967         -moz-border-radius: 3px;
1968         border-radius: 20px;
1969         background-color: #bfbfbf;
1970 }
1971
1972 label > input[type="checkbox"],
1973 label > input[type="radio"] {
1974         position: relative;
1975         top: .4rem;
1976         right: .2rem;
1977         margin: 0;
1978         vertical-align: bottom;
1979 }
1980
1981 .showSide {
1982         display: none;
1983 }
1984
1985 .darkMask {
1986         position: fixed;
1987         z-index: 99;
1988         display: none;
1989         width: 100%;
1990         height: 100%;
1991         content: "";
1992         background-color: rgba(0, 0, 0, .56);
1993 }
1994
1995 /* diagnostics */
1996 #diag-rc-output > pre,
1997 #command-rc-output > pre {
1998         font-size: 1.2rem;
1999         font-size-adjust: .35;
2000         line-height: normal;
2001         display: block;
2002         width: 100%;
2003         padding: 8.5px;
2004         white-space: pre;
2005         color: #eee;
2006         background-color: #101010;
2007 }
2008
2009 [data-page="admin-network-diagnostics"] .table {
2010         box-shadow: none;
2011 }
2012
2013 input[name="ping"],
2014 input[name="traceroute"],
2015 input[name="nslookup"] {
2016         width: 80%;
2017 }
2018
2019 /* fix Main Login 登录界面*/
2020 .login .main-right {
2021         background: url(./loginBG.png) no-repeat center center / cover;
2022         text-align: center;
2023 }
2024
2025 .login header {
2026         margin-top: 10px;
2027 }
2028
2029 .login > .main {
2030         position: relative;
2031         height: 100%;
2032 }
2033
2034 .login > .main .main-left {
2035         display: none;
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         padding-bottom: 20px;
2052         display: inline-block;
2053         background-color: transparent;
2054         width: 39%;
2055         color: #fff;
2056         max-width: 493px;
2057 }
2058
2059 .login > .main .container {
2060         display: block;
2061         margin-top: 2rem !important;
2062 }
2063
2064 .login .alert,
2065 .login .main-right .container .alert-message {
2066         margin-bottom: 1em;
2067         padding: 1rem;
2068         background-color: #4a5368 !important;
2069         border: 1px solid #3e4a62;
2070         border-radius: 20px;
2071 }
2072
2073 .login .alert-message > h4 {
2074         padding: 7px 0 0 32px;
2075         font-size: 18px;
2076         background: url(./no-pwd.png) no-repeat left 0 / 28px;
2077         display: inline-block;
2078 }
2079
2080 .login .alert-message > p {
2081         line-height: 25px;
2082         font-size: 14px;
2083 }
2084
2085 .login .alert-message > * {
2086         margin: .5rem 0;
2087 }
2088
2089 .login .main-right .container .alert-message .btn {
2090         border: 1px solid #fff;
2091         background-color: transparent;
2092         color: #fff;
2093         border-radius: 20px;
2094         padding: .6rem;
2095         height: auto;
2096 }
2097
2098 .login > .main form h2 {
2099         font-size: 1.8rem;
2100         margin: 17px 0;
2101         padding-bottom: 0;
2102         color: #fff;
2103 }
2104
2105 .login > .main form .cbi-map-descr {
2106         margin-bottom: 17px;
2107         display: block;
2108 }
2109
2110 .login > .main form > .cbi-page-actions {
2111         padding: 0;
2112         display: block;
2113 }
2114
2115 .login > .main form > .cbi-page-actions .cbi-button {
2116         margin: 0;
2117         width: 50% !important;
2118         height: 42px;
2119         float: left;
2120 }
2121
2122 .login > .main form > .cbi-page-actions .cbi-button-apply {
2123         border-radius: 25px 0 0 25px;
2124 }
2125
2126 .login > .main form > .cbi-page-actions .cbi-button-reset {
2127         border-radius: 0 25px 25px 0;
2128 }
2129
2130 .login > .main .cbi-value {
2131         margin: 17px 0;
2132         padding: 0;
2133         display: block;
2134 }
2135
2136 .login > .main .cbi-value > .cbi-value-field {
2137         display: block;
2138         position: relative;
2139 }
2140
2141 .login > .main .cbi-value-last .cbi-value-field > div {
2142         height: 24px;
2143         width: 24px;
2144         display: inline-block;
2145         background: url(./op-eye.png) no-repeat center center / cover;
2146         position: absolute;
2147         top: 8px;
2148         right: 12px;
2149 }
2150
2151 .login > .main .cbi-value-last .cbi-value-field.op-eye > div {
2152         background-image: url(./cl-eye.png);
2153 }
2154
2155 .login > .main .cbi-value .cbi-input-text {
2156         margin: 0 0 16px;
2157         padding-left: 36px;
2158         width: 100%;
2159         height: 42px;
2160         border: 1px solid #556270;
2161         border-radius: 20px;
2162         background: #fff no-repeat 11px center / 19px;
2163 }
2164
2165 .login > .main .cbi-value .cbi-input-text {
2166         background-image: url(./user.png);
2167 }
2168
2169 .login > .main .cbi-value-last .cbi-input-text {
2170         background-image: url(./pwd.png);
2171 }
2172
2173 .login .cbi-section {
2174         padding: 0;
2175         box-shadow: none;
2176         background-color: transparent;
2177 }
2178
2179 .login .cbi-page-actions .cbi-button-apply,
2180 .login .cbi-button-apply {
2181         border: 1px solid #f24b7c;
2182         background-color: #f24b7c;
2183 }
2184
2185 .login .cbi-button[value="Reset"] {
2186         color: #fff;
2187         border: 1px solid #9a4569;
2188         background-color: #9a4569;
2189 }
2190
2191 .login footer {
2192         padding: 0;
2193 }
2194
2195 @media screen and (min-height: 585px) {
2196         .login footer {
2197                 position: absolute;
2198                 bottom: 0;
2199                 width: 100%;
2200         }
2201 }
2202
2203 /* logged 已登录界面 */
2204 /* header 头部 */
2205 .logged-in {
2206         min-height: 100%;
2207         background-color: #ebf1f6;
2208 }
2209
2210 .logged-in header {
2211         display: block;
2212         position: fixed;
2213         top: 1rem;
2214         right: 1rem;
2215         border: 1px solid #ddd;
2216         background-color: #fff;
2217         border-radius: 20px;
2218         width: calc(85% - 20px - 2rem);
2219 }
2220
2221 .logged-in .main {
2222         overflow: hidden;
2223 }
2224
2225 .logged-in header .container {
2226         height: 100%;
2227 }
2228
2229 .logged-in header .container .btn-con {
2230         height: 3rem;
2231         line-height: 3rem;
2232 }
2233
2234 .logged-in header .container .btn-con #xhr_poll_status {
2235         display: inline-block;
2236 }
2237
2238 .logged-in header .container .btn-con .logout {
2239         background-color: #354057;
2240 }
2241
2242 .logged-in header .container .btn-con .logout a {
2243         color: #fff;
2244         text-decoration: none;
2245 }
2246
2247 .logged-in .logoImg,
2248 .login-info .logoImg {
2249         display: none;
2250 }
2251
2252 .logged-in .main-right {
2253         float: right;
2254         width: 84%;
2255         height: 100%;
2256 }
2257
2258 .logged-in .main-right .container {
2259         margin: 5rem 1rem 1rem;
2260 }
2261
2262 /* rosy file server */
2263 .login-info.node-main-login{
2264         background-color: #ebf1f6;
2265 }
2266
2267 .login-info.node-main-login header .container,
2268 .login-info.node-main-login .main {
2269         width: 1170px;
2270 }
2271
2272 .login-info.node-main-login .main {
2273         padding: 0 15px;
2274 }
2275
2276 .login-info.node-main-login header {
2277         display: block;
2278 }
2279
2280 .login-info.node-main-login header .container {
2281         margin: 1rem auto 0;
2282         height: 3rem;
2283         background-color: #fff;
2284         border: 1px solid #ddd;
2285         border-radius: 50px;
2286         line-height: 44px;
2287 }
2288
2289 .login-info.node-main-login .label.logout {
2290         background-color: #f24b7c;
2291 }
2292
2293 .login-info.node-main-login .label.logout a {
2294         color: #fff;
2295         text-decoration: none;
2296 }
2297
2298 /* node main login */
2299 .login-info .main {
2300         margin: 0 auto;
2301         width: 80%;
2302         max-width: 1170px;
2303 }
2304
2305 .login-info .main-left {
2306         display: none;
2307 }
2308
2309 .login-info .main-right {
2310         width: 100%;
2311 }
2312
2313 /* fix status overview */
2314 .node-status-overview > .main fieldset:nth-child(4) .td:nth-child(2) {
2315         white-space: normal;
2316 }
2317
2318 /* fix status processes */
2319 .node-status-processes > .main .table .tr .td:nth-child(3) {
2320         white-space: normal;
2321 }
2322
2323 .node-admin-status form {
2324         margin: 2rem 2rem 0 0;
2325 }
2326
2327 /* fix system reboot */
2328 [data-page="admin-system-reboot"] p {
2329         padding-left: 2rem;
2330 }
2331
2332 /* fix network diagnostics */
2333 .lang_enDiagnostics .tr .td,
2334 .lang_enLoad .tr .td,
2335 .lang_enTraffic.node-admin-status .tr .td,
2336 .lang_enWireless .tr .td,
2337 .lang_enConnections .tr .td {
2338         border: none;
2339 }
2340
2341 [data-page="admin-system-reboot"] p > span {
2342         position: relative;
2343         top: .1rem;
2344         left: 1rem;
2345 }
2346
2347 .lang_enInterfaces .ifacebox-body {
2348         border-width: 1px;
2349         border-style: solid;
2350 }
2351
2352 /* samba */
2353 #cbi-samba .cbi-value-last .cbi-value-field {
2354         display: block;
2355 }
2356
2357 #cbi-samba .cbi-value-last .cbi-value-title {
2358         width: auto;
2359         padding-bottom: .6rem;
2360 }
2361
2362 /* software */
2363 .controls > * > .btn:not([aria-label$="page"]) {
2364         flex-grow: initial !important;
2365         margin-top: .1rem;
2366 }
2367
2368 .controls > #pager > .btn[aria-label$="page"] {
2369         font-size: 1.4rem;
2370 }
2371
2372 .controls > * > label {
2373         margin-bottom: .2rem;
2374 }
2375
2376 [data-page="admin-system-opkg"] div.btn {
2377         line-height: 3;
2378         display: inline;
2379         padding: .3rem .6rem;
2380 }
2381
2382 [data-page^="admin-system-admin"]:not(.login) .cbi-map:not(#cbi-dropbear),
2383 [data-page="admin-system-opkg"] #maincontent > .container {
2384         margin-top: 2rem;
2385         padding-top: .1rem;
2386 }
2387
2388 [data-page="admin-system-opkg"] #maincontent > .container {
2389         margin: 2rem;
2390         margin-bottom: 1rem;
2391 }
2392
2393 .td.version,
2394 .td.size {
2395         white-space: normal !important;
2396         word-break: break-word;
2397 }
2398
2399 .cbi-tabmenu + .cbi-section {
2400         margin-top: 0;
2401         border: 1px solid #d4d4d4;
2402         border-top: none;
2403 }
2404
2405 /* wireless overview */
2406 #cbi-wireless > #wifi_assoclist_table > .tr {
2407 }
2408
2409 #cbi-wireless > #wifi_assoclist_table > .tr.placeholder > .td {
2410         right: 33px;
2411         bottom: 33px;
2412         left: 33px;
2413         border-top: thin solid #ddd !important;
2414 }
2415
2416 #cbi-wireless > #wifi_assoclist_table > .tr.table-titles {
2417         border-radius: 20px 20px 0 0;
2418 }
2419
2420 #cbi-wireless > #wifi_assoclist_table > .tr.placeholder,
2421 #cbi-wireless > #wifi_assoclist_table > .tr.placeholder .td {
2422         border-radius: 0 0 20px 20px;
2423         overflow: hidden;
2424 }
2425
2426 #cbi-wireless > #wifi_assoclist_table > .tr.table-titles .th:first-child {
2427         border-top-left-radius: 20px;
2428 }
2429
2430 #cbi-wireless > #wifi_assoclist_table > .tr.table-titles .th:last-child {
2431         border-top-right-radius: 20px;
2432 }
2433
2434 #cbi-wireless > #wifi_assoclist_table > .tr.table-titles > .th {
2435         border-bottom: thin solid #ddd;
2436 }
2437
2438 #wifi_assoclist_table > .tr > .td[data-title="RX Rate / TX Rate"] {
2439         width: 23rem;
2440 }
2441
2442 /* firewall */
2443 #iptables {
2444         font-family: inherit;
2445         font-weight: normal;
2446         font-style: normal;
2447         line-height: 1;
2448         min-width: inherit;
2449         margin: 0 0 2rem 0;
2450         padding: 2rem;
2451         border: 1px solid #d4d4d4;
2452         border-radius: 0;
2453         background-color: #fff;
2454         border-top: none;
2455 }
2456
2457 #cbi-firewall-redirect table *,
2458 #cbi-network-switch_vlan table *,
2459 #cbi-firewall-zone table * {
2460         font-size: small;
2461 }
2462
2463 #cbi-firewall-redirect table input[type="text"],
2464 #cbi-network-switch_vlan table input[type="text"],
2465 #cbi-firewall-zone table input[type="text"] {
2466         width: 5rem;
2467 }
2468
2469 #cbi-firewall-redirect table select,
2470 #cbi-network-switch_vlan table select,
2471 #cbi-firewall-zone table select {
2472         min-width: 3.5rem;
2473 }
2474
2475 #cbi-network-switch_vlan .th,
2476 #cbi-network-switch_vlan .td {
2477         flex-basis: 12%;
2478 }
2479
2480 #cbi-firewall-zone .table {
2481         display: table;
2482 }
2483
2484 #cbi-network-switch_vlan #vlan_table {
2485         overflow-x: auto;
2486 }
2487
2488 #cbi-firewall-zone .td.cbi-section-actions {
2489         width: 100%;
2490 }
2491
2492 /* applyreboot fix */
2493 #applyreboot-container {
2494         margin: 2rem;
2495 }
2496
2497 #applyreboot-section {
2498         line-height: 300%;
2499         margin: 2rem;
2500 }
2501
2502 /* openvpn bug fix */
2503 .OpenVPN a {
2504         line-height: initial !important;
2505 }
2506
2507 /* custom commands */
2508 .commandbox {
2509         width: 24% !important;
2510         padding: .5rem 1rem;
2511         border-bottom: thin solid #ccc;
2512         background: #eee;
2513 }
2514
2515 .commandbox h3 {
2516         line-height: normal !important;
2517         overflow: hidden;
2518         margin: 6px 0 !important;
2519         white-space: nowrap;
2520         text-overflow: ellipsis;
2521 }
2522
2523 .commandbox div {
2524         left: auto !important;
2525 }
2526
2527 .commandbox code {
2528         position: absolute;
2529         overflow-x: hidden;
2530         overflow-y: auto;
2531         max-width: 60%;
2532         max-height: 55px;
2533         margin-top: -3px;
2534         margin-left: 4px;
2535         padding: 2px 3px;
2536         text-overflow: ellipsis;
2537 }
2538
2539 .commandbox p:first-of-type {
2540         margin-top: -6px;
2541 }
2542
2543 .commandbox p:nth-of-type(2) {
2544         margin-top: 2px;
2545 }
2546
2547 [data-page^="admin-system-commands"] .panel-title,
2548 [data-page^="command-cfg"] .mobile-hide,
2549 [data-page^="command-cfg"] header .container > #logo {
2550         display: none;
2551 }
2552
2553 .PC-hide {
2554         display: none;
2555 }
2556
2557 @media screen and (max-width: 1600px) {
2558         header .container > #logo {
2559                 margin: 0 2.5rem 0 .5rem;
2560         }
2561
2562         .cbi-dynlist > .item {
2563                 max-width: 21.9rem;
2564         }
2565
2566         .btn:not(button),
2567         .cbi-button {
2568                 font-size: .8rem;
2569                 padding: .3rem .6rem;
2570         }
2571
2572         .label {
2573                 padding: .2rem .6rem;
2574         }
2575
2576         .cbi-value-title {
2577                 width: 15rem;
2578                 padding-right: .6rem;
2579         }
2580
2581         fieldset,
2582         .cbi-section {
2583                 padding: 1rem;
2584         }
2585
2586         .cbi-input-textarea {
2587                 font-size: small;
2588         }
2589
2590         .node-admin-status > .main fieldset li > a {
2591                 padding: .3rem .6rem;
2592         }
2593
2594         #cbi-firewall-zone > .table {
2595                 display: block;
2596         }
2597 }
2598
2599 @media screen and (max-width: 1400px) {
2600         .logged-in header {
2601                 width: calc(100% - 230px - 2rem);
2602         }
2603         .logged-in .main-right {
2604                 width: calc(100% - 230px);
2605         }
2606
2607         .cbi-dynlist > .item {
2608                 max-width: 19.9rem;
2609         }
2610
2611         .cbi-tabmenu > li > a,
2612         .tabs > li > a {
2613                 padding: .2rem .5rem;
2614         }
2615
2616         .panel-title {
2617                 font-size: 1.1rem;
2618                 padding-bottom: 1rem;
2619         }
2620
2621         table {
2622                 font-size: .7rem !important;
2623                 width: 100% !important;
2624         }
2625
2626         .table .cbi-input-text {
2627                 width: 100%;
2628         }
2629
2630         .main .main-left > .nav > li,
2631         .main .main-left > .nav > li a,
2632         .main .main-left > .nav > .slide > .menu {
2633                 font-size: .9rem;
2634         }
2635
2636         .main .main-left > .nav > .slide > .slide-menu > li > a {
2637                 font-size: .7rem;
2638         }
2639
2640         [data-page="admin-network-firewall-forwards"] .table:not(.cbi-section-table) {
2641                 display: block;
2642         }
2643
2644         [data-page="admin-network-firewall-forwards"] .table:not(.cbi-section-table),
2645         [data-page="admin-network-firewall-rules"] .table:not(.cbi-section-table),
2646         [data-page="admin-network-hosts"] .table {
2647                 overflow-y: visible;
2648         }
2649
2650         .commandbox {
2651                 width: 32% !important;
2652         }
2653 }
2654
2655 @media screen and (max-width: 992px) {
2656         .login-info.node-main-login header .container,
2657         .login-info.node-main-login .main {
2658                 width: 970px;
2659         }
2660 }
2661
2662 @media screen and (max-width: 992px) {
2663         .login .main-right {
2664                 background: #354057;
2665         }
2666
2667         .login > .main #maincontent {
2668                 width: 90%;
2669         }
2670
2671         .logged-in header {
2672                 width: calc(100% - 2rem);
2673         }
2674
2675         .showSide,
2676         .logged-in header .container .btn-con {
2677                 height: 3rem;
2678                 line-height: 3rem;
2679         }
2680
2681         .logged-in .main-left {
2682                 display: none;
2683                 z-index: 1000;
2684                 position: fixed;
2685                 top: 0;
2686                 bottom: 0;
2687                 left: 0;
2688                 right: 0;
2689                 border-radius: 0;
2690                 background-color: rgba(0, 0, 0, .3);
2691         }
2692
2693         .logged-in .main-left .nav-container {
2694                 top: 0;
2695                 left: 0;
2696                 width: 50%;
2697                 border-radius: 0;
2698                 bottom: 0;
2699                 height: 100%;
2700         }
2701
2702         .logged-in .main-left .nav-container .navbar-container {
2703                 overflow-y: scroll;
2704         }
2705
2706         .logged-in .main-right {
2707                 width: 100%;
2708         }
2709
2710         [data-page^="command-cfg"] header .container > .brand {
2711                 display: block;
2712                 margin-top: -1.75rem;
2713         }
2714
2715         .cbi-dynlist > .item {
2716                 max-width: 14.9rem;
2717         }
2718
2719         .showSide {
2720                 display: inline-block;
2721                 cursor: pointer;
2722                 width: 30px;
2723         }
2724
2725         .login-info.node-main-login header .showSide {
2726                 display: none;
2727         }
2728
2729         .showSide::before {
2730                 content: '';
2731                 display: inline-block;
2732                 height: 24px;
2733                 width: 30px;
2734                 background: url(./menu-logo.png) no-repeat center center / 100%;
2735                 vertical-align: middle;
2736         }
2737
2738         .login > .main .cbi-value-title {
2739                 text-align: left;
2740         }
2741
2742         .cbi-value-title {
2743                 width: 9rem;
2744                 padding-right: 1rem;
2745         }
2746
2747         #diag-rc-output > pre,
2748         #command-rc-output > pre {
2749                 font-size: 1rem;
2750         }
2751
2752         .table {
2753                 display: block;
2754         }
2755
2756         #packages.table {
2757                 display: grid;
2758         }
2759
2760         .tr {
2761                 display: flex;
2762                 flex-direction: row;
2763                 flex-wrap: wrap;
2764         }
2765
2766         .Overview .table[width="100%"] > .tr {
2767                 flex-wrap: nowrap;
2768         }
2769
2770         .tr.placeholder {
2771                 border-bottom: thin solid #ddd;
2772         }
2773
2774         .tr.placeholder > .td,
2775         #cbi-firewall .tr > .td,
2776         #iptables .tr:nth-child(2) > .td,
2777         #cbi-network .tr:nth-child(2) > .td,
2778         .cbi-section #wifi_assoclist_table .tr > .td {
2779                 border-top: 0;
2780         }
2781
2782         .th,
2783         .td {
2784                 display: inline-block;
2785                 align-self: flex-start;
2786                 flex: 2 2 25%;
2787                 text-overflow: ellipsis;
2788                 word-wrap: break-word;
2789         }
2790
2791         .td select,
2792         .td input[type="text"] {
2793                 width: 100%;
2794                 word-wrap: normal;
2795         }
2796
2797         .td [data-dynlist] > input,
2798         .td input.cbi-input-password {
2799                 width: calc(100% - 1.5rem);
2800         }
2801
2802         .td[data-type="button"],
2803         .td[data-type="fvalue"] {
2804                 flex: 1 1 12.5%;
2805                 text-align: left;
2806         }
2807
2808         .th.cbi-value-field,
2809         .td.cbi-value-field,
2810         .th.cbi-section-table-cell,
2811         .td.cbi-section-table-cell {
2812                 flex-basis: auto;
2813                 padding-top: 1rem;
2814         }
2815
2816         .cbi-section-table-row {
2817                 display: flex;
2818                 flex-direction: row;
2819                 flex-wrap: wrap;
2820                 justify-content: space-between;
2821         }
2822
2823         .td.cbi-value-field,
2824         .cbi-section-table-cell {
2825                 display: inline-block;
2826                 flex: 10 10 auto;
2827                 flex-basis: 50%;
2828                 text-align: center;
2829         }
2830
2831         .td.cbi-section-actions {
2832                 vertical-align: bottom;
2833         }
2834
2835         .tr.table-titles,
2836         .tr.cbi-section-table-titles,
2837         .tr.cbi-section-table-descr {
2838                 display: none;
2839         }
2840
2841         .tr[data-title]::before,
2842         .tr.cbi-section-table-titles.named::before {
2843                 font-size: .9rem;
2844                 display: block;
2845                 flex: 1 1 100%;
2846                 border-bottom: thin solid rgba(0, 0, 0, .26);
2847                 background: #90c0e0;
2848         }
2849
2850         .td[data-title],
2851         [data-page^="admin-status-realtime"] .td[id] {
2852                 text-align: left;
2853         }
2854
2855         .td[data-title]::before {
2856                 display: block;
2857         }
2858
2859         .cbi-button + .cbi-button {
2860                 margin-left: 0;
2861         }
2862
2863         .td.cbi-section-actions > * > *,
2864         .td.cbi-section-actions > * > form > * {
2865                 margin: 2.1px 3px;
2866         }
2867
2868         .Firewall form {
2869                 font-family: inherit;
2870                 font-weight: normal;
2871                 font-style: normal;
2872                 line-height: normal;
2873                 position: static !important;
2874                 min-width: inherit;
2875                 margin: 0 0 2rem 0;
2876                 padding: 2rem;
2877                 border: 0;
2878                 border-radius: 0;
2879                 background-color: #fff;
2880         }
2881
2882         .Firewall form input {
2883                 width: 100% !important;
2884                 margin: 0;
2885                 margin-top: 1rem;
2886         }
2887
2888         .Firewall .center,
2889         .Firewall .center::before {
2890                 text-align: left !important;
2891         }
2892
2893         .commandbox {
2894                 width: 100% !important;
2895         }
2896
2897         /* The scroll bar of the navigation bar is compatible with each browser. */
2898         /* Google */
2899         .logged-in .main-left .navbar-container::-webkit-scrollbar {
2900                 width: 6px;
2901                 background: transparent;
2902         }
2903
2904         .logged-in .main-left .navbar-container::-webkit-scrollbar-button {
2905                 display: none;
2906         }
2907
2908         .logged-in .main-left .navbar-container::-webkit-scrollbar-thumb {
2909                 background-color: #ffffff61;
2910                 border-radius: 10px;
2911         }
2912
2913         .logged-in .main-left .navbar-container::-webkit-scrollbar-thumb {
2914                 background-color: #839dd67a;
2915                 border-radius: 10px;
2916         }
2917
2918         .logged-in .main-left .navbar-container:hover::-webkit-scrollbar-thumb {
2919                 background-color: #839dd67a;
2920         }
2921
2922         /* IE */
2923         .logged-in .main-left .navbar-container {
2924                 scrollbar-track-color: transparent;
2925                 scrollbar-face-color: #839dd67a;
2926                 scrollbar-arrow-color: transparent;
2927                 scrollbar-3dlight-color: transparent;
2928                 scrollbar-highlight-color: transparent;
2929                 scrollbar-shadow-color: transparent;
2930                 scrollbar-darkshadow-color: transparent;
2931                 scrollbar-base-color: transparent;
2932         }
2933
2934         .logged-in .main-left .navbar-container:hover {
2935                 scrollbar-face-color: #839dd67a;
2936         }
2937
2938         .login-info.node-main-login header .container,
2939         .login-info.node-main-login .main {
2940                 width: 750px;
2941         }
2942 }
2943
2944 @media screen and (max-width: 768px) {
2945         .login-info.node-main-login header {
2946                 padding: 0 15px;
2947         }
2948
2949         .login-info.node-main-login header .container,
2950         .login-info.node-main-login .main {
2951                 width: 100%;
2952         }
2953 }
2954
2955 @media screen and (max-width: 600px) {
2956         body {
2957                 font-size: .8rem;
2958         }
2959
2960         .cbi-progressbar::after {
2961                 font-size: .95em;
2962                 line-height: 1.5;
2963         }
2964
2965         fieldset,
2966         .cbi-section {
2967                 margin: 1rem 0 0 0;
2968                 padding: 1rem;
2969         }
2970
2971         .main-left .nav-container {
2972                 width: 70%;
2973         }
2974
2975         .main .main-left > .nav > .slide > .menu {
2976                 font-size: 1.2rem;
2977         }
2978
2979         .main .main-left > .nav > .slide > .slide-menu > li > a {
2980                 font-size: 1rem;
2981         }
2982
2983         .cbi-value-title {
2984                 display: block;
2985                 width: 100%;
2986                 min-width: 0 !important;
2987                 margin-top: 1rem;
2988                 margin-bottom: .5rem;
2989                 text-align: left;
2990         }
2991
2992         .cbi-value-field,
2993         .cbi-value-description {
2994                 width: 100%;
2995         }
2996
2997         .cbi-value > .cbi-value-field {
2998                 display: inline-block;
2999         }
3000
3001         .cbi-tabmenu > li,
3002         .tabs > li {
3003                 padding: .6rem 0;
3004         }
3005
3006         .cbi-tabmenu > li > a,
3007         .tabs > li > a {
3008                 font-size: .9rem;
3009                 padding: .2rem .3rem;
3010         }
3011
3012         .cbi-page-actions > div > input {
3013                 display: none;
3014         }
3015
3016         .cbi-page-actions > .cbi-button {
3017                 margin-top: .2rem;
3018         }
3019
3020         .login > .main .cbi-value {
3021                 padding: 0;
3022         }
3023
3024         .login > .main form > div:nth-last-child(1) {
3025                 margin-top: 2rem;
3026         }
3027
3028         .login > .main .cbi-value-title {
3029                 font-size: 1.2rem;
3030                 width: 100% !important;
3031         }
3032
3033         .login > .main fieldset {
3034                 margin: 0;
3035                 padding: .5rem;
3036         }
3037
3038         .commandbox p:first-of-type {
3039                 margin-top: -8px;
3040         }
3041
3042         #diag-rc-output > pre,
3043         #command-rc-output > pre {
3044                 font-size: .8rem;
3045         }
3046
3047         h2 {
3048                 font-size: 2rem;
3049         }
3050
3051         .tabs > li > a {
3052                 font-size: .9rem;
3053         }
3054
3055         select,
3056         input {
3057                 font-size: .9rem;
3058         }
3059
3060         code {
3061                 font-size: .8rem;
3062         }
3063
3064         .panel-title {
3065                 font-size: 1.4rem;
3066                 padding-bottom: 1rem;
3067         }
3068
3069         .node-system-packages > .main .cbi-value.cbi-value-last > div {
3070                 width: 100% !important;
3071         }
3072
3073         .node-system-packages > .main .cbi-value .cbi-value-field input {
3074                 width: 100%;
3075         }
3076
3077         .th,
3078         .td {
3079                 flex-basis: 50%;
3080         }
3081
3082         .td.cbi-value-field {
3083                 flex-basis: 100%;
3084         }
3085
3086         .td.cbi-value-field[data-type="button"],
3087         .td.cbi-value-field[data-type="fvalue"] {
3088                 flex-basis: 25%;
3089                 text-align: left;
3090         }
3091
3092         .tr[data-title]::before,
3093         .tr.cbi-section-table-titles.named::before {
3094                 font-size: 1rem;
3095         }
3096
3097         td > .ifacebadge,
3098         .td > .ifacebadge {
3099                 font-size: .62rem;
3100         }
3101
3102         #cbi-wireless .td {
3103                 overflow: hidden;
3104         }
3105
3106         .hide-sm,
3107         .hide-xs:not([data-title="MAC-Address"]) {
3108                 display: none;
3109         }
3110
3111         .mobile-hide {
3112                 display: none;
3113         }
3114 }
3115
3116 @media screen and (min-width: 1152px) {
3117         .cbi-value input[type="password"],
3118         .cbi-value input[type="text"] {
3119                 min-width: 20rem;
3120         }
3121
3122         .cbi-value-field .cbi-input-select {
3123                 width: 20rem;
3124         }
3125
3126         .cbi-value-field .cbi-dropdown {
3127                 min-width: 20rem;
3128         }
3129
3130         .cbi-section-node .tr {
3131                 overflow: hidden;
3132         }
3133 }
3134
3135 @media screen and (min-width: 1366px) {
3136         .cbi-value input[type="password"],
3137         .cbi-value input[type="text"] {
3138                 min-width: 22rem;
3139         }
3140
3141         .cbi-value-field .cbi-input-select {
3142                 width: 22rem;
3143         }
3144
3145         .cbi-value-field .cbi-dropdown {
3146                 min-width: 22rem;
3147         }
3148 }
3149
3150 @media screen and (min-width: 1600px) {
3151         .cbi-value input[type="password"],
3152         .cbi-value input[type="text"] {
3153                 min-width: 25rem;
3154         }
3155
3156         .cbi-value-field .cbi-input-select {
3157                 width: 25rem;
3158         }
3159
3160         .cbi-value-field .cbi-dropdown {
3161                 min-width: 25rem;
3162         }
3163 }