@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(../fonts/MaterialIcons-Regular.woff2) format('woff2'),
    url(../fonts/MaterialIcons-Regular.woff) format('woff'),
    url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
}

@keyframes animate-in-fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* ################################################################################################################# */
/* ## Element type specific selectors ############################################################################## */
/* ################################################################################################################# */

h2 {
    background-color: #f2f2f2;
    font-size: 14px;
    font-weight: bold;
    line-height: 16px;
    margin-bottom: 16px;
    margin-top: 0px;
    padding: 8px;
}

hr {
    border-top: 1px solid #e0e0e0;
    margin: 24px 0px;
}


/* ################################################################################################################# */
/* ## Utility selectors ################################################################################################# */
/* ################################################################################################################# */

.alert {
    background-color: #0063bb;
    border: 3px solid #0063bb;
    font-size: 14px;
    margin-bottom: 16px;
    padding: 0px;
    display: flex;
    align-items: center;
}

.alert > .fa {
    font-size: 22px;
    left: 13px;
    top: 13px;
}

.alert-error {
    background-color: #e32119;
    border: 3px solid #e32119;
}

.alert-message-wrapper {
    background-color: white;
    padding: 16px;
    width: 100%;
}

.pf-c-alert__icon {
    padding: 14px;
}

.alert-success {
    background-color: #86ba17;
    border: 3px solid #86ba17;
}

.alert-warning {
    background-color: #fabb00;
    border: 3px solid #fabb00;
}

.material-icons,
[class^="fa-"],
[class*=" fa-"] {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

.material-icons-not-ok:before {
    color: #e32119;
    content: "\e5c9";
}

.material-icons-ok:before {
    color: #417505;
    content: "\e86c";
}

.material-icons-refresh:before {
    content: "\e5d5";
}

.fa-exclamation-circle:before {
    color: white;
    content: "\e000";
}

.fa-info-circle:before {
    color: white;
    content: "\e88e";
}

.fa-check-circle:before {
    color: white;
    content: "\e86c";
}

.fa-exclamation-triangle:before {
    color: white;
    content: "\e002";
    font-size: 22px;
}

.pf-c-button {
    font-family: inherit;   /* Default in PF4: var(--pf-global--FontFamily--sans-serif) */
    box-shadow: none;
    font-size: 14px;
    font-weight: bold;
    line-height: 16px;
    padding: 10px 16px 9px 16px;
}

.btn-default {
    background: #f2f2f2;
    border-style: none;
    color: #212121;
}

.btn-default:active,
.btn-default:active:focus,
.btn-default:active:hover,
.btn-default:focus {
    background-color: #d8d8d8;
    color: #212121;
}

.btn-default:hover {
    background-color: #e5e5e5;
    color: #212121;
}

.pf-c-button.pf-m-primary {
    border-style: none;
}

.checkbox {
    font-size: 14px;
    line-height: 16px;
    margin-bottom: 0px;
}

.pf-c-form__label.pf-c-form__label-text,
.form-horizontal .pf-c-form__label.pf-c-form__label-text {
    color: black;
    font-size: 14px;
    font-weight: bold;
    line-height: 16px;
    margin-bottom: 6px;
    padding-top: 0px;
}

/* consists fx. of label and input field on form */
.form-group {
    margin-bottom: 16px;
}

.form-horizontal .form-group {
    margin: 0px 0px 16px;
}

input[type="submit"].pf-m-block,
input[type="reset"].pf-m-block,
input[type="button"].pf-m-block {
    width: auto;
}

.checkbox input[type="checkbox"] {
    margin-bottom: 0px;
    margin-top: 2px;
}

.checkbox label {
    min-height: 0px;
}

.form-horizontal .form-group div {
    padding: 0px;
}


/* ################################################################################################################# */
/* ## Template selectors ########################################################################################### */
/* ################################################################################################################# */
/** Most of the ftl are driven by template.ftl, which embeds "header", "form" and "info" sections from other templates **/

.align-left {
    float: left;
}

.align-right {
    float: right;
}

div.kc-logo-text {
    border-bottom: 1px solid #e0e0e0;
    background-position: 0px 16px;
    width: 956px;
}

/* html */
.login-pf {
    background: revert;
}

/* body->div */
.login-pf-page {
    margin: auto;
    /* Override value from PF3 so it looks like in version 7 */
    padding-top: 0px;
}

#kc-header {
    margin: 0px auto 24px auto;
    width: 956px;
}

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

#welcome-header {
    color: black;
    font-size: 27px;
    font-weight: normal;
    letter-spacing: 0px;
    line-height: 37px;
    margin: 24px 0px 0px;
    text-transform: none;
}

/* PatternFly 3 card */
.card-pf {
    border-color: transparent;
    box-shadow: none;
    border-top: 0px;
}

/* A card that contains form and support sections, both having separate header */
.login-pf-page .card-pf {
    width: 470px;
    padding: 0;
    margin-bottom: 8px;
}

/* Applies to form and support section headers */
.login-pf-page .login-pf-header {
    margin-bottom: 16px;
}

.login-pf-page .login-pf-header h1{
    font-size: 22px;
    font-weight: normal;
    line-height: 30px;
    margin: 0px;
    text-align: left;
}

.login-pf-page .login-pf-header:not(#support-header) {
    flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-basis: 100%;
    justify-content: space-between;
}

/* Container of "header" section - each FTL file importing template.ftl implements it, and it is shown on top of the corresponding form */
h1#kc-page-title,           /* Override value from Keycloak's login.css so it looks like in version 7 */
.login-pf-header h1 {
    width: 310px;
    margin-top: 0px;
}

#kc-content-wrapper {
    /* Override value from Keycloak's login.css so it looks like in version 7 */
    margin-top: 0px;
}

/*
 * Locale selector
 */

 #kc-locale {
    margin-left: 8px;
}

#kc-locale ul {
    top: 100%;
    border: solid 1px #e0e0e0;
    /*
    -pf-global--spacer--xs: 0.25rem;
    --pf-c-dropdown__menu--Top: calc(100% + var(--pf-global--spacer--xs))
    top: var(--pf-c-dropdown__menu--Top);
    */
}

#kc-locale ul li a {
    padding: 8px;
}

#kc-locale ul li a:hover {
    background-color: #d4edfa;
}

#kc-locale-wrapper a {
    color: black;
    font-size: 14px;
    font-weight: normal;
    line-height: 16px;
    text-align: left;
    width: 150px;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

#kc-locale-wrapper a#kc-current-locale-link {
    border: 1px solid #e0e0e0;
    margin: 0px;
    padding: 9px 0px 8px 8px;
    width: 152px;
    /** KC7 **/
    display: block;
    /*padding: 0 5px;*/
}

#kc-locale-wrapper a#kc-current-locale-link::after {
    content: "\25bc";
    float: right;
    margin: 0px 8px 0px 0px;
}

/* Applied to "info" section, which on login form would show new user registration link (not enabled AFAIK) */
#kc-info {
    margin-bottom: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
}

/*
 * Support section
 */

.support-icon {
    font-family: Material Icons;
    font-size: 16px;
    line-height: 16px;
    padding-right: 8px;
    opacity: 0.54;
    vertical-align: text-top;
}

.support-text {
    font-size: 14px;
    line-height: 21px;
}

span.support-text {
    color: #212121;
}

#support-information div {
    margin-bottom: 16px;
}

/* Applied to optional footer section - shown if there exists message with key "footer" */
/* TODO check if span class "footer" has some styling in old KC */
.footer-wrapper {
    border-top: 1px solid #e0e0e0;
    font-size: 14px;
    line-height: 16px;
    margin: auto;
    padding-top: 24px;
    text-align: center;
    width: 956px;
}

/* ################################################################################################################# */
/* ## Form selectors ################################################################################################## */
/* ################################################################################################################# */
/** Used in form templates **/

.login-pf-settings {
    margin-bottom: 0px;
    width: 470px;
}

.login-pf-settings a {
    font-size: 14px;
    line-height: 16px;
}

/* ## Login form selectors ############################################################################################# */

/* used for input fields on login form */
.login-pf-page .pf-c-form-control {
    display: block;
    border: 1px solid #979797;
    font-size: 14px;
    height: 35px;
    padding: 2px 6px;
}

#split-wrapper {
    animation: animate-in-fade 1000ms;
    -webkit-animation: animate-in-fade 1000ms;
    -moz-animation: animate-in-fade 1000ms;
    display: block;
    margin-left: auto;
    margin-right: auto;
    min-height: 600px;
    overflow: hidden;
    width: 956px;
}

#banner-wrapper {
    margin-bottom: 24px;
    margin-right: 16px;
}

#banner-wrapper span {
    display: none;
}

#kc-form {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: stretch;
    /** enable after IE11 is gone:
    column-gap: 20px; */
}

#kc-form > * {
    -ms-flex: 1 0 50%;
    flex: 1 0 0;
    min-width: 0;
}

/** remove after IE11 is gone */
#kc-form > :not(:only-child):first-child {
    padding-right: 10px;
}

/** remove after IE11 is gone */
#kc-form > :not(:only-child):last-child {
    padding-left: 10px;
}

#kc-form-wrapper {
    /* Override value from Keycloak's login.css so it looks like in version 7 */
    margin-top: 0px;
}

#kc-form-buttons {
    margin-top: 0px;
    margin-bottom: 16px;
}

#kc-form-options {
    margin-bottom: 16px;
}

/*
 *  Social section
 */

 .kc-social-gray {
    color: #000000;
}

/** SSO section title text */
h4.social-text {
    margin: 0;
    position: relative;
    top: 21px;
    display: block;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
    color: #212121;
    background: #f5f5f5;
    text-align: center;
    font-size: 14px;
    line-height: 21px;
}

/* Container for SSO links */
.kc-social-links {
    margin: 0px;
    padding: 0px;
    width: 100%;
    font-weight: normal;
    font-size: 14px;
    text-shadow: none;
    border: 0;
    border-radius: 0;
    white-space: normal;
}

/*
.kc-social-links:before {
    border-right: 0;
    margin-right: 0;
}

.kc-social-links span:before {
    padding: 7px 10px;
    font-size: 14px;
}
*/

.kc-social-item {
    width: 100%;
    margin: 0;
    font: bold 100%/2.1 "Lucida Grande", Tahoma, sans-serif;
    display: block;
    padding: 9px 0;
    box-shadow: none;
    height: 48px;
    font-weight: bold;
    font-size: 14px;
    background: #f5f5f5;
    text-align: center;
    color: #000000;
}

.kc-social-section .kc-social-item:last-of-type {
    margin-bottom: 0;
}

.kc-social-item:hover {
    background: #ededed !important;
}

/* Override value from Keycloak's login.css so it looks like in version 7 */
.kc-social-provider-name {
    position: unset;
    top: unset;
}


/* TODO move */
#kc-login {
    order: 2;
    -webkit-order: 2;
}

#kc-cancel {
    order: 1;
    -webkit-order: 1;
    margin-right: 5px;
}

/* ################################################################################################################# */
/* ## captcha ###################################################################################################### */
/* ################################################################################################################# */
/* Used by login.ftl (when configured so) and login-reset-password.ftl */

#captcha-form-group {
    float: left;
    width: 274px;
    margin-right: 16px;
}

.captcha-image-wrapper {
    margin-bottom: 16px;
    padding: 16px;
    background-color: #f2f2f2;
    float: right;
}

#captcha-image {
    width: 110px;
}

#captcha-refresh-icon {
    font-size: 22px;
    margin-left: 16px;
    vertical-align: middle;
}

/* ################################################################################################################# */
/* ## totp ######################################################################################################### */
/* ################################################################################################################# */

/* ## OTP config form ############################################################################################ */
/* Used by login-config-totp.ftl */

#totp-wrapper {
    background-color: #f2f2f2;
    margin-bottom: 16px;
    padding: 16px;
    padding-bottom: 0px;
}

ol#kc-totp-settings {
    font-size: 14px;
    line-height: 16px;
}

ol#kc-totp-settings p,
ol#kc-totp-settings ul {
    color: #212121;
    margin-bottom: 0px;
    padding-bottom: 16px;
}

#kc-totp-secret-key {
    background-color: unset;
    color: #212121;
    font-size: 14px;
    font-weight: bold;
    padding: unset;
}

#kc-totp-secret-qr-code {
    margin-bottom: 16px;
}

/* ## OTP login form ############################################################################################ */
/* Used by login-otp.ftl */

#kc-otp-login-form #kc-form-options {
    margin-bottom: 0px;
}

#kc-otp-login-form #kc-form-buttons {
    display: flex;
    display: -webkit-flex;
    margin-bottom: 0px;
}

/* ## Update password form ############################################################################################ */
/* Used by login-update-password.ftl */

.password-condition {
    padding-left: 36px;
    text-indent: -18px;
    word-wrap: break-word;
}

.password-condition:first-of-type {
    margin-top: 16px;
}

.password-condition > .material-icons {
    margin-right: 16px;
    vertical-align: text-top;
}

.password-validation {
    background-color: #f2f2f2;
    font-size: 14px;
    line-height: 21px;
    margin-bottom: 16px;
    padding: 16px;
}

#kc-passwd-update-form #kc-form-options,
#kc-passwd-update-form #kc-form-buttons {
    margin-bottom: 0px;
}

/* ## Reset password form ############################################################################################ */
/* Used by login-reset-password.ftl */

#kc-reset-password-form #kc-form-buttons {
    margin-bottom: 0px;
}

/*  Used in co-branding */

#powered-by-wrapper {
    float: right;
}

#powered-by-text {
    position: relative;
    top: -56px;
    font-size: 14px;
    text-transform: lowercase;
    color: #363636;
    letter-spacing: normal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

#powered-by-logo {
    position: relative;
    top: -2px;
    height: 32px;
    padding-left: 16px;
    max-width: none;
}

#welcome-header-text {
    clear: both;
}