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

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