/* additions for the HLS viewer (keeps the original layout from style.css) */
.frame-video video {
    display: block;
    width: 352px;
    height: 264px;                       /* 4:3 box: Daycare 1-5 */
    background: #000 url('images/loading.jpg') center / cover no-repeat;
    object-fit: contain;
    transition: height .15s ease-out;
}
/* Daycare 6-9 (and autoplay): 16:9 cameras whose substreams are only 4:3 (640x480).
   Box is 16:9; once video frames arrive they are stretched back to 16:9 (.stretch). */
.frame-video.wide video { height: 198px; }
.frame-video.wide video.stretch { object-fit: fill; }
.frame-video .video-status {
    min-height: 18px;
    padding-top: 4px;
    text-align: center;
    color: #555;
}
.frame-video .video-status.closed { color: #b34700; font-weight: bold; }
.frame-menu .frame-link.active,
.frame-menu .frame-link.active:hover {
    background: #df7927;
    border-color: #df7927;
    color: #fff;
}
.frame-menu .frame-link.disabled { opacity: .5; pointer-events: none; }
/* let the orange frame grow instead of clipping the last button when fonts render larger */
.frame-core { height: auto; min-height: 615px; display: flow-root; }