/* Insert <div class="kc-logo-wrapper"><img alt="" src="https://dev.lyra-system.com/images/logos/Logo-Lyra-by-Safyr.svg"></div> at Realm setting => HTML Display name */
:root {
    --color-neutral-50: #ffffff;
    --color-neutral-100: #f0f0f0;
    --color-neutral-200: #c7c7c7;
    --color-neutral-600: #5b5b5b;
    --color-neutral-800: #292929;
    --color-primary-50: #ece9f4;
    --color-primary-700: #331d6e;
    --color-primary-800: #2b185b;
    --color-red-700: #b90e0e;
    --background-weak: var(--color-neutral-50);
    --foreground: var(--color-neutral-800);
    --foreground-weak: var(--color-neutral-600);
    --primary: var(--color-primary-700);
    --primary-hover: var(--color-primary-800);
    --primary-hover-weak: rgba(51, 29, 110, 0.1);
    --primary-foreground: var(--color-neutral-50);
    --border: var(--color-neutral-200);
    --muted: rgba(0, 0, 0, 0.12);
    --muted-foreground: rgba(0, 0, 0, 0.26);
    --ring: rgba(51, 29, 110, 0.5);
    --ring-destructive: rgba(185, 14, 14, 0.5);
    --destructive: var(--color-red-700);
    --radius: 0.25rem;
    --space-0-5: 0.25rem;
    --space-1: 0.5rem;
    --space-1-5: 0.75rem;
    --space-2: 1rem;
    --space-2-5: 1.25rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --focus-ring-width: 2px;
    --focus-ring-offset: 1px;
    --input-bg: var(--background-weak);
    --input-fg: var(--foreground);
    --input-border: var(--border);
    --input-placeholder: var(--foreground-weak);
    --input-ring: var(--ring);
    --input-height: 2.375rem;
    --input-px: var(--space-1);
    --input-py: var(--space-0-5);
    --input-gap: var(--space-0-5);
    --input-font-size: 0.875rem;
    --input-line-height: 1.5rem;
    --input-invalid-border: var(--destructive);
    --input-hover-border: var(--ring);
    --label-fg: var(--primary);
    --label-font-size: 0.7rem;
    --label-font-weight: 500;
    --label-line-height: 1rem;
}

div.kc-logo-wrapper {
    max-width: 500px;
    margin: auto;
    padding: 40px;
    background-color: rgba(241, 241, 241, 0.8);
    border-radius: 5px 5px 0 0;
}

.login-pf body {
    display: flex;
    background-size: cover !important;
    margin: 0;
    min-height: 100%;
    background: url(../img/lyra-bg.jpg) no-repeat center center fixed;
}

.login-pf-page {
    flex: 1;
    padding-top: 0;
    margin: auto;
}

#kc-form,
#kc-form-login {
    display: grid;
    gap: var(--space-2);
}

#kc-content-wrapper form .form-group {
    display: grid;
    gap: var(--input-gap);
    margin-bottom: 0;
    padding-inline: var(--space-3);
}

#kc-content-wrapper form .form-group:has(input[type="hidden"]) {
    display: block;
}

#kc-content-wrapper label,
#kc-content-wrapper .pf-c-form__label,
#kc-content-wrapper .control-label {
    display: inline-flex;
    align-items: center;
    min-height: var(--label-line-height);
    margin: 0;
    color: var(--label-fg);
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    line-height: var(--label-line-height);
}

#kc-content-wrapper input[type="text"],
#kc-content-wrapper input[type="email"],
#kc-content-wrapper input[type="password"],
#kc-content-wrapper input[type="tel"],
#kc-content-wrapper input[type="url"],
#kc-content-wrapper .pf-c-form-control,
#kc-content-wrapper .form-control {
    width: 100%;
    height: var(--input-height);
    min-height: var(--input-height);
    padding: var(--input-py) var(--input-px);
    border: 0;
    border-bottom: 1px solid var(--input-border);
    border-radius: 0;
    box-shadow: none;
    outline: none;
    background-color: var(--input-bg);
    color: var(--input-fg);
    font-size: var(--input-font-size);
    line-height: var(--input-line-height);
    transition:
        border-color 200ms ease,
        box-shadow 200ms ease,
        background-color 200ms ease;
}

#kc-content-wrapper .pf-c-input-group,
#kc-content-wrapper .input-group {
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid var(--input-border);
    background-color: var(--input-bg);
    transition:
        border-color 200ms ease,
        box-shadow 200ms ease,
        background-color 200ms ease;
}

#kc-content-wrapper .pf-c-input-group:hover,
#kc-content-wrapper .input-group:hover {
    border-color: var(--input-hover-border);
}

#kc-content-wrapper .pf-c-input-group:focus-within,
#kc-content-wrapper .input-group:focus-within {
    border-color: var(--input-hover-border);
    outline: var(--focus-ring-width) solid var(--input-ring);
    outline-offset: var(--focus-ring-offset);
}

#kc-content-wrapper .pf-c-input-group input[type="password"],
#kc-content-wrapper .pf-c-input-group input[type="text"],
#kc-content-wrapper .input-group input[type="password"],
#kc-content-wrapper .input-group input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    border-bottom: 0;
}

#kc-content-wrapper .pf-c-input-group input:focus,
#kc-content-wrapper .input-group input:focus {
    outline: none;
}

#kc-content-wrapper .pf-c-input-group .pf-c-button,
#kc-content-wrapper .input-group .pf-c-button,
#kc-content-wrapper button[data-password-toggle],
#kc-content-wrapper button[aria-controls="password"] {
    display: inline-flex;
    flex: 0 0 var(--input-height);
    align-items: center;
    justify-content: center;
    width: var(--input-height);
    min-width: var(--input-height);
    height: var(--input-height);
    min-height: var(--input-height);
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: var(--input-bg);
    color: var(--primary);
    cursor: pointer;
}

#kc-content-wrapper .pf-c-input-group .pf-c-button:hover,
#kc-content-wrapper .input-group .pf-c-button:hover,
#kc-content-wrapper button[data-password-toggle]:hover,
#kc-content-wrapper button[aria-controls="password"]:hover {
    background-color: var(--primary-hover-weak);
    color: var(--primary);
}

#kc-content-wrapper .pf-c-input-group .pf-c-button:focus-visible,
#kc-content-wrapper .input-group .pf-c-button:focus-visible,
#kc-content-wrapper button[data-password-toggle]:focus-visible,
#kc-content-wrapper button[aria-controls="password"]:focus-visible {
    outline: var(--focus-ring-width) solid var(--ring);
    outline-offset: var(--focus-ring-offset);
}

#kc-content-wrapper input[type="text"]::placeholder,
#kc-content-wrapper input[type="email"]::placeholder,
#kc-content-wrapper input[type="password"]::placeholder,
#kc-content-wrapper input[type="tel"]::placeholder,
#kc-content-wrapper input[type="url"]::placeholder,
#kc-content-wrapper .pf-c-form-control::placeholder,
#kc-content-wrapper .form-control::placeholder {
    color: var(--input-placeholder);
}

#kc-content-wrapper input[type="text"]:hover,
#kc-content-wrapper input[type="email"]:hover,
#kc-content-wrapper input[type="password"]:hover,
#kc-content-wrapper input[type="tel"]:hover,
#kc-content-wrapper input[type="url"]:hover,
#kc-content-wrapper .pf-c-form-control:hover,
#kc-content-wrapper .form-control:hover {
    border-color: var(--input-hover-border);
}

#kc-content-wrapper input[type="text"]:focus,
#kc-content-wrapper input[type="email"]:focus,
#kc-content-wrapper input[type="password"]:focus,
#kc-content-wrapper input[type="tel"]:focus,
#kc-content-wrapper input[type="url"]:focus,
#kc-content-wrapper .pf-c-form-control:focus,
#kc-content-wrapper .form-control:focus {
    border-color: var(--input-hover-border);
    outline: var(--focus-ring-width) solid var(--input-ring);
    outline-offset: var(--focus-ring-offset);
    box-shadow: none;
}

#kc-content-wrapper .pf-m-error,
#kc-content-wrapper .has-error input[type="text"],
#kc-content-wrapper .has-error input[type="email"],
#kc-content-wrapper .has-error input[type="password"],
#kc-content-wrapper input[aria-invalid="true"] {
    border-color: var(--input-invalid-border);
}

#kc-form-buttons,
#kc-social-providers,
.kc-social-links {
    display: grid;
    gap: var(--space-1);
    padding-inline: var(--space-3) !important;
}

#kc-form-buttons input[type="submit"],
#kc-form-buttons button,
#kc-social-providers a,
.kc-social-links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.75rem;
    padding: var(--space-1) var(--space-2);
    gap: var(--space-1);
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    box-shadow: none;
    appearance: none;
    background-color: var(--primary);
    color: var(--primary-foreground);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    text-align: center;
    text-transform: uppercase;
    white-space: normal;
    transition:
        background-color 200ms ease,
        color 200ms ease,
        border-color 200ms ease;
}

#kc-form-buttons input[type="submit"]:hover,
#kc-form-buttons button:hover {
    border-color: var(--primary-hover);
    background-color: var(--primary-hover);
    color: var(--primary-foreground);
}

#kc-form-buttons input[type="submit"]:focus-visible,
#kc-form-buttons button:focus-visible,
#kc-social-providers a:focus-visible,
.kc-social-links a:focus-visible {
    outline: var(--focus-ring-width) solid var(--ring);
    outline-offset: var(--focus-ring-offset);
}

#kc-form-buttons input[type="submit"]:disabled,
#kc-form-buttons button:disabled {
    border-color: var(--muted);
    background-color: var(--muted);
    color: var(--muted-foreground);
    cursor: not-allowed;
}

#kc-social-providers a,
.kc-social-links a {
    width: fit-content;
    min-width: 16.5rem;
    min-height: 2.5rem;
    margin-inline: auto;
    padding: 0.5rem 0.875rem;
    border-color: #8c8c8c;
    border-radius: 2px;
    background-color: #2f2f2f;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
}

#kc-social-providers a::before,
.kc-social-links a::before {
    content: "";
    display: inline-grid;
    flex: 0 0 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.75rem;
    background:
        linear-gradient(#f25022, #f25022) left top / 0.6875rem 0.6875rem no-repeat,
        linear-gradient(#7fba00, #7fba00) right top / 0.6875rem 0.6875rem no-repeat,
        linear-gradient(#00a4ef, #00a4ef) left bottom / 0.6875rem 0.6875rem no-repeat,
        linear-gradient(#ffb900, #ffb900) right bottom / 0.6875rem 0.6875rem no-repeat;
}

#kc-social-providers a:hover,
.kc-social-links a:hover {
    border-color: #707070;
    background-color: #1f1f1f;
    color: #ffffff;
    text-decoration: none;
}

@media (max-width: 767px) {
    div.kc-logo-wrapper {
        max-width: none;
        text-align: center;
    }

    .login-pf-page {
        padding: 0 !important;
        margin: unset !important;

        display: flex;
        flex-direction: column;
        height: calc(100% - 70px);
    }

    .card-pf {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #kc-header {
        padding-inline: 0;
    }
    
    #kc-content-wrapper form.form-horizontal .form-group {
        margin-inline: 0 !important;
        padding-inline: 0 !important;
    }
}

.login-pf-page .login-pf-page-header {
    margin-bottom: 0 !important;
}

#kc-header-wrapper {
    padding: 0 !important;
}

.card-pf {
    border-top: none;
    padding: 0 !important;
}

#kc-info {
    margin: 0;
}