/* Main image viewer */
.demo-container-imageViewer {
    border: 0.1em solid #000;
    height: 24em;
    text-align: center;
    width: 100%;
}

/* Stretch the image to fit the height view container, while maintaining the aspect ratio. */
.demo-image-mainImage {
    height: 100%;
    max-width: calc(100vw - 2em - 2px);
}

/* Thumbnails */
.demo-container-imageThumbnails {
    background-color: #cccbe4;
    border: 1px solid #000;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    list-style: none outside none;
    max-width: calc(100vw - 2em - 2px);
    overflow-x: auto;
    padding: 1em;
}

.demo-container-imageThumbnails li {
    display: inline-block;
    flex: 0 0 auto;
    padding-left: 0.5em;
    padding-right: 0.5em;
    text-align: center;
}

.demo-container-imageThumbnails img {
    border: 5px solid #fff;
    max-height: 7em;
}

.demo-container-imageThumbnails .demo-selected,
.demo-container-imageThumbnails li:hover img {
    border: 5px solid black;
}

/* Five Star Widget */
.demo-container-fiveStar {
    background-color: #cccbe4;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-top: 1px solid #000;
    margin-top: 1em;
    padding: 1em 0;
    text-align: center;
}

.demo-container-fiveStar #demo-ranking {
    cursor: pointer;
}

#demo-ranking.demo-selected img:focus {
    outline: 3px solid black;
}
