src/scss/bootstrap-4.0.0-alpha.6/docs/assets/css/docs.css

   1 /*!
   2  * Bootstrap Docs (https://getbootstrap.com)
   3  * Copyright 2011-2017 The Bootstrap Authors
   4  * Copyright 2011-2017 Twitter, Inc.
   5  * Licensed under the Creative Commons Attribution 3.0 Unported License. For
   6  * details, see https://creativecommons.org/licenses/by/3.0/.
   7  */
   8 .bd-booticon {
   9   display: block;
  10   width: 9rem;
  11   height: 9rem;
  12   font-size: 6.5rem;
  13   line-height: 9rem;
  14   color: #fff;
  15   text-align: center;
  16   cursor: default;
  17   background-color: #563d7c;
  18   border-radius: 15%; }
  19   .bd-booticon.inverse {
  20     color: #563d7c;
  21     background-color: #fff; }
  22   .bd-booticon.outline {
  23     background-color: transparent;
  24     border: 1px solid #cdbfe3; }
  25
  26 .bd-navbar .navbar-nav .nav-link {
  27   color: #8e869d; }
  28   .bd-navbar .navbar-nav .nav-link.active, .bd-navbar .navbar-nav .nav-link:hover, .bd-navbar .navbar-nav .nav-link:focus {
  29     color: #292b2c;
  30     background-color: transparent; }
  31   .bd-navbar .navbar-nav .nav-link.active {
  32     font-weight: 500;
  33     color: #040404; }
  34
  35 .bd-navbar .dropdown-menu {
  36   font-size: inherit; }
  37
  38 .bd-masthead {
  39   position: relative;
  40   padding: 3rem 15px 2rem;
  41   color: #cdbfe3;
  42   text-align: center;
  43   background-image: linear-gradient(135deg, #271b38, #563d7c, #7952b3); }
  44   .bd-masthead .bd-booticon {
  45     margin: 0 auto 2rem;
  46     color: #cdbfe3;
  47     border-color: #cdbfe3; }
  48   .bd-masthead h1 {
  49     font-weight: 300;
  50     line-height: 1; }
  51   .bd-masthead .lead {
  52     margin-right: auto;
  53     margin-bottom: 2rem;
  54     margin-left: auto;
  55     font-size: 1.25rem;
  56     color: #fff; }
  57   .bd-masthead .version {
  58     margin-top: -1rem;
  59     margin-bottom: 2rem; }
  60   .bd-masthead .btn {
  61     width: 100%;
  62     padding: 1rem 2rem;
  63     font-size: 1.25rem;
  64     font-weight: 500;
  65     color: #ffe484;
  66     border-color: #ffe484; }
  67     .bd-masthead .btn:hover {
  68       color: #2a2730;
  69       background-color: #ffe484;
  70       border-color: #ffe484; }
  71   .bd-masthead .carbonad {
  72     margin-bottom: -2rem !important; }
  73   @media (min-width: 576px) {
  74     .bd-masthead {
  75       padding-top: 8rem;
  76       padding-bottom: 2rem; }
  77       .bd-masthead .btn {
  78         width: auto; }
  79       .bd-masthead .carbonad {
  80         margin-bottom: 0 !important; } }
  81   @media (min-width: 768px) {
  82     .bd-masthead {
  83       padding-bottom: 4rem; }
  84       .bd-masthead .bd-header {
  85         margin-bottom: 4rem; }
  86       .bd-masthead h1 {
  87         font-size: 4rem; }
  88       .bd-masthead .lead {
  89         font-size: 1.5rem; }
  90       .bd-masthead .carbonad {
  91         margin-top: 3rem !important; } }
  92   @media (min-width: 992px) {
  93     .bd-masthead .lead {
  94       width: 85%;
  95       font-size: 2rem; } }
  96
  97 .bd-featurette {
  98   padding-top: 3rem;
  99   padding-bottom: 3rem;
 100   font-size: 1rem;
 101   line-height: 1.5;
 102   color: #555;
 103   text-align: center;
 104   background-color: #fff;
 105   border-top: 1px solid #eee; }
 106   .bd-featurette .highlight {
 107     text-align: left; }
 108   .bd-featurette .lead {
 109     margin-right: auto;
 110     margin-bottom: 2rem;
 111     margin-left: auto;
 112     font-size: 1rem;
 113     text-align: center; }
 114   @media (min-width: 576px) {
 115     .bd-featurette {
 116       text-align: left; } }
 117   @media (min-width: 768px) {
 118     .bd-featurette .col-sm-6:first-child {
 119       padding-right: 45px; }
 120     .bd-featurette .col-sm-6:last-child {
 121       padding-left: 45px; } }
 122
 123 .bd-featurette-title {
 124   margin-bottom: .5rem;
 125   font-size: 2rem;
 126   font-weight: normal;
 127   color: #333;
 128   text-align: center; }
 129
 130 .half-rule {
 131   width: 6rem;
 132   margin: 2.5rem auto; }
 133   @media (min-width: 576px) {
 134     .half-rule {
 135       margin-right: 0;
 136       margin-left: 0; } }
 137
 138 .bd-featurette h4 {
 139   margin-top: 1rem;
 140   margin-bottom: .5rem;
 141   font-weight: normal;
 142   color: #333; }
 143
 144 .bd-featurette-img {
 145   display: block;
 146   margin-bottom: 1.25rem;
 147   color: #333; }
 148
 149 .bd-featurette-img:hover {
 150   color: #0275d8;
 151   text-decoration: none; }
 152
 153 .bd-featurette-img img {
 154   display: block;
 155   margin-bottom: 1rem; }
 156
 157 @media (min-width: 480px) {
 158   .bd-featurette .img-fluid {
 159     margin-top: 2rem; } }
 160
 161 @media (min-width: 768px) {
 162   .bd-featurette {
 163     padding-top: 6rem;
 164     padding-bottom: 6rem; }
 165   .bd-featurette-title {
 166     font-size: 2.5rem; }
 167     .bd-featurette-title + .lead {
 168       font-size: 1.5rem; }
 169   .bd-featurette .lead {
 170     max-width: 80%; }
 171   .bd-featurette .img-fluid {
 172     margin-top: 0; } }
 173
 174 .bd-featured-sites {
 175   margin-right: -1px;
 176   margin-left: -1px; }
 177
 178 .bd-featured-sites .col-6 {
 179   padding: 1px; }
 180
 181 .bd-featured-sites .img-fluid {
 182   margin-top: 0; }
 183
 184 @media (min-width: 768px) {
 185   .bd-featured-sites .col-sm-3:first-child img {
 186     border-top-left-radius: .25rem;
 187     border-bottom-left-radius: .25rem; }
 188   .bd-featured-sites .col-sm-3:last-child img {
 189     border-top-right-radius: .25rem;
 190     border-bottom-right-radius: .25rem; } }
 191
 192 #carbonads {
 193   display: block;
 194   padding: 15px 15px 15px 160px;
 195   margin: 50px -15px 0;
 196   overflow: hidden;
 197   font-size: 13px;
 198   line-height: 1.5;
 199   text-align: left;
 200   border: solid #866ab3;
 201   border-width: 1px 0 0; }
 202   #carbonads a {
 203     color: #fff;
 204     text-decoration: none; }
 205   @media (min-width: 576px) {
 206     #carbonads {
 207       max-width: 330px;
 208       margin: 50px auto 0;
 209       border-width: 1px;
 210       border-radius: 4px; } }
 211   @media (min-width: 992px) {
 212     #carbonads {
 213       position: absolute;
 214       top: 0;
 215       right: 15px;
 216       margin-top: 0; }
 217       .bd-masthead #carbonads {
 218         position: static; } }
 219
 220 .carbon-img {
 221   float: left;
 222   margin-left: -145px; }
 223
 224 .carbon-poweredby {
 225   display: block;
 226   color: #cdbfe3 !important; }
 227
 228 .bd-content > table {
 229   display: block;
 230   width: 100%;
 231   max-width: 100%;
 232   margin-bottom: 1rem;
 233   overflow-y: auto; }
 234   .bd-content > table > thead > tr > th,
 235   .bd-content > table > thead > tr > td,
 236   .bd-content > table > tbody > tr > th,
 237   .bd-content > table > tbody > tr > td,
 238   .bd-content > table > tfoot > tr > th,
 239   .bd-content > table > tfoot > tr > td {
 240     padding: 0.75rem;
 241     vertical-align: top;
 242     border: 1px solid #eceeef; }
 243     .bd-content > table > thead > tr > th > p:last-child,
 244     .bd-content > table > thead > tr > td > p:last-child,
 245     .bd-content > table > tbody > tr > th > p:last-child,
 246     .bd-content > table > tbody > tr > td > p:last-child,
 247     .bd-content > table > tfoot > tr > th > p:last-child,
 248     .bd-content > table > tfoot > tr > td > p:last-child {
 249       margin-bottom: 0; }
 250   .bd-content > table td:first-child > code {
 251     white-space: nowrap; }
 252
 253 .bd-content > h2:not(:first-child) {
 254   margin-top: 3rem; }
 255
 256 .bd-content > h3 {
 257   margin-top: 1.5rem; }
 258
 259 .bd-content > ul li,
 260 .bd-content > ol li {
 261   margin-bottom: .25rem; }
 262
 263 @media (min-width: 576px) {
 264   .bd-title {
 265     font-size: 3rem; }
 266     .bd-title + p {
 267       font-size: 1.25rem;
 268       font-weight: 300; } }
 269
 270 #markdown-toc > li:first-child {
 271   display: none; }
 272
 273 #markdown-toc ul {
 274   padding-left: 2rem;
 275   margin-top: .25rem;
 276   margin-bottom: .25rem; }
 277
 278 .bd-pageheader {
 279   padding: 2rem 15px;
 280   margin-bottom: 1.5rem;
 281   color: #cdbfe3;
 282   text-align: center;
 283   background-color: #563d7c; }
 284   .bd-pageheader .container {
 285     position: relative; }
 286   .bd-pageheader h1 {
 287     font-size: 3rem;
 288     font-weight: normal;
 289     color: #fff; }
 290   .bd-pageheader p {
 291     margin-bottom: 0;
 292     font-size: 1.25rem;
 293     font-weight: 300; }
 294   @media (min-width: 576px) {
 295     .bd-pageheader {
 296       padding-top: 4rem;
 297       padding-bottom: 4rem;
 298       margin-bottom: 3rem;
 299       text-align: left; }
 300       .bd-pageheader .carbonad {
 301         margin: 2rem 0 0 !important; } }
 302   @media (min-width: 768px) {
 303     .bd-pageheader h1 {
 304       font-size: 4rem; }
 305     .bd-pageheader p {
 306       font-size: 1.5rem; } }
 307   @media (min-width: 992px) {
 308     .bd-pageheader h1,
 309     .bd-pageheader p {
 310       margin-right: 380px; }
 311     .bd-pageheader .carbonad {
 312       position: absolute;
 313       top: 0;
 314       right: .75rem;
 315       margin: 0 !important; } }
 316
 317 #skippy {
 318   display: block;
 319   padding: 1em;
 320   color: #fff;
 321   background-color: #563d7c;
 322   outline: 0; }
 323   #skippy .skiplink-text {
 324     padding: .5em;
 325     outline: 1px dotted; }
 326
 327 @media (min-width: 768px) {
 328   .bd-sidebar {
 329     padding-left: 1rem; } }
 330
 331 .bd-search {
 332   position: relative;
 333   margin-bottom: 1.5rem; }
 334   .bd-search .form-control {
 335     height: 2.45rem;
 336     padding-top: .4rem;
 337     padding-bottom: .4rem;
 338     background-color: #fafafa; }
 339     .bd-search .form-control:focus {
 340       background-color: #fff; }
 341
 342 .bd-search-results {
 343   right: 0;
 344   display: block;
 345   padding: 0;
 346   overflow: hidden;
 347   font-size: .9rem; }
 348   .bd-search-results:empty {
 349     display: none; }
 350   .bd-search-results .dropdown-item {
 351     padding-right: .75rem;
 352     padding-left: .75rem; }
 353     .bd-search-results .dropdown-item:first-child {
 354       margin-top: .25rem; }
 355     .bd-search-results .dropdown-item:last-child {
 356       margin-bottom: .25rem; }
 357   .bd-search-results .no-results {
 358     padding: .75rem 1rem;
 359     color: #7a7a7a;
 360     text-align: center;
 361     white-space: normal; }
 362
 363 .bd-sidenav {
 364   display: none; }
 365
 366 .bd-toc-link {
 367   display: block;
 368   padding: .25rem .75rem;
 369   color: #464a4c; }
 370
 371 .bd-toc-link:hover,
 372 .bd-toc-link:focus {
 373   color: #0275d8;
 374   text-decoration: none; }
 375
 376 .active > .bd-toc-link {
 377   font-weight: 500;
 378   color: #292b2c; }
 379
 380 .active > .bd-sidenav {
 381   display: block; }
 382
 383 .bd-toc-item.active {
 384   margin-top: 1rem;
 385   margin-bottom: 1rem; }
 386
 387 .bd-toc-item:first-child {
 388   margin-top: 0; }
 389
 390 .bd-toc-item:last-child {
 391   margin-bottom: 2rem; }
 392
 393 .bd-sidebar .nav > li > a {
 394   display: block;
 395   padding: .25rem .75rem;
 396   font-size: 90%;
 397   color: #99979c; }
 398
 399 .bd-sidebar .nav > li > a:hover,
 400 .bd-sidebar .nav > li > a:focus {
 401   color: #0275d8;
 402   text-decoration: none;
 403   background-color: transparent; }
 404
 405 .bd-sidebar .nav > .active > a,
 406 .bd-sidebar .nav > .active:hover > a,
 407 .bd-sidebar .nav > .active:focus > a {
 408   font-weight: 500;
 409   color: #292b2c;
 410   background-color: transparent; }
 411
 412 .bd-footer {
 413   padding: 4rem 0;
 414   margin-top: 4rem;
 415   font-size: 85%;
 416   text-align: center;
 417   background-color: #f7f7f7; }
 418   .bd-footer a {
 419     font-weight: 500;
 420     color: #464a4c; }
 421     .bd-footer a:hover {
 422       color: #0275d8; }
 423   .bd-footer p {
 424     margin-bottom: 0; }
 425   @media (min-width: 576px) {
 426     .bd-footer {
 427       text-align: left; } }
 428
 429 .bd-footer-links {
 430   padding-left: 0;
 431   margin-bottom: 1rem; }
 432   .bd-footer-links li {
 433     display: inline-block; }
 434     .bd-footer-links li + li {
 435       margin-left: 1rem; }
 436
 437 .bd-example-row .row + .row {
 438   margin-top: 1rem; }
 439
 440 .bd-example-row .row > .col,
 441 .bd-example-row .row > [class^="col-"] {
 442   padding-top: .75rem;
 443   padding-bottom: .75rem;
 444   background-color: rgba(86, 61, 124, 0.15);
 445   border: 1px solid rgba(86, 61, 124, 0.2); }
 446
 447 .bd-example-row .flex-items-top,
 448 .bd-example-row .flex-items-middle,
 449 .bd-example-row .flex-items-bottom {
 450   min-height: 6rem;
 451   background-color: rgba(255, 0, 0, 0.1); }
 452
 453 .bd-example-row-flex-cols .row {
 454   min-height: 10rem;
 455   background-color: rgba(255, 0, 0, 0.1); }
 456
 457 .bd-highlight {
 458   background-color: rgba(86, 61, 124, 0.15);
 459   border: 1px solid rgba(86, 61, 124, 0.15); }
 460
 461 .bd-example-container {
 462   min-width: 16rem;
 463   max-width: 25rem;
 464   margin-right: auto;
 465   margin-left: auto; }
 466
 467 .bd-example-container-header {
 468   height: 3rem;
 469   margin-bottom: .5rem;
 470   background-color: #daeeff;
 471   border-radius: .25rem; }
 472
 473 .bd-example-container-sidebar {
 474   float: right;
 475   width: 4rem;
 476   height: 8rem;
 477   background-color: #fae3c4;
 478   border-radius: .25rem; }
 479
 480 .bd-example-container-body {
 481   height: 8rem;
 482   margin-right: 4.5rem;
 483   background-color: #957bbe;
 484   border-radius: .25rem; }
 485
 486 .bd-example-container-fluid {
 487   max-width: none; }
 488
 489 .bd-example {
 490   position: relative;
 491   padding: 1rem;
 492   margin: 1rem -1rem;
 493   border: solid #f7f7f9;
 494   border-width: .2rem 0 0; }
 495   .bd-example::after {
 496     display: block;
 497     content: "";
 498     clear: both; }
 499   @media (min-width: 576px) {
 500     .bd-example {
 501       padding: 1.5rem;
 502       margin-right: 0;
 503       margin-bottom: 0;
 504       margin-left: 0;
 505       border-width: .2rem; } }
 506   .bd-example + .highlight,
 507   .bd-example + .clipboard + .highlight {
 508     margin-top: 0; }
 509   .bd-example + p {
 510     margin-top: 2rem; }
 511   .bd-example .pos-f-t {
 512     position: relative;
 513     margin: -1rem; }
 514     @media (min-width: 576px) {
 515       .bd-example .pos-f-t {
 516         margin: -1.5rem; } }
 517   .bd-example > .form-control + .form-control {
 518     margin-top: .5rem; }
 519   .bd-example > .nav + .nav,
 520   .bd-example > .alert + .alert,
 521   .bd-example > .navbar + .navbar,
 522   .bd-example > .progress + .progress,
 523   .bd-example > .progress + .btn {
 524     margin-top: 1rem; }
 525   .bd-example > .dropdown-menu:first-child {
 526     position: static;
 527     display: block; }
 528   .bd-example > .form-group:last-child {
 529     margin-bottom: 0; }
 530
 531 .bd-example > .close {
 532   float: none; }
 533
 534 .bd-example-type .table .type-info {
 535   color: #999;
 536   vertical-align: middle; }
 537
 538 .bd-example-type .table td {
 539   padding: 1rem 0;
 540   border-color: #eee; }
 541
 542 .bd-example-type .table tr:first-child td {
 543   border-top: 0; }
 544
 545 .bd-example-type h1,
 546 .bd-example-type h2,
 547 .bd-example-type h3,
 548 .bd-example-type h4,
 549 .bd-example-type h5,
 550 .bd-example-type h6 {
 551   margin: 0; }
 552
 553 .bd-example-bg-classes p {
 554   padding: 1rem; }
 555
 556 .bd-example > img + img {
 557   margin-left: .5rem; }
 558
 559 .bd-example > .btn-group {
 560   margin-top: .25rem;
 561   margin-bottom: .25rem; }
 562
 563 .bd-example > .btn-toolbar + .btn-toolbar {
 564   margin-top: .5rem; }
 565
 566 .bd-example-control-sizing select,
 567 .bd-example-control-sizing input[type="text"] + input[type="text"] {
 568   margin-top: .5rem; }
 569
 570 .bd-example-form .input-group {
 571   margin-bottom: .5rem; }
 572
 573 .bd-example > textarea.form-control {
 574   resize: vertical; }
 575
 576 .bd-example > .list-group {
 577   max-width: 400px; }
 578
 579 .bd-example .fixed-top,
 580 .bd-example .sticky-top {
 581   position: static;
 582   margin: -1rem -1rem 1rem; }
 583
 584 .bd-example .fixed-bottom {
 585   position: static;
 586   margin: 1rem -1rem -1rem; }
 587
 588 @media (min-width: 576px) {
 589   .bd-example .fixed-top,
 590   .bd-example .sticky-top {
 591     margin: -1.5rem -1.5rem 1rem; }
 592   .bd-example .fixed-bottom {
 593     margin: 1rem -1.5rem -1.5rem; } }
 594
 595 .bd-example .pagination {
 596   margin-top: .5rem;
 597   margin-bottom: .5rem; }
 598
 599 .bd-example-modal {
 600   background-color: #fafafa; }
 601   .bd-example-modal .modal {
 602     position: relative;
 603     top: auto;
 604     right: auto;
 605     bottom: auto;
 606     left: auto;
 607     z-index: 1;
 608     display: block; }
 609   .bd-example-modal .modal-dialog {
 610     left: auto;
 611     margin-right: auto;
 612     margin-left: auto; }
 613
 614 .bd-example-tabs .nav-tabs {
 615   margin-bottom: 1rem; }
 616
 617 .bd-example-tooltips {
 618   text-align: center; }
 619
 620 .bd-example-tooltips > .btn {
 621   margin-top: .25rem;
 622   margin-bottom: .25rem; }
 623
 624 .bd-example-popover-static {
 625   padding-bottom: 1.5rem;
 626   background-color: #f9f9f9; }
 627
 628 .bd-example-popover-static .popover {
 629   position: relative;
 630   display: block;
 631   float: left;
 632   width: 260px;
 633   margin: 1.25rem; }
 634
 635 .tooltip-demo a {
 636   white-space: nowrap; }
 637
 638 .bd-example-tooltip-static .tooltip {
 639   position: relative;
 640   display: inline-block;
 641   margin: 10px 20px;
 642   opacity: 1; }
 643
 644 .scrollspy-example {
 645   position: relative;
 646   height: 200px;
 647   margin-top: .5rem;
 648   overflow: auto; }
 649
 650 .bd-example > .bg-primary:not(.navbar),
 651 .bd-example > .bg-success:not(.navbar),
 652 .bd-example > .bg-info:not(.navbar),
 653 .bd-example > .bg-warning:not(.navbar),
 654 .bd-example > .bg-danger:not(.navbar),
 655 .bd-example > .bg-inverse:not(.navbar),
 656 .bd-example > .bg-faded:not(.navbar) {
 657   padding: .5rem;
 658   margin-top: .5rem;
 659   margin-bottom: .5rem; }
 660
 661 .bd-example-border-utils [class^="border-"] {
 662   display: inline-block;
 663   width: 6rem;
 664   height: 6rem;
 665   margin: .25rem;
 666   background-color: #f5f5f5;
 667   border: 1px solid; }
 668
 669 .highlight {
 670   padding: 1rem;
 671   margin: 1rem -15px;
 672   background-color: #f7f7f9;
 673   -ms-overflow-style: -ms-autohiding-scrollbar; }
 674   @media (min-width: 576px) {
 675     .highlight {
 676       padding: 1.5rem;
 677       margin-right: 0;
 678       margin-left: 0; } }
 679
 680 .highlight pre {
 681   padding: 0;
 682   margin-top: 0;
 683   margin-bottom: 0;
 684   background-color: transparent;
 685   border: 0; }
 686
 687 .highlight pre code {
 688   font-size: inherit;
 689   color: #292b2c; }
 690
 691 .table-responsive .highlight pre {
 692   white-space: normal; }
 693
 694 .bd-table th small,
 695 .responsive-utilities th small {
 696   display: block;
 697   font-weight: normal;
 698   color: #999; }
 699
 700 .responsive-utilities tbody th {
 701   font-weight: normal; }
 702
 703 .responsive-utilities td {
 704   text-align: center; }
 705
 706 .responsive-utilities .is-visible {
 707   color: #468847;
 708   background-color: #dff0d8 !important; }
 709
 710 .responsive-utilities .is-hidden {
 711   color: #ccc;
 712   background-color: #f9f9f9 !important; }
 713
 714 .responsive-utilities-test {
 715   margin-top: .25rem; }
 716
 717 .responsive-utilities-test .col-6 {
 718   margin-top: .5rem;
 719   margin-bottom: .5rem; }
 720
 721 .responsive-utilities-test span {
 722   display: block;
 723   padding: 1rem .5rem;
 724   font-size: 1rem;
 725   font-weight: bold;
 726   line-height: 1.1;
 727   text-align: center;
 728   border-radius: .25rem; }
 729
 730 .visible-on .col-6 > .not-visible,
 731 .hidden-on .col-6 > .not-visible {
 732   color: #999;
 733   border: 1px solid #ddd; }
 734
 735 .visible-on .col-6 .visible,
 736 .hidden-on .col-6 .visible {
 737   color: #468847;
 738   background-color: #dff0d8;
 739   border: 1px solid #d6e9c6; }
 740
 741 @media (max-width: 575px) {
 742   .hidden-xs-only {
 743     display: none !important; } }
 744
 745 @media (min-width: 576px) and (max-width: 767px) {
 746   .hidden-sm-only {
 747     display: none !important; } }
 748
 749 @media (min-width: 768px) and (max-width: 991px) {
 750   .hidden-md-only {
 751     display: none !important; } }
 752
 753 @media (min-width: 992px) and (max-width: 1199px) {
 754   .hidden-lg-only {
 755     display: none !important; } }
 756
 757 @media (min-width: 1200px) {
 758   .hidden-xl-only {
 759     display: none !important; } }
 760
 761 .btn-bs {
 762   font-weight: 500;
 763   color: #7952b3;
 764   border-color: #7952b3; }
 765   .btn-bs:hover, .btn-bs:focus, .btn-bs:active {
 766     color: #fff;
 767     background-color: #7952b3;
 768     border-color: #7952b3; }
 769
 770 .bd-callout {
 771   padding: 1.25rem;
 772   margin-top: 1.25rem;
 773   margin-bottom: 1.25rem;
 774   border: 1px solid #eee;
 775   border-left-width: .25rem;
 776   border-radius: .25rem; }
 777
 778 .bd-callout h4 {
 779   margin-top: 0;
 780   margin-bottom: .25rem; }
 781
 782 .bd-callout p:last-child {
 783   margin-bottom: 0; }
 784
 785 .bd-callout code {
 786   border-radius: .25rem; }
 787
 788 .bd-callout + .bd-callout {
 789   margin-top: -.25rem; }
 790
 791 .bd-callout-info {
 792   border-left-color: #5bc0de; }
 793   .bd-callout-info h4 {
 794     color: #5bc0de; }
 795
 796 .bd-callout-warning {
 797   border-left-color: #f0ad4e; }
 798   .bd-callout-warning h4 {
 799     color: #f0ad4e; }
 800
 801 .bd-callout-danger {
 802   border-left-color: #d9534f; }
 803   .bd-callout-danger h4 {
 804     color: #d9534f; }
 805
 806 .bd-examples .img-thumbnail {
 807   margin-bottom: .75rem; }
 808
 809 .bd-examples h4 {
 810   margin-bottom: .25rem; }
 811
 812 .bd-examples p {
 813   margin-bottom: 1.25rem; }
 814
 815 @media (max-width: 480px) {
 816   .bd-examples {
 817     margin-right: -.75rem;
 818     margin-left: -.75rem; }
 819   .bd-examples > [class^="col-"] {
 820     padding-right: .75rem;
 821     padding-left: .75rem; } }
 822
 823 .bd-team {
 824   margin-bottom: 1.5rem; }
 825   .bd-team .team-member {
 826     line-height: 2rem;
 827     color: #555; }
 828   .bd-team .team-member:hover {
 829     color: #333;
 830     text-decoration: none; }
 831   .bd-team .github-btn {
 832     float: right;
 833     width: 180px;
 834     height: 1.25rem;
 835     margin-top: .25rem;
 836     border: 0; }
 837   .bd-team img {
 838     float: left;
 839     width: 2rem;
 840     margin-right: .5rem;
 841     border-radius: .25rem; }
 842
 843 .bd-browser-bugs td p {
 844   margin-bottom: 0; }
 845
 846 .bd-browser-bugs th:first-child {
 847   width: 18%; }
 848
 849 .bd-brand-logos {
 850   display: table;
 851   width: 100%;
 852   margin-bottom: 1rem;
 853   overflow: hidden;
 854   color: #563d7c;
 855   background-color: #f9f9f9;
 856   border-radius: .25rem; }
 857
 858 .bd-brand-item {
 859   padding: 4rem 0;
 860   text-align: center; }
 861
 862 .bd-brand-item + .bd-brand-item {
 863   border-top: 1px solid #fff; }
 864
 865 .bd-brand-logos .inverse {
 866   color: #fff;
 867   background-color: #563d7c; }
 868
 869 .bd-brand-item h1,
 870 .bd-brand-item h3 {
 871   margin-top: 0;
 872   margin-bottom: 0; }
 873
 874 .bd-brand-item .bd-booticon {
 875   margin-right: auto;
 876   margin-left: auto; }
 877
 878 @media (min-width: 768px) {
 879   .bd-brand-item {
 880     display: table-cell;
 881     width: 1%; }
 882   .bd-brand-item + .bd-brand-item {
 883     border-top: 0;
 884     border-left: 1px solid #fff; }
 885   .bd-brand-item h1 {
 886     font-size: 4rem; } }
 887
 888 .color-swatches {
 889   margin: 0 -5px;
 890   overflow: hidden; }
 891
 892 .color-swatch {
 893   float: left;
 894   width: 4rem;
 895   height: 4rem;
 896   margin-right: .25rem;
 897   margin-left: .25rem;
 898   border-radius: .25rem; }
 899   @media (min-width: 768px) {
 900     .color-swatch {
 901       width: 6rem;
 902       height: 6rem; } }
 903
 904 .color-swatches .bd-purple {
 905   background-color: #563d7c; }
 906
 907 .color-swatches .bd-purple-light {
 908   background-color: #cdbfe3; }
 909
 910 .color-swatches .bd-purple-lighter {
 911   background-color: #e5e1ea; }
 912
 913 .color-swatches .bd-gray {
 914   background-color: #f9f9f9; }
 915
 916 .bd-clipboard {
 917   position: relative;
 918   display: none;
 919   float: right; }
 920   .bd-clipboard + .highlight {
 921     margin-top: 0; }
 922
 923 .btn-clipboard {
 924   position: absolute;
 925   top: .5rem;
 926   right: .5rem;
 927   z-index: 10;
 928   display: block;
 929   padding: .25rem .5rem;
 930   font-size: 75%;
 931   color: #818a91;
 932   cursor: pointer;
 933   background-color: transparent;
 934   border-radius: .25rem; }
 935   .btn-clipboard:hover {
 936     color: #fff;
 937     background-color: #027de7; }
 938
 939 @media (min-width: 768px) {
 940   .bd-clipboard {
 941     display: block; } }
 942
 943 .hll {
 944   background-color: #ffc; }
 945
 946 .c {
 947   color: #999; }
 948
 949 .k {
 950   color: #069; }
 951
 952 .o {
 953   color: #555; }
 954
 955 .cm {
 956   color: #999; }
 957
 958 .cp {
 959   color: #099; }
 960
 961 .c1 {
 962   color: #999; }
 963
 964 .cs {
 965   color: #999; }
 966
 967 .gd {
 968   background-color: #fcc;
 969   border: 1px solid #c00; }
 970
 971 .ge {
 972   font-style: italic; }
 973
 974 .gr {
 975   color: #f00; }
 976
 977 .gh {
 978   color: #030; }
 979
 980 .gi {
 981   background-color: #cfc;
 982   border: 1px solid #0c0; }
 983
 984 .go {
 985   color: #aaa; }
 986
 987 .gp {
 988   color: #009; }
 989
 990 .gu {
 991   color: #030; }
 992
 993 .gt {
 994   color: #9c6; }
 995
 996 .kc {
 997   color: #069; }
 998
 999 .kd {
1000   color: #069; }
1001
1002 .kn {
1003   color: #069; }
1004
1005 .kp {
1006   color: #069; }
1007
1008 .kr {
1009   color: #069; }
1010
1011 .kt {
1012   color: #078; }
1013
1014 .m {
1015   color: #f60; }
1016
1017 .s {
1018   color: #d44950; }
1019
1020 .na {
1021   color: #4f9fcf; }
1022
1023 .nb {
1024   color: #366; }
1025
1026 .nc {
1027   color: #0a8; }
1028
1029 .no {
1030   color: #360; }
1031
1032 .nd {
1033   color: #99f; }
1034
1035 .ni {
1036   color: #999; }
1037
1038 .ne {
1039   color: #c00; }
1040
1041 .nf {
1042   color: #c0f; }
1043
1044 .nl {
1045   color: #99f; }
1046
1047 .nn {
1048   color: #0cf; }
1049
1050 .nt {
1051   color: #2f6f9f; }
1052
1053 .nv {
1054   color: #033; }
1055
1056 .ow {
1057   color: #000; }
1058
1059 .w {
1060   color: #bbb; }
1061
1062 .mf {
1063   color: #f60; }
1064
1065 .mh {
1066   color: #f60; }
1067
1068 .mi {
1069   color: #f60; }
1070
1071 .mo {
1072   color: #f60; }
1073
1074 .sb {
1075   color: #c30; }
1076
1077 .sc {
1078   color: #c30; }
1079
1080 .sd {
1081   font-style: italic;
1082   color: #c30; }
1083
1084 .s2 {
1085   color: #c30; }
1086
1087 .se {
1088   color: #c30; }
1089
1090 .sh {
1091   color: #c30; }
1092
1093 .si {
1094   color: #a00; }
1095
1096 .sx {
1097   color: #c30; }
1098
1099 .sr {
1100   color: #3aa; }
1101
1102 .s1 {
1103   color: #c30; }
1104
1105 .ss {
1106   color: #fc3; }
1107
1108 .bp {
1109   color: #366; }
1110
1111 .vc {
1112   color: #033; }
1113
1114 .vg {
1115   color: #033; }
1116
1117 .vi {
1118   color: #033; }
1119
1120 .il {
1121   color: #f60; }
1122
1123 .css .o,
1124 .css .o + .nt,
1125 .css .nt + .nt {
1126   color: #999; }
1127
1128 .language-bash::before {
1129   color: #009;
1130   content: "$ ";
1131   user-select: none; }
1132
1133 .language-powershell::before {
1134   color: #009;
1135   content: "PM> ";
1136   user-select: none; }
1137
1138 .anchorjs-link {
1139   color: inherit; }
1140
1141 @media (max-width: 480px) {
1142   .anchorjs-link {
1143     display: none; } }
1144
1145 *:hover > .anchorjs-link {
1146   opacity: .75;
1147   transition: color .16s linear; }
1148
1149 *:hover > .anchorjs-link:hover,
1150 .anchorjs-link:focus {
1151   text-decoration: none;
1152   opacity: 1; }