/* Custom styles for two_factor login page */

/* General SSO Button Styling */
.sso-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important; /* Ensure no underline */
    width: 100%; /* Make buttons full width of their container */
    padding: 0.5rem 1rem; /* Standardized padding */
    margin-bottom: 0.75rem; /* Space below each SSO button */
    font-size: 1rem; /* Consistent font size */
    line-height: 1.5;
    border-radius: 0.375rem; /* Standard Bootstrap border radius */
    box-sizing: border-box; /* Ensure padding/border are included in width */
}

/* Google, Xero, and Microsoft Sign-In Button Specifics */
.sso-btn.sso-btn-google,
.sso-btn.sso-btn-xero,
.sso-btn.sso-btn-microsoft {
    background-color: #ffffff; /* White background */
    color: #4A4A4A; /* Dark grey text */
    border: 1px solid #ced4da; /* Standard Bootstrap border */
}

.sso-btn.sso-btn-google:hover,
.sso-btn.sso-btn-google:focus,
.sso-btn.sso-btn-xero:hover,
.sso-btn.sso-btn-xero:focus,
.sso-btn.sso-btn-microsoft:hover,
.sso-btn.sso-btn-microsoft:focus {
    background-color: #f8f9fa; /* Light grey on hover/focus */
    color: #4A4A4A;
    border-color: #adb5bd; /* Slightly darker border on hover/focus */
}

.sso-btn.sso-btn-google .google-signin-logo,
.sso-btn.sso-btn-xero .xero-signin-logo,
.sso-btn.sso-btn-microsoft .microsoft-signin-logo {
    margin-right: 10px; /* Space between logo and text */
    /* Height and width for the Xero logo can be set here or inline in the SVG if needed */
    /* For example, if the SVG doesn't have explicit size: */
    /* height: 20px; */
    /* width: 20px; */
}


/* Styles for floating labels if you use them for the main form */
.form-signin .form-floating > .form-control {
    padding-top: 1.625rem;
    padding-bottom: .625rem;
}
.form-signin .form-floating > label {
    padding-top: .8rem; /* Adjust label padding for floating labels */
}