/* Patternfly CSS places a "bg-login.jpg" as the background on this ".login-pf" class.
   This clashes with the "keycloak-bg.png' background defined on the body below.
   Therefore the Patternfly background must be set to none. */
:root {
    --pf-c-button--m-success--Color: #FFF;
    --pf-c-button--m-success--BackgroundColor: var(--pf-global--palette--green-300);
    --pf-c-button--m-success--hover--Color: var(--pf-c-button--m-success--Color);
    --pf-c-button--m-success--hover--BackgroundColor: var(--pf-global--palette--green-400);
    --pf-c-button--m-success--focus--Color: var(--pf-c-button--m-success--hover--Color);
    --pf-c-button--m-success--focus--BackgroundColor: var(--pf-c-button--m-success--hover--BackgroundColor);
    --pf-c-button--m-success--active--Color: var(--pf-c-button--m-success--hover--Color);
    --pf-c-button--m-success--active--BackgroundColor: var(--pf-c-button--m-success--hover--BackgroundColor);
}

.login-pf {
    background: none;
    overflow-x: hidden;
}

.login-pf-page {
    padding: 30px 0px;
}

.login-pf body {
    background: #EEE;
    background-size: cover;
    height: 100%;
}

#kc-header {
    color: #555;
}

#kc-header-wrapper {
    padding: 0;
    margin-top: 20px;
    text-align: center;
}

h1#kc-page-title {
    margin-top: 25px;
}

.login-pf-page .login-pf-header h1 {
    font-size: 23px;
}

.card-pf {
    border:none;
}

.pf-c-button.pf-m-success.pf-m-display-lg {
    --pf-c-button--PaddingTop: var(--pf-c-button--m-display-lg--PaddingTop);
    --pf-c-button--PaddingRight: var(--pf-c-button--m-display-lg--PaddingRight);
    --pf-c-button--PaddingBottom: var(--pf-c-button--m-display-lg--PaddingBottom);
    --pf-c-button--PaddingLeft: var(--pf-c-button--m-display-lg--PaddingLeft);
    --pf-c-button--FontWeight: var(--pf-c-button--m-display-lg--FontWeight);
}
.pf-c-button.pf-m-success {
    color: var(--pf-c-button--m-success--Color);
    background-color: var(--pf-c-button--m-success--BackgroundColor);
    text-decoration: none;
}
.pf-c-button.pf-m-success:hover {
    --pf-c-button--m-success--Color: var(--pf-c-button--m-success--hover--Color);
    --pf-c-button--m-success--BackgroundColor: var(--pf-c-button--m-success--hover--BackgroundColor);
    color: var(--pf-c-button--m-success--Color);
}
.pf-c-button.pf-m-success:focus {
    --pf-c-button--m-success--Color: var(--pf-c-button--m-success--focus--Color);
    --pf-c-button--m-success--BackgroundColor: var(--pf-c-button--m-success--focus--BackgroundColor);
    color: var(--pf-c-button--m-success--Color);
}
.pf-c-button.pf-m-success:active, .pf-c-button.pf-m-success.pf-m-active {
    --pf-c-button--m-success--Color: var(--pf-c-button--m-success--active--Color);
    --pf-c-button--m-success--BackgroundColor: var(--pf-c-button--m-success--active--BackgroundColor);
    color: var(--pf-c-button--m-success--Color);
}

@media (max-width: 767px) {
    #kc-header-wrapper {
        font-size: 30px;
        font-weight: 500;
	color: var(--pf-global--primary-color--100);
    }
    
    #kc-info {
        margin: 0;
    }
}