html {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: inline-block;
    text-align: center;
}

h1{
    font-size: 1.5rem;
}

h2{
    font-size: 1.2em;
}

p {
    font-size: 1.1rem;
    color: rgb(0, 0, 0);
}

p1 {
    font-size: 1.5rem;
    color: rgb(35, 35, 35);
}

body {
    margin: 0;
    background-color: #414b3b;
}

.topnav {
    overflow: hidden;
    background-color:  #414b3b;
    color: rgb(3, 3, 3);
    font-size: 0.5rem;
    padding: 0px;
    margin: 10px;
    background-color: #fff9f3;
    border-radius: 10px;
    display: flex;
    align-items: center; /* Centraliza verticalmente os itens */
    justify-content: center; /* Centraliza horizontalmente os itens */
}

/* Estilos para a logo */
.topnav .logo {
    width: 85%; /* Mantém a proporção da imagem */
}

#authentication-bar{
    background-color: #414b3b;
    padding-top: 6px;
    padding-bottom: 6px;
    margin: 10px;
    border-radius: 10px;
}

#authentication-status{
    font-size: 15px;
    padding: 0px;
    margin: 0px;
}

#user-details{
    color: rgb(151, 151, 151);
    font-size: 15px;
    padding: 0px;
    margin: 0px;

}

#logout-link {
    width: 100%;
    font-size: 30px;
    color:#000000;
}


.content {
    padding: 0px;
}


.card {
    background-color: #fff9f3;
    box-shadow: 2px 2px 12px 1px rgba(140, 140, 140, 0.5);
    padding: 13%;
    margin: 10px;
    border-radius: 10px;
    position: relative;
}
.cards {
    max-width: 800px;
    margin: 0 auto;
    display: grid;
    grid-gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Estilo para o card de notificações */
/* Certifique-se de que o contêiner de notificações pode rolar se necessário */
.notifications-card {
    background-color: #fff9f3;
    border-radius: 10px;
    box-shadow: 2px 2px 12px 1px rgba(140, 140, 140, 0.5);
    padding: 10px;
    margin: 10px;
    max-width: 600px;
    max-height: 350px; /* Limita a altura do card */
    overflow-y: auto;  /* Adiciona barra de rolagem se o conteúdo exceder a altura */
}

/* Estilo do título */
.notifications-card h2 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #000000;
    text-align: left;
}

/* Estilo para garantir que as notificações não fiquem sobrepostas */
.notification {
    font-size: 12px;
    color: #1b1b1b;
    text-align: left;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2), 0 0 3px rgba(0, 0, 0, 0.1);
    word-wrap: break-word; /* Garante que longos textos sejam quebrados e não causem problemas */
}

/* Notificações de tipos diferentes */
.notification.green {
    background-color: #9cfd9c81; /* Fundo verde claro */
}

.notification.yellow {
    background-color: #fff59a; /* Fundo amarelo claro */
    animation: blinkYellow 1.5s infinite;
}

.notification.red {
    background-color: #ffd6d6; /* Fundo vermelho claro */
    animation: blinkRed1 1.5s infinite;
}

/* Animação de piscar para notificações amarelas */
@keyframes blinkYellow {
    0% { background-color: #fffacc; }
    50% { background-color: #fffedd; }
    100% { background-color: #fffacc; }
}

/* Animação de piscar para notificações vermelhas */
@keyframes blinkRed1 {
    0% { background-color: #fbdede; }
    50% { background-color: #ffeaea; }
    100% { background-color: #ffd6d6; }
}


.lock-icon {
    position: absolute;
    padding: 2%;
    top: 10px;
    right: 10px;
    font-size: 1.7rem;
    color: #e8b600;
    cursor: pointer;
}
.temp-slider[disabled] {
    opacity: 0.5;
    pointer-events: none;
}
.temp-slider {
    width: 100%;
    margin: 22px 0px;
    -webkit-appearance: none;
    appearance: none;
    height: 10px;
    background: #000000;
    outline: none;
}
.temp-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: rgb(43, 255, 0);
    border: 2px solid #1b1b1b;
    cursor: pointer;
    border-radius: 6px; /* Torna a borda arredondada */
     /* Adiciona uma sombra para garantir que a borda seja visível */
}

.temp-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: rgb(43, 255, 0);
    border: 2px solid #1b1b1b;
    cursor: pointer;
}

button {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}
button:hover {
    opacity: 0.8;
}

.form-elements-container{
    padding: 16px;
    width: 250px;
    margin: 0 auto;
}

input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}/*
.switch {position: relative; display: inline-block; width: 120px; height: 68px; margin-bottom: 20px;}
.switch input {display: none;}
.slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 68px;   opacity: 0.8;   cursor: pointer;}
.slider:before {position: absolute; content: ""; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 68px}
input:checked+.slider {background-color: #1b78e2}
input:checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)}
.slider2 {  margin: 14px;  height: 20px; background: #ccc; outline: none; opacity: 0.8; -webkit-transition: .2s; transition: opacity .2s; margin-bottom: 40px; }
.slider:hover, .slider2:hover { opacity: 1; }
.slider2::-webkit-slider-thumb { appearance: none; width: 40px; height: 40px; background: #008B74; cursor: pointer; }
.slider2::-moz-range-thumb { width: 40px; height: 40px; background: #008B74; cursor: pointer;}
.card-switch {color: #50a2ff; }
.card-light{ color: #008B74;}
.card-bme{ color: #572dfb;}
.card-motion{ color: #3b3b3b; cursor: pointer;}
*/
/*ILUMINAÇÃO*/


.led {
    display: inline-block;
    width: 85%;
    height: 15px;
    border-radius: 7px;
    background-color: gray; /* Cor padrão */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5), 0 0 5px rgba(0, 0, 0, 0.7); /* Sombra padrão */
    position: relative;
    overflow: hidden;
}

.led:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
}

.led:after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 11px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7), 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: -1;
}

.led.on {
    background: linear-gradient(180deg, rgba(0, 255, 0, 1) 0%, rgba(0, 200, 0, 1) 100%);
    box-shadow: inset 0 0 10px rgba(0, 150, 0, 0.7), 0 0 15px rgba(0, 255, 0, 0.7); /* Sombra verde */
}

.led.off {
    background: linear-gradient(180deg, rgba(255, 0, 0, 1) 0%, rgba(200, 0, 0, 1) 100%);
    box-shadow: inset 0 0 10px rgba(150, 0, 0, 0.7), 0 0 15px rgba(255, 0, 0, 0.7); /* Sombra vermelha */
}

@keyframes blinkRed {
    0% { background-color: rgba(255, 0, 0, 1); }
    50% { background-color: rgba(255, 0, 0, 0.3); }
    100% { background-color: rgba(255, 0, 0, 1); }
}

@keyframes blinkGreen {
    0% { background-color: rgba(0, 255, 0, 1); }
    50% { background-color: rgba(0, 255, 0, 0.3); }
    100% { background-color: rgba(0, 255, 0, 1); }
}

.led.blinkRed {
    animation: blinkRed 1s infinite;
}

.led.blinkGreen {
    animation: blinkGreen 1s infinite;
}

  .umidadebox {
    background-color: #1b78e2;
  }

  #umidadelogo {
    width: 100%;
    height: 100%;
  }



  /* Adicione ao arquivo styles.css */

  footer {
    padding: 20px;
    text-align: center;
    color: #ffffff;
}

.footer-content {
    margin-bottom: 10px;
}

.footer-bottom {
    font-size: 10px;
    color: #ffffff;
}