/* Shared branding layered on top of the default Keycloak.v2 login theme. */

:root {
    --general-login-background: linear-gradient(135deg, #0f1f3a 0%, #1e3a5f 100%);
    --general-login-logo: url("../img/general-logo-white.svg");
    --general-login-logo-width: 180px;
    --general-login-logo-height: 56px;
    --general-login-logo-width-mobile: 140px;
    --general-login-logo-height-mobile: 44px;
}

html,
body,
.login-pf {
    min-height: 100%;
    background: var(--general-login-background) !important;
}

.login-pf-page {
    background: transparent !important;
}

#kc-header {
    margin-bottom: 28px;
}

#kc-header-wrapper {
    width: var(--general-login-logo-width);
    height: var(--general-login-logo-height);
    margin: 0 auto;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    line-height: 0;
    background: var(--general-login-logo) center / contain no-repeat;
}

#social-vipps {
    background-color: #ff5b24;
    color: #ffffff;
    justify-content: center !important;
}

#social-vipps i,
#social-vipps svg {
    display: none !important;
}

#social-azure-ad {
    justify-content: center !important;
}

#social-azure-ad .fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    font-family: inherit !important;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

#social-azure-ad .fa::before {
    content: "";
    display: inline-block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle;
    background:
        linear-gradient(#f25022, #f25022) left top / 7px 7px no-repeat,
        linear-gradient(#7fba00, #7fba00) right top / 7px 7px no-repeat,
        linear-gradient(#00a4ef, #00a4ef) left bottom / 7px 7px no-repeat,
        linear-gradient(#ffb900, #ffb900) right bottom / 7px 7px no-repeat;
}

#social-vipps span {
    display: none !important;
}

#social-vipps::before {
    content: "";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 72px;
    width: 72px;
    height: 20px;
    margin: 0;
    vertical-align: middle;
    background: url("../img/vipps.svg") center / contain no-repeat;
}

@media (max-width: 767px) {
    #kc-header {
        margin-bottom: 20px;
    }

    #kc-header-wrapper {
        width: var(--general-login-logo-width-mobile);
        height: var(--general-login-logo-height-mobile);
    }
}