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