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