.crm-email-page {
	padding: 28px 22px 48px;
	color: #14213d;
}

.crm-email-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 22px;
}

.crm-email-heading h1 {
	margin: 0 0 6px;
	font-size: 30px;
	font-weight: 750;
}

.crm-email-heading p { margin: 0; color: #61708a; }
.crm-email-eyebrow { color: #246fe5 !important; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.crm-email-heading-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.crm-email-alert { margin-bottom: 18px; }

.crm-email-compose-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
	gap: 20px;
	align-items: start;
}

.crm-email-admin-grid {
	display: grid;
	grid-template-columns: minmax(280px, .38fr) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.crm-email-card {
	background: #fff;
	border: 1px solid #dfe6f1;
	border-radius: 14px;
	padding: 22px;
	box-shadow: 0 10px 30px rgba(24, 45, 82, .06);
}

.crm-email-card h2 { margin: 0 0 20px; font-size: 19px; font-weight: 750; }
.crm-email-card h3 { margin: 22px 0 12px; font-size: 15px; font-weight: 750; color: #40516d; }
.crm-email-card label { color: #253553; font-weight: 650; }
.crm-email-card .form-control { border-color: #d8e0ec; border-radius: 8px; box-shadow: none; }
.crm-email-card .form-control:focus { border-color: #2b70e4; box-shadow: 0 0 0 3px rgba(43, 112, 228, .12); }
.crm-email-code { font-family: Consolas, Monaco, monospace; font-size: 13px; line-height: 1.55; resize: vertical; }

.crm-html-editor > .nicEdit-panelContain,
.crm-html-editor > div:not(.help-block) {
	box-sizing: border-box;
	width: 100% !important;
	max-width: 100%;
}
.crm-html-editor .nicEdit-panelContain {
	border: 1px solid #cbd5e1 !important;
	border-bottom: 0 !important;
	border-radius: 8px 8px 0 0;
	background: #f8fafc !important;
	overflow: hidden;
}
.crm-html-editor .nicEdit-panel {
	width: auto !important;
	min-height: 28px;
}
.crm-html-editor .nicEdit-main {
	box-sizing: border-box;
	width: auto !important;
	max-width: 100%;
	margin: 0 !important;
	padding: 12px;
	border: 1px solid #cbd5e1;
	border-radius: 0 0 8px 8px;
	background: #fff;
	font: 14px/1.55 Arial, sans-serif;
	overflow-y: auto !important;
}
.commerciali-email-signature .crm-html-editor .nicEdit-main {
	min-height: 180px !important;
}
.crm-html-editor .nicEdit-main:focus {
	border-color: #2b70e4;
	box-shadow: 0 0 0 3px rgba(43, 112, 228, .12);
	outline: 0;
}
.crm-html-editor.is-ready > textarea {
	display: none !important;
}

.crm-email-recipient-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.crm-email-recipient-chips .btn { border-radius: 999px; color: #295eaf; border-color: #cbdcf6; background: #f6f9ff; }

.crm-email-send-settings { border: 1px solid #cfe0f8; border-radius: 10px; padding: 14px 16px 4px; margin: 0 0 18px; background: #f7faff; }
.crm-email-send-settings legend { width: auto; padding: 0 8px; margin: 0; border: 0; color: #285ea9; font-size: 13px; font-weight: 800; }

.crm-email-attachments { border: 1px solid #e1e7f0; border-radius: 10px; padding: 14px 16px; margin: 18px 0; }
.crm-email-attachments legend { width: auto; padding: 0 8px; margin: 0; border: 0; color: #40516d; font-size: 13px; font-weight: 800; }
.crm-email-attachments .checkbox { display: grid; grid-template-columns: 20px 1fr; gap: 0 6px; padding: 7px 0; margin: 0; }
.crm-email-attachments .checkbox input { grid-row: 1 / 3; }
.crm-email-attachments .checkbox span { font-weight: 650; }
.crm-email-attachments .checkbox small { color: #75839a; font-weight: 400; }

.crm-email-preview-card { position: sticky; top: 92px; padding: 0; overflow: hidden; }
.crm-email-preview-header { display: flex; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #e5eaf2; background: #f8faff; }
.crm-email-preview-header div { display: flex; flex-direction: column; min-width: 0; }
.crm-email-preview-header small { color: #7b899e; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.crm-email-preview-header strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-email-preview-header > span { color: #687792; font-size: 12px; white-space: nowrap; }
#crm-email-preview, #crm-email-log-preview { display: block; width: 100%; min-height: 520px; border: 0; background: #fff; }
#crm-email-log-preview { min-height: 360px; margin: 18px 0; border: 1px solid #e4e9f1; border-radius: 9px; }

.crm-email-token-help { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; padding: 14px 18px; border-top: 1px solid #e5eaf2; background: #fbfcfe; }
.crm-email-token-help strong { width: 100%; color: #5c6d87; font-size: 12px; }
.crm-email-token-help code { padding: 4px 7px; border-radius: 5px; background: #eaf1ff; color: #1f5cc1; }

.crm-email-admin-list { display: flex; flex-direction: column; gap: 8px; }
.crm-email-admin-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; color: #1d2c46; border: 1px solid #e2e8f1; border-radius: 9px; text-decoration: none !important; }
.crm-email-admin-item:hover, .crm-email-admin-item.is-active { border-color: #8ab3f1; background: #f4f8ff; }
.crm-email-admin-item span:first-child { display: flex; flex-direction: column; min-width: 0; }
.crm-email-admin-item small { color: #718097; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-email-switch { display: inline-flex; gap: 7px; align-items: center; min-height: 34px; font-weight: 500 !important; }
.crm-email-credential-state { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crm-email-credential-state small { margin-left: 4px; color: #6c7b91; }

.crm-email-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.crm-email-detail-heading h2 { margin-top: 3px; }
.crm-email-detail-heading small { color: #738198; font-weight: 750; }
.crm-email-log-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 15px 0; }
.crm-email-log-meta div { padding: 10px; border-radius: 8px; background: #f6f8fc; overflow: hidden; }
.crm-email-log-meta span, .crm-email-log-meta strong { display: block; }
.crm-email-log-meta span { color: #77859b; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.crm-email-log-meta strong { overflow-wrap: anywhere; font-size: 13px; }
.crm-email-log-attachments { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crm-email-log-attachments span { padding: 6px 9px; border-radius: 7px; background: #eef4ff; color: #285ea9; }
.crm-email-history-table { margin-bottom: 0; }
.crm-email-history-table th { color: #65748b; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; border-bottom-width: 1px !important; }
.crm-email-history-table td { vertical-align: middle !important; }
.crm-email-history-table td small { display: block; color: #7a879b; }

.crm-email-child-tab > a { display: flex !important; align-items: center; gap: 7px; }
.crm-email-child-tab > a .glyphicon { color: #2867d7; }
.crm-email-record-loading { padding: 42px 20px; color: #687792; text-align: center; }
.crm-email-record-panel { padding: 16px 2px 2px; }
.crm-email-record-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 8px 14px; }
.crm-email-record-toolbar > div { display: flex; flex-direction: column; }
.crm-email-record-toolbar strong { color: #1e2d49; font-size: 15px; }
.crm-email-record-toolbar small { color: #718097; margin-top: 3px; }
.crm-email-record-toolbar .btn-primary { color: #fff !important; font-size: 14px !important; line-height: 20px !important; }
.crm-email-record-toolbar .btn-primary .glyphicon { color: #fff !important; }
.crm-email-unsubscribe-alert { margin: 0 8px 14px; }
.crm-email-unsubscribe-heading { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.crm-email-unsubscribe-entry { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 5px 0; }
.crm-email-unsubscribe-entry > strong { color: #8a1f17; }
.crm-email-unsubscribe-alert > small { display: block; margin-top: 7px; color: #8a4b46; }
.crm-email-subscribe-alert { margin: 0 8px 14px; }
.crm-email-subscribe-heading { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.crm-email-subscribe-entry { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 5px 0; }
.crm-email-subscribe-entry > strong { color: #21633c; }
.crm-email-record-table { margin-bottom: 0; border: 1px solid #e0e7f1; }
.crm-email-record-table th { color: #65748b; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; background: #f7f9fc; border-bottom-width: 1px !important; }
.crm-email-record-table td { vertical-align: middle !important; }
.crm-email-record-table td strong, .crm-email-record-table td small { display: block; }
.crm-email-record-table td small { color: #7a879b; margin-top: 2px; }
.crm-email-record-table .crm-email-campaign-subscription { display: inline-block; margin-left: 5px; }
.crm-email-record-table .crm-email-tracking-label { display: block; width: max-content; margin-top: 5px; cursor: help; }
.crm-email-record-empty { display: flex; min-height: 150px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #7a879b; }
.crm-email-record-empty .glyphicon { color: #8da6ca; font-size: 28px; }
.crm-email-record-empty strong { color: #40516d; font-size: 15px; }
.crm-email-contact-action { box-shadow: 0 3px 10px rgba(37, 99, 235, .22); }

.glyphicon-spin { animation: crm-email-spin 1s linear infinite; }
@keyframes crm-email-spin { to { transform: rotate(360deg); } }

@media (max-width: 1100px) {
	.crm-email-compose-grid, .crm-email-admin-grid { grid-template-columns: 1fr; }
	.crm-email-preview-card { position: static; }
}

@media (max-width: 767px) {
	.crm-email-page { padding: 18px 8px 36px; }
	.crm-email-heading { flex-direction: column; }
	.crm-email-heading-actions { justify-content: flex-start; }
	.crm-email-card { padding: 16px; border-radius: 10px; }
	.crm-email-log-meta { grid-template-columns: 1fr; }
	.crm-email-record-toolbar { align-items: stretch; flex-direction: column; }
	.crm-email-record-toolbar .btn { align-self: flex-start; }
}