/* 2025 redesign */
/* NOTE: all new features to be prepended by 'p-' or at least referenced within '.pidj-2025' to avoid any overlap with previous classes */
/* grid-column: 1 / -1; span all columns */


/* filter values calced via https://isotropic.co/tool/hex-color-to-css-filter/ */
:root {
	--primary-color: #744E89;
	--primary-color-filter: invert(37%) sepia(18%) saturate(1221%) hue-rotate(235deg) brightness(90%) contrast(92%);
	--primary-color-alt: #462862;
	--primary-color-alt-filter: invert(17%) sepia(17%) saturate(3912%) hue-rotate(239deg) brightness(96%) contrast(92%);
	--primary-color-light: #E9C8F0;
	--primary-color-light-filter: invert(100%) sepia(58%) saturate(7474%) hue-rotate(187deg) brightness(98%) contrast(92%);

	--transition-speed: 0.150s;
	--border-color: #D5D7DA;
	--default-text-color: #181D27;
	--default-text-color-filter: invert(6%) sepia(12%) saturate(2082%) hue-rotate(181deg) brightness(95%) contrast(89%);
}

/* latin range Inter font (normal and italic) */
@font-face {
	font-family: 'Pidj-Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(/libs/fonts/Inter/pidj-inter.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Pidj-Inter';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url(/libs/fonts/Inter/pidj-inter-ital.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* adjustments for legacy features */
.full-page-under-control, .full-page-over-control { z-index: 1100; left: 320px; top: 0px; }
.full-page-under-control.collapsed, .full-page-over-control.collapsed { left: 124px; }
.full-page-over-content.container { width: unset; max-width: unset; }
.full-page-over-content.container > .row { margin: 0; }
.chat-frame { overflow-x: hidden !important; }
.tooltip { z-index: 1000000; }


/* global styles */
body { min-width: 700px; }
a { color: var(--primary-color); }
a:hover { color: var(--primary-color-alt); }
[v-cloak] { display: none; }/* auto-removed when vue is mounted */
.clear { clear: both; }
.clear.spacer { height: 20px; }
.pidj-2025 { color: var(--default-text-color); font-size: 14px; font-family: 'Pidj-Inter', sans-serif; }
.ql-editor h1, .ql-editor h2, .ql-editor h3 { color: var(--default-text-color); font-family: inherit; }
.pidj-2025 h1 { all: unset; color: #181D27; font-size: 70px; font-weight: 700; line-height: 90px; margin-bottom: 48px; }
.pidj-2025 h2 { all: unset; color: #181D27; font-size: 48px; font-weight: 700; margin-bottom: 24px; }
.pidj-2025 h3 { all: unset; color: #181D27; font-size: 32px; font-weight: 600; margin-bottom: 12px; }
.pidj-2025 h4 { all: unset; color: #181D27; font-size: 24px; font-weight: 600; line-height: 32px; margin-bottom: 6px; }

.pidj-2025 a, .pidj-2025 a:visited { font-weight: bold; text-decoration: none; }
.pidj-2025 input[type="text"], .pidj-2025 select, .pidj-2025 textarea, .pidj-2025 input[type="file"], .pidj-2025 input[type="number"], .pidj-2025 input[type="datetime-local"], .pidj-2025 input[type="tel"], .p-select, .pidj-2025 input[type="email"], .pidj-2025 input[type="password"] { background: #FFF; padding: 10px 14px; border: 1px solid var(--border-color); font-size: 16px; font-family: 'Pidj-Inter', sans-serif; border-radius: 8px; width: 100%; box-sizing: border-box; }
.pidj-2025 input[disabled], .pidj-2025 select[disabled], .pidj-2025 textarea[disabled], .ql-editor[contenteditable="false"], .p-select.disabled { background-color: #EEE !important; cursor: not-allowed !important; }
.pidj-2025 input.has-errors, .pidj-2025 select.has-errors, .pidj-2025 textarea.has-errors, .p-select.has-errors { background-color: #FEE !important; border-color: #FFD7DA !important; }

.pidj-2025 textarea { width: 100%; min-width: 100%; max-width: 100%; height: 150px; }

.pidj-2025 input::placeholder, .pidj-2025 textarea::placeholder { color: #717680; font-size: 16px; font-family: 'Pidj-Inter', sans-serif; }
.pidj-2025 textarea::placeholder { padding-top: 3px; }

.pidj-2025 input[type="text"].p-search { background: #FFF url('/ui-imgs/search.svg') no-repeat 9px 9px; padding-left: 40px; }
.pidj-2025 input[type="text"].p-ai { background: #FFF url('/ui-imgs/ai-wand.svg') no-repeat 13px 13px; padding-left: 40px; }

.pidj-2025 select, .p-select { appearance: none; background: #FFF url('/ui-imgs/dropdown-arrow.png') no-repeat calc(100% - 11px) 17px; padding-right: 40px; cursor: pointer; user-select: none; }

.pidj-2025 label { all: unset; font-size: 14px; font-weight: 500; }

.pidj-2025 hr { display: block; width: 100%; height: 1px; margin: 20px 0; background: var(--border-color); }

.p-input-footnote { color: #717680; font-size: 14px; font-weight: 400; }
.p-input-footnote.error { color: #DC2626; }

.p-note-box { color: #2563EB; border: 1px solid #2563EB; background: #EFF6FF; border-radius: 8px; padding: 12px 16px; font-size: 12px; font-weight: 500; line-height: 16px; margin-bottom: 16px; }

.p-input-block:not(:last-child) { margin-bottom: 20px; }
	.p-input-block > div:first-child { margin-bottom: 4px; }

.p-input-block-with-limit > div:first-child { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }

.p-textarea-block-with-limit > div:first-child { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }

.p-section-heading { font-size: 18px; font-weight: 600; }

.p-radio-btn-options { background: #FAFAFA; border-radius: 8px; padding: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr))/* 1fr col for every child elem (all one row) */; grid-gap: 12px; margin-bottom: 12px; }/* used when have a group of radio buttons that toggle other content on/off (sections header type of thing) */

.pidj-2025 label.radio-btn { cursor: pointer; font-size: 14px; font-weight: 500; }
	.pidj-2025 label.radio-btn input[type="radio"] { appearance: none; outline: none; background: url('/ui-imgs/radio-btn.svg') no-repeat 50% 50%; width: 16px; height: 16px; float: left; margin: 2px 7px 0 0; }
	.pidj-2025 label.radio-btn input[type="radio"]:checked { background-image: url('/ui-imgs/radio-btn-selected.svg'); }

.p-sorta-dropdown-header { display: inline-block; clear: both; font-size: 18px; font-weight: 600; background: no-repeat calc(100% - 11px) 3px; padding-right: 40px; cursor: pointer; }
.p-sorta-dropdown-header.open { background-image: url('/ui-imgs/sorta-dropdown-open.svg'); }

.p-selected-thing { display: inline-block; background: #E9EAEB; border-radius: 14px; padding: 6px 12px; font-size: 12px; font-weight: 500; }
	.p-selected-thing .x-btn { width: 28px; height: 28px; background: url('/ui-imgs/selected-thing-x.svg') no-repeat 50% 50%; float: right; margin: -6px -6px -6px 6px; cursor: pointer; }

.p-label-bar { margin: 16px 0; display: grid; grid-template-columns: 1fr auto 1fr; grid-column-gap: 6px; align-items: center; }
	.p-label-bar::before, .p-label-bar::after { content: ""; height: 1px; width: 100%; background: var(--border-color); }
	.p-label-bar > span { color: var(--primary-color); font-size: 14px; font-weight: 600; }


/* ai-promptable textarea */
.ai-promptable-textarea { position: relative; }
	.ai-promptable-textarea .ai-action-btn { position: absolute; top: 0px; right: 0px; cursor: pointer; padding: 11px 11px; }
	.ai-promptable-textarea:not(.prompting) textarea { padding-right: 38px; }
	.ai-promptable-textarea:not(.prompting) input[type="text"] { display: none; }
	.ai-promptable-textarea input[type="text"] { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-bottom: none; padding-right: 40px; }
	.ai-promptable-textarea.prompting textarea { border-top-left-radius: 0px; border-top-right-radius: 0px; }


/* toggle switch */
.p-toggle { display: inline-block; margin-bottom: 16px; }
.p-toggle:last-child { margin-bottom: 0px; }
	.p-toggle * { display: block; }
	.p-toggle > span { cursor: pointer; display: grid; grid-template-columns: 36px 1fr; grid-gap: 7px; }
	.p-toggle > span.disabled { cursor: not-allowed; }
		.p-toggle > span > span:first-child { position: relative; width: 36px; height: 20px; background: #D5D7DA; transition: background var(--transition-speed) ease-in-out; border-radius: 10px; margin-top: 1px; }
		.p-toggle > span.on > span:first-child { background-color: var(--primary-color); }
		.p-toggle > span.disabled > span:first-child { background-color: #C66 !important; }
			.p-toggle > span > span:first-child > span { position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; background: #FFF; border-radius: 8px; transition: left var(--transition-speed) ease-in-out; }
			.p-toggle > span.on > span:first-child > span { left: 18px; }
		.p-toggle > span > span:nth-child(2) { font-size: 15px; font-weight: 500; }
		.p-toggle > span input { display: none; }


/* toggled content (nested content under toggle box) */
.p-toggled-content { max-height: 0px; overflow: hidden; transition: all var(--transition-speed) linear; border-left: 2px solid var(--primary-color-light); padding-left: 16px; margin-bottom: 0px; opacity: 0; }
.p-toggled-content.open { max-height: 9999px; margin-bottom: 16px; opacity: 1; overflow: unset; }


/* checkbox */
.p-checkbox { font-weight: 500; padding-top: 2px; cursor: pointer; margin-bottom: 16px; display: grid; grid-template-columns: 16px 1fr; grid-gap: 7px; user-select: none; }
.p-checkbox.disabled { cursor: not-allowed; }
	.p-checkbox img { margin-top: -2px; }
	.p-checkbox.disabled img { filter: brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(3222%) hue-rotate(313deg) brightness(100%) contrast(90%); }
	.p-checkbox input { display: none; }


/* buttons */
.pidj-2025 button { border: none; }
a.p-btn, a.p-btn:hover { color: var(--default-text-color); }
.p-btn { display: inline-block; transition: all var(--transition-speed) ease-in-out; background: #F5F5F5; padding: 10px 18px; font-size: 16px; font-weight: 600; border-radius: 8px; cursor: pointer; text-decoration: none !important; box-sizing: border-box; text-align: center; }
button.p-btn, input.p-btn { border: none; }
.p-btn:hover { background: #DDD; }
.p-btn[disabled] { color: #AAA !important; background: #F5F5F5 !important; cursor: not-allowed !important; }
.p-btn.btn-block { display: block; }
.p-btn.primary { color: #FFF !important; background: var(--primary-color); }
.p-btn.primary:hover { background: var(--primary-color-alt); }
.p-btn.danger { color: #FFF !important; background: #991B1B; }
.p-btn.danger:hover { background: #770909; }
.p-btn.operation, .p-btn.selectable { background: #FFF; border: 1px solid var(--border-color); color: var(--default-text-color) !important; }
.p-btn.operation:not(.no-select):hover, .p-btn.selectable:not(.no-select):hover { background: #E5E5E5; }
.p-btn.selectable.img-content { padding: 16px; }
.p-btn.selectable.selected { border-color: #559799 !important; }
.p-btn.no-select { cursor: default !important; }
.p-btn.sm { padding: 8px 14px; font-size: 14px; }
.p-btn.linkish { background: none; padding: 0; color: var(--primary-color) !important; }
.p-btn.linkish:hover { color: var(--primary-color-alt) !important; }
.p-btn.continue::after { display: inline-block; content: url('/ui-imgs/continue-arrow.png'); margin: 2px 0 -2px 10px; float: right; }
.p-btn.back::after { display: inline-block; content: url('/ui-imgs/back-arrow.png'); margin: 2px 10px -2px 0; float: left; }
.p-btn.calendar { padding: 11px 14px 8px; }
.p-btn.calendar::after { display: inline-block; content: url('/ui-imgs/calendar.svg'); }
.p-btn.arrow-up { padding: 11px 13px 8px; }
.p-btn.arrow-up::after { display: inline-block; content: url('/ui-imgs/arrow-up.svg'); }
.p-btn.arrow-down { padding: 11px 13px 8px; }
.p-btn.arrow-down::after { display: inline-block; content: url('/ui-imgs/arrow-down.svg'); }
.p-btn.copy { padding: 11px 15px; }
.p-btn.copy::after { display: inline-block; content: url('/ui-imgs/copy.svg'); }
.p-btn.trash { padding: 11px 14px 8px; }
.p-btn.trash::after { display: inline-block; content: url('/ui-imgs/trash.png'); }
.p-btn.sm.trash { padding: 7px 10px 4px; }
.p-btn.sm.trash::after { transform: scale(0.7); transform-origin: 50% 50%; }
.p-btn.minus { padding: 6px 14px 16px; }
.p-btn.minus::after { display: inline-block; content: url('/ui-imgs/minus.png'); }
.p-btn.plus::after { display: inline-block; content: url('/ui-imgs/plus.png'); margin: 2px 10px -2px 0; float: left; /* img coloring */filter: var(--default-text-color-filter); }
.p-btn.plus.linkish::after { /* img coloring */filter: var(--primary-color-filter); }
.p-btn.plus.linkish:not([disabled]):hover::after { /* img coloring */filter: var(--primary-color-alt-filter); }
.p-btn.ellipsis { padding: 8px; }
.p-btn.ellipsis::after { display: inline-block; content: url('/ui-imgs/ellipsis.svg'); width: 16px; height: 16px; }
.p-btn.download::after { display: inline-block; content: url('/ui-imgs/download.svg'); float: right; margin: 1px 0 -10px 10px; }
.p-btn.download.sm::after { margin: -1px 0 -10px 8px; }

.p-btn.pagination { width: 36px; height: 36px; text-align: center; padding: 0; padding-top: 7px; background: #FFF; border: 1px solid var(--border-color); }
.p-btn.pagination[disabled]::after { opacity: 0.5; }
.p-btn.frst-page::after { display: inline-block; content: url('/ui-imgs/chevrons.svg'); transform-origin: 50% 50%; transform: rotate(180deg); }
.p-btn.prev-page::after { display: inline-block; content: url('/ui-imgs/chevron.svg'); transform-origin: 50% 50%; transform: rotate(180deg); }
.p-btn.next-page::after { display: inline-block; content: url('/ui-imgs/chevron.svg'); }
.p-btn.last-page::after { display: inline-block; content: url('/ui-imgs/chevrons.svg'); }
.pagination-num .p-select/* this class can't be named pagination else the value disappears for no reason :O */ { height: 36px; font-size: 16px; font-weight: 600; padding: 5px 30px 5px 12px; width: 70px; background-size: 12px; background-position: calc(100% - 9px) 14px; }


/* label icons */
.p-label-icon {}
	.p-label-icon::before { width: 28px; height: 20px; background: no-repeat 50% 50%; float: left; content: ""; display: grid; text-align: center; align-content: center; }
.p-label-icon.draft { color: #717680; }
	.p-label-icon.draft::before { background-image: url('/ui-imgs/draft.svg'); }
.p-label-icon.scheduled { color: var(--primary-color); }
	.p-label-icon.scheduled::before { background-image: url('/ui-imgs/clock.svg'); filter: var(--primary-color-alt-filter); }
.p-label-icon.sent { color: #559799; }
	.p-label-icon.sent::before { background-image: url('/ui-imgs/sent.svg'); }
.p-label-icon.copy {}
	.p-label-icon.copy::before { background-image: url('/ui-imgs/copy.svg'); }
.p-label-icon.edit {}
	.p-label-icon.edit::before { background-image: url('/ui-imgs/edit.svg'); }
.p-label-icon.delete {}
	.p-label-icon.delete::before { background-image: url('/ui-imgs/delete.svg'); }
.p-label-icon.chart {}
	.p-label-icon.chart::before { background-image: url('/ui-imgs/chart.svg'); }
.p-label-icon.star {}
	.p-label-icon.star::before { font: normal normal normal 14px/1 FontAwesome; content: "\f005"; }
/* timetext icons */
.p-label-icon.timetext-onetime::before { font: normal normal normal 14px/1 FontAwesome; content: "\f27b"; transform: scale(-1, 1); }
.p-label-icon.timetext-forms::before { font: normal normal normal 14px/1 FontAwesome; content: "\f0f6"; }
.p-label-icon.timetext-reminders::before { font: normal normal normal 14px/1 FontAwesome; content: "\f252"; }
.p-label-icon.timetext-series::before { font: normal normal normal 14px/1 FontAwesome; content: "\f0c9"; transform: rotate(90deg); }
/* profile nav sub menu */
.p-label-icon.profile-settings::before { background-image: url('/ui-imgs/nav-icons/settings.svg'); filter: var(--default-text-color); }
.p-label-icon.profile-groups::before { background-image: url('/ui-imgs/nav-icons/groups.svg'); filter: var(--default-text-color); }
.p-label-icon.profile-sms-templates::before { background-image: url('/ui-imgs/nav-icons/sms-templates.svg'); filter: var(--default-text-color); }
.p-label-icon.profile-pathways::before { font: normal normal normal 14px/1 FontAwesome; content: "\f126"; transform: rotate(90deg); font-size: 1.2em; }
.p-label-icon.profile-surveys::before { background-image: url('/ui-imgs/nav-icons/surveys.svg'); filter: var(--default-text-color); }
.p-label-icon.profile-tags::before { background-image: url('/ui-imgs/nav-icons/tags.svg'); filter: var(--default-text-color); }
.p-label-icon.profile-keywords::before { background-image: url('/ui-imgs/nav-icons/keywords.svg'); filter: var(--default-text-color); }
.p-label-icon.profile-links::before { background-image: url('/ui-imgs/nav-icons/links.svg'); filter: var(--default-text-color); }
.p-label-icon.profile-events::before { background-image: url('/ui-imgs/nav-icons/events.svg'); filter: var(--default-text-color); }
.p-label-icon.profile-opt-in-pages::before { background-image: url('/ui-imgs/nav-icons/opt-in-pages.svg'); filter: var(--default-text-color); }
.p-label-icon.profile-automation::before { background-image: url('/ui-imgs/nav-icons/automation.svg'); filter: var(--default-text-color); }
.p-label-icon.profile-email-templates::before { background-image: url('/ui-imgs/nav-icons/email-templates.svg'); filter: var(--default-text-color); }
.p-label-icon.profile-engagements::before { font: normal normal normal 14px/1 FontAwesome; content: "\f256"; }
.p-label-icon.profile-apis::before { font: normal normal normal 14px/1 FontAwesome; content: "\f121"; }
.p-label-icon.profile-account::before { background-image: url('/ui-imgs/nav-icons/account.svg'); filter: var(--default-text-color); }
.p-label-icon.profile-profile::before { background-image: url('/ui-imgs/nav-icons/profile.svg'); filter: var(--default-text-color); }
.p-label-icon.profile-logout::before { background-image: url('/ui-imgs/nav-icons/logout.svg'); filter: var(--default-text-color); }


/* layout helpers */
.p-auto-fit-250 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 20px; }
.p-two-cols { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; }
.p-three-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; }
.p-four-cols { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 20px; }
.p-five-cols { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 20px; }
.p-six-cols { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-gap: 20px; }
.p-field-with-btn { display: grid; grid-template-columns: 3fr 1fr; grid-gap: 8px; }


/* site layout */
.p-login-sign-up-header { padding: 24px 80px; background: #FAFAFA; }
.p-login-content { position: relative; margin: 100px auto 50px; width: 630px; text-align: center; }
	.p-login-back-positioner { position: absolute; left: 0px; top: 0px; bottom: 0px; display: grid; align-content: center; }
.p-login-content-box { padding: 40px 110px; background: #FAFAFA; text-align: left; border-radius: 16px; margin: 32px 0; }
.p-login-bottom-links { text-align: left; font-size: 16px; }
	.p-login-bottom-links .seperator { margin: 0 16px; }
	.p-login-bottom-links .seperator::after { content: "|"; }

.p-site-layout { padding: 20px; grid-column-gap: 20px; width: 100%; min-height: 100vh; background-color: #FAFAFA; }
	.p-nav { display: none; z-index: 1200; position: fixed; left: 0px; top: 0px; bottom: 0px; background-color: var(--primary-color); border-radius: 16px; padding: 20px; margin: 20px; box-sizing: border-box; width: 300px; text-align: left; grid-template-rows: auto 1fr auto; user-select: none; }
	.p-nav.loaded { display: grid; transition: all var(--transition-speed) ease-in-out; }
		.p-nav-items { overflow: auto; overflow-x: auto; scrollbar-width: none; }
			.p-nav-item { color: #FFF !important; display: block; padding: 12px; border-radius: 8px; display: grid; grid-template-columns: 20px 1fr; grid-column-gap: 8px; align-items: center; font-size: 16px; font-weight: 600 !important; margin-bottom: 8px; transition: background-color 0.5s ease; text-decoration: none !important; cursor: pointer; position: relative; }
			.p-nav-item:last-child { margin-bottom: 0; }
			.p-nav-item:hover { background-color: var(--primary-color-alt); }
			.p-nav-item.menu-link::before { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; content: ""; background: url('/ui-imgs/nav-icons/chevron-down.svg') no-repeat calc(100% - 12px) 50%; filter: brightness(0) invert(100%); }
				.p-nav-profile { display: grid; grid-template-columns: auto 1fr 20px; grid-column-gap: 12px; align-items: center; }
					.p-nav-profile span:first-child { width: 40px; height: 40px; border-radius: 20px; background-color: #E7E7E7; text-align: center; display: grid; align-items: center; color: var(--primary-color); font-size: 16px; font-weight: 500; }
					.p-nav-profile span:nth-child(2) { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: #FAFAFA; font-size: 14px; font-weight: 400; }
				.p-nav-item span::first-child { text-align: center; }
				.nav-item-count-badge { position: absolute; background: #900; color: #FFF !important; font-size: 14px; font-weight: bold; width: 20px; height: 20px; border-radius: 10px; text-align: center; font-family: sans-serif; top: 3px; left: 3px; line-height: 20px; }
				.p-nav-icon { filter: brightness(0) invert(100%); width: 20px; height: 20px; display: grid; align-items: center; text-align: center; }
				.p-nav-icon.calendar { content: url('/ui-imgs/nav-icons/calendar.svg'); }
				.p-nav-icon.chat { content: url('/ui-imgs/nav-icons/chat.svg'); }
				.p-nav-icon.contacts { content: url('/ui-imgs/nav-icons/contacts.svg'); }
				.p-nav-icon.dashboard { content: url('/ui-imgs/nav-icons/dashboard.svg'); }
				.p-nav-icon.info { content: url('/ui-imgs/nav-icons/info.svg'); }
				.p-nav-icon.log { content: url('/ui-imgs/nav-icons/log.svg'); }
				.p-nav-icon.mail { content: url('/ui-imgs/nav-icons/mail.svg'); }
				.p-nav-icon.notifications { content: url('/ui-imgs/nav-icons/notifications.svg'); }
				.p-nav-icon.reports { content: url('/ui-imgs/nav-icons/reports.svg'); }
				.p-nav-icon.users { content: url('/ui-imgs/nav-icons/users.svg'); }
				.p-nav-icon .fa { font-size: 18px; }
		.p-nav-spacer { margin: 16px 0; height: 1px; background-color: #E7E7E7; width: 100%; }
	.p-nav.collapsed { width: 104px; text-align: center; }
		.p-nav.collapsed .p-nav-item { display: inline-block; line-height: 0; }
		.p-nav.collapsed .p-nav-item > span:nth-child(2) { display: none; }
		.p-nav.collapsed .p-nav-item.menu-link::before { display: none; }
		.p-nav.collapsed .p-nav-profile { display: inline-block; }
		.p-nav.collapsed .p-nav-profile > span:nth-child(2) { display: none; }
	.p-nav.light { background-color: var(--primary-color-light); }
		.p-nav.light .p-nav-item { color: var(--default-text-color) !important; }
		.p-nav.light .p-nav-icon { filter: none; }
		.p-nav.light .p-nav-profile > span:first-child { color: #FFF; background-color: var(--primary-color); }
		.p-nav.light .p-nav-profile > span:nth-child(2) { color: var(--default-text-color); }
		.p-nav.light .p-nav-item.menu-link::before { filter: none; }
		.p-nav.light .p-nav-spacer { background-color: #454545; }
		.p-nav.light .p-nav-item:hover { background-color: rgba(0, 0, 0, 0.25); }

	.p-content { display: none; margin-left: 320px; min-height: calc(100% - 40px); grid-template-rows: auto 1fr; }
	.p-content.collapsed { margin-left: 124px; }
	.p-content.loaded { display: grid; transition: margin var(--transition-speed) ease-in-out; }

		.p-after-breadcrumb-bar-spacer { clear: both; height: 66px; }

		.p-page-content { position: relative; }

.p-breadcrumb-bar { z-index: 1000; position: fixed; padding: 28px 20px 20px 20px; margin: -20px; box-sizing: border-box; width: 100%; background-color: #FAFAFA; }
	.p-breadcrumb-bar .p-nav-mode { float: left; cursor: pointer; margin-top: 4px; }
	.p-breadcrumb-bar .p-breadcrumb-bar-spacer { float: left; width: 1px; height: 32px; margin: 0 16px; background: var(--border-color); }
	.p-breadcrumb-bar .p-breadcrumbs { float: left; }
		.p-breadcrumb-bar .p-breadcrumbs > * { display: inline-block; color: #717680 !important; text-decoration: none !important; font-size: 14px; font-weight: 400; padding-top: 10px; }
		.p-breadcrumb-bar .p-breadcrumbs > *:not(:last-child)::after { content: "/"; padding-left: 5px; padding-right: 5px; }
		.p-breadcrumb-bar .p-breadcrumbs > *:last-child { color: var(--default-text-color) !important; font-size: 24px; font-weight: 400; padding-top: 0; }

.p-top-right-btn { z-index: 1001; position: fixed; right: 20px; top: 20px; }


/* basic vue fade in/out transition */
.p-fade-enter-active, .p-fade-leave-active { transition: opacity var(--transition-speed) ease-in-out; }
.p-fade-enter, .p-fade-leave-to { opacity: 0; }

/* basic vue slide in/out transition */
.p-slide-in-enter-active, .p-slide-in-leave-active, .p-slide-out-enter-active, .p-slide-out-leave-active { transform-origin: 50% 0%; transition: transform var(--transition-speed) ease-in-out; }
.p-slide-in-enter { transform: translateX(100%); }
.p-slide-in-leave-to { transform: translateX(-100%); }
.p-slide-out-enter { transform: translateX(-100%); }
.p-slide-out-leave-to { transform: translateX(100%); }


/* process steps */
.p-process-steps { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-column-gap: 20px; margin-bottom: 20px; }
	.p-process-steps > div { display: grid; grid-template-columns: auto auto 1fr; grid-column-gap: 8px; align-items: center; text-align: center; }
		.p-process-steps > div > div:nth-child(1) { width: 28px; height: 28px; border-radius: 14px; background: #E9EAEB; font-size: 12px; font-weight: 500; display: grid; align-items: center; text-align: center; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.05); transition: background var(--transition-speed) ease-in-out; }
		.p-process-steps > div.active > div:nth-child(1) { background: var(--primary-color-light); }
		.p-process-steps > div.completed > div:nth-child(1) { background: var(--primary-color); }
			.p-process-steps > div.completed > div img { margin: 0 auto; }
		.p-process-steps > div > div:nth-child(2) { font-size: 16px; font-weight: 500; }
		.p-process-steps > div > div:nth-child(3) { width: 100%; height: 1px; background: var(--border-color); }

.p-step-containers-positioner { position: relative; width: 100%; }
.p-step-containers-positioner:has(.p-slide-in-enter-active, .p-slide-in-leave-active, .p-slide-out-enter-active, .p-slide-out-leave-active) { overflow-x: hidden; } /* overflow hidden only while sliding animation, else it messes with absolute positioned stuff like vue-run select boxes and such */
	.p-step-container { background: #FFF; border-radius: 16px; padding: 20px; }
		.p-step-container .gray-back { background: #F5F5F5; border-radius: 16px; padding: 20px; }

	.p-steps-bottom-actions { border-top: 1px solid var(--border-color); margin: 20px -20px 0; padding: 20px 20px 0; }
		.p-steps-bottom-actions > * { float: right; margin-left: 16px; }
		.p-steps-bottom-actions::after { display: block; content: ""; clear: both; }


/* campaign criteria */
.p-campaign-criteria { background: #FAFAFA; border-radius: 8px; padding: 16px; display: grid; grid-template-columns: 1fr; grid-row-gap: 12px; }
	.p-campaign-criteria-criterion { display: grid; grid-template-columns: 1fr auto; grid-column-gap: 12px; }
		.p-campaign-criteria-criterion-options { display: grid; grid-template-columns: 1fr 2fr; grid-column-gap: 12px; margin-top: 12px; }

.p-campaign-criteria-operations { margin-top: 16px; }
	.p-campaign-criteria-operations > *:not(:first-child) { float: right; margin-left: 16px; }

.p-campaign-criteria-and { margin-top: 12px; display: grid; grid-template-columns: auto; grid-template-rows: 8px auto 8px; grid-row-gap: 0px; align-items: center; align-content: center; width: 31px; }
	.p-campaign-criteria-and::before, .p-campaign-criteria-and::after { content: ""; height: 100%; width: 1px; background: var(--primary-color-light); margin: 0 auto; }
	.p-campaign-criteria-and > span { color: var(--primary-color); font-size: 14px; font-weight: 600; }


/* email preview button */
.p-email-template-preview {}
	.p-email-template-preview > div:nth-child(1) { width: 100%; height: 70px; padding-top: 5px; box-sizing: border-box; }
		.p-email-template-preview > div:nth-child(1) > div { width: 50px; height: 50px; background: no-repeat 50% 50%; background-size: contain; margin: 0 auto; }
	.p-email-template-preview > div:nth-child(2) { width: 100%; height: 60px; position: relative; }
		.p-email-template-preview > div:nth-child(2) > div { position: absolute; left: 0px; top: -10px; right: 0px; bottom: 0px; }
			.p-email-template-preview > div:nth-child(2) > div > div { margin: 0 auto; width: 70%; max-width: 180px; height: 50px; border: 1px solid #000; padding: 5px; border-radius: 5px; }
				.p-email-template-preview > div:nth-child(2) > div > div > div { width: 100%; height: 5px; }
				.p-email-template-preview > div:nth-child(2) > div > div > div:not(:first-child) { margin-top: 5px; }


/* modals */
.p-modal-outer { z-index: 99999; position: fixed; overflow: auto; left: 0px; top: 0px; right: 0px; bottom: 0px; display: grid; align-items: center; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px) grayscale(90%); }
	.p-modal { position: relative; background: #FFF; min-width: 500px; max-width: 80%; margin: 100px auto; border-radius: 8px; padding: 24px; box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -4px rgba(0, 0, 0, 0.10); text-align: left; }
		.p-modal-x-close { position: absolute; right: 0px; top: 0px; width: 48px; height: 48px; background: 50% 50% url('/ui-imgs/x.png') no-repeat; cursor: pointer; }
		.p-modal-title { font-size: 18px; font-weight: 600; }
		.p-modal-body { font-size: 14px; font-weight: 400; color: #717680; line-height: 20px; margin-top: 6px; }
		.p-modal-btns { clear: both; text-align: right; margin-top: 20px; }


/* alerts */
.p-alert-outer { z-index: 999999; position: fixed; overflow: auto; left: 0px; top: 0px; right: 0px; bottom: 0px; display: grid; align-items: center; background: rgba(0, 0, 0, 0.1); backdrop-filter: blur(4px) grayscale(60%); }
	.p-alert { position: relative; background: #FFF; width: 500px; max-width: 80%; margin: 100px auto; border-radius: 8px; padding: 16px; padding-left: 40px; box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -4px rgba(0, 0, 0, 0.10); border: 2px solid #BFDBFE; background: #EFF6FF url('/ui-imgs/alert-info.svg') no-repeat 16px 50%; }
	.p-alert.success { border-color: #CAF5E5; background-color: #F1FDF7; background-image: url('/ui-imgs/alert-success.svg'); }
	.p-alert.warning { border-color: #FED7AA; background-color: #FFF7ED; background-image: url('/ui-imgs/alert-warning.svg'); }
	.p-alert.error { border-color: #F87171; background-color: #FEF2F2; background-image: url('/ui-imgs/alert-error.svg'); }
		.p-alert-body { font-size: 13px; font-weight: 400; line-height: 20px; }


/* mobile preview */
.p-mobile-preview { position: relative; width: 300px; height: 609px; background: url('/ui-imgs/mobile-preview-back.png') no-repeat 50% 50%; background-size: contain; margin: 0 auto; }
	.p-mobile-preview .p-mobile-preview-items { position: absolute; left: 30px; top: 45px; right: 30px; bottom: 35px; overflow: auto; overflow-x: hidden; display: grid; align-items: start; align-content: start; /*align-items: end; align-content: end;*/ }
		.p-mobile-preview .p-mobile-preview-items > * { display: inline-block; float: left; clear: both; max-width: 220px; border-radius: 10px; border-bottom-left-radius: 0px; margin-top: 10px; }
		.p-mobile-preview .p-mobile-preview-items .file_preview { padding: 20px; border: 1px solid #E9E9E9; font-size: 40px; text-align: center; }
		.p-mobile-preview .p-mobile-preview-items #sms_preview, .p-mobile-preview .p-mobile-preview-items #vcf_preview { width: fit-content; background: #F5F5F5; padding: 10px 12px; color: #151515; font-size: 14px; text-align: left; white-space: pre-wrap; overflow-wrap: break-word; font-size: 16px; font-weight: 400; line-height: 24px; }

#vcf_preview { padding: 12px; display: grid; grid-template-columns: 50px 1fr; grid-column-gap: 10px; }
	#vcf_preview .vcf_img { width: 50px; height: 50px; border-radius: 25px; display: grid; align-content: center; text-align: center; background: #7B4C8D; overflow: hidden; }
		#vcf_preview .vcf_img img { max-width: 50px; max-height: 50px; }


/* progress bar */
.p-progress-bar { display: grid; grid-template-columns: 1fr 40px; grid-column-gap: 12px; align-items: center; }
	.p-progress-bar > div:first-child { position: relative; overflow: hidden; width: 100%; height: 8px; border-radius: 4px; background: #F5F5F5; }
		.p-progress-bar > div:first-child > div { position: absolute; left: 0px; top: 0px; bottom: 0px; right: 100%; background: var(--primary-color); border-radius: 4px; transition: right 0.1s linear; }
	.p-progress-bar > div:nth-child(2) { font-size: 14px; font-weight: 500; text-align: right; }


/* file attachment management boxes (mainly for MMS attachments) */
.p-file-attachment-management-boxes.show-cropped { display: grid; grid-template-columns: repeat(auto-fill, 56px); grid-gap: 16px; }
	.p-file-attachment-management-boxes > .p-file-attachment-preview-cropped { position: relative; width: 56px; height: 56px; background: #E9EAEB no-repeat 50% 50%; border-radius: 4px; }
		.p-file-attachment-management-boxes > div > div { display: none; position: absolute; top: -9px; right: -9px; width: 24px; height: 24px; cursor: pointer; background: url('/ui-imgs/corner-x-btn.svg') no-repeat 50% 50%; }
		.p-file-attachment-management-boxes > div:hover > div { display: block; }
	.p-file-attachment-management-boxes .p-file-attachment-preview-full-width { position: relative; display: inline-block; }
		.p-file-attachment-management-boxes .p-file-attachment-preview-full-width img { height: 56px; border-radius: 4px; }


/* dropdown options (also used for searchable-multi-select-dropdown) */
.p-searchable-multi-select-dropdown-num-selections { position: absolute; right: 0px; bottom: 0px; top: 0px; padding: 0px 20px; background: #DFDFDF; font-size: 16px; font-weight: 600; border-radius: 8px; display: grid; align-items: center; }
.p-dropdown-options { z-index: 9999; position: absolute; left: 0px; top: 100%; min-width: 100%; border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10); overflow-x: hidden; overflow-y: auto; max-height: 310px; user-select: none; }
	.p-dropdown-options > div { background: #FFF; transition: background var(--transition-speed) ease-in-out; padding: 10px 14px; font-size: 16px; font-family: 'Pidj-Inter', sans-serif; cursor: pointer; }
	.p-dropdown-options > div.disabled { color: #999; }
	.p-dropdown-options > div.header { font-weight: 600; }
	.p-dropdown-options > div:not(:first-child).header { padding-top: 30px; }
	.p-dropdown-options > div:not(.disabled):not(.header):hover { background: #F5F5F5; }
		.p-dropdown-options > div > img { margin: -2px 6px 0 0; }/* checkbox in searchable-multi-select-dropdown */


/* switch tabs box */
.p-switch-tabs-box { background: #E9EAEB; padding: 5px; display: inline-block; border-radius: 4px; font-weight: 500; }
	.p-switch-tabs-box > div { display: inline-block; transition: background var(--transition-speed) ease-in-out; padding: 6px 12px; cursor: pointer; border-radius: 4px; text-align: center; }
	.p-switch-tabs-box > div.active { background: #FFF; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05); }
	.p-switch-tabs-box > div:not(.active) { color: #80858E; }


/* data table */
.p-data-table { border: 1px solid var(--border-color); border-radius: 8px; margin: 16px 0; background: #FFF; }
	.p-data-table table { width: 100%; box-sizing: border-box; }
		.p-data-table tr.highlighted { background-color: #EFFFFF; }
		.p-data-table tr.no-results-row td { padding: 80px; text-align: center; font-weight: 600; font-size: 18px; }
			.p-data-table tr.no-results-row td img { margin-bottom: 20px; }
			.p-no-results-note { margin: 20px auto; width: 400px; font-size: 16px; font-weight: 400; }
		.p-data-table tr:not(:last-child) { border-bottom: 1px solid var(--border-color); }
		.p-data-table tr.muted { background: #F5F5F5; }
			.p-data-table th, .p-data-table td { padding: 16px; }
			.p-data-table th { color: #A4A7AE; font-weight: 500; }
			.p-data-table th.sortable { cursor: pointer; }
			.p-data-table th.sortable.sorting { color: var(--default-text-color); font-weight: 600; }
			.p-data-table th span { display: block; float: left; }
			.p-data-table th.sortable::after { content: url('/ui-imgs/arrow-up-down.svg'); display: block; float: left; margin: -1px 0 -2px 10px; padding-top: 2px; }
			.p-data-table td {}
			.p-data-table td.operations-col { text-align: right; padding: 12px; }
/* these fix issues with background color going outside of border-radius without using overflow hidden that jacks up popup menus and such */
.p-data-table tr:last-child td:first-child { border-bottom-left-radius: 8px; }
.p-data-table tr:last-child td:last-child { border-bottom-right-radius: 8px; }


/* data table pagination */
.p-data-table-pagination {}
	.p-data-table-pagination > * { display: block; float: right; margin-left: 8px; }
	.p-data-table-pagination > span { padding-top: 8px; padding-right: 4px; margin-left: 22px; }
	/* also see .p-btn.pagination styles above */


/* operations menu (ellipsis button with options when clicked) */
.p-operations-menu { z-index: 9999; position: absolute; right: 0px; top: 100%; border: 1px solid var(--border-color); border-radius: 6px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10); overflow: hidden; min-width: 180px; line-height: normal; overflow-y: auto; scrollbar-width: none; }
.p-operations-menu.up { top: auto; bottom: 100%; }
.p-operations-menu.left { right: auto; left: 0px; }
	.p-operations-menu a { font-weight: normal !important; }
	.operations-break { display: block; clear: both; height: 1px; width: 100%; background-color: #F3F3F3; }
	.p-operations-menu > *:not(.operations-break) { display: block; padding: 10px 15px; font-size: 14px; font-weight: 400; font-family: 'Pidj-Inter', sans-serif; text-align: left; color: var(--default-text-color) !important; text-decoration: none !important; cursor: pointer; white-space: nowrap; background: #FFF; transition: background var(--transition-speed) ease-in-out; }
	.p-operations-menu > *:not(.operations-break):hover { background: #F5F5F5; }
		.p-operations-menu .p-label-icon { margin-left: -10px; }


/* data boxes */
.p-data-box { border-radius: 8px; border: 1px solid #D5D7DA; padding: 16px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); font-size: 20px; font-weight: 700; }
	.p-data-box-title { font-size: 18px; font-weight: 600; margin-bottom: 16px; }
	.p-data-box-title:has(.p-data-box-title-icon) { font-size: 14px; font-weight: 500; display: grid; grid-template-columns: 32px 1fr; grid-column-gap: 8px; align-items: center; }
		.p-data-box-title-icon { float: left; width: 32px; height: 32px; background: var(--primary-color-light); border-radius: 16px; text-align: center; overflow: hidden; }
		.p-data-box-title-icon::after, .p-data-box-title-icon .fa { filter: var(--primary-color-filter); display: block; }
		.p-data-box-title-icon .fa { padding-top: 7px; font-size: 16px; }
		.p-data-box-title-icon.mail::after { content: url('/ui-imgs/mail.svg'); padding-top: 7px; }
		.p-data-box-title-icon.cancel::after { content: url('/ui-imgs/cancel.svg'); padding-top: 8px; }
		.p-data-box-title-icon.concern::after { content: url('/ui-imgs/circle-alert.svg'); padding: 8px 0 0 1px; }
		.p-data-box-title-icon.eye::after { content: url('/ui-imgs/eye.svg'); padding-top: 8px; }
		.p-data-box-title-icon.click::after { content: url('/ui-imgs/click.svg'); padding-top: 8px; }
		.p-data-box-title-icon.send::after { content: url('/ui-imgs/send.svg'); padding-top: 8px; }


/* color input */
.p-color-input { display: grid; grid-template-columns: 1fr 44.84px; grid-column-gap: 8px; }
	.p-color-input > div { position: relative; }
		.p-color-input .p-color-preview { position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px; background: #FFF; border: 1px solid var(--border-color); border-radius: 8px; box-sizing: border-box; cursor: pointer; }
			.p-color-input .p-color-preview div { position: absolute; left: 6px; top: 6px; right: 6px; bottom: 6px; background-color: #000; border-radius: 4.8px; }
		.p-color-input .p-color-popup-menu { z-index: 9999; position: absolute; top: 50%; right: 50%; width: 344px; padding: 16px; border-radius: 8px; background: #FFF; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10); }
			.p-color-popup-menu .p-switch-tabs-box { margin-bottom: 16px; }
			.p-color-popup-menu .p-swatches-grid { display: grid; grid-template-columns: repeat(auto-fill, 32px); grid-column-gap: 8px; grid-row-gap: 8px; }
				.p-swatches-grid div { width: 32px; height: 32px; background-color: #000; border-radius: 4px; box-sizing: border-box; cursor: pointer; }
			.p-custom-picker-preview-and-eyedrop { display: grid; grid-template-columns: 1fr 32px; grid-column-gap: 12px; margin-bottom: 12px; }
				.p-custom-picker-preview-and-eyedrop > div:first-child { border-radius: 4px; background-color: #000; height: 32px; }
				.p-custom-picker-preview-and-eyedrop > div:last-child { border-radius: 4px; cursor: pointer; border: 1px solid var(--border-color); display: grid; align-content: center; text-align: center; }
			.p-color-popup-menu hr { margin: 16px -16px; width: calc(100% + 32px); }