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