*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

:root{
  --pulseDuration:3s; 
  --pulseColor: rgba(0, 255, 8, 0.4); 
  --themebackground:#0080a3;
  --offset:0px;
}

html{background-color: rgba(0, 0, 0 )}

#login-page{
  max-width: 400px;
  width: 80%; height: 300px;
  border-radius: 20px;
  align-content: center;
  background-color: var(--themebackground);
  padding:55px 10px 10px 10px;  
  margin:55px auto; 
  position: relative;

  #poll-wrapper{
    position: absolute;
    top:15px; left:40px; 
    width:40px;z-index: 30;
    .polling-state{  
      border-radius: 50%;
      text-align: center;
    }
    .pulse {
      animation: pulse 6s infinite ; 
    }
    #disconnected{color:rgb(255, 149, 0)}
    #connected{display:none; color:rgb(2, 224, 2)}
  }

  .mala {
    position: absolute;
    top:-45px; left:calc(50% - 45px);
    border-radius: 50px;
    width: 90px; height: 90px;			
    background-color: var(--themebackground);
    padding: 5px;    
    .img-mala {
      height:100%;
      background-image: url("/images/mala.svg");
      background-size: cover;
    }
  }

  .login-cont {
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: auto; 

    input:focus, 
    button:focus {
      outline: none;
    }
    
    .layout1{
      width:100%; 
      display:flex;  
      flex-direction: column;
      row-gap: 10px;

      input{
        border-radius: 20px;
        border: none;
        height: 40px; width: 100%;
        text-align: center;
        font-size: 18pt;
      }
      .password{
        position: relative;;
        .toggle-password-icon{
          position: absolute;
          width:28px; height:26px;
          top:7px; right:10px;
        }
      }
      #version{ 
        font-family: Georgia; 
        text-align: center; 
        color:rgba(252, 252, 252, 0.2);
        text-align: center;
        width:100%;
      }
      .password-request{
        color: rgb(111, 13, 96);      ;
        cursor: pointer;
      }
    }

    .submit-btn {
      cursor: pointer;
      border-radius: 5px; 
      background-color: #1b6f71;
      margin-left: 3px;
      color: #ffffff;
      font-size: 18pt;
      text-align: center;
      height:40px;
    }

    #response-message{
      width: 100%;
      text-align: center;
      color: aqua;
      content: '';
    }

    .password-request{
      /* display: none; */
      width: 100%;
      text-align: center;
    } 
  }

} 



  


@keyframes pulse {
  0%  { box-shadow: 0 0 0 0 var(--pulseColor); }
  30% { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); }
  70% { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); }
  0%  { box-shadow: 0 0 0 0 var(--pulseColor); }
}