/* General Styles */
.logo-img {
    vertical-align: middle; 
    margin-bottom: 7px;
    width: 25px;
}

.nav-link {
    font-size: 17px;
    color: black;
}

.container-login {
    background-color: #f0f0f0; 
    padding: 30px; 
    border-radius: 10px; 
    margin: 30px auto; 
    width: 500px;
    box-sizing: border-box; 
    overflow-x: hidden; 
}

.container-login-verify {
    background-color: #f0f0f0; 
    padding: 30px; 
    border-radius: 10px; 
    margin: 30px auto; 
    width: 500px; 
    position: relative;
    box-sizing: border-box; 
    overflow-x: hidden; 
    pointer-events: none; 
    opacity: 0.5;
}

.container-register {
    background-color: #f0f0f0;
    padding: 30px;
    border-radius: 10px;
    margin: 20px auto; 
    width: 750px; 
    box-sizing: border-box; 
    overflow-x: hidden; 
}

.container-email, .container-reset {
    background-color: #f0f0f0; 
    padding: 30px; 
    border-radius: 10px; 
    margin: 80px auto; 
    width: 500px;
    box-sizing: border-box; 
    overflow-x: hidden; 
}

.title {
    text-align: center; 
    font-size: 40px; 
    font-weight: bold; 
    margin-bottom: 30px; 
    color: #191970;
}

.form-label {
    font-weight: bold;
}

#toggle-password, #toggle-password-confirm {
    border: groove 1px;
}

.btn-save {
    background-color: #191970; 
    border: none; 
    height: 45px;
    color: white;
    margin-top: 10px;
    width: 100%;
}

.btn-save:hover {
    background-color: lightslategray;   
}

.verify-email-alert {
    position: absolute; 
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%); 
    z-index: 1; 
    background-color: #fff; 
    padding: 20px; 
    border-radius: 10px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 90%;
    box-sizing: border-box;
}

/* Screen size less than 1200px [large laptop/desktop/monitor] */
@media (max-width: 1200px) {
    .container-register {
        width: 90%;
    }
}

/* Screen size less than 992px [medium-sized laptop/dekstop/monitor */
@media (max-width: 992px) {
    .container-login, .container-login-verify, .container-register, .container-email, .container-reset {
        width: 90%;
        margin: 20px auto;
    }
}

/* Screen size less than 768px [tablet landscape mode/smaller laptop] */
@media (max-width: 768px) {
    .logo-img {
        width: 20px; 
    }

    .container-login, .container-login-verify, .container-register, .container-email, .container-reset {
        width: 90%;
        margin: 20px auto; 
    }

    .verify-email-alert {
        padding: 15px; 
    }
}

/* Screen size less than 480px [tablet portrait mode/mobile phone] */
@media (max-width: 480px) {
    .logo-img {
        width: 15px; 
    }

    .title {
        font-size: 32px;
    }

    .btn-save {
        height: 40px;
        font-size: 14px; 
    }

    .container-login, .container-register, .container-email, .container-reset {
        padding: 20px; 
        margin: 10px auto; 
    }

    .container-login-verify {
        padding: 20px; 
        margin: 10px auto; 
        pointer-events: none; 
        opacity: 0.5;
    }

    .verify-email-alert {
        padding: 10px; 
        max-width: 95%; 
    }
}

/* Screen size less than 320px [mobile phone] */
@media (max-width: 320px) {
    .title {
        font-size: 24px;
    }
}