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

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