html {
    height: 100%
}

.online-grid-description {
    display: block;
    margin-top: 4px;
    color: var(--crm-muted-text, #64748b);
    font-size: 12px;
    font-weight: 600;
}

.online-ticket-edit-page {
    padding: 0;
}

.online-ticket-edit-shell {
    width: 100%;
}

.online-ticket-edit-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.online-ticket-edit-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.online-ticket-edit-head h2 {
    margin: 2px 0 0;
    color: var(--crm-text, #0f172a);
    font-size: 24px;
    font-weight: 800;
}

.online-ticket-back-action {
    flex: 0 0 auto;
}

.online-ticket-stepper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.online-ticket-stepper button {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    border: 1px solid var(--crm-border, #dbe4f0);
    border-radius: 8px;
    background: var(--crm-surface-muted, #f8fafc);
    color: var(--crm-muted-text, #64748b);
    font-weight: 700;
    text-align: left;
}

.online-ticket-stepper button span {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--crm-surface, #fff);
    color: inherit;
}

.online-ticket-stepper button.is-active {
    border-color: var(--crm-primary, #2563eb);
    background: rgba(37, 99, 235, .08);
    color: var(--crm-primary, #2563eb);
}

.online-ticket-step {
    display: none;
}

.online-ticket-step.is-active {
    display: block;
}

.online-native-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.online-native-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
}

.online-native-field-wide {
    grid-column: 1 / -1;
}

.online-native-field label,
.online-native-field > span:first-child {
    margin: 0;
    color: var(--crm-muted-text, #64748b);
    font-size: 12px;
    font-weight: 800;
}

.online-native-input,
.online-native-textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--crm-border, #dbe4f0);
    border-radius: 8px;
    background: var(--crm-surface, #fff);
    color: var(--crm-text, #0f172a);
    font-size: 14px;
}

.online-native-input {
    min-height: 42px;
    padding: 9px 12px;
}

.online-native-textarea {
    min-height: 180px;
    padding: 12px;
    resize: vertical;
}

.online-native-field .k-picker,
.online-native-field .k-dropdown,
.online-native-field .k-widget {
    width: 100% !important;
    min-width: 0 !important;
}

.online-ticket-attachment-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
}

.online-ticket-attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.online-ticket-attachment-list > .online-section-kicker {
    flex-basis: 100%;
}

.online-ticket-attachment-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--crm-border, #dbe4f0);
    border-radius: 8px;
    background: var(--crm-surface-muted, #f8fafc);
}

.online-ticket-attachment-item img {
    width: 74px;
    height: 54px;
    border-radius: 6px;
    object-fit: cover;
}

.online-ticket-upload {
    min-width: 0;
}

.online-ticket-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.online-ticket-confirm-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.online-ticket-confirm-grid > div {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--crm-border, #dbe4f0);
    border-radius: 8px;
    background: var(--crm-surface-muted, #f8fafc);
}

.online-ticket-confirm-grid span {
    display: block;
    margin-bottom: 6px;
    color: var(--crm-muted-text, #64748b);
    font-size: 12px;
    font-weight: 800;
}

.online-ticket-confirm-grid strong {
    display: block;
    overflow-wrap: anywhere;
    color: var(--crm-text, #0f172a);
    font-size: 14px;
    font-weight: 700;
    white-space: pre-wrap;
}

.online-ticket-confirm-message {
    grid-column: 1 / -1;
}

.online-ticket-resolve-field {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 40px;
    margin: 0.85rem 0 0;
    color: var(--crm-text, #0f172a);
    font-weight: 800;
}

.online-ticket-resolve-field input {
    width: 18px;
    height: 18px;
    margin: 0;
}

body.dark-mode .online-grid-description,
body.dark-mode .online-native-field label,
body.dark-mode .online-native-field > span:first-child,
body.dark-mode .online-ticket-confirm-grid span {
    color: rgba(226, 232, 240, .78);
}

body.dark-mode .online-ticket-edit-head h2,
body.dark-mode .online-native-input,
body.dark-mode .online-native-textarea,
body.dark-mode .online-ticket-resolve-field,
body.dark-mode .online-ticket-confirm-grid strong {
    color: #e5e7eb;
}

body.dark-mode .online-native-input,
body.dark-mode .online-native-textarea,
body.dark-mode .online-ticket-stepper button span {
    border-color: rgba(148, 163, 184, .28);
    background: rgba(15, 23, 42, .86);
}

body.dark-mode .online-ticket-stepper button,
body.dark-mode .online-ticket-attachment-item,
body.dark-mode .online-ticket-confirm-grid > div {
    border-color: rgba(148, 163, 184, .24);
    background: rgba(15, 23, 42, .58);
}

@media (max-width: 768px) {
    .online-ticket-edit-head,
    .online-ticket-edit-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .online-ticket-stepper,
    .online-native-grid,
    .online-ticket-confirm-grid {
        grid-template-columns: 1fr;
    }

    .online-ticket-confirm-message {
        grid-column: auto;
    }
}

/* Client panel new-mode messaging */
.online-messages-page {
    width: 100%;
}

.online-messages-layout {
    display: grid;
    grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}

.online-messages-sidebar,
.online-messages-chat-panel {
    min-width: 0;
}

.online-messages-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.online-messages-sidebar-head {
    padding-bottom: 0;
}

.online-messages-search {
    width: 100%;
    max-width: none;
}

.online-conversation-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 420px;
    overflow: auto;
    padding-right: 2px;
}

.online-message-conversation {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
    width: 100%;
    min-height: 72px;
    padding: 10px 12px;
    border: 1px solid rgba(96, 137, 165, .24);
    border-radius: 8px;
    background: rgba(234, 242, 248, .78);
    color: #172536;
    text-align: left;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.online-message-conversation:hover,
.online-message-conversation:focus,
.online-message-conversation.is-active {
    border-color: rgba(18, 151, 211, .46);
    background: rgba(224, 244, 252, .92);
    transform: translateY(-1px);
    outline: 0;
}

.online-message-conversation-avatar,
.online-message-chat-avatar,
.online-message-bubble-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(72, 170, 205, .92), rgba(40, 132, 160, .86));
    color: #fff;
    flex: 0 0 auto;
}

.online-message-conversation-avatar {
    width: 42px;
    height: 42px;
}

.online-message-chat-avatar {
    width: 48px;
    height: 48px;
    font-size: 18px;
}

.online-message-bubble-avatar {
    width: 32px;
    height: 32px;
    font-size: 13px;
}

.online-message-conversation-avatar img,
.online-message-chat-avatar img,
.online-message-bubble-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.online-message-conversation-avatar.has-image i,
.online-message-chat-avatar.has-image i,
.online-message-bubble-avatar.has-image i {
    display: none;
}

.online-message-conversation-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.online-message-conversation-body strong,
.online-message-conversation-body small,
.online-message-conversation-body span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.online-message-conversation-body small {
    color: #5d7187;
    font-weight: 700;
}

.online-message-conversation-body span {
    color: #42586f;
}

.online-message-unread-badge {
    align-self: start;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: #158bbd;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 24px;
    text-align: center;
}

.online-new-message-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(96, 137, 165, .18);
}

.online-new-message-panel header {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.online-new-message-panel strong {
    color: #172536;
    font-size: 15px;
}

.online-message-compose-textarea {
    min-height: 74px;
    resize: vertical;
}

.online-message-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.online-message-send-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding-inline: 18px;
    border-radius: 8px;
    font-weight: 800;
}

.online-status-message {
    min-height: 20px;
    color: #5d7187;
    font-size: 12px;
    font-weight: 700;
}

.online-status-message.is-success {
    color: #087f65;
}

.online-status-message.is-error {
    color: #c24136;
}

.online-messages-chat-panel {
    display: grid;
    grid-template-rows: auto minmax(340px, 1fr) auto auto;
    min-height: 560px;
    padding: 0;
    overflow: hidden;
}

.online-message-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(96, 137, 165, .18);
}

.online-message-chat-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.online-message-chat-title h2 {
    margin: 0;
    color: #172536;
    font-size: 19px;
    line-height: 1.2;
}

.online-message-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: auto;
    padding: 18px 20px;
    background:
        linear-gradient(180deg, rgba(227, 238, 246, .54), rgba(245, 248, 251, .18));
}

.online-message-bubble {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 78%;
}

.online-message-bubble.is-own {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.online-message-bubble-content {
    position: relative;
    min-width: 180px;
    padding: 11px 13px;
    border: 1px solid rgba(96, 137, 165, .22);
    border-radius: 12px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 8px 20px rgba(15, 35, 52, .06);
}

.online-message-bubble.is-own .online-message-bubble-content {
    border-color: rgba(28, 150, 129, .26);
    background: rgba(218, 244, 238, .92);
}

.online-message-bubble-content header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 6px;
}

.online-message-bubble-content strong {
    color: #172536;
}

.online-message-bubble-content time {
    color: #65778a;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.online-message-bubble-content p {
    margin: 0;
    color: #21364c;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.online-message-delete {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #bd2d26;
    line-height: 1;
}

.online-message-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 340px;
    margin: 18px 20px;
    border: 1px dashed rgba(96, 137, 165, .34);
    border-radius: 10px;
    color: #5d7187;
    text-align: center;
}

.online-message-empty i {
    color: #4c9dc0;
    font-size: 26px;
}

.online-message-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid rgba(96, 137, 165, .18);
    background: rgba(245, 248, 251, .76);
}

.online-reply-status {
    padding: 0 20px 14px;
}

body.dark-mode .online-message-conversation {
    border-color: rgba(110, 150, 176, .26);
    background: rgba(34, 45, 56, .72);
    color: #eef6fb;
}

body.dark-mode .online-message-conversation:hover,
body.dark-mode .online-message-conversation:focus,
body.dark-mode .online-message-conversation.is-active {
    border-color: rgba(103, 179, 210, .42);
    background: rgba(43, 61, 73, .88);
}

body.dark-mode .online-message-conversation-body small,
body.dark-mode .online-message-conversation-body span,
body.dark-mode .online-status-message,
body.dark-mode .online-message-empty {
    color: #a9bed1;
}

body.dark-mode .online-new-message-panel,
body.dark-mode .online-message-chat-head,
body.dark-mode .online-message-composer {
    border-color: rgba(110, 150, 176, .18);
}

body.dark-mode .online-new-message-panel strong,
body.dark-mode .online-message-chat-title h2,
body.dark-mode .online-message-bubble-content strong {
    color: #f4f8fb;
}

body.dark-mode .online-message-thread {
    background:
        linear-gradient(180deg, rgba(19, 29, 38, .58), rgba(15, 24, 32, .28));
}

body.dark-mode .online-message-bubble-content {
    border-color: rgba(110, 150, 176, .22);
    background: rgba(36, 48, 59, .88);
    box-shadow: none;
}

body.dark-mode .online-message-bubble.is-own .online-message-bubble-content {
    border-color: rgba(49, 182, 155, .22);
    background: rgba(28, 70, 66, .72);
}

body.dark-mode .online-message-bubble-content p {
    color: #e4eef5;
}

body.dark-mode .online-message-bubble-content time {
    color: #aac0d1;
}

body.dark-mode .online-message-composer {
    background: rgba(24, 34, 43, .72);
}

body.dark-mode .online-status-message.is-success {
    color: #44d4b4;
}

body.dark-mode .online-status-message.is-error {
    color: #ff8d84;
}

@media (max-width: 991.98px) {
    .online-messages-layout {
        grid-template-columns: 1fr;
    }

    .online-conversation-list {
        max-height: 320px;
    }

    .online-messages-chat-panel {
        min-height: 520px;
    }
}

@media (max-width: 575.98px) {
    .online-message-action-row,
    .online-message-composer {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    .online-message-bubble {
        max-width: 100%;
    }

    .online-message-chat-head {
        align-items: flex-start;
    }

    .online-message-send-button {
        width: 100%;
    }
}

.online-payment-details {
    gap: 0.85rem;
}

.online-payment-layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.95fr) minmax(520px, 1.45fr);
    gap: 0.85rem;
    align-items: start;
}

.online-payment-form-panel,
.online-payment-records-panel {
    padding: 1rem;
}

.online-payment-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 0.9rem;
}

.online-light-titlebar-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    min-width: 0;
}

.online-light-titlebar-actions .online-transaction-search {
    width: min(360px, 42vw);
}

.online-payment-panel-header h2 {
    margin: 0.1rem 0 0;
    color: var(--online-text);
    font-size: 1rem;
    font-weight: 800;
}

.online-payment-panel-header-spaced {
    margin-top: 1.35rem;
    padding-top: 1rem;
    border-top: 1px solid var(--online-border);
}

.online-section-kicker {
    display: block;
    color: var(--online-muted);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

.online-payment-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 30px;
    padding: 0 0.65rem;
    border-radius: 999px;
    background: rgba(0, 120, 255, 0.12);
    color: var(--online-primary);
    font-weight: 800;
}

.online-payment-form-body .form-row {
    margin-bottom: 0.75rem;
}

.online-payment-form-body fieldset {
    margin-top: 0.85rem;
    padding: 0;
    border: 0;
}

.online-payment-form-body .btn,
.online-payment-form-body button[type="submit"] {
    min-height: 38px;
}

.online-payment-table th,
.online-payment-table td {
    vertical-align: middle;
}

.online-payment-table td {
    min-height: 48px;
}

.online-payment-break {
    max-width: 300px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.online-icon-action.is-danger {
    color: #b42318;
}

.online-icon-action.is-danger:hover,
.online-icon-action.is-danger:focus {
    border-color: rgba(180, 35, 24, 0.3);
    background: rgba(180, 35, 24, 0.08);
}

.online-payment-panel-header small,
.online-account-panel-head small {
    display: block;
    margin-top: 0.2rem;
    color: var(--online-muted);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
}

.online-account-panel-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.online-native-payment-form {
    display: block;
    margin: 0;
}

.online-native-payment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.online-native-payment-grid .crm-native-field {
    min-width: 0;
    margin: 0;
}

.online-native-payment-grid .crm-native-field > span:first-child {
    display: block;
    color: var(--online-muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: uppercase;
}

.online-native-payment-grid .crm-native-field::after {
    content: attr(data-description);
    display: block;
    color: var(--online-muted);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.35;
}

.online-native-payment-grid .crm-native-control,
.online-native-payment-grid .crm-native-kendo-control .k-widget,
.online-native-payment-grid .crm-native-kendo-control .k-dropdown,
.online-native-payment-grid .crm-native-kendo-control .k-dropdownlist,
.online-native-payment-grid .crm-native-kendo-control .k-picker,
.online-native-payment-grid .crm-native-kendo-control .k-input {
    width: 100%;
}

.online-native-payment-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: fit-content;
    min-width: 132px;
}

.online-transaction-detail-page {
    display: grid;
    gap: 0.85rem;
}

.online-transaction-detail-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--online-border);
    border-radius: 8px;
    background: var(--online-surface);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
    padding: 1rem 1.1rem;
}

.online-transaction-detail-hero-main h2 {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0.2rem 0 0;
    color: var(--online-text);
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.25;
}

.online-transaction-detail-hero-main small {
    display: block;
    margin-top: 0.3rem;
    color: var(--online-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.online-transaction-detail-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.online-transaction-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    align-items: start;
}

.online-transaction-detail-card {
    min-width: 0;
    padding: 1rem;
}

.online-transaction-detail-card-wide {
    grid-column: 1 / -1;
}

.online-detail-list {
    display: grid;
    gap: 0.65rem;
}

.online-detail-list > div {
    display: grid;
    grid-template-columns: minmax(150px, 0.55fr) minmax(0, 1fr) minmax(150px, 0.65fr);
    gap: 0.75rem;
    align-items: center;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--online-border) 80%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--online-surface-soft) 72%, var(--online-surface));
    padding: 0.65rem 0.75rem;
}

.online-detail-list span,
.online-detail-list strong,
.online-detail-list small,
.online-detail-note-grid span,
.online-detail-note-grid strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.online-detail-list span,
.online-detail-note-grid span {
    color: var(--online-muted);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.online-detail-list strong,
.online-detail-note-grid strong {
    color: var(--online-text);
    font-size: 0.9rem;
    font-weight: 800;
}

.online-detail-list small {
    color: var(--online-muted);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.35;
}

.online-transaction-amount-card {
    display: grid;
    gap: 0.35rem;
    align-content: center;
    min-height: 170px;
}

.online-transaction-amount-card > strong {
    color: var(--online-text);
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    font-weight: 900;
    line-height: 1.1;
}

.online-transaction-amount-card > strong.is-in {
    color: var(--online-success);
}

.online-transaction-amount-card > strong.is-out {
    color: #b42318;
}

.online-transaction-amount-card small {
    color: var(--online-muted);
    font-weight: 800;
}

.online-detail-note-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.online-detail-note-grid > div {
    display: grid;
    gap: 0.4rem;
    border: 1px solid color-mix(in srgb, var(--online-border) 80%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--online-surface-soft) 72%, var(--online-surface));
    padding: 0.75rem;
}

.online-transaction-reference-card {
    padding: 1rem;
}

.online-transaction-reference-card .btn {
    width: fit-content;
    max-width: 100%;
    white-space: normal;
}

@media (max-width: 1180px) {
    .online-payment-layout {
        grid-template-columns: 1fr;
    }

    .online-transaction-detail-grid {
        grid-template-columns: 1fr;
    }

    .online-detail-note-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .online-payment-form-panel,
    .online-payment-records-panel {
        padding: 0.8rem;
    }

    .online-payment-panel-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .online-light-titlebar-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .online-light-titlebar-actions .online-transaction-search {
        width: 100%;
    }

    .online-payment-break {
        max-width: 220px;
    }

    .online-native-payment-grid {
        grid-template-columns: 1fr;
    }

    .online-transaction-detail-hero,
    .online-detail-list > div {
        grid-template-columns: 1fr;
    }

    .online-transaction-detail-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .online-transaction-detail-badges {
        justify-content: flex-start;
    }
}

.online-profile-page {
    gap: 0.85rem;
}

.online-profile-layout {
    display: grid;
    grid-template-columns: minmax(360px, 1.15fr) minmax(360px, 0.95fr);
    gap: 0.85rem;
    align-items: start;
}

.online-profile-info-panel,
.online-profile-documents-panel {
    padding: 1rem;
}

.online-profile-card-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.online-profile-title {
    min-width: 0;
}

.online-profile-title h2,
.online-profile-documents-head h2 {
    margin: 0.1rem 0 0;
    color: var(--online-text);
    font-size: 1.08rem;
    font-weight: 850;
}

.online-profile-photo-action {
    margin-top: 0.75rem;
    border-radius: 7px;
    font-weight: 800;
}

.online-profile-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.online-profile-detail-item {
    display: grid;
    grid-template-columns: minmax(110px, 0.42fr) minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
    min-height: 48px;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--online-border);
    border-radius: 8px;
    background: var(--online-surface-soft);
}

.online-profile-detail-item span {
    color: var(--online-muted);
    font-size: 0.8rem;
    font-weight: 800;
}

.online-profile-detail-item strong {
    min-width: 0;
    color: var(--online-text);
    overflow-wrap: anywhere;
    text-align: right;
    font-weight: 850;
}

.online-profile-password-row button {
    justify-self: end;
    border-radius: 7px;
    font-weight: 800;
}

.online-profile-documents-head {
    justify-content: space-between;
}

.online-profile-documents-table {
    min-width: 520px;
}

@media (max-width: 1180px) {
    .online-profile-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .online-profile-info-panel,
    .online-profile-documents-panel {
        padding: 0.8rem;
    }

    .online-profile-card-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .online-profile-detail-grid {
        grid-template-columns: 1fr;
    }

    .online-profile-detail-item {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .online-profile-detail-item strong {
        text-align: left;
    }

    .online-profile-password-row button {
        justify-self: start;
    }
}

.online-upload-documents {
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}

.online-upload-documents-layout {
    display: grid;
    grid-template-columns: minmax(420px, 1.1fr) minmax(360px, 0.9fr);
    gap: 0.85rem;
    align-items: start;
}

.online-upload-form-panel,
.online-upload-documents-panel {
    padding: 1rem;
}

.online-upload-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.online-upload-panel-head h2 {
    margin: 0.1rem 0 0;
    color: var(--online-text);
    font-size: 1.04rem;
    font-weight: 850;
}

.online-upload-add-action {
    flex: 0 0 auto;
    border-radius: 7px;
    font-weight: 800;
}

.online-upload-form-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.online-upload-form-body > .form-row {
    margin-bottom: 0 !important;
}

.online-upload-form-body fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.online-upload-form-body #EditIdForm,
.online-upload-form-body #EditAddressForm,
.online-upload-form-body #EditSelfieForm {
    flex-direction: column;
    gap: 0.75rem;
}

.online-upload-form-body #EditIdForm[style*="block"],
.online-upload-form-body #EditAddressForm[style*="block"],
.online-upload-form-body #EditSelfieForm[style*="block"] {
    display: flex !important;
}

.online-upload-form-body .form-group {
    margin-bottom: 0 !important;
}

.online-upload-form-body .custom-upload-wrapper {
    min-height: 142px;
}

.online-upload-preview-image {
    display: block;
    width: min(150px, 100%);
    max-height: 150px;
    margin-top: 0.35rem;
    border: 1px solid var(--online-border);
    border-radius: 8px;
    object-fit: cover;
    background: var(--online-surface);
}

.online-upload-form-body .custom-upload-note {
    width: 100%;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--online-border);
    border-radius: 7px;
    background: var(--online-surface-soft);
}

.online-upload-form-body button[onclick*="EditDocumentOnlineFormSubmit"] {
    align-self: flex-start;
    min-height: 42px;
    border-radius: 7px;
    font-weight: 850;
}

.online-upload-documents-table {
    min-width: 620px;
}

@media (max-width: 1180px) {
    .online-upload-documents-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .online-upload-form-panel,
    .online-upload-documents-panel {
        padding: 0.8rem;
    }

    .online-upload-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

body.crm-ui-mode-new {
    --online-surface: #ffffff;
    --online-surface-soft: #f5f7fb;
    --online-border: #d9e1ea;
    --online-text: #17202c;
    --online-muted: #64748b;
    --online-accent: #0f6fed;
    --online-success: #009f7a;
    --online-page-bg: #f4f7fb;
    --online-topbar-bg: #ffffff;
    --online-topbar-border: #d8e2ee;
    --online-header-bg: #ffffff;
    --online-header-text: #182230;
    --online-form-panel: #ffffff;
    --online-form-panel-soft: #f7faff;
    --online-form-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
}

body.dark-mode.crm-ui-mode-new {
    --online-surface: #1a222c;
    --online-surface-soft: #151c24;
    --online-border: rgba(148, 163, 184, 0.18);
    --online-text: #e6edf3;
    --online-muted: #9ca8b5;
    --online-accent: #7fa6b5;
    --online-success: #68b0a4;
    --online-page-bg: #151b22;
    --online-topbar-bg: #18212a;
    --online-topbar-border: rgba(148, 163, 184, 0.14);
    --online-header-bg: #1b242d;
    --online-header-text: #edf3f7;
    --online-form-panel: #171f28;
    --online-form-panel-soft: #1b2630;
    --online-form-shadow: 0 16px 32px rgba(0, 0, 0, 0.16);
}

body.crm-ui-mode-new:not(.dark-mode) {
    --online-menu-bg: #f7f9fc;
    --online-menu-panel: #ffffff;
    --online-menu-panel-soft: #eef4fb;
    --online-menu-border: #d8e2ee;
    --online-menu-text: #1f2a37;
    --online-menu-muted: #66768a;
    --online-menu-active-bg: #e7f1ff;
    --online-menu-active-text: #0f5fc7;
    --online-menu-hover-bg: #edf6ff;
}

body.dark-mode.crm-ui-mode-new {
    --online-menu-bg: #151c24;
    --online-menu-panel: #19222b;
    --online-menu-panel-soft: #1e2a34;
    --online-menu-border: rgba(148, 163, 184, 0.15);
    --online-menu-text: #e3ebf2;
    --online-menu-muted: #9ba8b5;
    --online-menu-active-bg: rgba(127, 166, 181, 0.13);
    --online-menu-active-text: #b2cbd5;
    --online-menu-hover-bg: rgba(148, 163, 184, 0.08);
}

body.crm-ui-mode-new #NavClass.main-sidebar {
    border-right: 1px solid var(--online-menu-border) !important;
    background: var(--online-menu-bg) !important;
    color: var(--online-menu-text) !important;
    box-shadow: 8px 0 24px rgba(15, 23, 42, 0.08) !important;
}

body.crm-ui-mode-new #NavClass .brand-link {
    min-height: 86px;
    border-bottom: 1px solid var(--online-menu-border) !important;
    background: var(--online-menu-panel) !important;
}

body.crm-ui-mode-new #NavClass .brand-link img {
    max-width: calc(100% - 1rem);
    margin: 0.35rem auto;
    object-fit: contain;
}

body.crm-ui-mode-new #NavClass .sidebar {
    background: transparent !important;
}

body.crm-ui-mode-new #NavClass .sidebar nav {
    padding: 0.45rem 0.45rem 0.85rem;
}

body.crm-ui-mode-new #NavClass .nav-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

body.crm-ui-mode-new #NavClass .nav-sidebar .nav-link {
    display: flex;
    align-items: center;
    min-height: 40px;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--online-menu-text) !important;
    font-weight: 750;
}

body.crm-ui-mode-new #NavClass .nav-sidebar .nav-link p {
    color: inherit !important;
}

body.crm-ui-mode-new #NavClass .nav-sidebar .nav-icon {
    color: var(--online-menu-muted) !important;
}

body.crm-ui-mode-new #NavClass .nav-sidebar .nav-link:hover,
body.crm-ui-mode-new #NavClass .nav-sidebar .nav-link:focus {
    border-color: var(--online-menu-border);
    background: var(--online-menu-hover-bg) !important;
    color: var(--online-menu-active-text) !important;
}

body.crm-ui-mode-new #NavClass .nav-sidebar .nav-link:hover .nav-icon,
body.crm-ui-mode-new #NavClass .nav-sidebar .nav-link:focus .nav-icon {
    color: var(--online-menu-active-text) !important;
}

body.crm-ui-mode-new #NavClass .nav-sidebar .nav-link.active,
body.crm-ui-mode-new #NavClass .nav-sidebar > .nav-item.menu-open > .nav-link {
    border-color: color-mix(in srgb, var(--online-menu-active-text) 42%, transparent);
    background: var(--online-menu-active-bg) !important;
    color: var(--online-menu-active-text) !important;
    box-shadow: 0 8px 18px rgba(15, 111, 237, 0.10);
}

body.crm-ui-mode-new #NavClass .nav-sidebar .nav-link.active .nav-icon,
body.crm-ui-mode-new #NavClass .nav-sidebar > .nav-item.menu-open > .nav-link .nav-icon {
    color: var(--online-menu-active-text) !important;
}

body.crm-ui-mode-new #NavClass .nav-treeview {
    margin: 0.18rem 0 0.35rem 0.62rem;
    padding: 0.28rem 0 0.28rem 0.55rem;
    border-left: 1px solid var(--online-menu-border);
    background: transparent !important;
}

body.crm-ui-mode-new #NavClass .nav-treeview .nav-link {
    min-height: 34px;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    color: var(--online-menu-muted) !important;
    font-size: 0.88rem;
}

body.crm-ui-mode-new #NavClass .nav-treeview .nav-link.active {
    color: var(--online-menu-active-text) !important;
}

body.crm-ui-mode-new #NavClass .right {
    color: var(--online-menu-muted) !important;
}

body.crm-ui-mode-new #NavClass .sidebar-menu-search {
    margin: 0.25rem 0.45rem 0.65rem !important;
    padding: 0.45rem 0 !important;
    border-bottom: 1px solid var(--online-menu-border) !important;
    background: transparent !important;
}

body.crm-ui-mode-new #NavClass .sidebar-menu-search .input-group {
    border-radius: 8px !important;
    background: var(--online-menu-panel) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

body.crm-ui-mode-new #NavClass .sidebar-menu-search input,
body.crm-ui-mode-new #NavClass[class*="sidebar-dark"] .sidebar-menu-search input,
body.crm-ui-mode-new #NavClass.main-sidebar[class*="sidebar-dark"] .sidebar-menu-search input {
    min-height: 38px;
    border: 1px solid var(--online-menu-border) !important;
    border-radius: 8px !important;
    background: var(--online-menu-panel) !important;
    color: var(--online-menu-text) !important;
    font-weight: 700;
}

body.crm-ui-mode-new #NavClass .sidebar-menu-search input::placeholder,
body.crm-ui-mode-new #NavClass[class*="sidebar-dark"] .sidebar-menu-search input::placeholder {
    color: var(--online-menu-muted) !important;
}

body.crm-ui-mode-new #NavClass .sidebar-menu-search input:focus,
body.crm-ui-mode-new #NavClass[class*="sidebar-dark"] .sidebar-menu-search input:focus {
    border-color: var(--online-menu-active-text) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--online-menu-active-text) 18%, transparent) !important;
}

body.crm-ui-mode-new #NavClass .menu-search-match > a {
    border-left: 3px solid var(--online-menu-active-text) !important;
    background: var(--online-menu-active-bg) !important;
    color: var(--online-menu-active-text) !important;
}

body.crm-ui-mode-new:not(.dark-mode) {
    --online-page-bg: #f3f6fa;
    --online-topbar-bg: #ffffff;
    --online-topbar-border: #d8e2ee;
    --online-header-bg: #ffffff;
    --online-header-text: #182230;
    --online-menu-bg: #eef4fa;
    --online-menu-panel: #ffffff;
    --online-menu-panel-soft: #f6f9fc;
    --online-menu-hover-bg: #eaf3ff;
    --online-menu-active-bg: #dcecff;
    --online-menu-active-text: #145fb8;
}

body.dark-mode.crm-ui-mode-new {
    --online-page-bg: #151b22;
    --online-topbar-bg: #18212a;
    --online-topbar-border: rgba(148, 163, 184, 0.14);
    --online-header-bg: #1b242d;
    --online-header-text: #edf3f7;
    --online-menu-bg: #151c24;
    --online-menu-panel: #19222b;
    --online-menu-panel-soft: #1e2a34;
    --online-menu-border: rgba(148, 163, 184, 0.15);
    --online-menu-text: #e3ebf2;
    --online-menu-muted: #9ba8b5;
    --online-menu-hover-bg: rgba(148, 163, 184, 0.08);
    --online-menu-active-bg: rgba(127, 166, 181, 0.13);
    --online-menu-active-text: #b2cbd5;
}

body.crm-ui-mode-new,
body.crm-ui-mode-new .wrapper {
    background: var(--online-page-bg) !important;
    color: var(--online-text) !important;
}

body.crm-ui-mode-new .content-wrapper {
    background: var(--online-page-bg) !important;
    color: var(--online-text) !important;
}

body.crm-ui-mode-new .content-wrapper > .content {
    background: transparent !important;
}

body.crm-ui-mode-new #NavTopClass,
body.crm-ui-mode-new #NavTopClass.main-header {
    border-bottom: 1px solid var(--online-topbar-border) !important;
    background: var(--online-topbar-bg) !important;
    color: var(--online-text) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04) !important;
}

body.crm-ui-mode-new #NavTopClass .nav-link,
body.crm-ui-mode-new #NavTopClass .online-header-profile-text {
    color: var(--online-text) !important;
}

body.crm-ui-mode-new #NavTopClass .nav-link:hover,
body.crm-ui-mode-new #NavTopClass .nav-link:focus {
    background: color-mix(in srgb, var(--online-menu-hover-bg) 74%, transparent) !important;
    color: var(--online-menu-active-text) !important;
}

body.crm-ui-mode-new .content-header.header-shadow {
    margin: 0 0 0.85rem;
    border-bottom: 1px solid var(--online-topbar-border);
    background: var(--online-header-bg) !important;
    color: var(--online-header-text) !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05) !important;
}

body.crm-ui-mode-new .content-header h1 {
    color: var(--online-header-text) !important;
}

body.crm-ui-mode-new .content-header .breadcrumb {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.32rem;
    width: auto;
    max-width: 100%;
    min-height: 34px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}

body.crm-ui-mode-new .content-header .breadcrumb-item,
body.crm-ui-mode-new .content-header .breadcrumb > li {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    color: var(--online-muted) !important;
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

body.crm-ui-mode-new .content-header .breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.34rem 0.58rem;
    border: 1px solid color-mix(in srgb, var(--online-menu-active-text) 18%, var(--online-menu-border));
    border-radius: 7px;
    background: color-mix(in srgb, var(--online-header-bg) 84%, var(--online-menu-panel-soft)) !important;
    color: var(--online-header-text) !important;
    font-weight: 850;
    line-height: 1.1;
    text-decoration: none !important;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

body.crm-ui-mode-new .content-header .breadcrumb a:hover,
body.crm-ui-mode-new .content-header .breadcrumb a:focus {
    border-color: color-mix(in srgb, var(--online-menu-active-text) 24%, var(--online-menu-border));
    background: var(--online-menu-hover-bg) !important;
    color: var(--online-menu-active-text) !important;
    outline: none;
}

body.crm-ui-mode-new .content-header .breadcrumb-item.active,
body.crm-ui-mode-new .content-header .breadcrumb > li.active,
body.crm-ui-mode-new .content-header .breadcrumb .active {
    min-height: 30px;
    padding: 0.34rem 0.58rem;
    border: 1px solid color-mix(in srgb, var(--online-menu-active-text) 24%, var(--online-menu-border));
    border-radius: 7px;
    background: var(--online-menu-active-bg) !important;
    color: var(--online-menu-active-text) !important;
    font-weight: 850;
}

body.crm-ui-mode-new .content-header .breadcrumb-item + .breadcrumb-item::before,
body.crm-ui-mode-new .content-header .breadcrumb > li + li::before {
    align-self: center;
    padding: 0 0.12rem 0 0;
    color: var(--online-muted) !important;
    font-weight: 900;
}

body.dark-mode.crm-ui-mode-new .content-header .breadcrumb {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.dark-mode.crm-ui-mode-new .content-header .breadcrumb a {
    border-color: rgba(148, 163, 184, 0.18);
    background: color-mix(in srgb, var(--online-header-bg) 76%, var(--online-page-bg)) !important;
    color: #dce7ef !important;
}

body.crm-ui-mode-new #BrandFooterClass {
    border-top: 1px solid var(--online-topbar-border);
    background: var(--online-topbar-bg) !important;
    color: var(--online-muted) !important;
}

body.dark-mode.crm-ui-mode-new #NavClass.main-sidebar {
    box-shadow: 10px 0 26px rgba(0, 0, 0, 0.18) !important;
}

body.dark-mode.crm-ui-mode-new #NavClass .nav-sidebar .nav-link {
    color: #d9e6f4 !important;
}

body.dark-mode.crm-ui-mode-new #NavClass .nav-sidebar .nav-icon {
    color: #91a6bc !important;
}

body.dark-mode.crm-ui-mode-new #NavClass .nav-sidebar .nav-link.active,
body.dark-mode.crm-ui-mode-new #NavClass .nav-sidebar > .nav-item.menu-open > .nav-link {
    border-color: rgba(148, 163, 184, 0.24);
    box-shadow: inset 3px 0 0 rgba(127, 166, 181, 0.58), 0 6px 14px rgba(0, 0, 0, 0.10);
}

body.crm-ui-mode-new #NavClass .nav-treeview .nav-icon {
    font-size: 0.72rem;
    opacity: 0.85;
}

body.dark-mode.crm-ui-mode-new .online-form-card,
body.dark-mode.crm-ui-mode-new .online-open-account-panel,
body.dark-mode.crm-ui-mode-new .online-account-panel {
    border-color: var(--online-border) !important;
    background: var(--online-form-panel) !important;
    box-shadow: var(--online-form-shadow) !important;
}

body.dark-mode.crm-ui-mode-new .online-account-panel-live {
    --online-account-row-tint: rgba(104, 176, 164, 0.10);
    --online-account-row-tint-strong: rgba(104, 176, 164, 0.16);
    --online-account-row-accent: #68b0a4;
}

body.dark-mode.crm-ui-mode-new .online-account-panel-demo {
    --online-account-row-tint: rgba(127, 166, 181, 0.11);
    --online-account-row-tint-strong: rgba(127, 166, 181, 0.18);
    --online-account-row-accent: #7fa6b5;
}

body.dark-mode.crm-ui-mode-new .online-form-step {
    border-color: rgba(148, 163, 184, 0.14);
    background: var(--online-form-panel-soft);
    color: #b8c7d8;
}

body.dark-mode.crm-ui-mode-new .online-form-step.is-active,
body.dark-mode.crm-ui-mode-new .online-form-step.is-complete {
    border-color: rgba(127, 166, 181, 0.26);
    background: rgba(127, 166, 181, 0.10);
    color: #bdd3dc;
}

body.dark-mode.crm-ui-mode-new .online-quick-actions {
    background: rgba(18, 27, 40, 0.94) !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.20) !important;
}

body.dark-mode.crm-ui-mode-new .online-quick-action {
    border-color: rgba(148, 163, 184, 0.16) !important;
    background: var(--online-form-panel-soft) !important;
    color: #eef6ff !important;
}

body.dark-mode.crm-ui-mode-new .online-quick-action:hover,
body.dark-mode.crm-ui-mode-new .online-quick-action:focus,
body.dark-mode.crm-ui-mode-new .online-quick-action-live,
body.dark-mode.crm-ui-mode-new .online-quick-action-deposit {
    background: #5f91a3 !important;
    color: #10202a !important;
}

.btn-responsive {
    padding: 0.5rem 1rem;
    font-size: 1rem;
}

.online-header-mode {
    display: flex;
    align-items: center;
    padding: 0 0.35rem;
}

.online-mode-switch {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, auto));
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid rgba(127, 139, 153, 0.28);
    border-radius: 999px;
    background: rgba(127, 139, 153, 0.10);
    white-space: nowrap;
}

.online-mode-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 30px;
    padding: 0 0.65rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #5f6b7a;
    font-size: 0.82rem;
    line-height: 1;
    cursor: pointer;
}

.online-mode-option.is-active {
    background: #0f6fed;
    color: #fff;
    box-shadow: 0 4px 12px rgba(15, 111, 237, 0.22);
}

.online-theme-toggle {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.online-header-message .crm-conversation-header-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    margin: 0 0.2rem;
    border: 1px solid rgba(15, 111, 237, 0.22);
    border-radius: 999px;
    background: rgba(15, 111, 237, 0.10);
    color: #0f6fed !important;
    font-size: 1rem;
}

.online-header-message .crm-conversation-header-toggle i {
    color: inherit !important;
}

.online-header-message .crm-conversation-header-toggle:hover,
.online-header-message .crm-conversation-header-toggle:focus,
.online-header-message .crm-conversation-header-toggle.has-unread,
.online-header-message .crm-conversation-header-toggle.is-open {
    border-color: rgba(15, 111, 237, 0.36);
    background: #0f6fed;
    color: #ffffff !important;
}

body.dark-mode .online-mode-switch {
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.42);
}

body.dark-mode .online-mode-option {
    color: #cbd5e1;
}

body.dark-mode .online-mode-option.is-active {
    background: #6f98a8;
    color: #10202a;
    box-shadow: 0 4px 12px rgba(96, 125, 139, 0.18);
}

body.dark-mode .online-header-message .crm-conversation-header-toggle {
    border-color: rgba(127, 166, 181, 0.28);
    background: rgba(127, 166, 181, 0.12);
    color: #a9c7d3 !important;
}

body.dark-mode .online-header-message .crm-conversation-header-toggle:hover,
body.dark-mode .online-header-message .crm-conversation-header-toggle:focus,
body.dark-mode .online-header-message .crm-conversation-header-toggle.has-unread,
body.dark-mode .online-header-message .crm-conversation-header-toggle.is-open {
    border-color: rgba(127, 166, 181, 0.38);
    background: #6f98a8;
    color: #10202a !important;
}

body.crm-ui-mode-new .online-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.65rem !important;
    width: min(100%, 780px);
    margin: 0.35rem auto 0.9rem !important;
    padding: 0.55rem;
    border: 1px solid var(--online-border);
    border-radius: 8px;
    background: var(--online-surface);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

body.crm-ui-mode-new .online-action-panel .online-quick-actions {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    width: 100%;
    margin: 0 !important;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body.crm-ui-mode-new .online-quick-action {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem;
    min-height: 46px;
    min-width: 0;
    padding: 0.58rem 0.75rem;
    border: 1px solid rgba(15, 111, 237, 0.28);
    border-radius: 7px;
    background: color-mix(in srgb, var(--online-accent) 12%, var(--online-surface));
    color: var(--online-accent);
    font-weight: 800;
    line-height: 1.18;
    text-align: left;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
    box-shadow: none;
    transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

body.crm-ui-mode-new .online-quick-action:hover,
body.crm-ui-mode-new .online-quick-action:focus {
    border-color: color-mix(in srgb, var(--online-accent) 55%, transparent);
    background: color-mix(in srgb, var(--online-accent) 18%, var(--online-surface));
    color: var(--online-accent);
    text-decoration: none;
    transform: translateY(-1px);
}

body.crm-ui-mode-new .online-quick-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--online-accent);
    color: #ffffff;
}

body.crm-ui-mode-new .online-quick-action-text {
    min-width: 0;
}

body.crm-ui-mode-new .online-quick-action-live,
body.crm-ui-mode-new .online-quick-action-deposit {
    border-color: transparent;
    background: var(--online-accent);
    color: #ffffff;
}

body.crm-ui-mode-new .online-quick-action-live:hover,
body.crm-ui-mode-new .online-quick-action-live:focus,
body.crm-ui-mode-new .online-quick-action-deposit:hover,
body.crm-ui-mode-new .online-quick-action-deposit:focus {
    background: color-mix(in srgb, var(--online-accent) 84%, #000000);
    color: #ffffff;
}

body.crm-ui-mode-new .online-quick-action-live .online-quick-action-icon,
body.crm-ui-mode-new .online-quick-action-deposit .online-quick-action-icon {
    background: rgba(255, 255, 255, 0.18);
    color: inherit;
}

.online-home-new {
    --online-surface: #ffffff;
    --online-surface-soft: #f5f7fb;
    --online-border: #d9e1ea;
    --online-text: #17202c;
    --online-muted: #64748b;
    --online-accent: #0f6fed;
    --online-success: #009f7a;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 1.25rem;
    color: var(--online-text);
}

.online-home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
    gap: 1rem;
    align-items: stretch;
}

.online-profile-panel,
.online-action-panel,
.online-home-new .card {
    border: 1px solid var(--online-border) !important;
    border-radius: 8px !important;
    background: var(--online-surface) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07) !important;
}

.online-profile-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding: 1.15rem;
    min-width: 0;
}

.online-profile-avatar-wrap {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    padding: 4px;
    background: linear-gradient(135deg, #0f6fed, #00a884);
}

.online-profile-avatar {
    width: 104px;
    height: 104px;
    object-fit: cover;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #eef2f7;
    cursor: pointer;
}

.online-profile-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, #0f6fed, #00a884);
    font-size: 2.45rem;
    cursor: default;
}

.online-classic-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    color: #ffffff;
    background: linear-gradient(135deg, #0f6fed, #00a884);
    font-size: 2.6rem;
}

.online-profile-summary {
    min-width: 0;
}

.online-profile-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
    color: var(--online-muted);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
}

.online-profile-summary h2 {
    margin: 0 0 0.85rem;
    color: var(--online-text);
    font-size: 1.35rem;
    font-weight: 700;
}

.online-profile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.online-profile-item {
    min-width: 0;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--online-border);
    border-radius: 8px;
    background: var(--online-surface-soft);
}

.online-profile-item span,
.online-profile-item strong {
    display: block;
    overflow-wrap: anywhere;
}

.online-profile-item span {
    margin-bottom: 0.25rem;
    color: var(--online-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.online-profile-item strong {
    color: var(--online-text);
    font-size: 0.95rem;
    font-weight: 700;
}

.online-action-panel {
    display: flex;
    align-items: center;
    padding: 1rem;
}

.online-action-panel .button-bar {
    width: 100%;
    margin: 0 !important;
    justify-content: stretch !important;
}

.online-action-panel .btn-responsive {
    flex: 1 1 150px;
    min-height: 42px;
    border-radius: 7px;
    font-weight: 700;
}

.online-home-accounts .row,
.online-home-market .row {
    margin-right: 0;
    margin-left: 0;
}

.online-home-accounts [class*="col-"],
.online-home-market [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

.online-home-new .card {
    overflow: hidden;
}

.online-home-new .card-header {
    border-bottom: 1px solid var(--online-border) !important;
    background: var(--online-surface) !important;
    color: var(--online-text);
}

body.crm-ui-mode-new .online-card-collapse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--online-border) !important;
    border-radius: 7px;
    background: var(--online-surface-soft) !important;
    color: var(--online-accent) !important;
}

body.crm-ui-mode-new .online-card-collapse:hover,
body.crm-ui-mode-new .online-card-collapse:focus {
    border-color: color-mix(in srgb, var(--online-accent) 45%, transparent) !important;
    background: color-mix(in srgb, var(--online-accent) 14%, var(--online-surface)) !important;
    color: var(--online-accent) !important;
}

.online-home-new .card-body {
    background: var(--online-surface) !important;
}

.online-home-new .card-primary.card-outline,
.online-home-new .card-info.card-outline,
.online-home-new .card-success.card-outline {
    border-top: 3px solid var(--online-accent) !important;
}

.online-home-new .card-info.card-outline {
    border-top-color: #00a6b8 !important;
}

.online-home-new .card-success.card-outline {
    border-top-color: var(--online-success) !important;
}

.online-account-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.online-account-panel {
    border: 1px solid var(--online-border);
    border-radius: 8px;
    background: var(--online-surface);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.online-account-panel-live {
    --online-account-row-tint: rgba(72, 154, 126, 0.09);
    --online-account-row-tint-strong: rgba(72, 154, 126, 0.15);
    --online-account-row-accent: #6fa896;
}

.online-account-panel-demo {
    --online-account-row-tint: rgba(95, 132, 146, 0.11);
    --online-account-row-tint-strong: rgba(95, 132, 146, 0.18);
    --online-account-row-accent: #7fa6b5;
}

.online-light-list-shell {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.online-wallet-panel {
    margin-top: 1rem;
}

.online-account-titlebar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--online-border);
    background: var(--online-surface);
}

.online-account-title-copy {
    min-width: 0;
}

.online-account-title-copy h2 {
    margin: 0;
    color: var(--online-text);
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.25;
}

.online-account-title-copy span {
    display: block;
    margin-top: 0.25rem;
    color: var(--online-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.online-account-search {
    flex: 0 1 360px;
}

.online-account-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--online-border);
    background: var(--online-surface);
}

.online-account-panel-head .online-account-title-copy span {
    display: block;
    min-width: 0;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--online-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.online-account-panel-head h2 {
    margin: 0;
    color: var(--online-text);
    font-size: 1rem;
    font-weight: 800;
}

.online-account-panel-head span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 28px;
    padding: 0 0.6rem;
    border-radius: 999px;
    background: var(--online-surface-soft);
    color: var(--online-muted);
    font-weight: 800;
}

.online-table-wrap {
    overflow-x: auto;
}

.online-account-platform-panel {
    --online-account-grid-columns: minmax(112px, .72fr) minmax(185px, 1.2fr) minmax(86px, .5fr) minmax(112px, .65fr) minmax(112px, .65fr) minmax(96px, .55fr) minmax(92px, max-content);
}

.online-wallet-panel {
    --online-account-grid-columns: minmax(220px, 1.3fr) minmax(140px, .75fr) minmax(140px, .75fr) minmax(120px, .65fr) minmax(120px, max-content);
}

.online-account-light-table {
    min-width: 0;
    overflow-x: auto;
}

.online-account-light-head,
.online-account-light-row {
    display: grid;
    grid-template-columns: var(--online-account-grid-columns);
    align-items: center;
    gap: 10px;
    min-width: 850px;
}

.online-wallet-panel .online-account-light-head,
.online-wallet-panel .online-account-light-row {
    min-width: 720px;
}

.online-account-light-head {
    padding: 0.62rem 0.75rem;
    border-bottom: 1px solid var(--online-border);
    background: var(--online-surface-soft);
    color: var(--online-muted);
    font-size: 0.73rem;
    font-weight: 850;
    text-transform: uppercase;
}

.online-account-light-body {
    display: grid;
}

.online-account-light-row {
    min-height: 62px;
    padding: 0.72rem 0.75rem;
    border-bottom: 1px solid var(--online-border);
    background: var(--online-surface);
    transition: background-color 0.16s ease;
}

.online-account-light-row:last-child {
    border-bottom: 0;
}

.online-account-light-row:hover {
    background: color-mix(in srgb, var(--online-accent) 5%, var(--online-surface));
}

.online-account-light-cell {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
    align-content: center;
}

.online-account-light-cell small {
    color: var(--online-muted);
    font-size: 0.7rem;
    font-weight: 850;
    line-height: 1.2;
    text-transform: uppercase;
}

.online-account-light-cell strong {
    min-width: 0;
    color: var(--online-text);
    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.online-account-light-cell span {
    min-width: 0;
    color: var(--online-muted);
    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.online-account-login-cell strong {
    color: var(--online-text);
    font-size: 0.98rem;
    font-weight: 900;
}

.online-account-action-cell {
    justify-items: end;
    text-align: right;
}

.online-light-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    color: var(--online-text);
    font-size: 0.9rem;
}

.online-light-table th,
.online-light-table td {
    padding: 0.75rem 0.8rem;
    border-bottom: 1px solid var(--online-border);
    text-align: left;
    vertical-align: middle;
}

.online-light-table th {
    background: var(--online-surface-soft);
    color: var(--online-muted);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.online-light-table tbody tr {
    transition: background-color 0.16s ease;
}

.online-account-panel-live .online-light-table tbody tr,
.online-account-panel-demo .online-light-table tbody tr {
    position: relative;
    background: linear-gradient(90deg, var(--online-account-row-tint, transparent), transparent 58%);
    box-shadow: inset 3px 0 0 var(--online-account-row-accent, transparent);
}

.online-account-panel-live .online-light-table tbody tr:nth-child(even),
.online-account-panel-demo .online-light-table tbody tr:nth-child(even) {
    background: linear-gradient(90deg, var(--online-account-row-tint-strong, transparent), color-mix(in srgb, var(--online-surface-soft) 28%, transparent) 58%);
}

.online-light-table tbody tr:hover {
    background: color-mix(in srgb, var(--online-accent) 5%, var(--online-surface));
}

.online-account-panel-live .online-light-table tbody tr:hover,
.online-account-panel-demo .online-light-table tbody tr:hover {
    background: linear-gradient(90deg, var(--online-account-row-tint-strong, transparent), color-mix(in srgb, var(--online-accent) 8%, var(--online-surface)) 62%);
}

.online-light-table tbody tr:last-child td {
    border-bottom: 0;
}

.online-login-cell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.online-login-cell strong {
    font-size: 0.98rem;
}

.online-row-description {
    display: block;
    max-width: 100%;
    color: var(--online-muted);
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.online-inline-link {
    color: var(--online-accent);
    font-size: 0.78rem;
    font-weight: 700;
}

.online-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    width: 100%;
}

.online-actions-col {
    width: 96px;
    text-align: right !important;
}

.online-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border: 1px solid var(--online-border);
    border-radius: 7px;
    background: var(--online-surface);
    color: var(--online-text);
    text-decoration: none;
    transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.online-icon-action:hover,
.online-icon-action:focus {
    border-color: color-mix(in srgb, var(--online-accent) 42%, transparent);
    background: color-mix(in srgb, var(--online-accent) 12%, var(--online-surface));
    color: var(--online-accent);
    text-decoration: none;
    transform: translateY(-1px);
}

.online-icon-action-primary {
    border-color: transparent;
    background: var(--online-accent);
    color: #fff;
}

.online-empty-state {
    padding: 1.35rem;
    color: var(--online-muted);
    font-weight: 700;
}

.online-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 0.55rem;
    border-radius: 999px;
    background: var(--online-surface-soft);
    color: var(--online-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.online-status-pill.is-active {
    background: rgba(0, 159, 122, 0.14);
    color: var(--online-success);
}

.online-transactions-history {
    gap: 0.85rem;
}

.online-transaction-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.95fr);
    gap: 1rem;
    align-items: stretch;
}

.online-transaction-summary-main,
.online-transaction-metrics > div,
.online-transaction-tabs,
.online-transaction-list-shell {
    border: 1px solid var(--online-border);
    border-radius: 8px;
    background: var(--online-surface);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

.online-transaction-summary-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 1rem 1.1rem;
}

.online-transaction-summary-main span,
.online-transaction-metrics span,
.online-transaction-footer,
.online-transaction-page-size {
    color: var(--online-muted);
}

.online-transaction-summary-main span,
.online-transaction-metrics span {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.online-transaction-summary-main h2 {
    margin: 0.25rem 0 0;
    color: var(--online-text);
    font-size: 1.25rem;
    font-weight: 800;
}

.online-transaction-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.online-transaction-metrics > div {
    min-width: 0;
    padding: 0.9rem 1rem;
}

.online-transaction-metrics strong {
    display: block;
    margin-top: 0.25rem;
    color: var(--online-text);
    font-size: 1.25rem;
    font-weight: 850;
}

.online-transaction-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.55rem;
}

.online-transaction-tabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 38px;
    padding: 0 0.8rem;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--online-muted);
    font-weight: 800;
}

.online-transaction-tabs button:hover,
.online-transaction-tabs button.is-active {
    border-color: rgba(15, 111, 237, 0.18);
    background: rgba(15, 111, 237, 0.11);
    color: var(--online-accent);
}

.online-transaction-panel {
    display: none;
}

.online-transaction-panel.is-active {
    display: block;
}

.online-transaction-toolbar,
.online-transaction-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--online-border);
    background: var(--online-surface);
}

.online-account-panel .online-transaction-toolbar {
    justify-content: flex-end;
}

.online-transaction-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    min-width: min(360px, 100%);
    min-height: 38px;
    padding: 0 0.75rem;
    border: 1px solid var(--online-border);
    border-radius: 7px;
    background: var(--online-surface-soft);
    color: var(--online-muted);
}

.online-transaction-search input {
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--online-text);
    font-weight: 700;
}

.online-transaction-toolbar-actions,
.online-transaction-pager {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.online-transaction-toolbar-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.online-account-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--online-border);
    background: var(--online-surface);
}

.online-account-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 38px;
    min-width: 190px;
    padding: 0 0.65rem;
    border: 1px solid var(--online-border);
    border-radius: 7px;
    background: var(--online-surface-soft);
    color: var(--online-muted);
    font-weight: 800;
}

.online-account-sort .online-light-select {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
}

.online-light-select {
    min-height: 38px;
    border: 1px solid var(--online-border);
    border-radius: 7px;
    background: var(--online-surface);
    color: var(--online-text);
    font-weight: 800;
}

.online-transaction-page-size {
    min-height: 38px;
    min-width: 76px;
    border: 1px solid var(--online-border);
    border-radius: 7px;
    background: var(--online-surface);
    font-weight: 800;
}

.online-transaction-table {
    min-width: 920px;
}

.online-transaction-id {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--online-accent);
    font-weight: 850;
}

.online-transaction-amount-col,
.online-transaction-amount {
    text-align: right !important;
}

.online-transaction-amount {
    font-weight: 850;
}

.online-transaction-amount.is-in {
    color: var(--online-success);
}

.online-transaction-amount.is-out {
    color: #b42318;
}

.online-status-pill.is-approved {
    background: rgba(0, 159, 122, 0.14);
    color: var(--online-success);
}

.online-status-pill.is-rejected {
    background: rgba(180, 35, 24, 0.12);
    color: #b42318;
}

.online-status-pill.is-pending {
    background: rgba(217, 119, 6, 0.14);
    color: #b45309;
}

.online-transaction-footer {
    border-top: 1px solid var(--online-border);
    border-bottom: 0;
    font-weight: 800;
}

.online-transaction-pager > span {
    min-width: 70px;
    color: var(--online-text);
    text-align: center;
}

.online-transaction-pager .online-icon-action:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.online-helpdesk-page {
    gap: 0.85rem;
}

.online-helpdesk-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.95fr);
    gap: 1rem;
    align-items: stretch;
}

.online-helpdesk-summary-main,
.online-helpdesk-metrics > div,
.online-helpdesk-filter-tabs,
.online-helpdesk-list-shell {
    border: 1px solid var(--online-border);
    border-radius: 8px;
    background: var(--online-surface);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

.online-helpdesk-summary-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 1rem 1.1rem;
}

.online-helpdesk-summary-main span,
.online-helpdesk-metrics span {
    color: var(--online-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.online-helpdesk-summary-main h2 {
    margin: 0.25rem 0 0;
    color: var(--online-text);
    font-size: 1.25rem;
    font-weight: 800;
}

.online-helpdesk-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.online-helpdesk-metrics > div {
    min-width: 0;
    padding: 0.9rem 1rem;
}

.online-helpdesk-metrics strong {
    display: block;
    margin-top: 0.25rem;
    color: var(--online-text);
    font-size: 1.25rem;
    font-weight: 850;
}

.online-helpdesk-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.55rem;
}

.online-helpdesk-filter-tabs a,
.online-helpdesk-add-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 38px;
    padding: 0 0.8rem;
    border-radius: 7px;
    font-weight: 800;
}

.online-helpdesk-filter-tabs a {
    border: 1px solid transparent;
    background: transparent;
    color: var(--online-muted);
}

.online-helpdesk-filter-tabs a:hover,
.online-helpdesk-filter-tabs a.is-active {
    border-color: rgba(15, 111, 237, 0.18);
    background: rgba(15, 111, 237, 0.11);
    color: var(--online-accent);
}

.online-helpdesk-add-action {
    border: 1px solid transparent;
    background: var(--online-accent);
    color: #fff;
}

.online-helpdesk-table {
    min-width: 940px;
}

.online-helpdesk-title-cell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.online-helpdesk-title-cell strong {
    color: var(--online-text);
    font-weight: 850;
}

.online-helpdesk-title-cell span {
    max-width: 680px;
    color: var(--online-muted);
    font-size: 0.8rem;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.dark-mode .online-helpdesk-page {
    --online-surface: #1a222c;
    --online-surface-soft: #151c24;
    --online-border: rgba(148, 163, 184, 0.2);
    --online-text: #e6edf3;
    --online-muted: #aebdca;
    --online-accent: #86b5c8;
}

body.dark-mode .online-helpdesk-summary-main,
body.dark-mode .online-helpdesk-metrics > div,
body.dark-mode .online-helpdesk-filter-tabs,
body.dark-mode .online-helpdesk-list-shell {
    border-color: var(--online-border);
    background: var(--online-surface);
}

body.dark-mode .online-helpdesk-summary-main h2,
body.dark-mode .online-helpdesk-metrics strong,
body.dark-mode .online-helpdesk-title-cell strong,
body.dark-mode .online-helpdesk-table td,
body.dark-mode .online-helpdesk-table td strong {
    color: var(--online-text);
}

body.dark-mode .online-helpdesk-summary-main span,
body.dark-mode .online-helpdesk-metrics span,
body.dark-mode .online-helpdesk-title-cell span {
    color: var(--online-muted);
}

body.dark-mode .online-helpdesk-filter-tabs a {
    color: var(--online-muted) !important;
}

body.dark-mode .online-helpdesk-filter-tabs a i,
body.dark-mode .online-helpdesk-filter-tabs a span {
    color: currentColor !important;
}

body.dark-mode .online-helpdesk-filter-tabs a:hover,
body.dark-mode .online-helpdesk-filter-tabs a:focus,
body.dark-mode .online-helpdesk-filter-tabs a.is-active {
    border-color: rgba(134, 181, 200, 0.38);
    background: rgba(134, 181, 200, 0.14);
    color: #eef8fc !important;
}

body.dark-mode .online-helpdesk-add-action {
    border-color: rgba(134, 181, 200, 0.32);
    background: #3f8297;
    color: #f4fbff !important;
}

body.dark-mode .online-helpdesk-add-action i,
body.dark-mode .online-helpdesk-add-action span {
    color: currentColor !important;
}

body.dark-mode .online-helpdesk-list-shell .online-icon-action,
body.dark-mode .online-helpdesk-list-shell .online-transaction-id {
    color: var(--online-text) !important;
}

body.dark-mode .online-helpdesk-list-shell .online-icon-action i,
body.dark-mode .online-helpdesk-list-shell .online-transaction-id i,
body.dark-mode .online-helpdesk-list-shell .online-transaction-id span {
    color: currentColor !important;
}

body.dark-mode .online-helpdesk-list-shell .online-icon-action:hover,
body.dark-mode .online-helpdesk-list-shell .online-icon-action:focus,
body.dark-mode .online-helpdesk-list-shell .online-transaction-id:hover,
body.dark-mode .online-helpdesk-list-shell .online-transaction-id:focus {
    color: #f4fbff !important;
}

/* Client panel new-mode downloads */
.online-downloads-page {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: 22px 12px 48px;
}

.online-downloads-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding: 18px 20px;
    border: 1px solid var(--online-border, #d9e1ea);
    border-radius: 8px;
    background: var(--online-surface, #fff);
}

.online-downloads-hero h2,
.online-download-platform-head h3,
.online-download-card h4 {
    margin: 0;
    color: var(--online-text, #17202c);
}

.online-downloads-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.online-download-platform {
    overflow: hidden;
    padding: 0;
}

.online-download-platform-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--online-border, #d9e1ea);
    background: color-mix(in srgb, var(--online-surface-soft, #f5f7fb) 76%, var(--online-surface, #fff));
}

.online-download-platform-head h3 {
    font-size: 18px;
    line-height: 1.25;
}

.online-download-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 16px;
}

.online-download-card {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 14px;
    min-height: 244px;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--online-border, #d9e1ea) 88%, transparent);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(127, 166, 181, .08), transparent 44%),
        var(--online-surface-soft, #f5f7fb);
    color: var(--online-text, #17202c);
}

.online-download-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border-top: 3px solid rgba(127, 166, 181, .46);
    pointer-events: none;
}

.online-download-card-windows::before {
    border-top-color: rgba(51, 122, 183, .62);
}

.online-download-card-android::before {
    border-top-color: rgba(34, 197, 94, .58);
}

.online-download-card-apple::before {
    border-top-color: rgba(148, 163, 184, .64);
}

.online-download-card-web::before {
    border-top-color: rgba(20, 184, 166, .58);
}

.online-download-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: rgba(127, 166, 181, .16);
    color: var(--online-accent, #0f6fed);
    font-size: 24px;
}

.online-download-card-windows .online-download-card-icon {
    color: #2f80d0;
}

.online-download-card-android .online-download-card-icon {
    color: #22b86f;
}

.online-download-card-apple .online-download-card-icon {
    color: #6b7888;
}

.online-download-card-web .online-download-card-icon {
    color: #159c91;
}

.online-download-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.online-download-card h4 {
    font-size: 16px;
    line-height: 1.3;
}

.online-download-card p {
    margin: 0;
    color: var(--online-muted, #64748b);
    font-size: 13px;
    line-height: 1.5;
}

.online-download-card-footer {
    display: flex;
    align-items: center;
}

.online-download-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid color-mix(in srgb, var(--online-accent, #0f6fed) 44%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--online-accent, #0f6fed) 12%, var(--online-surface, #fff));
    color: var(--online-accent, #0f6fed);
    font-weight: 800;
    text-decoration: none;
}

.online-download-action:hover,
.online-download-action:focus {
    border-color: color-mix(in srgb, var(--online-accent, #0f6fed) 62%, transparent);
    background: color-mix(in srgb, var(--online-accent, #0f6fed) 18%, var(--online-surface, #fff));
    color: var(--online-accent, #0f6fed);
    text-decoration: none;
}

.online-download-action.is-disabled,
.online-download-card.is-disabled .online-download-action {
    border-color: var(--online-border, #d9e1ea);
    background: transparent;
    color: var(--online-muted, #64748b);
    opacity: .72;
    pointer-events: none;
}

.online-download-card.is-disabled {
    opacity: .72;
}

body.dark-mode .online-downloads-page {
    --online-surface: #1a222c;
    --online-surface-soft: #151c24;
    --online-border: rgba(148, 163, 184, 0.2);
    --online-text: #e6edf3;
    --online-muted: #aebdca;
    --online-accent: #86b5c8;
}

body.dark-mode .online-downloads-hero,
body.dark-mode .online-download-platform {
    border-color: var(--online-border);
    background: var(--online-surface);
}

body.dark-mode .online-download-platform-head {
    border-color: var(--online-border);
    background: color-mix(in srgb, var(--online-surface-soft) 74%, var(--online-surface));
}

body.dark-mode .online-downloads-hero h2,
body.dark-mode .online-download-platform-head h3,
body.dark-mode .online-download-card h4 {
    color: var(--online-text);
}

body.dark-mode .online-download-card {
    border-color: rgba(148, 163, 184, .18);
    background:
        linear-gradient(135deg, rgba(127, 166, 181, .10), transparent 48%),
        rgba(21, 28, 36, .92);
    color: var(--online-text);
}

body.dark-mode .online-download-card p {
    color: var(--online-muted);
}

body.dark-mode .online-download-card-icon {
    background: rgba(127, 166, 181, .16);
}

body.dark-mode .online-download-card-windows .online-download-card-icon {
    color: #7ab5e6;
}

body.dark-mode .online-download-card-android .online-download-card-icon {
    color: #5edb9b;
}

body.dark-mode .online-download-card-apple .online-download-card-icon {
    color: #d6e0e8;
}

body.dark-mode .online-download-card-web .online-download-card-icon {
    color: #5bd2c5;
}

body.dark-mode .online-download-action {
    border-color: rgba(134, 181, 200, .38);
    background: rgba(134, 181, 200, .12);
    color: #eaf7fb;
}

body.dark-mode .online-download-action:hover,
body.dark-mode .online-download-action:focus {
    border-color: rgba(134, 181, 200, .54);
    background: rgba(134, 181, 200, .18);
    color: #ffffff;
}

body.dark-mode .online-download-action.is-disabled,
body.dark-mode .online-download-card.is-disabled .online-download-action {
    border-color: rgba(148, 163, 184, .16);
    color: #8394a5;
}

@media (max-width: 991.98px) {
    .online-download-card-grid {
        grid-template-columns: 1fr;
    }

    .online-downloads-page {
        padding-inline: 0;
    }
}

@media (max-width: 575.98px) {
    .online-downloads-hero,
    .online-download-platform-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .online-download-action {
        width: 100%;
    }
}

@media (max-width: 991px) {
    .online-helpdesk-summary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .online-helpdesk-metrics {
        grid-template-columns: 1fr;
    }

    .online-helpdesk-add-action span {
        display: none;
    }
}

.online-ib-dashboard {
    gap: 0.85rem;
}

.online-ib-wallet-hero,
.online-ib-metrics > div,
.online-ib-list-shell {
    border: 1px solid var(--online-border);
    border-radius: 8px;
    background: var(--online-surface);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

.online-ib-wallet-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.1rem;
}

.online-ib-wallet-main {
    min-width: 0;
}

.online-ib-wallet-main span,
.online-ib-metrics span,
.online-ib-inline-total {
    color: var(--online-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.online-ib-wallet-main h2 {
    margin: 0.25rem 0;
    color: var(--online-text);
    font-size: 1.25rem;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.online-ib-wallet-main strong {
    display: block;
    color: var(--online-accent);
    font-size: 1.75rem;
    font-weight: 900;
}

.online-ib-wallet-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.online-ib-transfer-action {
    width: 40px;
    height: 40px;
}

.online-ib-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.online-ib-metrics > div {
    min-width: 0;
    padding: 0.9rem 1rem;
}

.online-ib-metrics strong {
    display: block;
    margin-top: 0.25rem;
    color: var(--online-text);
    font-size: 1.2rem;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.online-ib-tabs {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

.online-ib-panel {
    display: none;
}

.online-ib-panel.is-active {
    display: block;
}

.online-ib-table {
    min-width: 980px;
}

.online-ib-note-cell {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.online-ib-inline-total {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 0.7rem;
    border: 1px solid var(--online-border);
    border-radius: 7px;
    background: var(--online-surface-soft);
    color: var(--online-muted);
}

@media (max-width: 991px) {
    .online-ib-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .online-ib-wallet-hero,
    .online-ib-metrics {
        grid-template-columns: 1fr;
    }

    .online-ib-wallet-actions {
        justify-content: flex-start;
    }

    .online-ib-inline-total {
        width: 100%;
    }
}

.online-ib-links {
    gap: 0.85rem;
}

.online-ib-links-hero,
.online-ib-links-shell,
.online-ib-links-metrics > div {
    border: 1px solid var(--online-border);
    border-radius: 8px;
    background: var(--online-surface);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

.online-ib-links-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(420px, 1.25fr);
    gap: 1rem;
    align-items: stretch;
    padding: 1rem 1.1rem;
}

.online-ib-links-hero > div:first-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.online-ib-links-hero span,
.online-ib-links-metrics span {
    color: var(--online-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.online-ib-links-hero h2 {
    margin: 0.25rem 0 0;
    color: var(--online-text);
    font-size: 1.25rem;
    font-weight: 850;
}

.online-ib-links-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.online-ib-links-metrics > div {
    min-width: 0;
    padding: 0.85rem 0.95rem;
}

.online-ib-links-metrics strong {
    display: block;
    margin-top: 0.25rem;
    color: var(--online-text);
    font-size: 1.15rem;
    font-weight: 850;
}

.online-ib-links-table {
    min-width: 1080px;
}

.online-ib-grid-description {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    padding: 0.75rem 1rem 0.9rem;
    border-top: 1px solid var(--online-border);
    background: color-mix(in srgb, var(--online-surface-soft) 72%, var(--online-surface));
}

.online-ib-grid-description > div {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--online-border);
    border-radius: 8px;
    background: var(--online-surface);
}

.online-ib-grid-description strong,
.online-ib-grid-description span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.online-ib-grid-description strong {
    color: var(--online-text);
    font-size: 0.82rem;
    font-weight: 900;
}

.online-ib-grid-description span {
    color: var(--online-muted);
    font-size: 0.76rem;
    font-weight: 760;
    line-height: 1.35;
}

.online-ib-link-cell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: center;
}

.online-ib-link-cell span {
    min-width: 0;
    color: var(--online-text);
    overflow-wrap: anywhere;
    font-size: 0.85rem;
    font-weight: 700;
}

.online-ib-link-modal[hidden] {
    display: none;
}

.online-ib-link-modal {
    position: fixed;
    inset: 0;
    z-index: 2050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.42);
}

.online-ib-link-modal-dialog {
    width: min(100%, 560px);
    border: 1px solid var(--online-border);
    border-radius: 8px;
    background: var(--online-surface);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}

.online-ib-link-modal-dialog > header,
.online-ib-link-modal-dialog form > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--online-border);
}

.online-ib-link-modal-dialog h3 {
    margin: 0;
    color: var(--online-text);
    font-size: 1rem;
    font-weight: 850;
}

.online-ib-link-form-grid {
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
}

.online-ib-link-form-grid label {
    display: grid;
    gap: 0.35rem;
    margin: 0;
}

.online-ib-link-form-grid label > span {
    color: var(--online-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.online-ib-link-form-grid input[type="text"],
.online-ib-link-form-grid select {
    min-height: 38px;
    width: 100%;
    border: 1px solid var(--online-border);
    border-radius: 7px;
    background: var(--online-surface-soft);
    color: var(--online-text);
    font-weight: 700;
}

.online-ib-link-edit-grid .online-native-field::after {
    content: attr(data-description);
    display: block;
    color: var(--online-muted);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.35;
}

.online-ib-link-switch {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.online-ib-link-switch input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.online-ib-link-modal-dialog form > footer {
    justify-content: flex-end;
    border-top: 1px solid var(--online-border);
    border-bottom: 0;
}

@media (max-width: 991px) {
    .online-ib-links-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .online-ib-links-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .online-ib-grid-description {
        grid-template-columns: 1fr;
        padding: 0.65rem 0.75rem;
    }
}

.online-ib-referrals {
    gap: 0.85rem;
}

.online-ib-referrals-info,
.online-ib-referrals-hero,
.online-ib-referrals-shell,
.online-ib-referrals-metrics > div {
    border: 1px solid var(--online-border);
    border-radius: 8px;
    background: var(--online-surface);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

.online-ib-referrals-info {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.8rem;
    align-items: start;
    padding: 0.95rem 1rem;
    border-color: rgba(245, 158, 11, 0.35);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), var(--online-surface));
}

.online-ib-referrals-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f59e0b;
    color: #111827;
}

.online-ib-referrals-info strong {
    display: block;
    color: var(--online-text);
    font-weight: 900;
}

.online-ib-referrals-info p {
    margin: 0.25rem 0 0;
    color: var(--online-text);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.45;
}

.online-ib-referrals-info a {
    color: var(--online-accent);
    font-weight: 900;
    text-decoration: underline;
}

.online-ib-referrals-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(420px, 1.25fr);
    gap: 1rem;
    align-items: stretch;
    padding: 1rem 1.1rem;
}

.online-ib-referrals-hero > div:first-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.online-ib-referrals-hero span,
.online-ib-referrals-metrics span {
    color: var(--online-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.online-ib-referrals-hero h2 {
    margin: 0.25rem 0 0;
    color: var(--online-text);
    font-size: 1.25rem;
    font-weight: 850;
}

.online-ib-referrals-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.online-ib-referrals-metrics > div {
    min-width: 0;
    padding: 0.85rem 0.95rem;
}

.online-ib-referrals-metrics strong {
    display: block;
    margin-top: 0.25rem;
    color: var(--online-text);
    font-size: 1.15rem;
    font-weight: 850;
}

.online-ib-referrals-table {
    min-width: 1040px;
}

.online-ib-referrals-id {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 0.55rem;
    border-radius: 7px;
    background: var(--online-surface-soft);
    color: var(--online-accent);
    font-weight: 900;
}

.online-ib-referrals-email,
.online-ib-referrals-source {
    display: inline-block;
    max-width: 100%;
    color: var(--online-text);
    overflow-wrap: anywhere;
    font-weight: 700;
}

@media (max-width: 991px) {
    .online-ib-referrals-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .online-ib-referrals-info,
    .online-ib-referrals-metrics {
        grid-template-columns: 1fr;
    }
}

.online-ib-customers {
    gap: 0.85rem;
}

.online-ib-customers-info,
.online-ib-customers-hero,
.online-ib-customers-shell,
.online-ib-customers-metrics > div {
    border: 1px solid var(--online-border);
    border-radius: 8px;
    background: var(--online-surface);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

.online-ib-customers-info {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.8rem;
    align-items: start;
    padding: 0.95rem 1rem;
    border-color: rgba(6, 182, 212, 0.35);
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.16), var(--online-surface));
}

.online-ib-customers-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #06b6d4;
    color: #10202a;
}

.online-ib-customers-info strong {
    display: block;
    color: var(--online-text);
    font-weight: 900;
}

.online-ib-customers-info p {
    margin: 0.25rem 0 0;
    color: var(--online-text);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.45;
}

.online-ib-customers-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(420px, 1.25fr);
    gap: 1rem;
    align-items: stretch;
    padding: 1rem 1.1rem;
}

.online-ib-customers-hero > div:first-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.online-ib-customers-hero span,
.online-ib-customers-metrics span {
    color: var(--online-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.online-ib-customers-hero h2 {
    margin: 0.25rem 0 0;
    color: var(--online-text);
    font-size: 1.25rem;
    font-weight: 850;
}

.online-ib-customers-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.online-ib-customers-metrics > div {
    min-width: 0;
    padding: 0.85rem 0.95rem;
}

.online-ib-customers-metrics strong {
    display: block;
    margin-top: 0.25rem;
    color: var(--online-text);
    font-size: 1.15rem;
    font-weight: 850;
}

.online-ib-customers-table {
    min-width: 1080px;
}

.online-ib-customers-id {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 0.55rem;
    border-radius: 7px;
    background: var(--online-surface-soft);
    color: var(--online-accent);
    font-weight: 900;
}

.online-ib-customers-note {
    display: inline-block;
    max-width: 320px;
    color: var(--online-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

@media (max-width: 991px) {
    .online-ib-customers-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .online-ib-customers-info,
    .online-ib-customers-metrics {
        grid-template-columns: 1fr;
    }
}

.online-ib-clients {
    gap: 0.85rem;
}

.online-ib-clients-info,
.online-ib-clients-hero,
.online-ib-clients-shell,
.online-ib-clients-metrics > div {
    border: 1px solid var(--online-border);
    border-radius: 8px;
    background: var(--online-surface);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

.online-ib-clients-info {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.8rem;
    align-items: start;
    padding: 0.95rem 1rem;
    border-color: rgba(34, 197, 94, 0.35);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.16), var(--online-surface));
}

.online-ib-clients-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #22c55e;
    color: #052e16;
}

.online-ib-clients-info strong {
    display: block;
    color: var(--online-text);
    font-weight: 900;
}

.online-ib-clients-info p {
    margin: 0.25rem 0 0;
    color: var(--online-text);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.45;
}

.online-ib-clients-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(420px, 1.25fr);
    gap: 1rem;
    align-items: stretch;
    padding: 1rem 1.1rem;
}

.online-ib-clients-hero > div:first-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.online-ib-clients-hero span,
.online-ib-clients-metrics span {
    color: var(--online-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.online-ib-clients-hero h2 {
    margin: 0.25rem 0 0;
    color: var(--online-text);
    font-size: 1.25rem;
    font-weight: 850;
}

.online-ib-clients-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.online-ib-clients-metrics > div {
    min-width: 0;
    padding: 0.85rem 0.95rem;
}

.online-ib-clients-metrics strong {
    display: block;
    margin-top: 0.25rem;
    color: var(--online-text);
    font-size: 1.15rem;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.online-ib-clients-table {
    min-width: 1180px;
}

.online-ib-clients-id {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 0.55rem;
    border-radius: 7px;
    background: var(--online-surface-soft);
    color: var(--online-accent);
    font-weight: 900;
}

@media (max-width: 991px) {
    .online-ib-clients-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .online-ib-clients-info,
    .online-ib-clients-metrics {
        grid-template-columns: 1fr;
    }
}

body.dark-mode .online-home-new {
    --online-surface: #1a222c;
    --online-surface-soft: #151c24;
    --online-border: rgba(148, 163, 184, 0.18);
    --online-text: #e6edf3;
    --online-muted: #9ca8b5;
    --online-accent: #7fa6b5;
    --online-success: #68b0a4;
}

body.dark-mode .online-profile-avatar {
    border-color: #151b25;
    background: #111827;
}

body.dark-mode .online-profile-avatar-fallback,
body.dark-mode .online-classic-avatar-fallback {
    color: #10202a;
    background: linear-gradient(135deg, #7fa6b5, #68b0a4);
}

body.dark-mode .online-icon-action-primary,
body.dark-mode.crm-ui-mode-new .online-quick-action-live,
body.dark-mode.crm-ui-mode-new .online-quick-action-deposit {
    color: #10202a;
}

body.dark-mode.crm-ui-mode-new .online-quick-action-live:hover,
body.dark-mode.crm-ui-mode-new .online-quick-action-live:focus,
body.dark-mode.crm-ui-mode-new .online-quick-action-deposit:hover,
body.dark-mode.crm-ui-mode-new .online-quick-action-deposit:focus {
    color: #10202a;
}

.online-form-shell {
    --online-surface: #ffffff;
    --online-surface-soft: #f5f7fb;
    --online-border: #d9e1ea;
    --online-text: #17202c;
    --online-muted: #64748b;
    --online-accent: #0f6fed;
    --online-success: #009f7a;
    max-width: 1180px;
    margin: 0 auto 1.5rem;
    padding: 0 1rem 1rem;
    color: var(--online-text);
}

.online-form-progress {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.65rem;
    margin: 0.25rem 0 1rem;
}

.online-form-step {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    min-height: 44px;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--online-border);
    border-radius: 8px;
    background: var(--online-surface);
    color: var(--online-muted);
    font-size: 0.85rem;
    font-weight: 800;
}

.online-form-step span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--online-surface-soft);
    color: var(--online-muted);
}

.online-form-step.is-active {
    border-color: rgba(15, 111, 237, 0.38);
    color: var(--online-accent);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.online-form-step.is-active span {
    background: var(--online-accent);
    color: #fff;
}

.online-form-step.is-complete {
    color: var(--online-success);
}

.online-form-grid {
    display: grid;
    grid-template-columns: minmax(320px, 680px);
    gap: 1rem;
    align-items: start;
    justify-content: center;
}

.online-form-card {
    display: none;
    min-width: 0;
    border: 1px solid var(--online-border);
    border-radius: 8px;
    background: var(--online-surface);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
    opacity: 0.78;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.online-form-card.is-active,
.online-form-card.is-complete {
    opacity: 1;
}

.online-form-card.is-active {
    display: block;
}

.online-form-card.is-active {
    border-color: rgba(15, 111, 237, 0.46);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
}

.online-form-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem;
}

.online-form-card-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--online-border);
}

.online-form-card-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--online-accent);
    color: #fff;
    font-weight: 900;
}

.online-form-card-header h3 {
    margin: 0;
    color: var(--online-text);
    font-size: 1rem;
    font-weight: 850;
}

.online-form-card-header p {
    margin: 0.15rem 0 0;
    color: var(--online-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.online-form-shell .profile-list-item,
.online-form-shell .form-row {
    display: grid;
    grid-template-columns: minmax(130px, 0.38fr) minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    min-height: 48px;
    margin: 0 !important;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--online-border);
    border-radius: 8px;
    background: var(--online-surface-soft);
}

.online-form-shell .form-input-label {
    min-width: 0;
    color: var(--online-text);
    font-weight: 800;
}

.online-form-shell .form-input-label label {
    margin: 0;
}

.online-form-shell .form-input,
.online-form-shell .form-input-element,
.online-form-shell .k-widget,
.online-form-shell .k-picker,
.online-form-shell .k-dropdown,
.online-form-shell .k-combobox,
.online-form-shell .k-numerictextbox,
.online-form-shell .k-upload {
    width: 100% !important;
    min-width: 0 !important;
}

body.crm-ui-mode-new .online-form-shell .online-native-field,
body.crm-ui-mode-light .online-form-shell .online-native-field,
body.crm-ui-mode-hybrid .online-form-shell .online-native-field,
body.crm-ui-mode-new .online-native-payment-grid .crm-native-field,
body.crm-ui-mode-light .online-native-payment-grid .crm-native-field,
body.crm-ui-mode-hybrid .online-native-payment-grid .crm-native-field {
    gap: 0.45rem;
}

body.crm-ui-mode-new .online-form-shell .online-native-field > span:first-child,
body.crm-ui-mode-light .online-form-shell .online-native-field > span:first-child,
body.crm-ui-mode-hybrid .online-form-shell .online-native-field > span:first-child,
body.crm-ui-mode-new .online-native-payment-grid .crm-native-field > span:first-child,
body.crm-ui-mode-light .online-native-payment-grid .crm-native-field > span:first-child,
body.crm-ui-mode-hybrid .online-native-payment-grid .crm-native-field > span:first-child {
    color: var(--online-muted);
    font-size: 0.74rem;
    font-weight: 850;
    text-transform: uppercase;
}

body.crm-ui-mode-new .online-form-shell .online-native-input,
body.crm-ui-mode-new .online-form-shell .online-native-textarea,
body.crm-ui-mode-new .online-form-shell .crm-native-control,
body.crm-ui-mode-new .online-form-shell .form-control,
body.crm-ui-mode-new .online-form-shell .k-input,
body.crm-ui-mode-new .online-form-shell .k-input-inner,
body.crm-ui-mode-new .online-form-shell .k-picker,
body.crm-ui-mode-new .online-form-shell .k-dropdownlist,
body.crm-ui-mode-new .online-form-shell .k-numerictextbox,
body.crm-ui-mode-new .online-form-shell .k-textbox,
body.crm-ui-mode-light .online-form-shell .online-native-input,
body.crm-ui-mode-light .online-form-shell .online-native-textarea,
body.crm-ui-mode-light .online-form-shell .crm-native-control,
body.crm-ui-mode-light .online-form-shell .form-control,
body.crm-ui-mode-light .online-form-shell .k-input,
body.crm-ui-mode-light .online-form-shell .k-input-inner,
body.crm-ui-mode-light .online-form-shell .k-picker,
body.crm-ui-mode-light .online-form-shell .k-dropdownlist,
body.crm-ui-mode-light .online-form-shell .k-numerictextbox,
body.crm-ui-mode-light .online-form-shell .k-textbox,
body.crm-ui-mode-hybrid .online-form-shell .online-native-input,
body.crm-ui-mode-hybrid .online-form-shell .online-native-textarea,
body.crm-ui-mode-hybrid .online-form-shell .crm-native-control,
body.crm-ui-mode-hybrid .online-form-shell .form-control,
body.crm-ui-mode-hybrid .online-form-shell .k-input,
body.crm-ui-mode-hybrid .online-form-shell .k-input-inner,
body.crm-ui-mode-hybrid .online-form-shell .k-picker,
body.crm-ui-mode-hybrid .online-form-shell .k-dropdownlist,
body.crm-ui-mode-hybrid .online-form-shell .k-numerictextbox,
body.crm-ui-mode-hybrid .online-form-shell .k-textbox,
body.crm-ui-mode-new .online-native-payment-grid .crm-native-control,
body.crm-ui-mode-new .online-native-payment-grid .k-input,
body.crm-ui-mode-new .online-native-payment-grid .k-input-inner,
body.crm-ui-mode-new .online-native-payment-grid .k-picker,
body.crm-ui-mode-new .online-native-payment-grid .k-dropdownlist,
body.crm-ui-mode-new .online-native-payment-grid .k-numerictextbox,
body.crm-ui-mode-light .online-native-payment-grid .crm-native-control,
body.crm-ui-mode-light .online-native-payment-grid .k-input,
body.crm-ui-mode-light .online-native-payment-grid .k-input-inner,
body.crm-ui-mode-light .online-native-payment-grid .k-picker,
body.crm-ui-mode-light .online-native-payment-grid .k-dropdownlist,
body.crm-ui-mode-light .online-native-payment-grid .k-numerictextbox,
body.crm-ui-mode-hybrid .online-native-payment-grid .crm-native-control,
body.crm-ui-mode-hybrid .online-native-payment-grid .k-input,
body.crm-ui-mode-hybrid .online-native-payment-grid .k-input-inner,
body.crm-ui-mode-hybrid .online-native-payment-grid .k-picker,
body.crm-ui-mode-hybrid .online-native-payment-grid .k-dropdownlist,
body.crm-ui-mode-hybrid .online-native-payment-grid .k-numerictextbox {
    min-height: 44px !important;
    border: 1px solid color-mix(in srgb, var(--online-border) 86%, var(--online-accent)) !important;
    border-radius: 8px !important;
    background-color: var(--online-surface) !important;
    color: var(--online-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    font-size: 0.9rem !important;
    font-weight: 750 !important;
}

body.crm-ui-mode-new .online-form-shell .k-input-inner,
body.crm-ui-mode-light .online-form-shell .k-input-inner,
body.crm-ui-mode-hybrid .online-form-shell .k-input-inner,
body.crm-ui-mode-new .online-native-payment-grid .k-input-inner,
body.crm-ui-mode-light .online-native-payment-grid .k-input-inner,
body.crm-ui-mode-hybrid .online-native-payment-grid .k-input-inner {
    padding-inline: 0.75rem !important;
    background-color: transparent !important;
}

body.crm-ui-mode-new .online-form-shell .k-input-button,
body.crm-ui-mode-new .online-form-shell .k-button.k-input-button,
body.crm-ui-mode-light .online-form-shell .k-input-button,
body.crm-ui-mode-light .online-form-shell .k-button.k-input-button,
body.crm-ui-mode-hybrid .online-form-shell .k-input-button,
body.crm-ui-mode-hybrid .online-form-shell .k-button.k-input-button,
body.crm-ui-mode-new .online-native-payment-grid .k-input-button,
body.crm-ui-mode-new .online-native-payment-grid .k-button.k-input-button,
body.crm-ui-mode-light .online-native-payment-grid .k-input-button,
body.crm-ui-mode-light .online-native-payment-grid .k-button.k-input-button,
body.crm-ui-mode-hybrid .online-native-payment-grid .k-input-button,
body.crm-ui-mode-hybrid .online-native-payment-grid .k-button.k-input-button {
    width: 40px !important;
    min-width: 40px !important;
    min-height: 42px !important;
    max-height: none !important;
    border: 0 !important;
    border-left: 1px solid color-mix(in srgb, var(--online-border) 84%, transparent) !important;
    border-radius: 0 8px 8px 0 !important;
    background: color-mix(in srgb, var(--online-surface-soft) 82%, var(--online-surface)) !important;
    color: var(--online-muted) !important;
}

body.crm-ui-mode-new .online-form-shell .online-native-input:focus,
body.crm-ui-mode-new .online-form-shell .online-native-textarea:focus,
body.crm-ui-mode-new .online-form-shell .crm-native-control:focus,
body.crm-ui-mode-new .online-form-shell .form-control:focus,
body.crm-ui-mode-new .online-form-shell .k-picker:focus-within,
body.crm-ui-mode-new .online-form-shell .k-dropdownlist:focus-within,
body.crm-ui-mode-new .online-form-shell .k-numerictextbox:focus-within,
body.crm-ui-mode-light .online-form-shell .online-native-input:focus,
body.crm-ui-mode-light .online-form-shell .online-native-textarea:focus,
body.crm-ui-mode-light .online-form-shell .crm-native-control:focus,
body.crm-ui-mode-light .online-form-shell .form-control:focus,
body.crm-ui-mode-light .online-form-shell .k-picker:focus-within,
body.crm-ui-mode-light .online-form-shell .k-dropdownlist:focus-within,
body.crm-ui-mode-light .online-form-shell .k-numerictextbox:focus-within,
body.crm-ui-mode-hybrid .online-form-shell .online-native-input:focus,
body.crm-ui-mode-hybrid .online-form-shell .online-native-textarea:focus,
body.crm-ui-mode-hybrid .online-form-shell .crm-native-control:focus,
body.crm-ui-mode-hybrid .online-form-shell .form-control:focus,
body.crm-ui-mode-hybrid .online-form-shell .k-picker:focus-within,
body.crm-ui-mode-hybrid .online-form-shell .k-dropdownlist:focus-within,
body.crm-ui-mode-hybrid .online-form-shell .k-numerictextbox:focus-within,
body.crm-ui-mode-new .online-native-payment-grid .crm-native-control:focus,
body.crm-ui-mode-new .online-native-payment-grid .k-picker:focus-within,
body.crm-ui-mode-new .online-native-payment-grid .k-dropdownlist:focus-within,
body.crm-ui-mode-new .online-native-payment-grid .k-numerictextbox:focus-within,
body.crm-ui-mode-light .online-native-payment-grid .crm-native-control:focus,
body.crm-ui-mode-light .online-native-payment-grid .k-picker:focus-within,
body.crm-ui-mode-light .online-native-payment-grid .k-dropdownlist:focus-within,
body.crm-ui-mode-light .online-native-payment-grid .k-numerictextbox:focus-within,
body.crm-ui-mode-hybrid .online-native-payment-grid .crm-native-control:focus,
body.crm-ui-mode-hybrid .online-native-payment-grid .k-picker:focus-within,
body.crm-ui-mode-hybrid .online-native-payment-grid .k-dropdownlist:focus-within,
body.crm-ui-mode-hybrid .online-native-payment-grid .k-numerictextbox:focus-within {
    border-color: var(--online-accent) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(15, 111, 237, 0.14), 0 10px 22px rgba(15, 23, 42, 0.08) !important;
}

body.dark-mode.crm-ui-mode-new .online-form-shell .online-native-input,
body.dark-mode.crm-ui-mode-new .online-form-shell .online-native-textarea,
body.dark-mode.crm-ui-mode-new .online-form-shell .crm-native-control,
body.dark-mode.crm-ui-mode-new .online-form-shell .form-control,
body.dark-mode.crm-ui-mode-new .online-form-shell .k-input,
body.dark-mode.crm-ui-mode-new .online-form-shell .k-input-inner,
body.dark-mode.crm-ui-mode-new .online-form-shell .k-picker,
body.dark-mode.crm-ui-mode-new .online-form-shell .k-dropdownlist,
body.dark-mode.crm-ui-mode-new .online-form-shell .k-numerictextbox,
body.dark-mode.crm-ui-mode-new .online-form-shell .k-textbox,
body.dark-mode.crm-ui-mode-new .online-native-payment-grid .crm-native-control,
body.dark-mode.crm-ui-mode-new .online-native-payment-grid .k-input,
body.dark-mode.crm-ui-mode-new .online-native-payment-grid .k-input-inner,
body.dark-mode.crm-ui-mode-new .online-native-payment-grid .k-picker,
body.dark-mode.crm-ui-mode-new .online-native-payment-grid .k-dropdownlist,
body.dark-mode.crm-ui-mode-new .online-native-payment-grid .k-numerictextbox {
    border-color: rgba(148, 163, 184, 0.24) !important;
    background-color: rgba(21, 28, 36, 0.92) !important;
    color: #e8eef3 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.18) !important;
}

body.dark-mode.crm-ui-mode-new .online-form-shell .k-input-button,
body.dark-mode.crm-ui-mode-new .online-form-shell .k-button.k-input-button,
body.dark-mode.crm-ui-mode-new .online-native-payment-grid .k-input-button,
body.dark-mode.crm-ui-mode-new .online-native-payment-grid .k-button.k-input-button {
    border-left-color: rgba(148, 163, 184, 0.18) !important;
    background: rgba(31, 41, 52, 0.92) !important;
    color: rgba(226, 232, 240, 0.86) !important;
}

body.crm-ui-mode-new .online-native-field .online-native-input,
body.crm-ui-mode-new .online-native-field .online-native-textarea,
body.crm-ui-mode-new .online-native-field .crm-native-control,
body.crm-ui-mode-new .online-native-field .form-control,
body.crm-ui-mode-new .online-native-field .k-input,
body.crm-ui-mode-new .online-native-field .k-input-inner,
body.crm-ui-mode-new .online-native-field .k-picker,
body.crm-ui-mode-new .online-native-field .k-dropdownlist,
body.crm-ui-mode-new .online-native-field .k-numerictextbox,
body.crm-ui-mode-new .online-native-field .k-textbox,
body.crm-ui-mode-light .online-native-field .online-native-input,
body.crm-ui-mode-light .online-native-field .online-native-textarea,
body.crm-ui-mode-light .online-native-field .crm-native-control,
body.crm-ui-mode-light .online-native-field .form-control,
body.crm-ui-mode-light .online-native-field .k-input,
body.crm-ui-mode-light .online-native-field .k-input-inner,
body.crm-ui-mode-light .online-native-field .k-picker,
body.crm-ui-mode-light .online-native-field .k-dropdownlist,
body.crm-ui-mode-light .online-native-field .k-numerictextbox,
body.crm-ui-mode-light .online-native-field .k-textbox,
body.crm-ui-mode-hybrid .online-native-field .online-native-input,
body.crm-ui-mode-hybrid .online-native-field .online-native-textarea,
body.crm-ui-mode-hybrid .online-native-field .crm-native-control,
body.crm-ui-mode-hybrid .online-native-field .form-control,
body.crm-ui-mode-hybrid .online-native-field .k-input,
body.crm-ui-mode-hybrid .online-native-field .k-input-inner,
body.crm-ui-mode-hybrid .online-native-field .k-picker,
body.crm-ui-mode-hybrid .online-native-field .k-dropdownlist,
body.crm-ui-mode-hybrid .online-native-field .k-numerictextbox,
body.crm-ui-mode-hybrid .online-native-field .k-textbox,
body.crm-ui-mode-new .crm-native-field .crm-native-control,
body.crm-ui-mode-new .crm-native-field .k-input,
body.crm-ui-mode-new .crm-native-field .k-input-inner,
body.crm-ui-mode-new .crm-native-field .k-picker,
body.crm-ui-mode-new .crm-native-field .k-dropdownlist,
body.crm-ui-mode-new .crm-native-field .k-numerictextbox,
body.crm-ui-mode-light .crm-native-field .crm-native-control,
body.crm-ui-mode-light .crm-native-field .k-input,
body.crm-ui-mode-light .crm-native-field .k-input-inner,
body.crm-ui-mode-light .crm-native-field .k-picker,
body.crm-ui-mode-light .crm-native-field .k-dropdownlist,
body.crm-ui-mode-light .crm-native-field .k-numerictextbox,
body.crm-ui-mode-hybrid .crm-native-field .crm-native-control,
body.crm-ui-mode-hybrid .crm-native-field .k-input,
body.crm-ui-mode-hybrid .crm-native-field .k-input-inner,
body.crm-ui-mode-hybrid .crm-native-field .k-picker,
body.crm-ui-mode-hybrid .crm-native-field .k-dropdownlist,
body.crm-ui-mode-hybrid .crm-native-field .k-numerictextbox {
    min-height: 44px !important;
    border: 1px solid color-mix(in srgb, var(--online-border, #d9e1ea) 86%, var(--online-accent, #0f6fed)) !important;
    border-radius: 8px !important;
    background-color: var(--online-surface, #fff) !important;
    color: var(--online-text, #17202c) !important;
}

body.crm-ui-mode-new .online-native-field .k-input-button,
body.crm-ui-mode-new .online-native-field .k-button.k-input-button,
body.crm-ui-mode-light .online-native-field .k-input-button,
body.crm-ui-mode-light .online-native-field .k-button.k-input-button,
body.crm-ui-mode-hybrid .online-native-field .k-input-button,
body.crm-ui-mode-hybrid .online-native-field .k-button.k-input-button,
body.crm-ui-mode-new .crm-native-field .k-input-button,
body.crm-ui-mode-new .crm-native-field .k-button.k-input-button,
body.crm-ui-mode-light .crm-native-field .k-input-button,
body.crm-ui-mode-light .crm-native-field .k-button.k-input-button,
body.crm-ui-mode-hybrid .crm-native-field .k-input-button,
body.crm-ui-mode-hybrid .crm-native-field .k-button.k-input-button {
    width: 40px !important;
    min-width: 40px !important;
    min-height: 42px !important;
    max-height: none !important;
    border: 0 !important;
    border-left: 1px solid color-mix(in srgb, var(--online-border, #d9e1ea) 84%, transparent) !important;
    border-radius: 0 8px 8px 0 !important;
    background: color-mix(in srgb, var(--online-surface-soft, #f5f7fb) 82%, var(--online-surface, #fff)) !important;
    color: var(--online-muted, #64748b) !important;
}

body.dark-mode.crm-ui-mode-new .online-native-field .online-native-input,
body.dark-mode.crm-ui-mode-new .online-native-field .online-native-textarea,
body.dark-mode.crm-ui-mode-new .online-native-field .crm-native-control,
body.dark-mode.crm-ui-mode-new .online-native-field .form-control,
body.dark-mode.crm-ui-mode-new .online-native-field .k-input,
body.dark-mode.crm-ui-mode-new .online-native-field .k-input-inner,
body.dark-mode.crm-ui-mode-new .online-native-field .k-picker,
body.dark-mode.crm-ui-mode-new .online-native-field .k-dropdownlist,
body.dark-mode.crm-ui-mode-new .online-native-field .k-numerictextbox,
body.dark-mode.crm-ui-mode-new .online-native-field .k-textbox,
body.dark-mode.crm-ui-mode-new .crm-native-field .crm-native-control,
body.dark-mode.crm-ui-mode-new .crm-native-field .k-input,
body.dark-mode.crm-ui-mode-new .crm-native-field .k-input-inner,
body.dark-mode.crm-ui-mode-new .crm-native-field .k-picker,
body.dark-mode.crm-ui-mode-new .crm-native-field .k-dropdownlist,
body.dark-mode.crm-ui-mode-new .crm-native-field .k-numerictextbox {
    border-color: rgba(148, 163, 184, 0.24) !important;
    background-color: rgba(21, 28, 36, 0.92) !important;
    color: #e8eef3 !important;
}

body.crm-ui-mode-new .online-native-field .k-picker .k-input-inner,
body.crm-ui-mode-new .online-native-field .k-dropdownlist .k-input-inner,
body.crm-ui-mode-new .online-native-field .k-numerictextbox .k-input-inner,
body.crm-ui-mode-light .online-native-field .k-picker .k-input-inner,
body.crm-ui-mode-light .online-native-field .k-dropdownlist .k-input-inner,
body.crm-ui-mode-light .online-native-field .k-numerictextbox .k-input-inner,
body.crm-ui-mode-hybrid .online-native-field .k-picker .k-input-inner,
body.crm-ui-mode-hybrid .online-native-field .k-dropdownlist .k-input-inner,
body.crm-ui-mode-hybrid .online-native-field .k-numerictextbox .k-input-inner,
body.crm-ui-mode-new .crm-native-field .k-picker .k-input-inner,
body.crm-ui-mode-new .crm-native-field .k-dropdownlist .k-input-inner,
body.crm-ui-mode-new .crm-native-field .k-numerictextbox .k-input-inner,
body.crm-ui-mode-light .crm-native-field .k-picker .k-input-inner,
body.crm-ui-mode-light .crm-native-field .k-dropdownlist .k-input-inner,
body.crm-ui-mode-light .crm-native-field .k-numerictextbox .k-input-inner,
body.crm-ui-mode-hybrid .crm-native-field .k-picker .k-input-inner,
body.crm-ui-mode-hybrid .crm-native-field .k-dropdownlist .k-input-inner,
body.crm-ui-mode-hybrid .crm-native-field .k-numerictextbox .k-input-inner {
    min-height: 42px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.online-form-shell .deposit-info-box,
.online-form-shell .detail-card {
    margin: 0;
    border: 1px solid var(--online-border);
    border-radius: 8px;
    background: var(--online-surface-soft);
    box-shadow: none;
}

.online-form-shell .deposit-item,
.online-form-shell .detail-item {
    display: grid;
    grid-template-columns: minmax(130px, 0.38fr) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid var(--online-border);
}

.online-form-shell .deposit-item:last-child,
.online-form-shell .detail-item:last-child {
    border-bottom: 0;
}

.online-form-shell .deposit-title,
.online-form-shell .detail-label {
    color: var(--online-muted);
    font-size: 0.8rem;
    font-weight: 800;
}

.online-form-shell .deposit-value,
.online-form-shell .detail-value {
    min-width: 0;
    color: var(--online-text);
    overflow-wrap: anywhere;
    font-weight: 750;
}

.online-form-shell .custom-upload-wrapper {
    min-height: 120px;
    border: 1px dashed var(--online-border);
    border-radius: 8px;
    background: var(--online-surface-soft);
}

.online-form-shell .custom-upload-note {
    color: var(--online-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.online-form-shell .btn {
    border-radius: 7px;
    font-weight: 800;
}

.online-open-account-form {
    max-width: 940px;
}

.online-open-account-form .online-form-grid {
    grid-template-columns: minmax(320px, 720px);
}

.online-open-account-panel {
    min-width: 0;
    margin: 0.1rem 0 0;
    padding: 0.85rem;
    border: 1px solid var(--online-border);
    border-radius: 8px;
    background: var(--online-surface);
}

.online-open-account-inner-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.online-open-account-form-header {
    padding-bottom: 0.75rem;
    margin-bottom: 0.1rem;
}

.online-form-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.75rem;
    border-top: 1px solid var(--online-border);
}

.online-form-actions .btn {
    min-height: 42px;
    padding-right: 1.4rem;
    padding-left: 1.4rem;
}

.online-open-account-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 44px;
    margin: 0 0 1rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid rgba(15, 111, 237, 0.28);
    border-radius: 8px;
    background: color-mix(in srgb, var(--online-accent) 10%, var(--online-surface));
    color: var(--online-accent);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.online-open-account-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid color-mix(in srgb, var(--online-accent) 25%, transparent);
    border-top-color: var(--online-accent);
    border-radius: 50%;
    animation: online-open-account-spin 0.8s linear infinite;
}

.online-open-account-panel.is-processing {
    pointer-events: none;
    opacity: 0.78;
}

.online-form-actions .btn.is-processing {
    cursor: wait;
}

@keyframes online-open-account-spin {
    to {
        transform: rotate(360deg);
    }
}

body.dark-mode .online-form-shell {
    --online-surface: #1a222c;
    --online-surface-soft: #151c24;
    --online-border: rgba(148, 163, 184, 0.18);
    --online-text: #e6edf3;
    --online-muted: #9ca8b5;
    --online-accent: #7fa6b5;
    --online-success: #68b0a4;
}

body.dark-mode .online-form-step.is-active span,
body.dark-mode .online-form-card-index {
    color: #10202a;
}

body.dark-mode .online-ib-customers-info {
    border-color: rgba(127, 166, 181, 0.22);
    background: linear-gradient(135deg, rgba(127, 166, 181, 0.12), var(--online-surface));
}

body.dark-mode .online-ib-customers-info-icon {
    background: #6f98a8;
    color: #10202a;
}

.online-account-detail {
    --online-surface: #ffffff;
    --online-surface-soft: #f5f7fb;
    --online-border: #d9e1ea;
    --online-text: #17202c;
    --online-muted: #64748b;
    --online-accent: #0f6fed;
    --online-success: #009f7a;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: var(--online-text);
}

.online-account-detail-hero,
.online-account-error,
.online-account-detail-card,
.online-account-transactions,
.online-account-metric {
    border: 1px solid var(--online-border);
    border-radius: 8px;
    background: var(--online-surface);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

.online-account-detail-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1.1rem;
}

.online-account-detail-avatar,
.online-account-error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--online-accent), var(--online-success));
    color: #fff;
    font-size: 1.8rem;
}

.online-account-detail-title {
    min-width: 0;
}

.online-account-detail-title span {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--online-muted);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
}

.online-account-detail-title h2 {
    margin: 0;
    color: var(--online-text);
    font-size: 1.75rem;
    font-weight: 900;
}

.online-account-detail-badges,
.online-account-error-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.65rem;
}

.online-account-detail-badges span,
.online-account-error-meta span,
.online-account-card-head span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 0.65rem;
    border-radius: 999px;
    background: var(--online-surface-soft);
    color: var(--online-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.online-account-detail-actions,
.online-account-password-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: flex-end;
}

.online-account-detail-actions .btn,
.online-account-password-actions .btn {
    border-radius: 7px;
    font-weight: 800;
}

.online-account-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.online-account-metric {
    padding: 0.95rem 1rem;
}

.online-account-metric span {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--online-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.online-account-metric strong {
    display: block;
    color: var(--online-text);
    font-size: 1.25rem;
    font-weight: 900;
}

.online-account-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.online-account-detail-card,
.online-account-transactions {
    min-width: 0;
    overflow: hidden;
}

.online-account-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--online-border);
}

.online-account-card-head h3 {
    margin: 0;
    color: var(--online-text);
    font-size: 1rem;
    font-weight: 900;
}

.online-account-detail-list {
    display: flex;
    flex-direction: column;
}

.online-account-detail-list div {
    display: grid;
    grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    padding: 0.78rem 1rem;
    border-bottom: 1px solid var(--online-border);
}

.online-account-detail-list div:last-child {
    border-bottom: 0;
}

.online-account-detail-list span {
    color: var(--online-muted);
    font-size: 0.8rem;
    font-weight: 800;
}

.online-account-detail-list strong {
    min-width: 0;
    color: var(--online-text);
    overflow-wrap: anywhere;
    text-align: right;
    font-weight: 850;
}

.online-account-password-actions {
    padding: 1rem;
    justify-content: flex-start;
}

.online-account-native-tabs {
    display: flex;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--online-border);
    overflow-x: auto;
}

.online-account-native-tabs button {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 0.75rem;
    border: 1px solid var(--online-border);
    border-radius: 7px;
    background: var(--online-surface-soft);
    color: var(--online-muted);
    font-weight: 800;
    cursor: pointer;
}

.online-account-native-tabs button.is-active {
    border-color: transparent;
    background: var(--online-accent);
    color: #fff;
}

.online-account-native-panel {
    display: none;
    padding: 1rem;
}

.online-account-native-panel.is-active {
    display: block;
}

.online-account-light-grid {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
}

.online-wallet-crud-page {
    max-width: none;
}

.online-wallet-crud-panel {
    min-width: 0;
    padding: 0;
    overflow: hidden;
}

.online-wallet-crud-panel .card-body {
    min-width: 0;
    padding: 1rem;
}

.online-account-light-grid-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}

.online-account-light-grid-head > div {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.online-account-light-grid-head strong,
.online-account-light-grid-head span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.online-account-light-grid-head strong {
    color: var(--online-text);
    font-size: 0.92rem;
    font-weight: 900;
}

.online-account-light-grid-head span {
    color: var(--online-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.online-account-light-grid-head label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 38px;
    width: min(320px, 40vw);
    min-width: 180px;
    margin: 0;
    padding: 0 0.75rem;
    border: 1px solid var(--online-border);
    border-radius: 8px;
    background: var(--online-surface);
    color: var(--online-muted);
}

.online-account-light-grid-head input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--online-text);
    font-size: 0.86rem;
    font-weight: 700;
}

.online-account-light-grid .online-light-table {
    min-width: 780px;
}

.online-account-light-grid .online-light-table th,
.online-account-light-grid .online-light-table td {
    white-space: nowrap;
}

.online-account-grid-loading {
    padding: 1.1rem;
    text-align: center;
    color: var(--online-muted);
    font-weight: 800;
}

.online-account-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 118px;
    padding: 1rem;
    border: 1px dashed var(--online-border);
    border-radius: 8px;
    background: var(--online-surface-soft);
    color: var(--online-muted);
    font-weight: 800;
}

.online-account-error {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding: 1.1rem;
}

.online-account-error h2 {
    margin: 0 0 0.35rem;
    color: var(--online-text);
    font-size: 1.15rem;
    font-weight: 900;
}

.online-account-error p {
    margin: 0;
    color: var(--online-muted);
    font-weight: 800;
}

body.dark-mode .online-account-detail {
    --online-surface: #1a222c;
    --online-surface-soft: #151c24;
    --online-border: rgba(148, 163, 184, 0.18);
    --online-text: #e6edf3;
    --online-muted: #9ca8b5;
    --online-accent: #7fa6b5;
    --online-success: #68b0a4;
}

body.dark-mode .online-account-detail-avatar,
body.dark-mode .online-account-error-icon,
body.dark-mode .online-account-native-tabs button.is-active {
    color: #10202a;
}

@media (max-width: 991.98px) {
    .online-home-hero {
        grid-template-columns: 1fr;
    }

    .online-profile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .online-account-grid {
        grid-template-columns: 1fr;
    }

    .online-form-grid {
        grid-template-columns: 1fr;
    }

    .online-account-detail-hero,
    .online-account-detail-grid,
    .online-account-metric-grid {
        grid-template-columns: 1fr;
    }

    .online-account-light-grid-head {
        align-items: stretch;
        flex-direction: column;
    }

    .online-account-light-grid-head label {
        width: 100%;
    }

    .online-account-detail-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .btn-responsive {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }

    .online-header-mode .online-mode-option span {
        display: none;
    }

    .online-profile-panel {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .online-profile-grid {
        grid-template-columns: 1fr;
        width: 100%;
        text-align: left;
    }

    .online-form-shell {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

    .online-form-progress {
        grid-template-columns: 1fr;
    }

    body.crm-ui-mode-new .online-quick-actions {
        grid-template-columns: 1fr;
        width: 100%;
        padding: 0.45rem;
    }

    body.crm-ui-mode-new .online-quick-action {
        width: 100%;
        min-height: 48px;
    }

    body.crm-ui-mode-new .online-action-panel {
        align-items: stretch;
        padding: 0.75rem;
    }

    .online-account-titlebar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.65rem;
        padding: 0.75rem;
    }

    .online-account-title-copy h2 {
        font-size: 0.98rem;
    }

    .online-account-search {
        width: 100%;
        min-width: 0;
        flex-basis: auto;
    }

    .online-account-tools {
        justify-content: flex-start;
        gap: 0.4rem;
        padding: 0.55rem 0.75rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .online-account-sort {
        flex: 1 0 178px;
        min-width: 178px;
    }

    .online-account-tools > .online-icon-action,
    .online-account-tools > .online-transaction-page-size {
        flex: 0 0 auto;
    }

    .online-account-light-table {
        overflow: visible;
    }

    .online-account-light-head {
        display: none;
    }

    .online-account-light-body {
        gap: 0.65rem;
        padding: 0.65rem;
    }

    .online-account-light-row,
    .online-wallet-panel .online-account-light-row {
        min-width: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 0.65rem;
        min-height: 0;
        padding: 0.85rem;
        border: 1px solid var(--online-border);
        border-radius: 8px;
        background: var(--online-surface);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
    }

    .online-account-light-cell {
        gap: 0.22rem;
    }

    .online-account-login-cell {
        grid-column: 1 / -1;
        padding-bottom: 0.55rem;
        border-bottom: 1px solid var(--online-border);
    }

    .online-account-login-cell strong {
        font-size: 1.08rem;
    }

    .online-account-action-cell {
        grid-column: 1 / -1;
        justify-items: stretch;
        text-align: left;
    }

    .online-account-action-cell .online-row-actions {
        justify-content: flex-start;
    }

    .online-account-panel .online-table-wrap {
        overflow: visible;
    }

    .online-account-panel .online-light-table {
        display: block;
        min-width: 0;
    }

    .online-account-panel .online-light-table thead {
        display: none;
    }

    .online-account-panel .online-light-table tbody {
        display: grid;
        gap: 0.65rem;
        padding: 0.75rem;
    }

    .online-account-panel .online-light-table tr {
        display: grid;
        gap: 0.5rem;
        padding: 0.85rem;
        border: 1px solid var(--online-border);
        border-radius: 8px;
        background: var(--online-surface);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
    }

    .online-account-panel .online-light-table td {
        display: grid;
        grid-template-columns: minmax(105px, 0.8fr) minmax(0, 1fr);
        gap: 0.75rem;
        align-items: center;
        padding: 0;
        border-bottom: 0;
        text-align: right;
    }

    .online-account-panel .online-light-table td:first-child {
        display: block;
        padding-bottom: 0.55rem;
        border-bottom: 1px solid var(--online-border);
        text-align: left;
    }

    .online-account-panel .online-light-table td[data-label]::before {
        content: attr(data-label);
        min-width: 0;
        color: var(--online-muted);
        font-size: 0.76rem;
        font-weight: 800;
        text-align: left;
        text-transform: uppercase;
    }

    .online-account-panel .online-light-table td:first-child::before {
        display: none;
    }

    .online-account-panel .online-login-cell strong {
        color: var(--online-text);
        font-size: 1.08rem;
    }

    .online-account-panel .online-row-actions {
        justify-content: flex-end;
    }

    .online-account-panel .online-actions-col {
        width: auto;
        text-align: right !important;
    }

    .online-transaction-footer {
        align-items: flex-start;
        padding: 0.65rem 0.75rem;
    }

    .online-form-shell .profile-list-item,
    .online-form-shell .form-row,
    .online-form-shell .deposit-item,
    .online-form-shell .detail-item {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .online-account-detail-list div,
    .online-account-error {
        grid-template-columns: 1fr;
    }

    .online-account-detail-list strong {
        text-align: left;
    }
}

@media (max-width: 420px) {
    body.crm-ui-mode-new .online-quick-action {
        align-items: flex-start;
    }

    .online-account-light-row,
    .online-wallet-panel .online-account-light-row {
        grid-template-columns: 1fr;
    }

    .online-account-panel .online-light-table td {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        text-align: left;
    }

    .online-account-panel .online-row-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    body.crm-ui-mode-new.layout-navbar-fixed .wrapper .main-header {
        max-height: none !important;
        min-height: 56px;
        padding: 0.25rem 0.35rem;
        align-items: center;
    }

    body.crm-ui-mode-new #NavTopClass {
        flex-wrap: nowrap;
        gap: 0.25rem;
        overflow: visible;
    }

    body.crm-ui-mode-new #NavTopClass .navbar-nav {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        min-width: 0;
    }

    body.crm-ui-mode-new #NavTopClass .navbar-nav.ml-auto {
        gap: 0.2rem;
        margin-left: auto !important;
    }

    body.crm-ui-mode-new #NavTopClass .nav-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: 0 0.42rem;
        white-space: nowrap;
    }

    body.crm-ui-mode-new #NavTopClass .online-header-zoom,
    body.crm-ui-mode-new #NavTopClass .online-header-zoom .k-widget,
    body.crm-ui-mode-new #NavTopClass .online-header-zoom .k-picker,
    body.crm-ui-mode-new #NavTopClass .online-header-zoom .k-dropdown,
    body.crm-ui-mode-new #NavTopClass .online-header-zoom .k-dropdownlist {
        width: 62px !important;
        min-width: 62px !important;
        max-width: 62px !important;
    }

    body.crm-ui-mode-new #NavTopClass .online-header-zoom {
        padding: 0 !important;
        flex: 0 0 62px;
    }

    body.crm-ui-mode-new #NavTopClass .online-header-profile {
        min-width: 0;
        flex: 0 1 auto;
    }

    body.crm-ui-mode-new #NavTopClass .online-header-profile .nav-link {
        max-width: 92px;
        min-width: 0;
        gap: 0.25rem;
    }

    body.crm-ui-mode-new #NavTopClass .online-header-profile-text {
        display: inline-block;
        min-width: 0;
        max-width: 62px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }

    body.crm-ui-mode-new #NavTopClass .online-header-language {
        display: flex;
        align-items: center;
    }

    body.crm-ui-mode-new #NavTopClass .online-header-language .btn,
    body.crm-ui-mode-new #NavTopClass .online-header-language .dropdown-toggle {
        width: 42px;
        min-width: 42px;
        height: 36px;
        padding: 0.2rem 0.35rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body.crm-ui-mode-new #NavTopClass .online-header-language .dropdown-toggle span,
    body.crm-ui-mode-new #NavTopClass .online-header-language .dropdown-toggle::after {
        display: none;
    }

    body.crm-ui-mode-new #NavTopClass .online-header-message .crm-conversation-header-toggle,
    body.crm-ui-mode-new #NavTopClass .online-theme-toggle,
    body.crm-ui-mode-new #NavTopClass .online-mode-option {
        min-width: 36px;
        min-height: 36px;
        padding: 0;
    }

    body.crm-ui-mode-new .content-header.header-shadow {
        margin: 0 0 0.45rem;
        padding: 0.55rem 0.7rem;
        background: transparent;
        box-shadow: none;
    }

    body.crm-ui-mode-new .content-header .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }

    body.crm-ui-mode-new .content-header h1 {
        font-size: 1.35rem;
        line-height: 1.2;
    }

    body.crm-ui-mode-new .content-header .breadcrumb {
        display: none;
    }

    body.crm-ui-mode-new .online-home-new,
    body.crm-ui-mode-new .online-home-hero {
        gap: 0.65rem;
    }

    body.crm-ui-mode-new .online-profile-panel {
        gap: 0.65rem;
        padding: 0.9rem;
    }

    body.crm-ui-mode-new .online-profile-avatar-wrap {
        width: 86px;
        height: 86px;
        padding: 3px;
    }

    body.crm-ui-mode-new .online-profile-avatar {
        width: 78px;
        height: 78px;
        font-size: 1.85rem;
    }

    body.crm-ui-mode-new .online-profile-kicker {
        margin-bottom: 0.25rem;
        font-size: 0.74rem;
    }

    body.crm-ui-mode-new .online-profile-summary h2 {
        margin-bottom: 0.55rem;
        font-size: 1.2rem;
        line-height: 1.2;
    }

    body.crm-ui-mode-new .online-profile-grid {
        gap: 0.5rem;
    }

    body.crm-ui-mode-new .online-profile-item {
        padding: 0.65rem 0.7rem;
    }

    body.crm-ui-mode-new .online-profile-item span,
    body.crm-ui-mode-new .online-profile-item strong {
        overflow-wrap: anywhere;
    }

    body.crm-ui-mode-new #BrandFooterClass {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        font-size: 0.78rem;
    }
}

@media (max-width: 420px) {
    body.crm-ui-mode-new #NavTopClass .online-header-zoom,
    body.crm-ui-mode-new #NavTopClass .online-header-zoom .k-widget,
    body.crm-ui-mode-new #NavTopClass .online-header-zoom .k-picker,
    body.crm-ui-mode-new #NavTopClass .online-header-zoom .k-dropdown,
    body.crm-ui-mode-new #NavTopClass .online-header-zoom .k-dropdownlist {
        width: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;
    }

    body.crm-ui-mode-new #NavTopClass .online-header-zoom {
        flex-basis: 56px;
    }

    body.crm-ui-mode-new #NavTopClass .online-header-profile .nav-link {
        max-width: 38px;
    }

    body.crm-ui-mode-new #NavTopClass .online-header-profile-text {
        display: none;
    }

    body.crm-ui-mode-new .content-header h1 {
        font-size: 1.25rem;
    }
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
    min-height: 100%;
}

html, body {
    -webkit-text-size-adjust: 100%;
}

.layout-fixed {
    padding-top: env(safe-area-inset-top);
}

.layout-navbar-fixed .wrapper .main-header {
    max-height: 5em !important;
}

#NavClass,
#NavTopClass,
#BrandFooterClass {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.wrapper {
    height: 100%;
    min-height: 100%;
    -webkit-overflow-scrolling: touch;
    overflow: auto;
    position: relative;
}

.card-title {
    font-weight: bold;
}

.text-sm .card-title {
    font-size: 1rem;
    line-height: 2rem;
    padding-right: 1rem;
}

.text-sm .content-header {
    padding: 1em 0.5em;
}

.zoom-btn.active {
    background-color: #007bff;
    color: white;
}

.iti__search-input {
    font-size: 1em;
    height: 3em;
    padding: 1em;
}

body:not(.dark-mode) .iti__dropdown-content {
    font-size: 1em;
    padding: 1em;
    color: var(--online-text, #17202c);
    background-color: var(--online-surface, #fff);
}

body.dark-mode .iti__dropdown-content {
    font-size: 1em;
    padding: 1em;
    color: var(--online-text, #e6edf3);
    background-color: var(--online-surface, #1a222c);
}

.content {
    padding: 0 !important;
}

.k-command-cell {
    text-align: center;
    min-width: 150px;
}

.container-fluid {
    height: auto;
}

.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
    padding-right: 10px !important;
    padding-left: 10px !important;
}

.hidden {
    visibility: hidden;
}

.login-box {
}

.fx-list {
    list-style: none;
    margin-left: -2rem;
    line-height: 2rem;
}

.marqueeCurrency {
    --gap: 1rem;
    position: relative;
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
}

.marquee__content {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    gap: var(--gap);
    min-width: 100%;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 91050;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
}

.dashboard-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1600px;
    margin: 0 auto;
}

.dashboard-title {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-bottom: 10px;
}

.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--card-gap);
}

.dashboard_card {
    background: var(--color-card);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    padding: 26px 20px 20px 20px;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 92px;
}

.card-number {
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 0.01em;
    color: var(--color-text);
    margin-bottom: 7px;
    transition: color var(--transition);
}

.card-label {
    font-size: 1rem;
    color: var(--color-subtle);
    letter-spacing: 0.01em;
    margin: 0;
    font-weight: 400;
    transition: color var(--transition);
}

.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 100%;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0 solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
    height: auto;
}

.status-active {
    background-color: #d4edda; /* açık yeşil arka plan */
    color: #155724; /* koyu yeşil yazı */
    border: 1px solid #c3e6cb;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
}

.status-passive {
    background-color: #f8d7da; /* açık kırmızı arka plan */
    color: #721c24; /* koyu kırmızı yazı */
    border: 1px solid #f5c6cb;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
}

.live-dot {
    height: 10px;
    width: 10px;
    background-color: #28a745;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}

.headerMenuNav {
    display: flex;
    align-items: center;
    gap: 12px; /* Butonlar arası boşluk */
}

    .headerMenuNav .nav-link {
        color: #f8f9fa;
        padding: 10px 18px;
        font-size: 15px;
        font-weight: 500;
        border-radius: 8px;
        display: flex;
        align-items: center;
        transition: background-color 0.3s, color 0.3s;
        position: relative;
        text-decoration: none;
    }

        .headerMenuNav .nav-link i {
            margin-right: 8px;
            font-size: 16px;
        }
        /* Hover efekti */
        .headerMenuNav .nav-link:hover {
            background-color: #ffc107;
            color: #212529 !important;
        }
        /* Aktif sayfa vurgusu */
        .headerMenuNav .nav-link.active {
            background-color: #ffc107;
            color: #212529 !important;
            font-weight: 600;
        }
/* Pause animation when reduced-motion is set */
#searchResults {
    position: absolute;
    width: 99% !important;
    z-index: 1051; /* Bootstrap modal seviyesinde görünmesini sağlıyor */
    background: white;
    border: 1px solid #ccc;
    display: none;
    max-height: 600px;
    overflow-y: auto;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    top: 3em;
    color: black;
    min-width: 99% !important;
}

.link {
    color: dimgray !important;
    font-weight: bold;
    text-decoration: none;
}

    .link:hover {
        color: black !important;
        text-decoration: none;
    }

.highlight {
    animation: flash 1s ease-in-out;
}

.highlight-up {
    background-color: #d4edda !important; /* yeşil */
    transition: background-color 0.4s ease;
}

.highlight-down {
    background-color: #f8d7da !important; /* kırmızı */
    transition: background-color 0.4s ease;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgb(0 0 0 / 15%) !important;
}

.nav-sidebar > .nav-item .nav-icon.fa, .nav-sidebar > .nav-item .nav-icon.fas, .nav-sidebar > .nav-item .nav-icon.far, .nav-sidebar > .nav-item .nav-icon.fab, .nav-sidebar > .nav-item .nav-icon.fal, .nav-sidebar > .nav-item .nav-icon.fad, .nav-sidebar > .nav-item .nav-icon.svg-inline--fa, .nav-sidebar > .nav-item .nav-icon.ion {
    font-size: 0.8rem;
}

.nav-sidebar > .nav-item .nav-icon {
    /* margin-left: .05rem; */
    /* font-size: 1.2rem; */
    margin-right: .2rem;
    text-align: center;
    width: 1rem;
}

.k-grid-norecords {
    min-height: 3em;
    padding: 2em;
    max-height: 100px;
}

thead[role="rowgroup"] {
    height: 3em;
}

.detail-card {
    /* float: left; -- kaldırıldı, Bootstrap card flexbox ile uyumsuzluk yaratıyordu */
    /* max-width: 800px; -- kaldırıldı, kart içinde gereksiz kısıtlama */
    /* min-width: 300px; -- kaldırıldı */
    margin: 0;
    padding: 0.75rem 1rem;
    width: 100%;
    box-sizing: border-box;
}

    .detail-card h2 {
        margin-top: 0;
        font-size: 1.5rem;
        border-bottom: 2px solid #eee;
        padding-bottom: 0.5rem;
    }

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    margin: 0.4rem 0;
    padding: 0.4rem 0;
    border-bottom: 1px dashed #ddd;
}

.detail-label {
    font-weight: 600;
    flex: 1;
    min-width: 90px;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* color: #555 -- tema değişkeni ile yönetilir */
}

.detail-value {
    flex-shrink: 0;
    text-align: right;
    white-space: nowrap;  /* badge metni kesilmesini önler */
    /* color: #111 -- tema değişkeni ile yönetilir */
}

/* --- Dark mode: detail-card, card bileşenleri --- */
body.dark-mode .detail-item {
    border-bottom-color: #3a3a3a;
}

body.dark-mode .detail-label {
    color: #adb5bd;
}

body.dark-mode .detail-value {
    color: #e9ecef;
}

body.dark-mode .card {
    background-color: #1e1e2e !important;
    border-color: #3a3a3a !important;
    color: #e9ecef;
}

body.dark-mode .card-body {
    background-color: #1e1e2e;
}

body.dark-mode .card-header {
    /* Renkli (mavi/gri/yeşil) header'lar inline style ile tanımlı, onları dokunma */
    border-bottom-color: #3a3a3a !important;
}

body:not(.dark-mode) .card {
    background-color: #fff;
}

body:not(.dark-mode) .detail-label {
    color: #495057;
}

body:not(.dark-mode) .detail-value {
    color: #212529;
}

@keyframes flash {
    0% {
        background-color: yellow;
    }

    50% {
        background-color: orange;
    }

    100% {
        background-color: transparent;
    }
}

.profile-list-item {
    /*max-height: 4em;*/
    /*padding: 0.5rem 0.5rem;
    line-height: 1.2;
    border: 1px solid #dee2e6 !important;*/
}

.profile-label {
    min-width: 130px;
    text-align: left;
    font-weight: 600;
}

.profile-value {
    flex: 1;
    text-align: right;
    word-break: break-word;
}

.profile-actions {
    width: 72px;
    text-align: right;
}

    .profile-actions .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        line-height: 1;
    }

.header-shadow {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 0.5em;
    margin-bottom: 0.5em;
}

/* Enable animation */
.enable-animation .marquee__content {
    animation: scroll 50s linear infinite;
}
/* Reverse animation */
.marquee--reverse .marquee__content {
    animation-direction: reverse;
}
/* Pause on hover */
.marquee--hover-pause:hover .marquee__content {
    animation-play-state: paused;
}
/* Attempt to size parent based on content. Keep in mind that the parent width is equal to both content containers that stretch to fill the parent. */
.marquee--fit-content {
    max-width: fit-content;
}
/* A fit-content sizing fix: Absolute position the duplicate container. This will set the size of the parent wrapper to a single child container. Shout out to Olavi's article that had this solution 👏 @link: https://olavihaapala.fi/2021/02/23/modern-marquee.html  */
.marquee--pos-absolute .marquee__content:last-child {
    position: absolute;
    top: 0;
    left: 0;
}
/* Enable position absolute animation on the duplicate content (last-child) */
.enable-animation .marquee--pos-absolute .marquee__content:last-child {
    animation-name: scroll-abs;
}

@keyframes scroll-abs {
    from {
        transform: translateX(calc(100% + var(--gap)));
    }

    to {
        transform: translateX(0);
    }
}
/* Other page demo styles */
.marquee__content > * {
    flex: 0 0 auto;
    color: #fff;
    background: #1e90ff;
    margin: 1px;
    padding: 0;
    border-radius: 0.25rem;
    text-align: center;
    list-style: none;
    margin-bottom: 0;
    height: 100%;
    width: auto;
    margin-left: 1em;
    padding-left: 1em;
    padding-right: 1em;
}

.activatefalse {
    color: red;
    display: inline-block;
    font-size: 0.7em
}

.activatetrue {
    color: green;
    display: inline-block;
    font-size: 0.7em
}

.download {
    width: 260px;
}

.customer-photo {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-size: 32px 35px;
    background-position: center center;
    vertical-align: middle;
    line-height: 32px;
    box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
    margin-left: 5px;
}

.customer-name {
    display: inline-block;
    vertical-align: middle;
    line-height: 32px;
    padding-left: 3px;
}

.flex-div {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    flex-flow: column;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: auto;
    align-items: flex-start;
}

.card-body {
    padding: 0.6rem;
    /*height: 100%;*/
    /*display: block;*/
}

.fill-height-or-more {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

    .fill-height-or-more > div {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

.ChatWindow {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 9999 !important;
    max-width: 400px;
    /*display: table-row;
    position:relative;
    float:right;*/
}

.direct-chat-contactsAll {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 99999 !important;
    width: 300px;
    background: #444444;
    border-bottom: 1px solid gray;
}

.direct-chat-contactsAllCustomers {
    position: fixed;
    bottom: 0;
    right: 305px;
    z-index: 99999 !important;
    width: 300px;
    background: #444444;
    border-bottom: 1px solid gray;
}

.k-no-data {
    display: table;
    width: 100%;
    padding-top: 20px;
}

.circle {
    border-radius: 50%;
    width: 25px;
    height: 25px;
    margin: auto;
}

#grdTransacts {
    font-size: 13px;
    font-weight: bold;
}

.content-wrapper {
    height: auto !important;
}

#OnlineUsersTable::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#OnlineUsersTable::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

#OnlineUsersTable::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #374850;
}

.control-sidebar {
    display: inline-table;
}

#progress {
    width: 100%;
    height: 3px;
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    z-index: 999999999999;
    border: 0;
    /*
    width: 500px;
    height: 20px;
    position: fixed;
    top: 10%;
    left: 50%;
    margin: -10px 0 0 -250px;*/
}

.k-loading-mask {
    z-index: 99999;
    position: absolute;
}

.k-edit-label, .k-link {
    font-weight: bold;
    margin-right: 0;
    margin-left: 0;
}

.k-edit-field {
    margin-right: 0;
    margin-left: 0;
}

.k-animation-container, .k-widget, .k-widget *, .k-animation-container *, .k-widget *:before, .k-animation-container *:after, .k-block .k-header, .k-list-container {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: content-box;
    box-sizing: border-box;
}

    .k-animation-container, .k-animation-container *, .k-animation-container :after, .k-block .k-header, .k-widget, .k-widget *, .k-widget :before {
        box-sizing: border-box;
    }

/* Window içinde form içeriğinin gerçekten genişlemesini sağlar */
.k-window .k-edit-form-container {
    height: auto !important;
    overflow: visible !important;
}

/* İçerik uzun olduğunda pencere büyürken düzgün scroll alır */
.k-window-content {
    overflow: auto;
}

.alert .close, .alert .mailbox-attachment-close {
    color: #000 !important;
    opacity: .2;
}

.k-selected, .k-state-selected {
    background-image: url(textures/highlight.png) !important;
    background-image: none,linear-gradient(to bottom,rgba(255,255,255,.1) 0,rgba(255,255,255,0) 100%) !important;
    background-color: #247394 !important;
    color: white !important;
}

#darklightitem.dark-mode {
    background-color: transparent !important;
}

.pp_social {
    display: none !important;
}

.blink_me {
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.k-form-horizontal .k-form-field > .k-form-label, .k-form-horizontal .k-form-field > .k-label {
    margin-right: 10px;
    padding-top: 5px;
    width: 25%;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
}

.k-form-field {
    margin: 0px 0px 5px 0px;
}

.thisrequired {
    border: 1px solid #db4240;
}

    .thisrequired:focus {
        border-color: darkred; /* Odaklandığında koyu kırmızı çerçeve */
        outline: none; /* Varsayılan outline kaldırılır */
    }
/* Grid içindeki satır yüksekliğini ayarlar */
.k-grid tbody tr {
    /*height: 40px;*/ /* Varsayılan 28px, artırabilirsiniz */
    border-bottom: 1px solid #c5b3b330;
}

.k-grouping-header {
    display: none; /* İlk başta gizle */
}

.k-grid table {
    width: 100% !important;
    margin: 0;
    max-width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 1px !important;
    font-size: 1.1em;
    text-overflow: ellipsis;
}

.status-pending {
    background-color: #fff3cd !important; /* sarımsı */
}

.status-approved {
    background-color: #d4edda !important; /* yeşilimsi */
}

.status-rejected {
    background-color: #f8d7da !important; /* kırmızımsı */
}

.status-declined {
    background-color: #e2e3e5 !important; /* gri ton */
}

.status-expired {
    background-color: #d1ecf1 !important; /* mavi ton */
}

.status-deleted {
    background-color: #f5c6cb !important; /* açık kırmızı */
}

.status-badge {
    display: inline-table;
    padding: 2px 6px !important;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    text-transform: capitalize;
    background-color: #00bfff;
    line-height: 1.5em !important;
    min-width: 60px;
    margin: auto;
    margin-top: 1em;
    margin-left: 1em;
}

    .status-badge.pending {
        background-color: #00bfff;
    }

    .status-badge.expired {
        background-color: #dc3545;
    }

    .status-badge.approved {
        background-color: #28a745;
    }

    .status-badge.rejected {
        background-color: #6c757d;
    }

    .status-badge.declined {
        background-color: #ffc107;
        color: #212529;
    }

    .status-badge.deleted {
        background-color: #343a40;
    }

.box-profile {
    max-width: 600px;
    margin: auto;
}

/* Step3 onay ekranı 2 kartlı düzen için genişletilmiş alan */
#step3 .box-profile {
    max-width: 100%;
    margin: 0;
}

.input-default {
    width: 100%;
    min-width: 300px;
    /*padding-top: 0.3rem;
    padding-bottom: 0.3rem;*/
}

body.dark-mode .form-input-label {
    background-color: #313131;
}

body:not(.dark-mode) .form-input-label {
}

body.dark-mode .breadcrumb {
    background-color: #313131;
}

.form-input-label {
    align-items: center;
    /*background-color: #e9ecef;*/
    /*color: #495057;*/
    display: flex;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    padding: 0.6rem 0.6rem;
    border-right: 1px solid #7d7c7c42;
    text-align: left;
    height: auto;
}

body.dark-mode .form-input-element {
}

body:not(.dark-mode) .form-input-element {
}

.form-input-element {
    align-items: stretch;
    display: flex;
    line-height: 1.5;
    margin-bottom: 0;
    /*border-left: 1px solid #7d7c7c42;*/
}

.form-row {
    display: flex;
    align-items: stretch;
    margin-bottom: 1em !important;
    border: 1px solid #7d7c7c42;
}

.form-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
    white-space: nowrap;
    flex: 0 0 auto;
    margin-right: 10px;
    min-width: 150px;
}

.form-input {
    flex: 1;
}

    .form-input > * {
        width: 100%;
    }

.custom-upload-wrapper .k-upload .k-dropzone {
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 6px;
    background-color: #f8f8f8;
    border: 2px dashed #ccc;
    color: #999;
}

    .custom-upload-wrapper .k-upload .k-dropzone:hover {
        background-color: #f0f0f0;
        cursor: pointer;
    }

.k-grid-header th.k-header {
    font-weight: bold;
}

#MainPanel .badge {
    font-size: 1em;
}

.k-edit-form-container {
    position: relative;
    width: auto !important;
}

.k-rounded-md {
    border-radius: 0 !important;
}

.k-input, .k-picker {
    border-radius: 0 !important;
    border: 0px !important;
}

.k-picker, .k-widget.k-picker {
    background-color: transparent;
    color: inherit;
}

    .k-picker.k-hover, .k-picker:hover, .k-widget.k-picker.k-hover, .k-widget.k-picker:hover {
        background-color: transparent;
    }

body.dark-mode.crm-ui-mode-new .k-animation-container .k-list-container,
body.dark-mode.crm-ui-mode-new .k-animation-container .k-popup,
body.dark-mode.crm-ui-mode-new .k-list-container,
body.dark-mode.crm-ui-mode-new .k-popup {
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-radius: 8px !important;
    background: #19222b !important;
    color: #e6edf3 !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22) !important;
}

body.dark-mode.crm-ui-mode-new .k-animation-container .k-list,
body.dark-mode.crm-ui-mode-new .k-animation-container .k-list-content,
body.dark-mode.crm-ui-mode-new .k-list-container .k-list,
body.dark-mode.crm-ui-mode-new .k-list-container .k-list-content {
    background: #19222b !important;
    color: #e6edf3 !important;
}

body.dark-mode.crm-ui-mode-new .k-list-container .k-list-optionlabel,
body.dark-mode.crm-ui-mode-new .k-list-container .k-list-item,
body.dark-mode.crm-ui-mode-new .k-list-container .k-item {
    min-height: 34px;
    border-color: rgba(148, 163, 184, 0.10) !important;
    background: #19222b !important;
    color: #e6edf3 !important;
    font-weight: 750;
}

body.dark-mode.crm-ui-mode-new .k-list-container .k-list-optionlabel.k-hover,
body.dark-mode.crm-ui-mode-new .k-list-container .k-list-optionlabel:hover,
body.dark-mode.crm-ui-mode-new .k-list-container .k-list-optionlabel.k-focus,
body.dark-mode.crm-ui-mode-new .k-list-container .k-list-item.k-hover,
body.dark-mode.crm-ui-mode-new .k-list-container .k-list-item:hover,
body.dark-mode.crm-ui-mode-new .k-list-container .k-list-item.k-focus,
body.dark-mode.crm-ui-mode-new .k-list-container .k-item.k-hover,
body.dark-mode.crm-ui-mode-new .k-list-container .k-item:hover,
body.dark-mode.crm-ui-mode-new .k-list-container .k-item.k-focus {
    background: #24313c !important;
    color: #f1f6f9 !important;
}

body.dark-mode.crm-ui-mode-new .k-list-container .k-selected,
body.dark-mode.crm-ui-mode-new .k-list-container .k-state-selected,
body.dark-mode.crm-ui-mode-new .k-list-container .k-list-item.k-selected,
body.dark-mode.crm-ui-mode-new .k-list-container .k-list-item[aria-selected="true"],
body.dark-mode.crm-ui-mode-new .k-list-container .k-item.k-selected,
body.dark-mode.crm-ui-mode-new .k-list-container .k-item[aria-selected="true"] {
    background: color-mix(in srgb, var(--online-accent, #7fa6b5) 42%, var(--online-surface, #1a222c)) !important;
    color: #f2f8fb !important;
    box-shadow: inset 0 0 0 1px rgba(229, 237, 242, 0.12) !important;
}

body.dark-mode.crm-ui-mode-new .online-transaction-page-size option {
    background: #19222b;
    color: #e6edf3;
}

.k-widget.k-window {
    width: 1200px;
    /*min-height: 400px;*/
    /*top:0!important;*/
}

.k-grid-content {
    height: auto !important;
}

.k-textbox {
    width: 100%;
}

.image-default {
    cursor: pointer;
    max-width: 400px;
    height: auto;
    width: 100%;
    border: 1px solid gray;
    padding: 1em;
}

.k-checkbox {
    margin-left: 0px !important;
}

/* Sekme başlıklarını ortalamak için */
.wizard .nav {
    justify-content: center;
}

.wizard .nav-link {
    text-align: center;
    min-width: 180px;
}

/* Tab içeriklerini ortalamak için */
.wizard .tab-pane {
    /*display: flex;*/
    flex-direction: column;
    align-items: center;
}

    .wizard .tab-pane .mb-3,
    .wizard .tab-pane form {
        width: 100%;
        max-width: 500px;
    }

    .wizard .tab-pane button {
        margin: 5px;
    }


.deposit-info-box {
    background-color: #f9fafb;
    border: 1px solid #ddd;
    padding: 20px;
    max-width: 100%;
}

.deposit-item {
    margin-bottom: 20px;
}

.deposit-title {
    font-weight: 700;
    font-size: 14px;
    color: #222;
    margin-bottom: 5px;
}

.deposit-value {
    font-size: 16px;
    color: #000;
}

body.dark-mode .deposit-title {
    color: rgba(226, 232, 240, 0.78);
}

body.dark-mode .deposit-value {
    color: #e6edf3;
}

.wizard .nav-link.active {
    background-color: transparent;
    color: cornflowerblue;
}

.register-card {
    max-width: 600px;
    min-width: 340px;
    margin: 60px auto;
    padding: 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
}

    /* register-card: form-row dikey layout (label üstte, input altta) */
    .register-card .form-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
    }

        .register-card .form-row .form-input-label {
            flex: 0 0 auto !important;
            max-width: 100% !important;
            min-width: 0 !important;
            width: 100% !important;
            border-right: 0px !important;
            border-left: 0px !important;
        }

            .register-card .form-row .form-input-label label {
                font-size: 0.85rem;
                font-weight: 600;
                color: #495057;
                border-right: 0px !important;
                border-left: 0px !important;
            }

        .register-card .form-row .form-input,
        .register-card .form-row .form-input-element {
            flex: 1 1 auto !important;
            width: 100% !important;
        }

        .register-card .form-row input,
        .register-card .form-row select,
        .register-card .form-row textarea,
        .register-card .form-row .k-input,
        .register-card .form-row .k-widget,
        .register-card .form-row .k-textbox,
        .register-card .form-row .k-picker,
        .register-card .form-row .k-dropdown {
            width: 100% !important;
            height: 44px !important;
            font-size: 15px !important;
            border-radius: 0.375rem !important;
            box-sizing: border-box !important;
        }

        .register-card .form-row .k-input-inner {
            height: 44px !important;
            line-height: 44px !important;
        }

    .register-card .profile-list-item {
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        max-height: none !important;
        padding: 0 !important;
    }

    /* register-card içinde .iti (intl-tel-input) - tüm tarayıcılarda mobil uyumluluk */
    .register-card .iti {
        display: block !important;
        width: 100% !important;
    }

        .register-card .iti input[type="tel"],
        .register-card .iti input[type="text"],
        .register-card .iti .iti__tel-input {
            width: 100% !important;
            height: 44px !important;
            min-height: 44px !important;
            box-sizing: border-box !important;
            -webkit-user-select: text !important;
            user-select: text !important;
            pointer-events: auto !important;
            touch-action: manipulation !important;
            position: relative !important;
            z-index: 0 !important;
        }

.border-left {
    border-left: 1px solid #7d899570 !important;
}

.border-right {
    border-right: 1px solid #7d899570 !important;
}

.navbar-search-block .input-group {
    width: 100% !important;
}

.navbar-badge {
    font-size: .6rem;
    font-weight: 300;
    padding: 2px 4px;
    position: absolute;
    right: 0px;
    top: 9px;
}

.brand-link {
    padding: 0.95rem 0.5rem;
}

    .brand-link .brand-image {
        float: none;
        line-height: .8;
        margin-left: .8rem;
        margin-right: .5rem;
        margin-top: -3px;
        width: auto;
    }

body:not(.layout-navbar-fixed) .main-sidebar {
    top: 0;
}

body.layout-navbar-fixed .main-sidebar {
    top: 0;
}

body:not(.layout-fixed).layout-navbar-fixed.text-sm .wrapper .main-sidebar {
    margin-top: 0;
}

    body:not(.layout-fixed).layout-navbar-fixed.text-sm .wrapper .main-sidebar .sidebar {
        margin-top: 0;
    }

.text-sm .layout-navbar-fixed.layout-fixed .wrapper .brand-link ~ .sidebar,
.layout-navbar-fixed.layout-fixed .wrapper .brand-link.text-sm ~ .sidebar {
    /*margin-top: calc(8.93725rem + 1px);*/
    margin-top: 0;
}

.layout-navbar-fixed.layout-fixed .wrapper .sidebar {
    margin-top: 0;
}

.layout-navbar-fixed.layout-fixed.text-sm .wrapper .sidebar {
    margin-top: 0;
}

.layout-navbar-fixed .wrapper .brand-link {
    position: relative;
}

.theme-toggle {
    position: relative;
    width: 30px;
    height: 30px;
    background: transparent;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px;
    transition: background 0.3s;
}

    .theme-toggle .icon {
        font-size: 18px;
        transition: transform 0.3s, opacity 0.3s;
    }

    .theme-toggle .sun {
        transform: translateX(0);
    }

    .theme-toggle .moon {
        transform: translateX(-27px);
        opacity: 0;
    }

    .theme-toggle.active {
        background: transparent;
    }

        .theme-toggle.active .sun {
            transform: translateX(0);
            opacity: 0;
        }

        .theme-toggle.active .moon {
            transform: translateX(-27px);
            opacity: 1;
        }

.bg-black {
    background-color: #000;
    color: #fff;
}

.accent-black .btn-link,
.accent-black a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-link):not(.badge):not(.btn),
.accent-black .nav-tabs .nav-link {
    color: #000000;
}

    .accent-black .btn-link:hover,
    .accent-black a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-link):not(.badge):not(.btn):hover,
    .accent-black .nav-tabs .nav-link:hover {
        color: #737373;
    }

.accent-black .dropdown-item:active, .accent-black .dropdown-item.active {
    background-color: #000000;
    color: #fff;
}

.accent-black .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #000000;
    border-color: #737373;
}

.accent-black .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
}

.accent-black .form-control:focus:not(.is-invalid):not(.is-warning):not(.is-valid),
.accent-black .custom-select:focus,
.accent-black .custom-control-input:focus:not(:checked) ~ .custom-control-label::before,
.accent-black .custom-file-input:focus ~ .custom-file-label {
    border-color: #737373;
}

.accent-black .page-item .page-link {
    color: #000000;
}

.accent-black .page-item.active a,
.accent-black .page-item.active .page-link {
    background-color: #000000;
    border-color: #000000;
    color: #fff;
}

.accent-black .page-item.disabled a,
.accent-black .page-item.disabled .page-link {
    background-color: #fff;
    border-color: #dee2e6;
    color: #6c757d;
}

.accent-black [class*="sidebar-dark-"] .sidebar a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link) {
    color: #c2c7d0;
}

    .accent-black [class*="sidebar-dark-"] .sidebar a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):hover {
        color: #fff;
    }

.accent-black [class*="sidebar-light-"] .sidebar a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link) {
    color: #343a40;
}

    .accent-black [class*="sidebar-light-"] .sidebar a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):hover {
        color: #212529;
    }

.dark-mode.accent-black .page-item .page-link:hover, .dark-mode.accent-black .page-item .page-link:focus {
    color: #1f252b;
}

.k-tabstrip-content {
    overflow-x: hidden !important;
}

.card-header {
    font-weight: bold;
}

.click-uploader {
    position: relative;
    cursor: pointer;
}

    .click-uploader .k-upload-button {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        opacity: 0 !important;
        pointer-events: auto !important;
    }

        .click-uploader .k-upload-button input[type="file"] {
            width: 100% !important;
            height: 100% !important;
            cursor: pointer;
        }

        .click-uploader .k-upload-button .k-button-text {
            display: none;
        }

/* iti__tel-input: form-row içinde yüksekliği parent'a eşitle (CRM sayfaları) */
.form-row .iti__tel-input {
    height: -webkit-fill-available !important;
}

/* register-card içinde iti__tel-input: sabit yükseklik (mobilde çökmeyi engelle) */
.register-card .iti__tel-input {
    height: 44px !important;
    min-height: 44px !important;
}

.k-button {
    max-height: 2em;
    /*min-height: 2em;*/
    align-items: center;
}

.k-icon-button {
    height: -webkit-fill-available !important;
    align-items: center;
    max-height: 2em;
    /*min-height: 2em;*/
    min-width: 2em;
    max-width: 2em;
}

form .k-icon-button {
    max-height: 3em;
    min-height: 3em;
    min-width: 3em;
    max-width: 3em;
}

#EditBox_Message {
    min-height: 300px;
}

/* =========================================================
   SAFARI FIX PACK (KENDO TOOLBAR + FORM/KENDO INPUTS)
   - Toolbar artefact (glass/gradient), flex hesap bug'ları
   - Form-row flex içinde input genişlik/height çökmesi
   ========================================================= */

@supports (-webkit-touch-callout: none) {
    /* -----------------------------
     SAFARI: Genel render stabilizasyonu
     (Tek noktada toplandı)
     ----------------------------- */
    .k-grid .k-grid-toolbar,
    .k-grid .k-toolbar,
    .k-grid .k-grid-header .k-toolbar {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    /* =========================================================
     1) KENDO GRID TOOLBAR FIX
     ========================================================= */
    /* Toolbar background katmanlarını sadeleştir + flex stabilize et */
    .k-grid .k-grid-toolbar,
    .k-grid .k-toolbar,
    .k-grid .k-grid-header .k-toolbar {
        background-image: none !important;
        background-color: #2a2525 !important;
        border-color: rgba(255,255,255,.08) !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: .4rem !important;
        height: auto !important;
        min-height: 40px !important;
        overflow: visible !important;
    }
        /* Toolbar iç wrapper'lar */
        .k-grid .k-grid-toolbar .k-toolbar-items,
        .k-grid .k-toolbar .k-toolbar-items,
        .k-grid .k-grid-toolbar .k-toolbar-content,
        .k-grid .k-toolbar .k-toolbar-content {
            display: flex !important;
            align-items: center !important;
            flex-wrap: wrap !important;
            gap: .4rem !important;
            width: 100% !important;
            min-width: 0 !important;
        }
        /* Butonların/ikonların 0 genişliğe düşmesini engelle */
        .k-grid .k-grid-toolbar .k-button,
        .k-grid .k-toolbar .k-button,
        .k-grid .k-grid-toolbar .k-toolbar-button,
        .k-grid .k-toolbar .k-toolbar-button,
        .k-grid .k-grid-toolbar a.k-button,
        .k-grid .k-toolbar a.k-button {
            flex: 0 0 auto !important;
            width: auto !important;
            min-width: 32px !important;
            white-space: nowrap !important;
        }
        /* Iconlar */
        .k-grid .k-grid-toolbar .k-button-icon,
        .k-grid .k-toolbar .k-button-icon,
        .k-grid .k-grid-toolbar .k-icon,
        .k-grid .k-toolbar .k-icon {
            flex: 0 0 auto !important;
        }
        /* Toolbar input/search kutuları */
        .k-grid .k-grid-toolbar input,
        .k-grid .k-toolbar input,
        .k-grid .k-grid-toolbar .k-textbox,
        .k-grid .k-toolbar .k-textbox {
            min-width: 140px;
            max-width: 100%;
        }
    /* Dar ekranda toolbar taşarsa yatay scroll */
    @media (max-width: 1024px) {
        .k-grid .k-grid-toolbar,
        .k-grid .k-toolbar {
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch;
        }
    }
    /* =========================================================
     2) SAFARI FORM + KENDO INPUT FIX
     ========================================================= */
    /* Flex container stabilizasyonu */
    .form-row {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
        /* Label sabit kolon */
        .form-row .form-input-label {
            flex: 0 0 220px;
            max-width: 220px;
            min-width: 160px;
        }
        /* Input kolonunun Safari'de daralıp çökmesini engelle (min-width:0 kritik) */
        .form-row .form-input,
        .form-row .form-input-element,
        .form-row .form-input > * {
            flex: 1 1 auto !important;
            min-width: 0 !important;
        }
        /* Native inputlar */
        .form-row input,
        .form-row select,
        .form-row textarea {
            width: 100% !important;
            min-width: 0 !important;
            height: 38px;
            line-height: 38px;
            box-sizing: border-box;
            -webkit-appearance: none;
            appearance: none;
        }
        /* textarea ayrı */
        .form-row textarea {
            height: auto;
            line-height: 1.4;
            min-height: 90px;
        }
        /* Kendo wrapper’lar */
        .form-row .k-widget,
        .form-row .k-textbox,
        .form-row .k-input,
        .form-row .k-picker,
        .form-row .k-dropdown,
        .form-row .k-combobox,
        .form-row .k-datepicker,
        .form-row .k-datetimepicker,
        .form-row .k-multiselect,
        .form-row .k-numerictextbox {
            width: 100% !important;
            min-width: 0 !important;
            box-sizing: border-box !important;
        }
            /* Kendo iç input yüksekliği */
            .form-row .k-input-inner,
            .form-row .k-input,
            .form-row .k-textbox input {
                height: 38px !important;
                line-height: 38px !important;
            }
        /* Safari'de "karanlık/boş" görünen inputlar: yazı ve bg garanti */
        .form-row input,
        .form-row textarea,
        .form-row select,
        .form-row .k-input-inner {
            background-color: #1f1f1f !important;
            color: #eaeaea !important;
            -webkit-text-fill-color: #eaeaea !important;
        }
    /* iOS/macOS Safari autofill sarısını bastır */
    input:-webkit-autofill,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
        -webkit-text-fill-color: #eaeaea !important;
        transition: background-color 9999s ease-in-out 0s;
        box-shadow: 0 0 0px 1000px #1f1f1f inset !important;
    }
    /* register-card içindeki form-row inputları: açık tema override (koyu temayı ezer) */
    .register-card .form-row input,
    .register-card .form-row textarea,
    .register-card .form-row select,
    .register-card .form-row .k-input-inner,
    .register-card input,
    .register-card textarea,
    .register-card select {
        background-color: #ffffff !important;
        color: #212529 !important;
        -webkit-text-fill-color: #212529 !important;
    }

        .register-card input:-webkit-autofill,
        .register-card textarea:-webkit-autofill,
        .register-card select:-webkit-autofill {
            -webkit-text-fill-color: #212529 !important;
            transition: background-color 9999s ease-in-out 0s;
            box-shadow: 0 0 0px 1000px #ffffff inset !important;
        }
    /* Çok dar ekranda label alt satıra düşsün */
    @media (max-width: 768px) {
        .form-row .form-input-label {
            flex: 1 1 100%;
            max-width: 100%;
            min-width: 0;
        }
    }
}

.online-match2pay-list-page {
    display: grid;
    gap: 14px;
}

.online-match2pay-list-page > .online-helpdesk-add-action {
    justify-self: start;
    text-decoration: none;
}

.online-match2pay-list-section {
    min-width: 0;
}

.online-match2pay-list-panel {
    overflow: hidden;
}