themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css

   1 /*!
   2  * LuCI Bootstrap Theme
   3  * Copyright 2012 Nut & Bolt
   4  * By David Menting <david@nut-bolt.nl>
   5  * Based on Bootstrap v1.4.0
   6  *
   7  * Copyright 2011 Twitter, Inc
   8  * Licensed under the Apache License v2.0
   9  * http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  * Designed and built with all the love in the world @twitter by @mdo and @fat.
  12  */
  13 /* Reset.less
  14  * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here       that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
  15  * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  16 html {
  17         margin: 0;
  18         padding: 0;
  19 }
  20
  21 body {
  22         margin: 0;
  23         padding: 5px;
  24 }
  25
  26 h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, code, del, em, img, ins, q, s,
  27 small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset,
  28 form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td,
  29 .table, .tbody, .tfoot, .thead, .tr, .th, .td {
  30         margin: 0;
  31         padding: 0;
  32         border: 0;
  33         font-weight: normal;
  34         font-style: normal;
  35         font-size: 100%;
  36         line-height: 1;
  37         font-family: inherit;
  38 }
  39
  40 abbr[title], acronym[title] {
  41         border-bottom: 1px dotted;
  42         font-weight: inherit;
  43         cursor: help;
  44 }
  45
  46 table {
  47         border-collapse: collapse;
  48         border-spacing: 0;
  49 }
  50
  51 ol, ul {
  52         list-style: none;
  53 }
  54
  55 q:before,
  56 q:after,
  57 blockquote:before,
  58 blockquote:after {
  59         content: "";
  60 }
  61
  62 html {
  63         font-size: 100%;
  64         -webkit-text-size-adjust: 100%;
  65         -ms-text-size-adjust: 100%;
  66 }
  67
  68 a:focus {
  69         outline: thin dotted;
  70 }
  71
  72 a:hover, a:active {
  73         outline: 0;
  74 }
  75
  76 article,
  77 aside,
  78 details,
  79 figcaption,
  80 figure,
  81 footer,
  82 header,
  83 hgroup,
  84 nav,
  85 section {
  86         display: block;
  87 }
  88
  89 sub, sup {
  90         font-size: 75%;
  91         line-height: 0;
  92         position: relative;
  93         vertical-align: baseline;
  94 }
  95
  96 sup {
  97         top: -0.5em;
  98 }
  99
 100 sub {
 101         bottom: -0.25em;
 102 }
 103
 104 img {
 105         border: 0;
 106         -ms-interpolation-mode: bicubic;
 107 }
 108
 109 button,
 110 input,
 111 select,
 112 option,
 113 textarea {
 114         font-size: 100%;
 115         margin: 0;
 116         box-sizing: border-box;
 117         vertical-align: baseline;
 118         *vertical-align: middle;
 119 }
 120
 121 button, input {
 122         line-height: normal;
 123         *overflow: visible;
 124 }
 125
 126 button::-moz-focus-inner, input::-moz-focus-inner {
 127         border: 0;
 128         padding: 0;
 129 }
 130
 131 button,
 132 input[type="button"],
 133 input[type="reset"],
 134 input[type="submit"] {
 135         cursor: pointer;
 136         -webkit-appearance: button;
 137 }
 138
 139 button[disabled],
 140 input[type="button"][disabled],
 141 input[type="reset"][disabled],
 142 input[type="submit"][disabled] {
 143         opacity: 0.7;
 144 }
 145
 146 input[type="search"] {
 147         -webkit-appearance: textfield;
 148         box-sizing: content-box;
 149 }
 150
 151 input[type="search"]::-webkit-search-decoration {
 152         -webkit-appearance: none;
 153 }
 154
 155 textarea {
 156         overflow: auto;
 157         vertical-align: top;
 158 }
 159
 160 /*
 161  * Scaffolding
 162  * Basic and global styles for generating a grid system, structural layout, and page templates
 163  * ------------------------------------------------------------------------------------------- */
 164 body {
 165         background-color: #fff;
 166         margin: 0;
 167         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 168         font-size: 13px;
 169         font-weight: normal;
 170         line-height: 18px;
 171         color: #404040;
 172         padding-top: 58px;
 173 }
 174
 175 .container {
 176         width: 100%;
 177         max-width: 940px;
 178         margin-left: auto;
 179         margin-right: auto;
 180         zoom: 1;
 181 }
 182
 183 .container:before, .container:after {
 184         display: table;
 185         content: "";
 186         zoom: 1;
 187 }
 188
 189 .container:after {
 190         clear: both;
 191 }
 192
 193 a {
 194         color: #0069d6;
 195         text-decoration: none;
 196         line-height: inherit;
 197         font-weight: inherit;
 198 }
 199
 200 a:hover {
 201         color: #00438a;
 202         text-decoration: underline;
 203 }
 204
 205 .pull-right {
 206         float: right;
 207 }
 208
 209 .pull-left {
 210         float: left;
 211 }
 212
 213 /* Typography.less
 214  * Headings, body text, lists, code, and more for a versatile and durable typography system
 215  * ---------------------------------------------------------------------------------------- */
 216 p,
 217 .cbi-map-descr,
 218 .cbi-section-descr,
 219 .table .tr.cbi-section-table-descr .th {
 220         font-size: 13px;
 221         font-weight: normal;
 222         line-height: 18px;
 223         margin-bottom: 9px;
 224 }
 225
 226 p small {
 227         font-size: 11px;
 228         color: #bfbfbf;
 229 }
 230
 231 h1,
 232 h2,
 233 h3, legend,
 234 h4,
 235 h5,
 236 h6 {
 237         font-weight: bold;
 238         color: #404040;
 239 }
 240
 241 h1 small,
 242 h2 small,
 243 h3 small,
 244 h4 small,
 245 h5 small,
 246 h6 small {
 247         color: #bfbfbf;
 248 }
 249
 250 h1 {
 251         margin-bottom: 18px;
 252         font-size: 30px;
 253         line-height: 36px;
 254 }
 255
 256 h1 small {
 257         font-size: 18px;
 258 }
 259
 260 h2 {
 261         font-size: 24px;
 262         line-height: 36px;
 263 }
 264
 265 h2 small {
 266         font-size: 14px;
 267 }
 268
 269 h3, legend,
 270 h4,
 271 h5,
 272 h6 {
 273         line-height: 36px;
 274 }
 275
 276 h3, legend {
 277         font-size: 18px;
 278 }
 279
 280 h3 small {
 281         font-size: 14px;
 282 }
 283
 284 h4 {
 285         font-size: 16px;
 286 }
 287
 288 h4 small {
 289         font-size: 12px;
 290 }
 291
 292 h5 {
 293         font-size: 14px;
 294 }
 295
 296 h6 {
 297         font-size: 13px;
 298         color: #bfbfbf;
 299         text-transform: uppercase;
 300 }
 301
 302 ul, ol {
 303         margin: 0 0 18px 25px;
 304 }
 305
 306 ul ul,
 307 ul ol,
 308 ol ol,
 309 ol ul {
 310         margin-bottom: 0;
 311 }
 312
 313 ul {
 314         list-style: disc;
 315 }
 316
 317 ol {
 318         list-style: decimal;
 319 }
 320
 321 li {
 322         line-height: 18px;
 323         color: #808080;
 324 }
 325
 326 ul.unstyled {
 327         list-style: none;
 328         margin-left: 0;
 329 }
 330
 331 dl {
 332         margin-bottom: 18px;
 333 }
 334
 335 dl dt, dl dd {
 336         line-height: 18px;
 337 }
 338
 339 dl dt {
 340         font-weight: bold;
 341 }
 342
 343 dl dd {
 344         margin-left: 9px;
 345 }
 346
 347 hr {
 348         margin: 20px 0 19px;
 349         border: 0;
 350         border-bottom: 1px solid #eee;
 351 }
 352
 353 strong {
 354         font-style: inherit;
 355         font-weight: bold;
 356 }
 357
 358 em {
 359         font-style: italic;
 360         font-weight: inherit;
 361         line-height: inherit;
 362 }
 363
 364 small { font-size: 0.9em }
 365
 366 address {
 367         display: block;
 368         line-height: 18px;
 369         margin-bottom: 18px;
 370 }
 371
 372 code, pre {
 373         padding: 0 3px 2px;
 374         font-family: Monaco, Andale Mono, Courier New, monospace;
 375         font-size: 12px;
 376         border-radius: 3px;
 377 }
 378
 379 code {
 380         background-color: #fee9cc;
 381         color: rgba(0, 0, 0, 0.75);
 382         padding: 1px 3px;
 383 }
 384
 385 pre {
 386         background-color: #f5f5f5;
 387         display: block;
 388         padding: 8.5px;
 389         margin: 0 0 18px;
 390         line-height: 18px;
 391         font-size: 12px;
 392         border: 1px solid #ccc;
 393         border: 1px solid rgba(0, 0, 0, 0.15);
 394         border-radius: 3px;
 395         white-space: pre;
 396         white-space: pre-wrap;
 397         word-wrap: break-word;
 398 }
 399
 400 /* Forms.less
 401  * Base styles for various input types, form layouts, and states
 402  * ------------------------------------------------------------- */
 403 form {
 404         margin-bottom: 18px;
 405 }
 406
 407 fieldset {
 408         margin-bottom: 9px;
 409         padding-top: 9px;
 410 }
 411
 412 fieldset legend {
 413         display: block;
 414         font-size: 19.5px;
 415         line-height: 1;
 416         color: #404040;
 417         padding-top: 20px;
 418         *padding: 0 0 5px 0px;
 419         /* IE6-7 */
 420
 421         *line-height: 1.5;
 422         /* IE6-7 */
 423
 424 }
 425 form .cbi-tab-descr {
 426         line-height: 18px;
 427         margin-bottom: 18px;
 428 }
 429
 430 form .clearfix,
 431 form .cbi-value {
 432         margin-bottom: 18px;
 433         zoom: 1;
 434 }
 435
 436 form .clearfix:before, form .clearfix:after,
 437 form .cbi-value:before, form .cbi-value:after  {
 438         display: table;
 439         content: "";
 440         zoom: 1;
 441 }
 442
 443 form .clearfix:after,
 444 form .cbi-value:after {
 445         clear: both;
 446 }
 447
 448 label,
 449 input,
 450 select,
 451 textarea {
 452         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 453         font-size: 13px;
 454         font-weight: normal;
 455         line-height: normal;
 456 }
 457
 458 form .input,
 459 form .cbi-value-field {
 460         margin-left: 200px;
 461 }
 462
 463 form .cbi-value label.cbi-value-title {
 464         padding-top: 6px;
 465         font-size: 13px;
 466         line-height: 18px;
 467         float: left;
 468         width: 180px;
 469         text-align: right;
 470         color: #404040;
 471 }
 472
 473 input[type=checkbox], input[type=radio] {
 474         cursor: pointer;
 475 }
 476
 477 input,
 478 textarea,
 479 select,
 480 .cbi-dropdown,
 481 .uneditable-input {
 482         display: inline-block;
 483         width: 210px;
 484         height: 30px;
 485         padding: 4px;
 486         font-size: 13px;
 487         line-height: 18px;
 488         color: #808080;
 489         border: 1px solid #ccc;
 490         border-radius: 3px;
 491         box-sizing: border-box;
 492 }
 493
 494 .cbi-dropdown,
 495 .cbi-dynlist {
 496         min-width: 210px;
 497         max-width: 400px;
 498         width: auto;
 499 }
 500
 501 .cbi-dynlist {
 502         height: auto;
 503         min-height: 30px;
 504         display: inline-flex;
 505         flex-direction: column;
 506 }
 507
 508 .cbi-dynlist > .item {
 509         margin-bottom: 4px;
 510         box-shadow: 0 0 2px #ccc;
 511         background: #fff;
 512         padding: 2px 2em 2px 4px;
 513         border: 1px solid #ccc;
 514         border-radius: 3px;
 515         position: relative;
 516         pointer-events: none;
 517 }
 518
 519 .cbi-dynlist > .item::after {
 520         content: "×";
 521         position: absolute;
 522         display: inline-flex;
 523         align-items: center;
 524         top: -1px;
 525         right: -1px;
 526         bottom: -1px;
 527         padding: 0 6px;
 528         border: 1px solid #ccc;
 529         border-radius: 0 3px 3px 0;
 530         font-weight: bold;
 531         color: #c44;
 532         pointer-events: auto;
 533 }
 534
 535 select {
 536         padding: initial;
 537         background: #fff;
 538         box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.1);
 539 }
 540
 541 input[type=checkbox], input[type=radio] {
 542         width: auto;
 543         height: auto;
 544         padding: 0;
 545         margin: 3px 0;
 546         *margin-top: 0;
 547         /* IE6-7 */
 548
 549         line-height: normal;
 550         border: none;
 551 }
 552
 553 input[type=file] {
 554         background-color: #fff;
 555         padding: initial;
 556         border: initial;
 557         line-height: initial;
 558         box-shadow: none;
 559         width: auto !important;
 560 }
 561
 562 input[type=button], input[type=reset], input[type=submit] {
 563         width: auto;
 564         height: auto;
 565 }
 566
 567 select, input[type=file] {
 568         *height: auto;
 569         *margin-top: 4px;
 570         /* For IE7, add top margin to align select with labels */
 571 }
 572
 573 select[multiple] {
 574         height: inherit;
 575         background-color: #fff;
 576 }
 577
 578 textarea {
 579         height: auto;
 580 }
 581
 582 .td > input[type=text],
 583 .td > input[type=password],
 584 .td > select,
 585 .td > .cbi-dropdown,
 586 .cbi-dynlist > .add-item > .cbi-dropdown {
 587         width: 100%;
 588 }
 589
 590 .uneditable-input {
 591         background-color: #fff;
 592         display: block;
 593         border-color: #eee;
 594         box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
 595         cursor: not-allowed;
 596 }
 597
 598 ::-moz-placeholder {
 599         color: #bfbfbf;
 600 }
 601
 602 ::-webkit-input-placeholder {
 603         color: #bfbfbf;
 604 }
 605
 606 .item::after, .btn, .cbi-button, input, textarea {
 607         transition: border linear 0.2s, box-shadow linear 0.2s;
 608         box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
 609 }
 610
 611 .item:hover::after,
 612 .btn:hover, .cbi-button:hover,
 613 input:focus, textarea:focus {
 614         outline: 0;
 615         border-color: rgba(82, 168, 236, 0.8) !important;
 616         box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
 617         text-decoration: none;
 618 }
 619
 620 input[type=file]:focus, input[type=checkbox]:focus, select:focus {
 621         box-shadow: none;
 622         outline: 1px dotted #666;
 623 }
 624
 625 input[disabled],
 626 select[disabled],
 627 textarea[disabled],
 628 input[readonly],
 629 select[readonly],
 630 textarea[readonly] {
 631         background-color: #f5f5f5;
 632         border-color: #ddd;
 633         pointer-events: none;
 634         cursor: default;
 635 }
 636
 637 select[readonly],
 638 textarea[readonly] {
 639         pointer-events: auto;
 640         cursor: auto;
 641 }
 642
 643 .cbi-optionals,
 644 .cbi-section-create {
 645         padding: 0 0 10px 10px;
 646 }
 647
 648 .cbi-section-create {
 649         margin: -3px;
 650         display: inline-flex;
 651         align-items: center;
 652 }
 653
 654 .cbi-section-create > * {
 655         margin: 3px;
 656         flex: 1 1 auto;
 657 }
 658
 659 .cbi-section-create > * > input {
 660         width: 100%;
 661 }
 662
 663 .actions,
 664 .cbi-page-actions {
 665         background: #f5f5f5;
 666         margin-bottom: 18px;
 667         padding: 17px 20px 18px 17px;
 668         border-top: 1px solid #ddd;
 669         border-radius: 0 0 3px 3px;
 670         text-align: right;
 671 }
 672
 673 .actions .secondary-action,
 674 .cbi-page-actions .secondary-action{
 675         float: right;
 676 }
 677
 678 .actions .secondary-action a,
 679 .cbi-page-actions .secondary-action a {
 680         line-height: 30px;
 681 }
 682
 683 .actions .secondary-action a:hover,
 684 .cbi-page-actions .secondary-action a:hover {
 685         text-decoration: underline;
 686 }
 687
 688 .cbi-page-actions > form {
 689         display: inline;
 690         margin: 0;
 691 }
 692
 693 .help-inline, .help-block {
 694         font-size: 13px;
 695         line-height: 18px;
 696         color: #bfbfbf;
 697 }
 698
 699 .help-inline {
 700         padding-left: 5px;
 701         *position: relative;
 702         /* IE6-7 */
 703
 704         *top: -5px;
 705         /* IE6-7 */
 706
 707 }
 708
 709 .help-block {
 710         display: block;
 711         max-width: 600px;
 712 }
 713
 714 /*
 715  * Tables.less
 716  * Tables for, you guessed it, tabular data
 717  * ---------------------------------------- */
 718 .tr { display: table-row; }
 719 .table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
 720 .table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
 721
 722 .table {
 723         display: table;
 724         width: 100%;
 725         margin-bottom: 18px;
 726         padding: 0;
 727         font-size: 13px;
 728         border-collapse: collapse;
 729         position: relative;
 730 }
 731
 732 .table .th, .table .td {
 733         display: table-cell;
 734         vertical-align: middle; /* Fixme */
 735         padding: 10px 10px 9px;
 736         line-height: 18px;
 737         text-align: left;
 738 }
 739
 740 .table .tr:first-child .th {
 741         padding-top: 9px;
 742         font-weight: bold;
 743         vertical-align: top;
 744 }
 745
 746 .table .td, .table .th {
 747         border-top: 1px solid #ddd;
 748 }
 749
 750 .tr.placeholder {
 751         height: calc(3em + 20px);
 752 }
 753
 754 .tr.placeholder > .td {
 755         position: absolute;
 756         left: 0;
 757         right: 0;
 758         bottom: 0;
 759         text-align: center;
 760         line-height: 3em;
 761 }
 762
 763 /* Patterns.less
 764  * Repeatable UI elements outside the base styles provided from the scaffolding
 765  * ---------------------------------------------------------------------------- */
 766 header {
 767         height: 40px;
 768         position: fixed;
 769         top: 0;
 770         left: 0;
 771         right: 0;
 772         z-index: 800;
 773         overflow: visible;
 774         color: #BFBFBF;
 775 }
 776
 777 header a {
 778         color: #bfbfbf;
 779         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 780 }
 781
 782 header h3 a:hover, header .brand:hover, header ul .active > a {
 783         background-color: #333;
 784         background-color: rgba(255, 255, 255, 0.05);
 785         color: #fff;
 786         text-decoration: none;
 787 }
 788
 789 header h3 {
 790         position: relative;
 791 }
 792
 793 header h3 a, header .brand {
 794         float: left;
 795         display: block;
 796         padding: 8px 20px 12px;
 797         margin-left: -20px;
 798         color: #fff;
 799         font-size: 20px;
 800         font-weight: 200;
 801         line-height: 1;
 802 }
 803
 804 header p {
 805         margin: 0;
 806         line-height: 40px;
 807 }
 808
 809 header .fill {
 810         background-color: #222;
 811         background-repeat: repeat-x;
 812         background-image: linear-gradient(to bottom, #333333, #222222);
 813         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
 814         padding: 0 5px;
 815 }
 816
 817 header div > ul, .nav {
 818         display: block;
 819         float: left;
 820         margin: 0 10px 0 0;
 821         position: relative;
 822         left: 0;
 823 }
 824
 825 header div > ul > li, .nav > li {
 826         display: block;
 827         float: left;
 828 }
 829
 830 header div > ul a, .nav a {
 831         display: block;
 832         float: none;
 833         padding: 10px 10px 11px;
 834         line-height: 19px;
 835         text-decoration: none;
 836 }
 837
 838 header div > ul a:hover, .nav a:hover {
 839         color: #fff;
 840         text-decoration: none;
 841 }
 842
 843 header div > ul .active > a, .nav .active > a {
 844         background-color: #222;
 845         background-color: rgba(0, 0, 0, 0.5);
 846 }
 847
 848 header div > ul.secondary-nav, .nav.secondary-nav {
 849         float: right;
 850         margin-left: 10px;
 851         margin-right: 0;
 852 }
 853
 854 header div > ul.secondary-nav .menu-dropdown,
 855 .nav.secondary-nav .menu-dropdown,
 856 header div > ul.secondary-nav .dropdown-menu,
 857 .nav.secondary-nav .dropdown-menu {
 858         right: 0;
 859         border: 0;
 860 }
 861
 862 header div > ul a.menu:hover,
 863 .nav a.menu:hover,
 864 header div > ul li.open .menu,
 865 .nav li.open .menu,
 866 header div > ul .dropdown-toggle:hover,
 867 .nav .dropdown-toggle:hover,
 868 header div > ul .dropdown.open .dropdown-toggle,
 869 .nav .dropdown.open .dropdown-toggle {
 870         background: #444;
 871         background: rgba(255, 255, 255, 0.05);
 872 }
 873
 874 header div > ul .menu-dropdown,
 875 .nav .menu-dropdown,
 876 header div > ul .dropdown-menu,
 877 .nav .dropdown-menu {
 878         background-color: #333;
 879 }
 880
 881 header div > ul .menu-dropdown a.menu,
 882 .nav .menu-dropdown a.menu,
 883 header div > ul .dropdown-menu a.menu,
 884 .nav .dropdown-menu a.menu,
 885 header div > ul .menu-dropdown .dropdown-toggle,
 886 .nav .menu-dropdown .dropdown-toggle,
 887 header div > ul .dropdown-menu .dropdown-toggle,
 888 .nav .dropdown-menu .dropdown-toggle {
 889         color: #fff;
 890 }
 891
 892 header div > ul .menu-dropdown a.menu.open,
 893 .nav .menu-dropdown a.menu.open,
 894 header div > ul .dropdown-menu a.menu.open,
 895 .nav .dropdown-menu a.menu.open,
 896 header div > ul .menu-dropdown .dropdown-toggle.open,
 897 .nav .menu-dropdown .dropdown-toggle.open,
 898 header div > ul .dropdown-menu .dropdown-toggle.open,
 899 .nav .dropdown-menu .dropdown-toggle.open {
 900         background: #444;
 901         background: rgba(255, 255, 255, 0.05);
 902 }
 903
 904 header div > ul .menu-dropdown li a,
 905 .nav .menu-dropdown li a,
 906 header div > ul .dropdown-menu li a,
 907 .nav .dropdown-menu li a {
 908         color: #999;
 909         text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
 910 }
 911
 912 header div > ul .menu-dropdown li a:hover,
 913 .nav .menu-dropdown li a:hover,
 914 header div > ul .dropdown-menu li a:hover,
 915 .nav .dropdown-menu li a:hover {
 916         background-color: #191919;
 917         background-repeat: repeat-x;
 918         background-image: linear-gradient(to bottom, #292929, #191919);
 919         color: #fff;
 920 }
 921
 922 header div > ul .menu-dropdown .active a,
 923 .nav .menu-dropdown .active a,
 924 header div > ul .dropdown-menu .active a,
 925 .nav .dropdown-menu .active a {
 926         color: #fff;
 927 }
 928
 929 header div > ul .menu-dropdown .divider,
 930 .nav .menu-dropdown .divider,
 931 header div > ul .dropdown-menu .divider,
 932 .nav .dropdown-menu .divider {
 933         background-color: #222;
 934         border-color: #444;
 935 }
 936
 937 header ul .menu-dropdown li a, header ul .dropdown-menu li a {
 938         padding: 4px 15px;
 939 }
 940
 941 li.menu, .dropdown {
 942         position: relative;
 943 }
 944
 945 a.menu:after, .dropdown-toggle:after {
 946         width: 0;
 947         height: 0;
 948         display: inline-block;
 949         content: "&darr;";
 950         text-indent: -99999px;
 951         vertical-align: top;
 952         margin-top: 8px;
 953         margin-left: 4px;
 954         border-left: 4px solid transparent;
 955         border-right: 4px solid transparent;
 956         border-top: 4px solid #fff;
 957         opacity: 0.5;
 958 }
 959
 960 .menu-dropdown, .dropdown-menu {
 961         background-color: #fff;
 962         float: left;
 963         position: absolute;
 964         top: 40px;
 965         left: -9999px;
 966         z-index: 900;
 967         min-width: 160px;
 968         max-width: 220px;
 969         _width: 160px;
 970         margin-left: 0;
 971         margin-right: 0;
 972         padding: 6px 0;
 973         zoom: 1;
 974         border-color: #999;
 975         border-color: rgba(0, 0, 0, 0.2);
 976         border-style: solid;
 977         border-width: 0 1px 1px;
 978         border-radius: 0 0 6px 6px;
 979         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 980         background-clip: padding-box;
 981 }
 982
 983 .menu-dropdown li, .dropdown-menu li {
 984         float: none;
 985         display: block;
 986         background-color: transparent;
 987 }
 988
 989 .menu-dropdown .divider, .dropdown-menu .divider {
 990         height: 1px;
 991         margin: 5px 0;
 992         overflow: hidden;
 993         background-color: #eee;
 994         border-bottom: 1px solid #fff;
 995 }
 996
 997 header .dropdown-menu a, .dropdown-menu a {
 998         display: block;
 999         padding: 4px 15px;
1000         clear: both;
1001         font-weight: normal;
1002         line-height: 18px;
1003         color: #808080;
1004         text-shadow: 0 1px 0 #fff;
1005 }
1006
1007 header .dropdown-menu a:hover,
1008 .dropdown-menu a:hover,
1009 header .dropdown-menu a.hover,
1010 .dropdown-menu a.hover {
1011         background-color: #ddd;
1012         background-repeat: repeat-x;
1013         background-image: linear-gradient(to bottom, #eee, #ddd);
1014         color: #404040;
1015         text-decoration: none;
1016         box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
1017 }
1018
1019 .open .menu,
1020 .dropdown.open .menu,
1021 .open .dropdown-toggle,
1022 .dropdown.open .dropdown-toggle {
1023         color: #fff;
1024         background: #ccc;
1025         background: rgba(0, 0, 0, 0.3);
1026 }
1027
1028 .open .menu-dropdown,
1029 .dropdown.open .menu-dropdown,
1030 .open .dropdown-menu,
1031 .dropdown.open .dropdown-menu {
1032         left: 0;
1033 }
1034
1035 .dropdown:hover ul.dropdown-menu {
1036         left: 0;
1037 }
1038
1039 .dropdown-menu .dropdown-menu {
1040           position: absolute;
1041           left: 159px;
1042 }
1043
1044 .dropdown-menu li {
1045           position: relative;
1046 }
1047
1048 .tabs, .cbi-tabmenu {
1049         margin: 0 0 18px;
1050         padding: 0;
1051         list-style: none;
1052         zoom: 1;
1053 }
1054
1055 .tabs:before,
1056 .cbi-tabmenu:before,
1057 .tabs:after,
1058 .cbi-tabmenu:after {
1059         display: table;
1060         content: "";
1061         zoom: 1;
1062 }
1063
1064 .tabs:after, .cbi-tabmenu:after {
1065         clear: both;
1066 }
1067
1068 .tabs > li, .cbi-tabmenu > li {
1069         float: left;
1070 }
1071
1072 .tabs > li > a, .cbi-tabmenu > li > a {
1073         display: block;
1074 }
1075
1076 .tabs,
1077 .cbi-tabmenu {
1078         border-color: #ddd;
1079         border-style: solid;
1080         border-width: 0 0 1px;
1081 }
1082
1083 .tabs > li,
1084 .cbi-tabmenu > li {
1085         position: relative;
1086         margin-bottom: -1px;
1087 }
1088
1089 .cbi-tabmenu.map {
1090         margin: 0;
1091 }
1092
1093 .cbi-tabmenu.map > li {
1094         font-size: 16.5px;
1095         font-weight: bold;
1096 }
1097
1098 .cbi-tabcontainer > fieldset.cbi-section[id] > legend {
1099         display: none;
1100 }
1101
1102 .tabs > li > a,
1103 .cbi-tabmenu > li > a {
1104         padding: 0 15px;
1105         margin-right: 2px;
1106         line-height: 34px;
1107         border: 1px solid transparent;
1108         border-radius: 4px 4px 0 0;
1109 }
1110
1111 .tabs > li > a:hover,
1112 .cbi-tabmenu > li > a:hover {
1113         text-decoration: none;
1114         background-color: #eee;
1115         border-color: #eee #eee #ddd;
1116 }
1117
1118 .tabs .active > a, .tabs .active > a:hover,
1119 .cbi-tabmenu .active > a, .cbi-tabmenu .active > a:hover,
1120 .cbi-tab > a:link, .cbi-tab > a:hover {
1121         color: #808080;
1122         background-color: #fff;
1123         border: 1px solid #ddd;
1124         border-bottom-color: transparent;
1125         cursor: default;
1126 }
1127
1128 .tabs .menu-dropdown, .tabs .dropdown-menu,
1129 .cbi-tabmenu .menu-dropdown, .cbi-tabmenu .dropdown-menu {
1130         top: 35px;
1131         border-width: 1px;
1132         border-radius: 0 6px 6px 6px;
1133 }
1134
1135 .tabs a.menu:after, .tabs .dropdown-toggle:after,
1136 .cbi-tabmenu a.menu:after, .cbi-tabmenu .dropdown-toggle:after {
1137         border-top-color: #999;
1138         margin-top: 15px;
1139         margin-left: 5px;
1140 }
1141
1142 .tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle,
1143 .cbi-tabmenu li.open.menu .menu, .cbi-tabmenu .open.dropdown .dropdown-toggle {
1144         border-color: #999;
1145 }
1146
1147 .tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after,
1148 .cbi-tabmenu li.open a.menu:after, .cbi-tabmenu .dropdown.open .dropdown-toggle:after {
1149         border-top-color: #555;
1150 }
1151
1152 .tab-content > .tab-pane,
1153 .tab-content > div {
1154         display: none;
1155 }
1156
1157 .tab-content > .active {
1158         display: block;
1159 }
1160
1161 .breadcrumb {
1162         padding: 7px 14px;
1163         margin: 0 0 18px;
1164         background-color: #f5f5f5;
1165         background-repeat: repeat-x;
1166         background-image: linear-gradient(to bottom, #fff, #f5f5f5);
1167         border: 1px solid #ddd;
1168         border-radius: 3px;
1169         box-shadow: inset 0 1px 0 #fff;
1170 }
1171
1172 .breadcrumb li {
1173         display: inline;
1174         text-shadow: 0 1px 0 #fff;
1175 }
1176
1177 .breadcrumb .divider {
1178         padding: 0 5px;
1179         color: #bfbfbf;
1180 }
1181
1182 .breadcrumb .active a {
1183         color: #404040;
1184 }
1185
1186 footer {
1187         margin-top: 17px;
1188         padding-top: 17px;
1189         border-top: 1px solid #eee;
1190 }
1191
1192 .btn.danger,
1193 .alert-message.danger,
1194 .btn.danger:hover,
1195 .alert-message.danger:hover,
1196 .btn.error,
1197 .alert-message.error,
1198 .btn.error:hover,
1199 .alert-message.error:hover,
1200 .btn.success,
1201 .alert-message.success,
1202 .btn.success:hover,
1203 .alert-message.success:hover,
1204 .btn.info,
1205 .alert-message.info,
1206 .btn.info:hover,
1207 .alert-message.info:hover,
1208 .cbi-tooltip.error, .cbi-tooltip.success, .cbi-tooltip.info {
1209         color: #fff;
1210 }
1211
1212 .btn .close, .alert-message .close {
1213         font-family: Arial, sans-serif;
1214         line-height: 18px;
1215 }
1216
1217 .btn.danger,
1218 .alert-message.danger,
1219 .btn.error,
1220 .alert-message.error,
1221 .cbi-tooltip.error {
1222         background: linear-gradient(to bottom, #ee5f5b, #c43c35) repeat-x;
1223         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1224         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1225 }
1226
1227 .btn.success, .alert-message.success, .cbi-tooltip.success {
1228         background: linear-gradient(to bottom, #62c462, #57a957) repeat-x;
1229         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1230         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1231 }
1232
1233 .btn.info, .alert-message.info, .cbi-tooltip.info {
1234         background: linear-gradient(to bottom, #5bc0de, #339bb9) repeat-x;
1235         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1236         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1237 }
1238
1239 .alert-message.notice, .cbi-tooltip.notice {
1240         background: linear-gradient(to bottom, #efefef, #fefefe) repeat-x;
1241         text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
1242         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1243 }
1244
1245 .item::after,
1246 .btn,
1247 .cbi-button {
1248         cursor: pointer;
1249         display: inline-block;
1250         background: linear-gradient(#fff, #fff 25%, #e6e6e6) no-repeat;
1251         padding: 5px 14px 6px;
1252         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1253         color: #333;
1254         font-size: 13px;
1255         line-height: normal;
1256         border: 1px solid #ccc;
1257         border-bottom-color: #bbb;
1258         border-radius: 4px;
1259         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1260 }
1261
1262 .btn:focus,
1263 .cbi-button:focus {
1264         outline: 1px dotted #666;
1265 }
1266
1267 .cbi-input-invalid,
1268 .cbi-input-invalid.cbi-dropdown,
1269 .cbi-input-invalid.cbi-dropdown:not([open]) > ul > li,
1270 .cbi-value-error input {
1271         color: #f00;
1272         border-color: #f00;
1273 }
1274
1275 .cbi-button-positive,
1276 .cbi-button-fieldadd,
1277 .cbi-button-add,
1278 .cbi-button-save {
1279         border-color: #4a4;
1280         color: #4a4;
1281 }
1282
1283 .cbi-button-neutral,
1284 .cbi-button-download,
1285 .cbi-button-find,
1286 .cbi-button-link,
1287 .cbi-button-up,
1288 .cbi-button-down {
1289         color: #444;
1290 }
1291
1292 .btn.primary,
1293 .cbi-button-action,
1294 .cbi-button-apply,
1295 .cbi-button-reload,
1296 .cbi-button-edit {
1297         border-color: #0069d6;
1298         color: #0069d6;
1299 }
1300
1301 .cbi-button-negative,
1302 .cbi-section-remove .cbi-button,
1303 .cbi-button-reset,
1304 .cbi-button-remove {
1305         border-color: #c44;
1306         color: #c44;
1307 }
1308
1309 .cbi-page-actions::after {
1310         display: table;
1311         content: "";
1312         clear: both;
1313 }
1314
1315 .cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-save):not(.cbi-button-reset) {
1316         float: left;
1317         margin-right: .4em;
1318 }
1319
1320 .btn.primary,
1321 .cbi-button-action.important,
1322 .cbi-page-actions .cbi-button-apply,
1323 .cbi-section-actions .cbi-button-edit {
1324         color: #fff;
1325         background: linear-gradient(to bottom, #0069d6, #0049d6) no-repeat;
1326         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1327 }
1328
1329 .cbi-button-positive.important,
1330 .cbi-page-actions .cbi-button-save {
1331         color: #fff;
1332         background: linear-gradient(to bottom, #4a4, #484) no-repeat;
1333         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1334 }
1335
1336 .cbi-button-negative.important {
1337         color: #fff;
1338         background: linear-gradient(to bottom, #c44, #c00) no-repeat;
1339         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1340 }
1341
1342 .cbi-page-actions .cbi-button-apply + .cbi-button-save {
1343         background: linear-gradient(#fff, #fff 25%, #e6e6e6);
1344         text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.75);
1345         color: #4a4;
1346 }
1347
1348 .cbi-dropdown {
1349         border: 1px solid #ccc;
1350         border-radius: 3px;
1351         display: inline-flex;
1352         padding: 0;
1353         cursor: pointer;
1354         height: auto;
1355         background: linear-gradient(#fff 0%, #e9e8e6 100%);
1356         position: relative;
1357         color: #404040;
1358 }
1359
1360 .cbi-dynlist > .item:focus,
1361 .cbi-dropdown:focus {
1362         outline: 2px solid #4b6e9b;
1363 }
1364
1365 .cbi-dropdown > ul {
1366         margin: 0 !important;
1367         padding: 0;
1368         list-style: none;
1369         overflow-x: hidden;
1370         overflow-y: auto;
1371         display: flex;
1372         width: 100%;
1373 }
1374
1375 .cbi-dropdown > ul.preview {
1376         display: none;
1377 }
1378
1379 .cbi-dropdown > .open,
1380 .cbi-dropdown > .more {
1381         flex-grow: 0;
1382         flex-shrink: 0;
1383         display: flex;
1384         flex-direction: column;
1385         justify-content: center;
1386         text-align: center;
1387         line-height: 2em;
1388         padding: 0 .25em;
1389 }
1390
1391 .cbi-dropdown > .more,
1392 .cbi-dropdown > ul > li[placeholder] {
1393         color: #777;
1394         font-weight: bold;
1395         text-shadow: 1px 1px 0px #fff;
1396         display: none;
1397         justify-content: center;
1398 }
1399
1400 .cbi-dropdown > ul > li {
1401         display: none;
1402         padding: .25em;
1403         white-space: nowrap;
1404         overflow: hidden;
1405         text-overflow: ellipsis;
1406         flex-shrink: 1;
1407         flex-grow: 1;
1408         align-items: center;
1409         align-self: center;
1410         color: #404040;
1411         min-height: 20px;
1412 }
1413
1414 .cbi-dropdown > ul > li .hide-open { display: block; display: initial; }
1415 .cbi-dropdown > ul > li .hide-close { display: none; }
1416
1417 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1418         border-left: 1px solid #ccc;
1419 }
1420
1421 .cbi-dropdown[empty] > ul {
1422         max-width: 1px;
1423 }
1424
1425 .cbi-dropdown > ul > li > form {
1426         display: none;
1427         margin: 0;
1428         padding: 0;
1429         pointer-events: none;
1430 }
1431
1432 .cbi-dropdown > ul > li img {
1433         vertical-align: middle;
1434         margin-right: .25em;
1435 }
1436
1437 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1438         margin: 0;
1439 }
1440
1441 .cbi-dropdown > ul > li input[type="text"] {
1442         height: 20px;
1443 }
1444
1445 .cbi-dropdown[open] {
1446         position: relative;
1447 }
1448
1449 .cbi-dropdown[open] > ul.dropdown {
1450         display: block;
1451         background: #f6f6f5;
1452         border: 1px solid #918e8c;
1453         box-shadow: 0 0 4px #918e8c;
1454         position: absolute;
1455         z-index: 1100;
1456         max-width: none;
1457         min-width: 100%;
1458         width: auto;
1459         transition: max-height .125s ease-in;
1460 }
1461
1462 .cbi-dropdown > ul > li[display],
1463 .cbi-dropdown[open] > ul.preview,
1464 .cbi-dropdown[open] > ul.dropdown > li,
1465 .cbi-dropdown[multiple] > ul > li > label,
1466 .cbi-dropdown[multiple][open] > ul.dropdown > li,
1467 .cbi-dropdown[multiple][more] > .more,
1468 .cbi-dropdown[multiple][empty] > .more {
1469         flex-grow: 1;
1470         display: flex;
1471 }
1472
1473 .cbi-dropdown[empty] > ul > li,
1474 .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
1475 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1476         display: block;
1477 }
1478
1479 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
1480 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block; display: initial; }
1481
1482 .cbi-dropdown[open] > ul.dropdown > li {
1483         border-bottom: 1px solid #ccc;
1484 }
1485
1486 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1487         background: #b0d0f0;
1488 }
1489
1490 .cbi-dropdown[open] > ul.dropdown > li.focus {
1491         background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
1492 }
1493
1494 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1495         margin-bottom: 0;
1496         border-bottom: none;
1497 }
1498
1499 .cbi-dropdown[open] > ul.dropdown > li[unselectable] {
1500         opacity: 0.7;
1501 }
1502
1503 .cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
1504         width: 100%;
1505 }
1506
1507 .cbi-dropdown[disabled] {
1508         pointer-events: none;
1509         opacity: .6;
1510 }
1511
1512 input[type="text"] + .cbi-button,
1513 input[type="password"] + .cbi-button,
1514 select + .cbi-button {
1515         border-radius: 0 3px 3px 0;
1516         border-color: #ccc;
1517         margin: 0 0 1px -2px;
1518         padding: 0 6px;
1519         vertical-align: top;
1520         height: 28px;
1521         font-size: 14px;
1522         font-weight: bold;
1523         line-height: 28px;
1524 }
1525
1526 select + .cbi-button {
1527         border-left-color: transparent;
1528 }
1529
1530 .cbi-title-ref {
1531         color: #37c;
1532 }
1533
1534 .cbi-title-ref::after {
1535         content: "➙";
1536 }
1537
1538 .cbi-tooltip-container {
1539         cursor: help;
1540 }
1541
1542 .cbi-tooltip {
1543         position: absolute;
1544         z-index: 1000;
1545         left: -1000px;
1546         box-shadow: 0 0 2px #ccc;
1547         border-radius: 3px;
1548         background: #fff;
1549         white-space: pre;
1550         padding: 2px 5px;
1551         opacity: 0;
1552         transition: opacity .25s ease-in;
1553 }
1554
1555 .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
1556         left: auto;
1557         opacity: 1;
1558         transition: opacity .25s ease-in;
1559 }
1560
1561 .zonebadge .cbi-tooltip {
1562         padding: 1px;
1563         background: inherit;
1564         margin: -1.6em 0 0 -5px;
1565         border-radius: 3px;
1566         pointer-events: none;
1567         box-shadow: 0 0 3px #444;
1568 }
1569
1570 .zonebadge .cbi-tooltip > * {
1571         margin: 1px;
1572 }
1573
1574 .zone-forwards {
1575         display: flex;
1576         flex-wrap: wrap;
1577 }
1578
1579 .zone-forwards > * {
1580         flex: 1 1 40%;
1581         padding: 1px;
1582 }
1583
1584 .zone-forwards > span {
1585         flex-basis: 10%;
1586         text-align: center;
1587 }
1588
1589 .zone-forwards .zone-src,
1590 .zone-forwards .zone-dest {
1591         display: flex;
1592         flex-direction: column;
1593 }
1594
1595 .btn.active, .btn:active {
1596         box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1597 }
1598
1599 .btn.disabled {
1600         cursor: default;
1601         background-image: none;
1602         opacity: 0.65;
1603         box-shadow: none;
1604 }
1605
1606 .btn[disabled] {
1607         cursor: default;
1608         background-image: none;
1609         opacity: 0.65;
1610         box-shadow: none;
1611 }
1612
1613 .btn.large {
1614         font-size: 15px;
1615         line-height: normal;
1616         padding: 9px 14px 9px;
1617         border-radius: 6px;
1618 }
1619
1620 .btn.small {
1621         padding: 7px 9px 7px;
1622         font-size: 11px;
1623 }
1624
1625 button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
1626         padding: 0;
1627         border: 0;
1628 }
1629
1630 .close {
1631         float: right;
1632         color: #000;
1633         font-size: 20px;
1634         font-weight: bold;
1635         line-height: 13.5px;
1636         text-shadow: 0 1px 0 #fff;
1637         opacity: 0.25;
1638 }
1639
1640 .close:hover {
1641         color: #000;
1642         text-decoration: none;
1643         opacity: 0.4;
1644 }
1645
1646 .alert-message {
1647         position: relative;
1648         padding: 7px 15px;
1649         margin-bottom: 18px;
1650         color: #404040;
1651         background: linear-gradient(to bottom, #fceec1, #eedc94) repeat-x;
1652         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1653         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1654         text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
1655         border-width: 1px;
1656         border-style: solid;
1657         border-radius: 4px;
1658         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1659 }
1660
1661 .alert-message .close {
1662         margin-top: 1px;
1663         *margin-top: 0;
1664 }
1665
1666 .alert-message a {
1667         font-weight: bold;
1668         color: #404040;
1669 }
1670
1671 .alert-message.danger p a,
1672 .alert-message.error p a,
1673 .alert-message.success p a,
1674 .alert-message.info p a {
1675         color: #fff;
1676 }
1677
1678 .alert-message h5 {
1679         line-height: 18px;
1680 }
1681
1682 .alert-message p {
1683         margin-bottom: 0;
1684 }
1685
1686 .alert-message div {
1687         margin-top: 5px;
1688         margin-bottom: 2px;
1689         line-height: 28px;
1690 }
1691
1692 .label {
1693         padding: 1px 3px 2px;
1694         font-size: 9.75px;
1695         font-weight: bold;
1696         color: #fff !important;
1697         text-transform: uppercase;
1698         white-space: nowrap;
1699         background-color: #bfbfbf;
1700         border-radius: 3px;
1701         text-shadow: none;
1702 }
1703
1704 a.label:link,
1705 a.label:visited {
1706         color: #fff;
1707 }
1708
1709 a.label:hover {
1710         text-decoration: none;
1711 }
1712
1713 .label.important {
1714         background-color: #c43c35;
1715 }
1716
1717 .label.warning {
1718         background-color: #f89406;
1719 }
1720
1721 .label.success {
1722         background-color: #46a546;
1723 }
1724
1725 .label.notice {
1726         background-color: #62cffc;
1727 }
1728
1729 /* LuCI specific items */
1730 .hidden { display: none }
1731
1732 #memtotal > div,
1733 #memfree > div,
1734 #memcache > div,
1735 #membuff > div,
1736 #conns > div  {
1737           border: 1px solid #ccc;
1738           border-radius: 3px 3px 3px 3px;
1739           color: #808080;
1740           display: inline-block;
1741           font-size: 13px;
1742           line-height: 18px;
1743 }
1744
1745 #xhr_poll_status {
1746           cursor: pointer;
1747 }
1748
1749 form.inline { display: inline; margin-bottom: 0; }
1750
1751 header .pull-right { padding-top: 8px; }
1752
1753 #modemenu li:last-child span.divider { display: none }
1754
1755 #syslog {  width: 100%; }
1756
1757 .cbi-section-table .tr:hover .td,
1758 .cbi-section-table .tr:hover .th,
1759 .cbi-section-table .tr:hover::before {
1760         background-color: #f5f5f5;
1761 }
1762
1763 .cbi-section-table .tr.cbi-section-table-descr .th {
1764         font-weight: normal;
1765 }
1766
1767 .cbi-section-table-titles.named::before,
1768 .cbi-section-table-descr.named::before,
1769 .cbi-section-table-row[data-title]::before {
1770         content: attr(data-title) " ";
1771         display: table-cell;
1772         padding: 10px 10px 9px;
1773         line-height: 18px;
1774         font-weight: bold;
1775         vertical-align: middle;
1776 }
1777
1778 .cbi-section-table-titles.named::before,
1779 .cbi-section-table-descr.named::before,
1780 .cbi-section-table-row[data-title]::before {
1781         border-top: 1px solid #ddd;
1782 }
1783
1784 .left { text-align: left !important; }
1785 .right { text-align: right !important; }
1786 .center { text-align: center !important; }
1787 .top { vertical-align: top !important; }
1788 .middle { vertical-align: middle !important; }
1789 .bottom { vertical-align: bottom !important; }
1790
1791 .cbi-value-field { line-height: 1.5em; }
1792
1793 .cbi-value-field input[type=checkbox],
1794 .cbi-value-field input[type=radio] {
1795         margin-top: 8px;
1796         margin-right: 6px;
1797 }
1798
1799 table table td,
1800 .cbi-value-field table td {
1801         border: none;
1802 }
1803
1804 .table.cbi-section-table input[type="password"],
1805 .table.cbi-section-table input[type="text"],
1806 .table.cbi-section-table textarea,
1807 .table.cbi-section-table select {
1808         width: 100%;
1809 }
1810
1811 .table.cbi-section-table .td.cbi-section-table-cell {
1812         white-space: nowrap;
1813         text-align: right;
1814 }
1815
1816 .table.cbi-section-table .td.cbi-section-table-cell select {
1817         width: inherit;
1818 }
1819
1820 .td.cbi-section-actions {
1821         text-align: right;
1822         vertical-align: middle;
1823 }
1824
1825 .td.cbi-section-actions > * {
1826         display: flex;
1827 }
1828
1829 .td.cbi-section-actions > * > *,
1830 .td.cbi-section-actions > * > form > * {
1831         flex: 1 1 4em;
1832         margin: 0 1px;
1833 }
1834
1835 .td.cbi-section-actions > * > form {
1836         display: inline-flex;
1837         margin: 0;
1838 }
1839
1840 .table.valign-middle .td {
1841         vertical-align: middle;
1842 }
1843
1844 .cbi-rowstyle-2,
1845 .tr.table-titles,
1846 .tr.cbi-section-table-titles {
1847         background: #f9f9f9;
1848 }
1849
1850 .cbi-value-description {
1851         background-image: url(/luci-static/resources/cbi/help.gif);
1852         background-position: .25em .2em;
1853         background-repeat: no-repeat;
1854         margin: .25em 0 0 0;
1855         padding: 0 0 0 1.7em;
1856 }
1857
1858 .cbi-section-error {
1859         border: 1px solid #f00;
1860         border-radius: 3px;
1861         background-color: #fce6e6;
1862         padding: 5px;
1863         margin-bottom: 18px;
1864 }
1865
1866 .cbi-section-error ul { margin: 0 0 0 20px; }
1867
1868 .cbi-section-error ul li {
1869         color: #f00;
1870         font-weight: bold;
1871 }
1872
1873 .ifacebox {
1874         background-color: #fff;
1875         border: 1px solid #ccc;
1876         margin: 0 10px;
1877         text-align: center;
1878         white-space: nowrap;
1879         background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
1880         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1881         border-radius: 4px;
1882         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1883         display: inline-flex;
1884         flex-direction: column;
1885         line-height: 1.2em;
1886         min-width: 100px;
1887 }
1888
1889 .ifacebox .ifacebox-head {
1890         border-bottom: 1px solid #ccc;
1891         padding: 2px;
1892         background: #eee;
1893 }
1894
1895 .ifacebox .ifacebox-head.active {
1896         background: #90c0e0;
1897 }
1898
1899 .ifacebox .ifacebox-body {
1900         padding: .25em;
1901 }
1902
1903 .ifacebadge {
1904         display: inline-block;
1905         flex-direction: row;
1906         white-space: nowrap;
1907         background-color: #fff;
1908         border: 1px solid #ccc;
1909         padding: 2px;
1910         background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
1911         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1912         border-radius: 4px;
1913         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1914         cursor: default;
1915         line-height: 1.2em;
1916 }
1917
1918 .ifacebadge img {
1919         width: 16px;
1920         height: 16px;
1921         vertical-align: middle;
1922 }
1923
1924 .ifacebadge-active {
1925         border-color: #000;
1926         font-weight: bold;
1927 }
1928
1929 .network-status-table {
1930         display: flex;
1931         flex-wrap: wrap;
1932 }
1933
1934 .network-status-table .ifacebox {
1935         margin: .5em;
1936         flex-grow: 1;
1937 }
1938
1939 .network-status-table .ifacebox-body {
1940         display: flex;
1941         flex-direction: column;
1942         height: 100%;
1943         text-align: left;
1944 }
1945
1946 .network-status-table .ifacebox-body > * {
1947         margin: .25em;
1948 }
1949
1950 .network-status-table .ifacebox-body > span {
1951         flex: 10 10 auto;
1952 }
1953
1954 .network-status-table .ifacebox-body > div {
1955         display: flex;
1956         flex-wrap: wrap;
1957         margin: -.125em;
1958 }
1959
1960 #dsl_status_table .ifacebox-body > span > strong {
1961         display: inline-block;
1962         min-width: 35%;
1963 }
1964
1965 .ifacebadge.large,
1966 .network-status-table .ifacebox-body .ifacebadge {
1967         display: inline-flex;
1968         flex: 1;
1969         padding: .25em;
1970         min-width: 220px;
1971         margin: .125em;
1972 }
1973
1974 .ifacebadge > *,
1975 .ifacebadge.large > * {
1976         margin: 0 .125em;
1977 }
1978
1979 .zonebadge {
1980         padding: 2px;
1981         border-radius: 4px;
1982         display: inline-block;
1983         white-space: nowrap;
1984         color: #666;
1985         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1986 }
1987
1988 .zonebadge > em,
1989 .zonebadge > strong {
1990         margin: 0 2px;
1991         display: inline-block;
1992 }
1993
1994 .zonebadge input {
1995         width: 6em;
1996 }
1997
1998 .zonebadge > .ifacebadge {
1999         margin-left: 2px;
2000 }
2001
2002 .zonebadge-empty {
2003         border: 1px dashed #aaa;
2004         color: #aaa;
2005         font-style: italic;
2006         font-size: smaller;
2007 }
2008
2009 div.cbi-value var,
2010 .td.cbi-value-field var {
2011         font-style: italic;
2012         color: #0069d6;
2013 }
2014
2015 .uci-change-list {
2016         line-height: 170%;
2017         white-space: pre;
2018 }
2019
2020 .uci-change-list del,
2021 .uci-change-list ins,
2022 .uci-change-list var,
2023 .uci-change-legend-label del,
2024 .uci-change-legend-label ins,
2025 .uci-change-legend-label var {
2026         text-decoration: none;
2027         font-family: monospace;
2028         font-style: normal;
2029         border: 1px solid #ccc;
2030         background: #eee;
2031         padding: 2px;
2032         display: block;
2033         line-height: 15px;
2034         margin-bottom: 1px;
2035 }
2036
2037 .uci-change-list ins,
2038 .uci-change-legend-label ins {
2039         border-color: #0f0;
2040         background: #cfc;
2041 }
2042
2043 .uci-change-list del,
2044 .uci-change-legend-label del {
2045         border-color: #f00;
2046         background: #fcc;
2047 }
2048
2049 .uci-change-list var,
2050 .uci-change-legend-label var {
2051         border-color: #ccc;
2052         background: #eee;
2053 }
2054
2055 .uci-change-list var ins,
2056 .uci-change-list var del {
2057         display: inline-block;
2058         border: none;
2059         width: 100%;
2060         padding: 0;
2061 }
2062
2063 .uci-change-legend {
2064         padding: 5px;
2065 }
2066
2067 .uci-change-legend-label {
2068         width: 150px;
2069         float: left;
2070 }
2071
2072 .uci-change-legend-label > ins,
2073 .uci-change-legend-label > del,
2074 .uci-change-legend-label > var {
2075         float: left;
2076         margin-right: 4px;
2077         width: 10px;
2078         height: 10px;
2079         display: block;
2080         position: relative;
2081 }
2082
2083 .uci-change-legend-label var ins,
2084 .uci-change-legend-label var del {
2085         border: none;
2086         position: absolute;
2087         top: 2px;
2088         left: 2px;
2089         right: 2px;
2090         bottom: 2px;
2091 }
2092
2093 html body.apply-overlay-active {
2094         height: calc(100vh - 63px);
2095 }
2096
2097 #applyreboot-section {
2098         line-height: 300%;
2099 }
2100
2101 [data-page="admin-network-dhcp"] [data-name="ip"] {
2102         width: 15%;
2103 }
2104
2105 @keyframes flash {
2106         0% { opacity: 1; }
2107         50% { opacity: .5; }
2108         100% { opacity: 1; }
2109 }
2110
2111 .flash {
2112         animation: flash .35s;
2113 }