/* Built-in stylesheet for our live demos.
 *
 * Every demo page gets this automatically, so a demo never has to pull a CSS framework just to
 * have a readable page with a button on it. Override anything from the demo's own style sheet,
 * which is always loaded after this one.
 *
 * Vocabulary:
 *   page        body background/padding, headings h1-h6 (and .h1-.h6), links, <code>, <hr>
 *   buttons     .btn + .btn-primary .btn-secondary .btn-success .btn-danger .btn-warning
 *               .btn-info .btn-light .btn-dark .btn-outline-primary .btn-link, sizes .btn-sm .btn-lg
 *   notes       .hint
 *   images      .img-fluid
 *   spacing     .m{t,b,l,r,x,y}-{0..5} and .p{t,b,l,r,x,y}-{0..5} (0, .25, .5, 1, 1.5, 3rem),
 *               plus .mx-auto
 *   text        .text-left .text-center .text-right .text-muted .text-nowrap
 *   display     .d-none .d-block .d-inline-block .d-flex
 */

:root {
    --demo-bg: #f4f4f4;
    --demo-padding: 20px;
    --demo-color: #444;
    --demo-heading-color: #333;
    --demo-muted-color: #6c757d;
    --demo-border-color: #ddd;
    --demo-link-color: #007bff;
    --demo-link-hover-color: #0056b3;
    --demo-primary: #007bff;
    --demo-primary-hover: #0069d9;
    --demo-primary-active: #0062cc;
    --demo-radius: 5px;
    --demo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --demo-font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --demo-font-size: 15px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: var(--demo-padding);
    background-color: var(--demo-bg);
    color: var(--demo-color);
    font-family: var(--demo-font-family);
    font-size: var(--demo-font-size);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin: 0 0 0.5em 0;
    color: var(--demo-heading-color);
    font-family: inherit;
    line-height: 1.25;
}

h1, .h1 { font-size: 32px; font-weight: 700; }
h2, .h2 { font-size: 26px; font-weight: 700; }
h3, .h3 { font-size: 22px; font-weight: 600; }
h4, .h4 { font-size: 19px; font-weight: 600; }
h5, .h5 { font-size: 16px; font-weight: 600; }
h6, .h6 { font-size: 14px; font-weight: 600; }

p {
    margin: 0 0 1rem 0;
}

a {
    color: var(--demo-link-color);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--demo-link-hover-color);
    text-decoration: underline;
}

hr {
    height: 0;
    margin: 1.5rem 0;
    border: 0;
    border-top: 1px solid var(--demo-border-color);
}

code {
    padding: 1px 5px;
    border-radius: 3px;
    background-color: #eceff1;
    color: #c7254e;
    font-family: var(--demo-font-family-mono);
    font-size: 87.5%;
}

pre {
    padding: 12px 15px;
    overflow: auto;
    border-radius: var(--demo-radius);
    background-color: #fff;
    font-family: var(--demo-font-family-mono);
    font-size: 13px;
}

pre code {
    padding: 0;
    background: none;
    color: inherit;
    font-size: inherit;
}

.hint {
    margin-top: 10px;
    color: var(--demo-link-color);
    font-size: 14px;
    line-height: 16px;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.btn {
    display: inline-block;
    padding: 8px 16px;
    border: 2px solid transparent;
    border-radius: var(--demo-radius);
    background-color: transparent;
    color: var(--demo-color);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    user-select: none;
    -webkit-user-select: none;
}

.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.btn:hover,
.btn:focus {
    text-decoration: none;
}

.btn:focus {
    outline: none;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.55;
}

.btn-sm {
    padding: 4px 10px;
    font-size: 13px;
}

.btn-lg {
    padding: 12px 24px;
    font-size: 18px;
}

.btn-primary {
    border-color: var(--demo-primary);
    background-color: var(--demo-primary);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    border-color: var(--demo-primary-hover);
    background-color: var(--demo-primary-hover);
    color: #fff;
}

.btn-primary:active {
    border-color: var(--demo-primary-active);
    background-color: var(--demo-primary-active);
}

.btn-secondary {
    border-color: #6c757d;
    background-color: #6c757d;
    color: #fff;
}

.btn-secondary:hover,
.btn-secondary:focus {
    border-color: #5a6268;
    background-color: #5a6268;
    color: #fff;
}

.btn-success {
    border-color: #00b900;
    background-color: #00b900;
    color: #fff;
}

.btn-success:hover,
.btn-success:focus {
    border-color: #009e00;
    background-color: #009e00;
    color: #fff;
}

.btn-danger {
    border-color: #dc3545;
    background-color: #dc3545;
    color: #fff;
}

.btn-danger:hover,
.btn-danger:focus {
    border-color: #c82333;
    background-color: #c82333;
    color: #fff;
}

.btn-warning {
    border-color: #ffb200;
    background-color: #ffb200;
    color: #333;
}

.btn-warning:hover,
.btn-warning:focus {
    border-color: #e0a000;
    background-color: #e0a000;
    color: #333;
}

.btn-info {
    border-color: #17a2b8;
    background-color: #17a2b8;
    color: #fff;
}

.btn-info:hover,
.btn-info:focus {
    border-color: #138496;
    background-color: #138496;
    color: #fff;
}

.btn-light {
    border-color: var(--demo-border-color);
    background-color: #fff;
    color: var(--demo-color);
}

.btn-light:hover,
.btn-light:focus {
    border-color: #c8c8c8;
    background-color: #f1f1f1;
    color: var(--demo-color);
}

.btn-dark {
    border-color: #343a40;
    background-color: #343a40;
    color: #fff;
}

.btn-dark:hover,
.btn-dark:focus {
    border-color: #23272b;
    background-color: #23272b;
    color: #fff;
}

.btn-outline-primary {
    border-color: var(--demo-primary);
    background-color: transparent;
    color: var(--demo-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--demo-primary);
    color: #fff;
}

.btn-link {
    border-color: transparent;
    background-color: transparent;
    color: var(--demo-link-color);
    font-weight: 400;
}

.btn-link:hover,
.btn-link:focus {
    color: var(--demo-link-hover-color);
    text-decoration: underline;
}

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-nowrap { white-space: nowrap; }
.text-muted { color: var(--demo-muted-color); }

.d-none { display: none; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }

.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }
.mr-0 { margin-right: 0; }
.mx-0 { margin-left: 0; margin-right: 0; }
.my-0 { margin-top: 0; margin-bottom: 0; }

.m-1 { margin: 0.25rem; }
.mt-1 { margin-top: 0.25rem; }
.mb-1 { margin-bottom: 0.25rem; }
.ml-1 { margin-left: 0.25rem; }
.mr-1 { margin-right: 0.25rem; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }

.m-2 { margin: 0.5rem; }
.mt-2 { margin-top: 0.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.ml-2 { margin-left: 0.5rem; }
.mr-2 { margin-right: 0.5rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }

.m-3 { margin: 1rem; }
.mt-3 { margin-top: 1rem; }
.mb-3 { margin-bottom: 1rem; }
.ml-3 { margin-left: 1rem; }
.mr-3 { margin-right: 1rem; }
.mx-3 { margin-left: 1rem; margin-right: 1rem; }
.my-3 { margin-top: 1rem; margin-bottom: 1rem; }

.m-4 { margin: 1.5rem; }
.mt-4 { margin-top: 1.5rem; }
.mb-4 { margin-bottom: 1.5rem; }
.ml-4 { margin-left: 1.5rem; }
.mr-4 { margin-right: 1.5rem; }
.mx-4 { margin-left: 1.5rem; margin-right: 1.5rem; }
.my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }

.m-5 { margin: 3rem; }
.mt-5 { margin-top: 3rem; }
.mb-5 { margin-bottom: 3rem; }
.ml-5 { margin-left: 3rem; }
.mr-5 { margin-right: 3rem; }
.mx-5 { margin-left: 3rem; margin-right: 3rem; }
.my-5 { margin-top: 3rem; margin-bottom: 3rem; }

.mx-auto { margin-left: auto; margin-right: auto; }

.p-0 { padding: 0; }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }
.pl-0 { padding-left: 0; }
.pr-0 { padding-right: 0; }
.px-0 { padding-left: 0; padding-right: 0; }
.py-0 { padding-top: 0; padding-bottom: 0; }

.p-1 { padding: 0.25rem; }
.pt-1 { padding-top: 0.25rem; }
.pb-1 { padding-bottom: 0.25rem; }
.pl-1 { padding-left: 0.25rem; }
.pr-1 { padding-right: 0.25rem; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }

.p-2 { padding: 0.5rem; }
.pt-2 { padding-top: 0.5rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pl-2 { padding-left: 0.5rem; }
.pr-2 { padding-right: 0.5rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }

.p-3 { padding: 1rem; }
.pt-3 { padding-top: 1rem; }
.pb-3 { padding-bottom: 1rem; }
.pl-3 { padding-left: 1rem; }
.pr-3 { padding-right: 1rem; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }

.p-4 { padding: 1.5rem; }
.pt-4 { padding-top: 1.5rem; }
.pb-4 { padding-bottom: 1.5rem; }
.pl-4 { padding-left: 1.5rem; }
.pr-4 { padding-right: 1.5rem; }
.px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }

.p-5 { padding: 3rem; }
.pt-5 { padding-top: 3rem; }
.pb-5 { padding-bottom: 3rem; }
.pl-5 { padding-left: 3rem; }
.pr-5 { padding-right: 3rem; }
.px-5 { padding-left: 3rem; padding-right: 3rem; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }