.crm-page .modal-content {
    overflow: hidden;
    border: 0;
    box-shadow: var(--bs-box-shadow-lg);
}

.crm-page .modal-header {
    align-items: center !important;
    padding: .5rem 1rem !important;
    border: 0;
    background-color: #0d6efd !important;
    background-image: linear-gradient(90deg, rgba(13, 110, 253, .98), rgba(13, 110, 253, .9)), url('/Images/crm-communication-header.svg') !important;
    background-position: center, right center !important;
    background-repeat: no-repeat !important;
    background-size: cover, auto 170% !important;
    color: #fff !important;
}

.crm-page .modal-header::after {
    display: none !important;
}

.crm-page .modal-header .modal-title {
    margin: 0;
    color: #fff !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    line-height: 1.5;
}

.crm-page .modal-header .modal-title + p,
.crm-page .modal-header .modal-title + .small,
.crm-page .modal-header .modal-title + .text-white-50 {
    margin-top: 0;
    color: rgba(255, 255, 255, .62) !important;
    font-size: .875rem;
    font-weight: 400;
}

.crm-page .modal-header:not(:has(.modal-title + .small)):not(:has(.modal-title + p)) .modal-title::after {
    display: block;
    margin-top: 0;
    color: rgba(255, 255, 255, .62);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
}

.crm-page .modal:is([id*="create" i], [id^="new" i]) .modal-header:not(:has(.modal-title + .small)):not(:has(.modal-title + p)) .modal-title::after {
    content: "Vezetett rögzítés áttekinthető lépésekben";
}

.crm-page .modal[id*="edit" i] .modal-header:not(:has(.modal-title + .small)):not(:has(.modal-title + p)) .modal-title::after {
    content: "A meglévő adatok áttekinthető módosítása";
}

.crm-page .modal[id*="view" i] .modal-header:not(:has(.modal-title + .small)):not(:has(.modal-title + p)) .modal-title::after {
    content: "A rögzített adatok áttekintése";
}

.crm-page .modal[id*="delete" i] .modal-header:not(:has(.modal-title + .small)):not(:has(.modal-title + p)) .modal-title::after {
    content: "A művelet megerősítést igényel";
}

.crm-page .modal[id*="history" i] .modal-header:not(:has(.modal-title + .small)):not(:has(.modal-title + p)) .modal-title::after {
    content: "Korábbi módosítások és események";
}

.crm-page .modal:is([id*="filter" i], [id*="advanced" i]) .modal-header:not(:has(.modal-title + .small)):not(:has(.modal-title + p)) .modal-title::after {
    content: "A megjelenített adatok pontosítása";
}

.crm-page .modal-header .btn-close {
    width: 1em;
    height: 1em;
    margin: -.5rem -.5rem -.5rem auto;
    padding: .5rem;
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: .5;
}

.crm-page .modal-header .btn-close:hover,
.crm-page .modal-header .btn-close:focus-visible {
    opacity: 1;
}

.crm-page .modal-header .badge {
    border-color: rgba(255, 255, 255, .3) !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .15) !important;
}

.crm-page .modal:is([id*="create" i], [id^="new" i], [id*="edit" i], .crm-create-workflow-modal) .modal-body {
    padding: 1.5rem;
    background: #fff;
}

.crm-page .modal:is([id*="create" i], [id^="new" i], [id*="edit" i], .crm-create-workflow-modal) .modal-footer {
    gap: .5rem;
    padding: .75rem 1rem;
    border-top: 1px solid #dee2e6;
    background: #fff;
}

.crm-page .crm-create-workflow-modal .create-workflow-panel-heading {
    min-height: 3.25rem;
}

.crm-page .business-document-workflow-appearance .create-workflow-host {
    --partner-workflow-accent: var(--bs-primary);
}

.crm-page #createPartnerModal.business-document-workflow-appearance .create-workflow-host {
    --partner-workflow-accent: var(--bs-success);
}

.crm-page #createSiteModal.business-document-workflow-appearance .create-workflow-host {
    --partner-workflow-accent: var(--bs-success);
}

.crm-page #createItemModal.business-document-workflow-appearance .create-workflow-host {
    --partner-workflow-accent: var(--bs-success);
}

.crm-page #createContactModal.business-document-workflow-appearance .create-workflow-host {
    --partner-workflow-accent: var(--bs-success);
}

.crm-page #createCommunicationModal.business-document-workflow-appearance .create-workflow-host,
.crm-page #opportunityModal[data-workflow-mode="create"].business-document-workflow-appearance .create-workflow-host {
    --partner-workflow-accent: var(--bs-success);
}

.crm-page #editPartnerModal.business-document-workflow-appearance .create-workflow-host {
    --partner-workflow-accent: var(--bs-primary);
}

.crm-page #editSiteModal.business-document-workflow-appearance .create-workflow-host {
    --partner-workflow-accent: var(--bs-primary);
}

.crm-page #editItemModal.business-document-workflow-appearance .create-workflow-host {
    --partner-workflow-accent: var(--bs-primary);
}

.crm-page #editContactModal.business-document-workflow-appearance .create-workflow-host {
    --partner-workflow-accent: var(--bs-primary);
}

.crm-page #editCommunicationModal.business-document-workflow-appearance .create-workflow-host,
.crm-page #opportunityModal[data-workflow-mode="edit"].business-document-workflow-appearance .create-workflow-host {
    --partner-workflow-accent: var(--bs-primary);
}

.crm-page .business-document-workflow-appearance .create-workflow-progress {
    gap: .75rem;
    margin-bottom: 1rem;
}

.crm-page .business-document-workflow-appearance .create-workflow-step {
    position: relative;
    padding: .85rem;
    border-color: var(--bs-border-color);
    border-radius: .9rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.crm-page .business-document-workflow-appearance .create-workflow-step:hover,
.crm-page .business-document-workflow-appearance .create-workflow-step.is-active {
    border-color: var(--partner-workflow-accent);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--partner-workflow-accent) 14%, transparent);
}

.crm-page .business-document-workflow-appearance .create-workflow-step.is-active {
    background: color-mix(in srgb, var(--partner-workflow-accent) 7%, var(--bs-body-bg));
}

.crm-page .business-document-workflow-appearance .create-workflow-step > .create-workflow-step-number {
    flex: 0 0 2.35rem;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: .75rem;
    font-size: 1.05rem;
}

.crm-page .business-document-workflow-appearance .create-workflow-step.is-active > .create-workflow-step-number,
.crm-page .business-document-workflow-appearance .create-workflow-step.is-complete > .create-workflow-step-number {
    background: var(--partner-workflow-accent);
}

.crm-page .business-document-workflow-appearance .create-workflow-step > .create-workflow-step-check {
    color: var(--partner-workflow-accent);
}

.crm-page .business-document-workflow-appearance .create-workflow-step-copy strong,
.crm-page .business-document-workflow-appearance .create-workflow-step-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-page .business-document-workflow-appearance .create-workflow-step-copy small {
    display: block;
}

.crm-page .business-document-workflow-appearance .create-workflow-panel-heading {
    margin-bottom: 1rem !important;
    padding: .9rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background: var(--bs-tertiary-bg);
}

.crm-page .crm-create-workflow-modal:not(.crm-workflow-edit-mode) .create-workflow-source-heading {
    display: none !important;
}

.crm-page .crm-create-workflow-modal.crm-workflow-edit-mode .create-workflow-progress,
.crm-page .crm-create-workflow-modal.crm-workflow-edit-mode .create-workflow-panel-heading {
    display: none !important;
}

.crm-page .crm-create-workflow-modal.crm-workflow-edit-mode .create-workflow-pane {
    display: block;
    min-height: 0;
    margin-bottom: 1.5rem;
    animation: none;
}

.crm-page #opportunityModal[data-workflow-mode="create"] #opportunityNotesSection {
    display: none;
}

.crm-page .modal[id*="edit" i] .modal-body h5,
.crm-page .modal[id*="edit" i] .modal-body h6,
.crm-page .crm-workflow-edit-mode .modal-body h5,
.crm-page .crm-workflow-edit-mode .modal-body h6 {
    color: #1e3a5f;
    font-weight: 600;
}

.crm-page .modal[id*="edit" i] .modal-body hr,
.crm-page .crm-workflow-edit-mode .modal-body hr {
    margin: 1.5rem 0;
    border-color: #dbe3ed;
    opacity: 1;
}

.crm-page .modal[id*="edit" i] .modal-body > form,
.crm-page .crm-workflow-edit-mode .modal-body > form {
    width: 100%;
}

.crm-page .modal[id*="edit" i] .modal-footer .btn:last-child,
.crm-page .crm-workflow-edit-mode .modal-footer .btn:last-child {
    border-color: #0d6efd;
    background: #0d6efd;
    color: #fff;
}

@media (min-width: 992px) {
    .crm-page .crm-create-workflow-modal .create-workflow-progress {
        display: flex;
        flex-wrap: nowrap;
    }

    .crm-page .crm-create-workflow-modal .create-workflow-step {
        flex: 1 1 0;
        min-width: 0;
    }
}

@media (max-width: 767.98px) {
    .crm-page .crm-create-workflow-modal .create-workflow-progress {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .crm-page .modal-header {
        align-items: center !important;
        padding: .5rem 1rem !important;
    }

    .crm-page .modal-header .modal-title {
        font-size: 1.15rem !important;
    }

    .crm-page .modal-header .modal-title + p,
    .crm-page .modal-header .modal-title + .small {
        font-size: .85rem;
    }
}