:root {
    --keycloak-card-top-color: var(--cp-primary);

    --pf-v5-global--FontSize--md: var(--cp-fontsize-p);
    --pf-v5-global--FontSize--sm: var(--cp-fontsize-p);
    --pf-v5-global--Color--100: var(--cp-gray-20);

    --pf-v5-global--BorderColor--100: var(--cp-gray-3);

    --keycloak-logo-url: url(../img/logo.svg);
    --keycloak-logo-height: 57px;
    --keycloak-logo-width: 265px;
    --keycloak-bg-logo-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='719' height='719' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23E7E9EC' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23E7E9EC'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");

    --pf-v5-global--link--Color: var(--cp-gray-20);
    --pf-v5-global--link--Color--hover: var(--cp-primary);
    --pf-v5-global--link--TextDecoration--hover: none;
}

/* Background */

.login-pf body {
    background-size: auto;
    background-repeat: repeat;
}

/* Logo */

.pf-v5-c-brand {
    background-image: var(--keycloak-logo-url);
    height: var(--keycloak-logo-height);
    width: var(--keycloak-logo-width);
    background-repeat: no-repeat;
    background-size: contain;

    font-size: 0 !important;
    line-height: 0 !important;
}

.pf-v5-c-brand * {
    /* hide realm name */
    display: none !important;
}

div.kc-logo-text {
    margin: 0;
}

/* Login container & Form */

@media (min-width: 1200px) {
    .pf-v5-c-login {
        --pf-v5-c-login__header--c-brand--MarginBottom: 20px;
    }
}

.pf-v5-c-login {
    align-items: start;
}

.pf-v5-c-login__main-body {
    --pf-v5-c-login__main-body--PaddingBottom: 1em;
}

.pf-v5-c-form__label-text {
    color: var(--cp-gray-20);
}

.pf-v5-c-form {
    --pf-v5-c-form__label-text--FontWeight: normal;
    --pf-v5-c-form__helper-text--MarginTop: 15px;
}

/* Social Providers */

.pf-v5-l-grid {
    grid-template-columns: repeat(6,[col-start] 1fr);
}

/* Buttons */

.pf-v5-c-button {
    --pf-v5-c-button--m-primary--BackgroundColor: var(--cp-primary);
    --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--cp-primary-hover);
    --pf-v5-c-button--m-primary--active--BackgroundColor: var(--cp-primary-hover);
    --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--cp-primary-hover);
    --pf-v5-c-button--BorderRadius: 30px;
}

.pf-v5-c-button.pf-m-secondary {
    --pf-v5-c-button--m-secondary--BackgroundColor: var(--cp-gray-1);
    --pf-v5-c-button--m-secondary--Color: var(--cp-primary);
    --pf-v5-c-button--m-secondary--hover--BackgroundColor: var(--cp-gray-2);
    --pf-v5-c-button--m-secondary--hover--Color: var(--cp-primary-hover);
    --pf-v5-c-button--m-secondary--active--BackgroundColor: var(--cp-gray-2);
    --pf-v5-c-button--m-secondary--active--Color: var(--cp-primary-hover);
    --pf-v5-c-button--m-secondary--focus--BackgroundColor: var(--cp-gray-2);
    --pf-v5-c-button--m-secondary--focus--Color: var(--cp-primary-hover);

    --pf-v5-c-button--after--BorderRadius: 30px;

    --pf-v5-c-button--m-secondary--after--BorderColor: var(--cp-gray-2);
    --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--cp-gray-3);
    --pf-v5-c-button--m-secondary--active--after--BorderColor: var(--cp-gray-3);
    --pf-v5-c-button--m-secondary--focus--after--BorderColor: var(--cp-gray-3);
}

.pf-v5-c-button.pf-m-secondary svg {
    display: none;
}

/* Link decoration */

#kc-form a::after,
.cp-footer a::after {
    content: "";
    position: relative;
    top: 2px;
    height: 14px;
    width: 28px;
    display: inline-block;
    flex-shrink: 0;
    transition: 0.3s all ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='arrow-right' viewBox='0 0 12 10'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none%3Bstroke:%23b61f7e%3Bstroke-linecap:round%3Bstroke-linejoin:round%3B%7D%3C/style%3E%3C/defs%3E%3Cpolyline class='cls-1' points='6.5 .5 11.5 5 6.5 9.5'/%3E%3Cline class='cls-1' x1='.5' y1='5' x2='11.5' y2='5'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center right;
    background-repeat: no-repeat no-repeat;
}

#kc-form a,
.cp-footer a {
    position: relative;
    display: flex;
    justify-content: center;
}

#kc-form a:hover,
.cp-footer a:hover {
    padding-left: 2px;
    transition: 0.3s all ease;
}

/* Footer */

.cp-footer {
    background: var(--cp-gray-1);
    border-top: 1px solid var(--cp-gray-3);
    padding: 20px 40px;
    margin-top: 20px;
}

.cp-footer > ul {
    margin: 0;
}

a, button {
    transition: 0.3s all ease;
}

/* Other */

#kc-form a:hover::after,
.cp-footer a:hover::after {
    width: 26px;
}

.pf-v5-u-font-size-sm {
    --pf-v5-global--FontSize--sm: var(--cp-fontsize-small);
}