themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css

   1 @charset "utf-8";
   2
   3 .lang_he {
   4         direction: RTL;
   5         unicode-bidi: embed;
   6 }
   7
   8 @media all {
   9
  10 html {
  11         min-height: 100%;
  12         height: auto;
  13         position:relative;
  14 }
  15
  16 body {
  17         color: #ffffff;
  18         background-color: #4a6b7c;
  19         background-position: bottom center;
  20         background-repeat: repeat-x;
  21         font-family: Arial, Verdana, sans-serif;
  22         font-size: 13px;
  23         padding-bottom: 1.5em;
  24 }
  25
  26 * {
  27         margin: 0;
  28         padding: 0;
  29         box-sizing: border-box;
  30 }
  31
  32 .table { display: table; width: 100%; position: relative; border-collapse: collapse; }
  33 .tr { display: table-row; }
  34 .thead { display: table-header-group; }
  35 .tbody { display: table-row-group; }
  36 .tfoot { display: table-footer-group; }
  37 .td, .th { display: table-cell; vertical-align: middle; }
  38 .th { font-weight: bold; }
  39
  40 .table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
  41 .table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
  42
  43 .col-1 { flex: 1 1 30px !important; -webkit-flex: 1 1 30px !important; }
  44 .col-2 { flex: 2 2 60px !important; -webkit-flex: 2 2 60px !important; }
  45 .col-3 { flex: 3 3 90px !important; -webkit-flex: 3 3 90px !important; }
  46 .col-4 { flex: 4 4 120px !important; -webkit-flex: 4 4 120px !important; }
  47 .col-5 { flex: 5 5 150px !important; -webkit-flex: 5 5 150px !important; }
  48 .col-6 { flex: 6 6 180px !important; -webkit-flex: 6 6 180px !important; }
  49 .col-7 { flex: 7 7 210px !important; -webkit-flex: 7 7 210px !important; }
  50 .col-8 { flex: 8 8 240px !important; -webkit-flex: 8 8 240px !important; }
  51 .col-9 { flex: 9 9 270px !important; -webkit-flex: 9 9 270px !important; }
  52 .col-10 { flex: 10 10 300px !important; -webkit-flex: 10 10 300px !important; }
  53
  54 .tr.placeholder {
  55         height: 3.5em;
  56 }
  57
  58 .tr.placeholder > .td {
  59         position: absolute;
  60         left: 0;
  61         right: 0;
  62         bottom: 0;
  63         text-align: center;
  64         line-height: 3em;
  65 }
  66
  67 .nowrap {
  68         white-space: nowrap;
  69 }
  70
  71 a img {
  72         border: none;
  73         text-decoration: none;
  74 }
  75
  76 #maincontainer {
  77         display: flex;
  78 }
  79
  80 #maincontent {
  81         flex-basis: 100%;
  82 }
  83
  84 #mainmenu {
  85         max-width: 200px;
  86         background: #f5f5f5;
  87         border: 1px solid #444;
  88         border-width: 0 0 1px 1px;
  89         font-size: 15px;
  90         padding-bottom: 1em;
  91 }
  92
  93 #mainmenu ul {
  94         display: block;
  95         margin: 0;
  96         padding: 0;
  97 }
  98
  99 #mainmenu ul li {
 100         display: block;
 101         white-space: nowrap;
 102 }
 103
 104 #mainmenu ul li > a {
 105         display: block;
 106         color: #444;
 107         padding: .4em .5em;
 108         text-decoration: none;
 109 }
 110
 111 #mainmenu ul li.selected > a {
 112         background: #fff;
 113         color: #37c;
 114         border: 1px dotted #444;
 115         border-width: 1px 0;
 116 }
 117
 118 #mainmenu ul li.selected:first-child > a {
 119         border-top: none;
 120 }
 121
 122 #mainmenu ul li li > a {
 123         font-size: 85%;
 124         padding-left: 1.5em;
 125 }
 126
 127 #mainmenu ul li > ul {
 128         flex-basis: 100%;
 129         max-height: 0;
 130         visibility: hidden;
 131         transition: max-height .15s;
 132 }
 133
 134 #mainmenu ul:not(.active) li.selected > ul,
 135 #mainmenu ul li.active > ul {
 136         max-height: 1000px;
 137         visibility: visible;
 138         transition: max-height .25s;
 139 }
 140
 141 #mainmenu ul li.mainmenu-item-logout {
 142         margin-top: 15%;
 143 }
 144
 145 #tabmenu {
 146         padding: 0;
 147         margin: -.5em -.5em .5em -.5em;
 148         background: #bbb;
 149 }
 150
 151 #tabmenu ul {
 152         border-color: #444;
 153         padding-top: .5em;
 154         flex-wrap: wrap;
 155         background: repeating-linear-gradient(#f5f5f5, #bbb 2.4em, #f5f5f5 2.4em, #bbb);
 156         line-height: 1em;
 157 }
 158
 159 #tabmenu ul li {
 160         border-color: #444;
 161 }
 162
 163 #tabmenu ul li.cbi-tab {
 164         background: #f5f5f5;
 165 }
 166
 167 abbr,
 168 acronym {
 169         font-style: normal;
 170         font-variant: normal;
 171 }
 172
 173 abbr[title],
 174 acronym[title] {
 175         border-bottom: 1px dotted;
 176         cursor: help;
 177 }
 178
 179 a:link abbr[title],
 180 a:visited abbr[title],
 181 a:link acronym[title],
 182 a:visited acronym[title] {
 183         cursor: pointer;
 184 }
 185
 186 code {
 187         font-family: monospace;
 188         white-space: pre;
 189 }
 190
 191 hr {
 192         margin: .5em 0;
 193         padding: 0;
 194         border: 1px solid #444;
 195         border-width: 0 0 1px 0;
 196 }
 197
 198 #maincontent ul {
 199         margin-left: 2em;
 200 }
 201
 202 #modal_overlay {
 203         position: fixed;
 204         top: 0;
 205         bottom: 0;
 206         left: -10000px;
 207         right: 10000px;
 208         background: rgba(0, 0, 0, 0.7);
 209         z-index: 900;
 210         overflow-y: scroll;
 211         -webkit-overflow-scrolling: touch;
 212         transition: opacity .125s ease-in;
 213         opacity: 0;
 214         visibility: hidden;
 215 }
 216
 217 .modal {
 218         width: 90%;
 219         margin: 5em auto !important;
 220         display: flex;
 221         flex-wrap: wrap;
 222         min-height: 32px;
 223         max-width: 600px;
 224         align-items: center;
 225         border-radius: 3px;
 226         background: #f5f5f5;
 227         border: 1px solid #000;
 228         padding: .5em .5em .25em .5em !important;
 229         min-width: 270px;
 230         color: #444;
 231 }
 232
 233 .modal > * {
 234         flex-basis: 100%;
 235         line-height: normal;
 236         margin-bottom: .5em;
 237 }
 238
 239 .modal > pre,
 240 .modal > textarea {
 241         white-space: pre-wrap;
 242         overflow: auto;
 243 }
 244
 245 .modal .button-row {
 246         display: flex;
 247         justify-content: space-between;
 248 }
 249
 250 .modal .button-row > :not(:last-child) {
 251         margin-right: .5em;
 252 }
 253
 254 .modal .button-row > :first-child {
 255         margin-right: auto;
 256 }
 257
 258 body.modal-overlay-active {
 259         overflow: hidden;
 260 }
 261
 262 body.modal-overlay-active #modal_overlay {
 263         left: 0;
 264         right: 0;
 265         opacity: 1;
 266         visibility: visible;
 267 }
 268
 269 .warning {
 270         color: red;
 271         background-color: white;
 272         font-weight: bold;
 273 }
 274
 275 .clear {
 276         clear: both;
 277 }
 278
 279 .skiplink,
 280 .navigation,
 281 .hidden {
 282         position: absolute;
 283         left: -1000px;
 284         top: -1000px;
 285         width: 0px;
 286         height: 0px;
 287         overflow: hidden;
 288         display: inline;
 289 }
 290
 291 .error {
 292         color: #ff0000;
 293         background-color: white;
 294 }
 295
 296 .alert-message {
 297         font-weight: normal;
 298         padding: .5em;
 299         border-radius: 3px;
 300         border: 1px solid #a22;
 301         margin: 0 0 .5em 0;
 302 }
 303
 304 .label {
 305         padding: 1px 2px;
 306         font-size: 10px;
 307         color: #fff;
 308         text-transform: uppercase;
 309         white-space: nowrap;
 310         background-color: #aaa;
 311         border-radius: 3px;
 312 }
 313
 314 .alert-message, .cbi-tooltip.error, .label.error {
 315         border-color: #a22;
 316         background: #fee;
 317         color: #a22;
 318 }
 319
 320 .alert-message.notice, .cbi-tooltip.notice, .label.notice {
 321         border-color: #15a;
 322         background: #e6f6ff;
 323         color: #15a;
 324 }
 325
 326 .alert-message.warning, .cbi-tooltip.warning, .label.warning {
 327         border-color: #ed5;
 328         background: #fe9;
 329         color: #650;
 330 }
 331
 332 .alert-message.success, .cbi-tooltip.success, .label.success {
 333         border-color: #161;
 334         background: #efe;
 335         color: #161;
 336 }
 337
 338 div.hostinfo {
 339         float: left;
 340         margin: 0;
 341         padding: 0;
 342         width: auto;
 343         padding: 0.5em;
 344 }
 345
 346 .lang_he div.hostinfo {
 347         float: right;
 348 }
 349
 350 #menubar {
 351         position: relative;
 352         width: 100%;
 353         background: #000000;
 354         color: #ffffff;
 355         display: flex;
 356         flex-wrap: wrap;
 357 }
 358
 359 #menubar .hostinfo,
 360 #indicators,
 361 #modemenu {
 362         flex: 1 1 450px;
 363         display: flex;
 364         align-items: center;
 365 }
 366
 367 #indicators {
 368         justify-content: flex-end;
 369         flex-wrap: wrap;
 370         margin-right: 1em;
 371 }
 372
 373 #indicators > *,
 374 #indicators > #xhr_poll_status > * {
 375         flex: 0 0 auto;
 376         display: inline-flex;
 377 }
 378
 379 #modemenu {
 380         flex: 1 1 auto;
 381         padding: 0;
 382         margin: 0;
 383 }
 384
 385 #modemenu > * {
 386         padding: .5em;
 387 }
 388
 389 #menubar .warning {
 390         color: red;
 391         background-color: #557788;
 392 }
 393
 394 #indicators > #xhr_poll_status,
 395 #indicators > [data-clickable="true"] {
 396         cursor: pointer;
 397 }
 398
 399 #indicators > :not([id="xhr_poll_status"]),
 400 #indicators > #xhr_poll_status > * {
 401         text-transform: uppercase;
 402         background: #90c0e0 !important;
 403         color: #000 !important;
 404         font-size: 11px;
 405         padding: .125em .5em;
 406         margin: .125em;
 407         border-radius: .6em;
 408 }
 409
 410 #indicators > [data-style="inactive"],
 411 #indicators > * > #xhr_poll_status_off {
 412         border: 1px solid #90c0e0;
 413         background: #000 !important;
 414         color: #90c0e0 !important;
 415         padding: calc(.125em-1px) calc(.5em-1px);
 416 }
 417
 418 html #menubar a:link,
 419 html #menubar a:visited {
 420         background: #000000;
 421         color: #ffffff;
 422         text-decoration: none;
 423 }
 424
 425 html #menubar a:link:hover,
 426 html #menubar a:visited:hover,
 427 html #menubar a:link:active,
 428 html #menubar a:visited:active,
 429 #menubar a:link:focus,
 430 #menubar a:visited:focus {
 431         background: #000000;
 432         color: #ffff00;
 433         font-weight: bold;
 434 }
 435
 436 html #menubar a:link.active,
 437 html #menubar a:visited.active,
 438 html #menubar a:link.preactive,
 439 html #menubar a:visited.preactive {
 440         background: #000000;
 441         color: #ffff00;
 442         font-weight: bold;
 443 }
 444
 445 html #menubar a:link.warning,
 446 html #menubar a:visited.warning {
 447         background: #000000;
 448         color: red;
 449         font-weight: bold;
 450 }
 451
 452 #modemenu {
 453         width: auto;
 454         background: #000000;
 455         color: #ffffff;
 456         list-style: none;
 457         margin-right: 1px;
 458         margin-left: 2em;
 459         float: right;
 460 }
 461
 462 #modemenu li {
 463         float: right;
 464         list-style: none;
 465 }
 466
 467 #savemenu {
 468         float: right;
 469 }
 470
 471 .lang_he #savemenu {
 472         float: left;
 473 }
 474
 475 .lang_de #submenu_admin_uci {
 476         width: 12em;
 477 }
 478
 479 .lang_ru #submenu_admin_uci {
 480         width: 11.5em;
 481 }
 482
 483 textarea#syslog {
 484         width: 98%;
 485         min-height: 500px;
 486         border: 3px solid #cccccc;
 487         padding: 5px;
 488         font-family: monospace;
 489         overflow-y: hidden;
 490 }
 491
 492 #maincontainer {
 493         clear: both;
 494         width: 96%;
 495         margin: 0 auto;
 496         height:100%;
 497 }
 498
 499 #maincontent {
 500         padding: 0.5em;
 501         background: #f5f5f5;
 502         color: #000000;
 503         border-width: 0 1px 1px 1px;
 504         border-style: solid;
 505         border-color: #444444;
 506 }
 507
 508 #applyreboot-section {
 509         margin: 2rem;
 510         line-height: 300%;
 511 }
 512
 513 .lang_he #maincontent {
 514         direction: rtl;
 515 }
 516
 517 h2, h3, h4, h5, legend {
 518         font-size: 150%;
 519         font-family: Trebuchet MS, Verdana, sans-serif;
 520         font-weight: bold;
 521         margin: .25em 0 .5em 0;
 522         border-bottom: 1px solid;
 523         padding-bottom: 4px;
 524         display: block;
 525         width: 100%;
 526 }
 527
 528 h3, legend {
 529         font-size: 125%;
 530 }
 531
 532 h4 {
 533         font-size: 112%;
 534 }
 535
 536 h5 {
 537         font-size: 105%;
 538 }
 539
 540 fieldset { border: none; }
 541 fieldset > legend { float: left; }
 542 fieldset > legend + * { clear: both; }
 543
 544 p {
 545         margin-bottom: .5em;
 546 }
 547
 548 .cbi-section {
 549         margin: 0 0 .5em 0;
 550 }
 551
 552 .cbi-section > h3,
 553 .cbi-section > legend {
 554         margin-top: .5em;
 555 }
 556
 557 .cbi-section-descr {
 558         margin-bottom: 0.5em;
 559         font-size: 95%;
 560 }
 561
 562 .cbi-section-descr:empty {
 563         display: none;
 564 }
 565
 566 .cbi-title-ref {
 567         color: #37c;
 568 }
 569
 570 .cbi-title-ref::after {
 571         content: "➙";
 572 }
 573
 574 ul.cbi-apply {
 575         font-size: 90%;
 576 }
 577
 578 input:-webkit-input-placeholder {
 579         color: #AAAAAA;
 580 }
 581
 582 input:-moz-placeholder {
 583         color: #AAAAAA;
 584 }
 585
 586 input:-ms-input-placeholder {
 587         color: #AAAAAA;
 588 }
 589
 590 input[type=submit],
 591 input[type=reset],
 592 input[type=image],
 593 input[type=button] {
 594         cursor: pointer;
 595 }
 596
 597 select,
 598 input,
 599 textarea {
 600         background: #eeeeee;
 601         color: #000000;
 602         border-width: 1px;
 603         border-color: #000000;
 604 }
 605
 606 input[type=image] {
 607         border: none;
 608 }
 609
 610 input:focus,
 611 input:not(.btn):not(.cbi-button):hover,
 612 select:focus,
 613 select:hover {
 614         background-color: #ffffff;
 615         color: #000000;
 616 }
 617
 618 input[type=text],
 619 input[type=password] {
 620         padding: .25em;
 621 }
 622
 623 select,
 624 input[type=text],
 625 input[type=password],
 626 .cbi-dropdown:not(.btn):not(.cbi-button) {
 627         width: 20em;
 628         height: 22px;
 629         font-family: inherit;
 630         font-size: inherit;
 631 }
 632
 633 select[multiple] {
 634         height: auto;
 635 }
 636
 637 input[type=radio],
 638 input[type=checkbox],
 639 [data-dynlist] > input + img,
 640 input.cbi-input-password + img {
 641         vertical-align: middle;
 642 }
 643
 644 label > input[type="checkbox"],
 645 label > input[type="radio"] {
 646         vertical-align: bottom;
 647         margin: 0;
 648 }
 649
 650 .td select,
 651 .td .cbi-dropdown,
 652 .td input[type=text],
 653 .cbi-dynlist > .add-item > .cbi-dropdown {
 654         width: 100%;
 655 }
 656
 657 .td input.cbi-input-password {
 658         width: calc(100% - 20px);
 659 }
 660
 661 img.cbi-image-button {
 662         cursor: pointer;
 663         margin: 0 2px;
 664         vertical-align: middle;
 665 }
 666
 667 .btn, .cbi-button, .item::after {
 668         padding: 0 .5em;
 669         border-radius: 3px;
 670         border: 1px solid #aaa;
 671         text-decoration: none;
 672         color: #000;
 673         display: inline-block;
 674         font-size: inherit;
 675         -webkit-appearance: none;
 676         background: #fff;
 677         text-align: center;
 678         font-weight: bold;
 679         line-height: 12px;
 680         min-height: 22px;
 681         line-height: 20px;
 682         box-sizing: border-box;
 683         cursor: pointer;
 684 }
 685
 686 .btn:hover, .cbi-button:hover, .item:hover::after {
 687         box-shadow: 0 0 3px #37c;
 688 }
 689
 690 .btn[disabled],
 691 .btn[disabled]:hover,
 692 .cbi-button[disabled],
 693 .cbi-button[disabled]:hover {
 694         opacity: .6;
 695         cursor: default;
 696         pointer-events: none;
 697 }
 698
 699 .cbi-button-positive,
 700 .cbi-button-fieldadd,
 701 .cbi-button-add,
 702 .cbi-button-save {
 703         border-color: #595;
 704         color: #595;
 705 }
 706
 707 .cbi-button-neutral,
 708 .cbi-button-reset,
 709 .cbi-button-download,
 710 .cbi-button-find,
 711 .cbi-button-link,
 712 .cbi-button-up,
 713 .cbi-button-down {
 714         border-color: #444;
 715         color: #444;
 716 }
 717
 718 .cbi-button-action,
 719 .cbi-button-apply,
 720 .cbi-button-reload,
 721 .cbi-button-edit {
 722         border-color: #37c;
 723         color: #37c;
 724 }
 725
 726 .cbi-button-negative,
 727 .cbi-section-remove .cbi-button,
 728 .cbi-button-remove {
 729         border-color: #a22;
 730         color: #a22;
 731 }
 732
 733 .cbi-button-action.important,
 734 .cbi-page-actions .cbi-button-apply,
 735 .cbi-section-actions .cbi-button-edit {
 736         color: #fff;
 737         background: #37c;
 738 }
 739
 740 .cbi-button-positive.important,
 741 .cbi-page-actions .cbi-button-save {
 742         color: #fff;
 743         background: #595;
 744 }
 745
 746 .cbi-button-negative.important {
 747         color: #fff;
 748         background: #a22;
 749 }
 750
 751 .cbi-page-actions .cbi-button-apply + .cbi-button-save,
 752 .cbi-page-actions .cbi-button-negative + .cbi-button-save {
 753         background: #fff;
 754         color: #595;
 755 }
 756
 757 .cbi-input-invalid:not([open]) {
 758         color: #FF0000 !important;
 759         border-color: #FF0000;
 760 }
 761
 762 table td, table th {
 763         color: #000000;
 764 }
 765
 766 .table .td, .table .th {
 767         color: #000000;
 768         padding: .25em;
 769 }
 770
 771 .table.smalltext {
 772         background: #f5f5f5;
 773         color: #000000;
 774         border-top: 1px solid #666666;
 775         border-right: 1px solid #666666;
 776         border-bottom: 1px solid #666666;
 777         font-size: 90%;
 778         width: 80%;
 779         margin-left: auto;
 780         margin-right: auto;
 781         border-collapse: collapse;
 782 }
 783
 784 .table.smalltext .tr:hover .td {
 785         background-color: #bbddee;
 786         color: #000000;
 787 }
 788
 789 .table.smalltext .tr .th {
 790         padding: 0 0.25em;
 791         border-left: 1px solid #666666;
 792         text-align: left;
 793 }
 794
 795 .table.smalltext .tr .td {
 796         padding: 0 0.25em;
 797         border-top: 1px solid #666666;
 798         border-left: 1px solid #666666;
 799 }
 800
 801 .cbi-rowstyle-1 {
 802         background-color: #eeeeff;
 803         color: #000000;
 804 }
 805
 806 .cbi-rowstyle-2 {
 807         color: #000000;
 808 }
 809
 810 .cbi-value {
 811         clear: left;
 812         vertical-align: middle;
 813         padding: 0.25em 0.6em;
 814         border-bottom: 1px dotted #bbbbbb;
 815 }
 816
 817 .cbi-value:hover {
 818         background: #f8f8f8;
 819         color: #000000;
 820 }
 821
 822 .cbi-value-title {
 823         float: left;
 824         width: 40%;
 825         line-height: 1.8em;
 826 }
 827
 828 .cbi-value-field {
 829         width: 58%;
 830         margin-left: 40%;
 831         padding: 0.25em 0;
 832 }
 833
 834 .td.cbi-value-field {
 835         width: auto;
 836         margin-left: 0;
 837         align-self: center;
 838         vertical-align: middle;
 839 }
 840
 841 .cbi-value-description {
 842         background-image: url(/luci-static/resources/cbi/help.gif);
 843         background-position: .25em .25em;
 844         background-repeat: no-repeat;
 845         margin: .25em 0 0 0;
 846         padding: .25em .25em .25em 1.75em;
 847 }
 848
 849 .cbi-section-create {
 850         padding: 0 0 .25em 0;
 851         margin: -3px;
 852         display: inline-flex;
 853         align-items: center;
 854 }
 855
 856 .cbi-section-create > * {
 857         margin: 3px;
 858         flex: 1 1 auto;
 859 }
 860
 861 .cbi-section-create > * > input {
 862         width: 100%;
 863 }
 864
 865 .cbi-section-remove > .cbi-button {
 866         margin-bottom: -1px;
 867         border-radius: 3px 3px 0 0;
 868 }
 869
 870 .cbi-section-node + .cbi-section-create {
 871         padding-top: 0;
 872 }
 873
 874 div.cbi-map-descr {
 875         margin-bottom: 1em;
 876 }
 877
 878 div.cbi-optionals {
 879         padding: 0.25em;
 880         border-bottom: 1px dotted #bbbbbb;
 881 }
 882
 883 .cbi-section-node {
 884         clear: both;
 885         padding-bottom: 0;
 886         position: relative;
 887         border: 1px dotted #555;
 888         background: #fff;
 889         margin-bottom: .5em;
 890 }
 891
 892 .cbi-section-node-tabbed {
 893         border-top: none;
 894         margin-top: -.5em;
 895 }
 896
 897 .cbi-section-node .cbi-value:last-child,
 898 .cbi-section-node .cbi-optionals:last-child {
 899         border-bottom: none;
 900 }
 901
 902 .table.cbi-section-table {
 903         width: 100%;
 904         font-size: 95%;
 905         border: 1px dotted #444;
 906         background: #fff;
 907         margin: 0 0 .5em 0;
 908 }
 909
 910 .cbi-section-node > .table.cbi-section-table {
 911         border: none;
 912         margin: 0;
 913 }
 914
 915 .tr.cbi-section-table-descr .th {
 916         font-weight: normal;
 917         font-size: 90%;
 918         vertical-align: top;
 919 }
 920
 921 .td.cbi-section-table-optionals {
 922         text-align: left !important;
 923         padding-top: 1em;
 924 }
 925
 926 .th.cbi-section-actions,
 927 .td.cbi-section-actions {
 928         align-self: center;
 929         vertical-align: middle;
 930 }
 931
 932 .th.cbi-section-actions > *,
 933 .td.cbi-section-actions > * {
 934         display: flex;
 935         justify-content: flex-end;
 936         flex-direction: row;
 937         flex: 1 1 150px;
 938         margin: auto -1px auto auto;
 939 }
 940
 941 .td.cbi-section-actions > * > *,
 942 .td.cbi-section-actions > * > form > * {
 943         flex: 1 1 4em;
 944         margin: 0 1px;
 945 }
 946
 947 .td.cbi-section-actions > * > form {
 948         display: flex;
 949         margin: 0;
 950 }
 951
 952 .cbi-page-actions {
 953         display: flex;
 954         justify-content: flex-end;
 955         margin: -3px;
 956 }
 957
 958 .cbi-page-actions > form {
 959         display: flex;
 960 }
 961
 962 .cbi-page-actions > * {
 963         flex: 0 1 auto;
 964         margin: 3px;
 965 }
 966
 967 .cbi-page-actions > form > * {
 968         flex: 1;
 969         margin: 0 3px 0 0;
 970 }
 971
 972 .cbi-page-actions > .cbi-button-save,
 973 .cbi-page-actions > .cbi-button-apply,
 974 .cbi-page-actions > form[method="post"] {
 975         margin-left: auto;
 976 }
 977
 978 *::-ms-backdrop,
 979 .cbi-page-actions > .cbi-button-save,
 980 .cbi-page-actions > .cbi-button-apply,
 981 .cbi-page-actions > form[method="post"] {
 982         margin-left: 50%;
 983 }
 984
 985 .cbi-page-actions > .cbi-button-apply + .cbi-button-save,
 986 .cbi-page-actions > .cbi-button-negative + .cbi-button-save,
 987 .cbi-page-actions > .cbi-button-save + form[method="post"],
 988 .cbi-page-actions > form[method="post"] + form[method="post"] {
 989         margin-left: 3px;
 990 }
 991
 992 .th[data-widget="button"], .td[data-widget="button"],
 993 .th[data-widget="fvalue"], .td[data-widget="fvalue"] {
 994         flex: 1 1 2em;
 995         text-align: center;
 996 }
 997
 998 #cbi-network-switch_vlan .th,
 999 #cbi-network-switch_vlan .td {
1000         flex-basis: 12%;
1001 }
1002
1003 .td[data-title]::before {
1004         content: attr(data-title) ":\20";
1005         font-weight: bold;
1006         text-align: left;
1007         display: none;
1008         padding: 1px 0;
1009         white-space: nowrap;
1010 }
1011
1012 .td[data-description]::after {
1013         content: attr(data-description);
1014         font-size: 90%;
1015         text-align: left;
1016         display: none;
1017         background: url(/luci-static/resources/cbi/help.gif) left top no-repeat;
1018         padding: .125em 0 .125em 18px;
1019         margin: .125em 0;
1020 }
1021
1022 .tr.placeholder .td[data-title]::before,
1023 .tr.placeholder .td[data-description]::after {
1024         display: none;
1025 }
1026
1027 .tr[data-title]::before,
1028 .tr.cbi-section-table-titles.named::before {
1029         content: attr(data-title) "\20";
1030         font-weight: bold;
1031         text-align: left;
1032         display: table-cell;
1033         align-self: center;
1034         flex: 1 1 5%;
1035         padding: .25em;
1036         white-space: normal;
1037         word-wrap: break-word;
1038         vertical-align: middle;
1039 }
1040
1041 .cbi-value-helpicon img {
1042         vertical-align: bottom;
1043 }
1044
1045 .td.cbi-value-error {
1046         border-color: red;
1047 }
1048
1049 .cbi-value-error input,
1050 .cbi-value-error select {
1051         color: red;
1052         background-color: #ffcccc;
1053 }
1054
1055 .cbi-section-error {
1056         color: red;
1057         background-color: white;
1058         font-size: 95%;
1059         border: 1px dotted red;
1060         margin: 3px;
1061         padding: 3px;
1062 }
1063
1064 .cbi-value-field var {
1065         color: #2222FF;
1066 }
1067
1068 ul.cbi-tabmenu {
1069         list-style-type: none;
1070         display: flex;
1071         margin: 0 0 .5em 0 !important;
1072         padding: 0 0 0 5px;
1073         border-bottom: 1px solid #bbb;
1074 }
1075
1076 #tabmenu > ul.cbi-tabmenu {
1077         margin: 0 !important;
1078 }
1079
1080 ul.cbi-tabmenu li {
1081         display: inline-flex;
1082         margin: 0 5px -1px 0;
1083         flex: 0 1 auto;
1084         border: 1px solid #bbb;
1085         border-bottom: none;
1086         border-radius: 3px 3px 0 0;
1087         background: linear-gradient(#ddd 90%, #aaa 100%);
1088         color: #888;
1089         overflow: hidden;
1090         text-overflow: ellipsis;
1091         word-wrap: break-word;
1092 }
1093
1094 ul.cbi-tabmenu li a,
1095 ul.cbi-tabmenu li a:hover {
1096         text-decoration: none;
1097         color: inherit;
1098         padding: 5px;
1099         flex: 1 1 auto;
1100         width: 100%;
1101         height: 100%;
1102         outline: none;
1103 }
1104
1105 ul.cbi-tabmenu li.cbi-tab {
1106         color: #000;
1107         background: #f5f5f5;
1108 }
1109
1110 ul.cbi-tabmenu li.cbi-tab-disabled[data-errors]::after {
1111         content: attr(data-errors);
1112         background: #c43c35;
1113         color: #fff;
1114         min-width: 12px;
1115         line-height: 14px;
1116         border-radius: 8px;
1117         text-align: center;
1118         margin: 4px 5px 4px 0;
1119         padding: 1px 2px;
1120         word-wrap: normal;
1121         flex: 1 0 auto;
1122 }
1123
1124 .cbi-section ul.cbi-tabmenu li.cbi-tab {
1125         background: #fff;
1126 }
1127
1128 .cbi-tab-descr {
1129         background-image: url(/luci-static/resources/cbi/help.gif);
1130         background-position: .25em 50%;
1131         background-repeat: no-repeat;
1132         border-bottom: 1px solid #ccc;
1133         margin: 0 .25em .25em .25em;
1134         padding: .5em .5em .5em 2em;
1135 }
1136
1137 [data-tab-title] {
1138         height: 0;
1139         opacity: 0;
1140         overflow: hidden;
1141 }
1142
1143 [data-tab-active="true"] {
1144         opacity: 1;
1145         height: auto;
1146         overflow: visible;
1147         transition: opacity .25s ease-in;
1148 }
1149
1150
1151 .cbi-dropdown {
1152         border: 1px inset #000;
1153         display: inline-flex;
1154         cursor: pointer;
1155         background: #eee;
1156         position: relative;
1157         padding: 0;
1158         color: #000;
1159         max-width: 100%;
1160 }
1161
1162 .cbi-dropdown:not(.btn):not(.cbi-button) {
1163         min-width: 20em;
1164 }
1165
1166 .cbi-dropdown:not(.btn):not(.cbi-button):hover {
1167         background: #fff;
1168 }
1169
1170 .cbi-dropdown:focus,
1171 .cbi-dynlist > .item:focus {
1172         outline: 2px solid #4b6e9b;
1173 }
1174
1175 .cbi-dropdown > ul {
1176         margin: 0 !important;
1177         padding: 0;
1178         list-style: none;
1179         overflow-x: hidden;
1180         overflow-y: auto;
1181         display: flex;
1182         width: 100%;
1183 }
1184
1185 .cbi-dropdown > ul.preview {
1186         display: none;
1187 }
1188
1189 .cbi-dropdown > .open {
1190         border: 2px outset #eee;
1191         flex-basis: 15px;
1192 }
1193
1194 .cbi-dropdown > .open,
1195 .cbi-dropdown > .more {
1196         flex-grow: 0;
1197         flex-shrink: 0;
1198         display: flex;
1199         flex-direction: column;
1200         justify-content: center;
1201         text-align: center;
1202         padding: 0 .25em;
1203 }
1204
1205 .cbi-dropdown > .more,
1206 .cbi-dropdown > ul > li[placeholder] {
1207         color: #777;
1208         font-weight: bold;
1209         text-shadow: 1px 1px 0px #fff;
1210         display: none;
1211         min-height: 22px;
1212 }
1213
1214 .cbi-dropdown > ul > li {
1215         display: none;
1216         padding: .25em;
1217         white-space: nowrap;
1218         overflow: hidden;
1219         text-overflow: ellipsis;
1220         flex-shrink: 1;
1221         flex-grow: 1;
1222         align-items: center;
1223         align-self: center;
1224         min-height: 22px;
1225 }
1226
1227 .cbi-dropdown > ul > li .hide-open { display: initial; }
1228 .cbi-dropdown > ul > li .hide-close { display: none; }
1229
1230 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1231         border-left: 1px solid #ccc;
1232 }
1233
1234 .cbi-dropdown[empty] > ul {
1235         max-width: 1px;
1236 }
1237
1238 .cbi-dropdown > ul > li > form {
1239         display: none;
1240         margin: 0;
1241         padding: 0;
1242         pointer-events: none;
1243 }
1244
1245 .cbi-dropdown > ul > li img {
1246         vertical-align: middle;
1247         margin-right: .25em;
1248 }
1249
1250 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1251         margin: 0;
1252 }
1253
1254 .cbi-dropdown[open] {
1255         position: relative;
1256 }
1257
1258 .cbi-dropdown[open] > ul.dropdown {
1259         display: block;
1260         background: #f6f6f5;
1261         border: 1px solid #918e8c;
1262         box-shadow: 0 0 4px #918e8c;
1263         position: absolute;
1264         z-index: 1100;
1265         max-width: none;
1266         min-width: 100%;
1267         width: auto;
1268         transition: max-height .125s ease-in;
1269 }
1270
1271 .cbi-dropdown > ul > li[display],
1272 .cbi-dropdown[open] > ul.preview,
1273 .cbi-dropdown[open] > ul.dropdown > li,
1274 .cbi-dropdown[multiple] > ul > li > label,
1275 .cbi-dropdown[multiple][open] > ul.dropdown > li,
1276 .cbi-dropdown[multiple][more] > .more,
1277 .cbi-dropdown[multiple][empty] > .more {
1278         flex-grow: 1;
1279         display: flex;
1280         align-items: center;
1281 }
1282
1283 .cbi-dropdown[empty] > ul > li,
1284 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1285         display: block;
1286 }
1287
1288 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
1289 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: initial; }
1290
1291 .cbi-dropdown[open] > ul.dropdown > li {
1292         border-bottom: 1px solid #ccc;
1293 }
1294
1295 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1296         background: #b0d0f0;
1297 }
1298
1299 .cbi-dropdown[open] > ul.dropdown > li.focus,
1300 .cbi-dropdown[open] > ul.dropdown > li:hover {
1301         background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
1302 }
1303
1304 .cbi-dropdown[open] > ul.dropdown > li {
1305         color: #444;
1306 }
1307
1308 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1309         margin-bottom: 0;
1310         border-bottom: none;
1311 }
1312
1313 .cbi-dropdown[open] > ul.dropdown > li[unselectable] {
1314         opacity: 0.7;
1315 }
1316
1317 .cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
1318         width: 100%;
1319 }
1320
1321 .cbi-dropdown[disabled] {
1322         pointer-events: none;
1323         opacity: .6;
1324 }
1325
1326 .cbi-dynlist {
1327         height: auto;
1328         min-height: 30px;
1329         min-width: 210px;
1330         max-width: 100%;
1331         width: auto;
1332         display: inline-flex;
1333         flex-direction: column;
1334 }
1335
1336 .cbi-dynlist > .item {
1337         margin-bottom: 4px;
1338         background: #eee;
1339         padding: 2px 2em 2px 4px;
1340         border: 1px outset #000;
1341         border-radius: 3px;
1342         position: relative;
1343         pointer-events: none;
1344         overflow: hidden;
1345         text-overflow: ellipsis;
1346         white-space: nowrap;
1347 }
1348
1349 .cbi-dynlist > .item::after {
1350         content: "×";
1351         position: absolute;
1352         display: inline-flex;
1353         align-items: center;
1354         top: -1px;
1355         right: -1px;
1356         bottom: -1px;
1357         padding: 0 6px;
1358         border: 1px outset #000;
1359         background: #fff;
1360         border-radius: 0 3px 3px 0;
1361         font-weight: bold;
1362         color: #c44;
1363         pointer-events: auto;
1364         height: auto;
1365 }
1366
1367 .cbi-dynlist > .add-item {
1368         display: flex;
1369 }
1370
1371 .cbi-dynlist > .add-item > input {
1372         flex: 1 1 auto;
1373 }
1374
1375 input[type="text"] + .cbi-button,
1376 input[type="password"] + .cbi-button,
1377 select + .cbi-button {
1378         border-radius: 0 3px 3px 0;
1379         border: 1px outset #000;
1380         margin: 0 0 0 -2px;
1381         padding: 0 6px;
1382         vertical-align: top;
1383         display: inline-block;
1384         height: 22px;
1385         font-size: 12px;
1386         line-height: 20px;
1387 }
1388
1389 .cbi-tooltip-container {
1390         cursor: help;
1391 }
1392
1393 .cbi-tooltip {
1394         position: absolute;
1395         z-index: 1000;
1396         left: -1000px;
1397         border-radius: 3px;
1398         background: #fff;
1399         padding: 2px 5px;
1400         white-space: pre;
1401         opacity: 0;
1402         transition: opacity .25s ease-out;
1403         pointer-events: none;
1404         box-shadow: 0 0 2px #444;
1405         color: #444;
1406 }
1407
1408 .cbi-tooltip-container:hover .cbi-tooltip {
1409         left: auto;
1410         opacity: 1;
1411         transition: opacity .25s ease-in;
1412         white-space: normal;
1413 }
1414
1415 .cbi-progressbar {
1416         background: #ddd;
1417         border: 1px solid #bbb;
1418         border-radius: 3px;
1419         position: relative;
1420         min-width: 170px;
1421         height: 20px;
1422         margin: 4px 0;
1423         line-height: 20px;
1424 }
1425
1426 .cbi-progressbar > div {
1427         background: #90c0e0;
1428         height: 100%;
1429         transition: width .25s ease-in;
1430         width: 0%;
1431 }
1432
1433 .cbi-progressbar::after {
1434         position: absolute;
1435         bottom: 0;
1436         top: 0;
1437         right: 0;
1438         left: 0;
1439         text-align: center;
1440         text-shadow: 0 0 2px #fff;
1441         content: attr(title);
1442         white-space: pre;
1443         overflow: hidden;
1444         text-overflow: ellipsis;
1445 }
1446
1447
1448 .zonebadge .cbi-tooltip {
1449         padding: 1px;
1450         background: inherit;
1451         margin: -1.6em 0 0 -5px;
1452 }
1453
1454
1455 .zone-forwards {
1456         display: flex;
1457         flex-wrap: wrap;
1458 }
1459
1460 .zone-forwards > * {
1461         flex: 1 1 45%;
1462         padding: 1px;
1463 }
1464
1465 .zone-forwards > span {
1466         flex-basis: 10%;
1467         text-align: center;
1468 }
1469
1470 .zone-forwards .zone-src,
1471 .zone-forwards .zone-dest {
1472         display: flex;
1473         flex-direction: column;
1474 }
1475
1476
1477 .left, .left::before, .left::after { text-align: left !important; }
1478 .right, .right::before, .right::after { text-align: right !important; }
1479 .center, .center::before, .center::after { text-align: center !important; }
1480
1481 .top, .top::before, .top::after { vertical-align: top !important; }
1482 .middle, .middle::before, .middle::after { vertical-align: middle !important; }
1483 .bottom, .bottom::before, .bottom::after { vertical-align: bottom !important; }
1484
1485 .td.top { align-self: flex-start; vertical-align: top; }
1486 .td.middle { align-self: center; vertical-align: middle; }
1487 .td.bottom { align-self: flex-end; vertical-align: bottom; }
1488
1489 .luci {
1490         position: absolute;
1491         bottom: 0;
1492         left: 1em;
1493         height: 1.5em;
1494         font-size: 80%;
1495         margin-bottom: 0;
1496 }
1497
1498 .luci a:link,
1499 .luci a:visited {
1500         background-color: transparent;
1501         color: #666666;
1502         text-decoration: none;
1503         font-size: 70%;
1504 }
1505
1506 .inline {
1507         display: inline;
1508 }
1509
1510 .error500 {
1511         white-space: normal;
1512         border: 1px dotted #ff0000;
1513         background-color: #ffffff;
1514         color: #000000;
1515         padding: 0.5em;
1516 }
1517
1518
1519 .ifacebadge, .ifacebox {
1520         display: inline-flex;
1521         align-content: center;
1522         border: 1px solid #ccc;
1523         border-radius: 3px;
1524         padding: 2px;
1525         background: #fff;
1526 }
1527
1528 .ifacebox-head {
1529         background: #eee;
1530 }
1531
1532 .ifacebox-head.active {
1533         background: #90c0e0;
1534 }
1535
1536 .ifacebadge, .zonebadge {
1537         align-items: center;
1538 }
1539
1540 .ifacebadge > * {
1541         align-self: center;
1542 }
1543
1544 .ifacebadge > img,
1545 .ifacebadge > em {
1546         margin-right: 5px;
1547         display: inline-block;
1548         height: 16px;
1549 }
1550
1551 .ifacebadge-active {
1552         border-color: #000000;
1553         font-weight: bold;
1554 }
1555
1556 .ifacebox {
1557         flex-direction: column;
1558         margin: 0;
1559         padding: 0;
1560         min-width: 100px;
1561         text-align: center;
1562 }
1563
1564 .ifacebox > * {
1565         padding: 2px;
1566 }
1567
1568 .td > .ifacebadge,
1569 .td > .zonebadge {
1570         margin: 0;
1571         vertical-align: top;
1572 }
1573
1574 .network-status-table {
1575         display: flex;
1576         flex-wrap: wrap;
1577         margin: -.25em -.25em .25em -.25em;
1578 }
1579
1580 .network-status-table .ifacebox {
1581         margin: .25em;
1582         font-size: 90%;
1583         flex-grow: 1;
1584 }
1585
1586 .network-status-table .ifacebox-body {
1587         display: flex;
1588         flex-direction: column;
1589         flex: 1 0 auto;
1590         padding: .5em;
1591 }
1592
1593 .network-status-table .ifacebox-body > span {
1594         flex: 10 10 auto;
1595 }
1596
1597 .network-status-table .ifacebox-body > div {
1598         display: flex;
1599         flex-wrap: wrap;
1600 }
1601
1602 .ifacebadge.large,
1603 .network-status-table .ifacebox-body .ifacebadge {
1604         flex: 1;
1605         -webkit-flex: 1 1 auto;
1606         padding: .5em;
1607         min-width: 220px;
1608         white-space: nowrap;
1609 }
1610
1611 .network-status-table .ifacebox-body .ifacebadge {
1612         margin: .5em 0 0 0;
1613 }
1614
1615 #dsl_status_table .ifacebox-body span > strong {
1616         display: inline-block;
1617         min-width: 35%;
1618 }
1619
1620
1621 .zonebadge {
1622         padding: 2px;
1623         display: inline-block;
1624         white-space: nowrap;
1625         border-radius: 3px;
1626 }
1627
1628 .zonebadge > em,
1629 .zonebadge > strong {
1630         margin: 3px;
1631 }
1632
1633 .zonebadge input {
1634         width: 6em;
1635         height: 1.5em;
1636 }
1637
1638 .zonebadge .ifacebadge,
1639 .cbi-dropdown .ifacebadge {
1640         margin: 1px;
1641 }
1642
1643 .zonebadge .ifacebadge img,
1644 .zonebadge .ifacebadge em,
1645 .cbi-dropdown .ifacebadge img,
1646 .cbi-dropdown .ifacebadge em {
1647         margin: 0 1px;
1648 }
1649
1650 .zonebadge-empty {
1651         border: 1px dashed #AAAAAA;
1652         color: #AAAAAA;
1653         font-style: italic;
1654         font-size: smaller;
1655 }
1656
1657
1658 .uci-change-list {
1659         font-family: monospace;
1660         white-space: pre;
1661 }
1662
1663 .uci-change-list del,
1664 .uci-change-list ins,
1665 .uci-change-list var,
1666 .uci-change-legend-label del,
1667 .uci-change-legend-label ins,
1668 .uci-change-legend-label var {
1669         text-decoration: none;
1670         font-style: normal;
1671         border: 1px solid #ccc;
1672         background: #eee;
1673         padding: 2px;
1674         display: block;
1675         line-height: 15px;
1676         margin-bottom: 1px;
1677 }
1678
1679 .uci-change-list ins,
1680 .uci-change-legend-label ins {
1681         border-color: #0f0;
1682         background: #cfc;
1683 }
1684
1685 .uci-change-list del,
1686 .uci-change-legend-label del {
1687         border-color: #f00;
1688         background: #fcc;
1689 }
1690
1691 .uci-change-list var,
1692 .uci-change-legend-label var {
1693         border-color: #ccc;
1694         background: #eee;
1695 }
1696
1697 .uci-change-list var ins,
1698 .uci-change-list var del {
1699         display: inline-block;
1700         border: none;
1701         width: 100%;
1702         padding: 0;
1703 }
1704
1705 .uci-change-legend {
1706         padding: 5px;
1707 }
1708
1709 .uci-change-legend-label {
1710         width: 150px;
1711         float: left;
1712         font-size: 80%;
1713 }
1714
1715 .uci-change-legend-label>ins,
1716 .uci-change-legend-label>del,
1717 .uci-change-legend-label>var {
1718         float: left;
1719         margin-right: 4px;
1720         width: 12px;
1721         height: 12px;
1722         display: block;
1723         position: relative;
1724 }
1725
1726 .uci-change-legend-label var ins,
1727 .uci-change-legend-label var del {
1728         border: none;
1729         position: absolute;
1730         top: 1px;
1731         left: 1px;
1732         right: 1px;
1733         bottom: 1px;
1734 }
1735
1736
1737 @keyframes flash {
1738         0% { opacity: 1; }
1739         50% { opacity: .5; }
1740         100% { opacity: 1; }
1741 }
1742
1743 .flash {
1744         animation: flash .35s;
1745 }
1746
1747 .spinning {
1748         position: relative;
1749         padding-left: 32px !important;
1750 }
1751
1752 .spinning::before {
1753         position: absolute;
1754         top: 0;
1755         left: 0;
1756         bottom: 0;
1757         width: 32px;
1758         content: " ";
1759         background: url(../resources/icons/loading.gif) no-repeat center;
1760         background-size: 16px;
1761 }
1762
1763 }
1764
1765 @media screen and (max-width: 992px) {
1766         body {
1767                 -webkit-text-size-adjust: 100%;
1768         }
1769
1770         #maincontainer {
1771                 flex-direction: column;
1772                 width: 100%;
1773         }
1774
1775         #maincontent {
1776                 width: 96%;
1777                 margin: auto;
1778                 flex-basis: auto;
1779         }
1780
1781         #mainmenu {
1782                 border: none;
1783                 border-radius: 0;
1784                 max-width: none;
1785                 background: #000;
1786                 box-shadow: 0 0 2px #444;
1787                 padding: 0;
1788                 border-top: 1px solid #444;
1789                 position: relative;
1790         }
1791
1792         #mainmenu ul > li.selected > a {
1793                 background: #444;
1794                 color: #fff;
1795                 border-top: none;
1796         }
1797
1798         #mainmenu ul > li.selected:not(.active) > ul {
1799                 max-height: 0;
1800                 visibility: hidden;
1801         }
1802
1803         #mainmenu ul > li > a {
1804                 flex: 1 1 auto;
1805                 color: #fff;
1806                 border: 1px solid #444;
1807                 border-width: 0 0 1px 1px;
1808         }
1809
1810         #mainmenu ul.l1 {
1811                 display: flex;
1812                 flex-direction: row;
1813                 flex-wrap: wrap;
1814                 position: relative;
1815                 margin-left: -1px;
1816                 width: 100%;
1817         }
1818
1819         #mainmenu ul.l1 > li {
1820                 display: inline-flex;
1821                 flex: 1 1 auto;
1822                 position: relative;
1823                 height: 2em;
1824         }
1825
1826         #mainmenu ul.l1 ul.l2 {
1827                 position: absolute;
1828                 top: 2em;
1829                 right: 0;
1830                 z-index: 1000;
1831                 background: #000;
1832                 box-shadow: 0 0 2px #444;
1833                 min-width: 120px;
1834                 display: block;
1835         }
1836
1837         #mainmenu ul.l1 ul.l2.align-left {
1838                 right: auto;
1839                 left: 0;
1840         }
1841
1842         #mainmenu ul.l2 > li {
1843                 display: block;
1844         }
1845
1846         #mainmenu ul.l2 > li > a {
1847                 padding: .5em;
1848         }
1849
1850         #mainmenu ul li.mainmenu-item-logout {
1851                 margin-top: 0;
1852                 margin-left: auto;
1853         }
1854
1855         #mainmenu ul li.mainmenu-item-logout::before {
1856                 content: "\0a";
1857                 flex: 10;
1858                 border: 1px solid #444;
1859                 border-width: 0 0 1px 1px;
1860         }
1861
1862         .table {
1863                 display: flex;
1864                 flex-direction: column;
1865                 width: 100%;
1866         }
1867
1868         .tr {
1869                 display: flex;
1870                 flex-direction: row;
1871                 flex-wrap: wrap;
1872                 align-items: flex-end;
1873         }
1874
1875         .th, .td {
1876                 flex: 2 2 25%;
1877                 align-self: flex-start;
1878                 overflow: hidden;
1879                 text-overflow: ellipsis;
1880                 word-wrap: break-word;
1881                 display: inline-block;
1882         }
1883
1884         .td.cbi-dropdown-open {
1885                 overflow: visible;
1886         }
1887
1888         .td select {
1889                 word-wrap: normal;
1890         }
1891
1892         .td[data-widget="button"],
1893         .td[data-widget="fvalue"] {
1894                 flex: 1 1 12.5%;
1895                 text-align: left;
1896         }
1897
1898         .td.cbi-value-field {
1899                 align-self: flex-start;
1900         }
1901
1902         .td.cbi-value-field .cbi-button {
1903                 width: 100%;
1904         }
1905
1906         .table.cbi-section-table {
1907                 border: none;
1908                 background: none;
1909                 margin: 0;
1910         }
1911
1912         .tr.table-titles,
1913         .cbi-section-table-titles,
1914         .cbi-section-table-descr {
1915                 display: none;
1916         }
1917
1918         .cbi-section-table-row {
1919                 display: flex;
1920                 flex-direction: row;
1921                 flex-wrap: wrap;
1922                 border: 1px dotted #444;
1923                 margin: 0 0 .5em 0;
1924                 background: #fff;
1925         }
1926
1927         .cbi-section-table-row:hover {
1928                 border: 1px solid #4a6b7c;
1929         }
1930
1931         .cbi-section-table + .cbi-section-create {
1932                 padding-top: 0;
1933         }
1934
1935         .tr[data-title]::before {
1936                 display: block;
1937                 flex: 1 1 100%;
1938                 background: #eef;
1939         }
1940
1941         .td[data-title]::before,
1942         .td[data-description]::after {
1943                 display: block;
1944         }
1945
1946         .td[data-title] ~ .td.cbi-section-actions {
1947                 align-self: flex-start;
1948         }
1949
1950         .td[data-title] ~ .td.cbi-section-actions::before {
1951                 display: block;
1952                 content: "\a0";
1953         }
1954
1955         .hide-sm,
1956         .hide-xs {
1957                 display: none;
1958         }
1959
1960         #dsl_status_table .ifacebox-body > span > strong {
1961                 min-width: 50%;
1962         }
1963 }
1964
1965 @media screen and (max-width: 480px) {
1966         body {
1967                 font-size: 16px;
1968         }
1969
1970         input, textarea, select, .cbi-button, .cbi-dropdown {
1971                 font-size: 16px !important;
1972                 line-height: 30px;
1973         }
1974
1975         select, input[type="text"], input[type="password"] {
1976                 width: 100%;
1977                 height: 30px;
1978                 border-radius: 3px;
1979         }
1980
1981         input[type="text"] + .cbi-button,
1982         input[type="password"] + .cbi-button,
1983         select + .cbi-button {
1984                 height: 30px;
1985                 line-height: 30px;
1986                 margin-left: -5px;
1987                 min-width: 30px;
1988         }
1989
1990         input.cbi-input-password,
1991         [data-dynlist] > .add-item > input {
1992                 width: calc(100% - 25px);
1993         }
1994
1995         .label {
1996                 font-size: 14px;
1997         }
1998
1999         .cbi-dynlist,
2000         .cbi-dropdown {
2001                 min-width: 100%;
2002                 height: auto;
2003                 display: flex;
2004         }
2005
2006         .cbi-dropdown > .more,
2007         .cbi-dropdown > ul > li,
2008         .cbi-dropdown > ul > li[placeholder] {
2009                 min-height: 30px;
2010         }
2011
2012         .btn, .cbi-button {
2013                 font-size: 16px !important;
2014                 line-height: 30px;
2015                 height: 30px;
2016                 overflow: hidden;
2017                 text-overflow: ellipsis;
2018         }
2019
2020         #maincontent {
2021                 padding: .25em;
2022         }
2023
2024         #tabmenu {
2025                 margin: -.25em -.25em 1em -.25em;
2026         }
2027
2028         .th, .td {
2029                 flex: 2 2 50%;
2030         }
2031
2032         .td.cbi-value-field {
2033                 flex-basis: 100%;
2034         }
2035
2036         .td.cbi-value-field[data-widget="dvalue"] {
2037                 flex-basis: 50%;
2038         }
2039
2040         .td.cbi-value-field[data-widget="button"],
2041         .td.cbi-value-field[data-widget="fvalue"] {
2042                 flex-basis: 25%;
2043                 text-align: left;
2044         }
2045
2046         .cbi-value-title {
2047                 float: none;
2048                 font-weight: bold;
2049         }
2050
2051         .cbi-value-field {
2052                 width: 100%;
2053                 margin: 0;
2054         }
2055
2056         .cbi-value-description {
2057                 margin-top: 5px;
2058                 display: block;
2059         }
2060
2061         .cbi-section-create {
2062                 margin-bottom: 1em;
2063         }
2064
2065         .cbi-page-actions {
2066                 flex-wrap: wrap;
2067                 margin: -2px;
2068         }
2069
2070         .cbi-page-actions > .cbi-button-link {
2071                 flex-basis: 100%;
2072                 margin-right: 2px;
2073         }
2074
2075         .cbi-page-actions > * {
2076                 flex: 1 1 auto;
2077                 margin: 2px;
2078         }
2079
2080         ul.cbi-tabmenu {
2081                 padding: 0 3px;
2082         }
2083
2084         .hide-xs {
2085                 display: none;
2086         }
2087
2088         #cbi-network .td[id] > strong {
2089                 display: block;
2090         }
2091
2092         #cbi-network-switch_vlan .td.cbi-section-actions {
2093                 flex-basis: 100%;
2094         }
2095
2096         #dsl_status_table .ifacebox-body > span > strong {
2097                 display: block;
2098                 width: 100%;
2099                 margin-top: .5em;
2100         }
2101
2102         #cbi-firewall-rule .td[data-widget="fvalue"],
2103         #cbi-firewall-redirect .td[data-widget="fvalue"] {
2104                 display: none;
2105         }
2106 }