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