body.demo {
  font: 14px sans-serif;
}
.chartContainer { text-align:center; }
.controls {
    margin: 0 auto 30px auto;
    max-width: 960px;
    padding: 20px 0 20px 0;
    background-color: #eee;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}
.spacer { margin-top: 20px; }
h4 { margin-top: 5px; }

/* give some space to bigger screens */
@media (min-height: 1080px) {
  body { padding: 50px inherit 50px inherit; }
}
@media (min-width: 1200px) {
    .controls .btn-lg { width: 100% }
    .controls .spacer { margin-top: 20px; }
}
@media (max-width: 1200px) {
    .controls .spacer { margin-top: inherit; }
    .controls h4 { margin-top: 30px; }
    .controls label h4 { margin-top: 10px; }
    .controls .ui-slider { margin-bottom: 30px; }
    .demo iframe { margin-top: 30px; }
}

/******* Demo only *******/

.demo #title h2 {
    margin-top: 10px;
    margin-bottom: 30px;
}

.demo #authors {
    margin-bottom: 30px;
}

.demo h4 {font-size: 1rem;}
.demo p {line-height: 1.4; text-align:justify;}
.demo #authors p {text-align:start;}

/* download pdf*/
@media (min-width: 768px) {
    .demo #pdf * {
        clear: both;
        float: right;
    }
}
.demo #paperImage {
    border: 1px solid #777;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    margin: 0 0 0 0;
}
.demo #paperImage:hover {
    border: 1px solid #000;
    box-shadow: 8px 8px 8px rgba(0,0,0,0.15);
    margin: -3px 6px 3px -3px;
}
.demo #paperImage:active {
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3) inset;
    margin: 2px 0 -2px 2px;
}

/* spacing out rows */
.demo .sm-spacer { margin-top:10px; }
.demo .md-spacer { margin-top:60px; }
.demo .lg-spacer { margin-top:80px; }

.demo figure {
    background: #eee;
    border-radius: 5px;
    margin-top: 20px;
    padding: 7px;
}
.demo figcaption {
    margin-top: 10px;
    margin-bottom: 5px;
}

/* guideline images */
.vertical-align {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}
.demo .example,
.demo .vertical-align > [class*="col-"]:last-of-type {
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center; /* justify-content */
    -webkit-box-align: center; /* align-items */
    align-items: center;
    justify-content: center;
    float: none;
    margin: 0 auto;
}
.demo .example p {margin-top: 20px;}

/* experiment links*/
.experimentLinks h3 { 
    margin-bottom: 0;
}
.experimentLinks p { 
    text-align: center;
}
.experimentLinks img { 
    width: 100%;
}
.experimentLinks a {
    display: block;
    border: 3px solid #eee;
    border-radius: 5px;
    margin-right: 20px;
    margin-top: 30px;
    padding: 20px 10px 10px 10px;
}
.experimentLinks a:last-of-type {
    margin-right: 0;
}
.experimentLinks a:hover {
    border-color: #333;
}

pre {
    word-break: normal;
}
footer.row {
    margin-right: 0;
}

/* construction kit */
.csck {
    font-size: 13px;
    background: #eee;
    border-radius: 5px;
}
.csck .eneable-options label {
    margin-right: 1em;
}
.csck svg {
    display: block;
    margin: 0 auto;
}
.csck .chart {
    padding: 5px;
    border-radius: 4px;
    background-color: white;

}
.csck div.slider {
    width: 460px;
    margin-left: 50px;
}
.csck #dataSource {
    font-weight: bold;
    margin-top: 1px;
}
.csck #dataSource a {
    color: rgba(0,0,0,0.8);
    font-weight: normal;
    text-decoration: none;
}