#telaMaquinas {
    position: fixed;
    overflow: hidden;
    z-index: 1;
    opacity: 1;
    margin: 0;
    border-radius: 0;
    height: 100%;
    min-height: 0;
    transition: var(--transicao-link) ease-in-out,
                min-heigt 1s ease-in-out,
                background-color 1s ease-in-out,
                box-shadow 1s ease-in-out;
}
#telaMaquinas {
    left: 0;
    width: 20vw;
}

.botaoItemMenuLateral {
    color: var(--cor-texto) !important;
}

.cabecalhoMenuLateral {
    display: flex;
    height: calc(6% - 40px);
    font-size: 1rem;
    padding: 20px;
}
.telaMaquinasContainerFundo {
    position: fixed;
    opacity: 1;
    overflow: scroll;
    overflow-x: hidden;
    height: 88vh;
    max-height: 88vh;
    min-height: 0;
    margin-top: 6vh;
    width: 100%;
    transition: var(--transicao-link) ease-in-out;
}
.telaMaquinasContainer{
    display: flex;
}
.telaMaquinasContainer {
    flex-direction: column;
}

.menuLateralMaquinas {
    position: fixed;
    display: flex;
    flex-direction: row;
    margin: 5px 12px;
    align-items: center;
    transition: var(--transicao-link) ease-in-out;
}

.rectangleMaquina {
    min-height: 110px;
}
.rectangleMaquina {
    scale: 1;
    opacity: 1;
    margin: 10px 6px 10px 14px;
    border-radius: 10px;
    max-height: 300px;
    transition: var(--transicao-link) ease-in-out;
}
.rectangleMaquina:hover {
    scale: var(--escala-item-lateral);
}
.rectangleMaquina.nh {
    scale: 1;
}

.rectangleMaquina .tituloContainerItemLateral {
    justify-content: start;
}
.tituloContainerItemLateral {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-radius: var(--borda-botao);
    align-items: center;
}
.menuItenLateral {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    max-width: 100%;
    opacity: 1;
    transition: var(--transicao-link) ease-in-out, box-shadow 1s ease-in-out, background-color 1s ease-in-out;
}

.addMaquinaAtivada {
    transform: rotate(-180deg);
}

/* barra de status */
.cStatusItemLateral {
    position: fixed;
    top: 1px;
    left: -10px;
    align-self: center;
    display: flex;
    width: 1px;
    height: 100%;
    margin: 0 1.5px;
    border-radius: 5px;
    background-color: var(--cor-item-lateral); 
    box-shadow: 10em 0 100px var(--cor-item-lateral),
                9em 0 90px var(--cor-item-lateral),
                8em 0 80px var(--cor-item-lateral),
                7em 0 70px var(--cor-item-lateral),
                6em 0 60px var(--cor-item-lateral),
                5em 0 50px var(--cor-item-lateral),
                4em 0 40px var(--cor-item-lateral),
                3em 0 30px var(--cor-item-lateral),
                2em 0 20px var(--cor-item-lateral),
                1em 0 10px var(--cor-item-lateral),
                2px 0 10px var(--cor-item-lateral),
                1px 0 10px var(--cor-item-lateral),
                0 0 5px var(--cor-item-lateral);
    transition: 1s ease-in-out;
}
.cStatusItemLateral.livre, .cStatusItemLateral.baixa  { 
    --cor-item-lateral: var(--cor-executando);
}
.cStatusItemLateral.ocupado, .cStatusItemLateral.media  { 
    --cor-item-lateral: var(--cor-ocioso);
}
.cStatusItemLateral.desativado, .cStatusItemLateral.alta  { 
    --cor-item-lateral: var(--cor-erro);
}

.subTituloItemLateral {
    font-weight: 600;
    white-space: nowrap;
    padding: 5px 5px 0;
}
.tituloItemLateral {
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid var(--cor-texto);
}

.telaMensagemItemLateral {
    height: 100px;
}
.mediaTelaMensagemItemLateral {
    height: 80px;
}
.telaMensagemItemLateral, .miniTelaMensagemItemLateral, .mediaTelaMensagemItemLateral {
    width: 100%; 
    font-size: 0.7rem;
    padding: 0 5px;
    cursor: pointer;
    box-sizing: border-box;
    resize: none;          /* impede redimensionamento manual */
    overflow-y: auto;      /* ativa scroll vertical quando passar do max-height */
    word-wrap: break-word; /* quebra automática das palavras */
    transition: var(--transicao-link);
}

@media (min-width: 1650px) {
    .menuLateralMaquinas {
        min-height: 5%;
    }
    #telaMaquinas {
        width: 20vw;
    }
}
@media (min-width: 2500px) {
    .menuLateralMaquinas {
        min-height: 5%;
    }
    #telaMaquinas {
        width: 10vw;
    }
}
@media (max-width: 916px) {
    .cabecalhoMenuLateral {
        height: 1%;
        opacity: 0;
        padding: 0;
    }
    .menuLateralMaquinas {
        bottom: 140px;
        justify-self: center;
    }
    .telaMaquinasContainerFundo {
        height: 77vh;
        margin-top: 0;
    }
    #fixarTelaMaquinas {
        opacity: 0;
        max-width: 0;
        max-height: 0;
        min-height: 0;
        max-width: 0;
        position: fixed;
        top: -1000px;
        cursor: default;
    }
    #telaMaquinas {
        width: 95vw;
        padding: 8px;
    }
    .menuLateralSuperExpandido {
        bottom: 1px !important;
        min-height: 95%;
        align-items: flex-start;
        transition: var(--transicao-link) ease-in-out;
    }
}
@media (max-width: 1255px) and (min-width: 917px) {
    #telaMaquinas {
        width: 30vw;
    }
    .mfMaquinas {
        margin-left: 30vw;
    }
    .mini {
        width: 70vw !important;
    }
    .extraMini {
        width: 40vw !important;
    }
}
@media (max-height: 930px) and (max-width: 916px) {
    .telaMaquinasContainerFundo {
        height: 75vh;
    }
}
@media (max-height: 830px) and (max-width: 916px) {
    .telaMaquinasContainerFundo {
        height: 70vh;
    }
}