/* Global Styles */
body {
    margin: 0;
    padding: 0;
    font-family: 'Inter',ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    background-color: #f7fafc;
    height: 100vh; /* Full viewport height */
    align-items: center;
    justify-content: center;
}

/* Dark Mode */
.dark body {
    background-color: rgba(var(--gray-950),var(--tw-bg-opacity,1));
}

/* Login Container */
.login-container {
    display: flex;
    height: 100vh; /* Full height */
    background-color: #fff;
    /*border-radius: 8px;*/
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Dark Mode - Login Container */
.dark .login-container {
    background-color: #0b0a09;
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
}

/* Left Section */
.login-form {
    flex: 1;
    max-width: 25rem;
    padding: 2rem;
    display: grid;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* height: 100vh; */ /* Full height */
}

/* Dark Mode - Form Background */
.dark .login-form {
    background-color: #0b0a09;
}

/* Logo */
.login-form .logo img {
    /* margin-bottom: 1rem; */
    width: 125px;
    /* text-align: center; */
    align-items: center;
}

/* Heading */
.login-form h2 {
    font-size: 24px;
    color: #2d3748;
    margin-bottom: 1.5rem;
    font-weight: 700;
    letter-spacing: -.025em;
    font-size: 1.5rem;
    line-height: 2rem;
    display: flex;
    align-items: center;
    flex-direction: column;
}

/* Dark Mode - Heading */
.dark .login-form h2 {
    color: #f8fafc;
}

/* Form */
form {
    display: grid;
    width: 350px;
    row-gap: 3.5px;
}


/* Labels */
form label {
    font-size: 16px;
    /*font-weight: 600;*/
    color: #fdfdfd;
    margin-bottom: 0.5rem;
    display: block;
    letter-spacing: 0.02rem;
    text-align: left;
}

/* Dark Mode - Labels */
.dark form label {
    color: white !important;
}

/* Input Fields */
form input {
    width: 85%;
    padding: 10px;
    border: 1px solid #292828;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 16px;
    /*background: white;*/
    color: #cdcdcd;
}

/* Dark Mode - Input Fields */
.dark form input {
    background: #171616;
    color: #cdcdcd !important;
    display: grid;
    border: 1px solid #292828 !important;


}
.dark form input:focus-visible {
    background: #171616;
    color: #cdcdcd !important;
    display: grid;
    border: 1px solid #06acef !important;


}
.dark form label {
    /*background: #4a5568;*/
    /*color: white;*/
    /*border-color: #718096;*/
}

/* Buttons */
form button {
    width: 90%;
    background-color: #06acef;
    color: #fff;
    font-size: 16px;
    /*font-weight: bold;*/
    padding: 0.5rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 10px;
}
}

/* Dark Mode - Buttons */
.dark form button {
    background-color: #06acef;
}

form button:hover {
    background-color: #06acef;
}

/* Dark Mode - Button Hover */
.dark form button:hover {
    background-color: #06acef;
}

/* Right Section */
.login-image {
    flex: 1;
    position: relative;
    overflow: hidden;
    height: 100vh; /* Full height */
}

/* Image */
.login-image img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}
/* Additional styles for better alignment and appearance */

/* Custom CSS for positioning the theme switcher inside the right image section */
.login-container .login-image {
    position: relative;
}

.login-container .theme-switcher {
    position: absolute;
    top: 1rem; /* 16px */
    right: 1.5rem; /* 24px */
    z-index: 10;
}

/* Optional: Ensuring login form has enough padding on the right */
.login-container .login-form {
    padding: 48px 100px;
    /* max-width: 24rem; */
}
.h-6{
    height: auto;
    width: 125px;
}
.gap-y-6 {
    row-gap: 1.5rem;
}
.auto-cols-fr {
    grid-auto-columns: minmax(0, 1fr);
}
.grid {
    display: grid;
    /*width: 390px;*/
    text-align: center;
;
}
.items-center {
    align-items: center;
}
.flex-col {
    flex-direction: column;
}

.mb-4 {
    margin-bottom: 1rem;
}
.gap-2 {
    gap: .5rem;
}
.items-center {
    align-items: center;
}
.fi-simple-header{
    text-align: center;
}
.tracking-tight{
    letter-spacing: -.025em;
    line-height: 2rem;
    font-weight: 200;
}

.required{
    color:red;
}

/* Ensure form elements (input & button) have the same width and alignment */
form input,
form button {
    width: 100%; /* Ensures they take full width */
    padding: 10px;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box; /* Prevents padding from affecting width */
    /*text-align: center;*/
}

/* Button styles */
form button {
    background-color: #06acef;
    color: #fff;
    font-size: 16px;
    padding: 10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Button Hover */
form button:hover {
    background-color: #0493c9;
}

/* Dark Mode - Button */
.dark form button {
    background-color: #06acef;
}

/* Dark Mode - Button Hover */
.dark form button:hover {
    background-color: #0493c9;
}
.error{
    text-align: left;
    color: #a04a4a;
    padding: 0px 0px 10px 0px;
}