.login-pf-page .login-pf-header h1 {
    background: #363F48 !important;
    color: #ffffff;
}

.pf-c-button.pf-m-primary {
    background: #57b8d7 !important;
}

div#kc-registration span a:hover {
    background: #57b8d7;
}

#kc-header {
    background: #222C36;
    color: #ffffff;
}

.app-logo {
    background-image: url(logo.svg);
}

.login-pf-page .login-pf-page-header p::before {
    content: "Making your network work for success.";
    color: #ffffff;
}

.login-main-title::before {
    content: "Login";
}

.login-sub-heading::before {
    content: "Get your network working.";
}

#new-to-app::before {
    content: "New to Helpbuild?";
}

.register-main-title::before {
    content: "Create your account";
}
.register-sub-heading::before {
    content: "Join and get building!";
}

#kc-header-wrapper::before {
    background: #57b8d7 !important;
}

.kc-social-provider-name {
    position: relative;
    top: -21px;
    padding-left: 10px;
    font-size: 18px;
}

#social-linkedin-openid-connect::before {
    content: url('data:image/svg+xml;utf8,<svg height="60px" width="60px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 291.319 291.319" xml:space="preserve"><g><path style="fill:#0E76A8;" d="M145.659,0c80.45,0,145.66,65.219,145.66,145.66s-65.21,145.659-145.66,145.659S0,226.1,0,145.66 S65.21,0,145.659,0z"></path><path style="fill:#FFFFFF;" d="M82.079,200.136h27.275v-90.91H82.079V200.136z M188.338,106.077 c-13.237,0-25.081,4.834-33.483,15.504v-12.654H127.48v91.21h27.375v-49.324c0-10.424,9.55-20.593,21.512-20.593 s14.912,10.169,14.912,20.338v49.57h27.275v-51.6C218.553,112.686,201.584,106.077,188.338,106.077z M95.589,100.141 c7.538,0,13.656-6.118,13.656-13.656S103.127,72.83,95.589,72.83s-13.656,6.118-13.656,13.656S88.051,100.141,95.589,100.141z"></path></g></svg>');
    display: inline-block;
    width: 60px;
    height: 60px;
    vertical-align: middle;
}

.kc-social-provider-name {
    visibility: hidden;
    position: relative;
}

.kc-social-provider-name::after {
    content: 'Sign in with LinkedIn';
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
}