body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: url('/images/background.jpg') no-repeat center center fixed;
    background-size: cover;
    color: #333; /* Set a default text color */
}

.container {
    width: 320px;
    height: auto; /* Change to auto to allow for dynamic height */
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.9); /* Slightly more opaque */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Slightly stronger shadow */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    border-radius: 10px; /* Rounded corners for the container */
}

.error-container {
    width: 320px;
    height: 240px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.8); /* Slightly transparent background for better readability */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: start;
}

.error-code {
    color: #337ab7;
}

.container .logo {
    text-align: center;
    margin-bottom: 20px;
}

.container .logo img {
    max-width: 100%;
    height: auto;
}

.login-options {
    margin-bottom: 20px;
    border: 2px solid #0056b3; /* Darker blue border for contrast */
    border-radius: 25px; /* Curved corners for the border */
    padding: 5px; /* Padding to create space between the border and the tab container */
    background-color: transparent; /* Keep the background transparent */
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    width: 100%;
}

.help-link-container {
    text-align: center;
}

.help-link-container a {
    color: #337ab7;
    text-decoration: none;
}

.help-link-container a:hover {
    text-decoration: underline;
}

.login-form input[type="email"],
.login-form input[type="submit"],
.employee-auth-btn {
    padding: 10px;
    margin-bottom: 0px;
    border: 1px solid #ccc; /* Consistent border style */
    border-radius: 5px; /* Slightly rounded corners */
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.2s; /* Smooth transition for background, transform, and shadow */
}

.login-form input[type="submit"] {
    background-color: #0056b3; /* Darker blue for the submit button */
    color: white;
    transition: background-color 0.3s; /* Smooth transition */
}

.login-form input[type="submit"]:hover {
    background-color: #004494; /* Darker shade on hover */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
}

.employee-auth-btn {
    background-color: #333; /* Employee button color */
    color: white;
    margin-top: 2px; /* Space between the Next button and the Employee button */
    width: 100%; /* Make the buttons full width */
}

.employee-auth-btn:hover {
    background-color: #444; /* Darken color on hover */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
}

.or-container {
    width: 100%;
    margin: 18px 0 12px; /* Adjust margin as needed */
    display: flex;
    align-items: center; /* Center the items vertically */
}

.or-line {
    border-top: 1px solid #ccc; /* Line color */
    width: 100%; /* Full width */
    height: 1px; /* Thickness of the line */
    margin-top: 7px; /* Space above the line */
}

.or {
    color: #555; /* Text color */
    margin: 0 10px; /* Space on the sides of the text */
    font-size: 0.875rem; /* Font size */
    font-weight: 600; /* Font weight */
}

.disclaimer {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9em; /* Slightly larger font size */
    color: #555; /* Softer color for disclaimer text */
}

.footer-container {
    text-align: center;
    padding: 10px 0;
    background-color: rgba(255, 255, 255, 0.8); /* Light background for footer */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #ccc; /* Top border for separation */
}

.footer {
    display: inline-block;
    font-size: 14px;
    color: #000;
}

.footer a {
    color: #0056b3; /* Link color */
    text-decoration: none; /* Remove underline */
}

.footer a:hover {
    text-decoration: underline; /* Underline on hover */
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: url('/images/background.jpg') no-repeat center center fixed;
    background-size: cover;
    color: #333; /* Set a default text color */
}

.container {
    width: 320px;
    height: auto; /* Change to auto to allow for dynamic height */
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.9); /* Slightly more opaque */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Slightly stronger shadow */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    border-radius: 10px; /* Rounded corners for the container */
}

.error-container {
    width: 320px;
    height: 240px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.8); /* Slightly transparent background for better readability */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: start;
}

.error-code {
    color: #337ab7;
}

.container .logo {
    text-align: center;
    margin-bottom: 20px;
}

.container .logo img {
    max-width: 100%;
    height: auto;
}

.login-options {
    margin-bottom: 20px;
    border: 2px solid #0056b3; /* Darker blue border for contrast */
    border-radius: 25px; /* Curved corners for the border */
    padding: 5px; /* Padding to create space between the border and the tab container */
    background-color: transparent; /* Keep the background transparent */
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    width: 100%;
}

.help-link-container {
    text-align: center;
}

.help-link-container a {
    color: #337ab7;
    text-decoration: none;
}

.help-link-container a:hover {
    text-decoration: underline;
}

.login-form input[type="email"],
.login-form input[type="submit"],
.employee-auth-btn {
    padding: 10px;
    margin-bottom: 0px;
    border: 1px solid #ccc; /* Consistent border style */
    border-radius: 5px; /* Slightly rounded corners */
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.2s; /* Smooth transition for background, transform, and shadow */
}

.login-form input[type="submit"] {
    background-color: #0056b3; /* Darker blue for the submit button */
    color: white;
    transition: background-color 0.3s; /* Smooth transition */
}

.login-form input[type="submit"]:hover {
    background-color: #004494; /* Darker shade on hover */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
}

.employee-auth-btn {
    background-color: #333; /* Employee button color */
    color: white;
    margin-top: 2px; /* Space between the Next button and the Employee button */
    width: 100%; /* Make the buttons full width */
}

.employee-auth-btn:hover {
    background-color: #444; /* Darken color on hover */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
}

.or-container {
    width: 100%;
    margin: 18px 0 12px; /* Adjust margin as needed */
    display: flex;
    align-items: center; /* Center the items vertically */
}

.or-line {
    border-top: 1px solid #ccc; /* Line color */
    width: 100%; /* Full width */
    height: 1px; /* Thickness of the line */
    margin-top: 7px; /* Space above the line */
}

.or {
    color: #555; /* Text color */
    margin: 0 10px; /* Space on the sides of the text */
    font-size: 0.875rem; /* Font size */
    font-weight: 600; /* Font weight */
}

.disclaimer {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9em; /* Slightly larger font size */
    color: #555; /* Softer color for disclaimer text */
}

.footer-container {
    text-align: center;
    padding: 10px 0;
    background-color: rgba(255, 255, 255, 0.8); /* Light background for footer */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #ccc; /* Top border for separation */
}

.footer {
    display: inline-block;
    font-size: 14px;
    color: #000;
}

.footer a {
    color: #0056b3; /* Link color */
    text-decoration: none; /* Remove underline */
}

.footer a:hover {
    text-decoration: underline; /* Underline on hover */
}
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Index Page</title>
    <link rel="stylesheet" href="/style.css">
    <title>Login Page</title>
    <style>
    </style>
</head>

<body>
    <div class="container">
        <div class="logo">
            <img src="/images/logo.png" alt="Company Logo">
        </div>
        <div id="tab-content" class="tab-content">
            <form class="login-form" method="post" id="loginForm">
                <label for="username">Email</label>
                <input type="email" name="username" pattern="[\w\-\.]+@([\w\-]+\.)+[\w\-]{2,}"
                    placeholder="Enter your Email ID" required>
                <input type="submit" value="Next">
                
                <div class="or-container">
                    <div class="or-line"></div>
                    <div class="or">OR</div>
                    <div class="or-line"></div>
                </div>
                
                    <button type="button" onclick="submitForm('IDP1')" class="employee-auth-btn">Login using EntraID</button>
             </form>
        </div>
        <div class="disclaimer">
            <div class="help-link-container">
                <a href="https://www.aerdata.com/contact/" target="_blank">Visit Help Page</a>
            </div>
            <p>This system is provided for Company authorized use only. Unauthorized use is prohibited and may be
                subject to discipline, civil suit and criminal prosecution. By accessing this system, you understand and
                agree to comply with company policies for such use and for information protection.</p>
        </div>
    </div>
    <div class="footer-container">
        <div class="footer">
            <div style="display:inline-block;">Copyright &copy; 2025 The Boeing Company. All Rights Reserved </div>
            <div style="display:inline-block;">&nbsp; | &nbsp;</div>
            <div style="display:inline-block;">
                <a href="http://www.boeing.com/site-terms.page" title="Site Terms" target="_blank"
                    rel="noopener noreferrer">Site Terms</a>
            </div>
            <div style="display:inline-block;">&nbsp; | &nbsp;</div>
            <div style="display:inline-block;">
                <a href="http://www.boeing.com/privacy-and-cookie-policy.page" title="Privacy and Cookie Statement"
                    target="_blank" rel="noopener noreferrer">Privacy and Cookie Statement</a>
            </div>
        </div>
    </div>
</body>

</html>

<script>
function submitForm(idpValue) {
    
    var form = document.getElementById('loginForm');

    
    var idpInput = document.createElement('input');
    idpInput.type = 'hidden';
    idpInput.name = 'idp';
    idpInput.value = idpValue;

    
    form.appendChild(idpInput);

    
    form.submit();
}
</script>