body, * {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    overflow-x: hidden;
}

body {
    background-image: url("../images/logo-sadi-back.png");
    background-repeat: repeat;
}

/* Light mode */
@media (prefers-color-scheme: light) {
    body, * {
        color: #CA0000;
    }

    body {
        background-color: #FFFFFF;
    }

    .nomeCliente {
        color: #CA0000;
    }

    .grupoImagem.off legend {
        color: yellow;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body, * {
        color: yellow;
    }

    body {
        background-color: #000000;
    }

    .nomeCliente {
        color: yellow;
    }

    .grupoImagem.off legend {
        color: yellow;
    }

    .boxLogin input {
        color: #000000;
    }

        .boxLogin input.btn {
            color: #000000;
        }

    .boxMenu .menuItem img {
        padding: 2px;
        background-color: yellow;
    }
}

ul {
    padding: 0;
    list-style-type: none;
}

input {
    border: 1px solid #CA0000;
}

.clear {
    clear: both;
}

.hide {
    display: none;
}


/* MASTER */
.boxCabecalho {
    width: 100%;
}

    .boxCabecalho .logo {
        position: relative;
        margin-bottom: 20px;
    }

    .boxCabecalho .titulo p {
        font-size: 18px;
        font-weight: bold;
    }

.boxMenu {
    position: relative;
}

    .boxMenu .menuItem {
        border: 1px solid #CA0000;
        float: left;
        padding: 5px;
        text-align: center;
        width: 120px;
        height: 100px;
        margin: 2px;
        background-color: Transparent;
        background-repeat: no-repeat;
        cursor: pointer;
        overflow: hidden;
        outline: none;
    }

        .boxMenu .menuItem:hover {
            font-weight: bold;
        }


/* LOGIN */

.boxLogin {
    position: relative;
    margin: auto;
    width: 250px;
}

    .boxLogin input {
        width: 230px;
        margin-bottom: 5px;
        height: 30px;
        font-size: 14px;
    }

        .boxLogin input.btn {
            width: 234px;
        }


/* MONITORAMENTO DE HARDWARE */
.dataHora {
    font-size: 10px;
    font-style: italic;
    font-weight: normal;
}

.grupoHardwareMonit {
    font-size: 13px;
    border: 1px solid #000;
    float: left;
    padding: 5px;
    margin: 2px;
}

    .grupoHardwareMonit .hardMonitItem button {
        float: left;
        padding: 2px;
        background-color: Transparent;
        background-repeat: no-repeat;
        border: none;
        cursor: pointer;
        overflow: hidden;
        outline: none;
    }

        .grupoHardwareMonit .hardMonitItem button span {
            float: left;
            background: center no-repeat;
            width: 54px;
            height: 50px;
        }

        .grupoHardwareMonit .hardMonitItem button.corFundo_0 span {
            background-color: red;
        }

        .grupoHardwareMonit .hardMonitItem button.corFundo_1 span {
            background-color: #4bf737;
        }

        .grupoHardwareMonit .hardMonitItem button.corFundo_2 span {
            background-color: orange;
        }

        .grupoHardwareMonit .hardMonitItem button.corFundo_3 span {
            background-color: #ae65e6;
        }

        .grupoHardwareMonit .hardMonitItem button.corFundo_4 span {
            background-color: #808080;
        }

        .grupoHardwareMonit .hardMonitItem button span.icone_0 {
            background-image: url('../images/hdwmon_camera-exp.png');
        }

        .grupoHardwareMonit .hardMonitItem button span.icone_1 {
            background-image: url('../images/hdwmon_server-exp.png');
        }

        .grupoHardwareMonit .hardMonitItem button span.icone_2 {
            background-image: url('../images/hdwmon_switch-exp.png');
        }

        .grupoHardwareMonit .hardMonitItem button span.icone_3 {
            background-image: url('../images/hdwmon_wifi_simple-exp.png');
        }

        .grupoHardwareMonit .hardMonitItem button span.icone_4 {
            background-image: url('../images/hdwmon_wifi_cli-exp.png');
        }

        .grupoHardwareMonit .hardMonitItem button span.icone_5 {
            background-image: url('../images/hdwmon_wifi-exp.png');
        }

        .grupoHardwareMonit .hardMonitItem button span.icone_6 {
            background-image: url('../images/hdwmon_energia-exp.png');
        }

        .grupoHardwareMonit .hardMonitItem button span.icone_7 {
            background-image: url('../images/hdwmon_comunicacao-exp.png');
        }

        .grupoHardwareMonit .hardMonitItem button span.icone_8 {
            background-image: url('../images/hdwmon_manutencao-exp.png');
        }

        .grupoHardwareMonit .hardMonitItem button span.icone_9 {
            background-image: url('../images/hdwmon_camera_bullet-exp.png');
        }

        .grupoHardwareMonit .hardMonitItem button span.icone_10 {
            background-image: url('../images/hdwmon_camera_bullet_hd-exp.png');
        }

        .grupoHardwareMonit .hardMonitItem button span.icone_11 {
            background-image: url('../images/hdwmon_camera_ptz-exp.png');
        }

        .grupoHardwareMonit .hardMonitItem button span.icone_12 {
            background-image: url('../images/hdwmon_camera_ptz_hd-exp.png');
        }

        .grupoHardwareMonit .hardMonitItem button span.icone_13 {
            background-image: url('../images/hdwmon_camera_hd-exp.png');
        }

        .grupoHardwareMonit .hardMonitItem button span.icone_14 {
            background-image: url('../images/hdwmon_camera_bullet_audio-exp.png');
        }

        .grupoHardwareMonit .hardMonitItem button span.icone_15 {
            background-image: url('../images/hdwmon_camera_bullet_audio_hd-exp.png');
        }

        .grupoHardwareMonit .hardMonitItem button span.icone_16 {
            background-image: url('../images/hdwmon_nvr-exp.png');
        }

        .grupoHardwareMonit .hardMonitItem button span.icone_17 {
            background-image: url('../images/hdwmon_database-exp.png');
        }

        .grupoHardwareMonit .hardMonitItem button span.icone_18 {
            background-image: url('../images/hdwmon_pc-exp.png');
        }

        .grupoHardwareMonit .hardMonitItem button span.icone_19 {
            background-image: url('../images/hdwmon_ia-exp.png');
        }

        .grupoHardwareMonit .hardMonitItem button span.icone_20 {
            background-image: url('../images/hdwmon_camera_bullet_audiobi_hd_exp.png');
        }

        .grupoHardwareMonit .hardMonitItem button span.icone_9999999 {
            background-image: url('../images/hdwmon_manutencao_exp.png');
        }

.nomeCliente {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px !important;
    font-weight: bold;
    overflow-x: hidden;
}

.esconde {
    display: none;
}

/* CÂMERAS */

.grupoImagem {
    font-size: 13px;
    border: 1px solid #000;
    float: left;
    padding: 5px;
    margin: 2px;
}

    .grupoImagem legend {
        text-shadow: -1px 0 yellow, 0 1px yellow, 1px 0 yellow, 0 -1px yellow;
    }

    .grupoImagem.off {
        background-color: red;
    }

        .grupoImagem.off legend {
            text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        }

    .grupoImagem .imagemItem button {
        background-color: Transparent;
        background-repeat: no-repeat;
        border: none;
        cursor: pointer;
        overflow: hidden;
        outline: none;
    }

    .grupoImagem .imagemItem {
        min-height: 500px;
    }

        .grupoImagem .imagemItem img {
            width: 100%;
            height: 100%;
            max-width: 658px;
        }


/* SMARTPHONE / TABLETS */
@media (max-width: 420px) {
    .boxCabecalho .logo img {
        width: 300px;
        height: 107px;
    }

    .grupoImagem .imagemItem {
        width: 385px;
        min-height: 0px;
        max-width: 100%;
    }
}

@media (max-width: 360px) {
    .boxCabecalho .logo img {
        width: 340px;
        height: 71px;
    }

    .grupoImagem .imagemItem {
        width: 320px;
        max-width: 100%;
        min-height: 0px;
    }
}

@media (max-width: 320px) {
    .boxCabecalho .logo img {
        width: 280px;
        height: 59px;
    }

    .grupoImagem .imagemItem {
        width: 270px;
        max-width: 100%;
        min-height: 0px;
    }
}

@media (max-width: 280px) {
    .boxCabecalho .logo img {
        width: 260px;
        height: 55px;
    }

    .grupoImagem .imagemItem {
        width: 240px;
        max-width: 100%;
        min-height: 0px;
    }
}

.pnlCliente {
    border: 1px solid black;
    padding: 20px;
}

#pnl-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.status-btn {
    position: relative;
}

.hours-offline {
    position: absolute;
    top: 7px;
    left: 7px;
    color: white;
}