package/luci/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: Verdana, Arial, sans-serif;
  22         font-size: 11pt;
  23         line-height: 100%;
  24         padding-bottom: 1.5em;
  25 }
  26
  27 * {
  28         margin: 0;
  29         padding: 0;
  30         box-sizing: border-box;
  31 }
  32
  33 .table { display: table; }
  34 .tr { display: table-row; }
  35 .thead { display: table-header-group; }
  36 .tbody { display: table-row-group; }
  37 .tfoot { display: table-footer-group; }
  38 .td, .th { display: table-cell; }
  39 .th { font-weight: bold; }
  40
  41 .table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
  42 .table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
  43
  44 .nowrap {
  45         white-space: nowrap;
  46 }
  47
  48 a img {
  49         border: none;
  50         text-decoration: none;
  51 }
  52
  53 ul.tabmenu {
  54         margin: 0;
  55         clear: both;
  56         display: block;
  57         vertical-align: bottom;
  58         font-size: 10pt;
  59         padding: 5px 0 0 5px;
  60 }
  61
  62 div.tabmenu2 {
  63         background-color: #AAAAAA;
  64         background-image: url(tabbg.png);
  65         background-repeat: repeat-x;
  66         margin-top: -1px;
  67         border: 1px solid #444444;
  68         border-bottom: none;
  69 }
  70
  71 div.tabmenu3,
  72 div.tabmenu4,
  73 div.tabmenu5 {
  74         background-color: #AAAAAA;
  75         background-image: url(tabbg.png);
  76         background-repeat: repeat-x;
  77         border: none;
  78 }
  79
  80 ul.tabmenu li {
  81         float: left;
  82         display: block;
  83         overflow: hidden;
  84 }
  85
  86 .lang_he ul.tabmenu li {
  87         float: right;
  88 }
  89
  90 ul.tabmenu li a {
  91         text-decoration: none;
  92         color: #444444;
  93         display: block;
  94         padding: 3px 8px;
  95         margin: 0 2px;
  96         line-height: 1.3em;
  97         border: 1px solid transparent;
  98         border-bottom: none;
  99         font-size: 85%;
 100 }
 101
 102 ul.tabmenu li.active a {
 103         font-weight: bold;
 104         color: #000000;
 105         background: #f5f5f5;
 106         border: 1px solid #AAAAAA;
 107         border-bottom: none;
 108 }
 109
 110 ul.tabmenu li a:hover {
 111         color: #444444;
 112         border-color: #444444;
 113 }
 114
 115 ul.l1 li a {
 116         background-color: #AAAAAA;
 117         background-image: url(tabbg.png);
 118         background-repeat: repeat-x;
 119         border-color: #444444;
 120 }
 121
 122 ul.l1 li.tabmenu-item-logout a {
 123         margin-left: 30px;
 124 }
 125
 126 .lang_he ul.l1 li.tabmenu-item-logout a {
 127         margin-right: 30px;
 128 }
 129
 130 abbr,
 131 acronym {
 132         font-style: normal;
 133         font-variant: normal;
 134 }
 135
 136 abbr[title],
 137 acronym[title] {
 138         border-bottom: 1px dotted;
 139         cursor: help;
 140 }
 141
 142 a:link abbr[title],
 143 a:visited abbr[title],
 144 a:link acronym[title],
 145 a:visited acronym[title] {
 146         cursor: pointer;
 147 }
 148
 149 code {
 150         font-family: monospace;
 151         white-space: pre;
 152 }
 153
 154 #maincontent ul {
 155         margin-left: 2em;
 156 }
 157
 158 .warning {
 159         color: red;
 160         background-color: white;
 161         font-weight: bold;
 162 }
 163
 164 .clear {
 165         clear: both;
 166 }
 167
 168 .skiplink,
 169 .navigation,
 170 .hidden {
 171         position: absolute;
 172         left: -1000px;
 173         top: -1000px;
 174         width: 0px;
 175         height: 0px;
 176         overflow: hidden;
 177         display: inline;
 178 }
 179
 180 .error {
 181         color: #ff0000;
 182         background-color: white;
 183 }
 184
 185 .alert-message {
 186         font-size: 9pt;
 187         font-weight: normal;
 188         padding: .5em;
 189         border-radius: 3px;
 190         color: #000;
 191 }
 192
 193 .alert-message.notice {
 194         background: linear-gradient(#ccc 0%, #eee 100%);
 195         color: #4a6b7c;
 196 }
 197
 198 .alert-message.warning {
 199         background: linear-gradient(#dda 0%, #dd8 100%);
 200         color: #c00;
 201 }
 202
 203 .alert-message > * {
 204         margin: .5em;
 205 }
 206
 207 .alert-message > h4 {
 208         font-weight: bold;
 209         font-size: 10pt;
 210 }
 211
 212 div.hostinfo {
 213         float: left;
 214         margin: 0;
 215         padding: 0;
 216         width: auto;
 217         font-size: 80%;
 218         padding: 0.5em;
 219 }
 220
 221 .lang_he div.hostinfo {
 222         float: right;
 223 }
 224
 225 #xhr_poll_status {
 226         cursor: pointer;
 227 }
 228
 229 #xhr_poll_status #xhr_poll_status_off {
 230         font-weight: bold;
 231         color: #FF0000;
 232 }
 233
 234 #xhr_poll_status #xhr_poll_status_on {
 235         font-weight: bold;
 236         color: #00FF00;
 237 }
 238
 239 #menubar {
 240         position: relative;
 241         width: 100%;
 242         background: #000000;
 243         color: #ffffff;
 244 }
 245
 246 #menubar .warning {
 247         color: red;
 248         background-color: #557788;
 249 }
 250
 251 html #menubar a:link,
 252 html #menubar a:visited {
 253         position: relative;
 254         display: block;
 255         padding: 0.5em;
 256         background: #000000;
 257         color: #ffffff;
 258         text-decoration: none;
 259         font-size: 80%;
 260         font-weight: normal;
 261 }
 262
 263
 264 html #menubar a:link:hover,
 265 html #menubar a:visited:hover,
 266 html #menubar a:link:active,
 267 html #menubar a:visited:active,
 268 #menubar a:link:focus,
 269 #menubar a:visited:focus {
 270         background: #000000;
 271         color: #ffff00;
 272         font-weight: bold;
 273 }
 274
 275 html #menubar a:link.active,
 276 html #menubar a:visited.active,
 277 html #menubar a:link.preactive,
 278 html #menubar a:visited.preactive {
 279         background: #000000;
 280         color: #ffff00;
 281         font-weight: bold;
 282 }
 283
 284 html #menubar a:link.warning,
 285 html #menubar a:visited.warning {
 286         background: #000000;
 287         color: red;
 288         font-weight: bold;
 289 }
 290
 291 #modemenu {
 292         width: auto;
 293         background: #000000;
 294         color: #ffffff;
 295         list-style: none;
 296         margin-right: 1px;
 297         margin-left: 2em;
 298         float: right;
 299 }
 300
 301 #modemenu li {
 302         float: right;
 303         list-style: none;
 304 }
 305
 306 #savemenu {
 307         float: right;
 308 }
 309
 310 .lang_he #savemenu {
 311         float: left;
 312 }
 313
 314 .lang_de #submenu_admin_uci {
 315         width: 12em;
 316 }
 317
 318 .lang_ru #submenu_admin_uci {
 319         width: 11.5em;
 320 }
 321
 322 textarea#syslog {
 323         width: 98%;
 324         min-height: 500px;
 325         border: 3px solid #cccccc;
 326         padding: 5px;
 327         font-family: monospace;
 328 }
 329
 330 #maincontainer {
 331         clear: both;
 332         width: 96%;
 333         margin: 0 auto;
 334         height:100%;
 335 }
 336
 337 #maincontent {
 338         padding: 0.5em;
 339         background: #f5f5f5;
 340         color: #000000;
 341         font-size: 80%;
 342         border-width: 0 1px 1px 1px;
 343         border-style: solid;
 344         border-color: #444444;
 345 }
 346
 347 .lang_he #maincontent {
 348         direction: rtl;
 349 }
 350
 351 #maincontent h2 {
 352         font-size: 150%;
 353         font-family: Trebuchet MS, Verdana, sans-serif;
 354         font-weight: bold;
 355         margin: 0.25em 0 0.7em 0;
 356         border-bottom: 1px solid;
 357         padding-top: 10px;
 358         padding-bottom: 4px;
 359 }
 360
 361 #maincontent h3 {
 362         margin: 0.5em 0 1.1em 0;
 363         font-size: 125%;
 364         font-weight: bold;
 365         font-style: italic;
 366         font-family: Trebuchet MS, Verdana, sans-serif;
 367         color: #27408B;
 368 }
 369
 370 #maincontent p {
 371         margin-bottom: 1em;
 372 }
 373
 374 .cbi-section {
 375         margin-bottom: 0.5em;
 376         padding: 0.5em 1em;
 377         border: 1px dotted #555555;
 378         background-color: #ffffff;
 379         color: #000000;
 380 }
 381
 382 .cbi-section legend {
 383         font-size: 110%;
 384         font-weight: bold;
 385         height: 1em;
 386         padding: 0 0.25em;
 387         background-color: transparent;
 388         color: #555555;
 389 }
 390
 391 .cbi-section h2 {
 392         margin: 0em 0 0.5em -0.5em !important;
 393 }
 394
 395 .cbi-section h3 {
 396         text-decoration: none !important;
 397         font-weight: bold !important;
 398         color: #555555 !important;
 399         margin: 0.25em !important;
 400         font-size: 100% !important;
 401 }
 402
 403 .cbi-section-descr {
 404         margin-bottom: 0.5em;
 405         font-size: 95%;
 406 }
 407
 408 .cbi-title-ref {
 409         color: inherit;
 410         text-decoration: none;
 411         padding-right: 18px;
 412         background: url('../resources/cbi/link.gif') no-repeat scroll right center;
 413         background-color: inherit;
 414 }
 415
 416 ul.cbi-apply {
 417         font-size: 90%;
 418 }
 419
 420 input:-webkit-input-placeholder {
 421         color: #AAAAAA;
 422 }
 423
 424 input:-moz-placeholder {
 425         color: #AAAAAA;
 426 }
 427
 428 input:-ms-input-placeholder {
 429         color: #AAAAAA;
 430 }
 431
 432 input[type=submit],
 433 input[type=reset],
 434 input[type=image],
 435 input[type=button] {
 436         cursor: pointer;
 437 }
 438
 439 select,
 440 input,
 441 textarea {
 442         background: #eeeeee;
 443         color: #000000;
 444         border-width: 1px;
 445         border-color: #000000;
 446 }
 447
 448 input[type=image] {
 449         border: none;
 450 }
 451
 452 input:focus,
 453 input:hover,
 454 select:focus,
 455 select:hover {
 456         background-color: #ffffff;
 457         color: #000000;
 458 }
 459
 460 input[type=text],
 461 input[type=password] {
 462         padding: 1px 3px;
 463 }
 464
 465 select,
 466 input[type=text],
 467 input[type=password] {
 468         font-size: inherit;
 469         width: 20em;
 470 }
 471
 472 .td select,
 473 .td .cbi-dropdown,
 474 .td input[type=text],
 475 .td input[type=password] {
 476         width: 99%;
 477 }
 478
 479 img.cbi-image-button {
 480         cursor: pointer;
 481         margin: 0 2px;
 482         vertical-align: middle;
 483 }
 484
 485 .btn, .cbi-button {
 486         padding: 2px;
 487         border-radius: 3px;
 488         border: 1px solid #aaa;
 489         background: #eee 1px center no-repeat;
 490         text-decoration: none;
 491         color: #000;
 492         display: inline-block;
 493 }
 494
 495 .btn:hover, .cbi-button:hover {
 496         border-color: #4a6b7c;
 497         background-color: #fff;
 498 }
 499
 500 .btn[disabled],
 501 .btn[disabled]:hover,
 502 .cbi-button[disabled],
 503 .cbi-button[disabled]:hover {
 504         opacity: .6;
 505         cursor: default;
 506         border-color: inherit;
 507         background-color: inherit;
 508 }
 509
 510 input.cbi-input-user {
 511         background-image: url('../resources/cbi/user.gif');
 512         background-repeat: no-repeat;
 513         background-position: 1px center;
 514         color: #000000;
 515         text-indent: 17px;
 516 }
 517
 518 input.cbi-input-password {
 519         background-image: url('../resources/cbi/key.gif');
 520         background-repeat: no-repeat;
 521         background-position: 1px center;
 522         color: #000000;
 523         text-indent: 17px;
 524 }
 525
 526 input.cbi-input-find,
 527 input.cbi-button-find {
 528         background-image: url('../resources/cbi/find.gif');
 529         color: #000000;
 530         padding-left: 17px;
 531 }
 532
 533 input.cbi-input-reload {
 534         background-image: url('../resources/cbi/reload.gif');
 535         color: #000000;
 536         padding-left: 17px;
 537 }
 538
 539 input.cbi-input-add,
 540 input.cbi-button-add {
 541         background-image: url('../resources/cbi/add.gif');
 542         color: #000000;
 543         padding-left: 17px;
 544         padding-right: 1px;
 545 }
 546
 547 input.cbi-input-fieldadd,
 548 input.cbi-button-fieldadd {
 549         background-image: url(../resources/cbi/fieldadd.gif);
 550         color: #000000;
 551         padding-left: 17px;
 552 }
 553
 554 input.cbi-input-reset,
 555 input.cbi-button-reset {
 556         background-image: url('../resources/cbi/reset.gif');
 557         color: #000000;
 558         padding-left: 17px;
 559         padding-right: 1px;
 560 }
 561
 562 input.cbi-input-save,
 563 input.cbi-button-save {
 564         background-image: url('../resources/cbi/save.gif');
 565         color: #000000;
 566         padding-left: 17px;
 567         padding-right: 1px;
 568 }
 569
 570 /*
 571 input.cbi-input-apply,
 572 input.cbi-button-apply {
 573         background-image: url('../resources/cbi/apply.gif');
 574         color: #000000;
 575         padding-left: 17px;
 576         padding-right: 1px;
 577 }
 578 */
 579
 580 input.cbi-input-apply:before,
 581 input.cbi-button-apply:before {
 582         background-image: url('../resources/cbi/apply.gif');
 583         border: 2px solid red;
 584         width: 100px;
 585         height: 100px;
 586         content: ".";
 587         display: block;
 588         position: absolute;
 589 }
 590
 591 input.cbi-input-link,
 592 input.cbi-button-link {
 593         background-image: url('../resources/cbi/link.gif');
 594         color: #000000;
 595         padding-left: 17px;
 596         padding-right: 1px;
 597 }
 598
 599 input.cbi-input-download,
 600 input.cbi-button-download {
 601         background-image: url('../resources/cbi/download.gif');
 602         color: #000000;
 603         padding-left: 17px;
 604         padding-right: 1px;
 605 }
 606
 607 input.cbi-input-remove,
 608 div.cbi-section-remove input {
 609         background-image: url('../resources/cbi/remove.gif');
 610         color: #000000;
 611         padding-left: 17px;
 612         padding-right: 1px;
 613 }
 614
 615 input.cbi-button-up {
 616         background-image: url('../resources/cbi/up.gif');
 617         padding-left: 11px;
 618         padding-right: 1px;
 619 }
 620
 621 input.cbi-button-down {
 622         background-image: url('../resources/cbi/down.gif');
 623         padding-left: 11px;
 624         padding-right: 1px;
 625 }
 626
 627 input.cbi-button-edit {
 628         background-image: url('../resources/cbi/edit.gif');
 629         color: #000000;
 630         padding-left: 17px;
 631         padding-right: 1px;
 632 }
 633
 634 input.cbi-button-reload {
 635         background-image: url('../resources/cbi/reload.gif');
 636         color: #000000;
 637         padding-left: 17px;
 638         padding-right: 1px;
 639 }
 640
 641 input.cbi-button-reset {
 642         background-image: url('../resources/cbi/reset.gif');
 643         color: #000000;
 644         padding-left: 17px;
 645         padding-right: 1px;
 646 }
 647
 648 input.cbi-button-remove {
 649         background-image: url('../resources/cbi/remove.gif');
 650         color: #000000;
 651         padding-left: 17px;
 652         padding-right: 1px;
 653 }
 654
 655 .cbi-input-invalid {
 656         background-image: url('../resources/cbi/reset.gif');
 657         background-repeat: no-repeat;
 658         background-position: right;
 659         color: #FF0000 !important;
 660         border-color: #FF0000;
 661 }
 662
 663 div.cbi-section-remove input {
 664         border-bottom: none;
 665 }
 666
 667 textarea {
 668         margin-left: -1px;
 669         margin-bottom: 0.5em;
 670 }
 671
 672 form > div > input[type=submit],
 673 form > div > input[type=reset] {
 674         float: right;
 675         margin-left: 0.5em;
 676 }
 677
 678 table td, table th {
 679         color: #000000;
 680 }
 681
 682 .table .td, .table .th {
 683         color: #000000;
 684         padding: .25em 0;
 685         text-align: center;
 686         vertical-align: middle;
 687 }
 688
 689 .table.smalltext {
 690         background: #f5f5f5;
 691         color: #000000;
 692         border-top: 1px solid #666666;
 693         border-right: 1px solid #666666;
 694         border-bottom: 1px solid #666666;
 695         font-size: 90%;
 696         width: 80%;
 697         margin-left: auto;
 698         margin-right: auto;
 699         border-collapse: collapse;
 700 }
 701
 702 .table.smalltext .tr:hover .td {
 703         background-color: #bbddee;
 704         color: #000000;
 705 }
 706
 707 .table.smalltext .tr .th {
 708         padding: 0 0.25em;
 709         border-left: 1px solid #666666;
 710         text-align: left;
 711 }
 712
 713 .table.smalltext .tr .td {
 714         padding: 0 0.25em;
 715         border-top: 1px solid #666666;
 716         border-left: 1px solid #666666;
 717 }
 718
 719 .table.cbi-section-table .cbi-rowstyle-1 {
 720         background-color: #eeeeff;
 721         color: #000000;
 722 }
 723
 724 .table.cbi-section-table .cbi-rowstyle-1:hover,
 725 .table.cbi-section-table .cbi-rowstyle-2:hover {
 726         background-color: #b2c8d4;
 727         color: #000000;
 728 }
 729
 730 .table.cbi-section-table .cbi-section-table-cell {
 731         padding: 3px;
 732         white-space: nowrap;
 733 }
 734
 735 .cbi-section .cbi-rowstyle-1 h3 {
 736         background-color: #eeeeff;
 737         color: #555555;
 738 }
 739
 740 .cbi-rowstyle-2 {
 741         color: #000000;
 742 }
 743
 744 div.cbi-value {
 745         clear: left;
 746         vertical-align: middle;
 747         padding: 0.25em 0.6em;
 748         border-bottom: 1px dotted #bbbbbb;
 749 }
 750
 751 div.cbi-value:hover {
 752         background: #f8f8f8;
 753         color: #000000;
 754 }
 755
 756 .cbi-value-title {
 757         float: left;
 758         width: 40%;
 759         line-height: 1.8em;
 760 }
 761
 762 div.cbi-value-field {
 763         width: 58%;
 764         margin-left: 40%;
 765         padding: 0.25em 0;
 766 }
 767
 768 div.td.cbi-value-field {
 769         width: auto;
 770         vertical-align: middle;
 771 }
 772
 773 div.cbi-value-description {
 774         font-size: 90%;
 775         display: inline;
 776 }
 777
 778 div.cbi-section-create {
 779         clear: left;
 780         white-space: nowrap;
 781         vertical-align: top;
 782 }
 783
 784 div.cbi-section-create .btn,
 785 div.cbi-section-create .cbi-button {
 786         margin: 0.25em;
 787 }
 788
 789 input.cbi-section-create-name {
 790         margin-right: -0.25em;
 791 }
 792
 793 div.cbi-map-descr {
 794         margin-bottom: 1em;
 795 }
 796
 797 div.cbi-optionals {
 798         padding: 0.25em;
 799         border-bottom: 1px dotted #bbbbbb;
 800 }
 801
 802 div.cbi-section-remove {
 803         float: right;
 804 }
 805
 806 .cbi-section-node {
 807         clear: both;
 808         border: 1px solid #BBBBBB;
 809         border-radius: 3px;
 810         padding-bottom: 0;
 811         position: relative;
 812 }
 813
 814 .cbi-section-node-tabbed {
 815         border-top-left-radius: 0;
 816 }
 817
 818 .cbi-section-node .cbi-value-last {
 819         border-bottom: none;
 820 }
 821
 822 .cbi-section-node .table div {
 823         padding-bottom: 0;
 824         border-bottom: none;
 825 }
 826
 827 .cbi-section-node div.cbi-section-table-row {
 828         margin: 0.25em;
 829 }
 830
 831 .table.cbi-section-table {
 832         width: 100%;
 833         font-size: 95%;
 834 }
 835
 836 .table.cbi-section-table .th,
 837 .table.cbi-section-table .td {
 838         text-align: center;
 839 }
 840
 841 .tr.cbi-section-table-descr .th {
 842         font-weight: normal;
 843         font-size: 90%;
 844         vertical-align: top;
 845 }
 846
 847 .td.cbi-section-table-optionals {
 848         text-align: left !important;
 849         padding-top: 1em;
 850 }
 851
 852 .cbi-value-helpicon img {
 853         vertical-align: bottom;
 854 }
 855
 856 .td.cbi-value-error {
 857         border-color: red;
 858 }
 859
 860 .cbi-value-error input,
 861 .cbi-value-error select {
 862         color: red;
 863         background-color: #ffcccc;
 864 }
 865
 866 .cbi-section-error {
 867         color: red;
 868         background-color: white;
 869         font-size: 95%;
 870         border: 1px dotted red;
 871         margin: 3px;
 872         padding: 3px;
 873 }
 874
 875 .cbi-value-field var {
 876         color: #2222FF;
 877 }
 878
 879 ul.cbi-tabmenu {
 880         padding: 3px 0;
 881         margin-left: 0 !important;
 882         list-style-type: none;
 883         position: relative;
 884         z-index: 10;
 885         top: 4px;
 886         line-height: 20px;
 887 }
 888
 889 ul.cbi-tabmenu li.cbi-tab,
 890 ul.cbi-tabmenu li.cbi-tab-disabled {
 891         display: inline;
 892         margin: 0;
 893 }
 894
 895 ul.cbi-tabmenu li.cbi-tab a,
 896 ul.cbi-tabmenu li.cbi-tab-disabled a {
 897         text-decoration: none;
 898         padding: 3px 7px;
 899         margin-right: 3px;
 900         border: 1px solid #BBBBBB;
 901         border-bottom: none;
 902         border-radius: 3px 3px 0 0;
 903         background-color: #EEEEEE;
 904         color: #BBBBBB;
 905 }
 906
 907 ul.cbi-tabmenu li.cbi-tab-highlighted a {
 908         color: #000000;
 909         background-color: #FFEEAA;
 910 }
 911
 912 ul.cbi-tabmenu li a:hover {
 913         color: #000000;
 914 }
 915
 916 ul.cbi-tabmenu li.cbi-tab a {
 917         padding-top: 4px;
 918         color: #000000;
 919         background-color: #FFFFFF;
 920 }
 921
 922 div.cbi-tab-descr {
 923         background-image: url(/luci-static/resources/cbi/help.gif);
 924         background-position: 0.25em 50%;
 925         background-repeat: no-repeat;
 926         border-bottom: 1px solid #CCCCCC;
 927         margin: 0.25em 0.25em 2em;
 928         padding: 0.5em 0.5em 0.5em 2em;
 929 }
 930
 931
 932 .cbi-dropdown {
 933         border: 1px inset #000;
 934         display: inline-flex;
 935         cursor: pointer;
 936         background: #eee;
 937         position: relative;
 938         padding: 0;
 939         color: #000;
 940         min-width: 20em;
 941 }
 942
 943 .cbi-dropdown:hover {
 944         background: #fff;
 945 }
 946
 947 .cbi-dropdown:focus {
 948         outline: 2px solid #4b6e9b;
 949 }
 950
 951 .cbi-dropdown > ul {
 952         margin: 0 !important;
 953         padding: 0;
 954         list-style: none;
 955         overflow-x: hidden;
 956         overflow-y: auto;
 957         display: flex;
 958         width: 100%;
 959 }
 960
 961 .cbi-dropdown > ul.preview {
 962         display: none;
 963 }
 964
 965 .cbi-dropdown > .open {
 966         border: 2px outset #eee;
 967         flex-basis: 15px;
 968 }
 969
 970 .cbi-dropdown > .open,
 971 .cbi-dropdown > .more {
 972         flex-grow: 0;
 973         flex-shrink: 0;
 974         display: flex;
 975         flex-direction: column;
 976         justify-content: center;
 977         text-align: center;
 978         line-height: 2em;
 979         padding: 0 .25em;
 980 }
 981
 982 .cbi-dropdown > .more,
 983 .cbi-dropdown > ul > li[placeholder] {
 984         color: #777;
 985         font-weight: bold;
 986         text-shadow: 1px 1px 0px #fff;
 987         display: none;
 988 }
 989
 990 .cbi-dropdown > ul > li {
 991         display: none;
 992         padding: .25em;
 993         white-space: nowrap;
 994         overflow: hidden;
 995         text-overflow: ellipsis;
 996         flex-shrink: 1;
 997         flex-grow: 1;
 998         align-items: center;
 999         align-self: center;
1000         min-height: 20px;
1001 }
1002
1003 .cbi-dropdown > ul > li .hide-open { display: initial; }
1004 .cbi-dropdown > ul > li .hide-close { display: none; }
1005
1006 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1007         border-left: 1px solid #ccc;
1008 }
1009
1010 .cbi-dropdown[empty] > ul {
1011         max-width: 1px;
1012 }
1013
1014 .cbi-dropdown > ul > li > form {
1015         display: none;
1016         margin: 0;
1017         padding: 0;
1018         pointer-events: none;
1019 }
1020
1021 .cbi-dropdown > ul > li img {
1022         vertical-align: middle;
1023         margin-right: .25em;
1024 }
1025
1026 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1027         margin: 0;
1028 }
1029
1030 .cbi-dropdown > ul > li input[type="text"] {
1031         height: 20px;
1032 }
1033
1034 .cbi-dropdown[open] {
1035         position: relative;
1036 }
1037
1038 .cbi-dropdown[open] > ul.dropdown {
1039         display: block;
1040         background: #f6f6f5;
1041         border: 1px solid #918e8c;
1042         box-shadow: 0 0 4px #918e8c;
1043         position: absolute;
1044         z-index: 1000;
1045         max-width: none;
1046         min-width: 100%;
1047         width: auto;
1048 }
1049
1050 .cbi-dropdown > ul > li[display],
1051 .cbi-dropdown[open] > ul.preview,
1052 .cbi-dropdown[open] > ul.dropdown > li,
1053 .cbi-dropdown[multiple] > ul > li > label,
1054 .cbi-dropdown[multiple][open] > ul.dropdown > li,
1055 .cbi-dropdown[multiple][more] > .more,
1056 .cbi-dropdown[multiple][empty] > .more {
1057         flex-grow: 1;
1058         display: flex;
1059         align-items: center;
1060 }
1061
1062 .cbi-dropdown[empty] > ul > li,
1063 .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
1064 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1065         display: block;
1066 }
1067
1068 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
1069 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: initial; }
1070
1071 .cbi-dropdown[open] > ul.dropdown > li {
1072         border-bottom: 1px solid #ccc;
1073 }
1074
1075 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1076         background: #b0d0f0;
1077 }
1078
1079 .cbi-dropdown[open] > ul.dropdown > li.focus {
1080         background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
1081 }
1082
1083 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1084         margin-bottom: 0;
1085         border-bottom: none;
1086 }
1087
1088 .cbi-dropdown[disabled] {
1089         pointer-events: none;
1090         opacity: .6;
1091 }
1092
1093
1094 .left {
1095         text-align: left !important;
1096 }
1097
1098 .right {
1099         text-align: right !important;
1100 }
1101
1102 .center {
1103         text-align: center !important;
1104 }
1105
1106 .luci {
1107         position: absolute;
1108         bottom: 0;
1109         left: 1em;
1110         height: 1.5em;
1111         font-size: 80%;
1112 }
1113
1114 .luci a:link,
1115 .luci a:visited {
1116         background-color: transparent;
1117         color: #666666;
1118         text-decoration: none;
1119         font-size: 70%;
1120 }
1121
1122 .inline {
1123         display: inline;
1124 }
1125
1126 .error500 {
1127         white-space: normal;
1128         border: 1px dotted #ff0000;
1129         background-color: #ffffff;
1130         color: #000000;
1131         padding: 0.5em;
1132 }
1133
1134
1135 .ifacebadge, .ifacebox {
1136         display: inline-flex;
1137         align-content: center;
1138         border: 1px solid #ccc;
1139         border-radius: 3px;
1140         padding: 2px;
1141         background: #fff;
1142         margin: .25em .5em;
1143 }
1144
1145 .ifacebox-head {
1146         background: #eee;
1147 }
1148
1149 .ifacebox-head.active {
1150         background: #90c0e0;
1151 }
1152
1153 .ifacebadge, .zonebadge {
1154         align-items: center;
1155 }
1156
1157 .ifacebadge > img,
1158 .ifacebadge > em {
1159         margin-right: 5px;
1160         align-self: start;
1161         display: inline-block;
1162         height: 16px;
1163 }
1164
1165 .ifacebadge-active {
1166         border-color: #000000;
1167         font-weight: bold;
1168 }
1169
1170 .ifacebox {
1171         flex-direction: column;
1172         margin: 0 10px;
1173         padding: 0;
1174         min-width: 100px;
1175 }
1176
1177 .ifacebox > * {
1178         padding: 2px;
1179 }
1180
1181
1182 .network-status-table {
1183         display: flex;
1184         flex-wrap: wrap;
1185 }
1186
1187 .network-status-table .ifacebox {
1188         margin: .5em;
1189         font-size: 90%;
1190         flex-grow: 1;
1191 }
1192
1193 .network-status-table .ifacebox-body {
1194         display: flex;
1195         flex-direction: column;
1196         flex: 1 0;
1197 }
1198
1199 .network-status-table .ifacebox-body > span {
1200         flex: 10;
1201 }
1202
1203 .network-status-table .ifacebox-body > div {
1204         display: flex;
1205         flex-wrap: wrap;
1206 }
1207
1208 .network-status-table .ifacebox-body .ifacebadge {
1209         flex: 1;
1210         margin: .5em .25em .25em .25em;
1211         padding: .5em;
1212         min-width: 220px;
1213         white-space: nowrap;
1214 }
1215
1216
1217 .zonebadge {
1218         padding: 2px;
1219         display: inline-block;
1220         white-space: nowrap;
1221         cursor: pointer;
1222         border-radius: 3px;
1223 }
1224
1225 .zonebadge > em,
1226 .zonebadge > strong {
1227         margin: 3px;
1228 }
1229
1230 .zonebadge input {
1231         width: 6em;
1232         height: 1.5em;
1233 }
1234
1235 .zonebadge .ifacebadge,
1236 .cbi-dropdown .ifacebadge {
1237         margin: 0 .125em;
1238 }
1239
1240 .zonebadge .ifacebadge img,
1241 .zonebadge .ifacebadge em,
1242 .cbi-dropdown .ifacebadge img,
1243 .cbi-dropdown .ifacebadge em {
1244         margin: 0 1px;
1245 }
1246
1247 .zonebadge-empty {
1248         border: 1px dashed #AAAAAA;
1249         color: #AAAAAA;
1250         font-style: italic;
1251         font-size: smaller;
1252 }
1253
1254
1255 .uci-change-list {
1256         font-family: monospace;
1257 }
1258
1259 .uci-change-list ins,
1260 .uci-change-legend-label ins {
1261         text-decoration: none;
1262         border: 1px solid #00FF00;
1263         background-color: #CCFFCC;
1264         display: block;
1265         padding: 2px;
1266 }
1267
1268 .uci-change-list del,
1269 .uci-change-legend-label del {
1270         text-decoration: none;
1271         border: 1px solid #FF0000;
1272         background-color: #FFCCCC;
1273         display: block;
1274         font-style: normal;
1275         padding: 2px;
1276 }
1277
1278 .uci-change-list var,
1279 .uci-change-legend-label var {
1280         text-decoration: none;
1281         border: 1px solid #CCCCCC;
1282         background-color: #EEEEEE;
1283         display: block;
1284         font-style: normal;
1285         padding: 2px;
1286 }
1287
1288 .uci-change-list var ins,
1289 .uci-change-list var del {
1290         /*display: inline;*/
1291         border: none;
1292         white-space: pre;
1293         font-style: normal;
1294         padding: 0px;
1295 }
1296
1297 .uci-change-legend {
1298         padding: 5px;
1299 }
1300
1301 .uci-change-legend-label {
1302         width: 150px;
1303         float: left;
1304         font-size: 80%;
1305 }
1306
1307 .uci-change-legend-label>ins,
1308 .uci-change-legend-label>del,
1309 .uci-change-legend-label>var {
1310         float: left;
1311         margin-right: 4px;
1312         width: 10px;
1313         height: 10px;
1314         display: block;
1315 }
1316
1317 .uci-change-legend-label var ins,
1318 .uci-change-legend-label var del {
1319         line-height: 6px;
1320         border: none;
1321 }
1322
1323
1324 }