/*Register*/

.custom-register-container h2 {
    text-align: center;
    margin-bottom: 20px;
}
.custom-register-container form p {
    margin-bottom: 15px;
}
.custom-register-container label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}
.custom-register-container input[type="text"],
.custom-register-container input[type="email"],
.custom-register-container input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 1rem;
}

.custom-register-container .error-message {
    color: red;
    margin-bottom: 15px;
}

/*Login*/

.custom-login-container, .custom-register-container {
    max-width: 500px;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-align: left;
    color:#fff;

    backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  background-color: rgba(0, 113, 161, 0.75);
  border-radius: 12px;
  border: 1px solid rgba(209, 213, 219, 0.3);
  box-shadow: 1px 1px 3px rgba(0, 113, 161, 1);
}
.custom-login-container h2 {
    text-align: center;
    margin-bottom: 20px;
}
.custom-login-container form p {
    margin-bottom: 15px;
}
.custom-login-container label {
    display: block;
    font-weight: bold;
}
.custom-login-container input[type="email"],
.custom-login-container input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 1rem;
}
.custom-login-container button, .custom-register-container button{
    width: 50%;
    background: #2b3035;
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 1.3rem;
    margin-left: 25%;
    transition: all .3s ease-in;
}


.custom-login-container button:hover,
.custom-register-container button:hover, 
.custom-reset-password-container form button:hover, 
.modal-content button:hover,
.email-verification-container .button:hover {
    transform: scale(1.05);
    background: #c48793;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6);
    color: #000;
}

.custom-login-container button:active, 
.custom-register-container button:active, 
.custom-reset-password-container form button:active, 
.modal-content button:active,
.email-verification-container .button:active{
    transform: scale(1);
}
.custom-login-container a {
    color: #c48793;
    text-decoration: none;
}
.custom-login-container a:hover {
    color:#fc7a94;
    text-decoration: underline;
}

.password-container {
    position: relative;
    display: flex;
    align-items: center;
}

.password-container input {
    padding-right: 30px; /* Space for the icon */
}

#toggle-password {
    position: absolute;
    right: 10px;
    cursor: pointer;
}

.toggle-password{
    color:#000;
}

/*Reset Password*/

.custom-reset-password-container, .email-verification-container{
    width: 90%;
    height: 500px;
    margin-left: 5%;
    margin-bottom: 25px;
    margin-top: 25px;
    background: rgba(43, 48, 53, 0.6); /* Using #2b3035 with 60% opacity */
    border-radius: 10px; /* Smooth corners */
    box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.5); /* Subtle shadow */
    backdrop-filter: blur(20px); /* Stronger blur for a noticeable effect */
    border: 1px solid rgba(255, 255, 255, 0.2); 

}
.custom-reset-password-container h2{
    text-align: center;
    margin-top: 10px;
    color: #000;
}

.custom-reset-password-container form{
    width: 100%;
    text-align: center;
}
.custom-reset-password-container form .email-link{
    text-align: left;
    width: 30%;
    margin-left: 35%;
    margin-top: 10px;
}

.custom-reset-password-container form .email-link label{
    display: block;
    color: #fff;
    font-size: 1rem;
}

.custom-reset-password-container form .email-link input{
    height: 30px;
    width: 100%;
}

.custom-reset-password-container form .email-link input:focus{
    animation: mymove 5s infinite ease-in;
}

.modal-content input{
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 1rem;
}

.modal-content .new-pass{
    color: #fff;
    font-size: 1rem;
    text-align: left;
}

.modal-content h2{
    color: #000;
}

@keyframes mymove {
    25%  {transform: scale(1.015);}
    50%  {transform: scale(1);}
    75%  {transform: scale(1.015);}
    100% {transform: scale(1.);}
  }

.custom-reset-password-container form button{
    width:200px;
    background: #0071a1;
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 1.3rem;
    margin-left: 15.5%;
    transition: all .5s ease-in;
}

.modal-content button, .email-verification-container .button{
    width:200px;
    background: #2b3035;
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 1.3rem;
    transition: all .5s ease-in;
}

.email-verification-container .button{
    background: #0071a1;
}

.reset-pass-message{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10%;
    font-size: 1.3rem;
}

#custom-alert {
    position: fixed;
    top:100px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #f44336;
    color: white;
    padding: 15px 20px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    font-size: 16px;
    text-align: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    visibility: hidden;
}

#custom-alert.show {
    visibility: visible;
    opacity: 1;
}

/*Email verifycation*/

.email-verification-container{
    text-align: center;
}

.verification-message {
    padding: 15px;
    border-radius: 5px;
    font-size: 1.3rem;
    margin-top: 15%;
}

.verification-message.success {
    color: #03fb3d;
}

.verification-message.error {
    color: #721c24;
}