@import "constants.less";
.TitleClass {
    height: calc(2em + 4px);
    margin-bottom: calc(1em + 1px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 3;

    select {
        border: 2px double black;
        font-size: 2em;
        height: calc(0.5em + 2px);
        text-align-last: center;
    }
}

.places-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;

    .video-container {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        flex-grow: 3;

        .description-list {
            display: flex;
            flex-direction: column;
            align-content: center;
            padding-right: @spacing-unit/2;

            .place-description {
                padding-bottom: @spacing-unit;
            }
        }

    }
}

.VideoListClass {
    list-style: none;
    font-weight: bold;
    flex-grow: 1;

    li {
        color: white;
        text-decoration: underline;
        padding-bottom: @spacing-unit/1.5;
    }

    .video-name {
        padding-left: 9px;
        cursor: pointer;
        display: inline-block;
        text-decoration: underline;
    }
}

.video-frame-container {
    .video-label {
        font-weight: bold;
    }
}

video {
    max-width: 100%;
    max-height: 100%;
    padding-bottom: @spacing-unit/2;
}

.VideoPlaceholder {
    max-width: @media-default-width;
    max-height: @media-default-height;
    margin-bottom: @spacing-unit/2;
}

.home-page {
    margin-bottom: @spacing-unit;
}

.demo-warning {
    .label {
        font-weight: bold;
    }
    .description {
        //this space intentionally let blank
    }
}