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