.main-form {
    margin: 0 auto;
    width: 100%;
    justify-content: flex-start;
    display: flex;
    position: relative;
    flex-direction: row;
}


.content {
    max-width: 744px;
}

.login-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
    font-weight: 400;
}

/* Left-side login switcher (for different layout) */
.login-switch--left {
    margin-bottom: 0;
}

.login-switch--left .login-switch__link {
    color: var(--geni-modra);
    font-weight: 400;
}

.login-switch--left .login-switch__link.active {
    background: rgba(255, 255, 255, 0.2);
    font-weight: 400;
    color: var(--geni-bela);
}

.login-switch--left .login-switch__divider {
    color: var(--geni-modra);
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 400;
    margin-top: 4px;
}

/* Mobile navigation row - Customer|Company left, EN|SL right */
/* TODO: re-enable space-between when DOM|PODJETJA toggle is back */
.login-mobile-nav {
    display: flex;
    flex-direction: row;
    /* justify-content: space-between; */
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    text-transform: uppercase;
}

/* Mobile login toggle */
.login-mobile-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-mobile-toggle__divider {
    color: var(--body-color-text);
}

.login-mobile-toggle__link {
    color: var(--geni-modra);
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    opacity: 0.5;
    transition: opacity .2s ease;
}

.login-mobile-toggle__link.active {
    opacity: 1;
    pointer-events: none;
}

/* Mobile language selector */
.language-selector--mobile {
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: auto;
    line-height: inherit;
}

.welcome-header {
    font-size: 36px;
    line-height: 43.85px;
    color: var(--body-color-text);
    margin-bottom: 24px;
    text-align: center;
}

/* Hide line breaks in welcome header on desktop - show as single line */
.welcome-header br {
    display: none;
}

/* Show line breaks on mobile */
@media (max-width: 900px) {
    .welcome-header br {
        display: inline;
    }
}

.welcome-header-text {
    margin-bottom: 24px;
    text-align: center;
    display: block;
    line-height: 1.5;
}

.input-field--error input.changed {
    border: 1px solid rgba(255, 70, 65, 1) !important;
    background-color: rgba(255, 255, 255, 1) !important;
}

.input-field--error.validation-required input.changed {
    border: 1px solid rgba(255, 70, 65, 1) !important;
    background-color: rgba(242, 245, 245, .5) !important;
}

.input-field--error input:focus,
.input-field--error input:active {
    border: 1px solid rgba(0, 76, 106, .8) !important;
}

.input-field--error .validation-field--required,
.input-field--error .validation-field--invalid,
.input-field--error .validation-field--mismatch,
.input-field--error .validation-field--description {
    font-family: 'proxima-nova', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;

    margin-top: 8px;
    margin-bottom: -4px;
}

.validation-field--required {
    display: none;
    color: var(--geni-opozorilna);
    margin-top: -5px;
}

.validation-field--mismatch {
    display: none;
    color: var(--geni-opozorilna);
    margin-top: -5px;
}

.validation-field--invalid {
    display: none;
    color: var(--geni-opozorilna);
    margin-top: -5px;
}

.validation-field--description {
    display: none;
    color: #5A6066;
    margin-top: -5px;
}

.validation-required .validation-field--required.active {
    display: block;
}

.validation-mismatch .validation-field--mismatch.active {
    display: block;
}

.validation-invalid .validation-field--invalid.active {
    display: block;
}

.validation-description .validation-field--description {
    display: block;
}