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