body.sso-login-page,
html[data-theme=light] body.sso-login-page {
    color-scheme: light;
    --logo-text: #222;
    --bg-color-body: white;
    --bg-color-login: #f6f7f8;
    --text-color-body: #444444;
    --bs-link-color: #dc3545;
    --bs-link-hover-color: #bb2d3b;
}
html[data-theme=dark] body.sso-login-page {
    color-scheme: dark;
    --logo-text: white;
    --bg-color-body: #001424;
    --bg-color-login: #001c32;
    --text-color-body: white;
    --bs-link-color: #e35d6a;
    --bs-link-hover-color: #dc3545;
    --bs-border-color: #444444;
}
body.sso-login-page {
    --bs-body-font-family: proxima-nova, Arial;
    background-color: var(--bg-color-body);
    color: var(--text-color-body);
}
.sso-login-page .btn {
    --bs-btn-font-family: proxima-nova, Arial;
    --bs-btn-font-weight: 700;
}
.sso-login-page .btn-primary {
    --bs-btn-bg: #dc3545;
    --bs-btn-border-color: #dc3545;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #bb2d3b;
    --bs-btn-hover-border-color: #b02a37;
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b02a37;
    --bs-btn-active-border-color: #a52834;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #dc3545;
    --bs-btn-disabled-border-color: #dc3545;  
}
.sso-login-page .sso-login-page__login {
    width: 500px;
    background-color: var(--bg-color-login);
}
.sso-login-page .sso-login-page__logo > svg {
    max-width: 350px;
}
.sso-login-page .sso-login-page__logo .sso-login-page__logo-text {
    fill: var(--logo-text);
}
.sso-login-page .sso-login-page__login #sso-login-form .form-control,
.sso-login-page .sso-login-page__login #sso-login-form .input-group-text {
    border: 1px solid var(--bs-border-color);
}
.sso-login-page .sso-login-page__login #sso-login-form .form-control:focus {
    box-shadow: 0 0 0 .25rem var(--bs-link-color);
}
.sso-login-page .sso-login-page__login #sso-login-form .input-group {
    transition: filter 200ms ease-in-out;
}
.sso-login-page .sso-login-page__login #sso-login-form .xyz-login {
    padding: 1rem 1rem 0 1rem;
}
.sso-login-page .sso-login-page__login #sso-login-form .xyz-toggle-pw {
    color: #808080;
}
.sso-login-page .sso-login-page__login #sso-login-form input.xyz-password[name=password] {
    border-top-right-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
}
html[data-theme=dark] .sso-login-page .sso-login-page__login #sso-login-form .input-group {
    color: #444444;
}
.sso-login-page .sso-login-page__login #sso-login-form:has(.xyzblock-loading[style="display: block;"]) .input-group,
.sso-login-page .sso-login-page__login #sso-login-form:has(.xyzblock-loading[style="display: block;"]) .form-group input {
    filter: brightness(0.6) contrast(0.5) blur(1px);
    transition: filter 200ms ease-in-out;
}
.sso-login-page .sso-login-page__login #sso-login-form:has(.xyzblock-loading[style="display: block;"]) button.btn-primary[type=submit]::after {
    color: white;
    position: absolute;
    right: 3rem;
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 6 Free";
    content: '\f110';
    opacity: 1;
    animation: sso-login-active-spinner 1000ms linear infinite;    
}
.sso-login-page .sso-login-page__login #sso-login-form .xyzblock-finished .text-center .display-1 {
    display: none;
}
.sso-login-page .sso-login-page__login #sso-login-form .xyzblock-finished .text-center,
.sso-login-page .sso-login-page__login #sso-login-form:empty {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <circle cx="4" cy="12" r="0" fill="%23d81222"> <animate begin="0;spinner_z0Or.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="0;3" fill="freeze"/> <animate begin="spinner_OLMs.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="4;12" fill="freeze"/> <animate begin="spinner_UHR2.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="12;20" fill="freeze"/> <animate id="spinner_lo66" begin="spinner_Aguh.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0" fill="freeze"/> <animate id="spinner_z0Or" begin="spinner_lo66.end" attributeName="cx" dur="0.001s" values="20;4" fill="freeze"/> </circle> <circle cx="4" cy="12" r="3" fill="%23d81222"> <animate begin="0;spinner_z0Or.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="4;12" fill="freeze"/> <animate begin="spinner_OLMs.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="12;20" fill="freeze"/> <animate id="spinner_JsnR" begin="spinner_UHR2.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0" fill="freeze"/> <animate id="spinner_Aguh" begin="spinner_JsnR.end" attributeName="cx" dur="0.001s" values="20;4" fill="freeze"/> <animate begin="spinner_Aguh.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="0;3" fill="freeze"/> </circle> <circle cx="12" cy="12" r="3" fill="%23d81222"> <animate begin="0;spinner_z0Or.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="12;20" fill="freeze"/> <animate id="spinner_hSjk" begin="spinner_OLMs.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0" fill="freeze"/> <animate id="spinner_UHR2" begin="spinner_hSjk.end" attributeName="cx" dur="0.001s" values="20;4" fill="freeze"/> <animate begin="spinner_UHR2.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="0;3" fill="freeze"/> <animate begin="spinner_Aguh.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="4;12" fill="freeze"/> </circle> <circle cx="20" cy="12" r="3" fill="%23d81222"> <animate id="spinner_4v5M" begin="0;spinner_z0Or.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0" fill="freeze"/> <animate id="spinner_OLMs" begin="spinner_4v5M.end" attributeName="cx" dur="0.001s" values="20;4" fill="freeze"/> <animate begin="spinner_OLMs.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="0;3" fill="freeze"/> <animate begin="spinner_UHR2.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="4;12" fill="freeze"/> <animate begin="spinner_Aguh.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="12;20" fill="freeze"/> </circle></svg>');
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background-size: 200px auto;
    height: 100px;
    width: 100%;
}
@keyframes sso-login-active-spinner {
    to {
        transform: rotate(360deg);
    }
}