/*.bg-login {
  background: transparent url('../../assets/img/login/bg_lg.png') 0% 0% no-repeat padding-box;
  background-position: -300px -550px;
}*/

.btn-submit {
    display: flex;
    width: 100%;
    padding: 9px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px;
    background: #003465;
    box-shadow: 0 2px 6px 0 #007BDF;
}

.btn-cancel {
    display: flex;
    width: 100%;
    padding: 9px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px;
    background: #FF0000;
    box-shadow: 0 2px 6px 0 #007BDF;
}

.text-btn-submit {
    color: #FFF;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.text-title-login {
    color: #555;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.alert-error {
    border: 2px solid #ff2f00;
    border-radius: 10px;
    padding: 8px;
    color: #ff2f00;
    font-size: 16px;
    background: #fff;
    opacity: 0.8;
}

/* Existing CSS for larger screens (PC) */
.main-container {
    display: flex;
    width: auto;
    height: 100vh;
    justify-content: flex-end; /* Aligns content to the right on PC */
    align-items: center;
    flex-shrink: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.login-input-container {
    display: flex;
    padding: 81px 66px;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    border-radius: 28.458px;
    border: 2.134px solid rgba(88, 130, 193, 0.49);
    background: #FFF;
    backdrop-filter: blur(8.893229484558105px);
    margin-right: 17rem;
}

@media screen and (max-width: 1024px) {
    .main-container {
        /*
            For mobile and vertical tablet, we only need to show the login box.
            So, we remove the background image and center the login box.
        */
        justify-content: space-around; /* Center horizontally */
        background: none !important; /* Removes the background image */
        flex-direction: column; /* Stacks items vertically */
    }

    .login-input-container {
        /* This will be the only UI element shown.
           Remove the border, padding, and backdrop filter to make it simpler.
        */
        width: 100%; /* Make it full width on mobile */
        padding: 20px; /* Adjust padding for smaller screens */
        margin: 0 !important; /* Removes the right margin */
        background: none; /* Removes the white background */
        border: none; /* Removes the border */
        backdrop-filter: none; /* Removes the blur effect */
    }

    /* Adjust the text and logo styles for a better mobile experience */
    .text-title-login {
        font-size: 18px;
    }

    .logo-box-container {
        display: none; /* Hides the logo container with PSU and DIIS logos on mobile */
    }
}

/* Media Query for horizontal Tablet (min-width: 769px and max-width: 1024px) */
@media screen and (min-width: 1025px) and (max-width: 1370px) {
    .main-container {
        justify-content: end; /* Centers the content horizontally */
        background-size: cover;
    }

    .login-input-container {
        margin-right: 0 !important; /* Removes the right margin to center the box */
        padding: 29px 20px !important;
        margin-right: 5rem !important; /* Adjusts the right margin for better centering */
        gap: 20px !important;
        width: 80vh
    }
}

.logo-box {
    width: 120px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-box-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    /*align-self: stretch;*/
    width: 42vh;
}

.contact-box-container {
    color: #555;
    text-align: center;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.login-input {
    display: flex;
    padding: 0px 0px 0px 10px;
    align-items: flex-start;
    gap: 10px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 10px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    width: 100%;
    height: 40px;
}

.login-input-password {
    border-radius: 10px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    height: 40px;
}