/* Force Outline on all primary buttons in the Kohost Theme */
#main-body .btn-primary, 
#main-body input[type="submit"], 
#main-body button[type="submit"],
.login-area .btn-primary {
    background-image: none !important;
    background-color: transparent !important;
    border: 2px solid #6366f1 !important; /* The Outline Color */
    color: #6366f1 !important; /* The Text Color */
    box-shadow: none !important;
    text-shadow: none !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

/* Hover State: Fill the button with color */
#main-body .btn-primary:hover, 
#main-body input[type="submit"]:hover, 
#main-body button[type="submit"]:hover,
.login-area .btn-primary:hover {
    background-color: #6366f1 !important;
    color: #ffffff !important;
}


/* Remove the invisible right column space */
.login-area .login-box-right {
    display: none !important;
}

/* Force the form container to fill the entire card */
.login-area .login-box-left {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    border-right: none !important;
    padding: 60px !important; /* Adjust padding for a cleaner look */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Centers items horizontally */
}

/* Constrain the form itself so it doesn't look too wide */
.login-area .login-box-left form {
    width: 100% !important;
    max-width: 450px !important;
}