Expand width of SSO Button

Hi,

I have some code that I used to move the SSO button to the top of the login page

The issue I am running into is if I expand the width of the SSO button - it displaces the Sign in Text

I’d like to keep the Sign in Text above the SSO button because I plan to replace it

This is the code I am using

/*CSS to Flip the Login Page*/

#doc-layout-login form {
    display: flex;
    flex-wrap: wrap;
}
#doc-layout-login  h1.login-form-title.hyd-typography-heading-2 {
    order: -3;
}
#doc-layout-login p.login-form-subtitle.hyd-typography-subtitle.hyd-color-typography-secondary {
    order: -2;
    font-weight: bold;
    font-size: 15px;
}
#doc-layout-login ui-input-text.login-field-username {
    border-top: 1px solid #dbdbdb;
    border-right: 1px solid #dbdbdb;
    border-left: 1px solid #dbdbdb;
    padding: 8px;
}
 #doc-layout-login ui-input-password {
    width: 100%;
    padding: 8px;
    border-left: 1px solid #dbdbdb;
    border-right: 1px solid #dbdbdb;
}
 #doc-layout-login ui-input-checkbox.login-field-remember-me {
    width: 100%;
    padding: 8px;
    border-left: 1px solid #dbdbdb;
    border-right: 1px solid #dbdbdb;
}
#doc-layout-login .form-button.login-button.ng-star-inserted {
    border-right: 1px solid #dbdbdb;
    border-left: 1px solid #dbdbdb;
    padding: 8px;
    width: 100%;
}
#doc-layout-login .forgot-password {
    width: 100%;
    padding: 8px;
    margin-top: 0px !important ;
    border-left: 1px solid #dbdbdb;
    border-right: 1px solid #dbdbdb;
    border-bottom: 1px solid #dbdbdb;
}
#doc-layout-login  .sso-buttons {
    order: -1 !important;
    margin: 50px 0px;
}