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

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

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

.dbsync-page { background: url(/_content/wPoseidon.Component.Engine/img/bg.jpg) no-repeat 100% 0%; background-size: cover; height:100vh; }
.dark-bg .dbsync-page { background: url(/_content/wPoseidon.Component.Engine/img/bg-dark.jpg) no-repeat 100% 0%; }
.login-page { display: flex; flex: 1 0 30%;  height: 100vh; background: url(/_content/wPoseidon.Component.Engine/img/bg.jpg) no-repeat 100% 0%; background-size: cover; flex-direction: row-reverse; justify-content: flex-end; }
.dark-bg .login-page { background: url(/_content/wPoseidon.Component.Engine/img/bg-dark.jpg) no-repeat 100% 0%; }
.logo__icon { width: 350px; vertical-align: middle; }
.logo__square { fill: var(--textStrong); }
.logo__text { font-size: 3rem; margin-top: 1rem; fill: var(--textStrong); }

.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; }
    .login-page__brand .main-logo { width: 350px; fill: var(--textStrong); aspect-ratio: 552/132; }

.copyright { position: relative; flex: 0 0 100px; }
.copyright-logo svg { transform: rotate(-90deg); fill: var(--textStrong); aspect-ratio: 328/85; height: 60px; position: fixed; bottom: 20px; left: 70px; transform-origin: bottom left; }

.login-page a { color: var(--ep-primary); text-decoration: none; }
    .login-page a:hover { color: var(--textDark); 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 { display: flex; flex: 1 0 30%; flex-direction: column; justify-content: center; align-items: center; color: var(--textLight); min-width: 500px; font-family: var(--fontFamily); }
    .login-page__form form { max-width: 400px; overflow: auto; }
    .login-page__form h2 { color: var(--textStrong); margin: 0 0 0 0; font-weight: 400; font-size: 2em; }
    .login-page__form h4 { color: var(--textDefault); margin-bottom: 3rem; font-size: 1.2em; }

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

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

@media (max-width: 889px) {
    .login-page,
    .license-page { flex-direction: column; height: auto; min-height: 100vh; justify-content: center; align-items: center; }

    .login-page__form,
    .license-page__content { min-width: initial; clip-path: initial; background: transparent; padding: 2rem 0; }

    .dark-bg .login-page__form,
    .license-page__content { background: hsl(233deg 100% 10% / 85%); }

    .login-page__form form,
    .license-page__form { /* background: #fff;*/ border-radius: 2rem; padding: 2rem; }

    .copyright-logo svg { position: static; transform: rotate(0); height: 40px; }
    .copyright { display: flex; justify-content: center; align-items: center; }

    .login-page__promo { display: none; }
}

@media (max-width: 1100px) {
    .login-page__form,
    .license-page__content { background: transparent; }

    .dark-bg .login-page__form,
    .dark-bg .license-page__content { background: hsl(233deg 100% 10% / 85%); }


    .logo__icon { width: 250px; }
    .login-page__brand h3,
    .license-page__brand h3 { font-size: 1.5em; }
}