/* ==========================================================================
   EBF Onboarder custom styles all rights reserved
   ========================================================================== */


/* Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary{
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

body, html {
    overflow: auto;
    width: 100%;
    height: 100%;
}

/* The centered full-height layout (body{width:100%;height:100%} + main{display:table})
   produces a stray horizontal scrollbar. Clip the x-axis on the centered-form
   pages (matched via the .container-align vertical-align helper); vertical
   scrolling stays intact. */
body:has(.container-align) {
    overflow-x: hidden;
}

body {
    margin: 0;
    min-height: 100%;
    font-size: 16px;
    font-family: 'Source Sans Pro', sans-serif;
    color: #2b3e51;
    background-color: #ffffff;
    /*
    background-color: #eff3f6;
    */
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    font-style: normal;
    font-weight: normal; 
    font-variant: normal;
    text-transform: none;
}

.form-control:focus {
    border-color: #1271C5;
}

main {
    width: 100%;
    height: 100%;
    display: table;
    position: relative;
    /*
    background: transparent url("../img/clouds.png") 0 0 no-repeat;
    */
}

.text-align-center {
    text-align: center;
}

/* -------------------------------- 

Intro

-------------------------------- */

.intro-image {
    text-align: center;
}

.intro-image img {
    width: auto;
    height: 60px;
}

/* Intro splash carries the "EBF | Onboarder" lockup (.migrator-logo a); ebf-header.css
   pins it to header size (24px mark / 18px wordmark), so enlarge it here for a proper
   splash. !important to beat the header rule's !important on the img height. */
.intro-image .migrator-logo {
    display: inline-flex;
}
.intro-image .migrator-logo a {
    gap: 22px;
}
.intro-image .migrator-logo a img {
    height: 60px !important;
}
.intro-image .migrator-logo a::after {
    font-size: 44px;
    padding-left: 22px;
}

/* -------------------------------- 

Form

-------------------------------- */

input::-webkit-input-placeholder {
    color: #bdbdbd !important;
}

input:-moz-placeholder { /* Firefox 18- */
    color: #bdbdbd !important;  
}

input::-moz-placeholder {  /* Firefox 19+ */
    color: #bdbdbd !important; 
}

input:-ms-input-placeholder {  
    color: #bdbdbd !important;  
}

.tooltip {
    font-size: 11px;
}

.display-none {
    display: none;
}

.display-visible {
    display: visible;
}

.container-align {
    display: table-cell;
    vertical-align: middle;
    position: relative;
    z-index: 1000000;
}

.migrator-form div:not(.chosen-container) {
    padding: 10px 0;
}

.migrator-form legend {
    margin-bottom: 0px;
    font-size: 18px;
}

.migrator-form legend img {
    width: 25px;
    margin-right: 5px;
    padding-bottom: 3px;
}

.pdf-icon {
    background:url(../img/pdf-blue.svg) center left no-repeat;
    white-space: nowrap;
}

.pdf-icon:after {
    content: "Documentation Instructions";
    margin-left: 20px;
}

.pdf-icon:hover {
    background:url(../img/pdf-blue.svg) center left no-repeat;
    white-space: nowrap;
}

.pdf2-icon {
    background:url(../img/pdf-blue.svg) center left no-repeat;
    white-space: nowrap;
}

.pdf2-icon:after {
    content: "PDF Flyer";
    margin-left: 20px;
}

.pdf2-icon:hover {
    background:url(../img/pdf-blue.svg) center left no-repeat;
    white-space: nowrap;
}

.play-icon {
    background:url(../img/play-blue.svg) center left no-repeat;
    white-space: nowrap;
}

.play-icon:after {
    content: "Video Demonstration";
    margin-left: 20px;
}

.play-icon:hover {
    background:url(../img/play-blue.svg) center left no-repeat;
    white-space: nowrap;
}

.register-help {
    position: absolute;
    width: 100%;
    bottom: 60px;
}

.register-help p, a {
    color: #1271C5;
    font-size: 13px;
}

.register-help a:first-child {
    padding-right: 20px;
}

.register-help a:hover {
    color: #1271C5;
    text-decoration: none;
}

.migrator-form legend a:first-child {
    padding-right: 20px;
}

.migrator-form legend a:hover {
    color: var(--ebf-blue-400, #418DD1);
    text-decoration: none;
}

.migrator-form input, select {
    border: 1px solid var(--border-default, #D5D7D9);
    height: 45px !important;
    font-size: 14px !important;
    color: #2b3e51;
    border-radius: 8px;
}

.migrator-form .migrator-select {
    position: relative;
}

.migrator-form .migrator-select::after {
    content: '';
    position: absolute;
    z-index: 100000000;
    right: 16px;
    top: 50%;
    margin-top: -8px;
    display: block;
    width: 16px;
    height: 16px;
    background: url("../img/arrow-down.svg") no-repeat center center;
    pointer-events: none;
}

.migrator-form select {
    cursor: pointer;
}

.migrator-form select::-ms-expand {
    display: none;
}

.migrator-form input::-webkit-input-placeholder {
    transition: color .35s ease !important;
}

.migrator-form input:focus::-webkit-input-placeholder {
    color: transparent !important;
}

.migrator-form input::-moz-placeholder {
    transition: color 0.35s ease !important;
}

.migrator-form input:focus::-moz-placeholder {
    color: transparent !important;
}

.migrator-form .validation-message {
    color: var(--ebf-red-500, #FA7E75);
    position: absolute;
    display: none;
    right: 15px;
    font-size: 12px;
    padding-top: 3px;
}

.migrator-footer-login a:first-child {
    float: left;
}

.migrator-footer-login a:last-child {
    float: right;
}

.migrator-footer-login a {
    color: #354052;
    font-weight: 400;
    text-align: center;
    font-size: 13px;
}

.migrator-footer-login a span {
    color: #1271C5;
}

/* Dark mode: the muted link text (#354052) and the blue accent (#1271C5) are both too dark
   on the dark canvas — lighten to the secondary-text tone and the lighter link blue. */
[data-theme="dark"] .migrator-footer-login a {
    color: var(--fg-2);
}
[data-theme="dark"] .migrator-footer-login a span {
    color: var(--fg-link);
}

.register-spacer {
    padding: 5px 0;
}

.registration-message {
    text-align: center;
    font-size: 14px;
    line-height: 18px;
}

.registration-message h1 {
    font-size: 21px;
    line-height: 32px;
    margin-bottom: 0;
}

#tenantsList{
    /*max-height: 350px;
    overflow: auto;*/
}

/* -------------------------------- 

Input Icons

-------------------------------- */

.migrator-form .icon {
    position: relative;
}

.migrator-form .icon input, .migrator-form .icon select {
    padding-left: 45px !important;
    border-radius: 8px;
}

/* go/ireg captcha: frame the reCAPTCHA like a field so it lines up with the
   inputs instead of floating as a bare, narrower box (minor alignment tweak —
   scoped to .captchadiv, which only these pages use). Token + fallback so it
   works whether or not the design-token sheet is loaded. */
.migrator-form .captchadiv .g-recaptcha {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: var(--bg-page, #ffffff);
    border: 1px solid var(--border-default, #D5D7D9);
    border-radius: 8px;
    padding: 4px 4px 2px 4px;
}

/* go/ireg action button ("Next"/"Find"): match the redesigned button radius
   (was a full 999px pill) — minor shape tweak, scoped to these pages' buttons. */
.migrator-form .getpin .button-hover,
.migrator-form .getlink .button-hover {
    border-radius: 9px;
}

/* go/ireg local (image) captcha: give the code-image box its own bottom border
   and a gap to the security-code input, so it reads as two boxes with the same
   spacing as the forgot-password captcha (legacy merged them: bottom border
   removed + margin-bottom:-4px). Scoped to .captchadiv (go/ireg only). */
.migrator-form .captchadiv .captcha > div.form-control {
    border-bottom: 1px solid var(--border-default, #D5D7D9);
    margin-bottom: 6px;
}

.migrator-form .user {
    background: #fff url("../img/user.svg") no-repeat 16px center;
}

.migrator-form .mail {
    background: #fff url("../img/mail.svg") no-repeat 16px center;
}

.migrator-form .password {
    background: #fff url("../img/lock.svg") no-repeat 16px center;
}

/* Dark mode: the field icons above use a fixed mid-grey stroke that reads too dark on the
   dark field surface. Swap to the light-stroke variants (same as the app's .migration-form
   handling in dashboard.css). The dark `[data-theme="dark"] .form-control { background }`
   shorthand resets repeat/position, so re-assert them here. */
[data-theme="dark"] .migrator-form .user,
[data-theme="dark"] .migrator-form .mail,
[data-theme="dark"] .migrator-form .password {
    background-repeat: no-repeat;
    background-position: 16px center;
}
[data-theme="dark"] .migrator-form .user     { background-image: url("../img/user-dark.svg"); }
[data-theme="dark"] .migrator-form .mail     { background-image: url("../img/mail-dark.svg"); }
[data-theme="dark"] .migrator-form .password { background-image: url("../img/lock-dark.svg"); }

#keyPassButton {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    line-height: 0;
    z-index: 10;
}

#keyPassButton img {
    width: 22px;
    height: 22px;
    opacity: 0.55;
    transition: opacity 0.15s;
}

#keyPassButton:hover img {
    opacity: 1;
}

.migrator-form .company {
    background: url("../img/company.svg") no-repeat 16px center;
}

.migrator-form .country {
    background: url("../img/country.svg") no-repeat 16px center;
}

.migrator-form .devices {
    background: url("../img/devices.svg") no-repeat 16px center;
}

.migrator-form .phone {
    background: url("../img/phone.svg") no-repeat 16px center;
}

/* -------------------------------- 

Modal Style

-------------------------------- */

.modal-header {
    position: relative;   /* anchor for the absolute close (×) button */
    padding: 25px 15px 25px 15px;
    border-bottom: none;
    text-align: center;
    background: rgba(255,255,255,1);
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,243,247,1) 96%, rgba(241,243,247,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(96%, rgba(241,243,247,1)), color-stop(100%, rgba(241,243,247,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,243,247,1) 96%, rgba(241,243,247,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,243,247,1) 96%, rgba(241,243,247,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,243,247,1) 96%, rgba(241,243,247,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(241,243,247,1) 96%, rgba(241,243,247,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f3f7', GradientType=0 );
}

.modal-header p {
    line-height: 18px;
}

.modal-content {
    border-radius: var(--radius-card, 12px);
    border: none;
    box-shadow: 0 15px 20px rgba(0,0,0,0.2);
}
/* Round the header/footer corners too — otherwise their (gradient) backgrounds poke
   square corners over the rounded content. Mirrors ebf-header.css for pages that
   don't load it (e.g. selectTenant.html). */
.modal-content .modal-header {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.modal-content .modal-footer {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.modal-title {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

.modal-title img {
    vertical-align: middle;
    padding-right: 5px;
    padding-bottom: 2px;
}

/* Close (×) button: borderless, top-right. Bootstrap 5 leaves the legacy .close
   class unstyled, so it rendered as a bordered default button on the left. */
.modal-header .close {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    color: var(--fg-1, #1f2838);
    opacity: 0.5;
    cursor: pointer;
}
.modal-header .close:hover {
    opacity: 0.85;
}

.modal-body {
    line-height: 21px;
}

.modal-body h1 {
    font-size: 14px;
    line-height: 21px;
    font-weight: 600;
    padding: 10px 0;
}

/* -------------------------------- 

Custom Animations

-------------------------------- */

.button,
[class*="button-"] {
    position: relative;
    display: inline-block;
    text-align: center;
    overflow: hidden;
    width: 100%;
    margin-top: 2px;
    padding: 0 40px;
    height: 45px;
    /* Use the EBF design-system body face (Inter, --font-body) so the button
       label matches the ebf.com "Jetzt kontaktieren" button. Source Sans Pro is
       the fallback for pages that don't link colors_and_type.css. */
    font: 600 16px/44px var(--font-body, 'Source Sans Pro', sans-serif);
    text-decoration: none;
    color: #fff;
    /* EBF design-system tokens (colors_and_type.css). The hex fallbacks keep the
       button correct on pages that don't link the token file. Single source of
       truth: --ebf-blue-500 (#1271C5) at rest, --ebf-green-500 on hover below. */
    background: var(--ebf-blue-500, #1271C5);
    border: 1px solid var(--ebf-blue-500, #1271C5);
    border-radius: 999px;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.button:hover,.button:focus,
[class*="button-"]:hover, [class*="button-"]:focus {
    background: var(--ebf-green-500, #2DCE9B);
    border-color: var(--ebf-green-500, #2DCE9B);
    text-decoration: none;
    color: #ffffff;
}
.button[disabled], .button-hover[disabled]{
    background-color: #c2c2c2;
}
.button-hover[disabled]:hover, .button-hover[disabled]:focus, .button[disabled]:focus{
    background-color: #a2a2a2;
}


/* -------------------------------- 

Fake loader 

-------------------------------- */

.migrator-loader {
    display: inline-block;
    font-size: 4rem;
    /* Change this to resize the loader */
    -webkit-animation: 2s rotate infinite linear;
    animation: 2s rotate infinite linear;
    width: 1em;
    height: 1em;
}

.migrator-loader circle {
    fill: transparent;
    stroke: #2A8FBD;
    stroke-width: 0.02em;
    stroke-linecap: round;
    stroke-dasharray: 2.3525em 0.4705em;
    -webkit-animation: 1.5s strokeDashArray infinite linear, 24s colorBounce infinite linear;
    animation: 1.5s strokeDashArray infinite linear, 24s colorBounce infinite linear;
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes strokeDashArray {
    from {
        stroke-dasharray: 2.3525em 0.4705em;
        stroke-dashoffset: 0;
    }
    10% {
        stroke-dasharray: 2.3525em 0.4705em;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 0.001em 2.825em;
        stroke-dashoffset: -2.826em;
    }
    60% {
        stroke-dasharray: 0.001em 2.825em;
    }
    to {
        stroke-dasharray: 2.3525em 0.4705em;
        stroke-dashoffset: -2.826em;
    }
}
@keyframes strokeDashArray {
    from {
        stroke-dasharray: 2.3525em 0.4705em;
        stroke-dashoffset: 0;
    }
    10% {
        stroke-dasharray: 2.3525em 0.4705em;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 0.001em 2.825em;
        stroke-dashoffset: -2.826em;
    }
    60% {
        stroke-dasharray: 0.001em 2.825em;
    }
    to {
        stroke-dasharray: 2.3525em 0.4705em;
        stroke-dashoffset: -2.826em;
    }
}

.fake-loader-wrap, .reg-loader-wrap {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    position: fixed;
    overflow: hidden;
    z-index: 10000;
}

.fake-loader .inner-fake-loader, .reg-loader .inner-reg-loader{
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-perspective: 100px;
    perspective: 100px;
}


input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(255, 255, 255);
    background-image: none;
    color: rgb(0, 0, 0);
}


/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {

    .register-help {
        bottom: 0;
    }

    .container-mobile-fix {
        padding-left: 0;
        padding-right: 0;
    }

}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767px) {

    .register-help {
        display: none;
    }

}

/* -------------------------------- 

Footer 

-------------------------------- */


.dependsFooter label {
    font-weight: 600;
    font-size: 14px;
    margin-left: 5px;
}

.label-fix {
    margin-top: -10px;
}

/* Sticky footer: the .footer pulls itself up by its own height (margin-top:-60px), so it
   must actually be 60px tall — and the .footer-push reserves the same 60px at the end of
   the content. This rule was only in dashboard.css; without it here the footer fell back
   to content height (~40px) and margin-top:-60px overshot, leaving a gap below the bar. */
.footer, .footer-push {
    height: 60px;
}

.footer {
    z-index: 1000000;
    position: absolute;
    margin-top: -60px;
    width: 100%;
    border-top: 1px solid var(--border-subtle, #E3E4E5);
    text-align: center;
    background: #ffffff;
    text-align: center;
}

.footer ul {
    margin: 0;
    padding: 0;
    padding-top: 20px;
}

.footer ul li {
    display: inline-block;
    padding: 0 15px;
}

.footer ul li a {
    font-size: 14px;
    color: #333c48;
}

.footer ul li a:hover {
    color: #1271C5;
    text-decoration: none;
}

#acceptTerms.form-control, #acceptPrivacy.form-control, #acceptEula.form-control, #isCompany.form-control{
    width: auto!important;
    display: inline;
    height: auto!important;
}

/* --------------------------------------------------------------------------
   Login / forgot-password: a real header bar + vertically-centered form +
   footer pinned to the bottom, all inside one viewport-tall flex column.
   Scoped to pages that have BOTH the header (.navbar) and the centered-form
   helper (.container-align), so the other centered pages (register, password,
   intro) keep their existing layout.

   Fixes three things at once:
     1. the header now reads as a bar (white bg + bottom border, sticky top);
     2. the footer sits at the bottom via normal flow, replacing the fragile
        position:absolute / margin-top:-60px sticky-footer trick;
     3. no stray scrollbar — main{height:100%} + the added navbar used to
        exceed the viewport; main now flexes to fill the remaining height.
   -------------------------------------------------------------------------- */
body:has(.navbar):has(.container-align) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: auto;
}
body:has(.navbar):has(.container-align) main {
    flex: 1 1 auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
body:has(.navbar):has(.container-align) .container-align {
    display: block;
    width: 100%;
}
body:has(.navbar):has(.container-align) .navbar {
    /* --bg-page flips white (light) -> dark (dark mode), so the bar isn't stuck white */
    background: var(--bg-page, #ffffff);
    /* subtle separator (gray-200), not the darker --border-default (gray-300) */
    border-bottom: 1px solid var(--border-subtle, #e3e6e9);
}
/* Header height is set centrally on .navbar in ebf-header.css (59px = 58px bar + 1px
   border). The footer has a 1px border-top, so the same 59px (box-sizing:border-box)
   gives it a matching 58px bar + border — top and bottom bars are identical. */
body:has(.navbar):has(.container-align) .footer {
    height: 59px;
}
body:has(.navbar):has(.container-align) .footer {
    position: static;
    margin-top: 0;
    flex: 0 0 auto;
    /* dark-aware bar background (base .footer hardcodes #fff, which stays white in dark) */
    background: var(--bg-page, #ffffff);
    border-top: 1px solid var(--border-subtle, #e3e6e9);
}
body:has(.navbar):has(.container-align) .footer-push {
    display: none;
}

.termsPopup{
    vertical-align: middle;
    margin-left: 5px;
}

#popupModal .modal-body {
    position: relative;
    padding: 15px;
    height: calc(90vh - 200px)!important;
    overflow: scroll;
}

.chosen-drop{
    z-index: 1000005;
}

.select2-selection{
    background-color: #fff!important;
    border-radius: 8px!important;
    border: 1px solid var(--border-default, #D5D7D9)!important;
    padding: 7px!important;
    height: 45px!important;
}
.select2-selection__arrow{
    display: none!important;
}
.select2-dropdown{
    background-color: #fff!important;
    border-radius: 8px!important;
    border: 1px solid var(--border-default, #D5D7D9)!important;
    z-index: 9999;
}
.select2-container{
    z-index: 99999999;
}

.migrator-form .country ~ .select2 .select2-selection{
    background: url(../img/country.svg) no-repeat 16px center;
    text-indent: 30px;
}

.migrator-form .devices  ~ .select2 .select2-selection{
    background: url("../img/devices.svg") no-repeat 16px center;
    text-indent: 30px;
}

.migrator-footer-invreg{
    width: 100%;
    position: relative;
    float: left;
    text-align: center;
    padding: 14px 0px 0px 0px;
    margin: 14px 0 0 0;
    line-height: 12px;
    background-color: #ffffff80;
    border-radius: var(--radius-card, 12px);
}

.migrator-footer-invreg a {
    color: #354052;
    font-weight: 400;
    text-align: center;
    font-size: 13px;
    width: 100%;
}
.migrator-footer-invreg a span {
    color: #1271C5;
}

.login-logo {
    background-image: url(../img/ebf-heart.svg);
    background-position: right;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 58px;
}
.login-logo img {
    height: 46px!important;
}

#keyPassButton img {
    width: 26px;
    opacity: 0.7;
}
#keyPassButton {
    position: absolute;
    right: -34px;
}

/* Bootstrap 5 adds an xxl breakpoint (>=1400px) with max-width: 1320px.
   Bootstrap 4 alpha had no xxl, so containers stayed at 1140px at xl.
   Cap the container at 1140px for these form pages to preserve the original field widths. */
@media (min-width: 1400px) {
    .container {
        max-width: 1140px;
    }
}