:root {
    --sms-bg: #f5f6f8;
    --sms-surface: #ffffff;
    --sms-surface-soft: #f9fafb;
    --sms-sidebar-start: #172446;
    --sms-sidebar-end: #24396f;
    --sms-primary: #172446;
    --sms-primary-hover: #24396f;
    --sms-accent: #80cc9f;
    --sms-accent-hover: #6fb88a;
    --sms-warning: #fdcc50;
    --sms-danger: #e37070;
    --sms-text: #111827;
    --sms-muted: #667085;
    --sms-border: #e5e7eb;
    --sms-border-strong: #d0d5dd;
    --sms-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    --sms-radius: 8px;
    --sms-sidebar-width: 264px;
    --sms-subnav-width: 230px;
}

/* Dashboard */
.dashboard-page {
    display: grid;
    gap: 22px;
}

.dashboard-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.dashboard-header h1 {
    margin: 0;
    color: var(--sms-primary);
    font-size: 30px;
    font-weight: 850;
}

.dashboard-header p {
    margin: 5px 0 0;
    color: var(--sms-muted);
    font-size: 14px;
}

.dashboard-updated {
    color: var(--sms-muted);
    font-size: 13px;
    white-space: nowrap;
}

.dashboard-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-refresh-button {
    display: inline-flex;
    height: 36px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 13px;
    border: 1px solid var(--sms-border-strong);
    border-radius: var(--sms-radius);
    color: var(--sms-primary);
    background: var(--sms-surface);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.dashboard-refresh-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: currentColor;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dashboard-refresh-button:hover {
    border-color: #b9c7e7;
    background: #eef4ff;
}

.dashboard-refresh-button:disabled {
    cursor: default;
    opacity: 0.72;
}

.dashboard-refresh-button.is-loading .dashboard-refresh-icon {
    animation: dashboard-refresh-spin 0.8s linear infinite;
}

@keyframes dashboard-refresh-spin {
    to {
        transform: rotate(360deg);
    }
}

.dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(150px, 1fr));
    gap: 14px;
}

.dashboard-kpi-card {
    position: relative;
    min-height: 132px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid var(--sms-border);
    border-radius: var(--sms-radius);
    background: var(--sms-surface);
    box-shadow: var(--sms-shadow);
}

.dashboard-kpi-card::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.07;
    pointer-events: none;
}

.dashboard-kpi-primary::after {
    background: linear-gradient(135deg, #172446, transparent 70%);
}

.dashboard-kpi-success::after {
    background: linear-gradient(135deg, #04a777, transparent 70%);
}

.dashboard-kpi-info::after {
    background: linear-gradient(135deg, #2176ff, transparent 70%);
}

.dashboard-kpi-orange::after {
    background: linear-gradient(135deg, #ff7a00, transparent 70%);
}

.dashboard-kpi-money::after {
    background: linear-gradient(135deg, #4b5bdc, transparent 70%);
}

.dashboard-kpi-risk::after {
    background: linear-gradient(135deg, #d92d20, transparent 70%);
}

.dashboard-kpi-icon {
    position: relative;
    z-index: 1;
    display: flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border-radius: 8px;
    color: #fff;
    background: var(--sms-primary);
    box-shadow: 0 10px 20px rgba(23, 36, 70, 0.18);
}

.dashboard-kpi-success .dashboard-kpi-icon {
    background: #04a777;
}

.dashboard-kpi-info .dashboard-kpi-icon {
    background: #2176ff;
}

.dashboard-kpi-orange .dashboard-kpi-icon {
    background: #ff7a00;
}

.dashboard-kpi-money .dashboard-kpi-icon {
    background: #2f3a78;
}

.dashboard-kpi-risk .dashboard-kpi-icon {
    background: #d92d20;
}

.dashboard-kpi-value {
    position: relative;
    z-index: 1;
    color: var(--sms-primary);
    font-size: 24px;
    font-weight: 850;
    line-height: 1.1;
}

.dashboard-kpi-label {
    position: relative;
    z-index: 1;
    margin-top: 8px;
    color: #344054;
    font-size: 13px;
    font-weight: 650;
}

.dashboard-kpi-meta {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 1;
    padding: 4px 8px;
    border-radius: 999px;
    color: #027a48;
    background: #dcfae6;
    font-size: 11px;
    font-weight: 800;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 16px;
}

.dashboard-grid-secondary {
    grid-template-columns: minmax(360px, 0.74fr) minmax(0, 1.26fr);
}

.dashboard-panel {
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid var(--sms-border);
    border-radius: var(--sms-radius);
    background: var(--sms-surface);
    box-shadow: var(--sms-shadow);
}

.dashboard-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.dashboard-panel-heading h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--sms-primary);
    font-size: 17px;
    font-weight: 850;
}

.dashboard-panel-heading h2::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 22px;
    border-radius: 999px;
    background: var(--sms-primary);
}

.dashboard-chart-panel:nth-child(2) .dashboard-panel-heading h2::before {
    background: #04a777;
}

.dashboard-panel-heading span {
    color: var(--sms-muted);
    font-size: 12px;
    font-weight: 700;
}

.dashboard-revenue-chart,
.dashboard-occupancy-chart {
    min-height: 250px;
}

.dashboard-revenue-chart {
    position: relative;
}

.dashboard-line-chart {
    display: block;
    width: 100%;
    height: 250px;
}

.dashboard-chart-grid line {
    stroke: #e6eaf1;
    stroke-dasharray: 3 5;
}

.dashboard-chart-axis text {
    fill: #98a2b3;
    font-size: 11px;
}

.dashboard-chart-area {
    fill: url(#dashboardRevenueFill);
}

.dashboard-chart-line {
    fill: none;
    stroke: var(--sms-primary);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dashboard-revenue-guide {
    opacity: 0;
    stroke: rgba(23, 36, 70, 0.2);
    stroke-dasharray: 4 5;
    stroke-width: 1.5;
    transition: opacity 0.16s ease;
}

.dashboard-revenue-guide.is-active {
    opacity: 1;
}

.dashboard-revenue-point {
    fill: #fff;
    stroke: var(--sms-primary);
    stroke-width: 2.5;
    opacity: 0;
    transition: opacity 0.16s ease, stroke-width 0.16s ease, filter 0.16s ease;
}

.dashboard-revenue-point.is-active {
    opacity: 1;
    stroke-width: 4;
    filter: drop-shadow(0 5px 8px rgba(23, 36, 70, 0.25));
}

.dashboard-revenue-hit {
    cursor: crosshair;
    fill: transparent;
    outline: none;
}

.dashboard-chart-tooltip {
    position: absolute;
    z-index: 5;
    display: grid;
    min-width: 130px;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid rgba(23, 36, 70, 0.14);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(23, 36, 70, 0.18);
    color: var(--sms-primary);
    pointer-events: none;
    white-space: nowrap;
}

.dashboard-chart-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 10px;
    height: 10px;
    border-right: 1px solid rgba(23, 36, 70, 0.14);
    border-bottom: 1px solid rgba(23, 36, 70, 0.14);
    background: #fff;
    transform: translateX(-50%) rotate(45deg);
}

.dashboard-chart-tooltip.is-below::after {
    top: -6px;
    bottom: auto;
    border-top: 1px solid rgba(23, 36, 70, 0.14);
    border-right: 0;
    border-bottom: 0;
    border-left: 1px solid rgba(23, 36, 70, 0.14);
}

.dashboard-chart-tooltip strong {
    font-size: 12px;
    font-weight: 850;
}

.dashboard-chart-tooltip span {
    color: #027a48;
    font-size: 14px;
    font-weight: 850;
}

.dashboard-chart-tooltip[hidden] {
    display: none;
}

.dashboard-occupancy-chart {
    display: grid;
    gap: 12px;
}

.dashboard-occupancy-chart.is-single-establishment {
    min-height: 0;
    align-content: start;
}

.dashboard-occupancy-row {
    display: grid;
    align-content: start;
    gap: 7px;
}

.dashboard-occupancy-chart.is-single-establishment .dashboard-occupancy-row {
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--sms-border);
    border-radius: 14px;
    background: linear-gradient(180deg, #fff, #f8fafc);
}

.dashboard-occupancy-label,
.dashboard-occupancy-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dashboard-occupancy-label strong {
    overflow: hidden;
    color: var(--sms-text);
    font-size: 14px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-occupancy-label span {
    color: #027a48;
    font-size: 13px;
    font-weight: 850;
}

.dashboard-occupancy-track {
    height: 15px;
    overflow: hidden;
    border-radius: 999px;
    background: #e4eaf1;
}

.dashboard-occupancy-chart.is-single-establishment .dashboard-occupancy-track {
    height: 18px;
}

.dashboard-occupancy-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #10b981, #14b8a6);
}

.dashboard-occupancy-meta {
    color: var(--sms-muted);
    font-size: 12px;
}

.dashboard-occupancy-statuses {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dashboard-occupancy-chart.is-single-establishment .dashboard-occupancy-statuses {
    margin-top: 2px;
}

.dashboard-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 9px;
    border: 1px solid #d7deea;
    border-radius: 999px;
    background: #f8fafc;
    color: var(--sms-muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.dashboard-status-pill.is-occupied,
.dashboard-status-card.is-occupied .dashboard-status-dot {
    border-color: #86efac;
    background: #ecfdf3;
    color: #027a48;
}

.dashboard-status-pill.is-notice,
.dashboard-status-card.is-notice .dashboard-status-dot,
.dashboard-status-pill.is-clearing,
.dashboard-status-card.is-clearing .dashboard-status-dot {
    border-color: #fedf89;
    background: #fffbeb;
    color: #b54708;
}

.dashboard-status-pill.is-own-use,
.dashboard-status-card.is-own-use .dashboard-status-dot {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.dashboard-status-pill.is-reserved,
.dashboard-status-card.is-reserved .dashboard-status-dot {
    border-color: #c4b5fd;
    background: #f5f3ff;
    color: #6d28d9;
}

.dashboard-status-pill.is-blocked,
.dashboard-status-card.is-blocked .dashboard-status-dot {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b42318;
}

.dashboard-status-pill.is-free,
.dashboard-status-card.is-free .dashboard-status-dot {
    border-color: #bae6fd;
    background: #f0f9ff;
    color: #0369a1;
}

.dashboard-status-card.is-contracts .dashboard-status-dot {
    background: var(--sms-primary);
}

.dashboard-status-card.is-leads .dashboard-status-dot {
    background: #f97316;
}

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

.dashboard-status-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-insights div {
    min-height: 84px;
    padding: 14px;
    border: 1px solid var(--sms-border);
    border-radius: var(--sms-radius);
    background: var(--sms-surface-soft);
}

.dashboard-insights strong {
    display: block;
    color: var(--sms-primary);
    font-size: 23px;
    font-weight: 850;
}

.dashboard-insights span {
    display: block;
    margin-top: 5px;
    color: var(--sms-muted);
    font-size: 13px;
    font-weight: 700;
}

.dashboard-status-card {
    position: relative;
}

.dashboard-status-dot {
    display: block;
    width: 10px;
    height: 10px;
    margin-bottom: 9px;
    border-radius: 999px;
    background: var(--sms-muted);
}

.dashboard-status-card .dashboard-status-dot {
    border: 0;
}

.dashboard-activity-list {
    display: grid;
    gap: 10px;
}

.dashboard-activity-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 58px;
    padding: 11px 13px;
    border: 1px solid var(--sms-border);
    border-radius: var(--sms-radius);
    background: var(--sms-surface-soft);
}

.dashboard-activity-icon {
    display: flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--sms-primary);
    background: #eef4ff;
}

.dashboard-activity-text {
    min-width: 0;
}

.dashboard-activity-text strong {
    display: block;
    overflow: hidden;
    color: var(--sms-text);
    font-size: 14px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-activity-text span {
    display: block;
    margin-top: 2px;
    color: var(--sms-muted);
    font-size: 12px;
}

.dashboard-activity-amount {
    color: var(--sms-primary);
    font-size: 14px;
    font-weight: 850;
    white-space: nowrap;
}

.dashboard-activity-item.is-success {
    border-color: #abefc6;
    background: #ecfdf3;
}

.dashboard-activity-item.is-success .dashboard-activity-icon {
    color: #027a48;
    background: #dcfae6;
}

.dashboard-activity-item.is-warning {
    border-color: #fedf89;
    background: #fffaeb;
}

.dashboard-activity-item.is-warning .dashboard-activity-icon {
    color: #b54708;
    background: #fef0c7;
}

.dashboard-activity-item.is-danger {
    border-color: #fecdca;
    background: #fef3f2;
}

.dashboard-activity-item.is-danger .dashboard-activity-icon {
    color: #b42318;
    background: #fee4e2;
}

.dashboard-activity-item.is-info {
    border-color: #b2ddff;
    background: #eff8ff;
}

.dashboard-activity-item.is-info .dashboard-activity-icon {
    color: #175cd3;
    background: #d1e9ff;
}

.dashboard-empty {
    display: flex;
    min-height: 180px;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border: 1px dashed var(--sms-border-strong);
    border-radius: var(--sms-radius);
    color: var(--sms-muted);
    background: var(--sms-surface-soft);
    font-weight: 700;
}

.dashboard-empty-error {
    color: #b42318;
    background: #fef3f2;
}

.dashboard-loading-line {
    height: 58px;
    border-radius: var(--sms-radius);
    background: linear-gradient(90deg, #f2f4f7, #e4e7ec, #f2f4f7);
    background-size: 220% 100%;
    animation: dashboard-loading 1.2s linear infinite;
}

@keyframes dashboard-loading {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

@media (max-width: 1440px) {
    .dashboard-kpi-grid {
        grid-template-columns: repeat(3, minmax(160px, 1fr));
    }
}

@media (max-width: 1080px) {
    .dashboard-grid,
    .dashboard-grid-secondary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .dashboard-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-updated {
        white-space: normal;
    }

    .dashboard-header-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-kpi-grid,
    .dashboard-insights {
        grid-template-columns: 1fr;
    }

    .dashboard-panel {
        padding: 16px;
    }

    .dashboard-activity-item {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .dashboard-activity-amount {
        grid-column: 2;
    }
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--sms-bg);
}

body {
    margin: 0 !important;
    min-width: 0 !important;
    color: var(--sms-text) !important;
    background: var(--sms-bg) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.45;
    overflow: auto !important;
}

a {
    color: var(--sms-primary);
    text-decoration: none;
}

a:hover {
    color: var(--sms-primary-hover);
    text-decoration: underline;
}

h1,
h2,
h3,
h4 {
    color: var(--sms-primary);
    line-height: 1.25;
}

h3 {
    border-bottom: 0 !important;
}

.hide {
    display: none !important;
}

.clear {
    clear: both;
}

/* App shell */
.sms-app {
    display: flex;
    min-height: 100vh;
    width: 100%;
    background: var(--sms-bg);
}

.sms-sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    flex: 0 0 var(--sms-sidebar-width);
    width: var(--sms-sidebar-width);
    height: 100vh;
    flex-direction: column;
    overflow-y: auto;
    color: #fff;
    background: linear-gradient(180deg, var(--sms-sidebar-start), var(--sms-sidebar-end));
}

.sms-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sms-brand-mark {
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    border-radius: var(--sms-radius);
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    font-size: 20px;
    font-weight: 800;
}

.accountTitle {
    float: none !important;
    height: auto !important;
    margin: 0 !important;
    color: #fff;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.15;
}

.sms-brand-subtitle {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 12px;
}

.MainMenuLeft {
    display: flex;
    width: auto !important;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
    margin: 0 !important;
    padding: 18px 14px;
    clear: none !important;
    float: none !important;
    position: relative;
}

.MainMenuHead {
    clear: none !important;
    float: none !important;
    position: relative;
}

.MainMenuButton {
    display: flex;
    width: 100% !important;
    height: 44px !important;
    align-items: center;
    gap: 12px;
    margin: 0 !important;
    padding: 0 14px;
    border-radius: var(--sms-radius);
    color: rgba(255, 255, 255, 0.74);
    background: transparent !important;
    cursor: pointer;
    transition: background-color 0.16s ease, color 0.16s ease;
}

.MainMenuButton center {
    display: contents;
}

.MainMenuButton i {
    width: 20px;
    margin: 0 !important;
    color: currentColor !important;
    text-align: center;
    font-size: 18px;
}

.MainMenuButtonText {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 650;
}

.MainMenuHead.is-active .MainMenuButton,
.MainMenuButton:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12) !important;
}

.MainMenuButtonLabelOpen {
    display: none !important;
}

.sms-sidebar-tools {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 6px;
    margin: 0 14px;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sms-sidebar-user {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sms-user-avatar {
    display: flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, 0.13);
    font-weight: 800;
}

.sms-user-meta {
    min-width: 0;
}

.sms-user-name {
    overflow: hidden;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
}

.sms-user-meta a {
    color: rgba(255, 255, 255, 0.68);
    font-size: 12px;
}

.sms-workspace {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.sms-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    min-height: 74px;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
    padding: 16px 28px;
    border-bottom: 1px solid var(--sms-border);
    background: rgba(245, 246, 248, 0.92);
    backdrop-filter: blur(10px);
}

.sms-topbar-kicker {
    color: var(--sms-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.sms-topbar-title {
    margin-top: 2px;
    color: var(--sms-primary);
    font-size: 24px;
    font-weight: 800;
}

.sms-help-button {
    display: inline-flex;
    min-width: 0;
    height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid var(--sms-border-strong);
    border-radius: var(--sms-radius);
    color: var(--sms-primary);
    background: var(--sms-surface);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.sms-help-button:hover {
    border-color: #b9c7e7;
    background: #eef4ff;
    color: var(--sms-primary-hover);
}

.sms-help-button.is-active {
    border-color: #b9c7e7;
    background: #eef4ff;
    color: var(--sms-primary-hover);
}

.sms-help-button i {
    color: currentColor;
    font-size: 16px;
}

.help-page {
    display: flex;
    min-height: calc(100vh - 122px);
    flex-direction: column;
    gap: 16px;
}

.help-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.help-page-header h1 {
    margin: 0;
    color: var(--sms-primary);
    font-size: 30px;
    font-weight: 850;
}

.help-page-header p {
    margin: 5px 0 0;
    color: var(--sms-muted);
    font-size: 14px;
}

.help-manual-frame {
    width: 100%;
    min-height: 780px;
    flex: 1 1 auto;
    border: 1px solid var(--sms-border);
    border-radius: var(--sms-radius);
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.LoginRightInfo {
    float: none !important;
    margin: 0 !important;
    color: var(--sms-muted);
    font-size: 14px;
    white-space: nowrap;
}

.LoginRightInfo displayName {
    color: var(--sms-text);
    font-weight: 700;
}

.sms-mobile-menu {
    display: none;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    border: 0;
    border-radius: var(--sms-radius);
    background: linear-gradient(135deg, var(--sms-sidebar-start), var(--sms-sidebar-end));
    box-shadow: var(--sms-shadow);
    cursor: pointer;
}

.sms-mobile-menu span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 99px;
    background: #fff;
}

.sms-body {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    grid-template-columns: var(--sms-subnav-width) minmax(0, 1fr);
    gap: 22px;
    padding: 24px 28px;
}

.sms-body--full {
    grid-template-columns: minmax(0, 1fr);
}

.menuSubLeft {
    align-self: start;
    float: none !important;
    width: auto !important;
    min-width: 0;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 16px;
    overflow: visible !important;
    border: 1px solid var(--sms-border);
    border-radius: var(--sms-radius);
    background: var(--sms-surface) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.menuSubLeftTitle {
    float: none !important;
    clear: none !important;
    margin: 0 0 14px !important;
    color: var(--sms-primary);
    font-size: 18px !important;
    font-weight: 800;
}

.menuSubLeft h3 {
    padding-left: 0 !important;
    color: var(--sms-muted);
    font-size: 13px;
}

.menuSubLeftName {
    position: relative;
    display: flex;
    width: 100% !important;
    height: auto !important;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    float: none !important;
    clear: none !important;
    margin: 0 0 8px !important;
    padding: 9px 10px !important;
    border: 1px solid var(--sms-border);
    border-radius: var(--sms-radius);
    color: var(--sms-text) !important;
    background: var(--sms-surface-soft) !important;
    line-height: 1.25 !important;
    font-size: 14px !important;
    font-weight: 700;
    transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.menuSubLeftName:hover {
    border-color: #c7d7ff;
    color: var(--sms-primary) !important;
    background: #eef4ff !important;
}

.menuSubLeftName.is-open {
    border-color: #b7cdfd;
    color: var(--sms-primary) !important;
    background: #eef4ff !important;
}

.rightArrow {
    float: none !important;
    color: var(--sms-muted);
    font-size: 20px !important;
    line-height: 1;
    transition: transform 0.16s ease;
}

.menuSubLeftName.is-open > .rightArrow {
    transform: rotate(90deg);
}

.menuSubLeftNameSub {
    position: absolute;
    top: 0;
    left: calc(100% + 10px);
    z-index: 120;
    display: none;
    min-width: 220px;
    margin: 0 !important;
    padding: 8px;
    border: 1px solid var(--sms-border);
    border-radius: var(--sms-radius);
    background: var(--sms-surface);
    box-shadow: var(--sms-shadow);
}

.menuSubLeftNameSubLink {
    height: auto !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 6px;
    color: var(--sms-text);
    background: transparent !important;
    line-height: 1.3 !important;
}

.menuSubLeftNameSubLink:hover {
    background: #eef4ff !important;
}

.menuSubLeftNameSubLink a {
    color: var(--sms-text) !important;
}

.MainRightContent {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: calc(100vh - 122px);
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    overflow: visible !important;
    position: relative !important;
}

/* Common controls */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea,
.infoValue,
.SettingsInfoValue,
.invoiceItemInput,
.contactItemInput,
.seriesValue,
.templatesName,
.templatesTemplate {
    border: 1px solid var(--sms-border-strong) !important;
    border-radius: var(--sms-radius) !important;
    color: var(--sms-text) !important;
    background: #fff !important;
    font-family: inherit !important;
    font-size: 14px !important;
    outline: none;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select {
    min-width: 0 !important;
    height: 38px !important;
    line-height: 38px !important;
    padding: 0 12px !important;
    float: none !important;
}

textarea {
    min-width: 260px !important;
    min-height: 130px !important;
    padding: 10px 12px !important;
}

input:focus,
select:focus,
textarea:focus,
[contenteditable="true"]:focus,
.SearchTop:focus {
    border-color: var(--sms-primary) !important;
    box-shadow: 0 0 0 3px rgba(23, 36, 70, 0.12);
}

input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--sms-primary);
    transform: none !important;
}

input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    margin: 0;
    flex: 0 0 17px;
    border: 2px solid var(--sms-border-strong);
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 4px #fff;
    cursor: pointer;
    vertical-align: middle;
}

input[type="radio"]:checked {
    border-color: var(--sms-primary);
    background: var(--sms-primary);
}

input[type="radio"]:focus {
    box-shadow: 0 0 0 3px rgba(23, 36, 70, 0.12), inset 0 0 0 4px #fff;
}

#ui-datepicker-div {
    z-index: 2000 !important;
}

#action {
    clear: none !important;
    float: none !important;
    min-width: 220px !important;
    margin: 0 12px 16px 0 !important;
    vertical-align: top;
}

.button,
input[type="submit"],
.inputSubmit {
    display: inline-flex !important;
    width: auto !important;
    min-width: 130px !important;
    height: 38px !important;
    align-items: center;
    justify-content: center;
    margin: 0 10px 16px 0 !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: var(--sms-radius) !important;
    color: #fff !important;
    background: var(--sms-accent) !important;
    line-height: 38px !important;
    font-weight: 750 !important;
    cursor: pointer;
    transition: background-color 0.16s ease, box-shadow 0.16s ease;
}

.button:hover,
input[type="submit"]:hover,
.inputSubmit:hover {
    color: #fff !important;
    background: var(--sms-accent-hover) !important;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(128, 204, 159, 0.28);
}

.SearchTop {
    display: inline-flex !important;
    width: min(420px, 100%) !important;
    height: 42px !important;
    align-items: center;
    clear: none !important;
    float: none !important;
    margin: 0 0 16px !important;
    padding: 0 14px 0 44px !important;
    border: 1px solid var(--sms-border-strong);
    border-radius: var(--sms-radius) 0 0 var(--sms-radius);
    color: var(--sms-text) !important;
    background: #fff !important;
    line-height: 42px !important;
    font-size: 15px !important;
}

.SearchTop:empty::before {
    content: "Zoeken...";
    color: #98a2b3;
}

.SearchTopIcon {
    display: inline-flex;
    width: 42px !important;
    height: 42px !important;
    align-items: center;
    justify-content: center;
    float: none !important;
    margin: 0 16px 16px -1px;
    border: 1px solid var(--sms-border-strong);
    border-left: 0;
    border-radius: 0 var(--sms-radius) var(--sms-radius) 0;
    background: #fff !important;
    vertical-align: top;
}

.SearchTopIcon::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid #98a2b3;
    border-radius: 50%;
    box-shadow: 8px 8px 0 -6px #98a2b3;
    transform: rotate(45deg);
}

.ringLoading {
    position: static !important;
    display: none;
    width: 32px;
    height: 32px;
    margin: 5px 12px 0 0 !important;
    float: left;
}

.module-list-toolbar,
.invoice-list-toolbar {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 12px 16px;
    flex-wrap: wrap;
    margin: 0 0 16px;
}

.module-action-group,
.invoice-action-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.module-search-group,
.invoice-search-group {
    display: flex;
    min-width: min(420px, 100%);
    align-items: center;
    flex: 1 1 520px;
}

.module-sort-group {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.module-date-group {
    display: flex;
    min-width: min(420px, 100%);
    align-items: center;
    gap: 10px;
    flex: 1 1 420px;
}

.module-list-toolbar #action {
    width: min(330px, 32vw) !important;
    min-width: 240px !important;
    height: 42px !important;
    line-height: 42px !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.module-list-toolbar #runAction,
.module-list-toolbar .button,
.module-list-toolbar .SearchTop,
.module-list-toolbar .SearchTopIcon,
.module-list-toolbar input[type="text"],
.module-list-toolbar .customerSearchOrder {
    height: 42px !important;
    min-height: 42px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box;
}

.module-list-toolbar input[type="text"] {
    width: min(270px, 100%) !important;
    min-width: 180px !important;
    margin-right: 0 !important;
    line-height: 42px !important;
}

.module-list-toolbar #runAction,
.module-list-toolbar .button {
    align-self: stretch;
    line-height: 42px !important;
    margin-right: 0 !important;
}

.module-list-toolbar .SearchTop {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 240px !important;
    line-height: 40px !important;
}

.module-list-toolbar .SearchTopIcon {
    flex: 0 0 42px;
    min-width: 42px !important;
    margin-right: 0 !important;
}

.customerSearchOrder {
    display: inline-block;
    float: none !important;
    min-width: 210px !important;
    height: 42px !important;
    margin: 0 0 0 0 !important;
    padding: 0 12px;
    border: 1px solid var(--sms-border-strong);
    border-radius: var(--sms-radius);
    color: var(--sms-primary) !important;
    background: #fff !important;
    line-height: 42px !important;
    font-weight: 750;
    vertical-align: top;
    cursor: pointer;
}

.customerSearchOrderFilter {
    display: none;
    position: relative;
    z-index: 8;
    margin: 0 -10px;
    padding: 8px 10px !important;
    color: var(--sms-text);
    background: #fff !important;
    box-shadow: var(--sms-shadow);
    line-height: 24px !important;
    text-align: left;
    cursor: pointer;
}

.customerSearchOrderFilter:hover {
    color: var(--sms-primary);
    background: #eef4ff !important;
}

/* Tables */
table.list {
    width: 100% !important;
    margin: 0 !important;
    clear: both !important;
    float: none !important;
    overflow: hidden;
    border: 1px solid var(--sms-border) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: var(--sms-radius);
    background: var(--sms-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

td.listObjectLabelTop {
    height: auto !important;
    padding: 13px 14px !important;
    border-bottom: 1px solid var(--sms-border);
    color: var(--sms-text) !important;
    background: var(--sms-surface-soft) !important;
    font-size: 13px !important;
    font-weight: 800;
    white-space: nowrap;
}

td.listObjectValue {
    height: auto !important;
    min-height: 46px;
    padding: 13px 14px !important;
    border-bottom: 1px solid #f0f2f5;
    color: #344054 !important;
    background: #fff !important;
    font-size: 14px !important;
    vertical-align: middle;
}

table tr:nth-child(odd) td.listObjectValue,
table tr:nth-child(even) td.listObjectValue {
    background: #fff !important;
}

table.list tr:hover td:not(.listObjectLabelTop),
table.list tr:hover td a:not(.listObjectLabelTop) {
    color: var(--sms-text) !important;
    background: #f8fbff !important;
}

tr.openObject:hover,
.listObject:hover,
.contract-row-open:hover {
    cursor: pointer;
}

.customer-list-table .customer-status-heading,
.customer-list-table .customer-status-cell {
    width: 150px;
    text-align: left;
    white-space: nowrap;
}

.customer-list-table .customer-status-pill {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 22px;
}

.customer-list-table .customer-status-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
}

.customer-list-table .customer-status-ok .customer-status-pill {
    border-color: #abefc6;
    color: #067647;
    background: #ecfdf3;
}

.customer-list-table .customer-status-ok .customer-status-pill::before {
    background: #12b76a;
}

.customer-list-table .customer-status-warning .customer-status-pill {
    border-color: #fedf89;
    color: #b54708;
    background: #fffaeb;
}

.customer-list-table .customer-status-warning .customer-status-pill::before {
    background: #f79009;
}

.customer-list-table .customer-status-due .customer-status-pill {
    border-color: #fecdca;
    color: #b42318;
    background: #fef3f2;
}

.customer-list-table .customer-status-due .customer-status-pill::before {
    background: #f04438;
}

.invoice-status-cell {
    width: 130px;
    text-align: left;
    white-space: nowrap;
}

.invoice-status-pill {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 22px;
}

.invoice-status-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
}

.invoice-status-paid .invoice-status-pill {
    border-color: #abefc6;
    color: #067647;
    background: #ecfdf3;
}

.invoice-status-paid .invoice-status-pill::before {
    background: #12b76a;
}

.invoice-status-credit .invoice-status-pill {
    border-color: #fedf89;
    color: #b54708;
    background: #fffaeb;
}

.invoice-status-credit .invoice-status-pill::before {
    background: #f79009;
}

.invoice-status-open .invoice-status-pill {
    border-color: #fecdca;
    color: #b42318;
    background: #fef3f2;
}

.invoice-status-open .invoice-status-pill::before {
    background: #f04438;
}

.rowTotal {
    display: inline-flex;
    float: none !important;
    align-items: baseline;
    margin-left: 6px;
    color: var(--sms-muted);
    font-size: 12px;
    font-weight: 700;
    vertical-align: baseline;
}

/* Module side actions */
.customerAddCustomer,
.invoiceAddInvoice,
.invoiceSettings,
.invoiceSettingsReminder,
.invoiceSepaOverview,
.addArticle,
.addContract,
.contractSettings,
.contractTemplate,
.settlingSettings {
    display: flex !important;
    width: 100% !important;
    height: 50px !important;
    align-items: center;
    float: none !important;
    clear: none !important;
    margin: 0 0 10px !important;
    padding: 0 12px !important;
    border: 1px solid var(--sms-border);
    border-radius: var(--sms-radius);
    color: var(--sms-text) !important;
    background-color: var(--sms-surface-soft) !important;
    background-image: none !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.customerAddCustomer::before,
.invoiceAddInvoice::before,
.invoiceSettings::before,
.invoiceSettingsReminder::before,
.invoiceSepaOverview::before,
.addArticle::before,
.addContract::before,
.contractSettings::before,
.contractTemplate::before,
.settlingSettings::before {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    margin-right: 12px;
    border-radius: 7px;
    color: #fff;
    background: linear-gradient(135deg, var(--sms-primary), var(--sms-primary-hover));
    font-family: "Font Awesome 5 Free";
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
}

.customerAddCustomer:hover,
.invoiceAddInvoice:hover,
.invoiceSettings:hover,
.invoiceSettingsReminder:hover,
.invoiceSepaOverview:hover,
.addArticle:hover,
.addContract:hover,
.contractSettings:hover,
.contractTemplate:hover,
.settlingSettings:hover {
    border-color: #c7d7ff;
    color: var(--sms-primary) !important;
    background-color: #eef4ff !important;
}

.customerAddCustomer::after {
    content: "Nieuwe klant";
}

.customerAddCustomer::before {
    content: "\f234";
}

.invoiceAddInvoice::after {
    content: "Nieuwe factuur";
}

.invoiceAddInvoice::before {
    content: "\f571";
}

.invoiceSettings::before {
    content: "\f013";
}

.invoiceSettingsReminder::before {
    content: "\f0f3";
}

.invoiceSepaOverview::before {
    content: "\f53d";
}

.addArticle::after {
    content: "Nieuw artikel";
}

.addArticle::before {
    content: "\f0ca";
}

.addContract::after {
    content: "Nieuw contract";
}

.addContract::before {
    content: "\f56c";
}

.contractSettings::before {
    content: "\f013";
}

.contractTemplate::before {
    content: "\f15c";
}

.settlingSettings::before {
    content: "\f1ad";
}

.menuSubLeftFilter input {
    width: 100% !important;
    margin: 0 0 10px !important;
}

.menuSubLeft label {
    display: flex;
    min-height: 34px;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px !important;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: var(--sms-radius);
    color: var(--sms-text);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.25;
    cursor: pointer;
}

.menuSubLeft label:hover {
    border-color: var(--sms-border);
    background: var(--sms-surface-soft);
}

.menuSubLeft label:has(input[type="radio"]:checked) {
    border-color: #c7d7ff;
    color: var(--sms-primary);
    background: #eef4ff;
}

.menuSubLeft label input[type="radio"] {
    order: -1;
}

.menuSubLeft br {
    display: none;
}

.menuSubLeft h3 {
    margin: 16px 0 8px !important;
    color: var(--sms-muted);
    font-size: 13px !important;
    font-weight: 800;
}

.menuSubLeft h3:first-child {
    margin-top: 0 !important;
}

/* Forms and editable detail blocks */
.infoTitle {
    clear: both;
    margin: 22px 0 14px !important;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--sms-border) !important;
    color: var(--sms-primary);
    font-size: 18px !important;
    font-weight: 800 !important;
}

.info {
    width: min(460px, 100%) !important;
    min-width: 0 !important;
    margin: 0 18px 12px 0 !important;
}

.infoLabel,
.SettingsInfoLabel,
.objectInfoRightLabel {
    color: var(--sms-muted);
    font-size: 13px;
    font-weight: 800 !important;
}

.infoValue,
.SettingsInfoValue {
    min-width: 220px !important;
    min-height: 38px !important;
    height: auto !important;
    padding: 8px 10px !important;
    line-height: 1.4 !important;
}

.SettingsInfo {
    width: 100%;
    margin-bottom: 10px !important;
}

.SettingsInfo select {
    min-width: 250px !important;
}

.commentTable {
    width: 100%;
    border-collapse: collapse;
}

.commentTable td {
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--sms-border);
}

.addCommentTextarea textarea,
.commentText {
    width: min(430px, 100%) !important;
}

.fileTitle {
    display: flex;
    min-height: 34px;
    align-items: center;
    color: var(--sms-primary);
    font-weight: 700;
}

/* Icon buttons */
.SaveInfo,
.SaveObjectInfo,
.ChangeInfo,
.DeleteInfo,
.makeContract,
.deleteComment,
.removeFile,
.SaveSettings,
.SaveReminderSettings,
.SaveInvoice,
.SavePayment,
.PDF,
.iDeal,
.ideal,
.DeleteObject,
.addSeries,
.addPayment,
.addItem,
.removeItem,
.removePayment,
.removeContractItem,
.addFiled,
.addTemplate,
.deleteContract,
.saveContractOptions,
.listObjectValuePDF,
.listObjectValueCoin,
.listObjectInvoiceSentByEmailTrue,
.zoomIn,
.zoomOut,
.changeMap,
.saveMap,
.addObject,
.EstablishmentMap,
.EstablishmentList {
    border: 1px solid var(--sms-border) !important;
    border-radius: var(--sms-radius) !important;
    background-color: #fff !important;
    background-image: none !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 26px 26px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.BodyPopupLayerExtra .SaveInfo,
.BodyPopupLayerExtra .SaveObjectInfo,
.BodyPopupLayerExtra .ChangeInfo,
.BodyPopupLayerExtra .DeleteInfo,
.BodyPopupLayerExtra .DeleteObject,
.BodyPopupLayerExtra .makeContract,
.BodyPopupLayerExtra .SaveSettings,
.BodyPopupLayerExtra .SaveReminderSettings,
.BodyPopupLayerExtra .SaveInvoice,
.BodyPopupLayerExtra .SavePayment,
.BodyPopupLayerExtra .PDF,
.BodyPopupLayerExtra .iDeal,
.BodyPopupLayerExtra .ideal,
.BodyPopupLayerExtra .deleteContract,
.BodyPopupLayerExtra .saveContractOptions {
    display: inline-flex !important;
    width: 40px !important;
    height: 40px !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    float: none !important;
    clear: none !important;
    margin: 0 6px 0 0 !important;
    background-size: 25px 25px !important;
}

.SaveInfo::before,
.SaveObjectInfo::before,
.ChangeInfo::before,
.DeleteInfo::before,
.DeleteObject::before,
.makeContract::before,
.deleteComment::before,
.removeFile::before,
.SaveSettings::before,
.SaveReminderSettings::before,
.SaveInvoice::before,
.SavePayment::before,
.PDF::before,
.iDeal::before,
.ideal::before,
.deleteContract::before,
.saveContractOptions::before,
.addSeries::before,
.addPayment::before,
.addItem::before,
.removeItem::before,
.removePayment::before,
.removeContractItem::before,
.addFiled::before,
.addTemplate::before,
.zoomIn::before,
.zoomOut::before,
.changeMap::before,
.saveMap::before,
.addObject::before,
.EstablishmentMap::before,
.EstablishmentList::before,
.listObjectValuePDF::before,
.listObjectValueCoin::before,
.listObjectInvoiceSentByEmailTrue::before {
    display: inline-flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: var(--sms-primary);
    font-family: "Font Awesome 5 Free";
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
}

.SaveInfo::before,
.SaveObjectInfo::before,
.SaveSettings::before,
.SaveReminderSettings::before,
.SaveInvoice::before,
.SavePayment::before,
.saveContractOptions::before,
.saveMap::before {
    content: "\f0c7";
}

.ChangeInfo::before,
.changeMap::before {
    content: "\f304";
}

.DeleteInfo::before,
.DeleteObject::before,
.deleteComment::before,
.removeFile::before,
.deleteContract::before,
.removeItem::before,
.removePayment::before,
.removeContractItem::before {
    content: "\f2ed";
}

.makeContract::before {
    content: "\f4c4";
}

.PDF::before,
.listObjectValuePDF::before {
    content: "\f1c1";
}

.iDeal::before,
.ideal::before,
.listObjectValueCoin::before {
    content: "\f09d";
}

.listObjectInvoiceSentByEmailTrue::before {
    content: "\f0e0";
}

.addSeries::before,
.addPayment::before,
.addItem::before,
.addFiled::before,
.addTemplate::before,
.addObject::before {
    content: "\f067";
}

.zoomIn::before {
    content: "\f00e";
}

.zoomOut::before {
    content: "\f010";
}

.EstablishmentMap::before {
    content: "\f279";
}

.EstablishmentList::before {
    content: "\f03a";
}

.SaveInfo:hover,
.SaveObjectInfo:hover,
.ChangeInfo:hover,
.DeleteInfo:hover,
.makeContract:hover,
.deleteComment:hover,
.removeFile:hover,
.SaveSettings:hover,
.SaveReminderSettings:hover,
.SaveInvoice:hover,
.SavePayment:hover,
.PDF:hover,
.iDeal:hover,
.ideal:hover,
.DeleteObject:hover,
.addSeries:hover,
.addPayment:hover,
.addItem:hover,
.removeItem:hover,
.removePayment:hover,
.removeContractItem:hover,
.addFiled:hover,
.addTemplate:hover,
.deleteContract:hover,
.saveContractOptions:hover,
.listObjectValuePDF:hover,
.listObjectValueCoin:hover,
.zoomIn:hover,
.zoomOut:hover,
.changeMap:hover,
.saveMap:hover,
.addObject:hover,
.EstablishmentMap:hover,
.EstablishmentList:hover {
    border-color: #c7d7ff !important;
    background-color: #eef4ff !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

/* Popups */
.BodyPopupLayer {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: none;
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto;
    padding: 18px;
    background: rgba(15, 23, 42, 0.54) !important;
    background-image: none !important;
}

.BodyPopupLayerContainer {
    position: relative;
    width: min(1180px, calc(100vw - 36px));
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 0 16px !important;
    overflow: hidden;
    border: 1px solid var(--sms-border);
    border-radius: var(--sms-radius);
    background: var(--sms-surface) !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}

.BodyPopupLayerExtra {
    display: flex;
    min-height: 52px !important;
    align-items: center;
    gap: 6px;
    float: none !important;
    padding: 6px 60px 6px 14px;
    border-bottom: 1px solid var(--sms-border);
}

.BodyPopupLayerClose {
    position: absolute;
    top: 7px;
    right: 10px;
    z-index: 20;
    display: inline-flex;
    width: 38px !important;
    height: 38px !important;
    align-items: center;
    justify-content: center;
    border-radius: var(--sms-radius);
    background-color: transparent !important;
    background-image: none !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 22px 22px !important;
    cursor: pointer;
}

.BodyPopupLayerClose::before {
    content: "\f00d";
    color: var(--sms-text);
    font-family: "Font Awesome 5 Free";
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
}

.BodyPopupLayerClose:hover {
    background-color: #f2f4f7 !important;
}

.BodyPopupLayerContent {
    padding: 16px !important;
}

.loader {
    position: fixed !important;
    inset: 0;
    z-index: 1000;
    display: none;
    width: 100% !important;
    height: 100% !important;
    background: rgba(255, 255, 255, 0.72) !important;
    background-image: none !important;
}

.loaderContent {
    top: 50% !important;
    left: 50%;
    width: auto !important;
    padding: 22px 26px !important;
    border-radius: var(--sms-radius);
    transform: translate(-50%, -50%);
}

/* Generic popup styling for all modules */
.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) {
    display: flow-root;
}

.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) > h1,
.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) > h2,
.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) > h3 {
    margin: 0 0 14px !important;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--sms-border) !important;
    color: var(--sms-primary);
    font-weight: 850;
}

.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) .SettingsInfo,
.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) .info,
.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) .invoiceInfo {
    display: grid !important;
    width: min(760px, 100%) !important;
    min-height: 0 !important;
    grid-template-columns: 165px minmax(0, 1fr);
    gap: 8px 12px;
    align-items: center;
    float: none !important;
    clear: both !important;
    margin: 0 0 10px !important;
}

.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) .SettingsInfo:has(textarea),
.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) .info:has(textarea) {
    align-items: start;
}

.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) .SettingsInfoLabel,
.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) .infoLabel,
.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) .seriesLabel,
.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) .templatesListName,
.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) .templatesListTemplate {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    color: #667085;
    font-size: 13px;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) .SettingsInfoValue,
.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) .infoValue,
.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) .seriesValue,
.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) .seriesvalue,
.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) .templatesName,
.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) .templatesTemplate {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    line-height: 1.35 !important;
    font-size: 14px !important;
}

.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) select,
.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) input[type="text"],
.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) input[type="password"],
.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) input[type="email"],
.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) input[type="number"],
.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) input[type="date"] {
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    line-height: 36px !important;
}

.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) textarea {
    width: min(720px, 100%) !important;
    min-width: 0 !important;
    min-height: 150px !important;
}

.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) textarea.templatesTemplate {
    width: 100% !important;
    min-height: 320px !important;
    height: 320px !important;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace !important;
}

.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) table.list,
.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) .customerExtraObjectList {
    margin-top: 10px !important;
    font-size: 14px;
}

.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) td.listObjectLabelTop,
.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) td.listObjectValue {
    padding: 9px 10px !important;
    font-size: 13px !important;
}

.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) .series,
.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) .templatesObject,
.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) .invoiceItems,
.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) .contactItems {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    width: 100% !important;
    height: auto !important;
    min-height: 36px;
    float: none !important;
    clear: both !important;
    margin: 0 0 10px !important;
}

.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) .addSeries,
.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) .addPayment,
.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) .addItem,
.BodyPopupLayerContent:not(.invoice-editor):not(.customer-editor):not(.contract-option-editor) .addTemplate {
    width: 34px !important;
    height: 34px !important;
    background-size: 22px 22px !important;
}

.article-popup.BodyPopupLayerContainer {
    width: min(1260px, calc(100vw - 36px));
}

.article-popup .BodyPopupLayerExtra {
    min-height: 56px !important;
}

.BodyPopupLayerContent.article-editor {
    padding: 22px 24px 26px !important;
}

.BodyPopupLayerContent.article-editor > h3 {
    margin: 0 0 18px !important;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--sms-border) !important;
    color: var(--sms-primary);
    font-size: 22px;
    font-weight: 850;
}

.BodyPopupLayerContent.article-editor .article-form {
    display: grid;
    grid-template-columns: minmax(250px, 1.45fr) minmax(260px, 1.45fr) minmax(140px, 0.7fr) minmax(120px, 0.6fr) minmax(120px, 0.6fr);
    gap: 14px;
    align-items: end;
    width: 100%;
    max-width: 1160px;
}

.BodyPopupLayerContent.article-editor .article-field {
    display: grid;
    min-width: 0;
    gap: 7px;
}

.BodyPopupLayerContent.article-editor .article-field label,
.BodyPopupLayerContent.article-editor .article-default span {
    color: var(--sms-muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
}

.BodyPopupLayerContent.article-editor .article-field select,
.BodyPopupLayerContent.article-editor .article-field input[type="text"] {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    padding: 0 12px !important;
    line-height: 40px !important;
}

.BodyPopupLayerContent.article-editor .article-field-account,
.BodyPopupLayerContent.article-editor .article-field-name,
.BodyPopupLayerContent.article-editor .article-field-ledger,
.BodyPopupLayerContent.article-editor .article-field-ledger-tax {
    grid-column: span 2;
}

.BodyPopupLayerContent.article-editor .article-default {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: 10px;
    align-self: end;
    justify-self: start;
    padding: 0 12px;
    border: 1px solid var(--sms-border-strong);
    border-radius: var(--sms-radius);
    background: #fff;
}

.BodyPopupLayerContent.article-editor .article-default input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
}

.BodyPopupLayerContent.article-editor .article-online-reservation {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(220px, max-content) minmax(220px, 280px) minmax(220px, 280px);
    gap: 14px;
    align-items: end;
}

.BodyPopupLayerContent.article-editor .article-add-placeholder {
    display: none !important;
}

.article-ledger-popup.BodyPopupLayerContainer {
    width: min(1120px, calc(100vw - 36px));
}

.BodyPopupLayerContent.article-ledger-editor .article-ledger-edit-form {
    display: grid;
    grid-template-columns: minmax(180px, 220px) minmax(280px, 1fr) auto;
    gap: 14px;
    align-items: end;
    max-width: 960px;
}

.BodyPopupLayerContent.article-ledger-editor .article-ledger-edit-status {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: flex-end;
}

.BodyPopupLayerContent.article-ledger-editor .article-ledger-edit-form.is-invalid input {
    border-color: #ff4d4f !important;
    box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.1);
}

.article-ledger-status-header,
.article-ledger-status {
    width: 180px;
    text-align: right;
}

.article-ledger-status-badge {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid var(--sms-border-strong);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

.article-ledger-status-badge.is-free {
    border-color: #fedf89;
    color: #b54708;
    background: #fffaeb;
}

.article-ledger-status-badge.is-linked {
    border-color: #a7f3d0;
    color: #047857;
    background: #ecfdf3;
}

.article-ledger-linked {
    max-width: 960px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--sms-border);
}

.article-ledger-linked-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.article-ledger-linked-heading h4 {
    margin: 0;
    color: var(--sms-primary);
    font-size: 17px;
    font-weight: 850;
}

.article-ledger-linked-heading span {
    color: var(--sms-muted);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.article-ledger-linked-empty {
    padding: 12px 14px;
    border: 1px solid var(--sms-border);
    border-radius: var(--sms-radius);
    color: var(--sms-muted);
    background: var(--sms-surface-soft);
    font-size: 14px;
    font-weight: 650;
}

.article-ledger-linked-list {
    width: 100%;
    margin: 0 !important;
    overflow: hidden;
    border: 1px solid var(--sms-border);
    border-radius: var(--sms-radius);
}

.article-ledger-linked-list .listObjectLabelTop,
.article-ledger-linked-list .listObjectValue {
    padding: 9px 11px !important;
}

.article-ledger-linked-price {
    width: 120px;
    white-space: nowrap;
}

@media (max-width: 1180px) {
    .BodyPopupLayerContent.article-editor .article-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .BodyPopupLayerContent.article-editor .article-field-account,
    .BodyPopupLayerContent.article-editor .article-field-name,
    .BodyPopupLayerContent.article-editor .article-field-ledger,
    .BodyPopupLayerContent.article-editor .article-field-ledger-tax {
        grid-column: auto;
    }

    .BodyPopupLayerContent.article-editor .article-online-reservation {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .BodyPopupLayerContent.article-editor .article-form {
        grid-template-columns: 1fr;
    }

    .BodyPopupLayerContent.article-ledger-editor .article-ledger-edit-form {
        grid-template-columns: 1fr;
    }

    .BodyPopupLayerContent.article-ledger-editor .article-ledger-edit-status {
        justify-content: flex-start;
    }

    .article-ledger-linked-list {
        display: block;
        overflow-x: auto;
    }
}

.invoice-payment-popup {
    width: min(1180px, calc(100vw - 36px));
}

.BodyPopupLayerContent.invoice-payment-editor {
    padding: 22px 24px 26px !important;
}

.BodyPopupLayerContent.invoice-payment-editor > h1 {
    margin: 0 0 16px !important;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--sms-border) !important;
    color: var(--sms-primary);
    font-size: 30px !important;
    font-weight: 850;
    line-height: 1.1;
}

.invoice-payment-list {
    width: 100%;
    max-width: 980px;
}

.BodyPopupLayerContent.invoice-payment-editor .SettingsInfo.invoice-payment-row.payment-grid-row {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: minmax(130px, 160px) minmax(120px, 160px) minmax(180px, 1fr) minmax(220px, 1.2fr) 38px;
    gap: 10px;
    align-items: center;
    float: none !important;
    clear: none !important;
    margin: 0 0 10px !important;
}

.BodyPopupLayerContent.invoice-payment-editor .invoice-payment-header {
    margin-bottom: 6px !important;
    color: var(--sms-muted);
    font-size: 13px;
    font-weight: 800;
}

.BodyPopupLayerContent.invoice-payment-editor .invoice-payment-row.payment-grid-row .SettingsInfoValue.invoice-payment-field {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    line-height: 1.35 !important;
}

.BodyPopupLayerContent.invoice-payment-editor .invoice-payment-row.payment-grid-row .SettingsInfoValue.invoice-payment-method {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.BodyPopupLayerContent.invoice-payment-editor .invoice-payment-row.payment-grid-row .SettingsInfoValue.invoice-payment-method select {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.invoice-payment-empty {
    width: 100%;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--sms-border);
    border-radius: var(--sms-radius);
    color: var(--sms-muted);
    background: var(--sms-surface-soft);
    font-size: 14px;
    font-weight: 650;
}

.invoice-payment-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.invoice-payment-actions .addPayment,
.invoice-payment-actions .SavePayment,
.BodyPopupLayerContent.invoice-payment-editor .removePayment {
    display: inline-flex !important;
    width: 34px !important;
    height: 34px !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    background-size: 22px 22px !important;
}

@media (max-width: 880px) {
    .BodyPopupLayerContent.invoice-payment-editor .invoice-payment-header,
    .invoice-editor .invoice-payment-header {
        display: none !important;
    }

    .BodyPopupLayerContent.invoice-payment-editor .SettingsInfo.invoice-payment-row.payment-grid-row,
    .invoice-editor .SettingsInfo.invoice-payment-row.payment-grid-row {
        grid-template-columns: 1fr;
        padding: 12px;
        border: 1px solid var(--sms-border);
        border-radius: var(--sms-radius);
        background: var(--sms-surface-soft);
    }

    .BodyPopupLayerContent.invoice-payment-editor .removePayment,
    .invoice-editor .removePayment {
        justify-self: start;
    }
}

/* Floor map */
.establishmentNameTop {
    width: 100%;
    height: auto !important;
    margin: 0 0 18px !important;
    color: var(--sms-primary);
    font-size: 26px;
    font-weight: 800;
}

.topMenu {
    display: flex;
    height: auto !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.toolSetMap,
.view {
    gap: 8px;
}

.zoomIn,
.zoomOut,
.changeMap,
.saveMap,
.addObject,
.EstablishmentMap,
.EstablishmentList {
    width: 38px !important;
    height: 38px !important;
    margin-left: 8px !important;
}

.object {
    border-radius: 6px;
    border-color: rgba(15, 23, 42, 0.32) !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}

.object:hover {
    opacity: 0.78 !important;
    border-color: var(--sms-primary) !important;
}

.map {
    border-radius: var(--sms-radius);
}

/* Invoice and contract line editors */
.invoiceItemsLabels,
.contactItemsLabels {
    padding: 12px 0 8px;
    color: var(--sms-muted);
    border-bottom: 1px solid var(--sms-border);
    font-size: 13px;
}

.invoiceItems,
.contactItems,
.series,
.templatesObject {
    height: auto !important;
    min-height: 38px;
}

.invoiceItemInput,
.contactItemInput,
.seriesValue,
.templatesName {
    min-height: 38px !important;
    height: auto !important;
    padding: 8px 10px !important;
    line-height: 1.35 !important;
}

.totalRight {
    min-height: 38px;
    border-bottom: 1px solid var(--sms-border) !important;
}

.totalRight .totalLabel,
.totalRight .totalvalue,
#itemsTotal,
#itemsTaxTotal,
#totalTotals {
    height: 38px !important;
    line-height: 38px !important;
}

.article-ledger-panel {
    margin-top: 22px !important;
    padding: 18px;
    border: 1px solid var(--sms-border);
    border-radius: var(--sms-radius);
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.article-ledger-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.article-ledger-heading h2 {
    margin: 0;
    color: var(--sms-primary);
    font-size: 22px;
    font-weight: 850;
}

.article-ledger-count {
    color: var(--sms-muted);
    font-size: 13px;
    font-weight: 800;
}

.article-ledger-list {
    margin: 0 !important;
}

.article-ledger-list .listObjectLabelTop,
.article-ledger-list .listObjectValue {
    padding: 10px 12px !important;
}

.article-ledger-number {
    width: 180px;
    color: var(--sms-primary);
    font-weight: 800;
}

.article-empty-row {
    color: var(--sms-muted);
}

.article-ledger-form {
    display: grid;
    grid-template-columns: minmax(150px, 220px) minmax(240px, 1fr) auto;
    gap: 12px;
    align-items: end;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--sms-border);
}

.article-ledger-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.article-ledger-field label {
    color: var(--sms-muted);
    font-size: 13px;
    font-weight: 800;
}

.article-ledger-field input {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    padding: 0 12px !important;
    line-height: 40px !important;
}

.addLedger {
    display: inline-flex;
    width: auto !important;
    min-width: 126px;
    height: 40px !important;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--sms-radius);
    color: #fff;
    background: var(--sms-accent) !important;
    font-weight: 850;
    cursor: pointer;
}

.article-ledger-form.is-invalid input {
    border-color: #ff4d4f !important;
    box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.1);
}

@media (max-width: 760px) {
    .article-ledger-form {
        grid-template-columns: 1fr;
    }

    .addLedger {
        width: 100% !important;
    }
}

/* jQuery UI */
.ui-widget {
    font-family: inherit !important;
}

.ui-widget-content {
    border-color: var(--sms-border) !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default {
    border-color: var(--sms-border) !important;
    background: #fff !important;
}

.ui-state-active,
.ui-widget-content .ui-state-active {
    border-color: var(--sms-primary) !important;
    color: #fff !important;
    background: var(--sms-primary) !important;
}

/* Login */
.loginContainer {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: grid;
    width: min(1180px, calc(100vw - 40px)) !important;
    min-height: 100vh;
    height: auto !important;
    grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1fr);
    gap: 44px;
    align-items: center;
    margin: 0 auto !important;
    padding: 48px 0;
}

.logoLeft,
.inputRight {
    float: none !important;
    width: auto !important;
}

.loginBrandPanel {
    display: flex;
    min-height: 540px;
    flex-direction: column;
    justify-content: space-between;
    gap: 42px;
    padding: 42px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(160deg, var(--sms-sidebar-start) 0%, var(--sms-sidebar-end) 100%);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
}

.loginBrandLogo {
    display: flex;
    width: 180px;
    height: 180px;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
}

.loginBrandLogo img {
    max-width: 86%;
    height: auto;
}

.loginBrandCopy h1 {
    margin: 12px 0 0;
    color: #fff;
    font-size: 34px;
    font-weight: 850;
    line-height: 1.12;
}

.loginBrandCopy p {
    max-width: 420px;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 16px;
}

.loginEyebrow {
    margin: 0;
    color: var(--sms-muted);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.loginBrandPanel .loginEyebrow {
    color: rgba(255, 255, 255, 0.72);
}

.loginPanel {
    min-height: 390px;
    padding: 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--sms-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.10);
}

.tileRight {
    margin: 8px 0 0 !important;
    color: var(--sms-primary) !important;
    font-size: 38px !important;
    font-weight: 850;
    line-height: 1.1;
}

.loginForm {
    display: grid;
    gap: 18px;
    margin-top: 34px;
}

.twoFactorLoginForm {
    display: none;
    gap: 22px;
}

.twoFactorLoginText {
    margin: 8px 0 0;
    color: var(--sms-muted);
    font-size: 15px;
}

.twoFactorLoginForm .loginField {
    gap: 10px;
}

.twoFactorLoginForm .inputSubmit {
    margin-top: 6px !important;
}

.loginField {
    display: grid;
    gap: 8px;
    color: var(--sms-muted);
    font-size: 14px;
    font-weight: 800;
}

.inputText {
    width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    margin-top: 0 !important;
    padding: 0 16px !important;
    border-color: var(--sms-border-strong) !important;
    border-radius: var(--sms-radius) !important;
    color: var(--sms-text) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.inputText:focus {
    border-color: #9eb8ff !important;
    box-shadow: 0 0 0 4px rgba(46, 91, 255, 0.12) !important;
}

.inputText.is-invalid {
    border-color: var(--sms-danger) !important;
    box-shadow: 0 0 0 4px rgba(227, 112, 112, 0.14) !important;
}

.inputSubmit,
.googleLoginButton {
    display: inline-flex !important;
    width: 100% !important;
    height: 52px !important;
    align-items: center;
    justify-content: center;
    margin: 4px 0 0 !important;
    border-radius: var(--sms-radius) !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    text-decoration: none !important;
    cursor: pointer;
}

.inputSubmit {
    border: 0 !important;
    color: #fff !important;
    background: var(--sms-accent) !important;
    transition: background-color 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

.inputSubmit:hover {
    background: var(--sms-accent-hover) !important;
    box-shadow: 0 8px 18px rgba(128, 204, 159, 0.25) !important;
}

.inputSubmit:disabled {
    cursor: wait;
    opacity: 0.76;
}

.googleLoginButton {
    border: 1px solid var(--sms-border-strong) !important;
    color: var(--sms-primary) !important;
    background: #fff !important;
}

.googleLoginButton:hover {
    border-color: #b8c3d4 !important;
    background: var(--sms-surface-soft) !important;
}

.loginError {
    position: static !important;
    display: none;
    margin: 0 !important;
    padding: 12px 14px;
    border: 1px solid #f6b6b6;
    border-radius: var(--sms-radius);
    color: #9f1d1d !important;
    background: #fff1f1;
    font-size: 14px !important;
    font-weight: 800 !important;
}

/* Two-factor setup */
.two-factor-modal {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(17, 24, 39, 0.45);
}

.two-factor-modal.is-visible {
    display: flex;
}

.two-factor-dialog {
    position: relative;
    width: min(520px, 100%);
    padding: 30px;
    border: 1px solid var(--sms-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.22);
}

.two-factor-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}

.two-factor-close::before,
.two-factor-close::after {
    content: "";
    position: absolute;
    top: 16px;
    left: 9px;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: var(--sms-primary);
}

.two-factor-close::before {
    transform: rotate(45deg);
}

.two-factor-close::after {
    transform: rotate(-45deg);
}

.two-factor-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border-radius: 12px;
    color: #fff;
    background: var(--sms-primary);
    font-size: 20px;
}

.two-factor-view {
    display: none;
}

.two-factor-view.is-active {
    display: block;
}

.two-factor-view h2 {
    margin: 18px 0 8px;
    color: var(--sms-primary);
    font-size: 26px;
    font-weight: 850;
    text-align: center;
}

.two-factor-view p {
    margin: 0;
    color: var(--sms-muted);
    text-align: center;
}

.two-factor-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.two-factor-actions .button,
.two-factor-actions .button-secondary,
.two-factor-confirm {
    margin: 0 !important;
}

.button-secondary {
    display: inline-flex;
    height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border: 1px solid var(--sms-border-strong);
    border-radius: var(--sms-radius);
    color: var(--sms-primary);
    background: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.two-factor-qr {
    width: 190px;
    min-height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 22px 0 12px;
    padding: 10px;
    border: 1px solid var(--sms-border);
    border-radius: 12px;
    background: #fff;
}

.two-factor-qr-svg {
    width: 168px;
    height: 168px;
    display: block;
}

.two-factor-loading {
    color: var(--sms-muted);
    font-size: 14px;
}

.two-factor-secret {
    margin: 0 0 16px;
    color: var(--sms-muted);
    font-size: 13px;
    word-break: break-all;
}

.two-factor-confirm-row {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.two-factor-code {
    width: 100%;
    height: 42px;
    padding: 0 13px;
    border: 1px solid var(--sms-border-strong);
    border-radius: var(--sms-radius);
    font: inherit;
    outline: none;
}

.two-factor-code:focus {
    border-color: #9eb8ff;
    box-shadow: 0 0 0 4px rgba(46, 91, 255, 0.12);
}

.two-factor-code.is-invalid {
    border-color: var(--sms-danger);
    box-shadow: 0 0 0 4px rgba(227, 112, 112, 0.14);
}

.two-factor-message {
    min-height: 22px;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 800;
}

.two-factor-message.is-error {
    color: #9f1d1d;
}

.two-factor-message.is-success {
    color: #078b4f;
}

/* Detail popups: invoice and customer editors */
.invoice-popup.BodyPopupLayerContainer,
.customer-popup.BodyPopupLayerContainer {
    width: min(1480px, calc(100vw - 48px));
}

.invoice-popup .BodyPopupLayerExtra,
.customer-popup .BodyPopupLayerExtra {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 64px !important;
    background: #fff;
}

.invoice-popup .BodyPopupLayerExtra > div,
.customer-popup .BodyPopupLayerExtra > div {
    margin: 0 8px 0 0 !important;
}

.invoice-popup .BodyPopupLayerExtra .SaveInvoice,
.invoice-popup .BodyPopupLayerExtra .PDF,
.invoice-popup .BodyPopupLayerExtra .iDeal,
.invoice-popup .BodyPopupLayerExtra .ideal,
.customer-popup .BodyPopupLayerExtra .SaveInfo,
.customer-popup .BodyPopupLayerExtra .ChangeInfo,
.customer-popup .BodyPopupLayerExtra .DeleteInfo,
.customer-popup .BodyPopupLayerExtra .makeContract {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px;
}

.customer-popup .BodyPopupLayerExtra .url {
    display: inline-flex;
    width: auto !important;
    height: 40px !important;
    align-items: center;
    margin-left: 8px !important;
    padding: 0 14px;
    border: 1px solid var(--sms-border);
    border-radius: var(--sms-radius);
    background: var(--sms-surface-soft);
    line-height: 40px !important;
    font-weight: 800;
}

.customer-popup .BodyPopupLayerExtra .url a {
    color: var(--sms-primary);
}

.invoice-editor {
    display: grid;
    grid-template-columns: repeat(2, minmax(300px, 1fr));
    gap: 14px 28px;
    align-items: start;
}

.invoice-editor > .SettingsInfo,
.invoice-editor > .invoiceInfo {
    display: grid !important;
    width: 100% !important;
    min-height: 0 !important;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 10px 14px;
    align-items: center;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
}

.invoice-editor > .invoice-select-account,
.invoice-editor > .invoice-select-series,
.invoice-editor > .invoice-section-title,
.invoice-editor > .invoice-note,
.invoice-editor > .invoiceItemsLabels,
.invoice-editor > .invoice-items-container,
.invoice-editor > .invoiceItems,
.invoice-editor > .addItem,
.invoice-editor > .invoice-payment-section,
.invoice-editor > .totalRightContainer {
    grid-column: 1 / -1;
}

.invoice-editor > .invoice-select-account,
.invoice-editor > .invoice-select-series {
    max-width: 620px;
}

.invoice-editor .SettingsInfoLabel,
.invoice-editor .SettingsInfoLabel[style] {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: #667085;
    font-size: 13px;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

.invoice-editor .SettingsInfoValue {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
}

.invoice-editor select {
    width: 100% !important;
}

.invoice-editor .customerOpenUrl {
    display: inline-flex;
    width: max-content;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #dbe4f0;
    border-radius: var(--sms-radius);
    color: var(--sms-primary);
    background: #eef4ff;
    font-size: 14px;
    font-weight: 800;
}

.invoice-editor .customerOpenUrl:hover {
    text-decoration: none;
    background: #e3edff;
}

.customerOpenUrl {
    display: inline-flex !important;
    width: max-content !important;
    min-width: 0 !important;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border: 1px solid #c7d7ff;
    border-radius: var(--sms-radius);
    color: var(--sms-primary) !important;
    background: #fff;
    font-size: 12px;
    font-weight: 800 !important;
    line-height: 30px;
    white-space: nowrap;
}

.customerOpenUrl:hover {
    background: #f5f8ff;
    text-decoration: none !important;
}

.invoice-editor #note {
    width: 100% !important;
    height: 84px !important;
    align-items: flex-start;
}

.invoice-editor > .SettingsInfo h2 {
    grid-column: 1 / -1;
    margin: 22px 0 0 !important;
    padding-top: 22px;
    border-top: 1px solid var(--sms-border);
    color: var(--sms-primary);
    font-size: 24px !important;
    font-weight: 850;
}

.invoice-editor .invoiceItemsLabels,
.invoice-editor .invoiceItems {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: minmax(170px, 1.05fr) minmax(280px, 2fr) minmax(120px, 0.8fr) minmax(90px, 0.55fr) minmax(110px, 0.7fr) minmax(120px, 0.75fr) 44px;
    gap: 10px;
    align-items: stretch;
    float: none !important;
    clear: none !important;
}

.invoice-editor .invoiceItemsLabels {
    margin-top: 6px !important;
    padding: 0 0 8px !important;
    border-bottom: 1px solid var(--sms-border);
}

.invoice-editor > .invoice-items-container {
    display: grid;
    gap: 10px;
}

.invoice-editor .invoiceItemsContent,
.invoice-editor .invoiceItemInput,
.invoice-editor .invoiceItemInput[style] {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    float: none !important;
}

.invoice-editor .invoiceItemsContent {
    color: #667085;
    font-size: 13px;
    font-weight: 800;
}

.invoice-editor .invoiceItemInput {
    display: flex;
    align-items: center;
    min-height: 48px !important;
    padding: 10px 12px !important;
}

.invoice-editor .invoiceItemInput select,
.invoice-editor .invoiceItemInput select[style] {
    width: 100% !important;
}

.invoice-editor .removeItem {
    width: 40px !important;
    height: 40px !important;
    margin: 4px 0 0 !important;
}

.invoice-editor > .addItem,
.invoice-editor .invoice-items-container > .addItem {
    width: 42px !important;
    height: 42px !important;
    margin-top: 2px !important;
}

.invoice-editor .totalRightContainer {
    display: grid;
    width: min(450px, 100%) !important;
    justify-self: end;
    gap: 0;
    margin-top: 10px;
    padding: 6px 0;
}

.invoice-editor .totalRight {
    display: grid;
    width: 100% !important;
    grid-template-columns: 1fr 160px;
    gap: 20px;
    float: none !important;
}

.invoice-editor .totalRight .totalLabel,
.invoice-editor #itemsTotal,
.invoice-editor #itemsTaxTotal,
.invoice-editor #totalTotals {
    width: auto !important;
    color: var(--sms-text);
    font-size: 15px;
}

.invoice-editor #totalTotals {
    font-weight: 850;
}

/* Compact invoice editor */
.invoice-popup.BodyPopupLayerContainer {
    width: min(1320px, calc(100vw - 40px));
}

.invoice-popup .BodyPopupLayerContent {
    padding: 14px 18px 18px !important;
}

.invoice-popup .BodyPopupLayerExtra {
    min-height: 52px !important;
    padding: 6px 58px 6px 14px;
}

.invoice-popup .BodyPopupLayerExtra .SaveInvoice,
.invoice-popup .BodyPopupLayerExtra .PDF,
.invoice-popup .BodyPopupLayerExtra .iDeal,
.invoice-popup .BodyPopupLayerExtra .ideal {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px;
    background-size: 25px 25px !important;
}

.invoice-popup .BodyPopupLayerExtra .InvoiceEditToggle,
.invoice-popup .BodyPopupLayerExtra .InvoiceCreditButton {
    display: inline-flex;
    min-width: 132px;
    height: 38px;
    align-items: center;
    justify-content: center;
    margin: 0 8px 0 0;
    padding: 0 14px;
    border: 1px solid var(--sms-border);
    border-radius: var(--sms-radius);
    color: var(--sms-primary);
    background: #fff;
    font-size: 13px;
    font-weight: 850;
    line-height: 38px;
    cursor: pointer;
}

.invoice-popup .BodyPopupLayerExtra .InvoiceCreditButton {
    min-width: 166px;
}

.invoice-popup .BodyPopupLayerExtra .InvoiceEditToggle.is-active {
    border-color: #b7cdfd;
    background: #eef4ff;
}

.invoice-editor {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 8px 18px;
}

.invoice-editor > .SettingsInfo,
.invoice-editor > .invoiceInfo {
    grid-template-columns: 135px minmax(0, 1fr);
    gap: 7px 10px;
}

.invoice-editor .SettingsInfoLabel,
.invoice-editor .SettingsInfoLabel[style] {
    font-size: 12px;
}

.invoice-editor .SettingsInfoValue {
    min-height: 34px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
}

.invoice-editor.is-readonly .SettingsInfoValue[contenteditable="false"],
.invoice-editor.is-readonly .invoiceItemInput[contenteditable="false"] {
    background: #f8fafc !important;
    color: var(--sms-text);
}

.invoice-editor select {
    height: 34px !important;
    line-height: 34px !important;
    padding: 0 9px !important;
    font-size: 13px !important;
}

.invoice-editor > .invoice-select-account,
.invoice-editor > .invoice-select-series {
    max-width: 500px;
}

.invoice-editor .customerOpenUrl {
    min-height: 30px;
    padding: 0 9px;
    font-size: 12px;
    line-height: 30px;
}

.invoice-editor #note {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 72px !important;
    align-items: flex-start;
    overflow: auto;
}

.invoice-editor > .invoice-note {
    height: auto !important;
    min-height: 84px !important;
    align-items: start !important;
    margin-bottom: 14px !important;
}

.invoice-editor > .invoice-note .SettingsInfoLabel {
    padding-top: 7px;
}

.invoice-editor > .invoice-section-title {
    margin-top: 8px !important;
}

.invoice-editor > .SettingsInfo h2 {
    margin: 12px 0 0 !important;
    padding-top: 12px;
    font-size: 21px !important;
}

.invoice-editor > .invoice-details-title h2 {
    margin-top: 4px !important;
}

.invoice-editor .invoiceItemsLabels,
.invoice-editor .invoiceItems {
    grid-template-columns: minmax(150px, 1fr) minmax(250px, 2.1fr) minmax(110px, 0.75fr) minmax(76px, 0.5fr) minmax(100px, 0.65fr) minmax(108px, 0.7fr) 36px;
    gap: 6px;
}

.invoice-editor .invoiceItemsLabels {
    margin-top: 0 !important;
    padding-bottom: 5px !important;
}

.invoice-editor .invoiceItems {
    min-height: 0 !important;
    margin-top: 0 !important;
}

.invoice-editor .invoiceItemsContent {
    font-size: 12px;
}

.invoice-editor .invoiceItemInput {
    min-height: 36px !important;
    padding: 6px 9px !important;
    font-size: 13px !important;
}

.invoice-editor .invoiceItemInput:has(select) {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.invoice-editor .invoiceItemInput select,
.invoice-editor .invoiceItemInput select[style] {
    height: 36px !important;
    line-height: 36px !important;
}

.invoice-editor .removeItem {
    width: 34px !important;
    height: 34px !important;
    margin: 1px 0 0 !important;
    background-size: 16px 16px !important;
}

.invoice-editor > .addItem,
.invoice-editor .invoice-items-container > .addItem {
    width: 34px !important;
    height: 34px !important;
    margin-top: 0 !important;
    background-size: 18px 18px !important;
}

.invoice-editor .totalRightContainer {
    width: min(360px, 100%) !important;
    margin-top: 2px;
    padding: 2px 0;
}

.invoice-editor .totalRight {
    min-height: 30px;
    grid-template-columns: 1fr 120px;
    gap: 14px;
}

.invoice-editor .totalRight .totalLabel,
.invoice-editor .totalRight .totalvalue,
.invoice-editor #itemsTotal,
.invoice-editor #itemsTaxTotal,
.invoice-editor #totalTotals {
    height: 30px !important;
    line-height: 30px !important;
    font-size: 13px;
}

.invoice-row-open {
    cursor: pointer;
}

.invoice-row-open:hover td {
    background: #f8fbff;
}

.invoice-editor .invoice-payment-section {
    display: grid;
    gap: 10px;
    margin-top: 4px;
}

.invoice-editor .invoice-payment-list {
    max-width: none;
}

.invoice-editor .SettingsInfo.invoice-payment-row.payment-grid-row {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: minmax(120px, 0.9fr) minmax(110px, 0.8fr) minmax(220px, 1.5fr) minmax(180px, 1.2fr) 36px;
    gap: 8px;
    align-items: center;
    float: none !important;
    clear: none !important;
    margin: 0 0 8px !important;
}

.invoice-editor .invoice-payment-header {
    margin-bottom: 2px !important;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--sms-border);
    color: var(--sms-muted);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.invoice-editor .invoice-payment-field {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    line-height: 1.35 !important;
}

.invoice-editor .invoice-payment-method {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.invoice-editor .invoice-payment-method select {
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    margin: 0 !important;
}

.invoice-editor .invoice-payment-empty {
    margin: 0;
    padding: 10px 12px;
    font-size: 13px;
}

.invoice-editor .invoice-payment-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.invoice-editor .invoice-payment-actions .addPayment,
.invoice-editor .invoice-payment-actions .SavePayment,
.invoice-editor .removePayment {
    display: inline-flex !important;
    width: 34px !important;
    height: 34px !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    background-size: 18px 18px !important;
}

.invoice-payment-row.is-saving {
    opacity: 0.65;
    pointer-events: none;
}

.invoice-editor .saveInvoicePayments {
    width: auto !important;
    min-width: 150px;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    line-height: 34px !important;
}

.customer-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(520px, 560px);
    gap: 28px;
    align-items: start;
}

.customer-editor .customerInfoLeft,
.customer-editor .customerInfoRight {
    float: none !important;
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
}

.customer-editor .customerInfoLeft {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 8px 14px;
}

.customer-editor .customerInfoLeft > h2,
.customer-editor .customerInfoLeft > .infoTitle,
.customer-editor .customerInfoLeft > .addCommentTextarea,
.customer-editor .customerInfoLeft > #saveComment,
.customer-editor .customerInfoLeft > .comments,
.customer-editor .customerInfoLeft > .uploads,
.customer-editor .customerInfoLeft > #action,
.customer-editor .customerInfoLeft > #runAction {
    grid-column: 1 / -1;
}

.customer-editor .customerInfoLeft > h2 {
    margin: 0 0 6px !important;
    color: var(--sms-primary);
    font-size: 24px !important;
    font-weight: 850;
}

.customer-editor .infoTitle {
    grid-column: 1 / -1;
    margin: 14px 0 0 !important;
    padding: 12px 0 7px;
    border-bottom: 1px solid var(--sms-border) !important;
    color: var(--sms-primary);
    font-size: 18px !important;
}

.customer-editor .infoTitle br {
    display: none;
}

.customer-editor .info {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 135px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
}

.customer-editor .infoLabel {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    color: #667085;
    font-size: 12px;
    line-height: 1.25 !important;
}

.customer-editor .infoValue,
.customer-editor .customerOption,
.customer-editor .imageHide {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: auto !important;
    float: none !important;
    padding: 6px 10px !important;
    line-height: 1.45 !important;
    font-size: 13px !important;
}

.customer-editor .customerOption {
    max-width: none !important;
}

.customer-editor .customer-iban-info,
.customer-editor .customer-bic-info {
    align-items: center;
}

.customer-editor .customer-iban-check-result,
.customer-editor .customer-bic-check-result {
    display: none;
    grid-column: 2;
    margin: -2px 0 0;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
}

.customer-editor .customer-iban-check-result.is-visible,
.customer-editor .customer-bic-check-result.is-visible {
    display: block;
    align-self: start;
}

.customer-editor .customer-iban-check-result.is-error,
.customer-editor .customer-bic-check-result.is-error {
    color: #9f1d1d;
}

.customer-editor .customer-iban-check-result.is-success,
.customer-editor .customer-bic-check-result.is-success {
    color: #057a47;
}

.customer-editor .customer-iban-invalid,
.customer-editor .customer-bic-invalid {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.customer-editor .customer-iban-valid,
.customer-editor .customer-bic-valid {
    border-color: #22c55e !important;
}

.customer-editor select.customerOption {
    height: 34px !important;
    line-height: 34px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
}

.customer-editor .addCommentTextarea,
.customer-editor .comments,
.customer-editor .uploads {
    padding: 10px;
    border: 1px solid var(--sms-border);
    border-radius: var(--sms-radius);
    background: var(--sms-surface-soft);
}

.customer-editor .addCommentTextarea textarea {
    width: 100% !important;
    min-height: 72px !important;
    margin: 0 !important;
}

.customer-editor #saveComment {
    justify-self: start;
}

.customer-editor .addFile {
    width: 100%;
    float: none !important;
    clear: both;
}

.customer-editor #uploadFile {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
    gap: 12px;
    align-items: end;
}

.customer-editor .fileNameUpload,
.customer-editor .selectFile,
.customer-editor .submitFile {
    float: none !important;
    clear: none !important;
    margin: 0 !important;
}

.customer-editor .fileNameUpload h2 {
    margin: 0 0 8px !important;
    font-size: 16px !important;
}

.customer-editor .customerInfoRight {
    grid-column: 2;
    grid-row: 1;
    position: static;
    display: grid;
    min-width: 0;
    max-height: none;
    gap: 10px;
    overflow-y: visible;
    overflow-x: hidden;
    padding-right: 0;
}

.customer-editor .customerInfoRight h2 {
    margin: 12px 0 0 !important;
    color: var(--sms-primary);
    font-size: 19px !important;
    font-weight: 850;
}

.customer-editor .customerInfoRight h2:first-child {
    margin-top: 0 !important;
}

.customer-editor .customerInfoList {
    box-sizing: border-box;
    width: 100%;
    max-height: none !important;
    overflow: hidden !important;
    min-width: 0;
    padding: 9px;
    border: 1px solid var(--sms-border);
    border-radius: var(--sms-radius);
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.customer-editor .customerExtraObjectList {
    width: 100%;
    min-width: 0;
    border-collapse: collapse !important;
    table-layout: fixed;
}

.customer-editor .customerExtraObjectList td {
    padding: 6px 5px;
    border-bottom: 1px solid var(--sms-border);
    vertical-align: middle;
    font-size: 12px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    overflow-wrap: anywhere;
}

.customer-editor .customerExtraObjectList .trHead td {
    color: #667085;
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
}

.customer-editor .customerExtraObjectList .trObject {
    border: 0 !important;
}

.customer-editor .customerExtraObjectList .customer-list-extra {
    display: none !important;
}

.customer-editor .customerInfoList.is-expanded .customerExtraObjectList .customer-list-extra {
    display: table-row !important;
}

.customer-editor .customer-list-toggle {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    padding: 0 10px;
    border: 1px solid var(--sms-border-strong);
    border-radius: var(--sms-radius);
    color: var(--sms-primary);
    background: #fff;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.customer-editor .customer-list-toggle:hover {
    background: #f5f8ff;
}

.customer-editor .customerExtraObjectList a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--sms-primary);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.2;
    white-space: normal;
}

.customer-editor .customerExtraObjectList img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.customer-editor #contractList .customerExtraObjectList td:nth-child(1) {
    width: 18%;
}

.customer-editor #contractList .customerExtraObjectList td:nth-child(2) {
    width: 25%;
}

.customer-editor #contractList .customerExtraObjectList td:nth-child(3) {
    width: 20%;
}

.customer-editor #contractList .customerExtraObjectList td:nth-child(4) {
    width: 37%;
}

.customer-editor #invoiceList .customerExtraObjectList td:nth-child(1) {
    width: 22%;
}

.customer-editor #invoiceList .customerExtraObjectList td:nth-child(2) {
    width: 34%;
}

.customer-editor #invoiceList .customerExtraObjectList td:nth-child(3) {
    width: 23%;
}

.customer-editor #invoiceList .customerExtraObjectList td:nth-child(4) {
    width: 21%;
}

.customer-editor #balance .customerExtraObjectList td,
.customer-editor #paymentsList .customerExtraObjectList td {
    width: 33.333%;
}

.customer-editor .active-0 {
    color: #b42318 !important;
}

.customer-editor .active-1 {
    color: #087443 !important;
}

.customer-editor .commentTable {
    background: #fff;
}

/* New customer popup */
.new-customer-popup.BodyPopupLayerContainer {
    width: min(1180px, calc(100vw - 48px));
}

.new-customer-popup .BodyPopupLayerExtra {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 56px !important;
    background: #fff;
}

.BodyPopupLayerContent.new-customer-editor {
    padding: 22px 26px 28px !important;
}

.new-customer-form {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 30px;
    align-items: start;
}

.new-customer-form > h1 {
    grid-column: 1 / -1;
    margin: 0 0 2px !important;
    color: var(--sms-primary);
    font-size: 28px !important;
    font-weight: 850;
}

.new-customer-section {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    align-items: start;
}

.new-customer-section > h3 {
    grid-column: 1 / -1;
    margin: 0 0 2px !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid var(--sms-border) !important;
    color: var(--sms-primary);
    font-size: 18px !important;
    font-weight: 850;
}

.new-customer-field {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.new-customer-field-wide,
.new-customer-actions,
.new-customer-editor .contentarea,
.new-customer-editor .addressinformation {
    grid-column: 1 / -1;
}

.new-customer-field .SettingsInfoLabel {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    color: var(--sms-muted);
    font-size: 12px;
    font-weight: 850 !important;
    line-height: 1.25 !important;
}

.new-customer-field input,
.new-customer-field select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    margin: 0 !important;
    float: none !important;
    font-size: 14px !important;
}

.new-customer-field-message {
    display: none;
    margin-top: -2px;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
}

.new-customer-field-message.is-visible {
    display: block;
}

.new-customer-field-message.is-error {
    color: #9f1d1d;
}

.new-customer-field-message.is-success {
    color: #057a47;
}

.new-customer-actions {
    align-items: end;
}

.new-customer-form .button {
    width: fit-content !important;
    min-width: 190px !important;
    margin: 0 !important;
}

.new-customer-editor .contentarea {
    display: none;
    margin: 2px 0 0 !important;
    padding: 12px !important;
    border: 1px solid var(--sms-border);
    border-radius: var(--sms-radius);
    background: var(--sms-surface-soft);
}

.new-customer-editor .camera,
.new-customer-editor .output {
    width: min(320px, 100%) !important;
    margin: 0 14px 10px 0 !important;
    vertical-align: top;
}

.new-customer-editor #video,
.new-customer-editor #photo {
    width: 100% !important;
    max-width: 320px;
    height: auto !important;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--sms-border-strong) !important;
    border-radius: var(--sms-radius);
    background: #fff;
}

.new-customer-editor #startbutton {
    margin-top: 10px !important;
}

.new-customer-camera-message {
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid #fecaca;
    border-radius: var(--sms-radius);
    color: #9f1d1d;
    background: #fff1f1;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.35;
}

.new-customer-editor .addressinformation {
    min-width: 0;
}

.new-customer-confirmation {
    display: grid;
    gap: 10px;
    margin-top: 2px;
    padding: 12px;
    border: 1px solid #c7d7ff;
    border-radius: var(--sms-radius);
    background: #eef4ff;
}

.new-customer-address-preview {
    color: var(--sms-primary);
    font-size: 14px;
    font-weight: 800;
}

.new-customer-message {
    padding: 10px 12px;
    border-radius: var(--sms-radius);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.35;
}

.new-customer-message-error {
    border: 1px solid #fecaca;
    color: #9f1d1d;
    background: #fff1f1;
}

.new-customer-message-info {
    border: 1px solid #c7d7ff;
    color: var(--sms-primary);
    background: #eef4ff;
}

.new-customer-confirm-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--sms-text);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
}

.new-customer-confirm-check input {
    margin-top: 2px;
}

/* Settling object popup */
.settling-object-popup.BodyPopupLayerContainer {
    width: min(1320px, calc(100vw - 48px));
}

.settling-object-popup .BodyPopupLayerExtra {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 58px !important;
    background: #fff;
}

.settling-object-popup .BodyPopupLayerExtra .SaveObjectInfo,
.settling-object-popup .BodyPopupLayerExtra .DeleteObject,
.settling-object-popup .BodyPopupLayerExtra .makeContract {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px;
    margin: 0 8px 0 0 !important;
}

.BodyPopupLayerContent.settling-object-editor {
    display: grid !important;
    grid-template-columns: minmax(320px, 420px) repeat(2, minmax(260px, 1fr));
    gap: 20px 32px;
    align-items: start;
    padding: 18px 22px 24px !important;
}

.settling-object-editor .objectInfoLeft,
.settling-object-editor .objectInfoRight {
    width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
}

.settling-object-editor .objectInfoLeft {
    grid-row: span 3;
    padding-right: 24px;
    border-right: 1px solid var(--sms-border);
}

.settling-object-editor .objectInfo {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 36px;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    gap: 8px 10px;
    align-items: center;
    float: none !important;
    clear: none !important;
    margin: 0 0 8px !important;
    position: static !important;
}

.settling-object-editor .objectInfo:has(button) {
    grid-template-columns: 1fr;
}

.settling-object-editor .objectInfoLabel,
.settling-object-editor .objectInfoRightLabel {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    color: var(--sms-muted);
    font-size: 13px;
    font-weight: 850 !important;
    line-height: 1.25 !important;
}

.settling-object-editor .objectInfoValue,
.settling-object-editor .objectInfoRightValue {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    height: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    border: 1px solid var(--sms-border-strong) !important;
    border-radius: var(--sms-radius) !important;
    color: var(--sms-text) !important;
    background: #fff !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
}

.settling-object-editor .objectInfoValue:has(select) {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.settling-object-editor .objectInfoValue select,
.settling-object-editor .objectInfoValue input[type="text"] {
    width: 100% !important;
    height: 36px !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.settling-object-editor .objectInfoValue.disabled,
.settling-object-editor .objectInfoValue[name="price_capacity"] {
    background: var(--sms-surface-soft) !important;
}

.settling-object-editor .objectInfo sub {
    align-self: center;
    color: var(--sms-muted);
    font-size: 12px;
    line-height: 1;
}

.settling-object-editor .objectInfoRight {
    display: grid !important;
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 8px 12px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--sms-border);
}

.settling-object-editor .settling-contract-info {
    grid-column: 2;
    grid-row: 1;
}

.settling-object-editor .settling-customer-info {
    grid-column: 3;
    grid-row: 1;
}

.settling-object-editor .settling-history {
    grid-column: 2 / -1;
    grid-row: 2;
}

.settling-object-editor .settling-reservation {
    grid-column: 2 / -1;
    grid-row: 1;
}

.settling-object-editor .objectInfoRightLabel:first-child {
    grid-column: 1 / -1;
    margin: 0 0 2px !important;
    color: var(--sms-primary);
    font-size: 16px;
    font-weight: 850 !important;
}

.settling-object-editor .objectInfoRightLabel:first-child + .objectInfoRightValue {
    display: none !important;
}

.settling-object-editor .objectInfoRightValue {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 15px !important;
}

.settling-object-editor .objectInfoRight a {
    color: var(--sms-primary);
    font-weight: 750;
}

.settling-object-editor .settling-customer-line {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.settling-object-editor .settling-history-list,
.settling-object-editor .settling-history-empty {
    grid-column: 1 / -1;
}

.settling-object-editor .settling-history-list {
    display: grid !important;
    gap: 6px;
}

.settling-object-editor .settling-history-item {
    display: grid;
    min-height: 32px;
    grid-template-columns: 145px minmax(96px, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.settling-object-editor .settling-history-label {
    color: var(--sms-muted);
    font-size: 13px;
    font-weight: 850;
}

.settling-object-editor .settling-history-date {
    color: var(--sms-text);
    font-size: 14px;
    line-height: 1.25;
}

.settling-object-editor .settling-history-extra {
    display: none !important;
}

.settling-object-editor .settling-history.is-expanded .settling-history-extra {
    display: grid !important;
}

.settling-history-toggle-row {
    display: flex;
    justify-content: flex-start;
    padding-top: 4px;
}

.settling-history-toggle {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border: 1px solid var(--sms-border-strong);
    border-radius: var(--sms-radius);
    color: var(--sms-primary);
    background: #fff;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.settling-history-toggle:hover {
    background: #eef4ff;
}

.settling-object-editor .settling-reservation-form {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    align-items: start;
}

.settling-object-editor .settling-reservation-field {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.settling-object-editor .settling-reservation-field-wide,
.settling-object-editor .settling-reservation-actions {
    grid-column: 1 / -1;
}

.settling-object-editor .settling-reservation-field span {
    color: var(--sms-muted);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.25;
}

.settling-object-editor .settling-reservation-field input,
.settling-object-editor .settling-reservation-value {
    display: flex;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    align-items: center;
    margin: 0 !important;
    padding: 7px 10px !important;
    border: 1px solid var(--sms-border-strong) !important;
    border-radius: var(--sms-radius) !important;
    color: var(--sms-text) !important;
    background: #fff !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    box-sizing: border-box;
}

.settling-object-editor .settling-reservation-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 2px;
}

.settling-object-editor button.saveReservation,
.settling-object-editor button.removeReservation {
    width: auto;
    min-width: 180px;
    height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--sms-radius);
    color: #fff;
    background: var(--sms-accent);
    font-weight: 800;
    cursor: pointer;
}

.settling-object-editor button.removeReservation {
    background: var(--sms-danger);
}

/* Contract options popup */
.contract-popup.BodyPopupLayerContainer {
    width: min(1480px, calc(100vw - 48px));
    padding-bottom: 0 !important;
}

.contract-popup .BodyPopupLayerExtra {
    position: sticky;
    top: 0;
    z-index: 6;
    min-height: 64px !important;
    padding: 8px 62px 8px 16px;
    background: #fff;
}

.contract-popup .BodyPopupLayerExtra .saveContractOptions,
.contract-popup .BodyPopupLayerExtra .deleteContract {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px;
    margin: 0 8px 0 0 !important;
}

.BodyPopupLayerContent.contract-option-editor {
    display: grid !important;
    gap: 28px;
    padding: 26px 28px 32px !important;
}

.contract-option-editor .contract-option-header h3,
.contract-option-editor .contract-option-section-title {
    margin: 0 !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid var(--sms-border) !important;
    color: var(--sms-primary);
    font-size: 20px !important;
    font-weight: 850;
}

.contract-option-editor .contract-option-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sms-border);
}

.contract-option-editor .contract-option-header h3 {
    padding: 0 !important;
    border-bottom: 0 !important;
}

.contract-option-box-label {
    display: inline-flex;
    min-width: 0;
    max-width: 420px;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border: 1px solid var(--sms-border-strong);
    border-radius: var(--sms-radius);
    background: #fff;
    color: var(--sms-primary);
    font-size: 18px;
    font-weight: 850;
    line-height: 1;
}

.contract-option-box-label span {
    flex: 0 0 auto;
    color: var(--sms-muted);
}

.contract-option-box-label strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: inherit;
    font-weight: inherit;
}

.contract-option-main {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) minmax(520px, 560px);
    gap: 28px;
    align-items: start;
}

.contract-option-card {
    min-width: 0;
}

.BodyPopupLayerContent.contract-option-editor .infoContainerLeft,
.BodyPopupLayerContent.contract-option-editor .infoContainerRight,
.BodyPopupLayerContent.contract-option-editor .objectInfoRight,
.BodyPopupLayerContent.contract-option-editor .discountPaybackCalc,
.BodyPopupLayerContent.contract-option-editor .contractItems,
.BodyPopupLayerContent.contract-option-editor .contractTotalLeftContainer {
    width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
}

.BodyPopupLayerContent.contract-option-editor .infoContainerLeft {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 14px 20px;
    align-items: start;
}

.BodyPopupLayerContent.contract-option-editor .contract-option-actions {
    grid-column: 1 / -1;
}

.contract-option-subsection {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0 0;
    color: var(--sms-primary);
    font-size: 14px;
    font-weight: 850;
}

.contract-option-subsection::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--sms-border);
}

.BodyPopupLayerContent.contract-option-editor .info {
    display: grid !important;
    width: 100% !important;
    height: auto !important;
    min-height: 40px !important;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    align-self: start;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    overflow: visible !important;
}

.BodyPopupLayerContent.contract-option-editor .infoLabel,
.BodyPopupLayerContent.contract-option-editor .objectInfoRightLabel {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    color: var(--sms-muted);
    font-size: 12px;
    font-weight: 850 !important;
    line-height: 1.25 !important;
}

.BodyPopupLayerContent.contract-option-editor .infoValue,
.BodyPopupLayerContent.contract-option-editor .objectInfoRightValue {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    border: 1px solid var(--sms-border-strong) !important;
    border-radius: var(--sms-radius) !important;
    color: var(--sms-text) !important;
    background: #fff !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}

.BodyPopupLayerContent.contract-option-editor .infoValue:has(input),
.BodyPopupLayerContent.contract-option-editor .infoValue:has(select),
.BodyPopupLayerContent.contract-option-editor .contract-action-buttons {
    min-height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.BodyPopupLayerContent.contract-option-editor input[type="text"],
.BodyPopupLayerContent.contract-option-editor select {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    float: none !important;
    font-size: 14px !important;
    line-height: 40px !important;
    box-sizing: border-box;
}

.contract-action-buttons {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
}

.contract-action-buttons .button,
.discountPaybackCalc .button {
    display: inline-flex !important;
    width: auto !important;
    min-width: 140px;
    height: 40px !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 16px !important;
    border-radius: var(--sms-radius);
    line-height: 40px !important;
    font-size: 14px;
    font-weight: 850;
}

.contract-action-buttons .contract-extend-button {
    min-width: 180px;
}

.contract-option-side .objectInfoRight {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 12px 14px;
}

.contract-option-side .objectInfoRight h3,
.contract-option-side .discountPaybackCalc h3 {
    grid-column: 1 / -1;
    margin: 0 0 6px !important;
    padding: 0 !important;
    border-bottom: 0 !important;
    color: var(--sms-primary);
    font-size: 20px !important;
    font-weight: 850;
}

.BodyPopupLayerContent.contract-option-editor .contract-option-side .objectInfoRightValue {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.contract-option-side .customerOpenUrl {
    min-height: 32px;
    padding: 0 10px;
    font-size: 12px;
    line-height: 32px;
}

.contract-option-side .discountPaybackCalc {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 18px !important;
    padding-top: 18px;
    border-top: 1px solid var(--sms-border);
}

.contract-option-side .discountPaybackCalc .info {
    grid-template-columns: 140px minmax(0, 1fr);
}

.BodyPopupLayerContent.contract-option-editor .discountPaybackCalc .button {
    justify-self: start;
}

.contract-option-side .calcResults {
    display: block;
    margin-top: 4px;
}

.contract-option-side .calcResultsGrid {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 10px 14px;
    padding-top: 12px;
    border-top: 1px solid var(--sms-border);
}

.contract-option-items-section,
.contract-option-total-section,
.contract-option-items-scroll {
    min-width: 0;
}

.contract-option-items-section {
    margin-top: 10px;
    padding-top: 8px;
}

.contract-option-items-scroll {
    margin-top: 16px;
}

.BodyPopupLayerContent.contract-option-editor .contactItemsLabels,
.BodyPopupLayerContent.contract-option-editor .contactItems {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(210px, 1.2fr) minmax(300px, 2fr) minmax(130px, 0.8fr) minmax(90px, 0.55fr) minmax(112px, 0.65fr) minmax(125px, 0.7fr) 40px;
    gap: 10px;
    align-items: center;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
}

.BodyPopupLayerContent.contract-option-editor .contactItemsLabels {
    margin-top: 2px !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid var(--sms-border);
    color: var(--sms-muted);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0;
}

.BodyPopupLayerContent.contract-option-editor .contactItems {
    height: auto !important;
    min-height: 38px;
    margin-top: 14px !important;
}

.BodyPopupLayerContent.contract-option-editor .contactItemsContent,
.BodyPopupLayerContent.contract-option-editor .contactItemsContent[style],
.BodyPopupLayerContent.contract-option-editor .contactItemInput,
.BodyPopupLayerContent.contract-option-editor .contactItemInput[style] {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
}

.BodyPopupLayerContent.contract-option-editor .contactItemInput {
    display: flex;
    min-height: 40px !important;
    align-items: center;
    padding: 8px 12px !important;
    border: 1px solid var(--sms-border-strong);
    border-radius: var(--sms-radius);
    background: #fff !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
}

.BodyPopupLayerContent.contract-option-editor .contactItemInput:has(select) {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.BodyPopupLayerContent.contract-option-editor .contactItemInput select,
.BodyPopupLayerContent.contract-option-editor .contactItemInput select[style] {
    width: 100% !important;
    height: 40px !important;
    line-height: 40px !important;
}

.BodyPopupLayerContent.contract-option-editor .addItem,
.BodyPopupLayerContent.contract-option-editor .removeContractItem {
    display: inline-flex !important;
    width: 40px !important;
    height: 40px !important;
    align-items: center;
    justify-content: center;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    background-image: none !important;
}

.BodyPopupLayerContent.contract-option-editor .contractItems > .addItem {
    margin-top: 12px !important;
}

.contract-option-total-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
    gap: 14px 28px;
}

.contract-option-total-section .contract-option-section-title {
    grid-column: 1 / -1;
}

.BodyPopupLayerContent.contract-option-editor .contractTotalLeftContainer {
    grid-column: 2;
}

.BodyPopupLayerContent.contract-option-editor .totalRight {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    float: none !important;
    clear: none !important;
    min-height: 40px;
    padding: 9px 0;
    border-bottom: 1px solid var(--sms-border) !important;
}

.BodyPopupLayerContent.contract-option-editor .totalLabel,
.BodyPopupLayerContent.contract-option-editor .totalvalue {
    width: auto !important;
    height: auto !important;
    float: none !important;
    line-height: 1.3 !important;
}

.BodyPopupLayerContent.contract-option-editor .totalLabel {
    color: var(--sms-muted);
    font-weight: 750;
}

.BodyPopupLayerContent.contract-option-editor .totalvalue {
    color: var(--sms-primary);
    font-weight: 850;
    text-align: right;
}

/* Contract creation */
.contract-make-page {
    display: grid;
    width: 100%;
    max-width: 1220px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 34px;
    row-gap: 0;
    align-items: start;
}

.contract-make-page > h1,
.contract-make-page > p,
.contract-make-page > h3,
.contract-make-page > .step4,
.contract-make-page > .hide,
.contract-make-page > #addAdminCost,
.contract-make-page > #invoiceAccount_id,
.contract-make-page > #customer_id,
.contract-make-page > #object_id,
.contract-make-page > #default_invoicePeriodDate,
.contract-make-page > #from_contract_id,
.contract-make-page > #from_contract_nextInvoiceDate,
.contract-make-page > #from_guarantee,
.contract-make-page > #from_unit_name,
.contract-make-page > #from_unit_price,
.contract-make-page > #from_unit_id,
.contract-make-page > #from_unit_tax {
    grid-column: 1 / -1;
}

.contract-make-page > h1 {
    margin: 0 0 8px !important;
    color: var(--sms-primary);
    font-size: 27px !important;
    font-weight: 850;
}

.contract-make-page > p {
    max-width: 760px;
    margin: 0 0 14px !important;
    color: var(--sms-muted);
    font-size: 14px;
}

.contract-make-page > h3,
.contract-make-page .step4 > h3 {
    clear: none !important;
    margin: 22px 0 12px !important;
    padding: 15px 0 8px !important;
    border-bottom: 1px solid var(--sms-border) !important;
    color: var(--sms-primary);
    font-size: 18px !important;
    font-weight: 850;
}

.contract-make-page > h3 br,
.contract-make-page .step4 > h3 br {
    display: none;
}

.contract-make-page > h3 a {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    margin-left: 6px;
    padding: 3px 9px;
    border: 1px solid #c7d7ff;
    border-radius: 7px;
    color: var(--sms-primary);
    background: #eef4ff;
    font-size: 12px;
    font-weight: 800;
    vertical-align: 2px;
}

.contract-make-page > h3 a:hover {
    color: var(--sms-primary);
    text-decoration: none;
    background: #e2ebff;
}

.contract-make-page .contractSelectTemplate,
.contract-make-page .invoiceArticles {
    display: contents;
}

.contract-make-page .info {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 36px;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    float: none !important;
    clear: none !important;
    position: static !important;
    margin: 0 0 9px !important;
    line-height: 1.3 !important;
}

.contract-make-page .info:empty {
    display: none !important;
}

.contract-make-page .info:has(> b) {
    grid-column: 1 / -1;
    display: block !important;
    min-height: 0;
    margin: 14px 0 8px !important;
    padding-top: 5px;
}

.contract-make-page .info > b {
    display: block;
    color: var(--sms-primary);
    font-size: 14px;
    font-weight: 850;
}

.contract-make-page .infoLabel {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    color: var(--sms-muted);
    font-size: 12px;
    font-weight: 850 !important;
    line-height: 1.25 !important;
}

.contract-make-page .infoValue {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--sms-text) !important;
    background: transparent !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere;
}

.contract-make-page .infoValue:not(:has(input)):not(:has(select)):not(:has(textarea)) {
    min-height: 36px !important;
    padding: 8px 10px !important;
    border: 1px solid var(--sms-border-strong) !important;
    border-radius: var(--sms-radius) !important;
    background: #fff !important;
}

.contract-make-page input[type="text"],
.contract-make-page input[type="number"],
.contract-make-page select,
.contract-make-page textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    float: none !important;
}

.contract-make-page .contract-discount-rule-field {
    display: block !important;
    min-width: 0;
}

.contract-make-page .info:has(.contract-discount-rule-field) {
    align-items: start;
}

.contract-make-page .info:has(.contract-discount-rule-field) .infoLabel {
    line-height: 36px !important;
}

.contract-make-page .contract-discount-rule-field #discount {
    width: 100% !important;
    min-width: 120px !important;
}

.contract-make-page .contract-discount-rule-info {
    display: block;
    min-width: 0;
    min-height: 17px;
    max-width: 100%;
    margin: 5px 0 0 !important;
    float: none !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35;
}

.contract-make-page input[type="text"],
.contract-make-page input[type="number"],
.contract-make-page select {
    height: 36px !important;
    line-height: 36px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
}

.contract-make-page textarea {
    min-height: 90px !important;
}

.contract-make-page .step4 {
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 12px;
    float: none !important;
    clear: none !important;
}

.contract-make-page .invoiceAccounts,
.contract-make-page .invoiceSeries {
    width: min(520px, 100%);
    margin-bottom: 9px;
}

.contract-make-page .SettingsInfo {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
}

.contract-make-page .SettingsInfoLabel {
    width: auto !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    color: var(--sms-muted);
    font-size: 12px;
    line-height: 1.25 !important;
}

.contract-make-page .contactItemsLabels,
.contract-make-page .contactItems {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(120px, 1.1fr) minmax(220px, 2fr) minmax(100px, 0.8fr) minmax(68px, 0.55fr) minmax(84px, 0.65fr) minmax(76px, 0.6fr) minmax(94px, 0.75fr) 34px;
    gap: 8px;
    align-items: center;
    float: none !important;
    clear: none !important;
}

.contract-make-page .contactItemsLabels {
    margin: 4px 0 8px !important;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--sms-border);
    color: var(--sms-muted);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0;
}

.contract-make-page .contactItems {
    height: auto !important;
    min-height: 38px;
    margin: 0 0 8px !important;
}

.contract-make-page .contactItemsContent,
.contract-make-page .contactItemInput,
.contract-make-page .contactItemInput[style] {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
}

.contract-make-page .contactItemInput {
    display: flex;
    min-height: 36px;
    align-items: center;
    padding: 6px 9px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
}

.contract-make-page .contactItemInput:has(select) {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.contract-make-page .contactItemInput select,
.contract-make-page .contactItemInput select[style] {
    width: 100% !important;
    height: 36px !important;
    line-height: 36px !important;
}

.contract-make-page .addItem,
.contract-make-page .removeItem,
.contract-make-page .removeContractItem {
    display: inline-flex !important;
    width: 34px !important;
    height: 34px !important;
    align-items: center;
    justify-content: center;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    border: 1px solid var(--sms-border);
    border-radius: var(--sms-radius);
    color: var(--sms-primary);
    background: #fff !important;
    background-image: none !important;
    cursor: pointer;
}

.contract-make-page .addItem {
    margin-top: 2px !important;
}

.contract-make-page .addItem::before,
.contract-make-page .removeItem::before,
.contract-make-page .removeContractItem::before {
    font-family: "Font Awesome 5 Free";
    font-size: 13px;
    font-weight: 900;
}

.contract-make-page .addItem::before {
    content: "\f067";
}

.contract-make-page .removeItem::before,
.contract-make-page .removeContractItem::before {
    content: "\f2ed";
}

.contract-make-page .addItem:hover,
.contract-make-page .removeItem:hover,
.contract-make-page .removeContractItem:hover {
    border-color: #c7d7ff;
    background: #eef4ff !important;
}

.contract-make-page .totalRightContainer {
    width: min(430px, 100%) !important;
    margin: 16px 0 16px auto !important;
    float: none !important;
    clear: both !important;
}

.contract-make-page .totalRight {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    float: none !important;
    clear: none !important;
    padding: 9px 0;
    border-bottom: 1px solid var(--sms-border) !important;
}

.contract-make-page .totalRight .totalLabel,
.contract-make-page .totalRight .totalvalue {
    width: auto !important;
    height: auto !important;
    float: none !important;
    line-height: 1.3 !important;
}

.contract-make-page .totalRight .totalLabel {
    color: var(--sms-muted);
    font-weight: 750;
}

.contract-make-page .totalRight .totalvalue {
    color: var(--sms-primary);
    font-weight: 850;
    text-align: right;
}

.contract-make-page #saveContract {
    clear: both !important;
    margin-top: 2px !important;
}

@media (max-width: 1280px) {
    .contract-option-main {
        grid-template-columns: 1fr;
    }

    .contract-option-side .objectInfoRight {
        max-width: 760px;
    }
}

@media (max-width: 920px) {
    .contract-popup.BodyPopupLayerContainer {
        width: calc(100vw - 18px);
    }

    .BodyPopupLayerContent.contract-option-editor {
        padding: 14px !important;
    }

    .BodyPopupLayerContent.contract-option-editor .infoContainerLeft {
        grid-template-columns: 1fr;
    }

    .BodyPopupLayerContent.contract-option-editor .info,
    .contract-option-side .objectInfoRight,
    .contract-option-side .discountPaybackCalc .info,
    .contract-option-side .calcResultsGrid {
        grid-template-columns: 1fr;
    }

    .BodyPopupLayerContent.contract-option-editor .contactItemsLabels {
        display: none !important;
    }

    .BodyPopupLayerContent.contract-option-editor .contactItems {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 10px !important;
        padding: 10px;
        border: 1px solid var(--sms-border);
        border-radius: var(--sms-radius);
        background: var(--sms-surface-soft);
    }

    .BodyPopupLayerContent.contract-option-editor .contactItems .contactItemInput:nth-child(1),
    .BodyPopupLayerContent.contract-option-editor .contactItems .contactItemInput:nth-child(2),
    .BodyPopupLayerContent.contract-option-editor .contactItems .contactItemInput:nth-child(6) {
        grid-column: 1 / -1;
    }

    .BodyPopupLayerContent.contract-option-editor .removeContractItem {
        justify-self: start;
    }

    .contract-option-total-section {
        grid-template-columns: 1fr;
    }

    .BodyPopupLayerContent.contract-option-editor .contractTotalLeftContainer {
        grid-column: 1;
    }
}

@media (max-width: 560px) {
    .BodyPopupLayer {
        padding: 8px;
    }

    .BodyPopupLayerContent.contract-option-editor .contactItems {
        grid-template-columns: 1fr;
    }

    .BodyPopupLayerContent.contract-option-editor .contactItems .contactItemInput {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1440px) {
    .customer-popup.BodyPopupLayerContainer {
        width: calc(100vw - 24px);
    }

    .customer-editor {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .customer-editor .customerInfoLeft,
    .customer-editor .customerInfoRight {
        grid-column: 1;
        width: 100% !important;
    }

    .customer-editor .customerInfoLeft {
        grid-row: 1;
    }

    .customer-editor .customerInfoRight {
        grid-row: 2;
        overflow: visible;
    }

    .customer-editor .customerInfoRight h2:first-child {
        margin-top: 0 !important;
    }
}

@media (max-width: 1100px) {
    .sms-body {
        grid-template-columns: 1fr;
    }

    .menuSubLeft {
        max-height: none;
    }

    .contract-make-page {
        grid-template-columns: 1fr;
    }

    .BodyPopupLayerContent.settling-object-editor {
        grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
    }

    .settling-object-editor .objectInfoLeft {
        border-right: 1px solid var(--sms-border);
    }

    .settling-object-editor .settling-contract-info,
    .settling-object-editor .settling-customer-info,
    .settling-object-editor .settling-history,
    .settling-object-editor .settling-reservation {
        grid-column: 2;
    }

    .settling-object-editor .settling-contract-info {
        grid-row: 1;
    }

    .settling-object-editor .settling-customer-info {
        grid-row: 2;
    }

    .settling-object-editor .settling-history {
        grid-row: 3;
    }

    .settling-object-editor .settling-reservation {
        grid-row: 1;
    }

    .BodyPopupLayerContent.settling-object-editor:has(.settling-reservation) .settling-history {
        grid-row: 2;
    }

    .contract-make-page .contactItemsLabels,
    .contract-make-page .contactItems {
        grid-template-columns: minmax(110px, 1fr) minmax(180px, 1.6fr) 84px 58px 74px 74px 84px 32px;
        gap: 6px;
    }
}

@media (max-width: 860px) {
    .sms-sidebar {
        position: fixed;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        box-shadow: 22px 0 50px rgba(15, 23, 42, 0.25);
    }

    .sms-app.sidebar-open .sms-sidebar {
        transform: translateX(0);
    }

    .sms-workspace {
        width: 100%;
    }

    .sms-mobile-menu {
        display: flex;
    }

    .sms-topbar {
        padding: 14px 16px;
    }

    .sms-topbar-title {
        font-size: 20px;
    }

    .sms-help-button {
        width: 42px;
        padding: 0;
    }

    .sms-help-button span {
        display: none;
    }

    .help-page {
        min-height: calc(100vh - 98px);
    }

    .help-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .help-manual-frame {
        min-height: 680px;
    }

    .LoginRightInfo {
        display: none;
    }

    .sms-body {
        padding: 16px;
    }

    table.list {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .loginContainer {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 22px 0;
    }

    .loginBrandPanel {
        min-height: auto;
        gap: 28px;
        padding: 28px;
    }

    .loginBrandLogo {
        width: 112px;
        height: 112px;
    }

    .loginBrandCopy h1 {
        font-size: 28px;
    }

    .loginPanel {
        min-height: auto;
        padding: 28px;
    }

    .tileRight {
        font-size: 32px !important;
    }

    .two-factor-dialog {
        padding: 24px;
    }

    .two-factor-actions,
    .two-factor-confirm-row {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .two-factor-actions .button,
    .two-factor-actions .button-secondary,
    .two-factor-confirm {
        width: 100% !important;
    }

    .invoice-editor,
    .customer-editor,
    .customer-editor .customerInfoLeft,
    .new-customer-form {
        grid-template-columns: 1fr;
    }

    .customer-editor .customerInfoRight {
        position: static;
        max-height: none;
    }

    .customer-editor .customerExtraObjectList.customer-collapsible-list,
    .customer-editor .customerExtraObjectList.customer-collapsible-list tbody {
        display: block;
    }

    .customer-editor .customerExtraObjectList.customer-collapsible-list .trHead {
        display: none !important;
    }

    .customer-editor .customerExtraObjectList.customer-collapsible-list .trObject {
        display: grid;
        gap: 5px;
        margin: 0 0 8px;
        padding: 9px;
        border: 1px solid var(--sms-border) !important;
        border-radius: var(--sms-radius);
        background: var(--sms-surface-soft);
    }

    .customer-editor .customerExtraObjectList.customer-collapsible-list .trObject.customer-list-extra {
        display: none !important;
    }

    .customer-editor .customerInfoList.is-expanded .customerExtraObjectList.customer-collapsible-list .trObject.customer-list-extra {
        display: grid !important;
    }

    .customer-editor .customerExtraObjectList.customer-collapsible-list td {
        display: grid;
        width: 100% !important;
        grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
        gap: 8px;
        align-items: center;
        padding: 2px 0;
        border-bottom: 0;
    }

    .customer-editor .customerExtraObjectList.customer-collapsible-list td::before {
        content: attr(data-label);
        color: var(--sms-muted);
        font-size: 11px;
        font-weight: 850;
        text-transform: uppercase;
    }

    .BodyPopupLayerContent.settling-object-editor {
        grid-template-columns: 1fr;
    }

    .settling-object-editor .objectInfoLeft {
        grid-row: 1;
        padding-right: 0;
        padding-bottom: 16px;
        border-right: 0;
        border-bottom: 1px solid var(--sms-border);
    }

    .settling-object-editor .settling-contract-info,
    .settling-object-editor .settling-customer-info,
    .settling-object-editor .settling-history,
    .settling-object-editor .settling-reservation {
        grid-column: 1;
    }

    .settling-object-editor .settling-contract-info {
        grid-row: 2;
    }

    .settling-object-editor .settling-customer-info {
        grid-row: 3;
    }

    .settling-object-editor .settling-history {
        grid-row: 4;
    }

    .settling-object-editor .settling-reservation {
        grid-row: 2;
    }

    .BodyPopupLayerContent.settling-object-editor:has(.settling-reservation) .settling-history {
        grid-row: 3;
    }

    .invoice-editor .invoiceItemsLabels {
        display: none !important;
    }

    .invoice-editor .invoiceItems {
        grid-template-columns: 1fr;
        padding: 12px;
        border: 1px solid var(--sms-border);
        border-radius: var(--sms-radius);
        background: var(--sms-surface-soft);
    }

    .contract-make-page .contactItemsLabels {
        display: none !important;
    }

    .contract-make-page .contactItems {
        grid-template-columns: 1fr 1fr;
        padding: 10px;
        border: 1px solid var(--sms-border);
        border-radius: var(--sms-radius);
        background: var(--sms-surface-soft);
    }

    .contract-make-page .contactItems .contactItemInput:nth-child(2),
    .contract-make-page .contactItems .contactItemInput:nth-child(7) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .module-list-toolbar,
    .module-action-group,
    .module-search-group,
    .module-sort-group,
    .module-date-group {
        width: 100%;
    }

    .module-action-group,
    .module-date-group {
        flex-direction: column;
        align-items: stretch;
    }

    .module-list-toolbar #action,
    .module-list-toolbar #runAction,
    .module-list-toolbar input[type="text"],
    .module-list-toolbar .customerSearchOrder {
        width: 100% !important;
        min-width: 0 !important;
    }

    .settling-object-editor .settling-reservation-form {
        grid-template-columns: 1fr;
    }

    .settling-object-editor .settling-reservation-actions button {
        width: 100%;
    }

    .SearchTop {
        width: calc(100% - 42px) !important;
    }

    #action,
    .button {
        width: 100% !important;
        margin-right: 0 !important;
    }

    .BodyPopupLayer {
        padding: 12px;
    }

    .BodyPopupLayerContainer {
        width: calc(100vw - 24px);
    }

    .BodyPopupLayerClose {
        right: 10px;
    }

    .invoice-editor > .SettingsInfo,
    .invoice-editor > .invoiceInfo,
    .customer-editor .info,
    .customer-editor #uploadFile,
    .new-customer-section,
    .contract-make-page .info,
    .contract-make-page .SettingsInfo {
        grid-template-columns: 1fr;
    }
}