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