body {
    font-family: "Inter", sans-serif;
    /* Updated background to use the airplane image */
    /* background: url('https://placehold.co/1920x1080/ADD8E6/2C3E50?text=Airplane+Background') no-repeat center center / cover; */
    display: flex;
    justify-content: flex-start;
    /* Align content to the start (left) */
    align-items: center;
    min-height: 100vh;
    padding: 1rem;
    box-sizing: border-box;
}
@media (max-width: 767.98px) {
    .bg-login-page {
        background: #56acd4 !important; /* Bootstrap's primary blue */
        display: flex;
        position:absolute;
        top: 10%;

    }
}
.login-card {
    border: 4px solid white;
    /* background-color: rgba(255, 255, 255, 0.9); */
    /* background-color: #CADDE3; */
    /* background: linear-gradient(to bottom, #d5e7f6, #6abafc); */
    /* background: linear-gradient(to bottom, #3d5d67, #8cafbe); */
    /* background: linear-gradient(to bottom, #3c6b7a, #46788d); */
    background: linear-gradient(45deg, #212121, #515151);
    /* Slightly transparent white */
    backdrop-filter: blur(30px);
    /* Frosted glass effect */
    -webkit-backdrop-filter: blur(30px);
    /* For Safari */
    text-align: center;
    border-radius: 2rem;
    /* More rounded corners */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

    min-width: 450px;
    /* Max width for the card */
    width: 100%;
    padding: 2.5rem;
    /* Increased padding */

    /* Adjust margin for positioning to the left side,
               using a percentage for responsiveness */
    margin-left: 15%;
    /* Example: pushes it 8% from the left */
    margin-right: auto;
    /* Push remaining space to the right */
}
.invalid-feedback {
    position: absolute !important;
    display: none;
    width: 100%;
    margin-top: 3.25rem;
    font-size: 0.975em;
   color: #ff2121;
    top: -8px;
    z-index: 90;
    text-align: left !important;
    font-weight: 400;
}

/* Responsive adjustments for the login card margin */
@media (max-width: 768px) {
    .login-card {
        margin-left: auto;
        /* Center on smaller screens */
        margin-right: auto;
    }
}

.form-control-custom {
    padding-left: 3.5rem;
    /* Space for the icon */
    padding-right: 3.5rem;
    /* Space for the eye icon in password field */
    height: 3.5rem;
    /* Taller input fields */
    border-radius: 0.75rem;
    /* Rounded corners for input fields */
}
.input-icon {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: #7FA94B;
    /* Bootstrap's muted text color */
    z-index: 5;
    /* Ensure icon is above input */
}

.toggle-password {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #6c757d;
    /* Bootstrap's muted text color */
    z-index: 5;
    /* Ensure icon is above input */
}

.form-control-custom-sm {
    padding-left: 3rem !important;
    /* Space for the icon */
    padding-right: 3rem !important;
    /* Space for the eye icon in password field */
    height: calc(1.8125rem + 2px);
    /* Bootstrap's form-control-sm height */
    border-radius: 0.5rem;
    /* Slightly smaller border-radius for sm inputs */
}

/* Adjusted icon positioning for form-control-sm */
.input-icon-sm {
    position: absolute;
    left: 0.75rem;
    /* Adjusted left position */
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    /* Bootstrap's muted text color */
    z-index: 5;
    font-size: 0.875rem;
    /* Smaller icon size */
}

.toggle-password-sm {
    position: absolute;
    right: 0.75rem;
    /* Adjusted right position */
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #6c757d;
    /* Bootstrap's muted text color */
    z-index: 5;
    font-size: 0.875rem;
    /* Smaller icon size */
}

.logo-img {
    max-width: 200px;
    height: auto;
    margin-bottom: 2rem;
    text-align: center;
}

.btn-custom {
    background-color: #03a8de;
    /* Dark gray, similar to original */
    border-color: #343a40;
    color: white;
    font-weight: 500;
    /* Medium font weight */
    padding: 0.75rem 1.5rem;
    /* Adjust padding */
    border-radius: 0.75rem;
    /* Rounded corners */
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.btn-custom:hover {
    background-color: #037ea8  !important;
    /* Slightly lighter on hover */
    border-color: #0287b4  !important;
    color: white  !important;
}

.rounded-circle-icon {
    width: 4rem;
    /* 64px */
    height: 4rem;
    /* 64px */
    background-color: #e0f7fa;
    /* Light blue */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.rounded-circle-icon svg {
    color: #007bff;
    /* Primary blue */
    width: 2rem;
    /* 32px */
    height: 2rem;
    /* 32px */
}