/* Body Styling */
body {
    background-color: #eff2f1; /* Set the background color of the page */
    margin: 0; /* Remove default browser margin */
    padding: 0; /* Remove default browser padding */
    display: flex;
    flex-direction: column; /* Make the top-bar and main content stack vertically */
    min-height: 100vh; /* Ensure full height viewport */
}

/* Top Bar Styling */
.top-bar {
    display: flex;
    justify-content: space-between; /* Space between left and right content */
    align-items: center; /* Align items vertically in the center */
    padding: 10px 20px; /* Add some vertical and horizontal padding */
    position: fixed; /* Fix the top bar to the top of the viewport */
    top: 0; /* Position at the top of the viewport */
    left: 0; /* Align with the left edge */
    width: 100%; /* Ensure the top-bar spans the full width of the page */
    z-index: 1000; /* Ensure the bar stays on top of other elements */
}

.top-bar .welcome-text {
    font-size: 30px; /* Adjust font size */
    font-weight: bold; /* Make the text bold */
    color: #226580; /* Set the color of the text */
    margin: 0; /* Remove unwanted margins */
    line-height: 1.3; /* Improve line spacing for multi-line text */
}

.top-bar img {
    height: 80px; /* Set logo height */
}

/* Main Content Styling */
main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    padding-top: 80px; /* Add space to ensure the content doesn't overlap with the fixed top bar */
}

.login-bg {
    background-image: url('/img/login-bg.webp');
    background-size: cover; /* Ensures the image covers the entire area */
    background-repeat: no-repeat; /* Prevents image repetition */
    background-position: center center; /* Centers the image */
    width: 100%; /* Full width */
}

.card-body label {
    color: #494a4a; /* Set the title (label) color */
    font-weight: bold;
}

.form-control {
    display: inline-block; /* Ensure inputs fall properly inline with labels */
    width: 70%; /* Adjust input width for alignment */
}

.form-group {
    display: flex;
    align-items: center; /* Align label and input vertically */
    justify-content: space-between; /* Add spacing between label and input */
}

.card {
    background-color: white; /* Keep form background distinct */
    border-radius: 8px;
    background-color: rgba(240, 242, 242, 0.8); /* Transparent background with color #f0f2f2 */
    padding: 20px; /* Add padding inside the container */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Slight shadow for depth */
}

.btn-primary {
    background-color: #f7be60; /* Login button background color */
    color: white;
    border: none;
}

.btn-primary:hover {
    background-color: #e0a84d; /* Darken button on hover */
}

@media only screen and (max-width: 768px) {
    .container {
        width: 90%; /* Reduce the width for small screens */
    }
}

body {
    background-color: #eff2f1; /* Set the background color of the page */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.login-bg {
    background-image: url('/img/login-bg.webp');
    background-size: cover; /* Ensures the image covers the entire area */
    background-repeat: no-repeat; /* Prevents image repetition */
    background-position: center center; /* Centers the image */
    height: 100vh; /* Full viewport height */
    width: 100%; /* Full width */
}

.card-body label {
    color: #494a4a; /* Set the title (label) color */
    font-weight: bold;
}

.form-control {
    display: inline-block; /* Ensure inputs fall properly inline with labels */
    width: 70%; /* Adjust input width for alignment */
}

.form-group {
    display: flex;
    align-items: center; /* Align label and input vertically */
    justify-content: space-between; /* Add spacing between label and input */
}

.card {
    background-color: white; /* Keep form background distinct */
    border-radius: 8px;
    background-color: rgba(240, 242, 242, 0.8); /* Transparent background with color #f0f2f2 */
    border-radius: 8px; /* Add rounded corners */
    padding: 20px; /* Add padding inside the container */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Slight shadow for depth */
}

.alert {
    color: white;
    background-color: #ff4907; /* Alerts background color */
    border: none;
}

.btn-primary {
    background-color: #f7be60; /* Login button background color */
    color: white;
    border: none;
}

.btn-primary:hover {
    background-color: #e0a84d; /* Darken button on hover */
}

.container {
    width: 800px; /* Fixed width for the container */
}

.spin {
    animation: rotate 1s linear infinite;
    width: 50px;
    height: 50px;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}