/******* CAPS (People counting) *******/

#info-caps {
    display: flex!important;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#info-caps #occupancy {
    color: #fff;
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: calc(var(--HD75px)* var(--infoArtWin));
}

#info-caps #occupancy .txt {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    margin-bottom: calc(var(--HD21px)* var(--infoArtWin));
}

#info-caps #occupancy .label {
    font-size: calc(var(--HD45px)* var(--infoArtWin));
    font-weight: normal;
    margin-right: 0.5em;
}

#info-caps #occupancy .status {
    position: absolute;
    font-size: calc(var(--HD24px)* var(--infoArtWin));
    margin-top: calc(var(--HD21px)* var(--infoArtWin));
    margin-top: calc(var(--HD15px)* var(--infoArtWin));
}

#info-caps #occupancy .pct {
    font-size: calc(var(--HD90px)* var(--infoArtWin));
    font-weight: bold;
}

#info-caps #occupancy .bar {
    height: calc(var(--HD30px)* var(--infoArtWin));
    background: rgba(255, 255, 255, 0.2);
    width: 100%;

}

#info-caps #occupancy .bar-counter {
    height: 100%;
    width: 50%;
    max-width:100%;
    background: rgb(0, 255, 13);
    transition: background-color 1.5s;
}

#info-caps #message-big {
    font-weight: bold;
    color: rgb(0, 255, 13);
    font-size: calc(var(--HD150px)* var(--infoArtWin));
    margin-bottom: calc(var(--HD60px)* var(--infoArtWin));
    text-align: center;
    transition: color 1.5s;
    min-height: 2.4em;
    padding: 0 0.4em;
    display: flex;
    align-items: center;
}

#info-caps.portraitmode #message-big {
    min-height: 5em;
}

#info-caps #message-small {
    font-weight: bold;
    color: #fff;
    font-size: calc(var(--HD60px)* var(--infoArtWin));
    text-align: center;
    padding: 0 2em;
}