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