body {
    background-color: #e8efff;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #e8efff;

}

h1 {
    font-weight: bold;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

form {
    width: 100%;
    text-align: center;
}

.login-panel, .register-panel {
  background: #ffffff;
  border: 1px solid #d7dce3;
  border-radius: 14px;
  padding: 1.5rem;
  width: 100%;          
  max-width: 500px;   
  margin-bottom: 1em;
}

.panel-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: #111827;
}

.panel-description {
  color: #6b7280;
  font-size: 1rem;
}

.login-panel .mb-3, #pwd-container {
    position: relative; 
    display: flex;      
    align-items: center;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 8px;
}

#pwd-container input {
    border: none;
}

.mb-3 i {
    padding: 10px;  
}

.login-panel .form-control {
    border: 2px; 
}

.register-panel .form-control {
    background-color: #fcfcfc;
}

.form-control {
    width: 100%;
    padding: 7px 7px 10px 10px;
}

.form-control:focus {
  box-shadow: none;
  outline: none;
}

.register-panel label {
  text-align: left;   
  display: block;    
  font-weight: 600; 
}

#loginBtn, #registerBtn {
    background-color: #03071f;
    color: white;
    width: 100%;
    font-weight: bold;
}

a {
    display: block;
    text-decoration: none;
    color: #155dfc;
}

a:hover {
 text-decoration: underline;
}

#other-links a:first-child {
    padding-bottom: 0.5em;
    padding-top: 1em;
}

#alert-msg {
    display: flex;
    border-radius: 8px;
    color: #bf2424;
    padding: 10px;
    margin-bottom: 1rem;
}

#alert-msg i {
    padding: 10px;  
}

#hidePwd, #hideNewPwd, #hideCfmPwd {
    display: none; 
}

#hidePwd.active, #hideNewPwd.active, #hideCfmPwd.active {
    display: block;
}

#showPwd.active, #showNewPwd.active, #showCfmPwd.active {
    display: none; 
}