package/luci/themes/luci-theme-freifunk-generic/htdocs/luci-static/freifunk-generic/cascade.css

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