body,
html {
    position: relative;
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    background-color: #F5F5F5;
}

/* Styles for disabled inputs */
.disabled-input {
    background-color: #f0f0f0;
    cursor: not-allowed;
}

.login-button {
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

.login-button:hover {
    background-color: #0056b3;
}

.idp-login-button {
    display: none;
    /* Hide the IDP login button initially */
}

.realm-name {
    position: absolute;
    bottom: calc(100%);
    /* Positions the realm name 10px above the container */
    left: 48%;
    top: -8%;
    /* Centers the text horizontally */
    transform: translateX(-50%);
    /* Ensures proper horizontal centering */
    font-size: 18px;
    font-weight: bold;
    /* text-align: center; */
    color: #555;
    z-index: 1;
}

/* Container for left and right sides */
.container {
    display: flex;
    width: 720px;
    height: 520px;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

/* Left-side image styling */
.left-side {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
}

.left-side img {
    position: absolute;
    top: 0;
    /* Align to the top */
    left: 0;
    /* Align to the left */
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensure image covers the area properly */
}

/* Right-side form styling */
.right-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center contents horizontally */
    background-color: #fff;
}

/* Add this style for custom positioning of the dropdown */
.dropdown-container {
    width: 100%;
    /* Ensure it takes the full width of the container */
    margin-top: 105px;
    display: flex;
    justify-content: center;
    /* Horizontaly centre */
}

.dropdown-container select {
    width: 270px;
    /* Match the width of the input fields */
    padding: 10px;
    /* Same padding as the input fields */
    height: 40px;
    /* Same height as the input fields */
    font-size: 1em;
    color: #555;
    border: 1px solid #ccc;
    /* Same border style as the input fields */
    border-radius: 5px;
    /* Same border-radius as the input fields */
    background-color: #f9f9f9;
    /* Similar background color */
    box-sizing: border-box;
}

form {
    margin-top: 20px;
}

/* Logo styling */
.logo-container {
    position: absolute;
    top: 10px;
    right: 15px;
    text-align: right;
}

.application-logo {
    max-width: 110px;
    height: auto;
}

.bottom-logo-container {
    position: absolute;
    bottom: 10px;
    right: 15px;
    text-align: right;

}

.company-logo {
    max-width: 90px;
    /* Adjust size of the logo */
    height: auto;
}

/* Login header and dropdown styling */
.login-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Align items to the left */
    width: 100%;
    margin-bottom: 10px;
}

/* Styling for the dropdown */
.login-method {
    width: 150px;
    font-size: 1em;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    cursor: pointer;
}

/* Input group styling for fields */
.input-group {
    margin-bottom: 8px;
    /* Space between input fields */
    width: 100%;
    display: flex;
    /* Use flex for alignment */
    flex-direction: column;
    /* Stack label and input vertically */
    align-items: stretch;
    /* Stretch input to container width */
}

.input-group label {
    font-size: 1em;
    margin-bottom: 4px;
    /* Space between label and input */
    display: block;
    color: #555;
    text-align: left;
    /* Align label text to the left */
}

.input-group input {
    width: 270px;
    margin-bottom: 4px;
    padding: 10px;
    height: 40px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

.error-message {
    display: inline-block;
    /* Ensures it stays inline but can wrap */
    max-width: 270px;
    white-space: normal;
    /* Allow text to wrap to the next line */
    word-wrap: break-word;
    /* Break words if they exceed the width */
    overflow-wrap: break-word;
    color: red;
    font-size: 12px;
    margin-bottom: 4px;
}

/* Button styling */
.login-button {
    width: 270px;
    padding: 10px;
    /* Same padding as the input fields */
    height: 35px;
    font-size: 1em;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    /* Same border-radius as inputs */
    box-sizing: border-box;
    /* Ensure padding and border don't affect the width */
    margin-top: 0.5px;
}


.login-button:hover {
    background-color: #45a049;
}

/* Wrapper for input and icon */
/* Styling for password wrapper */
.password-wrapper {
    position: relative;
    width: 100%;

}

.password-wrapper input {
    width: 100%;
    padding-right: 40px;
    /* Space for the eye icon */
}

/* Styling for the eye icon */
#toggle-password {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #555;
    width: 19px;
    /* Adjust width of the image icon */
    height: 16px;
    /* Adjust height of the image icon */
}

#toggle-password:hover {
    opacity: 0.7;
}


/* Links styling */
.links {
    display: block;
    flex-direction: column;
    /* Stack links vertically */
    justify-content: flex-start;
    /* Align links to the top */
    align-items: flex-start;
    /* Align links to the start of the input fields */
    margin-top: 5px;
    /* Space between input fields and links */
    width: 100%;
    /* Full width to match input fields */
    padding-left: 95px;
    /* Custom left alignment */
}


.links .link {
    display: block;
    color: #007BFF;
    text-decoration: none;
    margin-bottom: 5px;
    /* Space between links */
    font-size: 0.75em;
}

.link:hover {
    text-decoration: underline;
    /* Underline on hover */
}

/* CSS for the IDP login button */
.idp-login-button {
    width: 270px;
    /* Match the width of the container */
    padding: 10px;
    /* Set padding */
    height: 35px;
    font-size: 1em;
    background-color: #4CAF50;
    /* Set background color */
    color: white;
    /* Set text color */
    border: none;
    cursor: pointer;
    border-radius: 5px;
    /* Match border radius */
    box-sizing: border-box;
    /* Include padding and border in element's total width and height */
    transition: background-color 0.3s;
    /* Add transition for hover effect */
}

/* Optional: Add hover effect */
.idp-login-button:hover {
    background-color: #45a049;
    /* Darken background on hover */
}

@media (max-width: 1024px) {
    .container {
        width: 90%;
        /* Decrease width for smaller screens like tablets */
        height: auto;
    }

    .left-side img {
        object-fit: contain;
        /* Ensure the image fits better on medium screens */
    }
}

@media (max-width: 576px) {
    .container {
        width: 100%;
        /* Full width for very small screens */
        height: auto;
        flex-direction: column;
    }

    .right-side,
    .left-side {
        width: 100%;
        /* Adjust width for both sections */
    }

    .login-method,
    .login-button,
    .input-group input {
        width: 100%;
        /* Ensure all inputs and buttons are full-width */
    }

    .dropdown-container {
        margin-top: 50px;
        /* Adjust space for mobile */
    }

    .links {
        padding-left: 0;
        /* Remove extra padding for smaller devices */
    }
}