/* Dropdown icon adjustments */
body.login-page {
    background-image: url('../images/background.png');
    background-size: cover;
    background-position: center;
    height: 100vh; /* Make sure it covers the whole viewport */
    margin: 0; /* Remove default margin */
}

.dropdown-icon {
    margin-top: 10px;
    margin-left: 1800px;
}

/* Default Styles for Login Form */
.login-form {
    margin: auto;
    width: 500px; /* Fixed width for larger screens */
    height: 100%; /* Ensure it fills the available space */
    margin-top: 320px; /* Position the form towards the center (adjust as needed) */
    margin-left: 180px;
    /* Add white box-shadow */
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.5); /* White shadow with some opacity */
    background: rgba(255, 255, 255, 0.9); /* Optional: Slight transparency for background */
    color: black;
    padding: 20px;
    border-radius: 10px; /* Rounded corners */
}

/* Adjustments for custom input */
.custom-input {
    width: 200px;
}

/* Header for login form */
.login-form h4 {
    margin: auto;
}

/* Center the form within its container */
.loginform {
    margin: auto;
}

/* Mobile-specific styles */
@media (max-width: 512px) and (min-width: 320px) {
    .dropdown-icon {
        margin-top: 10px;
        margin-left: 10px;
    }

    .login-form {
        width: 100%;
        /* Make the form full width */
        max-width: 500px;
        /* Optional: limit maximum width */
        margin: auto;
        margin-top: 200px;
        padding: 0;
        /* Remove padding */
        overflow-x: hidden;
        /* Prevent horizontal scrolling */
    }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {

    /* Styles for medium tablets in landscape mode */
    .dropdown-icon {
        margin-top: 10px;
        margin-left: 10px;
    }

    .login-form {
        width: 100%;
        /* Make the form full width */
        max-width: 700px;
        /* Optional: limit maximum width */
        margin: auto;
        margin-top: 200px;
        padding: 0;
        /* Remove padding */
        overflow-x: hidden;
        /* Prevent horizontal scrolling */
    }
}


@media only screen and (min-width: 1025px) and (max-width: 1200px) {

    /* Styles for large tablets */
    /* Styles for medium tablets in landscape mode */
    .dropdown-icon {
        margin-top: 10px;
        margin-left: 10px;
    }

    .login-form {
        width: 100%;
        /* Make the form full width */
        max-width: 1000px;
        /* Optional: limit maximum width */
        margin: auto;
        margin-top: 200px;
        padding: 0;
        /* Remove padding */
        overflow-x: hidden;
        /* Prevent horizontal scrolling */
    }
}