@import url("styles.css");
:root {
    --borders-almost-black: #0C0C11;

    --border-radius: 60px;
    --button-padding: 12px 16px;

    --input-border-radius: 4px;

    --social-login-button-font-size: 16px;
    --social-login-button-height: 32px;
    --social-login-button-margin: 4px;
    --social-login-button-padding: 8px 12px;
    --social-provider-logo-font-size: 16px;
    --social-provider-name-font-size: 12px;
}

/* hide KeyCloak locale picker */
#kc-locale {
    display: none;
}

/* login page */
h3#kc-page-title {
    font-weight: 600;
    margin: 10px 0 0;
}

#kc-social-providers .kc-social-grid {
    --pf-l-grid__item--GridColumnEnd: span 12;
    min-height: 137px;
}

.login-pf .login-pf-page .login-pf-page-header {
    margin-bottom: 30px;
}

.login-pf-page .signin-container {
    width: 360px;
    background-color: white;
    border: 0;
    border-radius: 20px;
    padding: 16px;
    gap: 24px;
    box-shadow: 0px 3.2px 7.2px 0px #0000001A
}

.login-pf-page div.kc-logo-text {
    height: 32px;
    background-position-x: center;
}

.kc-social-links .button {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;

    --button-border-color: var(--borders-almost-black);
    --button-color: var(--borders-almost-black);
    --button-loading-color: var(--borders-almost-black);
    --button-padding: var(--social-login-button-padding);

    font-size: var(--social-login-button-font-size);
    height: var(--social-login-button-height);
    margin: var(--social-login-button-margin);
}

.kc-social-grid .kc-social-icon-text {
    left: 0px;
}

.kc-social-links .kc-social-provider-logo {
    font-size: var(--social-provider-logo-font-size);
    width: 16px;
    height: 16px;
    float: none;
}

.kc-social-links .kc-social-provider-name {
    font-size: var(--social-provider-name-font-size);
}

#kc-header-wrapper {
    padding-top: 30px;
    padding-bottom: 0;
}

#kc-form .form-group {
    margin-bottom: 8px;
}

#kc-form .form-group .input {
    border-radius: var(--input-border-radius);
}

#kc-form #kc-form-wrapper, #kc-form #kc-form-buttons {
    margin-top: 0;
}

#kc-form .form-group.login-pf-settings {
    margin: 10px 0;
    justify-content: left;
}

/*
   Forgot Password? is a hardcoded value buried deep within Keycloak and not exposed by the message bundle. Use
   some CSS sorcery to make it sentence case instead of capitalized case.
 */
#forgot-password-link {
    display: block;
    text-transform: lowercase;
}
#forgot-password-link:first-letter {
    text-transform: uppercase;
}

.social-login-label {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid black;
    border-color: var(--pf-global--Color--400);
    line-height: 0.1em;
    margin: 30px 0;
}

.social-login-label span {
    background: white;
    padding: 0 10px;
}

.kc-content .button {
    font-size: 14px;
}

/* set password page */
h3#kc-page-title.create-login-details {
    margin-bottom: 24px;
}

.button.secondary#skip {
    --button-border-color: var(--borders-almost-black);
    --button-color: var(--borders-almost-black);
}

/* general */
.footer-links a {
    text-decoration: none;
}


/* oversize tablet and desktop */
@media (min-width: 768px) {
    .login-pf .login-pf-header {
        margin-bottom: 24px;
    }

    .login-pf-page .login-pf-page-header {
        margin-bottom: 24px;
    }

    .kc-social-links .button {
        font-size: 14px;
    }
}