.theme-debug { display: none !important; }

/* --------------------*/
/* ---- =LOGIN ------ */
/* --------------------*/

.login-page { --textStrong: hsl(220deg, 16%, 18%); }
.login-page.dark-bg { --textStrong: hsl(220deg, 16%, 100%); }

.login-page { display: flex; flex: 1 0 30%; height: 100vh; background: url(/_content/wStandard.Component.Engine/img/bg.jpg) no-repeat 100% 0%; background-size: cover; flex-direction: row-reverse; }
.dark-bg .login-page { background: url(/_content/wStandard.Component.Engine/img/bg-dark.jpg) no-repeat 100% 0%; }
.logo__icon { width: 300px; height: 300px; vertical-align: middle; }
.logo__square { fill: var(--textStrong); }
.logo__letter { fill: var(--ep-primary); fill: transparent; }
.logo__text   { font-size: 3rem; margin-top: 1rem; fill: var(--textStrong); }
.logo__name   { font-size: 3rem;  color: var(--textStrong); font-weight: 300;}

.login-page__brand h3 { font-size: 2em; color: var(--textStrong); font-weight: 300; text-align: center; margin-top: 1rem }

.login-page__brand { margin-bottom: 3rem; }

.copyright { position: relative; flex: 0 0 100px; }
.copyright-logo { transform: rotate(-90deg); width: 400px; height: 45px; position: fixed; bottom: 20px; left: 80px; transform-origin: bottom left; }
    .copyright-logo svg { fill: var(--textStrong); }

.login-page a { color: var(--ep-primary); text-decoration: none; }
    .login-page a:hover { color: var(--textStrong); text-decoration: underline; }

.login-page__promo { flex: 1 1 50%; display: flex; justify-content: center; flex-direction: column; clip-path: ellipse(70% 100% at 30% 65%); align-items: center; }
.login-page__promo-text { color: var(--textLight); text-align: center; }
    .login-page__promo-text h1 { font-weight: 500; }
        .login-page__promo-text h1 strong { font-weight: 700; color: var(--textStrong); }
    .login-page__promo-text h3 { margin: 1rem 0 0 0; color: var(--textStrong); text-transform: uppercase; letter-spacing: .015em; font-weight: 300; }

.login-page__form { flex: 1 0 30%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--textLight); min-width: 500px; font-family: var(--fontFamily); }
    .login-page__form form { margin: 1rem; max-width: 400px; overflow: auto; }
    .login-page__form h2 { color: var(--textStrong); margin: 0 0 0 0; font-weight: 400; }
    .login-page__form h4 { color: var(--textDefault); margin-bottom: 3rem; }

.login-page__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }

.dark-bg .login-page__form { background: hsl(233deg 100% 15% / 65%); }
.clip-mode .login-page__form { clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%); }