#emailThreadModal .task-email-thread-modal {
    width: 90vw !important;
    max-width: 90vw !important;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 992px) {
    #emailThreadModal .task-email-thread-modal {
        width: 92vw !important;
        max-width: 92vw !important;
    }
}

@media (max-width: 576px) {
    #emailThreadModal .task-email-thread-modal {
        width: 96vw !important;
        max-width: 96vw !important;
    }
}

#emailThreadModal .modal-body-email-thread {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden !important;
}

#emailThreadModal .modal-body-email-thread>.tab-content {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden !important;
}

#emailThreadModal .tab-content>.tab-pane.active {
    display: flex !important;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden !important;
}

#emailThreadModal .email-thread-display {
    display: flex !important;
    flex: 1 1 auto;
    min-height: 0 !important;
    height: auto !important;
    max-height: 100%;
    overflow: hidden !important;
}

#emailThreadModal .email-thread-left-column {
    align-self: stretch;
    min-height: 0;
    height: auto;
    max-height: none !important;
    padding-bottom: 12px;
    box-sizing: border-box;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

#emailThreadModal .email-thread-right-column {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0;
    height: auto;
    overflow: hidden !important;
}

#emailThreadModal .email-thread-body-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding-bottom: 16px;
    box-sizing: border-box;
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

.email-thread-left-item {
    cursor: pointer;
    padding: 10px;
    border-bottom: 1px solid var(--bs-sidebar-heading-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.email-thread-left-item:hover {
    color: var(--bs-input-font-color);
    border-radius: 10px;
    box-shadow: 0 1.5px 4px var(--bs-table-shadow1-color), 0 1.5px 6px var(--bs-table-shadow2-color), 0 0 6px rgba(184, 224, 187, 0.5);
}

.email-thread-left-item.selected {
    background-color: var(--navigation-card-active-hover-color);
    color: var(--bs-table-th-color) !important;
    border-radius: 10px;
    /* optional extras to make selection feel stronger */
    /* outline: 1px solid rgba(255,255,255,0.15); */
}

.modal-content-email-thread {
    color: var(--bs-input-font-color);
    box-shadow: 0 1.5px 4px var(--bs-table-shadow1-color), 0 1.5px 6px var(--bs-table-shadow2-color), 0 0 6px rgba(184, 224, 187, 0.5);
}

.modal-body-email-thread {
    /*display: flex;*/
    gap: 20px;
    background-color: var(--nav-bg-color);
}

.email-thread-display {
    display: flex !important;
}

.email-thread-left-column {
    width: 30%;
    max-height: 400px;
    overflow-y: auto;
    background: var(--bg-color);
    border-radius: 6px;
}

.email-thread-right-column {
    width: 60%;
    padding: 10px;
}

.modal-email-thread .email-thread-item-display-info {
    margin-bottom: 10px;
}

#emailThreadModal .email-thread-right-column,
#viewEmailModal .email-thread-right-column {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: -17px !important;
}

#emailThreadModal .modal-body-email-thread,
#viewEmailModal .modal-body-email-thread {
    padding: 16px;
}

#emailThreadModal .nav-tabs {
    flex-wrap: wrap;
}

#emailThreadModal .tab-content {
    min-width: 0;
}

#emailThreadModal .email-thread-display,
#viewEmailModal .email-thread-display {
    display: flex;
    gap: 16px;
    align-items: stretch;
    min-width: 0;
}

#emailThreadModal .email-thread-left-column,
#viewEmailModal .email-thread-left-column {
    flex: 0 0 34%;
    min-width: 240px;
    max-width: 420px;
    overflow-y: auto;
    max-height: 73vh;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

#emailThreadModal .email-thread-left-item,
#viewEmailModal .email-thread-left-item {
    cursor: pointer;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
    margin-top: 2px;
    margin-left: 2px;
    margin-right: 2px;
}

#emailThreadModal .email-thread-right-column,
#viewEmailModal .email-thread-right-column {
    flex: 1 1 auto;
    min-width: 0;
}

#emailThreadModal .email-thread-item-display-grid,
#viewEmailModal .email-thread-item-display-grid {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) 110px minmax(0, 1fr);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    overflow: hidden;
}

#emailThreadModal .email-thread-item-display-cell,
#viewEmailModal .email-thread-item-display-cell {
    padding: 10px 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#emailThreadModal .email-thread-item-display-cell:nth-child(4n),
#viewEmailModal .email-thread-item-display-cell:nth-child(4n) {
    border-right: none;
}

#emailThreadModal .email-thread-item-display-cell.meta-label,
#viewEmailModal .email-thread-item-display-cell.meta-label {
    font-weight: 600;
    opacity: 0.9;
    white-space: nowrap;
}

#emailThreadModal .email-thread-right-column .btn-group,
#viewEmailModal .email-thread-right-column .btn-group {
    margin-top: 12px;
    margin-bottom: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

#emailThreadModal #email-thread-item-display-1,
#emailThreadModal [id^="email-thread-item-display-"],
#viewEmailModal #email-thread-item-display-1,
#viewEmailModal [id^="email-thread-item-display-"] {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.email-meta-data {
    font-weight: 300;
}

@media (max-width: 768px) {

    #emailThreadModal .email-thread-display {
        flex-direction: column;
        gap: 12px;
    }

    #emailThreadModal .email-thread-left-column {
        flex: 0 0 auto;
        min-width: 0;
        max-width: none;
        max-height: 220px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        padding: 4px;
    }

    #emailThreadModal .email-thread-item-display-grid {
        grid-template-columns: 1fr;
    }

    #emailThreadModal .email-thread-item-display-cell {
        border-right: none;
    }

    #emailThreadModal .email-thread-item-display-cell.empty-cell {
        display: none;
    }

    #emailThreadModal .email-thread-item-display-cell.meta-label {
        white-space: normal;
    }
}

#viewEmailModal #email-body {
    max-width: 100%;
    overflow-x: hidden;
}

#viewEmailModal #email-body img,
#viewEmailModal #email-body svg,
#viewEmailModal #email-body video,
#viewEmailModal #email-body canvas,
#viewEmailModal #email-body iframe,
#viewEmailModal #email-body object,
#viewEmailModal #email-body embed {
    max-width: 100% !important;
    height: auto !important;
}

#viewEmailModal #email-body pre,
#viewEmailModal #email-body code {
    white-space: pre-wrap !important;
    overflow-x: hidden !important;
}

#viewEmailModal #email-body {
    background: transparent !important;
    color: #111 !important;
}

#emailThreadModal .email-thread-body-scroll,
#viewEmailModal .email-thread-body-scroll {
    max-height: 55vh;
    overflow-y: auto;
}

#emailThreadModal .modal-content-email-thread,
#viewEmailModal .modal-content-email-thread {
    max-height: 90vh;
}

#emailThreadModal .modal-body-email-thread,
#viewEmailModal .modal-body-email-thread {
    max-height: calc(90vh - 60px);
    overflow: hidden;
}

#emailThreadModal .email-thread-right-column,
#viewEmailModal .email-thread-right-column {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#emailThreadModal .email-thread-body-scroll,
#viewEmailModal .email-thread-body-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding-bottom: 16px;
    box-sizing: border-box;
}

#emailThreadModal .email-thread-body-scroll>*:last-child,
#viewEmailModal .email-thread-body-scroll>*:last-child {
    margin-bottom: 50px;
}

#emailThreadModal .email-thread-left-column,
#viewEmailModal .email-thread-left-column {
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

#emailThreadModal .email-thread-left-item,
#viewEmailModal .email-thread-left-item {
    display: block;
    width: calc(100% - 4px);
    max-width: calc(100% - 4px);
    box-sizing: border-box;
    white-space: normal;
}

#emailThreadModal .email-thread-left-item-from,
#viewEmailModal .email-thread-left-item-from {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#emailThreadModal .email-thread-left-item-preview-row,
#viewEmailModal .email-thread-left-item-preview-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

#emailThreadModal .email-thread-left-item-type-icon,
#viewEmailModal .email-thread-left-item-type-icon {
    flex: 0 0 auto;
}

#emailThreadModal .email-thread-left-item-preview,
#viewEmailModal .email-thread-left-item-preview {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-body-modal {
    background-color: white !important;
}

#emailThreadModal .email-thread-item-display-info,
#emailThreadModal .email-thread-item-display-grid,
#emailThreadModal .email-thread-item-display-cell,
#viewEmailModal .email-thread-item-display-info,
#emailThreadModal .email-thread-item-display-grid,
#emailThreadModal .email-thread-item-display-cell {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

#emailThreadModal .email-thread-item-display-grid,
#viewEmailModal .email-thread-item-display-grid {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) 96px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 6px;
    padding: 0 !important;
    margin: 0 !important;
}

#emailThreadModal .email-thread-item-display-cell,
#viewEmailModal .email-thread-item-display-cell {
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0;
}

#emailThreadModal .email-thread-item-display-cell.meta-label,
#viewEmailModal .email-thread-item-display-cell.meta-label {
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.9;
    white-space: nowrap;
    text-align: left;
}

#emailThreadModal .email-thread-item-display-cell.email-meta-data,
#viewEmailModal .email-thread-item-display-cell.email-meta-data {
    font-size: 0.85rem;
    opacity: 0.95;
    text-align: left;
    overflow-wrap: anywhere;
}

#emailThreadModal .email-thread-item-display-top,
#viewEmailModal .email-thread-item-display-top {
    display: flex;
    justify-content: flex-end !important;
    align-items: center !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

#emailThreadModal .email-thread-item-meta-date,
#viewEmailModal .email-thread-item-meta-date {
    font-size: 0.72rem !important;
    line-height: 1 !important;
    opacity: 0.8 !important;
    white-space: nowrap !important;
}

#emailThreadModal .email-thread-item-display-empty,
#viewEmailModal .email-thread-item-display-empty {
    font-size: 0.85rem;
    opacity: 0.75;
    padding: 2px 0 6px;

}

#emailThreadModal .email-thread-right-column .email-thread-action-btns,
#viewEmailModal .email-thread-right-column .email-thread-action-btns {
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 10px 0 12px !important;
}

#emailThreadModal .email-thread-display:not(:has(.email-thread-left-item.selected)) .email-thread-action-btns,
#viewEmailModal .email-thread-display:not(:has(.email-thread-left-item.selected)) .email-thread-action-btns {
    display: none !important;
}

#emailThreadModal .email-thread-display:has(.email-thread-left-item.selected) .email-thread-action-btns,
#viewEmailModal .email-thread-display:has(.email-thread-left-item.selected) .email-thread-action-btns {
    display: flex !important;
}

#emailThreadModal .email-thread-right-column .btn-group.btn-group-sm>.btn,
#emailThreadModal .email-thread-right-column .btn-group.btn-group-sm>.btn-group,
#viewEmailModal .email-thread-right-column .btn-group.btn-group-sm>.btn,
#emailThreadModal .email-thread-right-column .btn-group.btn-group-sm>.btn-group {
    margin: 0 !important;
}

#emailThreadModal .email-thread-right-column .btn-group.btn-group-sm>.btn:not(:first-child),
#viewEmailModal .email-thread-right-column .btn-group.btn-group-sm>.btn:not(:first-child) {
    margin-left: 0 !important;
}

#emailThreadModal .email-thread-right-column .btn-group.btn-group-sm .btn,
#viewEmailModal .email-thread-right-column .btn-group.btn-group-sm .btn {
    border-radius: 6px !important;
    min-width: 44px;
    height: 36px;
    padding: 0 12px !important;
    /*display: inline-flex !important;*/
    align-items: center !important;
    justify-content: center !important;
}

#emailThreadModal .email-thread-body-scroll,
#viewEmailModal .email-thread-body-scroll {
    width: 100%;
    text-align: left;
}

#emailThreadModal [id^="email-thread-item-display-content-"],
#viewEmailModal [id^="email-thread-item-display-content-"] {
    text-align: left;
}

/*#emailThreadModal .email-thread-item-display-info[data-has-selection="0"]~.btn-group.btn-group-sm,*/

/*#emailThreadModal .email-thread-item-display-info[data-has-selection="0"]~.email-thread-body-scroll {*/

#emailThreadModal .modal-content-email-thread,
#viewEmailModal .modal-content-email-thread {
    min-height: 70vh;
}

#emailThreadModal .modal-body-email-thread,
#viewEmailModal .modal-body-email-thread {
    min-height: calc(70vh - 60px);
}

#emailThreadModal .email-thread-display,
#viewEmailModal .email-thread-display {
    min-height: calc(70vh - 80px);
}

#emailThreadModal .email-thread-item-display-info .email-thread-item-display-empty,
#viewEmailModal .email-thread-item-display-info .email-thread-item-display-empty {
    text-align: center;
    max-width: 520px;
    margin: 0;
    padding: 3px 16px;
}

#emailThreadModal .email-thread-right-column,
#viewEmailModal .email-thread-right-column {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100%;
}

#email_task_linking_submit_button {
    position: relative;
    bottom: 6px;
    left: 10px;
}

#emailThreadModal .email-thread-left-item,
#viewEmailModal .email-thread-left-item {
    cursor: pointer;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    margin-bottom: 4px;
    margin-top: 2px;
    margin-left: 2px;
    margin-right: 2px;
}

#emailThreadModal .email-thread-left-item-from,
#viewEmailModal .email-thread-left-item-from {
    font-size: 11px;
    line-height: 1.2;
    font-weight: 500;
    color: inherit;
    opacity: 0.72;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

#emailThreadModal .email-thread-left-item-preview,
#viewEmailModal .email-thread-left-item-preview {
    font-size: 13px;
    line-height: 1.35;
    color: inherit;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    word-break: break-word;
    text-align: left;
}

#emailThreadModal .email-thread-left-item.selected .email-thread-left-item-from,
#viewEmailModal .email-thread-left-item.selected .email-thread-left-item-from {
    opacity: 0.82;
}

#emailThreadModal .email-thread-left-item-from,
#viewEmailModal .email-thread-left-item-from {
    margin-bottom: 4px;
}

#emailThreadModal .email-thread-left-item-preview-row,
#viewEmailModal .email-thread-left-item-preview-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

#emailThreadModal .email-thread-left-item-type-icon,
#viewEmailModal .email-thread-left-item-type-icon {
    flex: 0 0 16px;
    width: 16px;
    min-width: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

#emailThreadModal .email-thread-left-item-preview,
#viewEmailModal .email-thread-left-item-preview {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
    text-align: left;
}

.email-thread-meta-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.email-thread-meta-priority-slot {
    width: 18px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 0;
}

.email-thread-meta-priority-high {
    color: #dc3545;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#emailThreadModal .email-thread-left-item.email-thread-left-item-unread,
#viewEmailModal .email-thread-left-item.email-thread-left-item-unread {
    border: 1px solid var(--unread-email-alert-bg);
    border-radius: 14px;
    background: rgba(77, 171, 247, 0.06);
    padding: 12px 14px;
    margin: 6px 2px;
    border-bottom: 1px solid var(--unread-email-alert-bg);
}

#emailThreadModal .email-thread-left-item.email-thread-left-item-unread .email-thread-left-item-from,
#viewEmailModal .email-thread-left-item.email-thread-left-item-unread .email-thread-left-item-from {
    font-weight: 600;
    color: var(--font-color);
    margin-bottom: 8px;
}

#emailThreadModal .email-thread-left-item.email-thread-left-item-unread .email-thread-left-item-preview-row,
#viewEmailModal .email-thread-left-item.email-thread-left-item-unread .email-thread-left-item-preview-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

#emailThreadModal .email-thread-left-item.email-thread-left-item-unread .email-thread-left-item-preview,
#viewEmailModal .email-thread-left-item.email-thread-left-item-unread .email-thread-left-item-preview {
    flex: 1;
    min-width: 0;
    padding-left: 12px;
    border-left: 4px solid var(--unread-email-alert-bg);
    font-weight: 600;
    color: var(--font-color);
    background: transparent;
}

#emailThreadModal .email-thread-left-item.email-thread-left-item-unread .email-thread-left-item-type-icon,
#viewEmailModal .email-thread-left-item.email-thread-left-item-unread .email-thread-left-item-type-icon {
    flex-shrink: 0;
}

#emailThreadModal .email-thread-display:not(:has(.email-thread-left-item.selected)) .email-thread-item-display-empty,
#viewEmailModal .email-thread-display:not(:has(.email-thread-left-item.selected)) .email-thread-item-display-empty {
    display: flex !important;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3px 16px;
}

#emailThreadModal .email-thread-display:not(:has(.email-thread-left-item.selected)) .email-thread-item-display-info,
#viewEmailModal .email-thread-display:not(:has(.email-thread-left-item.selected)) .email-thread-item-display-info {
    display: none !important;
}

#emailThreadModal .email-thread-display:not(:has(.email-thread-left-item.selected)) .email-thread-body-scroll,
#viewEmailModal .email-thread-display:not(:has(.email-thread-left-item.selected)) .email-thread-body-scroll {
    display: none !important;
}

#emailThreadModal .email-thread-display:has(.email-thread-left-item.selected) .email-thread-item-display-empty,
#viewEmailModal .email-thread-display:has(.email-thread-left-item.selected) .email-thread-item-display-empty {
    display: none !important;
}

#emailThreadModal .email-thread-display:has(.email-thread-left-item.selected) .email-thread-item-display-info,
#viewEmailModal .email-thread-display:has(.email-thread-left-item.selected) .email-thread-item-display-info {
    display: block !important;
}

#emailThreadModal .email-thread-display:has(.email-thread-left-item.selected) .email-thread-body-scroll,
#viewEmailModal .email-thread-display:has(.email-thread-left-item.selected) .email-thread-body-scroll {
    display: block !important;
}

#email_task_linking_success_message,
#email_task_linking_error_message {
    color: var(--bs-table-font-color);
}

.task-email-thread-vr {
    margin-left: 7px;
    margin-right: 7px;
}

.task-email-thread-action-btns {
    margin-top: 0px;
}

#viewEmailModal #email-body {
    background-color: white !important;
}

#viewEmailModal .email-view-meta-data {
    flex: 0 0 auto;
    width: 100%;
    margin: 0 0 16px;
    padding: 0 10px 14px;
    border-bottom: 1px solid var(--disabled-border-color, #6c757d);
    box-sizing: border-box;
    text-align: left;
    font-size: 13px;
}

#viewEmailModal .email-view-meta-grid {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1.4fr) minmax(0, 1fr) auto;
    column-gap: 24px;
    row-gap: 8px;
    align-items: start;
    justify-items: stretch !important;
    width: 100%;
    margin-bottom: 6px;
}

#viewEmailModal .email-view-meta-row {
    display: flex;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px;
    min-width: 0;
    width: 100%;
    text-align: left !important;
}

#viewEmailModal .email-view-meta-label {
    flex: 0 0 auto;
    margin: 0;
    font-weight: 600;
    white-space: nowrap;
    text-align: left;
}

#viewEmailModal .email-view-meta-value {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: left;
}

#viewEmailModal .email-view-meta-date {
    width: auto !important;
    justify-self: end !important;
    align-self: start;
    justify-content: flex-end !important;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--bs-input-font-color);
    opacity: 0.85;
    white-space: nowrap;
    text-align: right !important;
}

#viewEmailModal .email-view-meta-row-subject {
    grid-column: 1 / -1;
}

#viewEmailModal .email-view-meta-row-subject .email-view-meta-value {
    font-weight: 500;
}

#viewEmailModal #email-view-html-tab-content,
#viewEmailModal .email-view-content-wrap,
#viewEmailModal #email-body {
    text-align: left !important;
}

#viewEmailModal #email-body,
#viewEmailModal #email-body p,
#viewEmailModal #email-body div,
#viewEmailModal #email-body span,
#viewEmailModal #email-body li,
#viewEmailModal #email-body h1,
#viewEmailModal #email-body h2,
#viewEmailModal #email-body h3,
#viewEmailModal #email-body h4,
#viewEmailModal #email-body h5,
#viewEmailModal #email-body h6 {
    text-align: left !important;
}

#viewEmailModal #email-view-html-tab-content {
    padding-right: 12px !important;
    padding-left: 12px !important;
    box-sizing: border-box;
}

@media (max-width: 991.98px) {

    #viewEmailModal .email-view-meta-grid {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 6px;
    }

    #viewEmailModal .email-view-meta-date {
        width: 100% !important;
        justify-self: start !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    #viewEmailModal .email-view-meta-row-subject {
        grid-column: auto;
    }
}

#viewEmailModal .email-view-meta-label {
    font-size: 12px !important;
}

.email-view-meta-value {
    font-size: 12px !important;
}

#viewEmailModal .email-modal-dialog {
    width: calc(90vw - 2rem);
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    margin: 1rem auto;
}

#viewEmailModal .modal-content {
    width: 100%;
    height: auto;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    min-width: 0;
    overflow: hidden;
}

#viewEmailModal .modal-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 4px;
}

#viewEmailModal .tab-content {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    max-height: none !important;
    overflow: hidden;
}

#viewEmailModal .tab-content>.tab-pane.active {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: auto;
}

#viewEmailModal #task-email-content-tab-content.active,
#viewEmailModal #email-view-html-tab-content.active {
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
}

#viewEmailModal .email-view-content-wrap {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    max-height: none !important;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 576px),
(max-height: 650px) {
    #viewEmailModal .email-modal-dialog {
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
        margin: 0.5rem auto;
    }

    #viewEmailModal .modal-content {
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
    }
}

#email_task_linking_filter_form .all-tasks-input-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: center;
    gap: 48px;
    width: 100%;
    max-width: 100%;
    padding: 12px 8px;
    box-sizing: border-box;
    overflow-x: auto;
}

#email_task_linking_filter_form .all-tasks-section-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 48px;
    flex: 0 0 auto;
}

#email_task_linking_filter_form .all-tasks-section-container>.flex-col {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto;
}

#email_task_linking_filter_form .all-tasks-contents-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px;
    width: 320px;
    font-size: 12px;
    min-width: 320px;
    padding: 4px;
    box-sizing: border-box;
}

#email_task_linking_filter_form .all-tasks-contents-container .tl,
#email_task_linking_filter_form .all-tasks-contents-container .formfields {
    flex: 0 0 auto;
}

#email_task_linking_filter_form .all-tasks-contents-container .tl {
    white-space: nowrap;
    text-align: left;
}

@media (max-width: 1200px) {
    #email_task_linking_filter_form .all-tasks-input-container {
        justify-content: flex-start;
    }
}

#email-body {
    padding: 8px !important;
    border-radius: 5px !important;
}

.email-thread-item-meta-date {
    padding-top: 15px !important;
}

#emailTaskLinkingModal>.bs-container {
    z-index: 1060;
}