/* 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%);

	--primary-color-100: color-mix(in srgb, var(--primary-color), white 80%);
	--primary-color-200: color-mix(in srgb, var(--primary-color), white 60%);
	--primary-color-500: color-mix(in srgb, var(--primary-color), white 96%);
	--primary-color-600: color-mix(in srgb, var(--primary-color), black 20%);
	--primary-color-700: color-mix(in srgb, var(--primary-color), black 40%);

	--transition-speed: 0.150s;
	--p-site-sidebar-track-width: 300px;
	--p-site-sidebar-collapsed-track-width: 112px;
	--p-nav-width: 280px;
	--p-nav-collapsed-width: 92px;
	--p-nav-padding: 20px;
	--p-nav-border-radius: 16px;
	--p-nav-item-padding: 10px;
	--p-nav-item-font-size: 14px;
	--p-nav-item-margin-bottom: 8px;
	--p-nav-logo-height: 44px;
	--p-nav-logo-max-width: 240px;
	--p-nav-collapsed-logo-height: 44px;
	--p-nav-collapsed-logo-max-width: 48px;
	--border-color: #D5D7DA;
	--default-text-color: #181D27;
	--default-text-color-filter: invert(6%) sepia(12%) saturate(2082%) hue-rotate(181deg) brightness(95%) contrast(89%);
	--p-control-font-size: 14px;
	--p-control-padding-y: 9px;
	--p-control-padding-x: 12px;
	--p-control-padding: var(--p-control-padding-y) var(--p-control-padding-x);
	--p-control-btn-padding-x: 16px;
	--p-control-btn-padding: var(--p-control-padding-y) var(--p-control-btn-padding-x);
	--p-control-sm-font-size: 14px;
	--p-control-sm-padding-y: 7px;
	--p-control-sm-padding-x: 12px;
	--p-control-sm-padding: var(--p-control-sm-padding-y) var(--p-control-sm-padding-x);
	--p-space-shell: 18px;
	--p-space-card-padding: 14px;
	--p-space-gap-lg: 18px;
	--p-space-gap-md: 14px;
}

/* 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: var(--p-site-sidebar-track-width); top: 0px; }
.full-page-under-control.collapsed, .full-page-over-control.collapsed { left: var(--p-site-sidebar-collapsed-track-width); }
.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: var(--p-control-padding); border: 1px solid var(--border-color); font-size: var(--p-control-font-size); 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: var(--p-control-font-size); 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-password-block:not(:last-child) { margin-bottom: 20px; }
	.p-password-block > div:first-child { margin-bottom: 4px; }
	.p-password-block .p-password-block-field { position: relative; }
	.p-password-block .p-password-block-field input { padding-right: 44px; }
	.p-password-block .p-password-block-toggle {
		position: absolute;
		right: 8px;
		top: 50%;
		transform: translateY(-50%);
		margin: 0;
		padding: 6px;
		border: none;
		background: transparent;
		color: #717680;
		cursor: pointer;
		line-height: 1;
		border-radius: 6px;
	}
	.p-password-block .p-password-block-toggle:hover { color: #414651; }
	.p-password-block .p-password-block-toggle:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

.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 {
		display: flex;
		gap: 7px;
		cursor: pointer;
	}
	.p-toggle > span.disabled { cursor: not-allowed; }
		.p-toggle > span > .p-toggle-slider { 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 > .p-toggle-slider { background-color: var(--primary-color); }
		.p-toggle > span.disabled > .p-toggle-slider { background-color: #C66 !important; }
			.p-toggle > span > .p-toggle-slider > 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 > .p-toggle-slider > span { left: 18px; }
		.p-toggle > span > .p-toggle-label { 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 {
	display: flex;
    gap: 7px;
    align-items: center;
	font-weight: 500;
	padding-top: 2px;
	cursor: pointer;
	margin-bottom: 16px;
	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: var(--p-control-btn-padding); font-size: var(--p-control-font-size); 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: var(--p-control-sm-padding); font-size: var(--p-control-sm-font-size); }
.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 { content: url('/ui-imgs/continue-arrow.png'); margin: 2px 0 -2px 10px; float: right; }
.p-btn.back::after { 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 { 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 { 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: var(--p-control-font-size); font-weight: 600; padding: 4px 26px 4px 10px; width: 70px; background-size: 12px; background-position: calc(100% - 9px) 14px; }


/* label icons */
.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::before { background-image: url('/ui-imgs/copy.svg'); }
.p-label-icon.edit::before { background-image: url('/ui-imgs/edit.svg'); }
.p-label-icon.delete::before { background-image: url('/ui-imgs/delete.svg'); }
.p-label-icon.chart::before { background-image: url('/ui-imgs/chart.svg'); }
.p-label-icon.eye::before { background-image: url('/ui-imgs/eye-black.svg'); }
.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-users::before { background-image: url('/ui-imgs/nav-icons/users.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: "|"; }

/* Two columns: reserved sidebar track + main. Wide content scrolls inside .p-content only, never under .p-nav. */
.p-site-layout {
	display: grid;
	grid-template-columns: var(--p-site-sidebar-track-width) 1fr;
	grid-column-gap: 0;
	align-items: start;
	box-sizing: border-box;
	padding: 20px;
	width: 100%;
	min-height: 100vh;
	background-color: #FAFAFA;
}
.p-site-layout:has(.p-nav.collapsed) {
	grid-template-columns: var(--p-site-sidebar-collapsed-track-width) 1fr;
}
	.p-nav {
		display: none;
		z-index: 1200;
		position: sticky;
		top: 20px;
		align-self: start;
		height: calc(100vh - 40px);
		background-color: var(--primary-color);
		border-radius: var(--p-nav-border-radius);
		padding: var(--p-nav-padding);
		margin: 0;
		box-sizing: border-box;
		width: var(--p-nav-width);
		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; }
		/* Flex column so .p-nav-items gets a bounded height and scrolls inside the grid 1fr row instead of growing past the wrap */
		.p-nav-items-wrap {
			position: relative;
			min-height: 0;
			overflow: hidden;
			display: flex;
			flex-direction: column;
		}
		.p-nav-items-wrap::before,
		.p-nav-items-wrap::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			height: 32px;
			pointer-events: none;
			z-index: 2;
			opacity: 0;
			transition: opacity 0.2s ease;
		}
		.p-nav-items-wrap::before {
			top: 0;
			background: linear-gradient(to bottom, var(--primary-color), transparent);
		}
		.p-nav-items-wrap::after {
			bottom: 0;
			background: linear-gradient(to top, var(--primary-color), transparent);
		}
		.p-nav-items-wrap.p-nav-items-wrap--more-top::before { opacity: 1; }
		.p-nav-items-wrap.p-nav-items-wrap--more-bottom::after { opacity: 1; }
		.p-nav-scroll-caret {
			position: absolute;
			left: 50%;
			width: 14px;
			height: 14px;
			margin-left: -7px;
			z-index: 3;
			pointer-events: none;
			opacity: 0;
			transform: translate(-50%, 0);
			transition: opacity 0.2s ease, transform 0.2s ease;
		}
		.p-nav-scroll-caret::before {
			content: "";
			display: block;
			width: 10px;
			height: 10px;
			margin: 2px;
			border-right: 2px solid #FFF;
			border-bottom: 2px solid #FFF;
			box-sizing: border-box;
		}
		.p-nav-scroll-caret--top {
			top: -1px;
		}
		.p-nav-scroll-caret--top::before { transform: rotate(-135deg); }
		.p-nav-scroll-caret--bottom {
			bottom: -1px;
		}
		.p-nav-scroll-caret--bottom::before { transform: rotate(45deg); }
		.p-nav-items-wrap.p-nav-items-wrap--more-top .p-nav-scroll-caret--top {
			opacity: 0.5;
			transform: translate(-50%, 0);
		}
		.p-nav-items-wrap.p-nav-items-wrap--more-bottom .p-nav-scroll-caret--bottom {
			opacity: 0.5;
			transform: translate(-50%, 0);
		}
		.p-nav.light .p-nav-items-wrap::before {
			background: linear-gradient(to bottom, var(--primary-color-light), transparent);
		}
		.p-nav.light .p-nav-items-wrap::after {
			background: linear-gradient(to top, var(--primary-color-light), transparent);
		}
		.p-nav.light .p-nav-scroll-caret::before {
			border-right-color: var(--default-text-color);
			border-bottom-color: var(--default-text-color);
		}
		.p-nav-scroll-caret-transition-enter-active,
		.p-nav-scroll-caret-transition-leave-active {
			transition: opacity 0.2s ease, transform 0.2s ease;
		}
		.p-nav-scroll-caret-transition-enter,
		.p-nav-scroll-caret-transition-leave-to {
			opacity: 0 !important;
			transform: translate(-50%, 0) !important;
		}
		.p-nav-items {
			flex: 1 1 0%;
			min-height: 0;
			overflow: auto;
			overflow-x: auto;
			scrollbar-width: none;
		}
			.p-nav-item { color: #FFF !important; display: block; padding: var(--p-nav-item-padding); border-radius: 8px; display: grid; grid-template-columns: 20px 1fr; grid-column-gap: 8px; align-items: center; font-size: var(--p-nav-item-font-size); font-weight: 600 !important; margin-bottom: var(--p-nav-item-margin-bottom); 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 .p-nav-profile-initials { 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 .p-nav-profile-portrait {
						width: 40px;
						height: 40px;
						border-radius: 100%;
					}
					.p-nav-profile .p-nav-profile-info { 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; }
				.nav-item-unread-count-badge { position: absolute; background: #900; width: 12px; height: 12px; border-radius: 6px; top: 11px; left: 11px; }
				.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 .fa { font-size: 18px; }
		.p-nav-spacer { margin: 16px 0; height: 1px; background-color: #E7E7E7; width: 100%; }
	.p-nav.collapsed { width: var(--p-nav-collapsed-width); 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):not(.p-operations-menu-button) {
			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 > .p-nav-profile-info { 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 > .p-nav-profile-initials { color: #FFF; background-color: var(--primary-color); }
		.p-nav.light .p-nav-profile > .p-nav-profile-info { 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;
		min-width: 0;
		overflow-x: auto;
		min-height: calc(100% - 40px);
		grid-template-rows: auto 1fr;
	}
	.p-content.loaded {
		display: grid;
	}

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

		.p-page-content { position: relative; min-width: 0; }

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

.p-top-right-btn { z-index: 1001; position: fixed; right: 20px; top: 20px; display: flex; align-items: center; gap: 12px; }


/* 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: var(--p-space-shell); }
		.p-step-container .gray-back { background: #F5F5F5; border-radius: 16px; padding: var(--p-space-shell); }

	.p-steps-bottom-actions { border-top: 1px solid var(--border-color); margin: var(--p-space-shell) calc(-1 * var(--p-space-shell)) 0; padding: var(--p-space-shell) var(--p-space-shell) 0; }
		.p-steps-bottom-actions > * { float: right; margin-left: var(--p-space-gap-md); }
		.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 > 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: var(--p-space-shell); 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-description {
			margin-top: 4px;
			color: #717680;
			font-size: 14px;
			font-weight: 400;
		}
		.p-modal-body { font-size: 14px; font-weight: 400; color: #717680; line-height: 20px; margin-top: 12px; }
		.p-modal-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: var(--p-space-gap-lg); }


.p-side-panel-outer {
	position: fixed;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	display: flex;
	justify-content: flex-end;
	align-items: stretch;
	background: rgba(24, 29, 47, 0.6);
	overflow: hidden;
	z-index: 99998;
}

.p-side-panel {
	position: relative;
	width: 420px;
	height: 100%;
	min-height: 0;
	margin: 0;
	background: #FFFFFF;
	box-shadow: -4px 0px 15px -3px rgba(0, 0, 0, 0.10), -2px 0px 6px -4px rgba(0, 0, 0, 0.10);
	overflow-y: auto;
	padding: var(--p-space-shell);
	box-sizing: border-box;
}

.p-side-panel-close {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 48px;
	height: 48px;
	background: 50% 50% url('/ui-imgs/x.png') no-repeat;
	cursor: pointer;
}

/* 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 > * { 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;
		border-radius: 4px;
	}

	.p-file-attachment-management-boxes > .p-file-attachment-preview-cropped:not(.no-background) {
		background: #E9EAEB no-repeat 50% 50%;
	}

		.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,
.p-popover-contents {
	position: absolute;
	left: 0px;
	top: 100%;
	min-width: 100%;
	max-height: 310px;
	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;
	user-select: none;
	z-index: 9999;
}

.p-dropdown-options {
	width: max-content;
	max-width: calc(100vw - 32px);
}

.p-dropdown-options.p-dropdown-options-top {
	top: auto;
	bottom: 100%;
}

.p-dropdown-options > div {
	padding: 10px 14px;
	background: #FFF;
	transition: background var(--transition-speed) ease-in-out;
	font-size: 16px;
	cursor: pointer;
	white-space: nowrap;
}

	.p-dropdown-options > div.disabled { color: #999; }
	.p-dropdown-options > div.header { font-size: 14px; font-weight: 600; }
	.p-dropdown-options > div.separator { height: 1px; padding: 0; background-color: #E9EAEB; }
	.p-dropdown-options > div:not(:first-child).header { padding-top: 24px; }
	.p-dropdown-options > div:not(.disabled):not(.header):not(.separator):hover { background: #F5F5F5; }
		.p-dropdown-options > div > img { margin: -2px 6px 0 0; }/* checkbox in searchable-multi-select-dropdown */

.p-button-popover {
	position: relative;
}

.p-popover-contents {
	background: #FFF;
	transition: background var(--transition-speed) ease-in-out;
	padding: 10px 14px;
}

/* 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.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 { display: flow-root; }
	.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 */


.p-operations-menu-button {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	cursor: pointer;
}

/* 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; display: flex; flex-direction: column; }
.p-operations-menu.up { top: auto; bottom: 100%; }
.p-operations-menu.left { right: auto; left: 0px; }
	.p-operations-menu-scroll { flex: 1 1 0%; min-height: 0; overflow-y: auto; scrollbar-width: none; }
	.p-operations-menu-footer { flex-shrink: 0; border-top: 1px solid var(--border-color); background: #FFF; }
	.p-operations-menu a { font-weight: normal !important; }
	.operations-break { display: block; clear: both; height: 1px; width: 100%; background-color: #F3F3F3; }
	.p-operations-menu-scroll > *:not(.operations-break),
	.p-operations-menu-footer > *: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-scroll > *:not(.operations-break):hover,
	.p-operations-menu-footer > *:not(.operations-break):hover { background: #F5F5F5; }
		.p-operations-menu .p-label-icon { display: flex; align-items: center; margin-left: -10px; }


/* data boxes */
.p-data-box { border-radius: 8px; border: 1px solid #D5D7DA; padding: var(--p-space-card-padding); 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: var(--p-space-gap-md); }
	.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); }

.p-phone-number-input {
	display: flex;
	border: 1px solid var(--border-color);
	border-radius: 8px;
}

.p-phone-number-input > .p-phone-country-code {
	display: flex;
	align-items: center;
	align-self: stretch;
	font-size: 16px;
	color: #181D27;
	padding: 0 12px;
	border-right: 1px solid var(--border-color);
}

.p-phone-number-input > input[type="tel"] {
	border: none;
	outline: none;
}

.p-image-cropper-container > .p-input-footnote + .p-btn {
	margin-top: 8px;
}

.p-image-cropper-container > input[type="file"] {
	display: none;
}

.p-image-cropper-modal .croppie-container {
	height: 500px;
}

.p-image-cropper-modal .p-zoom-buttons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 50px;
}

.p-image-cropper-modal .p-input-footnote {
	margin-top: 12px;
	text-align: center;
}

.p-image-cropper-modal .p-footer-buttons {
	margin-top: 20px;
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}