* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    font-family: "Inter", "Open Sans", Arial, sans-serif;
    color: #222;
    background: #f6f8fb;
}

.layout.without-nav-sidebar {
    padding: 40px 20px;
}

.page-container {
    max-width: 1100px;
    margin: 0 auto;
}

.topbar {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 12px;
    align-items: center;
}

.topbar-text {
    margin: 0;
    color: #444;
    font-size: 14px
}

.btn-register {
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px
}

.brand-bar {
    text-align: center;
    margin-bottom: 12px
}

.brand-logo {
    height: 34px;
    display: inline-block
}

.login-card {
    width: 53rem;
    min-height: 600px;
    max-width: 100%;
    margin: 0 auto;
    padding: 12px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 .8rem 3rem rgba(0, 0, 0, 0.20)
}

.card-row {
    display: flex;
    gap: 18px;
    align-items: stretch
}

.card-left {
    flex: 0 0 48%;
    height: 580px;
    max-width: 48%;
    position: relative;
    display: flex;
    align-items: stretch;
    overflow: hidden
}

.client-panel {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden
}

.client-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.65);
    pointer-events: none
}

.client-panel-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.client-logo-wrap {
    text-align: center;
    margin-bottom: 14px
}

.client-logo {
    height: 28px;
    max-width: 100%
}

.client-panel-body {
    text-align: center;
    padding: 0 20px
}

.client-headline {
    color: #fff;
    font-size: 23px;
    font-weight: 520;
    margin: 0;
    padding: 12px;
    border-radius: 6px
}

.card-right {
    flex: 0 0 52%;
    max-width: 52%;
    padding: 22px 28px;
    display: flex;
    align-items: center;
    overflow: hidden
}

.heading-block {
    text-align: center;
    margin-bottom: 80px;
    margin-top: 0;
    margin-left: 55px
}

.title {
    font-size: 19px;
    margin: 0 0 6px;
    font-weight: 520
}

.subtitle {
    color: #b0b6bd;
    margin: 0;
    font-size: 14px
}

.form-fields {
    width: 320px;
    margin: 0 auto;
    position: relative;
    left: 30%;
    transform: translate(-25%, -40px);
    box-sizing: border-box;
}

.form-group {
    margin-bottom: 14px;
    position: relative
}

.form-input {
    display: block;
    width: 100%;
    height: 40px;
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid #b1b3b6;
    background: #fff;
    font-size: 14px;
    color: #222;
    outline: none;
    transition: box-shadow .12s ease, border-color .12s ease, background .12s ease
}

.form-input::placeholder {
    color: #a7adb3
}

.form-input:hover .form-input:focus {
    box-shadow: 0 8px 24px rgba(32, 45, 60, 0.04);
    border-color: #bfcbe0
}

.position-relative {
    position: relative
}

.btn-password-toggle {
    position: absolute;
    right: 12px;
    top: 9px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 16px
}

.link-forgot {
    color: #000000;
    text-decoration: none;
    font-size: 15px;
}

.captcha-group {
    margin-top: 18px;
    position: relative
}

.captcha-label {
    display: block;
    font-weight: 500;
    font-size: 14px;
    color: #000000;
    margin-bottom: 4px
}

.captcha-question {
    display: block;
    font-size: 14px;
    color: #000000;
    margin-bottom: 8px;
    font-weight: 300;
    opacity: .95
}

.captcha-tooltip {
    display: none;
    color: #d32f2f;
    position: absolute;
    left: 0;
    top: calc(100% + 3px);
    font-size: 15px
}

.check-row {
    margin-top: 25px;
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 8px
}

.checkbox-text {
    color: #333
}

.form-top {
    width: 100%;
    transition: height .18s ease, padding .18s ease
}

.login-error {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: #fff3f3;
    border: 1px solid #f1c0c0;
    padding: 10px;
    border-radius: 8px
}

.login-error-body {
    flex: 1;
    margin-right: 8px
}

.alert-close {
    background: transparent;
    border: 0;
    font-size: 16px;
    line-height: 1;
    cursor: pointer
}

#password-message {
    position: absolute;
    left: 12px;
    bottom: -20px;
    font-size: 13px;
    color: #1b5e20;
    line-height: 1;
    opacity: 1;
    transition: opacity .18s ease;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

#password-message:empty .form-actions {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.btn-login {
    background: linear-gradient(180deg, #4CAF50, #43A047);
    border: 0;
    color: #fff !important;
    margin-left: 15px;
    width: 101%;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 15px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(67, 160, 71, 0.12);
    transition: background 0.2s ease, opacity 0.2s ease;
}

.btn-login.disabled {
    opacity: .6;
    pointer-events: none
}

.btn-azure {
    background: linear-gradient(180deg, #2F6DB3, #1E56A0);
    border: 0;
    color: #fff;
    margin-left: 15px;
    width: 101%;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 15px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(30, 86, 160, 0.12);
    margin-top: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block
}

@media (max-width:980px) {
    .card-row {
        flex-direction: column
    }

    .card-left,
    .card-right {
        max-width: 100%;
        flex: 1 1 100%
    }

    .client-panel {
        height: 260px;
        border-radius: 10px
    }

    .card-right {
        padding: 18px
    }
}

@media (max-width:520px) {
    .client-headline {
        font-size: 16px
    }

    .login-card {
        padding: 12px
    }
}