@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif, Helvetica;
}

body, p {
    margin: 0;
}

body.docs-gen-page {
    background-color: #F4F9FF;
}

.header, .header div.logo a, .main-container, .card-container,
.card, .right-side, .doc-gen-form{
    display: flex;
}

.header{
    width: 100%;
    margin-bottom: 1.5rem;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}
a.logout, 
.header div.logo a {
    transition: all 0.3s ease-in-out;
}
.header div.logo a{
    padding: 1.08rem 3.5rem;
}

div.logo img{
    height: 52px;
}

a.logout{
    display:flex;
    padding: 1.704rem 3.5rem;
}
a.logout:hover, .header div.logo:hover {
    background-color: #e3f2ff;
}

.main-container {
    width: 100vw; /* Full width */
    min-height: 100vh; /* Full height */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: auto;
}

.card-container {
    min-height: 8vw;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 2rem;
}

.card {
    width: 95vw; /* Adjust width as needed */
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    flex-direction: column;
    border: 1px #AFC6DE solid;
}

.card-header {
    background: #00457C;
    color: white;
    padding: 1rem 1.2rem;
    font-size: 1.2em;
    text-align: left;
    display:flex;
    flex-flow:row nowrap;
    justify-content: flex-start;
    align-items:center;
}

.card-body {
    padding: 1.5rem 3rem;
    font-size: 1.3em;
    color: #333;
    flex-grow: 1;
}

.left-side {
    flex: 65; /* 65% width */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("/static/glfc_banner.jpg");
}

.right-side {
    flex: 35; /* 35% width */
    flex-direction: column;
    justify-content: center;
    padding: 5.5rem;
}

.right-side .login-header {
    margin-bottom: .1rem;
}

.right-side .login-header > .welcome {
    font-size: 2.7em;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
}

.right-side .login-header > .login {
    font-size: 1.5em;
    font-weight: 500;
}

.login-form {
    margin-top: 1rem;
}

.doc-gen-form {
    flex-flow: row wrap;
    column-gap: calc(0.5vw + 10px);
}

/* size doc type, loan app id, and generate btn START */
.doc-gen-form .form-group{
    flex-flow: column nowrap;
    max-width: 40%;
    /* max-width: 40%; */
    min-width: 0; /* for input:loan_app_id */
}
.doc-gen-form .form-group.btn-group {
    max-width: 20%;
}
/* size doc type, loan app id, and generate btn END */

select, optgroup, 
.doc-gen-form .form-group input,
.doc-gen-form .form-group label {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
}

.doc-gen-form .form-group input,
.doc-gen-form .form-group select {
    width: calc(9vw + 10rem);
}

select {
    
    padding: 17px 20px;
    font-size: 1rem;
    border: 1px solid #D0D5DC;
    border-radius: 0.6rem;
    background-color: white;
    color: #333;
    cursor: pointer;
    appearance: none; /* Removes default styles */
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
}

/* Add Custom Dropdown Arrow */
select {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M7 10l5 5 5-5z"></path></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 35px;
    fill: black;
    transition: all 0.3s ease-in-out;
}

select:hover {
    border-color: #0056b3;
}

select:focus {
    border-color: #0056b3;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    outline: none;
}

optgroup {
    font-weight: bold;
    color: #0056b3;
    font-size: 1rem;
}

select:has(option:checked[disabled]) {
    color: #999 !important; /* Match the disabled option color */
    font-style: italic;
}


option {
    font-size: 0.95rem;
    padding: 5px;
}

.form-group {
    margin-bottom: 20px;
}

.credentials-group {
    margin-bottom: .6rem;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 1.2rem;
}

.form-group input {
    font-size: .8rem;
    width: 100%;
    padding: 17px 20px;
    border: 1px solid #D0D5DC;
    border-radius: 0.6rem;
    box-sizing: border-box;
    transition: all 0.3s ease-in-out;
    font-weight: 250;
    color: #00447C;
    caret-color: #699CC5;
}
.form-group input::placeholder {
    color: #b3bdcf; /* Change to your preferred color */
    opacity: 1; /* Ensures full color visibility */
}

.form-group input:hover,
.form-group input:focus {
    color: #00447C;
    border-color: #00447C;
    background-color: #f0f8ff; /* Light blue background */
    outline: none; /* Removes default focus outline */
}

.form-group input:focus {
    box-shadow: 0 0 5px rgba(0, 91, 187, 0.5); /* Subtle glow effect */
}

.doc-gen-form .form-group button {
    margin-top: 1.7rem;
    padding: 16px calc(0.5vw + 5px);
    font-weight: 200;
    font-size: 0.9em;
    min-width: 100px;
}

.form-group button {
    width: 100%;
    padding: 18px;
    background-color: #012E60;
    color: white;
    border: none;
    border-radius: 0.6rem;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: 600;
    transition: all 0.4s ease-in-out;
}

.form-group button:hover {
    background-color: #054998;
}

@keyframes popIn {
    0% {
        transform: translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        height: auto; /* Allows natural height */
        padding: 1rem 1.7rem; /* Restore padding */
    }
}

.form-group.error-message {
    padding: 1rem 1.7rem;
    background-color: #ffe5e5;
    border-radius: 0.2rem;
    color: #f46060;
    font-size: 1.1em;
    opacity: 0;
    height: 0;
    padding: 0 1.7rem; /* Maintain horizontal padding */
    margin-top: 0;
    animation: popIn 0.4s ease-in-out forwards;
    position: absolute;
    z-index: 9999;
    width: 100%;
}

/* Password Input Toggle Visibility */
.password-container {
    position: relative;
    width: 100%;
}

.toggle-password {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
    color: #555;
}

.toggle-password:hover {
    color: #00447C;
}

.eye-icon-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    cursor: pointer;
    color: #B3BDCF;
}

.eye-icon-password:hover {
    color: #00447C;
    transition: all 0.3s ease-in-out;
}

.logout-icon {
    width: 32px;
    height: 32px;
    fill: #00457C;
}

.loan-docs-icon {
    width: 38px;
    height: 28.88px;
    margin-right: 0.6rem;
}

.hidden {
    display: none;
}

/* bootstrap clone */
.alert {
    position: relative;
    padding: 1rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    font-size: x-small;
}

.alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

.custom-disabled {
  /* Basic visual changes to indicate it's disabled */
  background-color: #cccccc; /* Light gray background */
  color: #666666; /* Darker gray text */
  border: 1px solid #999999; /* Light gray border */
  cursor: not-allowed; /* Change cursor to indicate it's not clickable */
  opacity: 0.6; /* Slightly fade out the button */

  /* Prevent hover effects */
  pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .main-container {
        flex-direction: column;
    }

    .left-side {
        display: none;
    }

    .right-side {
        padding: 50px;
    }

    .header div.logo a {
        padding: 1.08rem 0.5rem;
    }

    a.logout{
        padding: 1.705rem 1.5rem;
    }

    .card {
        width: 100%; /* Adjust width as needed */
        background: #fff;
        border-radius: 0;
    }

    .card-body {
        padding: 2rem 3rem;
    }

    .card-container {
        margin-bottom: 1.2rem;
    }
    
    .doc-gen-form {
        flex-flow: column nowrap;
        column-gap: calc(0.5vw + 10px);
        width: 100%;
    }
    .doc-gen-form .form-group, 
    .doc-gen-form .form-group.btn-group {
        max-width: 100%;
    }
    .doc-gen-form .form-group input,
    .doc-gen-form .form-group select {
        width: 100%;
    }
}