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