themes/luci-theme-rosy/htdocs/luci-static/rosy/cascade.css

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