/** 2019 #16b370Rope UI/UX Update **/
/** Colors branding (based on highcharts) -
Standard Blue: #0082fc
Action #16b370: #28bc50
Reset Yellow: #fbaa33;
Alert red/brown: #c33e00
background: var(--main-background-color, #f8f9fb);
Borders: #e2e3e5;
**/

body {
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale;
	background: var(--body-background, #f8f9fb) !important;
	background-size: var(--body-background-size, unset) !important;
	background-attachment: var(--body-background-attachment, unset) !important;
	color: var(--main-text-color, #404e60);
}
a, button {
	cursor: pointer;
	color: var(--main-link-color, #247cb5);
}
a:hover {
	color: var(--main-link-hover-color, #0082fc);
}
input[type=text] {
	overflow-y: hidden;
}
select, input[type=checkbox] {
	cursor: pointer;
}
textarea {
	box-sizing: border-box;
}
textarea.autoExpand {
	overflow: hidden;
	min-height: 50px;
}
input, textarea, select {
    box-sizing: border-box;
    box-shadow: none !important;
    border: 1px solid var(--input-border-color, #e2e3e5);
    background: var(--input-background-color, #fff);
    color: var(--input-text-color, #404e60);
}
select:not(.easyBuilderRightElement) {
    border: 1px solid var(--input-border-color, #e2e3e5) !important;
    background-color: var(--input-background-color, #fff) !important;
    height: 1.7em;
    border-radius: 2px;
    font-size: 14px;
    color: var(--input-text-color, #404e60);
    transition: all 0.5s ease-in-out;
    max-width: 100%;
}
select.easyBuilderRightElement {
	background-color: var(--input-background-color, #fff);
	max-width: 100%;
	height: auto;
	color: var(--input-text-color, #404e60);
}
.tallSelect, #Contact_new_form select, .dynamic-data-rule-conditional-container select, .dataTables_wrapper select {
	height: auto !important;
	padding: 6px 30px 6px 10px !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><g color="slategray"><path d="M7 10l5 5 5-5z" fill="currentcolor" stroke="currentcolor" /><path d="M0 0h24v24H0z" fill="none"/></g></svg>') calc(100% - 5px) 50% no-repeat var(--input-background-color, #fff) !important;
	max-width: none;
}
.tallSelect:hover, .ui-selectmenu-button:hover, input[type=text]:hover, textarea:hover {
	box-shadow: 0px 0px 10px 2px var(--input-box-shadow-hover-color, #c2c3c5) !important;
}
.shortSelect, .ui-datepicker-title select {
	height: auto !important;
	padding: 2px 24px 2px 10px !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><g color="slategray"><path d="M5 6l5 5 5-5z" fill="currentcolor" stroke="currentcolor" /><path d="M0 0h16v16H0z" fill="none"/></g></svg>') calc(100% - 5px) 50% no-repeat var(--input-background-color, #fff);
	max-width: none;
}
.maintitle {
    font-weight: 600 !important;
    font-size: 22px;
    padding-left: 0px !important;
    color: var(--main-text-color, #404e60);
    text-transform: capitalize;
}

.block {
	display: block;
}
.italic {
	font-style: italic;
}
.bold {
	font-weight: bold;
}
.underline {
	text-decoration: underline;
}
.strikethrough {
	text-decoration: line-through !important;
}
.semitransparent {
	opacity: 0.5;
}
.nowrap {
	white-space: nowrap;
}
.displayInline {
	display: inline;
}
.displayNone {
	display: none;
}
.clearBoth {
	clear: both;
}
.alignTop {
	vertical-align: top !important;
}
.normalText {
	color: var(--main-text-color, #404e60) !important;
}
.linkText {
	color: var(--main-link-color, #247cb5) !important;
}
.green, .greenText {
	color: var(--green-text-color, #16b370) !important;
}
.darkgreen, .darkgreenText {
	color: var(--dark-green-text-color, #0f8554) !important;
}
.darkblue, .darkblueText {
	color: var(--dark-blue-text-color, darkblue) !important;
}
.red, .redText {
	color: var(--red-text-color, #bd0008) !important;
}
.purpleText {
	color: var(--purple-text-color, #9d00ff) !important;
}
.brownText {
	color: var(--brown-text-color, #a15701) !important;
}
.yellowText, p.yellowText, .helpWidget p.yellowText {
	color: #ffa101 !important;
}
.mediumGrayText {
	color: var(--medium-gray-text-color, #bac4d0) !important;
}
.grayText {
	color: var(--gray-text-color, #6a7480) !important;
}
.grayHover:hover, tr.grayHover:hover td {
	background-color: var(--gray-hover-color, #f3f4f7) !important;
}
.darkGrayHover:hover, tr.darkGrayHover:hover td {
	background-color: var(--dark-gray-hover-color, #e6e8ec) !important;
}
.lightGrayBackground {
	background-color: var(--main-background-color, #f8f9fb) !important;
}
.darkGrayBackground {
	background-color: var(--dark-gray-background-color, #d2d3d5) !important;
}
.paddedBackground {
	padding: 20px !important;
}
.boxShadow {
	box-shadow: 0px 0px 10px var(--content-box-shadow-color, #e3eaf0) !important;
}
.center {
	text-align: center;
}
.centeredTable td {
	text-align: center;
}
.checkered {
    background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white;
    background: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white;
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white;
    background-repeat: repeat, repeat;
    background-position: 0px 0, 5px 5px;
    -webkit-transform-origin: 0 0 0;
    transform-origin: 0 0 0;
    -webkit-background-origin: padding-box, padding-box;
    background-origin: padding-box, padding-box;
    -webkit-background-clip: border-box, border-box;
    background-clip: border-box, border-box;
    -webkit-background-size: 10px 10px, 10px 10px;
    background-size: 10px 10px, 10px 10px;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
    -webkit-transform: scaleX(1) scaleY(1) scaleZ(1);
    transform: scaleX(1) scaleY(1) scaleZ(1);
}


.overflowAuto {
	overflow: auto;
}

.separator-line::after {
	content: '';
	display: inline-block;
	width: 100%;
	height: 1px;
	background: rgba(0,0,0,0.1);
}
.no-separator-line::after {
	content: none !important;
}

hr.horizontalEndFade { /* for hr tags with fading */
	border: 0;
	height: 1px;
	margin: 10px;
	background-image: -webkit-linear-gradient(left, #f8f9fb, #8c8b8b, #f8f9fb);
	background-image: -moz-linear-gradient(left, #f8f9fb, #8c8b8b, #f8f9fb);
	background-image: -ms-linear-gradient(left, #f8f9fb, #8c8b8b, #f8f9fb);
	background-image: -o-linear-gradient(left, #f8f9fb, #8c8b8b, #f8f9fb);
}

.mask-variable { /* for translation */
	vertical-align: inherit;
}

.even-row {
	background: var(--even-row-color, #e0e0e0) !important;
}
.odd-row {
	background: var(--odd-row-color, #f0f0f0) !important;
}
.even-row .newCheckboxWrapper .newCheckboxIndicatorRed, .odd-row .newCheckboxWrapper .newCheckboxIndicatorRed {
	 background: var(--body-background-color, #f8f9fb);
}

.iconEmoji {
	font-size: 20px;
	margin: 3px;
}

/* dark mode overrides for charts */
.highcharts-title, .highcharts-subtitle, .highcharts-caption, .highcharts-label text, .highcharts-axis text, .highcharts-axis-labels text  {
	color: var(--highcharts-text-color) !important;
	fill: var(--highcharts-text-color) !important;
}
.highcharts-text-outline {
	stroke-width: 0px !important;
}
.highcharts-legend-item {
	color: var(--main-text-color) !important;
}
.highcharts-no-tooltip {
	color: var(--main-text-color) !important;
}
.highcharts-tooltip, .highcharts-tooltip span {
	background: var(--main-background-color, #f8f9fb) !important;
	color: var(--main-text-color, #404e60) !important;
}


::placeholder {
	color: var(--input-placeholder-color, #98999b) !important;
	opacity: 1;
}
::-webkit-input-placeholder {
   color: var(--input-placeholder-color, #98999b) !important;
}
:-moz-placeholder { /* Firefox 18- */
   color: var(--input-placeholder-color, #98999b) !important;
}
::-moz-placeholder {  /* Firefox 19+ */
   color: var(--input-placeholder-color, #98999b) !important;
}

/* Focus style for accessibility */
.ui-button:focus, .ui-corner-all:focus {
	outline: #bac4d0 thin dotted;
}
a:focus {
	outline: #bac4d0 thin dotted;
}
.ui-tabs-tab:focus, .ui-tabs-tab a:focus {
	outline: none;
}
@media (forced-colors: active) {
  *:focus {
    outline: 0.2em solid;
	box-shadow: 0 0 0 4px #193146;
  }
}

/* dropzone is the drag drop target used in the media library and contacts import */
.dropzone {
	background: var(--content-background-color, #fff) !important;
}

/* adjust the datepicker so it's always on top */
.ui-datepicker {
	z-index: 999999 !important;
 }
#ui-datepicker-div
{
	box-shadow:
		-8px 0 16px -12px rgba(0, 0, 0, 0.55), /* left */
		 8px 0 16px -12px rgba(0, 0, 0, 0.55), /* right */
		 0 10px 18px -12px rgba(0, 0, 0, 0.55); /* bottom */
}

/* more generic styles */
.rightGrayBorder {
	border-width: 0px 1px 0px 0px;
	border-style: solid;
	-moz-border-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), #aaaaaa, #aaaaaa, rgba(0, 0, 0, 0)) 1 100%;
	-webkit-border-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(33.33333%, #aaaaaa), color-stop(66.66667%, #aaaaaa), color-stop(100%, rgba(0, 0, 0, 0))) 1 100%;
	-webkit-border-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #aaaaaa, #aaaaaa, rgba(0, 0, 0, 0)) 1 100%;
	-o-border-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), #aaaaaa, #aaaaaa, rgba(0, 0, 0, 0)) 1 100%;
	border-image: linear-gradient(top, rgba(0, 0, 0, 0), #aaaaaa, #aaaaaa, rgba(0, 0, 0, 0)) 1 100%;
}

.slidein-button {
	padding: 3px;
	margin-right: 4px;
	margin-top: 4px;
	margin-bottom: 4px;
}

.selectMenuFilter {
	text-align: center;
	padding: 5px;
	border-top: 1px solid #999;
	border-right: 1px solid #999;
	border-left: 1px solid #999;
	background-color: var(--main-text-color, #404e60);
    color: var(--content-background-color, #fff);
}
.selectMenuFilter .icon-filter {
	font-size: 20px;
	margin-right: 3px;
	display: inline-block;
	vertical-align: top;
	padding-top: 4px;
}
.selectMenuFilter input {
	height: 32px;
}
.ui-menu-item-wrapper {
	min-height: 1em;
}
.ui-selectmenu-text {
	min-height: 1.1em;
}

.fixTextBySelectMenu { /*text next to a new selectmenu */
	display: inline-block;
	vertical-align: top;
	margin-top: 6px;
}
#jsUpdateNotifier {
    padding: 10px !important;
    text-align: center !important;
    font-size: 16px !important;
    background-color: #ffa101 !important;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 999;
}

/* jsTree */
.jstree-contextmenu {
	z-index: 9999;
}

/* Alert Dialogs */
#alertDialog {
	padding: 10px 20px;
	display: none;
	background: var(--body-background-color, #fff);
}

/* 2FA popup */
#code2fa {
	font-weight: bold;
	text-align: center;
	padding: 10px;
	margin: auto;
	font-size: 16px;
}

/* Initial Load */
#sessionStartupBox {
	display: inline-block; 
	text-align: center; 
	margin: 50px auto; 
	padding: 20px; 
	border: 1px solid var(--content-border-color, #e2e4e5); 
	background-color: var(--content-background-color, #fff); 
	box-shadow: 0px 0px 10px var(--content-box-shadow-color, #e3eaf0) !important;
	width: auto;
}

/* Navigation top */
#mobile-nav {display: none;} /* visible in mobile */

.sub_nav_bar {
    box-shadow: none !important;
}
#team_nav_select, #seas_nav_select {
	border-radius: 50px !important;
}
#speechRecognitionIcon {
	float: left; 
	font-size: 20px; 
	display: inline-block; 
	vertical-align: top; 
	padding-top: 11px;
    cursor: pointer;
}
#speechRecognitionTarget, #speechRecognitionVoiceResponseTarget {
	position: absolute; 
	margin-left: -35px; 
	margin-top: -7px;
}


/* toggle tip used for guiding users through speech recognition */
.toggletip {
  position:absolute;
  margin-top: -3px;
  margin-left:10px;
  width:250px;
  padding:10px;
  border-radius:10px;
  background:#404e60;
  color: #fff;
  text-align:center;
  display:none; /* hide by default */
}
.toggletip:before {
  content: "";
  position:absolute;
  
  /* position tooltip correctly */
  margin-left:-30px;
  
  /* the arrow */
  border:10px solid #404e60;
  border-color: transparent #404e60 transparent transparent;
  
  display:block;
}


/** Icons **/
#team_nav_select i {
	margin: 0px 2px 0px 1px;
}
#team_nav_select .icon-drip {
	vertical-align: middle;
	margin: 0px;
	display: inline-block;
	color: var(--drip-color);
}
#team_nav_select .icon-ticket {
	vertical-align: middle;
	margin: 0px 2px;
	display: inline-block;
	color: var(--ticket-color);
}
#team_nav_select .icon-globe {
	vertical-align: middle;
	margin: 0px 2px;
	display: inline-block;
	color: var(--website-color);
}
#team_nav_select .fa-file-word {
	vertical-align: middle;
	margin: 0px 2px;
	display: inline-block;
	color: var(--wiki-color);
}
#team_nav_select .icon-projects {
	vertical-align: middle;
	margin: 0px 2px;
	display: inline-block;
	color: var(--projects-color);
}
#team_nav_select .fa-rss {
	color: var(--rss-color);
}
#team_nav_select .fa-users-class {
	color: var(--users-color);
}
#team_nav_select .icon-unsubscribe {
	color: var(--unsub-color);
}
#team_nav_select .fa-folder-open {
	color: var(--folder-color);
}
#team_nav_select .icon-email, #team_nav_select .fa-envelope-open-text {
	vertical-align: middle; 
	padding-right: 1px;
	color: var(--email-color);
}
#team_nav_select .icon-workflow {
	vertical-align: middle;
	margin: 2px;
	display: inline-block;
	color: var(--workflow-color);
}
#team_nav_select .icon-calendar {
	vertical-align: middle;
	margin: 0px 3px;
	display: inline-block;
	color: var(--calendar-color);
}

#team_nav_select li a:hover .icon-drip {
	color: var(--drip-hover-color) !important;
}
#team_nav_select li a:hover .icon-ticket {
	color: var(--ticket-hover-color) !important;
}
#team_nav_select li a:hover .icon-globe {
 	color: var(--website-hover-color) !important;
}
#team_nav_select li a:hover .fa-file-word {
	color: var(--wiki-hover-color) !important;
}
#team_nav_select li a:hover .icon-projects {
  	color: var(--projects-hover-color) !important;
}
#team_nav_select li a:hover .fa-rss {
  	color: var(--rss-hover-color) !important;
}
#team_nav_select li a:hover .fa-users-class {
 	color: var(--users-hover-color) !important;
}
#team_nav_select li a:hover .icon-unsubscribe {
 	color: var(--unsub-hover-color) !important;
}
#team_nav_select li a:hover .icon-workflow {
 	color: var(--workflow-hover-color) !important;
}
#team_nav_select li a:hover .icon-calendar {
 	color: var(--calendar-hover-color) !important;
}
#team_nav_select li a:hover .publicGroup {
 	color: var(--public-group-hover-color) !important;
}
#team_nav_select li a:hover .fa-user-circle {
 	color: var(--group-leader-hover-color) !important;
}
/** End Icons **/


/* colorpicker overrides */
.ui-colorpicker {
	background: #fff;
}

/* buttons */
a.ui-state-default, button.ui-state-default, input[type=submit].ui-state-default {
	background-color: var(--input-background-color, #fff) !important;
	color: var(--input-text-color, #404e60);
    border: 1px solid var(--content-border-color, #e2e3e5);
    box-shadow: none !important;
    padding: 4px 10px 5px 10px !important;
    border-radius: 50px;
}
a.ui-state-default:hover {
	background-color: #0082fc !important;
}
a.ui-state-default-hover { /* permanent hover state look */
	background-color: #0082fc !important;
    border: 1px solid var(--content-border-color, #e2e3e5);
    box-shadow: none !important;
    padding: 4px 10px 5px 10px !important;
    border-radius: 50px;
	color: #fff !important;
}
a.ui-state-green:not(.ui-dialog-buttonpane), a.ui-state-yellow:not(.ui-dialog-buttonpane), a.ui-state-red:not(.ui-dialog-buttonpane), a.ui-state-gray:not(.ui-dialog-buttonpane), a.ui-state-blue:not(.ui-dialog-buttonpane), span.ui-state-green:not(.ui-dialog-buttonpane), span.ui-state-yellow:not(.ui-dialog-buttonpane), span.ui-state-red:not(.ui-dialog-buttonpane), span.ui-state-gray:not(.ui-dialog-buttonpane), span.ui-state-blue:not(.ui-dialog-buttonpane), button.ui-state-green:not(.ui-dialog-buttonpane), button.ui-state-yellow:not(.ui-dialog-buttonpane), button.ui-state-red:not(.ui-dialog-buttonpane), button.ui-state-gray:not(.ui-dialog-buttonpane), button.ui-state-blue:not(.ui-dialog-buttonpane), input.ui-state-green:not(.ui-dialog-buttonpane), input.ui-state-yellow:not(.ui-dialog-buttonpane), input.ui-state-red:not(.ui-dialog-buttonpane), input.ui-state-gray:not(.ui-dialog-buttonpane), input.ui-state-blue:not(.ui-dialog-buttonpane) {
    padding: 4px 10px 5px 10px !important;
    border-radius: 50px;
    white-space: nowrap;
    font-size: 14px;
    cursor: pointer;
}
a.ui-state-green.big-button, a.ui-state-yellow.big-button, a.ui-state-red.big-button, button.ui-state-green.big-button, button.ui-state-yellow.big-button, button.ui-state-red.big-button {
	font-size: 16px;
}
a.ui-state-disabled:not(.ui-dialog-buttonpane), span.ui-state-disabled:not(.ui-dialog-buttonpane), button.ui-state-disabled:not(.ui-dialog-buttonpane) {
    padding: 4px 10px 5px 10px !important;
    border-radius: 50px;
    white-space: nowrap;
    font-size: 14px;
    border: 1px solid var(--content-border-color, #e2e3e5);
    cursor: default;
}
.newCheckboxIndicator, .newCheckboxIndicatorRed, .newCheckboxIndicatorGreen {
    background: #fff;
    outline: 1px solid var(--content-border-color, #e2e3e5);
}
.ui-button-text .icon-magnify, .ui-button-text .icon-add-plus, .ui-button-text .icon-add-multi, .ui-state-default .icon-magnify, .ui-state-default .icon-add-plus, .ui-state-default .icon-add-multi, .ui-state-default .icon-handshake, .ui-state-default .fa-gem, .ui-state-default .icon-handadd, .ui-state-default .icon-refresh, .ui-state-default .icon-pencil, .ui-state-default .icon-delete, .ui-state-default .icon-print, .ui-state-default .icon-globe, .ui-state-default .icon-workflow, .ui-state-default .icon-import, .ui-state-default .icon-group, .ui-state-default .icon-globe, .ui-state-default .icon-social, .ui-state-default .icon-person, .ui-state-default .icon-unsubscribe, .ui-state-default .icon-conversion-add, .ui-state-default .icon-star-plus, .ui-state-default .icon-invoice-add, .ui-state-default .icon-email, .ui-state-default .icon-file-add, .ui-state-default .icon-eye, .ui-state-default .icon-tool, .ui-state-default .icon-edit, .ui-state-default .icon-stack, .ui-state-default .icon-gear
{
	display: inline-block;
	vertical-align: middle;
	margin-top: 2px;
	margin-bottom: 0px;
	font-size: 14px;
}
.ui-state-default .icon-add-plus, .ui-state-default .icon-add-multi, .ui-state-default .icon-handadd, .ui-state-default .icon-workflow-add, .ui-state-default .icon-file-add, .ui-state-default .icon-star-plus, .ui-state-default .icon-invoice-add, .ui-state-default .icon-conversion-add
{
	color: #16b370;
	transition: all 0.3s ease;
}
.ui-state-default:hover > .icon-add-plus, .ui-state-default:hover > .icon-add-multi, .ui-state-default:hover > .icon-handadd, .ui-state-default:hover > .icon-workflow-add, .ui-state-default:hover > .icon-file-add, .ui-state-default:hover > .icon-star-plus, .ui-state-default:hover > .icon-invoice-add, .ui-state-default:hover > .icon-conversion-add
{
	color: #00e430 !important;
}
.ui-state-default .icon-delete, .ui-state-gray .icon-delete, .ui-state-default .icon-unsubscribe, .ui-state-gray .icon-unsubscribe
{
	color: var(--red-text-color, #bd0008);
	transition: all 0.3s ease;
}
.ui-state-default:hover .icon-delete, .ui-state-gray:hover .icon-delete, .ui-state-default:hover .icon-unsubscribe, .ui-state-gray:hover .icon-unsubscribe, .ui-state-default:hover .red, .ui-state-gray:hover .red
{
	color: #ffccff !important;
}
.ui-state-default:hover > .green, .ui-state-gray:hover > .green
{
	color: #00e430 !important;
	transition: all 0.3s ease;
}
.icon-eye
{
	vertical-align: middle;
}
.showProjectName .icon-projects, .editProjectName .icon-projects
{
	vertical-align: middle;
	margin-bottom: 1px;
	text-decoration: none !important;
	display: inline-block;
}


/* CSS glows */
.redGlow {
	box-shadow: 0px 0px 10px #bd0008 !important;
	-webkit-box-shadow: 0px 0px 10px #bd0008 !important;
}


/* Angled tables like on Account Settings > Shared Access and Apps > Ticketing > Ticketing Team */
.angledHeaderRow {
	white-space: nowrap;
	height: 120px;
	width: 40px;
	border-bottom: 1px solid #999;
	vertical-align: bottom;
}
.angledHeaderRow div {
	transform: translate(-2px, -15px) rotate(315deg);
}
#sharedAccessContactsTable .angledHeaderRow span {
	border-bottom: 1px solid var(--content-border-color, #e2e3e5);
	padding: 5px 0px;
	position: absolute;
	width: 150px;
	text-align: left;
	margin-left: 2px;
}
#ticketTeamTable .angledHeaderRow span {
	border-bottom: 1px solid var(--content-border-color, #e2e3e5);
	padding: 9px 0px;
	position: absolute;
	width: 150px;
	text-align: left;
	margin-left: 4px;
}


/* pagination overrides */
.paginationjs .paginationjs-pages li>a {
	padding: 0px 2px;
	font-weight: normal;
	background: var(--input-background-color, #fff);
}
.paginationjs .paginationjs-pages li.active>a {
	color: #fff !important;
    background-color: #0082fc;
    cursor: default;
}
.paginationjs .paginationjs-pages li>a:hover {
	background: #0082fc;
    color: #fff !important;
}
.paginationjs-pages li:first-child>a:hover {
	background: #0082fc !important;
	color: #fff !important;
}
.paginationjs .paginationjs-pages li.disabled>a, .paginationjs .paginationjs-pages li.disabled {
	cursor: default !important;
}
.paginationjs .paginationjs-pages .paginationjs-prev > a, .paginationjs .paginationjs-pages .paginationjs-next > a {
	padding: 0px;
}
.paginationjs .paginationjs-go-button>input[type=button]:hover {
	color: #fff !important;
    background-color: #0082fc;
}
.paginationjs .paginationjs-go-input>input[type=text], .paginationjs .paginationjs-go-button>input[type=button] {
	background-color: var(--input-background-color, #fff);
	color: var(--input-text-color, #404e60);
}
.paginationjs .paginationjs-pages li, .paginationjs .paginationjs-go-input, .paginationjs .paginationjs-go-input>input[type=text], .paginationjs .paginationjs-go-button>input[type=button] {
	border-color: var(--input-border-color, #e2e3e5) !important;
}

/* datatables plugin custom styling */
.dataTables_wrapper {
	--dt-surface: var(--content-background-color, #fff);
	--dt-border: var(--subnav-border-bottom-color, #e2e3e5);
	--dt-border: color-mix(in srgb, var(--main-text-color, #404e60) 14%, var(--content-background-color, #fff));
	--dt-head-bg: var(--gray-hover-color, #f3f4f7);
	--dt-head-bg: color-mix(in srgb, var(--main-text-color, #404e60) 12%, var(--content-background-color, #fff));
	--dt-hover: var(--gray-hover-color, #f3f4f7);
	--dt-hover: color-mix(in srgb, var(--main-link-color, #0082fc) 8%, var(--content-background-color, #fff));
	--dt-zebra: color-mix(in srgb, var(--main-text-color, #404e60) 3%, var(--content-background-color, #fff));
	--dt-muted: var(--gray-text-color, #6a7480);
	--dt-brand: var(--main-link-color, #0082fc);
	--dt-brand-hover: var(--main-link-hover-color, #0082fc);
	font-size: 14px;
	color: var(--main-text-color, #404e60);
}
.dt-button {
	color: var(--dt-muted);
	background: var(--dt-surface);
	border: 1px solid var(--dt-border) !important;
	padding: 6px 14px;
	border-radius: 8px;
	transition: .15s;
}
.dt-button:not(.ui-state-disabled):hover {
	color: #fff;
	background: var(--dt-brand-hover);
	border-color: var(--dt-brand-hover) !important;
}
.dataTables_wrapper div div, .dataTables_wrapper table div {
	padding: 0px;
}
.dataTable {
	margin-top: 20px !important;
}
.datatables-top {
	margin: 5px 5px 12px;
	display: inline-block;
	clear: both;
	width: 100%;
	font-size: 14px;
}
table.dataTable {
	border-collapse: separate !important;
	border-spacing: 0;
	width: 100%;
	border: 1px solid var(--dt-border);
	border-radius: 12px;
	background: var(--dt-surface);
}
.dataTable .odd {
	background-color: var(--dt-surface);
}
.dataTable .even {
	background-color: var(--dt-zebra);
}
.dataTable .odd:hover, .dataTable .even:hover {
	background-color: var(--dt-hover);
}
.dataTable .odd img, .dataTable .even img {
	border-radius: 50%;
	margin: 5px 0px;
}

.dataTables_filter {
	font-size: 14px;
}

.dataTables_filter input {
	font-size: 14px;
	padding: 8px 14px;
	border: 1px solid var(--dt-border) !important;
	border-radius: 99px;
	background: var(--input-background-color, #fff) !important;
	color: var(--input-text-color, #404e60);
	transition: .15s;
}
.dataTables_filter input:focus {
	outline: none;
	border-color: var(--dt-brand) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dt-brand) 22%, transparent);
}
.dataTables_length select {
  background-color: var(--input-background-color, #fff);
  font-size: 14px;
  border: 1px solid var(--dt-border) !important;
  border-radius: 99px !important;
  overflow: visible !important;
  transition: none !important;
  color: var(--input-text-color, #404e60);
  width: auto !important;
  max-width: none !important;
  display: inline-block;
  position: relative;
  height: auto;
  padding: 7px 30px 7px 13px !important;
}
.datatables-top .ui-buttonset {
	display: inline-block;
	margin-left: 15px;
	margin-top: 9px;
}
#engagementTable_wrapper .datatables-top .ui-buttonset, #customReportContactsTable_wrapper .datatables-top .ui-buttonset {
	margin-top: 15px;
}
.datatables-buttons {
	margin-top: 10px;
	float: right;
}
.dataTables_length {
	width: auto;
	float: left;
	margin-top: 5px !important;
}
.dataTables_paginate .fg-button {
	border-radius: 8px !important;
}
.dataTables_paginate a {
	margin: 0px 3px;
	padding: 6px 12px;
	min-width: 34px;
	text-align: center;
	border: 1px solid var(--dt-border);
	border-radius: 8px;
	color: var(--dt-muted);
	background: var(--dt-surface);
	transition: .15s;
}
.dataTables_paginate a:hover {
	border-color: var(--dt-brand);
	color: var(--dt-brand) !important;
	background: var(--dt-surface);
}
.dataTables_paginate > span > .ui-state-disabled, .dataTables_paginate .paginate_active, .dataTables_paginate a.paginate_button.current {
	font-weight: bold;
	opacity: 1 !important;
	color: #fff !important;
	background: var(--dt-brand) !important;
	border-color: var(--dt-brand) !important;
}
.dataTableStateClear {
	margin-left: 5px;
}
.dataTableStateClear, .dataTableStateSave {
	background-color: #bac4d0;
	background-image: none;
	color: #fff;
	padding: 6px 12px;
	border: 0px;
	border-radius: 8px;
	margin: 0px 5px;
}
.dataTableStateClear:hover, .dataTableStateSave:hover {
	background: var(--dt-brand-hover) !important;
	color: #fff !important;
	box-shadow: inset 0 0 0 1000px rgba(0,0,0,.1);
}
.dataTableStateMessage {
	display: none;
	margin-left: 5px;
}
.dataTables_filter {
	width: auto;
}
table.dataTable tbody th, table.dataTable tbody td {
	word-break: break-word;
	padding: 12px 14px !important;
	border-bottom: 1px solid var(--dt-border);
	vertical-align: middle;
}
table.dataTable tbody tr:last-child td, table.dataTable tbody tr:last-child th {
	border-bottom: 0;
}
table.dataTable tbody tr:last-child td:first-child {
	border-bottom-left-radius: 12px;
}
table.dataTable tbody tr:last-child td:last-child {
	border-bottom-right-radius: 12px;
}
.dataTable th {
	text-align: left;
}
.dataTable th .ui-icon {
	background-image: url(/app2/styles/innerCSS6/images/ui-icons_ffffff_256x240.png);
}
table.dataTable thead th div.DataTables_sort_wrapper span {
	right: -14px;
}
.dataTables_wrapper table.dataTable thead th, .dataTables_wrapper table.dataTable tfoot th {
	padding: 12px 14px;
	background-color: var(--dt-head-bg);
	background-image: none;
	color: var(--dt-muted);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	border: 0;
	border-bottom: 1px solid var(--dt-border);
}
.dataTables_wrapper table.dataTable thead th:first-child {
	border-top-left-radius: 12px;
}
.dataTables_wrapper table.dataTable thead th:last-child {
	border-top-right-radius: 12px;
}
.dataTables_wrapper table.dataTable tfoot th {
	border-bottom: 0;
	border-top: 1px solid var(--dt-border);
	padding-bottom: 12px;
}
.dataTables_wrapper table.dataTable tfoot th:first-child {
	border-bottom-left-radius: 12px;
}
.dataTables_wrapper table.dataTable tfoot th:last-child {
	border-bottom-right-radius: 12px;
}
table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before {
	right: 8px !important;
	top: 50% !important;
	margin-top: -10px;
	width: 0;
	height: 0;
	content: "" !important;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 8px solid currentColor;
	color: var(--main-text-color);
	color: color-mix(in srgb, var(--main-text-color) 55%, #000);
	opacity: 1;
}
table.dataTable thead th.sorting_asc:before {
	opacity: 1;
	color: var(--main-link-hover-color);
}
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
	right: 8px !important;
	top: 50% !important;
	margin-top: 2px;
	width: 0;
	height: 0;
	content: "" !important;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 8px solid currentColor;
	color: var(--main-text-color);
	color: color-mix(in srgb, var(--main-text-color) 55%, #000);
	opacity: 1;
}
table.dataTable thead th.sorting_desc:after {
	opacity: 1;
	color: var(--main-link-hover-color);
}

/* Datatables from dashboard quick search */
html body div.ui-dialog div#mydialog2.ui-dialog-content div#simple-search-table_wrapper.dataTables_wrapper div.fg-toolbar {
	background-color: #ffffff;
	background-image: none;
	background-repeat: no-repeat;
	border: 0px;
	border-radius: 0px;
	box-shadow: none;
	margin: 0px;
	padding: 0px;
	font-weight: normal;
}


/* Dashboard */



/* Dashboard elements */


.initialImageLoading {
	max-width: 300px;
}

#setupPctTitle {
	font-weight: bold;
	margin-top: 15px;
	margin-left: 5px;
}
#setupPctDone {
	width: 98%;
	height: 16px;
	margin: 3px 0px 15px 3px;
}

#dashboardWrapperTable {
	width: 100%;
	margin-top: -12px;
	table-layout: fixed;
	border-spacing: 0px;
	z-index: 0;
}
.dashboardWrapperTableShadow {
	box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}

.dashboardTitle {
	font-size: 24px;
	font-weight: bold;
	color: var(--main-text-color, #404e60);
	margin-bottom: 10px;
}
.dashboardSubtitle {
	font-size: 16px !important;
	font-weight: normal !important;
	color: var(--main-text-color, #404e60);
}
.dashboardCalendarEventsTitle {
	font-size: 18px;
	font-weight: bold;
	color: var(--main-text-color, #404e60);
	margin-bottom: 10px;
}
.dashboardChart250 {
	height: 250px;
	display:inline-block;
	width: 95%;
	padding: 5px;
}
.dashboardChart300 {
	height: 300px;
	display:inline-block;
	width: 95%;
	padding: 5px;
}
.dashboardReportDefaultText {
	color: #999;
}
#crmActivitiesToDoReportsDetails {
	display: block;
	width: 100%;
	padding: 20px;
}
#eventPieChart {
	height: 250px;
	margin-left: auto;
	margin-right: auto;
	width: 500px;
}
#dashboardKPIs {
	display:inline-block;
	width: 99%;
}
#showPipelineFilter {
	vertical-align: bottom;
	font-weight: normal;
	margin: 8px 0px;
	clear: both;
	float: left;
	display: inline-block;
}
#dashboardPipeline {
	display:inline-block;
	width: 100%;
	clear: both;
}
.dashboardCustomWidgetSettings {
	float: right;
	vertical-align: bottom;
	font-weight: normal;
	margin-top: 8px;
}
#dashboardRightColumn {
	width: 450px;
	margin-left: 10px;
	padding-top: 60px;
}
#dashboardRightColumn #dashboardSimpleSearchInput {
    background: var(--input-background-color, #fff);
    border: 1px solid var(--input-border-color, #e2e3e5);
}
#dashboardRightColumn #dashboardSimpleSearchWrapper {
    background: transparent;
}
#dashboardNotifications {
	padding: 0px 10px 10px 10px;
	width: 90%;
}
#dashboardNotifications li {
	clear: both;
	margin: 5px;
}
#dashboardNotifications div {
	float: left;
}
#dashboardNotifications li div:first-child {
	margin-top: 7px;
}
.dashboardNotificationItem {
	margin-left: 5px !important;
	padding: 5px !important;
	width: 75%;
}
#dashboardWizards {
	padding: 10px;
	margin-top: 20px;
	width: 90%;
}
#dashboardSimpleSearchWrapper {
	padding: 0px 10px;
	margin-top: 20px;
	width: 90%;
}
#simple-search-table-source {
	width: 100%;
	margin-top: 10px;
}
#teamMembersWrapper {
	width: 99%;
	font-size: 10px;
	text-align: justify;
	text-align-last: justify;
	margin: 0px;
	padding: 0px;
}
.dashboardContactPictureWrapper {
	text-align: center;
	width: 50px;
	overflow: hidden;
	height: 80px;
	display: inline-block;
	margin: 5px;
}
.dashboardContactPictureDiv {
	height: 40px;
	position: relative;
}
.dashboardContactPicture {
	max-height: 40px;
	max-width: 40px;
	border: 0px;
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin: 0px auto 0px auto;
}
.dashboardContactPictureName {
	height: 30px;
	text-align-last: center;
}
.dashboardBadge {
	vertical-align: middle;
	margin: 3px;
	padding: 2px;
	display: inline-block;
}
.hiddenWizard {
	display: none;
	height: 35px;
}
.visibleWizard {
	display: block;
	height: 35px;
}
.wizardButton {
	padding: 5px;
	min-width: 200px !important;
	text-align: left;
	display: inline-block;
}
#kpisWrapperTable {
	table-layout: fixed;
	width: 100%;
	border-spacing: 0px;
}
.kpiDetails {
	border-bottom: 1px solid #ddd;
}
#kpisWrapperTable a {
	white-space: normal;
}
.kpiGauge {
	width:220px;
	height:140px;
	margin-left: auto;
	margin-right: auto;
}

#dashboardMiniCalWrapper {
	width: 100%;
	table-layout: fixed;
}
#dashboardMiniCalWrapper .ui-datepicker td .ui-state-event {
	background: var(--content-background-color, #fff);
}
#dashboardMiniCalWrapper .ui-datepicker td .ui-state-event:hover {
	background: var(--main-link-hover-color, #0082fc);
}
#miniCal {
	display:inline-block;
	height: 300px;
	width: 100%;
	font-size: 16px;
}
#minical_iframe {
	float:left;
	width: 300px;
	height:200px;
}
#minicalEvents {
	display:inline-block;
	height: 300px;
	width: 99%;
	overflow: auto;
	padding: 5px;
}
#minicalEvents p {
	border-bottom: 1px solid #ddd;
	padding-bottom: 20px;
	margin-bottom: 5px;
	width: 100%;
	clear: both;
}
#minicalEvents div {
	max-width: 100%;
	overflow: auto;
	white-space: normal;
}
#minicalEvents table {
	width: 99%;
	table-layout: fixed;
}

#attend_iframe {
	float: right;
	width: 300px;
	height:200px;
}

#newsFeedContent {
	clear: both;
	width: auto;
	position: relative;
	padding-bottom: 30px;
}

#newsFeed {
	clear: both;
	width: auto;
	position: relative;
	padding-bottom: 30px;
}

#mainDashboardRight {
	float: left;
	min-height: 100%;
	position: relative;
	top: 0px;
	clear: right;
	margin-left: 1%;
	width: 31%;
}


#dashLeftInner {
	position: relative;
}

#reputationMeter {
    width: 100%;
    height: 55px;
	margin-top: 5px;
	margin-bottom: 10px;
}

#badgesWrapper {
	margin-top: 20px;
	text-align: center;
	padding: 10px;
	width: 90%;
}


#dashboardCustomizePrint {
	border-top: 1px solid var(--content-border-color, #e2e3e5); 
	padding-top: 25px; 
	text-align: center;
	line-height: 30px;
}
.visibleWidget2, .dashboard2_LeftBox, #dashboardRecentActions, #reputationAndUsers, #twitterWrapper, .widgetShadow, #dashboardOpenTickets {
	box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0) !important;
    border: 1px solid var(--content-border-color, #e2e3e5);
}
.visibleWidget2, .dashboard2_LeftBox {
    border-radius: 14px !important;
}
.visibleWidget2 {
   	transition: all 0.3s ease;
   	position: relative;
}
.visibleWidget2:hover {
	position: relative;
	z-index: 9999;
    transform: scale(1.05) !important;
   	transition: all 0.3s ease;
 	box-shadow: 0px 0px 25px 10px var(--content-box-shadow-color, #e3eaf0) !important;
}
.visibleWidget2 #dashboardOpenTickets {
    border: 0px !important;
}
#accountSetupProgressWrapper {
	margin-top: 10px; 
	padding: 0px 25px 0px 19px;
}
.editDashboardCustomWidgetWrapper {
	display: none; 
	padding: 20px; 
	position: relative; 
	background: var(--content-background-color, #fff); 
	z-index:9999999;
	border: 1px solid #999;
	border-radius: 5px;
}
#dashboardSimpleSearchInput {
    box-shadow: none;
    background: var(--main-background-color, #f8f9fb);
    border: 1px solid var(--content-border-color, #e2e3e5);
    color: var(--main-text-color, #404e60);
}
#dashboardLeftWrapper {
	margin: 15px 10px 0px 10px;
	width: 20%;
	float: left;
	padding-top: 12px;
    padding-left: 15px;
}
#dashboardRightWrapper {
	float: left;
	width: calc(80% - 40px);
	margin-top: 15px;
}
#dashboardLeftColumn, #dashboardRightColumn, #dashboardNotifications, #badgesWrapper, #dashboardSimpleSearchWrapper {
    background-color: var(--main-background-color, #f8f9fb);
}
#dashboardLeftColumn .visibleWidget {
	border: 0px !important;
}
#dashboardNotificationsList li {
	padding: 2px;
	margin: 5px;
}
#dashboardNotificationsList .ui-state-green {
	font-weight: normal !important;
}
#dashboardNewsFeed {
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    border: 1px solid var(--content-border-color, #e2e3e5);
}
#dashboardNewsFeed h1 {
	margin: 10px 0px;
}
#dashboardRecentActions h1 {
	margin: 15px 0px;
}
#dashboardNewsFeed .existingActivityComments h3 {
	display: none;
}
#dashboardNewsFeed .existingActivityComments table {
	margin-left: 10%;
	width: 85%;
	margin-bottom: 15px;
}
#dashboardNewsFeed .existingActivityComments td {
	font-size: 11px;
}
#dashboardNewsFeed .viewAddCommentsLink {
	clear: both;
	font-size: 11px;
	margin-top: -50px;
}
.dashboardMiniCalWrapperTD {
	vertical-align: top;
}

#reputationMeterWrapper {
	width: 180px; 
	margin: auto;
}
#reputationMeter {
	width: 100%; 
	height: 85px;
}
#yourReputationText {
	margin-top: -10px; 
	text-align: center; 
	color: var(--main-text-color, #404e60); 
	font-size: 10px;
}



/* Dashboard Widgets */

#widgets {
	width: 96%;
	margin-left: auto;
	margin-right: auto;
	white-space: nowrap;
	margin-top: 60px;
}
#widgets table, #widgets div {
	white-space: normal;
}
.widget {
    padding: 4px;
}
.visibleWidget {
	margin-top: 20px;
	background-color: var(--content-background-color, #fff);
	box-shadow: 0px 15px 25px -15px var(--widget-shadow-color, #131a00);
    border: 1px solid var(--content-border-color, #e2e3e5);
}
.hiddenWidget {
	margin-top: 20px;
	background-color: var(--content-background-color, #fff);
	display: none;
}
.widgetShadow {
	clear: both;
	box-shadow: 0px 3px 1px -1px rgba(0, 0, 0, 0.2);
	width: 100% !important;
}
.widgetHeader {
	background-color: var(--content-background-color, #fff);
	border-top: 0px !important;
	border-left: 0px !important;
	border-right: 0px !important;
	padding: 10px;
    border-bottom: 1px solid transparent;
    color: var(--main-text-color);
}
.widget .ui-datepicker-inline {
    width: 97%;
}
#widgetSelector {
    background-color: var(--widget-selector-background-color, #e6f0fc);
    border-radius: 5px 5px 5px 5px;
    font-size: 6pt;
    padding: 5px;
    width: 50%;
}

#widgetColumns { padding-top: 38px; } /* don't cover the reputation meter */

#widgetColumns .column {
    float: left;
    min-height: 400px;
    min-width: 200px;
}

#widgetCol1 { width: 30%; }
#widgetCol2 { width: 39%; }
#widgetCol3 { width: 30%; }

#widgetColumns .widget .widget-content {
    min-height: 142px;
    line-height: 1.2em;
    overflow: hidden;
    padding: 0;
    margin-left: 12px;
    margin-bottom: 12px;
}

.widget-drag-overlay {
    margin-left: 12px;
    margin-bottom: 12px;
}

#widgetColumns .widget .widget-content p {
    padding: 0.8em 0;
    border-bottom: 1px solid #777;
}
#widgetColumns .widget .widget-content img {
    float: right;
    margin: 10px;
    border: 1px solid var(--widget-content-img-border-color, #fff);
}

#widgetColumns .widget .widget-content ul li {padding: 3px 0;}
#widgetColumns .widget .widget-content ul.images {
    padding: 7px 0 0 0;
    list-style: none;
    height: 1%;
}
#widgetColumns .widget .widget-content ul.images li {
    display: inline;
    float: left;
}
#widgetColumns .widget .widget-content ul.images img {
    display: inline;
    float: left;
    margin: 0 0 7px 7px;
}

.dragging { border: 2px dashed #999;}
#widgetCol1 .widget-placeholder { margin: 30px 35px 0 25px; }
#widgetCol2 .widget-placeholder { margin: 30px 20px 0 20px; }
#widgetCol3 .widget-placeholder { margin: 30px 25px 0 35px; }

.dashboardJourneyThrottleContactsTable {
	max-width: 100%;
	width: 100%;
}
.dashboardJourneyThrottleContactsTable td {
	font-size: 11px;
	padding-bottom: 5px;
	vertical-align: top;
}
.dashboardJourneyThrottleContactsTable td .tag {
	padding: 2px 2px 1px 2px;
}


/* ============================================================
   Dashboard - News Feed - To-Do List  (Overdue + Coming Activities)
   Modernized card layout. Restyles the EXISTING markup/classes only
   (no DOM changes) so search / infinite-scroll / All-toggle /
   priority-flag / comments / address-toggle behaviour is preserved.
   Urgency: red = overdue, yellow = due today, green = due soon.
   Pills use color-mix() over the app's injected theme vars so they
   adapt to light/dark, with solid fallbacks for older browsers.
   ============================================================ */
#dashboardOverdueActivities, #dashboardComingActivities {
	--u-red: #bd0008;
	--u-yellow: #ffa101;
	--u-green: #16b370;
	list-style-type: none;
	margin: 0;
	padding: 2px 2px 4px;
	max-height: 275px;
	overflow: auto;
	font-size: 0.9em;
	line-height: 1.5;
}

/* row -> card */
.overdueActivityLi, .upcomingActivityLi {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
	align-items: flex-start;
	box-sizing: border-box;
	width: 100%;
	float: none;
	cursor: pointer;
	padding: 11px 12px 12px;
	margin: 0 0 12px;
	background: var(--content-background-color, #fff);
	border: 1px solid var(--content-border-color, #e2e3e5);
	border-color: color-mix(in srgb, var(--main-text-color, #404e60) 10%, var(--content-border-color, #e2e3e5));
	border-left: 3px solid transparent;
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 2px 6px rgba(16, 24, 40, .07);
	transition: box-shadow .13s ease, transform .13s ease, border-color .13s ease;
}
.overdueActivityLi:hover, .upcomingActivityLi:hover {
	box-shadow: 0 8px 20px rgba(16, 24, 40, .13);
	transform: translateY(-1px);
}
/* hover: full border adopts the card's urgency hue (echoes the contact-card hover) */
.overdueActivityLi:hover { border-color: var(--u-red, #bd0008); }
.upcomingActivityLi:hover { border-color: var(--u-green, #16b370); }
.upcomingActivityLi:has(.yellowDot):hover { border-color: var(--u-yellow, #ffa101); }
.upcomingActivityLi:has(.greenDot):hover { border-color: var(--u-green, #16b370); }
/* urgency left accent */
.overdueActivityLi { border-left-color: var(--u-red, #bd0008); }
.upcomingActivityLi { border-left-color: var(--u-green, #16b370); }
.upcomingActivityLi:has(.yellowDot) { border-left-color: var(--u-yellow, #ffa101); }
.upcomingActivityLi:has(.greenDot) { border-left-color: var(--u-green, #16b370); }

/* circular avatar (keeps the existing red / yellow / green fills + .redGlow) */
#dashboardOverdueActivities .icon-handshake, #dashboardOverdueActivities .icon-projects,
#dashboardComingActivities .icon-handshake, #dashboardComingActivities .icon-projects {
	flex: none;
	float: none;
	clear: none;
	margin: 0;
	padding: 0;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0 !important;
	border-radius: 50%;
	color: #fff;
	font-size: 17px;
	line-height: 1;
	background-color: var(--u-red, #bd0008);
}
#dashboardOverdueActivities .icon-handshake:before, #dashboardOverdueActivities .icon-projects:before,
#dashboardComingActivities .icon-handshake:before, #dashboardComingActivities .icon-projects:before {
	display: block;
	transform: translateY(1px);
}
#dashboardComingActivities .yellowDot { background-color: var(--u-yellow, #ffa101); }
#dashboardComingActivities .greenDot { background-color: var(--u-green, #16b370); }
/* keep the avatar filled on hover (override legacy invert) */
.overdueActivityLi:hover .icon-handshake, .overdueActivityLi:hover .icon-projects {
	color: #fff !important;
	background-color: #a30007 !important;
}
.upcomingActivityLi:hover .yellowDot { color: #fff !important; background-color: #e89200 !important; }
.upcomingActivityLi:hover .greenDot { color: #fff !important; background-color: #139a60 !important; }
@media screen and (max-width : 1500px){
	#dashboardOverdueActivities .icon-handshake, #dashboardOverdueActivities .icon-projects,
	#dashboardComingActivities .icon-handshake, #dashboardComingActivities .icon-projects {
		width: 34px;
		height: 34px;
		font-size: 16px;
	}
}

/* content column */
.overdueActivityLi .dashboardNotificationItem, .upcomingActivityLi .dashboardNotificationItem {
	flex: 1 1 0;
	min-width: 0;
	float: none;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-right: 18px;
}

/* contact / activity name -> card title */
.dashboardNewsFeedOverdueActivityName, .dashboardNewsFeedComingActivityName {
	order: 0;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.3;
	color: var(--main-text-tertiary-color, #125b9a);
	overflow-wrap: anywhere;
}
.overdueActivityLi:hover .dashboardNewsFeedOverdueActivityName,
.upcomingActivityLi:hover .dashboardNewsFeedComingActivityName,
.upcomingActivityLi:hover .dashboardNewsFeedOverdueActivityName {
	color: var(--main-link-hover-color, #0082fc);
}

/* activity type -> tag pill; notes -> description (wrapper is the only class-less div) */
.overdueActivityLi .dashboardNotificationItem > div:not([class]),
.upcomingActivityLi .dashboardNotificationItem > div:not([class]) {
	order: 1;
	font-size: 0;
	line-height: 0;
	margin: 3px 0 1px;
}
.dashboardNewsFeedOverdueActivityActivity, .dashboardNewsFeedComingActivityActivity {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 999px;
	font-size: 10.5px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: .02em;
	background: #eef2f7;
	background: color-mix(in srgb, var(--main-text-color, #404e60) 8%, var(--content-background-color, #fff));
	color: var(--main-text-secondary-color, #202e40);
	margin: 0 0 4px;
}
.dashboardNewsFeedOverdueActivityActivity:empty, .dashboardNewsFeedComingActivityActivity:empty { display: none; }
.dashboardNewsFeedOverdueActivityNotes, .dashboardNewsFeedComingActivityNotes {
	display: block;
	font-size: 12px;
	line-height: 1.4;
	color: var(--main-text-color, #404e60);
}

/* meta lines: assigned-to + group */
.dashboardNewsFeedOverdueActivityDoneBy, .dashboardNewsFeedComingActivityDoneBy { order: 2; }
.dashboardNewsFeedOverdueActivityGroup, .dashboardNewsFeedComingActivityGroup { order: 3; }
.dashboardNewsFeedOverdueActivityDoneBy, .dashboardNewsFeedComingActivityDoneBy,
.dashboardNewsFeedOverdueActivityGroup, .dashboardNewsFeedComingActivityGroup {
	font-size: 11px;
	line-height: 1.5;
	color: #6b7787;
	color: color-mix(in srgb, var(--main-text-color, #404e60) 76%, var(--content-background-color, #fff));
}
.dashboardNewsFeedOverdueActivityDoneBy::before, .dashboardNewsFeedComingActivityDoneBy::before {
	font-family: "gricons";
	content: "M";
	margin-right: 5px;
	font-size: 11px;
	opacity: .75;
	vertical-align: -1px;
}
.dashboardNewsFeedOverdueActivityGroup::before, .dashboardNewsFeedComingActivityGroup::before {
	font-family: "gricons";
	content: "S";
	margin-right: 5px;
	font-size: 11px;
	opacity: .75;
	vertical-align: -1px;
}

/* due time -> urgency pill */
.dashboardNewsFeedOverdueActivityDueTime, .dashboardNewsFeedComingActivityDueTime {
	order: 4;
	margin-top: 4px;
	font-size: 11px;
	line-height: 1.6;
	color: #6b7787;
	color: color-mix(in srgb, var(--main-text-color, #404e60) 76%, var(--content-background-color, #fff));
}
.dashboardNewsFeedOverdueActivityDueTime::before, .dashboardNewsFeedComingActivityDueTime::before {
	font-family: "gricons";
	content: "Q";
	margin-right: 5px;
	font-size: 11px;
	opacity: .75;
	vertical-align: -1px;
}
.dashboardNewsFeedOverdueActivityDueTime .redText {
	display: inline-block;
	margin-left: 5px;
	padding: 2px 8px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 10.5px;
	background: #fdecec;
	background: color-mix(in srgb, var(--u-red, #bd0008) 14%, var(--content-background-color, #fff));
	color: #b42318;
	color: color-mix(in srgb, var(--u-red, #bd0008) 72%, var(--main-text-color, #404e60));
}
.dashboardNewsFeedOverdueActivityDueTime .brownText, .dashboardNewsFeedComingActivityDueTime .brownText {
	display: inline-block;
	margin-left: 5px;
	padding: 2px 8px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 10.5px;
	background: #fef3e2;
	background: color-mix(in srgb, var(--u-yellow, #ffa101) 18%, var(--content-background-color, #fff));
	color: #b45309;
	color: color-mix(in srgb, var(--u-yellow, #ffa101) 62%, var(--main-text-color, #404e60));
}
/* due-soon (green) pill — coming project rows reuse the Overdue* DueTime class name */
.upcomingActivityLi:has(.greenDot) .dashboardNewsFeedComingActivityDueTime .brownText,
.upcomingActivityLi:has(.greenDot) .dashboardNewsFeedOverdueActivityDueTime .brownText {
	background: #e7f6ec;
	background: color-mix(in srgb, var(--u-green, #16b370) 16%, var(--content-background-color, #fff));
	color: #127a4e;
	color: color-mix(in srgb, var(--u-green, #16b370) 70%, var(--main-text-color, #404e60));
}

/* address / phone details (toggled by the header link) */
.dashboardNewsFeedAddressDetails {
	order: 5;
	flex-basis: 100%;
	margin-top: 7px;
	padding-top: 7px;
	font-size: 11px;
	line-height: 1.6;
	color: #6b7787;
	color: color-mix(in srgb, var(--main-text-color, #404e60) 76%, var(--content-background-color, #fff));
	border-top: 1px dashed var(--content-border-color, #e2e3e5);
}
.dashboardNewsFeedAddressDetails .icon-phone, .dashboardNewsFeedAddressDetails .icon-mobile { margin-right: 4px; opacity: .75; }
.dashboardNewsFeedOverdueActivityGroupNoAccess { order: 3; font-size: 11px; color: var(--u-red, #bd0008); }

/* priority flag -> pinned top-right of the card */
.dashboardActivityPriorityFlag {
	position: absolute;
	top: 9px;
	right: 10px;
	float: none;
	margin: 0;
	z-index: 2;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}
.dashboardActivityPriorityFlag .redText { color: var(--u-red, #bd0008); }
.dashboardActivityPriorityFlag .mediumGrayText { opacity: .5; }

/* comments -> full-width line under the card body.
   The extra #dashboardNewsFeed-prefixed selectors raise specificity above the
   legacy "#dashboardNewsFeed .viewAddCommentsLink{margin-top:-50px}" float hack. */
#dashboardNewsFeed .overdueActivityLi .viewAddCommentsLink,
#dashboardNewsFeed .upcomingActivityLi .viewAddCommentsLink,
.overdueActivityLi .viewAddCommentsLink,
.upcomingActivityLi .viewAddCommentsLink {
	order: 8;
	flex-basis: 100%;
	margin: 0 0 0 49px;
	float: none;
	clear: none;
	font-size: 11px;
	text-decoration: none;
	color: #6b7787;
	color: color-mix(in srgb, var(--main-text-color, #404e60) 76%, var(--content-background-color, #fff));
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.overdueActivityLi .viewAddCommentsWrapper, .upcomingActivityLi .viewAddCommentsWrapper { order: 9; flex-basis: 100%; }


/* Dashboard - News Feed - Recent Actions */
#dashboardRecentActionsUL {
	list-style-type: none;
	font-size: 0.9em;
	line-height: 150%;
}
#dashboardRecentActionsUL .dashboardNotificationItem {
	float: left;
	margin-bottom: 10px;
}
#dashboardRecentActionsUL .dashboardNotificationItem span {
	vertical-align: middle;
}
#dashboardRecentActionsUL .icon-focus {
	float: left;
	clear: both;
	margin-top: 6px;
	font-size: 15px;
	padding: 10px;
	border-radius: 50%;
	background-color: #0082fc;
	color: #fff;
	height: 15px;
	width: 15px;
	text-align: center;
}
#dashboardRecentActionsUL .dashboardRecentActivityDate {
	color: var(--main-text-color, #404e60);
}
#dashboardRecentActionsUL .dashboardRecentActivityWho {
	font-weight: normal;
}
#dashboardRecentActionsUL .dashboardRecentActivityAction {
	word-break: break-all;
}
#twitterWrapper {
	margin-top: 10px;
}


/* Dashboard > Widgets */
#dashboardOpportunitiesWon .widgetTitle, #dashboardTopOpportunities .widgetTitle, #dashboardVideoMinutesWatched .widgetTitle {
	text-align: center;
	font-size: 11px;
	margin-top: 5px;
	color: var(--main-text-color, #404e60);
}
#dashboardVideoMinutesWatched .widgetTitle {
	margin-top: 10px;
}
#dashboardOpportunitiesWon select, #dashboardTopOpportunities select, #dashboardVideoMinutesWatched select {
	max-width: 95%;
	font-size: 11px;
}
#dashboardOpportunitiesWon div {
	text-align: center;
}
#dashboardOpportunitiesWon span {
	font-size: 11px;
	color: var(--main-text-color, #404e60);
}
#dashboardOpportunitiesWon .widgetCaption {
	font-size: 10px;
	padding-bottom: 10px;
	color: var(--main-text-color, #404e60);
}
#dashboardTopOpportunities table {
	width: 90%;
	color: var(--main-text-color, #404e60);
	border-collapse: collapse;
	margin: 5%;
}
#dashboardTopOpportunities .topOpportunityName {
	font-size: 10px;
	display: inline-block;
	max-height: 12px;
	overflow: hidden;
	margin-top: 1px;
}
#dashboardTopOpportunities .opportunityDescriptionCell {
	font-size: 10px;
	text-align: left;
	vertical-align: top;
}
#dashboardTopOpportunities .opportunityDescriptionText, #topLandingPages div, #topBlogs div, #topSignupForms div, #topTicketForms div {
	max-height: 16px;
	overflow: hidden;
}
#dashboardTopOpportunities .opportunityValueCell {
	text-align: right;
	color: var(--green-text-color, #16b370);
	font-size: 10px;
	white-space: nowrap;
	vertical-align: top;
}
#dashboardTopOpportunities .icon-clock {
	vertical-align: middle;
}
.dashboardCustomWidgetDataCell {
	background: var(--custom-widget-data-cell-background-color, #f2f3f5);
}


/* Command Center */
#commandCenterTopNav {
	margin: 10px 30px 0px 30px;
}
#commandCenter {
	width: 99%;
	height: 500px;
}
#commandCenterLoading {
	position: fixed;
	left: 35%;
	top: 45%;
	font-size: 30px;
	z-index: 2;
}
#mapSelectorWrapper {
	float: right;
}
#commandCenter path:hover {
	stroke: var(--green-text-color, #16b370);
   	transition: all 0.3s ease;
}


/* help widget */

.helpWidget {
	padding: 10px 20px;
	display: none;
	z-index: 99;
	position: absolute;
	background: var(--help-widget-background-color, #404e60) !important;
 	box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
 	-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
 	font-weight: normal;
 	line-height: 22px;
 	text-transform: none;
 	border: 0px;
}
.helpWidget .ui-widget-header {
	border-top: 0px;
	border-right: 0px;
	border-left: 0px;
	border-bottom: 1px dotted;
	padding: 5px 0px 5px 0px;
}
.helpWidget h6 {
 	text-align: center;
	margin-bottom: 10px;
	width: 100%;
	padding-left: 0px;
	padding-right: 0px;
}
.ui-widget-header .icon-play {
	vertical-align: middle;
	text-decoration: none;
}
.helpWidget h6 img {
    vertical-align: bottom;
}
.helpWidget p, .helpWidget h6, .helpWidget li, .helpWidget div, .helpWidget dt, .helpWidget dd {
    color: var(--help-widget-text-color, #f8f9fb) !important;
}
.helpWidget p, .helpWidget li {
    font-size: 16px;
}
.helpWidget dt, .helpWidget dd {
    font-size: 14px;
}
.helpWidget a {
	color: #ffca53 !important;
}
.helpWidget a:hover {
	color: #fbaa33 !important;
}
.tag {
	color: #404e60;
	font-size: 10px;
	font-style: italic;
	border: solid 1px #404e60;
	padding: 4px 4px 3px 2px;
	border-bottom-left-radius: 5px;
	border-top-left-radius: 5px;
	border-bottom-right-radius: 3px;
	border-top-right-radius: 3px;
	line-height: 22px;
	min-width: 25px;
	background-color: #f5e4ba;
	word-break: break-word;
	word-wrap: break-word;
}
a.tag {
	cursor: pointer;
}
.tagHole {
	display: inline-block;
	vertical-align: bottom;
	margin: 0px 0px 0px -1px;
	font-size: 24px;
	color: #a15701;
	font-style: normal;
}
.box {
	border-radius: 2px;
}
#widgetSelector {
	z-index: 99999;
}
#helpContent ul {
	list-style-type: disc;
	margin: 10px;
	padding-left: 10px;
	font-size: 14px;
	line-height: 1.5;
}
#helpContent ol {
	margin: 10px;
	padding-left: 5px;
	font-size: 14px;
	line-height: 1.5;
}
#helpContent li {
	margin-bottom: 10px;
}
#customTemplateInstructions {
	background: #0091d8 !important;
    color: #fff !important;
    border: none !important;
    padding: 10px !important;
}


/* Styles for help icons */

.help_icon, .help_icon_show {
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    height: 22px;
    line-height: 22px;
    margin: 0px 3px 5px 3px;
    width: 22px;
    font-size: 14px;
    text-align: center;
    font-weight: 300;
    background-image: none !important;
    vertical-align: middle;
    cursor: pointer;
}
.help_icon, .help_icon_small {
    background-color: var(--help-icon-background-color, #bac4d0) !important;
}
.help_icon_show, .help_icon_small_show {
    background-color: #16b370 !important;
}
.help_icon:before, .help_icon_show:before, .help_icon_small:before, .help_icon_small_show:before {
    content: "\f128";
    font-family: FontAwesome;
}
.help_icon:hover {
    background-color: #16b370 !important;
}
.help_icon_small, .help_icon_small_show {
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    height: 14px;
    line-height: 14px;
    margin: auto 2px;
    width: 14px;
    font-size: 12px;
    text-align: center;
    font-weight: 300;
    background-image: none !important;
    vertical-align: middle;
    cursor: pointer;
}
#mailmergeHeader .help_icon_show, #hyperpersonalization-tab-id .help_icon_show, #dynamicDataOptions .help_icon_show, #savetomedialibraryForm .help_icon_show {
    background-color: #16b370 !important;
    border-radius: 50% !important;
    color: #fff !important;
    display: inline-block !important;
    height: 22px !important;
    line-height: 22px !important;
    margin: 0px 3px 5px 3px !important;
    width: 22px !important;
    font-size: 14px !important;
    text-align: center !important;
    font-weight: 300 !important;
    background-image: none !important;
    vertical-align: middle !important;
    cursor: pointer !important;
}

#emailToPlayersList
{
	background-color: #f8f9fb;
	border: 1px solid #333;
	width: 90%;
	margin: 10px 5% 10px 5%;
	height: 250px;
	overflow: auto;
}


/* CKEditor defaults */
.cke_icon {
	background-color: transparent !important;
}
.cke_dialog_body {
	box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.15) !important;
}
.cke_dialog_title {
	font-size: 24px !important;
	background-color: #428bca !important;
	color: #fff !important;	
}
.cke_dialog_contents_body {
	padding-top: 0px !important;
}
.cke_notifications_area {
	background: var(--main-background-color, #f8f9fb);
	border: 1px solid #6a7480;
	padding: 5px;
	color: var(--main-text-color, #404e60);
}
.ckeditorUploadMediaDialog p, .ckeditorUploadMediaDialog label {
	padding-left: 20px;
}
.cke_dialog_ui_vbox table {
	float: revert !important;
}
#includeBroadcastCheckboxIdLabelSpan {
	margin-top: -2px;
}
#folderSelectIdLabel {
	margin-top: 4px;
}
#includeBroadcastCheckboxIdWrapper {
	margin-top: 5px !important;
}
a.cke_dialog_ui_button {
	background: #404e60 !important;
	color: #fff !important;
	border-radius: 5px !important;
	font-family: "Poppins",verdana,arial !important;
	font-weight: normal !important;
	padding: 6px !important;
}
a.cke_dialog_ui_button:hover {
	background: #606e80 !important;
}
a.cke_dialog_ui_button span {
	font-size: 16px !important;
	font-weight: normal !important;
}
a.cke_dialog_ui_button_ok {
	color:#fff !important;
	background:#16b370 !important;
	border:1px solid #26c380 !important;
}
a.cke_dialog_ui_button_ok:hover {
	background:#36d390 !important;
	border-color:#46c380 !important;
}
.cke_dialog_footer_buttons {
	margin: 8px !important;
}
a.cke_dialog_ui_button_ok.cke_disabled {
	background-color: #d1d1d1 !important;
	border-color: #d1d1d1 !important;
	cursor: default !important;
}
.cke_dialog_ui_input_textarea textarea {
	height: auto !important;
}


/* Confirm dialog */
#acknowledgeDialog, #confirmDialog {
	overflow: hidden;
	overflow-y: auto;
	padding: 0px 18px;
}

#acknowledgeDialog, #confirmDialog p {
	font-size: 14px;
}

.ui-widget-overlay.ui-dialog-confirm {
	z-index: 2000010;
}

.ui-dialog-confirm {
	z-index: 2000012;
	padding: 15px;
}

.ui-dialog.alert-dialog {
	z-index: 2000012;
	/* Clip the square-cornered content to the dialog's rounded corners so the
	   loading (spinner) state has all 4 corners rounded, matching the loaded
	   state. The dialog's own drop shadow is unaffected by overflow:hidden. */
	overflow: hidden;
}
#addNewMediaInstructionOverlay {
	top: 16px;
	right: 30px;
	width: 220px;
	padding: 10px;
	display: table;
}

/* Captions */
.caption {
	position: absolute;
	padding: 10px;
	right: 21px;
	bottom: 95px;
	width: 150px;
	height: 112px;
	z-index: 10;
	border-radius: 4px;
	color: #fff;
	border: 1px solid #0091d8;
	background-color: #0091d8;
	font-size: 16px;
	text-align: center;
}

.caption-bottom-right:before {
	position: absolute;
	content: ' ';
	width: 0;
	height: 0;
	right: 25px;
	bottom: -30px;
	border: 15px solid;
	border-color: #0091d8 #0091d8 transparent transparent;
}

.caption-bottom-right:after {
	position: absolute;
	content: ' ';
	width: 0;
	height: 0;
	right: 29px;
	bottom: -20px;
	border: 10px solid;
	border-color: #0091d8 #0091d8 transparent transparent;
}

.caption-left-top:before {
	position: absolute;
	content: ' ';
	width: 0;
	height: 0;
	left: -30px;
	top: 10px;
	border: 15px solid;
	border-color: #0091d8 #0091d8 transparent transparent;
}

.caption-left-top:after {
	position: absolute;
	content: ' ';
	width: 0;
	height: 0;
	left: -25px;
	top: 12px;
	border: 13px solid;
	border-color: #0091d8 #0091d8 transparent transparent;
}

.caption-top-right:before {
	position: absolute;
	content: ' ';
	width: 0;
	height: 0;
	right: 30px;
	top: -30px;
	border: 15px solid;
	border-color: transparent #e2e3e5 #e2e3e5 transparent;
}

.caption-top-right:after {
	position: absolute;
	content: ' ';
	width: 0;
	height: 0;
	right: 32px;
	top: -26px;
	border: 13px solid;
	border-color: transparent #0091d8 #0091d8 transparent;
}

.caption button {
	display: block;
	color: #fff;
	background-color: transparent;
	border: 1px solid #fff;
	border-radius: 3px;
	padding: 6px;
	float: right;
	margin-top: 5px;
}

/* End Captions */

/* Notifications */

.notificationPopup {
	display: block;
	position: fixed;
	padding: 10px;
	top: 6%;
	left: calc(50% - 200px);
	width: 400px;
	z-index: 210000;
	background: var(--content-background-color, #fff);
	color: var(--main-text-color, #404e60);
	border: 1px solid #00cd7a;
	box-shadow: 3px 3px 4px 0px #777;
	-webkit-box-shadow: 3px 3px 4px 0px #777;
}

.notificationPopup.info {
	border: 1px solid #2099ff;
}

.notificationPopup.warning {
	border: 1px solid #f9c425;
}


.notificationPopup strong {
	font-size: 14px;
}

.notificationPopup p {
	margin: 4px 0 0 0 ;
}

.notificationIcon {
	position: relative;
	float:left;
	width: 40px;
	height: 40px;
	color: #00cd7a;
	margin-right: 10px;
	background-color: transparent;
}

.notificationIcon.success {
	background-image: url("/app2/images/success-icon-10.png");
	background-size: cover;
}

.notificationIcon.info {
	background-image: url("/app2/images/info-icon-10.png");
	background-size: cover;
}

.notificationIcon.warning {
	background-image: url("/app2/images/warning-icon-10.png");
	background-size: cover;
}


/* End Notifications */


/* CKEDITOR 3.x */
.cke_button_savetomedialibraryCommand .cke_label, .cke_button_usetemplateCommand .cke_label, .cke_button_autoSaveButtonCommand .cke_label, .cke_button_opensavedmessageCommand .cke_label, .cke_button_mailmergeCommand .cke_label, .cke_button_eventmergeCommand .cke_label, .cke_button_surveyCommand .cke_label, .cke_button_shareCommand .cke_label, .cke_button_forwardtofriendCommand .cke_label, .cke_button_viewaswebpageCommand .cke_label, .cke_button_unsubprofileupdateCommand .cke_label, .cke_button_emailfooterCommand .cke_label, .cke_button_imageloaderCommand .cke_label, .cke_button_videoloaderCommand .cke_label, .cke_button_articleloaderCommand .cke_label, .cke_button_loadwikiCommand .cke_label, .cke_button_websitewidgetCommand .cke_label
{
	display: inline !important;
	cursor: pointer !important;
}


/* CKEDITOR 4.x */

.cke_button__savetomedialibrary_label, .cke_button__usetemplate_label, .cke_button__autosavemessage_label, .cke_button__usewebsitetemplate_label, .cke_button__opensavedmessage_label, .cke_button__mailmerge_label, .cke_button__eventmerge_label, .cke_button__survey_label, .cke_button__share_label, .cke_button__forwardtofriend_label, .cke_button__viewaswebpage_label, .cke_button__unsubprofileupdate_label, .cke_button__emailfooter_label, .cke_button__imageloader_label, .cke_button__videoloader_label, .cke_button__articleloader_label, .cke_button__loadwiki_label, .cke_button__websitewidget_label, .cke_button__buttonbuilder_label, .cke_button__signature_label {
	display: inline !important;
	cursor: pointer !important;
}
.cke_dialog_page_contents {
	max-height: 100% !important;
	height: 100% !important;
}
.cke_path {
	max-width: 100% !important;
	overflow: hidden !important;
	white-space: normal !important;
}
.cke_bottom {
	white-space: normal !important;
	background-color: #f8f9fb !important;
}
.cke_wordcount .cke_path_item {
	color: #333 !important;
}
.cke {
	border: 1px solid var(--input-border-color, #e2e3e5) !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	border-radius: 2px !important;
	padding: 1px !important;
}
.cke_top {
	border-bottom: 1px solid var(--input-border-color, #e2e3e5);
}

/* Dashboard Pipeline */
#dashboardPipeline {
	overflow-x: auto;
}
#dashboard_Pipeline > div > #dashboardPipeline {
    max-height: 450px;
}

#dashboardPipeline #opportunityKanbanFilterWrapper {
	margin-top: -40px !important;
	right: 40% !important;
}
#dashboardPipelineOuterWrapper {
	overflow-x: auto;
	width: 100%;
}
#dashboardPipelineWrapper {
	width: 100%;
	table-layout: fixed;
	border-spacing: 5px;
	box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    border: 1px solid var(--content-border-color, #e2e3e5);
}
#dashboardPipelineWrapper td {
    border-right: 1px solid var(--content-border-color, #e2e3e5);
    vertical-align: top;
}
#dashboardPipelineWrapper td .phaseName {
	text-align: center; 
	padding: 10px; 
}
#opportunitiesMain #dashboardPipelineWrapper {
	background-color: var(--main-background-color, #f8f9fb);
}
#opportunitiesMain .pipelineSortable {
	max-height: 500px;
}
.pipelineSortable {
	list-style-type: none;
	min-height: 40px;
	width: 89%;
	padding-left: 3%;
	padding-right: 3%;
	overflow-x: visible;
	overflow-y: auto;
}
.pipelineBox {
	border: 1px solid #ddd;
	clear: both;
	width: 93%;
    margin: 3px auto 12px auto;
	padding: 3px;
	text-align: left;
	border-radius: 10px;
	cursor: move;
	background-color: var(--content-background-color, #fff);
	box-shadow: 2px 4px 8px var(--pipeline-box-shadow-color, #929395); !important;
	border: none;
}
.pipelineBox .icon-dragdrop {
	color: #777;
	cursor: move;
	font-size: 12px;
	float: left;
	vertical-align: middle;
    display: inline-block;
    margin-top: 1px;
}
.pipelineBox .icon-handshake {
	color: darkblue;
	font-size: 16px;
	margin-right: 3px;
	margin-bottom: 3px;
	vertical-align: middle;
}
.pipelineBox a {
	float: left;
}
.pipelineBox .opportunityTitle {
	float: left;
	font-weight: bold;
	vertical-align: middle;
	margin-top: 2px;
	font-size: 14px;
	cursor: pointer;
}
.pipelineBox .fa-hourglass-half {
	float: right;
	font-size: 14px;
	padding: 4px 3px 0px 0px;
}
.pipelineBox .opportunityContactName, .pipelineBox .opportunityCompany, .pipelineBox .opportunityValue, .pipelineBox .opportunityPctWin, .pipelineBox .opportunityChecklistItem {
	clear: both;
}
.pipelineBox .opportunityJourneys {
	float: right;
	font-size: 14px;
}
.pipelineBoxPlaceholder {
	border: 2px dashed #e2e3e5;
	background-color: #f3f3f3;
	border-radius: 5px;
	display: block;
	width: 100%;
	clear: both;
	height: 120px;
	transition: all 0.5s ease-in;
}

/* Non-droppable columns during an opportunity drag: dimmed in place so the board
   layout stays put (no reflow/jump) while clearly signalling where the card can't go.
   A diagonal hatch plus grayscale make the blocked columns unmistakable. */
.pipelineColumnDisabled {
	cursor: not-allowed;
}
#dashboardPipelineWrapper td.pipelineColumnDisabled {
	background-color: var(--main-background-color, #f8f9fb);
	background-image: repeating-linear-gradient(
		135deg,
		rgba(120, 130, 145, 0.18) 0,
		rgba(120, 130, 145, 0.18) 9px,
		rgba(120, 130, 145, 0.06) 9px,
		rgba(120, 130, 145, 0.06) 18px
	);
	transition: background-color 0.15s ease-in-out;
}
.pipelineColumnDisabled .phaseName {
	opacity: 0.3;
	filter: grayscale(1);
	transition: opacity 0.15s ease-in-out;
}
.pipelineColumnDisabled .pipelineBox:not(.ui-sortable-helper) {
	opacity: 0.28;
	filter: grayscale(0.9);
	transition: opacity 0.15s ease-in-out, filter 0.15s ease-in-out;
}

#allContactsList p {
	margin: 2px 3px 2px 5px;
}

.hoverHighlight {
	background-color: #fffff0;
}
.hoverGreenBorder {
	border: 2px solid #16b370;
}

#invoice {
	background: var(--content-background-color, #fff);;
	box-shadow: none;
	width: 800px;
	margin: 10px auto 10px auto;
	border: 1px solid var(--content-border-color, #e2e3e5);
	padding: 5px;
}
#invoice .ui-widget-content {
	border: 1px solid var(--content-border-color, #e2e3e5) !important;
	border-top: 0px !important;
	border-bottom: 0px !important
}
.invoiceLineItem {
	border-bottom: 1px dotted #777;
	margin-bottom: 5px;
	padding-bottom: 5px;
}
#invoice .cke_top {
	background: var(--invoice-cke-top, #f8f9fb) !important;
}
#invoice #saveTemplate div, #invoice #loadTemplate div {
	margin: 5px 0px;
}

.opportunitiesButton {
	white-space: nowrap;
}

.loading_icon {
	width: 32px;
	height: 32px;
	margin: auto;
	opacity: 0.5;
	background-image: url("/app2/images/square_loading_icon.gif");
}

.loading_icon_small {
	width: 16px;
	height: 16px;
	margin: auto;
	opacity: 0.5;
	background-image: url("/app2/images/square_loading_icon_small.gif");
}


/* Contacts */
#newTag {
	border-top: 0px !important;
}
#newTag input {
	width: 100% !important;
    display: inline-block;
    margin: 5px 0px;
}
#allContactsDetail, #allContactsDetail > form, #allContactsDetail #ContactTabs {
	height: 100%;
}
#ContactTabs {
	padding: 0px !important;
}
#ContactTabs .ui-widget-header {
	margin: 0px !important;
    border-bottom: 1px solid var(--content-border-color, #e2e3e5) !important;
}
#ContactTabs .box {
	box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    border: 1px solid var(--content-border-color, #e2e3e5);
}
#ContactTabs-1, #ContactTabs-2, #ContactTabs-3, #ContactTabs-4, #ContactTabs-5, #ContactTabs-6, #ContactTabs-7, #ContactTabs-8 {
	padding: 30px;
	background: var(--body-background-color, #f8f9fb) !important;
}
#ContactTabs-2 {
	-webkit-overflow-scrolling: touch;
	overflow: auto;
	height: 100%;
}
#ContactTabs-9 {
	padding: 0px;
}
.teamInList {
    border: 1px solid var(--content-border-color, #e2e3e5) !important;
    background: #fff;
    box-shadow: none !important;
}
#opportunitiesLoadingDiv {
	padding: 10px;
	text-align: center;
}
#dashboardPipelineWrapper td {
	border-right: 1px solid var(--content-border-color, #e2e3e5);
}
#Contacts {
	width: auto;
	min-width: 1024px;
	box-shadow: none !important;
	background: transparent;
	margin-top: -30px;
}
#ContactsImport, #ContactsTools {
	box-shadow: none !important;
}
#Contacts-1 {
	width: auto;
	background: transparent !important;
}
#title_Contacts {
    padding: 75px 0px 0px 15px !important;
    color: transparent !important;
    padding-top: 30px !important;
}
#tagCloudWrapper {
	position: absolute;
	top: 0px;
	right: 20px;
	z-index: 2;
}
#tagCloud {
	background-image: var(--tag-cloud-image, url('/images/cloud-new.png')) !important;
	background-repeat:no-repeat;
	background-size: 100% 100%;
	width: 300px;
	max-width: 300px;
	min-width: 200px;
	height: 110px;
	max-height: 200px;
	float: right;
	overflow: auto;
	z-index: 2;
}
#Contacts_listContacts {
	float: left; 
	padding-top: 60px; 
	margin-top: 10px; 
	width: 77%;
}
#contacts_list_showing {
	float: left; 
	display: inline-block; 
	margin-top: 5px; 
	margin-right: 5px;
}

#contactMemberOf {
	clear: both; 
	float: left; 
	padding: 2px 0px 0px 20px;
}
#contactOtherUserFields {
	float: left; 
	margin-left: 15px; 
	padding-top: 2px; 
	display: inline-block; 
	white-space: nowrap;
}
#contactPrint {
	float: left; 
	margin-left: 15px; 
	padding-top: 2px; 
	display: inline-block; 
	white-space: nowrap;
}	
#contactEnvelope {
	float: left; 
	margin-left: 15px; 
	padding-top: 2px; 
	display: inline-block; 
	white-space: nowrap;
}
#listContactsButtonsWrapper {
	position: absolute;
	top: 0px;
	width: 60%;
	padding: 10px;
}
#contactWeather {
	float: left;
	margin-left: 15px;
	display: inline-block;
	margin-top: -2px;
	white-space: nowrap;
}
#contactWeather .fa-thermometer {
	color: darkblue;
	font-size: 16px;
	display: inline-block;
	margin-top: 5px;
}
#contactLocalTime {
	float: left;
	margin-left: 5px;
	display: inline-block;
	margin-top: 4px;
	white-space: nowrap;
}
#contactLocalTime .icon-clock {
	display: inline-block;
	vertical-align: middle;
	margin-top: -1px;
}
#deleteUnsubButtonsWrapper {
	float: right;
	font-weight: bold;
}
#deleteUnsubButtonsWrapper a {
	white-space: nowrap;
}
#deleteContactButton {
	font-weight: normal;
}
#unsubscribeContactButton {
	margin-right: 15px;
	font-weight: normal;
}
.dripStatus {
	padding: 3px; 
	white-space: nowrap; 
	background-color: var(--body-background-color, #f8f9fb); 
	border: 1px solid var(--content-border-color, #e2e3e5);
}

.contactsRow {
	box-shadow: none !important;
   	transition: all 0.3s ease;
    border: 1px solid var(--content-border-color, #e2e3e5);
}
.contactsRow td { background: var(--content-background-color, #fff); }
tr.contactsRow td:first-child { border-top-left-radius: 2px; }
tr.contactsRow td:first-child { border-bottom-left-radius: 2px; }
tr.contactsRow td:last-child { border-top-right-radius: 2px; }
tr.contactsRow td:last-child { border-bottom-right-radius: 2px; }

.contactsRow:hover {
    transform: scale(1.02) !important;
   	transition: all 0.3s ease;
 	box-shadow: 0px 0px 25px 10px var(--content-box-shadow-color, #e3eaf0) !important;
}
.contactsRowName {
	font-size: 14px;
}
.contactsRowTitle{
	font-style: italic;
	color: var(--contacts-row-title, #777);
}
.contactsRowTags {
	padding-top: 5px;
}
.contactsRowEmail {
	white-space: nowrap;
}
.contactsRowCompany .icon-company {
	vertical-align: middle;
	display: inline-block;
}
.contactsRowWebsite .icon-globe {
	vertical-align: middle;
	display: inline-block;
}
.contactsRowPicture {
	border-left: 1px solid var(--content-border-color, #e2e3e5);
	border-top: 1px solid var(--content-border-color, #e2e3e5);
	border-bottom: 1px solid var(--content-border-color, #e2e3e5);
	width: 100px;
	text-align: center;
}
.contactsRowPicture img {
    border-radius: 50%;
	max-width:70px;
	max-height:100px;
	margin: 3px;
	box-shadow: none;
	-webkit-box-shadow: none;
	cursor: pointer;
}
.contactsRowPicture img:hover {
}
.contactsRowPicture div {
	margin: 10px 0px;
}
.contactsRowPicture a {
	padding: 5px;
	white-space: nowrap;
}
.contactsRowPicture .icon-pencil {
	vertical-align: middle;
	margin-top: 0px;
	font-size: 16px;
}
.contactsRowPicture .icon-handshake {
	font-size: 16px;
}
.contactsRowPicture img {
	box-shadow: none !important;
}
.contactsRowNameEmailTagsCompany, .contactsRowAddress, .contactsRowDataFields {
	border-top: 1px solid var(--content-border-color, #e2e3e5);
	border-bottom: 1px solid var(--content-border-color, #e2e3e5);
}
.contactsRowPayments {
	border-right: 1px solid var(--content-border-color, #e2e3e5);
	border-top: 1px solid var(--content-border-color, #e2e3e5);
	border-bottom: 1px solid var(--content-border-color, #e2e3e5);
}
.contactsRowPicture a.ui-state-default:first-child {
	background: #28bc50 !important;
    padding: 5px 6px !important;
    border-color: #28bc50;
    color: #fff !important;
    border: 0px !important;
}
.contactsRowPicture a.ui-state-default:last-child {
	background: #0082fc !important;
    padding: 5px 6px !important;
    border-color: #0082fc;
    color: #fff !important;
    border: 0px !important;
}
.contactsRowPicture a.ui-state-default:first-child {
	background: #16b370 !important;
}
.contactsRowPicture a.ui-state-default:hover {
	opacity: 0.75;
}
.contactsListData {
    padding-left: 0px;
}

/* ============================================================
   Contact list cards — modern header panel + details + activity
   (replaces the old 5-column table row layout)
   ============================================================ */
#contactsListTable { width: 100%; display: block; }
.cb {
	position: relative;
	background: var(--content-background-color, #fff);
	border: 1px solid var(--content-border-color, #d5dbe6);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(16,24,40,.10), 0 6px 16px rgba(16,24,40,.10), 0 16px 32px -10px rgba(16,24,40,.16);
	overflow: hidden;
	transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.cb + .cb { margin-top: 16px; }
.cb:hover {
	border-color: var(--main-link-color, #0082fc);
	box-shadow: 0 2px 4px rgba(16,24,40,.10), 0 12px 24px rgba(16,24,40,.14), 0 24px 44px -12px rgba(16,24,40,.24);
	transform: translateY(-2px);
}

/* header band — white top bar; the blue gradient moves to the body below it */
.cb-hd {
	display: flex; align-items: center; gap: 16px; padding: 16px 20px;
	background: var(--content-background-color, #fff);
	border-bottom: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 12%, transparent);
}
.cb-av {
	flex: none; width: 60px; height: 60px; border-radius: 16px;
	display: grid; place-items: center; overflow: hidden;
	color: #fff; font-weight: 700; font-size: 20px; text-transform: uppercase;
	background: linear-gradient(135deg, #0ea5e9, #2563eb);
	box-shadow: 0 1px 2px rgba(16,24,40,.12);
}
.cb-av a {
	color: var(--content-background-color, #fff) !important;
	cursor: pointer;
}
.cb-av img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
/* Non-square pictures are letterboxed inside .cb-av; show neutral gray behind them (not the initials blue). */
.cb-av:has(img) { background: color-mix(in srgb, var(--main-text-color, #404e60) 14%, var(--content-background-color, #fff)); }
.cb-who { flex: 1; min-width: 0; }
.cb-nm {
	font-size: 18px; font-weight: 700; letter-spacing: -.01em;
	color: var(--main-text-color, #2c3846);
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cb-ttl { color: var(--main-text-color, #2c3846); opacity: .7; font-size: 13.5px; font-style: italic; margin-top: 1px; }
.cb-nm-email { color: inherit; font-size: 16px; text-decoration: none; word-break: break-all; }
.cb-nm-email:hover { text-decoration: underline; }
.cb-org { font-size: 13px; color: var(--gray-text-color, #5a6675); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cb-org a { color: var(--main-link-color, #0082fc); cursor: pointer; }
.cb-org [class^="icon-"], .cb-org [class*=" icon-"] { color: var(--gray-text-color, #8a97a6); }

/* header action buttons */
.cb-side { display: flex; align-items: center; gap: 8px; flex: none; }
.cb-hbtn {
	display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
	font-size: 13px; font-weight: 600; padding: 8px 13px; border-radius: 10px;
	border: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 18%, transparent); background: var(--content-background-color, #fff);
	color: var(--gray-text-color, #5a6675); cursor: pointer; transition: .15s;
}
.cb-hbtn:hover { text-decoration: none; }
.cb-hbtn [class^="icon-"], .cb-hbtn [class*=" icon-"] { font-size: 15px; line-height: 1; }
.cb-hbtn-details { background: var(--cb-details-bg, #16b370); border-color: var(--cb-details-bg, #16b370); color: #fff !important; }
.cb-hbtn-crm { background: var(--cb-crm-bg, #0082fc); border-color: var(--cb-crm-bg, #0082fc); color: #fff !important; }
.cb-hbtn-details:hover, .cb-hbtn-crm:hover { filter: brightness(1.06); color: #fff !important; }
.cb-hbtn-ghost { padding: 8px 11px; }
.cb-hbtn-ghost:hover { background: color-mix(in srgb, var(--content-background-color, #fff) 90%, var(--main-text-color, #404e60) 10%); }

/* mobile expand/contract chevron (hidden on desktop) */
.cb-expander {
	display: none; flex: none; width: 34px; height: 34px; border-radius: 10px;
	place-items: center; background: var(--content-background-color, #fff); border: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 18%, transparent);
	color: var(--main-text-color, #2c3846); cursor: pointer;
}
.cb-expander [class^="icon-"] { display: inline-block; transition: transform .2s; }

/* body: main + aside — carries a soft diagonal wash (gray top-left → light blue bottom-right) */
.cb-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 330px);
	background: linear-gradient(135deg, color-mix(in srgb, var(--content-background-color, #fff) 93%, var(--main-text-color, #404e60) 7%), color-mix(in srgb, var(--content-background-color, #fff) 86%, var(--main-link-color, #0082fc) 14%)); }
.cb-body:has(> .cb-aside:empty) { grid-template-columns: 1fr; }
.cb-main { padding: 16px 20px; min-width: 0; }

.cb-contact-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 14px; }
.cb-ci { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gray-text-color, #5a6675); min-width: 0; }
.cb-ci a, .cb-ci .cb-v { color: var(--main-text-color, #2c3846); }
.cb-ci a { cursor: pointer; }
.cb-ci [class^="icon-"], .cb-ci [class*=" icon-"] { color: var(--gray-text-color, #8a97a6); font-size: 14px; vertical-align: middle; line-height: 1; }
/* the contact-info rows keep their original classes; render them as inline chips */
.cb-contact-inline > div { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 0; float: none; font-size: 13px; color: var(--gray-text-color, #5a6675); min-width: 0; max-width: 100%; }
.cb-contact-inline > div:empty { display: none; }
.cb-contact-inline > div > a { display: inline-flex; align-items: center; gap: 5px; }
.cb-contact-inline a { color: var(--main-text-color, #2c3846); cursor: pointer; text-decoration: none; }
.cb-contact-inline [class^="icon-"], .cb-contact-inline [class*=" icon-"] { color: var(--gray-text-color, #8a97a6); font-size: 14px; vertical-align: middle; line-height: 1; }

.cb-tags { margin-bottom: 14px; }
.cb .tag {
	position: relative;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin: 0;
	padding: 5px 12px 5px 20px;
	border: 1px solid var(--content-border-color, #d5dbe6);
	border-radius: 999px;
	background-color: #f5e4ba;
	color: #2c3846;
	font-size: 11px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.4;
	word-break: break-word;
}
.cb-tags .tag { margin: 0 6px 6px 0; }
.cb .tag:hover { text-decoration: none; }
/* Tags are <a> links: pin the tag text color on the anchor so the theme link color (esp. Dark) can't override it. */
.cb a.tag,
.cb a.tag:hover,
.cb a.tag:focus,
.cb a.tag:active { color: #2c3846 !important; }
.cb .tagHole {
	position: absolute;
	top: 5px;
	left: 7px;
	width: 6px;
	height: 6px;
	margin: 0;
	border-radius: 50%;
	background: var(--content-background-color, #fff);
	border: 1px solid rgba(64,78,96,.5);
	box-shadow: inset 0 1px 1px rgba(16,24,40,.25);
	font-size: 0;
	line-height: 0;
	color: transparent;
}

.cb-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 24px; align-items: start; }
.cb-kv { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb-kv-sep { grid-column: 1 / -1; }
.cb-fields .contactsListField { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-text-color, #8a97a6); font-weight: 600; }
.cb-fields .contactsListData { font-size: 13.5px; color: var(--main-text-color, #2c3846); word-break: break-word; }
.cb-kv-address .contactsListData { line-height: 1.5; }
.cb-map-link { margin-left: 6px; color: var(--main-link-color, #0082fc); text-decoration: none; font-size: 12px; vertical-align: middle; }
.cb-map-link:hover { color: var(--main-link-hover-color, #0082fc); }
.cb-fields .italic { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-text-color, #8a97a6); font-style: normal; margin-top: 6px; }
.cb-fields .cb-fields-sep { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.cb-fields .cb-fields-sep::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .3; }

/* aside (async payments / activities target) — sits at the blue (bottom-right) end of the body wash */
.cb-aside {
	background: var(--main-background-color, #f0f3f8);
	background: color-mix(in srgb, var(--content-background-color, #fff) 86%, var(--main-link-color, #0082fc) 14%);
	border-left: 1px solid color-mix(in srgb, var(--main-link-color, #0082fc) 14%, transparent);
	padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.cb-aside:empty { display: none; }
.cb-qa { display: flex; gap: 8px; flex-wrap: wrap; }
.cb-qa a { display: inline-flex; align-items: center; gap: 6px; }
.cb-aside .contactsListCRMactivity { font-size: 13px; font-weight: 600; color: var(--main-text-color, #2c3846); margin-top: 6px; }
.cb-aside .contactsListCRMdata { font-size: 12px; color: var(--gray-text-color, #8a97a6); margin: 1px 0 4px 22px; }
.cb-aside .recurringPayment { font-size: 12px; color: var(--gray-text-color, #5a6675); }
.cb-aside .contactsListConversionSum { font-size: 12px; }
/* darker green for the conversion totals so they read clearly on the light-blue aside */
.cb-aside .contactsListConversionSum, .cb-aside .greenText { color: var(--dark-green-text-color, #0f8554) !important; }
/* time-in-CRM chip: moved out of the top contact-info row to the bottom-left of the aside (pinned via order + auto top margin) */
.cb-aside-age { order: 10; margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-text-color, #8a97a6); }
.cb-aside-age [class^="icon-"], .cb-aside-age [class*=" icon-"] { color: var(--gray-text-color, #8a97a6); font-size: 13px; line-height: 1; }

@media (max-width: 900px) {
	.cb-body { grid-template-columns: 1fr; }
	.cb-aside { border-left: 0; border-top: 1px solid var(--content-border-color, #e6e9ee); }
}
@media (max-width: 640px) {
	.cb-hd {
		position: relative; display: grid; grid-template-columns: auto 1fr;
		grid-template-areas: "av who" "side side"; align-items: start; gap: 10px 12px; padding: 14px 16px;
	}
	.cb-av { grid-area: av; width: 48px; height: 48px; border-radius: 12px; font-size: 16px; }
	.cb-who { grid-area: who; }
	.cb-nm { font-size: 16px; padding-right: 42px; }
	.cb-side { grid-area: side; justify-content: flex-start; margin-top: 2px; }
	.cb-expander { position: absolute; top: 12px; right: 12px; display: grid; }
	.cb-hbtn .cb-lbl { display: none; }
	.cb-hbtn { padding: 8px 11px; }
	.cb-fields { grid-template-columns: 1fr; }
	.cb-body { display: none; }
	.cb.expanded .cb-body { display: grid; grid-template-columns: 1fr; }
	.cb.expanded .cb-expander [class^="icon-"] { transform: rotate(180deg); }
}

#contactCRM .container {
	background: var(--main-background-color, #f8f9fb);
}
.company-phone-edit {
	padding-left: 73px !important;
	padding-right: 0px !important;
}
.box {
    border: 1px solid var(--content-border-color, #e2e3e5);
}
.contactsColumn {
	width: 33%;
	vertical-align: top;
}
.flex-value input, .flex-value textarea {
    box-sizing: border-box;
    box-shadow: none;
    border: 1px solid var(--content-border-color, #e2e3e5);
    margin-top: 5px;
    background: var(--main-background-color, #f8f9fb) !important;
}
.contactsColumn select {
    box-sizing: border-box;
    box-shadow: none;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--content-border-color, #e2e3e5) !important;
    margin-top: 5px;
	width: 100% !important;
	max-width: 100% !important;
	height: 30px !important;
	padding: 6px 30px 6px 10px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><g color="slategray"><path d="M7 10l5 5 5-5z" fill="currentcolor" stroke="currentcolor" /><path d="M0 0h24v24H0z" fill="none"/></g></svg>') calc(100% - 5px) 50% no-repeat var(--contacts-input-background-color, #f8f9fb) !important;
}
.contactsColumn select:hover {
    border-bottom: 1px solid var(--medium-gray-text-color, #bac4d0) !important;
}
.contactsColumn input, .contactsColumn textarea {
    box-sizing: border-box;
    border: none;
    margin-top: 5px;
    background: var(--contacts-input-background-color, #f8f9fb) !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden;
}
.contactsColumn input:focus{
	box-shadow: inset 0px -1px 0px var(--main-text-color, #404e60) !important
}
.contactsColumn textarea:focus {
	box-shadow: inset 0px 0px 1px var(--main-text-color, #404e60) !important
}
@media screen and (max-width: 1350px){
	.contactsColumn input, .contactsColumn textarea, .flex-value input, .flex-value textarea {
		font-size: 11px;
		padding: 2px;
	}
}

#overdueActivitiesBadge {
	display: inline-block;
	vertical-align: top;
	margin-top: 14px;
	padding: 2px 8px !important;
}

.userDataCluster td:first-child {
	font-weight: bold;
	color: var(--gray-text-color, #6a7480);
}
.userFieldCluster {
	border-radius: 14px !important;
}
.userFieldCluster td {
	word-break: break-all;
}
.userFieldCluster td:first-child {
	word-break: break-word;
}
.userFieldCluster td textarea {
	word-break: break-word;
}
#secondaryCompanies {
	margin-bottom: 10px;
}
#secondaryCompanies li {
	font-size: 14px;
}
#secondaryCompanies li .icon-delete {
	color: var(--red-text-color, #bd0008);
	vertical-align: middle;
}
#secondaryCompanies li .icon-delete:hover {
	color: var(--red-text-color, #bd0008);
}
#contactEmail {
	text-transform: lowercase;
}
#PrimaryCompanyContact,#SecondaryCompanyContact {
	word-break: break-word;
}

#groupsFilterWrapper {
	margin: 7px 0px;
}
#groupsTabTopLinks {
	white-space: nowrap;
	margin-bottom: 25px;
}
.box-style1, .groupFolderBox {
	box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0) !important;
	border: 1px solid var(--content-border-color, #e2e3e5);
}
.groupFolderBox {
	box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    border: 1px solid var(--content-border-color, #e2e3e5);
}
#newAssignmentButton, #newTagButton {
	background-color: #fff;
    border: 1px solid var(--content-border-color, #e2e3e5);
    box-shadow: none !important;
    padding: 5px 10px !important;
    border-radius: 50px;
}
#newAssignmentButton img, #newTagButton img {
	display: none !important;
}
.cluster {
	background: var(--content-background-color, #fff) !important;
	box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0) !important;
    border: 1px solid var(--content-border-color, #e2e3e5) !important;
}
#notDisplayedFields {
	background-color: var(--content-background-color, #fff) !important;
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0) !important;
    border: 1px solid var(--content-border-color, #e2e3e5) !important;
}
#contactsExportWrapper, #contactsResearchWrapper, #reportsWrapper {
	box-shadow: none;
	border: 1px solid var(--content-border-color, #e2e3e5);
}
#contactNextPrev {
	margin: 3px 60px 0px 0px;
	font-size: 30px;
	white-space: nowrap;
}
#contactNextPrev a {
	color: #c2c3c5;
}
#contactNextPrev a:hover {
	color: #a2a3a5;
	box-shadow: inset 0 0 0 1000px rgba(0,0,0,.1);
}
#availableToContacts2checkbox, #availableToCompanies2checkbox, #availableToBoth2checkbox {
	width: auto;
}
.ui-datepicker-calendar a.ui-state-default {
    padding: 5px !important;
    border-radius: 0px;
}

#ContactTabs-5 #attributeHeadline {
	float: left; 
	font-size: 14px;
}
#ContactTabs-5 #attributionButtons {
	float: right; 
	margin-right: 2%;
}
#ContactTabs-5 #attributionButtons a {
	white-space: nowrap;
}
#ContactTabs-5 #contactAttributionDataTable {
	width: 99%;
}
#ContactTabs-5 .contactAttributionTD {
	vertical-align: top;
}

.attributionBox, .displayCustomObject {
    box-shadow: none !important;
    border: 1px solid var(--content-border-color, #e2e3e5);
}
.attributionBox {
	box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    border: 1px solid var(--content-border-color, #e2e3e5);
}
#ContactTabs-7 select {
    background-color: #fff !important;
}
#Contacts_list_pager select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><g color="slategray"><path d="M7 10l5 5 5-5z" fill="currentcolor" stroke="currentcolor" /><path d="M0 0h24v24H0z" fill="none"/></g></svg>') calc(100% - 5px) 50% no-repeat #f8f9fb !important;
	padding: 6px 30px 6px 10px;
}
#Contacts_list_pager a.ui-state-default {
    padding: 2px !important;
    margin-left: -2px;
}
.searchBox {
	outline: none !important;
	border: 1px solid var(--content-border-color, #e2e3e5) !important;
}
#contactsSearchBox .searchBox {
    height: 42px !important;
    border: 1px solid var(--content-border-color, #e2e3e5);
    vertical-align: middle;
}
.searchBox input.searchInput {
    border: 0px !important;
    height: 40px !important;
}
.searchBox button.searchButton {
	background-color: #0082fc;
	border: 1px solid #0082fc;
}
.searchBox button.searchButton:hover {
	box-shadow: inset 0 0 0 1000px rgba(0,0,0,.1);
}
.Contacts_filter_advanced input {
    max-width: 180px !important;
}
.Contacts_filter_advanced input, .Contacts_filter_advanced select, .Contacts_filter_order_by input, .Contacts_filter_order_by select {
    border: 1px solid var(--input-border-color, #e2e3e5) ;
    padding: 5px;
}
.Contacts_filter_advanced select, .Contacts_filter_order_by select {
	height: auto;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><g color="slategray"><path d="M7 10l5 5 5-5z" fill="currentcolor" stroke="currentcolor" /><path d="M0 0h24v24H0z" fill="none"/></g></svg>') calc(100% - 5px) 50% no-repeat #f8f9fb !important;
	padding: 6px 30px 6px 10px !important;
}
.hideWhenPrinting a.ui-state-default {
    padding: 5px !important;
    margin: 0px 5px !important;
}
.ln-letters a {
    background-color: var(--content-background-color, #fff);
    color: var(--main-text-color, #404e60);
    border: 1px solid var(--content-border-color, #e2e3e5);
}
.ln-letters a:hover, .ln-letters .ln-selected {
    background-color: #0082fc;
    color: #fff;
}
#cleanContactsDiv {
    background-color: var(--content-background-color, #fff) !important;
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    border: 1px solid var(--content-border-color, #e2e3e5);
}
#Contacts-3 #contactsToDoListTable {
	width: 100%;
	table-layout: fixed;
}
#Contacts-3 #contactsToDoListTableLeftColumn {
	vertical-align: top;
	width: 350px;
}
#Contacts-3 #contactsToDoListTableRightColumn {
	vertical-align: top;
	padding-top: 24px;
	padding-left: 20px;
}
#Contacts-3 #contactsToDoListTable #contactsToDoWrapper #dashboardNewsFeed, #Contacts-3 #contactsToDoListTable #contactsToDoWrapper #dashboardRecentActions {
    height: 45vh;
    overflow-y: scroll;
}
#Contacts-3 #contactsToDoListTable #dashboardNewsFeed > span {
    position: absolute;
    left: 290px;
    margin-top: 16px;
}
#Contacts-3 #contactsToDoListTable #searchOverdueActivitiesField {
    width: 93% !important;
}
#Contacts-3 #contactsToDoListTable #searchOverdueActivities {
    text-align: right;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
}

#Contacts-3 #crmActivitiesToDoReportsChart {
	background-color: var(--content-background-color, #fff);
	border: 1px solid var(--content-border-color, #e2e3e5);
	margin-top: -13px;
	width: 100% !important;
	display: block;
	box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
}
#Contacts-3 #crmActivitiesToDoReportsDetails .activityNotes, #mydialog #crmActivitiesToDoReportsDetails .activityNotes {
	margin-top: 1px;
	margin-left: 74px;
}
#scatterChart, #coldContactsChart {
	box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    border: 1px solid var(--content-border-color, #e2e3e5);
}
#predictionWrapper a.ui-state-default {
	display: inline-block;
}
.contactsColumn .icon-globe {
	margin-left: -25px;
    background: transparent !important;
    z-index: 999999;
    position: absolute;
    margin-top: 6px;
    padding: 4px;
}
.mainbox-content .newCheckboxWrapper {
	width: auto;
}
.customObjectsWrapperCompany {
	background: var(--content-background-color, #fff); 
	padding: 10px;
}
.customObjectsWrapperCompany .customObjectSelectorCheckboxes {
	margin-bottom: 10px;
}
.mainbox-content .customObjectsWrapperCompany .customObjectSelectorCheckboxes label {
	margin-top: 0px;
	float: left;
}
.mainbox-content .customObjectsWrapperCompany .customObjectSelectorCheckboxes span {
	float: left;
}
.mainbox-content .customObjectsWrapperCompany .customObjectSelectorCheckboxes .newCheckboxIndicator {
	left: 12px !important;
}
.newCustomObjectWrapper {
	clear: both;
	padding-top: 10px !important;
}
.easyGroupAssignerPagination > span {
	float: left;
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
}
#easyGroupAssignerLeftPagination, #easyGroupAssignerRightPagination {
	margin-top: -5px;
}
#contactStatsChart, #contactStatsHoursChart {
	width: 80%;
	margin: 10px auto;
	height: 400px;
	padding: 10px;
	background: var(--content-background-color, #fff);
	box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    border: 1px solid var(--content-border-color, #e2e3e5);
}
#hotContactsWrapper {
	margin-top: -15px;
}
#hotContactsWrapper .ui-selectmenu-button {
    border: 1px solid var(--content-border-color, #e2e3e5);
    color: var(--main-text-color, #404e60);
}
#hotContactsTable .hotActivityScore a {
    color: #16b370;
}
#hotContactsTable .hotDemographicScore a {
    color: #0082fc;
}
#hotContactsTable .hotTotalScore a {
    color: #ffa101;
}
#coldContactsWrapper {
	margin-top: -15px;
}

#newQuickActivityTable {
	clear: both; 
	float: none;
	margin: 10px auto 0px auto;
}
#Contact_new_form input[type=checkbox] {
	height: 14px;
	width: 14px;
	vertical-align: middle;
	margin-top: 1px;
	margin-right: 2px;
}

/* ============================================================
   Create New Contact — modernized single-column form (Concept A)
   Layout/styling only; scoped to #Contact_new_form. Fields are
   generated in libs/Model/Contacts/HTML.pm.
   ============================================================ */
.cnfForm {
	max-width: 500px;
	margin: 4px auto 2px;
	padding: 5px;
	text-align: left;
}
.cnfForm .cnfField {
	position: relative;
	margin: 0 0 11px;
	text-align: left;
}
/* shared control look — DIRECT children only, so the intl-tel-input-wrapped
   phone input and the nested workflow date/time controls are NOT matched */
#Contact_new_form .cnfField > input[type=text],
#Contact_new_form .cnfField > input[type=email],
#Contact_new_form .cnfField > input[type=url],
#Contact_new_form .cnfField > textarea,
#Contact_new_form .cnfField > select {
	box-sizing: border-box;
	width: 100% !important;
	max-width: none !important;
	font-size: 14px;
	line-height: 1.4;
	color: var(--input-text-color, #404e60);
	background-color: var(--input-background-color, #fff) !important;
	border: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 22%, transparent) !important;
	border-radius: 10px !important;
	padding: 10px 12px !important;
	transition: border-color .14s ease, box-shadow .14s ease;
}
#Contact_new_form .cnfField > textarea {
	min-height: 70px;
	resize: vertical;
}
/* selects keep the existing chevron background; align box + spacing only */
#Contact_new_form .cnfField > select {
	padding: 10px 34px 10px 12px !important;
}
/* focus state */
#Contact_new_form .cnfField > input:focus,
#Contact_new_form .cnfField > textarea:focus,
#Contact_new_form .cnfField > select:focus {
	outline: none;
	border-color: var(--main-link-color, #0082fc) !important;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--main-link-color, #0082fc) 16%, transparent) !important;
}
/* fixed top label (selects, phone, textarea, checkbox groups) */
.cnfForm .cnfTop > label {
	display: block;
	margin: 0 0 5px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--main-text-secondary-color, #6b7787);
	text-align: left;
}
/* floating label (text fields) */
.cnfForm .cnfFloat > label {
	position: absolute;
	left: 12px;
	top: 12px;
	margin: 0;
	padding: 0 4px;
	font-size: 14px;
	font-weight: 400;
	color: var(--main-text-tertiary-color, #8a94a2);
	pointer-events: none;
	transition: top .13s ease, left .13s ease, font-size .13s ease, color .13s ease;
}
.cnfForm .cnfFloat > input:not([type=hidden]):focus ~ label,
.cnfForm .cnfFloat > input:not([type=hidden]):not(:placeholder-shown) ~ label {
	top: -8px;
	left: 9px;
	font-size: 11px;
	font-weight: 600;
	color: var(--main-link-color, #0082fc);
	background-color: var(--input-background-color, #fff);
	border-top: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 22%, transparent);
	border-radius: 10px 10px 0 0;
}
/* hide the real placeholder until focus so it doesn't clash with the resting label */
.cnfForm .cnfFloat > input::placeholder { color: transparent !important; }
.cnfForm .cnfFloat > input:focus::placeholder { color: var(--main-text-tertiary-color, #8a94a2) !important; }
/* selects + phone inputs always show a value (or the country flag / dial code), so
   their label is permanently floated onto the top border — matches the floated look
   of the text-input labels for a consistent form. z-index lifts the label's notch
   above the position:relative intl-tel-input (.iti) wrapper. */
.cnfForm .cnfSelect > label,
.cnfForm .cnfPhone > label {
	position: absolute;
	top: -8px;
	left: 9px;
	margin: 0;
	padding: 0 4px;
	font-size: 11px;
	font-weight: 600;
	color: var(--main-link-color, #0082fc);
	background-color: var(--input-background-color, #fff);
	border-top: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 22%, transparent);
	border-radius: 10px 10px 0 0;
	pointer-events: none;
	z-index: 2;
}
/* required marker */
.cnfForm .cnfReq {
	color: #e5484d;
	margin-left: 3px;
	font-weight: 700;
}
/* intl phone widget: intlTelInput sets the input's padding-left INLINE to clear
   the flag + dial code, so we must NOT set padding-left here (it would override
   the inline value and the country picker would overlap the number) */
#Contact_new_form .cnfPhone .iti { display: block; width: 100%; }
#Contact_new_form .cnfPhone .iti input[type=text] {
	box-sizing: border-box;
	width: 100% !important;
	max-width: none !important;
	font-size: 14px;
	line-height: 1.4;
	color: var(--input-text-color, #404e60);
	background-color: var(--input-background-color, #fff) !important;
	border: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 22%, transparent) !important;
	border-radius: 10px !important;
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	padding-right: 12px !important;
	transition: border-color .14s ease, box-shadow .14s ease;
}
#Contact_new_form .cnfPhone .iti input[type=text]:focus {
	outline: none;
	border-color: var(--main-link-color, #0082fc) !important;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--main-link-color, #0082fc) 16%, transparent) !important;
}
/* Activate Workflow — first-activity date + time on a single row */
#Contact_new_form #activateWorkflowActivityStartLabel {
	margin: 8px 0 0;
	padding-left: 2px;
	font-size: 12px;
	font-weight: 600;
	color: var(--main-text-secondary-color, #6b7787);
}
#Contact_new_form .cnfWfRow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
}
#Contact_new_form .cnfWfRow #displayActivateWorkflowActivityStart {
	flex: 1 1 150px;
	min-width: 120px;
	width: auto !important;
	box-sizing: border-box;
	font-size: 14px;
	line-height: 1.4;
	color: var(--input-text-color, #404e60);
	background-color: var(--input-background-color, #fff) !important;
	border: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 22%, transparent) !important;
	border-radius: 10px !important;
	padding: 10px 12px !important;
	transition: border-color .14s ease, box-shadow .14s ease;
}
#Contact_new_form .cnfWfRow select {
	flex: 0 0 auto;
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	box-sizing: border-box;
	font-size: 14px;
	color: var(--input-text-color, #404e60);
	background-color: var(--input-background-color, #fff) !important;
	border: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 22%, transparent) !important;
	border-radius: 10px !important;
	padding: 10px 30px 10px 10px !important;
}
#Contact_new_form .cnfWfRow #displayActivateWorkflowActivityStart:focus,
#Contact_new_form .cnfWfRow select:focus {
	outline: none;
	border-color: var(--main-link-color, #0082fc) !important;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--main-link-color, #0082fc) 16%, transparent) !important;
}
/* user-defined checkbox group */
#Contact_new_form .cnfCheckboxField .newContactCheckboxUserFieldWrapper {
	border: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 22%, transparent);
	border-radius: 10px;
	padding: 8px 10px;
}
/* opt-in checkboxes */
.cnfForm .cnfChecks {
	max-width: 500px;
	margin: 9px auto 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--main-text-color, #404e60);
	text-align: left;
}
/* error banner + voice hint alignment */
#Contact_new_form #Contact_new_form_error {
	max-width: 500px;
	margin: 0 auto 10px;
	text-align: left;
}
#Contact_new_form #newContactSpeechRecognition {
	max-width: 500px;
	margin: 0 auto 12px;
	padding: 8px 12px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--main-link-color, #0082fc) 10%, var(--input-background-color, #fff));
	border: 1px solid color-mix(in srgb, var(--main-link-color, #0082fc) 24%, transparent);
	color: var(--main-link-color, #0082fc);
	font-size: 12.5px;
}
/* "Fill this form by voice" toggle injected into the Create New Contact dialog title bar */
.ui-dialog .ui-dialog-titlebar .cnfTitleMic {
	position: absolute;
	top: 50%;
	right: 4.6em;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 5px 12px 5px 10px;
	border-radius: 999px;
	cursor: pointer;
	background: color-mix(in srgb, var(--main-link-color, #0082fc) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--main-link-color, #0082fc) 42%, transparent);
	color: var(--main-link-color, #0082fc);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.ui-dialog .ui-dialog-titlebar .cnfTitleMic:hover {
	background: color-mix(in srgb, var(--main-link-color, #0082fc) 20%, transparent);
	border-color: color-mix(in srgb, var(--main-link-color, #0082fc) 62%, transparent);
	box-shadow: 0 2px 10px color-mix(in srgb, var(--main-link-color, #0082fc) 22%, transparent);
}
.ui-dialog .ui-dialog-titlebar .cnfTitleMic .cnfTitleMicGlyph {
	display: inline-flex;
	width: 14px;
	height: 14px;
	position: relative;
}
.ui-dialog .ui-dialog-titlebar .cnfTitleMic .cnfTitleMicGlyph svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}
.ui-dialog .ui-dialog-titlebar .cnfTitleMic.cnfMicOn {
	background: color-mix(in srgb, #e5484d 15%, var(--content-background-color, #fff));
	border-color: color-mix(in srgb, #e5484d 55%, transparent);
	color: #e5484d;
}
.ui-dialog .ui-dialog-titlebar .cnfTitleMic.cnfMicOn .cnfTitleMicGlyph::after {
	content: "";
	position: absolute;
	top: -4px;
	right: -4px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #e5484d;
	box-shadow: 0 0 0 0 rgba(229, 72, 77, .55);
	animation: cnfMicPulse 1.3s infinite;
}
@keyframes cnfMicPulse {
	0%   { box-shadow: 0 0 0 0 rgba(229, 72, 77, .55); }
	70%  { box-shadow: 0 0 0 7px rgba(229, 72, 77, 0); }
	100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); }
}
/* narrow screens: compact the title-bar voice toggle to icon-only so it clears the title */
@media (max-width: 520px) {
	.ui-dialog .ui-dialog-titlebar .cnfTitleMic .cnfTitleMicLabel { display: none; }
	.ui-dialog .ui-dialog-titlebar .cnfTitleMic { right: 3.6em; padding: 5px 7px; gap: 0; }
}
.newContactCheckboxUserFieldWrapper {
	max-height: 138px; 
	overflow: auto;
}


.clusterTitle {
	font-size: 14px;
	border: 1px dotted #999;
	padding: 3px;
}
.contactsClusterTitle {
	font-size: 18px;
	color: var(--gray-text-color, #6a7480);
	margin-bottom: 5px;
}
#addNewCompanyLink {
	display: inline-block;
	margin-bottom: 10px;
}
#addNewCompany {
	float: right;
	width: 500px;
	margin: 35px auto 20px auto;
	padding: 10px;
	border: 1px solid var(--content-border-color, #e2e3e5);
	border-radius: 2px;
	background: var(--content-background-color, #fff);
	color: var(--main-text-color, #404e60);
	clear: both;
}
#dlgCompanyView, #dlgCompanyView .container {
    background: var(--main-background-color, #f8f9fb);
}
.customObjectsWrapperCompany .ui-selectmenu-button, #companiesTabContent .ui-selectmenu-button, #activity-panel .ui-selectmenu-button, #activity-panel input, #activity-panel textarea {
    background: var(--input-background-color, #f8f9fb);
    border: 1px solid var(--input-border-color, #e2e3e5);
    color: var(--input-text-color, #404e60);
}
#dlgContactFilterPick {
	padding: 0px 15px 15px 15px !important;
}


/* Contacts :: Fields */
.ai-badge {
	color: #f2f3f5;
	background: #222325;
	font-size: 10px;
	border-radius: 5px;
	font-weight: bold;
	padding: 1px 2px;
	vertical-align: middle;
}
.userFieldListIcons {
	float: right;
}


/* Contacts :: Import */
.preview-paragraph.available-headers {
	overflow: auto;
}


/* Contacts :: Hot Contacts */
tr.hotContactsRow .icon-magnify {
	display: none;
	margin-left: 5px;
}
tr.hotContactsRow:hover .icon-magnify {
	display: inline;
}
.hotContactsDetail {
	display: none;
	padding: 5px 0px 25px 0px;
}

/* Contacts :: Cold Contacts */
#coldContactsResults {
	padding: 20px 40px;
}
#showAddColdToGroup {
	margin-top: 10px;
	padding-bottom: 10px;
}


/* CRM activity comments */
.viewAddCommentsLink {
	margin-top: -24px;
	float: right;
}
.notifyUserCheckboxWrapper {
	width: 32%;
	overflow: hidden;
	line-height: 24px;
	display: inline-block;
}
.existingActivityComments td {
	font-size: 12px;
	color: var(--main-text-color, #404e60);
}
.viewAddCommentsWrapper {
	clear: both;
	display: block;
}
.viewAddCommentsWrapper label {
	width: auto !important;
	float: none !important;
}
.viewAddCommentsWrapper table {
	width: 90%;
}
.notifyUserCheckboxName {
	margin-left: -11px;
}
#dlgContactView {
	padding: 0px !important;
}

/* CRM activity phone call transcripts */
.callSummaryLine {
	display: list-item;
	list-style-position: inside;
	list-style-type: disc;
}


/* Contacts > Import */
#ContactsImport {
    background: var(--main-background-color, #f8f9fb);
}
.ContactsImport_uploaded_files_container {
	background: transparent;
}
.ContactsImport_uploaded_files_preview_container, .ContactsImport_uploaded_files_list_container {
	border: 1px solid var(--content-border-color, #e2e3e5);
	background: var(--content-background-color, #fff);
	border-radius: 0px;
}
.ContactsImport_uploaded_files_list_container .list-header {
    background-color: #16b370 !important;
    color: #fff !important;
    height: auto !important;
    font-size: 14px !important;
    border-radius: 0px;
    border-top: 1px solid #16b370 !important;
    border-left: 1px solid #16b370 !important;
    border-right: 2px solid #16b370 !important;
    padding: 5px;
}
.ContactsImport_uploaded_files_container ul span.button {
    background-color: #0082fc !important;
    background-image: none !important;
    color: #fff;
    padding: 10px 0px !important;
}
.ContactsImport_uploaded_files_container ul span.button:hover {
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.1);
}
.ContactsImport_uploaded_files_preview_container, .ContactsImport_uploaded_files_list_container, .ContactsImport_salesforce_sidebar {
    border: 1px solid var(--content-border-color, #e2e3e5) ;
}
#ImportFileButton {
	background-image: none !important;
}
#ContactsImport_text_form_submit, #ContactsImport_csv_form_submit, #ContactsImport-4 button, #ContactsImport-6 button, #ContactsImport-11 button, #magento_import_btn, #ImportFileButton {
    background-color: #0082fc !important;
}
#ContactsImport_text_form_submit:hover, #ContactsImport_csv_form_submit:hover, #ContactsImport-4 button:hover, #ContactsImport-6 button:hover, #ContactsImport-11 button:hover, #magento_import_btn:hover, #ImportFileButton:hover {
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.1) !important;
}
#ContactsImport_finish_importing_contacts {
	border: 0px;
    box-shadow: none;
    padding: 10px 15px;
    border-radius: 50px;
    background: #0082fc;
}
#ContactsImport_finish_importing_contacts:hover {
	background: #5ba4e3;
}
.uploadFileButton {
	position: absolute;
	width: 56px;
	height: 56px;
	border-radius: 28px;
	box-shadow: none;
	background-image: none;
	background-color: #0082fc;
	text-align: center;
	font-size: 30px;
	color: #fff;
	z-index: 10;
	cursor: pointer;
	left: calc(50% - 76px);
	bottom: 10px;
}
.uploadFileButton:before {
    content: "\f067";
    font-family: FontAwesome;
    line-height: normal !important;
}
.uploadFileButton:hover {
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.1) !important;
    transform: scale(1.05);
    transition: all 0.3s ease;
}

#ContactsImport_text_form_submit, #ContactsImport_csv_form_submit, #ContactsImport-4 button, #ContactsImport-6 button, #ContactsImport-11 button, #magento_import_btn, #ImportFileButton  {
	border: 0px !important;
    box-shadow: none !important;
    padding: 10px 15px !important;
    border-radius: 50px;
}
#ContactsImport-7 .ContactsImport_uploaded_files_container {
	background: transparent !important;
}
#ContactsImport_text_form_contents, #ContactsImport_csv_form_contents {
    box-sizing: border-box;
    box-shadow: none;
    border: 1px solid var(--content-border-color, #e2e3e5);
}
#ImportFileButton {
    font-weight: normal;
}
#ImportFileButton:hover {
    font-weight: normal;
}

/* Contacts > Opportunities */
#opportunitiesListColumnsTable {
	display: none;
	margin-bottom: 20px;
}
#opportunitiesListTable_wrapper .dt-buttons {
	margin-top: 9px;
}
#opportunitiesListTableWrapper {
	background: var(--main-background-color, #fff); 
	padding: 15px; 
	margin: 20px 0px; 
	box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.15);
}
#opportunitiesListTable {
	width: 100% !important;
}
#opportunitiesListTable_wrapper .datatable {
	width: 100% !important;
}


/* Invoices */
#invoiceHeaderWrapper {
	width: calc(100% - 40px);
	padding: 20px;
	margin: 10px 0px;
	background: var(--main-background-color, #f8f9fb);
}
#invoiceHeaderWrapper div {
	margin: 10px 0px;
}
#recurringInvoiceStopDate {
	margin: 5px 0px;
}
.invoicePlusMinus {
	font-size: 10px;
	font-weight: bold;
	padding: 1px 4px;
	border-radius: 50%;
	border: 1px solid #999;
}
.invoicePlusMinus:hover {
	background-color: #0082fc;
	color: #fff;
}


/* Signup forms */
#outerWrapperSignupForms {
	margin: 30px;
}
#signupFormsListWrapper {
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    border: 1px solid var(--content-border-color, #e2e3e5);
    background: var(--content-background-color, #fff) !important;
    margin-top: 60px;
	height: auto;
	width: 100%;
}
#unconfirmedTable, #signedUpTable {
	border: 1px solid var(--content-border-color, #e2e3e5);
	border-collapse: collapse;
}
#signupFormContent {
	margin: 60px 0px 0px 15px;
}
#signupFormTemplatesTable {
	width: 100%;
}
#signupFormTemplatesTable td {
	text-align: center;
	padding-top: 15px;
}
#signupFormTemplatesTable td div.signupFormTemplateScreenshot {
	background: var(--content-background-color, #fff);
	padding-bottom: 12px;
	box-shadow: 0px 0px 10px 5px #fff;
}
#signupFormTemplatesTable td div.signupFormTemplateDescription {
	color: #777 !important;
	font-style: italic;
	margin-top: 10px;
}
#groupsTable {
	border-collapse: separate;
	border-spacing: 0px 15px;
}
#groupsTable tr:hover {
	background: var(--gray-background-color, #f3f3f3);
}
#groupsTable tr > :first-child {
	cursor: move;
}
#groupsTable td {
	padding: 3px;
}
#sortableSignupFormFields ul li {
	margin: 5px 0px 5px 0px;
	width: auto;
	display: block;
}
#sortableSignupFormFields ul li span {
	display: inline-block;
}
#easyBuilderFont-menu, #easyBuilderFontSize-menu {
	height: 250px;
	overflow-y: auto;
}
#formTabs select.ui-state-default {
	background: #fff;
}
.signupFormFieldLi {
	margin-bottom: 3px !important;
	padding: 3px;
	line-height: 30px;
}
.signupFormFieldLi .ui-icon {
	display: inline-block;
	cursor: pointer;
	vertical-align: top;
	margin-top: 6px;
}
.signupFormFieldLi .signupFormFieldName {
	width: 250px;
	display: inline-block;
	cursor: default;
}
.signupFormFieldLi .signupFormFieldOption {
	width: 100px;
	display: inline-block;
	vertical-align: top;
}
.signupFormFieldLi .signupFormFieldOption input {
	margin-top: 8px;
	display: inline-block;
	vertical-align: top;
}
.conditionalLogic {
	white-space: nowrap;
	margin-left: 30px;
	display: inline-block;
	vertical-align: top;
}
.conditionalLogic a:hover {
	color: #55fef3 !important;
}
#modifyCollectFunds {
	line-height: 40px;
}
#formTabs #rightEasyBuilder {
	background: transparent !important;
	margin-left: 15px;
}
#formTabs #rightEasyBuilder li, #formTabs #rightEasyBuilder li a, #formTabs #rightEasyBuilder li a:hover {
	background: transparent !important;
}
#formTabs #rightEasyBuilder li.easyBuilderField, #formTabs #rightEasyBuilder li.easyBuilderGroup {
	background: #fff !important;
	border-radius: 2px;
	border: 1px solid #ccc; 
	padding: 3px; 
	margin-top: 5px;
	cursor: move;
	clear: both;
}
@media screen and (max-width: 1500px) {
	.signupFormEasyBuilderWord {
		display: none;
	}
	.signupFormEasyBuilderIcon {
		display: inline-block !important;
		font-size: 16px !important;
		vertical-align: bottom !important;
	}
}
@media screen and (max-width: 1400px) {
	#easyBuilderSettingsWrapper td {
		font-size: 12px !important;
	}
}

/* Apps Overview */
#title_Apps {
	padding: 30px 0px 0px 20px !important;
}
.appsOverviewBox {
    width: 435px;
    float: left;
    border: 1px solid var(--content-border-color, #e2e3e5);
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    background: var(--content-background-color, #fff);
	height: 180px;
	padding: 20px;
	margin: 20px;
}
.appsOverviewBox a {
	font-size: 16px;
}
.appsOverviewBox:hover {
    transform: scale(1.05) !important;
   	transition: all 0.3s ease;
 	box-shadow: 0px 0px 25px 10px #e3eaf0 !important;
}


/* Forum */
#forumsActionButtons {
	position: absolute;
	right: 35px;
	margin-top: 35px;
}
#forumTopics {
	margin-top: 20px;
}
#forumMessages {
	margin-top: 0px !important;
	font-size: 14px;
	padding: 30px !important;
    background: var(--content-background-color, #fff) !important;
    margin-left: 0px !important;
}
#forumTopicsTable tr.even td, #forumTopicsTable tr.odd td {
	margin-bottom: 5px;
	padding-bottom: 5px;
	border-bottom: 1px dotted var(--content-border-color, #e2e3e5);
	vertical-align: top;
}
#title_Forums {
    padding: 30px 0px 15px 30px !important;
    margin: 0px !important;
}
#forumWrapper {
    width: auto;
    margin: 0px 30px;
}
#forumTopics {
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    border: 1px solid var(--content-border-color, #e2e3e5);
    background: var(--content-background-color, #fff) !important;
}

/* Accounting */
#accountingWrapper {
	padding: 30px;
}
.receivablesRowTd {
	color: var(--dark-blue-text-color, darkblue);
	line-height: 24px;
}
.receivablesRowTd span {
	font-weight: bold;
	vertical-align: top;
}
#title_Accounting {
    padding: 30px 0px 0px 30px !important;
}
#linkLibraryWrapper input {
    border: 1px solid var(--input-border-color, #e2e3e5);
    color: var(--input-text-color, #404e60);
    background: var(--input-background-color, #f8f9fb);
}
#accountingWrapper .ui-selectmenu-button {
    border: 1px solid var(--content-border-color, #e2e3e5);
    color: var(--main-text-color, #404e60);
    background: var(--main-background-color, #f8f9fb);
}

/* Advancement */
#title_Advancement {
    padding: 30px 0px 0px 30px !important;
}
#advancementWrapper {
    background: transparent !important;
    box-shadow: none !important;
    border: 0px !important;
    margin: 30px;
    padding: 0px;
}
#advancementWrapper td {
    padding-right: 30px;
}
#advancementWrapper .ui-corner-all {
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    border: 1px solid var(--content-border-color, #e2e3e5);
    background: #fff;
}

/* Brand Monitor */
#bm-main {
	margin: 30px 0px;
}
#bm-terms-outer h3, #bm-results-outer h3 {
	padding-left: 30px !important;
	margin-bottom: 0px !important;
}
#bm-results-outer .ui-tabs .ui-tabs-panel {
	background: #fff !important;
}

/* Coupons */
#couponList {
    margin-left: 30px;
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    border: 1px solid var(--content-border-color, #e2e3e5) !important;
    background: var(--content-background-color, #fff) !important;
	height: auto;
	width: 99%;
}
#couponDetail {
    margin: 0px 30px;
    padding: 30px;
	font-size: 14px;
}
#title_Coupons {
    padding: 30px 0px 0px 30px !important;
}
#couponList h6 {
	color: #fff;
	padding: 5px;
}
#CouponTabs a.ui-state-green, #CouponTabs a.ui-state-yellow, #CouponTabs a.ui-state-red {
    font-size: 16px;
}


/* Ticketing */
#title_Ticketing {
    padding: 42px 0px 0px 10px !important;
    color: transparent !important;
	clear: both;
	white-space: nowrap;
}
#Tickets {
	border: 0px;
    box-shadow: none;
    margin: 0px;
    background: transparent;
    padding: 0px;
}
#ticketingActionButtons {
	position: absolute;
    top: 10px;
    top: 193px;
    right: 275px;
    z-index: 9;
}
#newTicketWrapper {
	margin-right: 10px;
	display: inline-block;
	margin-top: -6px;
	vertical-align: middle;
}
#newTicketWrapper ~ span, #ticketForms-button {
    margin-top: 0px !important;
}
.newTicketUpdateEditorWrapper {
	width: 75%;
}
.newTicketUpdateLabelWrapper {
	padding-left: 30px;
}
#newTicketButtons {
	margin: 20px 0px 30px 0px;
	clear: both;
}
#unassignedTicketsTable, #openTicketsTable, #closedTicketsTable  {
    border: 1px solid var(--content-border-color, #e2e3e5);
    border-top: 0px;
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    margin-top: 40px !important;
    margin-bottom: 30px;
}
#Tickets .dt-buttons {
	margin: 8px 0px 0px 5px;
}
#ticketFormsList {
	font-size: 14px;
}
#ticketFormsList table {
    border-spacing: 0px;
}
#openTicketsTable_wrapper th, #unassignedTicketsTable_wrapper th, #closedTicketsTable_wrapper th {
	white-space: nowrap;
}
#ticketsMapControl {
    margin: 10px 0px;
}
#ticketsMap {
    width: 100%;
    border: 1px solid var(--content-border-color, #e2e3e5);
    border-top: 0px;
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    margin-bottom: 30px;
}
#editTicketFormDiv {
    padding-left: 30px;
}
#ticketResponsePerformance {
    cursor: auto;
    padding: 30px;
    background: background: var(--content-background-color, #fff);;
    margin-bottom: 30px;
    border: 1px solid var(--content-border-color, #e2e3e5);
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
}
#unassignedDataTableStates, #openDataTableStates, #closedDataTableStates {
	width: auto;
	float: left;
	margin-left: 10px;
	margin-top: 9px;
}
#searchTicketsResults {
	background: var(--content-background-color, #fff);
}
#searchTicketsResults table {
	width: 100%;
	table-layout: fixed;
}
#searchTicketsResults td:nth-child(1),#searchTicketsResults td:nth-child(2),#searchTicketsResults td:nth-child(3),#searchTicketsResults td:nth-child(4) {
	vertical-align: top;
}
#searchTicketsResults td:nth-child(5) {
	width: 50%;
	vertical-align: top;
	overflow-x: auto;
}

.assignedTicket.odd {
	background-color: var(--assigned-ticket-background-odd-color, #66ffc0) !important;
}
.assignedTicket.even {
	background-color: var(--assigned-ticket-background-even-color, #56f3b0) !important;
}
.assignedTicket.odd .sorting_1 {
	background-color: var(--assigned-ticket-background-odd-color, #66ffc0) !important;
}
.assignedTicket.even .sorting_1 {
	background-color: var(--assigned-ticket-background-even-color, #56f3b0) !important;
}
#Tickets-1, #Tickets-2, #Tickets-3, #Tickets-4, #Tickets-5, #Tickets-6, #Tickets-7, #Tickets-8, #Tickets-9 {
    background: transparent;
    margin: 0px 30px;
    padding: 0px;
}
#Tickets-4 h6 {
    border-top: 1px solid var(--content-border-color, #e2e3e5) !important;
}

#openTicketsTable a.ui-state-default {
    background-color: #fff !important;
    border: 1px solid var(--content-border-color, #e2e3e5);
    box-shadow: none !important;
    padding: 5px 10px !important;
    border-radius: 50px;
    background-image: none !important;
    margin: 0px 2px;
}
#openTicketsTable a.ui-state-default:hover {
    background-color: #218bcf !important;
}
#ticketDialogDetail a.ui-state-green, #ticketDialogDetail a.ui-state-yellow, #ticketDialogDetail a.ui-state-red, #Tickets-5 a.ui-state-green, #Tickets-5 a.ui-state-yellow, #Tickets-5 a.ui-state-red {
	font-size: 16px;
}
#Tickets-1 a.ui-state-green, #Tickets-1 a.ui-state-yellow, #Tickets-1 a.ui-state-red, #Tickets-2 a.ui-state-green, #Tickets-2 a.ui-state-yellow, #Tickets-2 a.ui-state-red, #Tickets-3 a.ui-state-green, #Tickets-3 a.ui-state-yellow, #Tickets-3 a.ui-state-red {
	padding: 3px 8px 4px 8px;
	font-size: 14px;
}
.ticketSemantics {
	margin-top: 10px;
}
.editProjectTaskBox {
	padding-bottom: 30px;
	background: var(--project-task-edit-background, #fff);
	border: 1px solid var(--content-border-color, #e2e3e5);
	margin-bottom: 60px;
}
.ticketUpdateColumnRight img {
	max-width: 100% !important;
}
.ticketUpdateColumnRight > div {
	padding: 10px;
}
.ticketUpdateColumnLeft img {
	width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid var(--content-border-color, #e2e3e5);
}
#ticketTeamTable img{
	max-width: 30px;
	max-height: 30px;
	border-radius: 50%;
}
#ticketTeamTable .ticketTeamInitials {
	width: 30px;
	height: 30px;
	display: inline-block;
	vertical-align: middle;
	line-height: 28px;
	background-color: #999;
	color: #fff;
	border-radius: 50%;
	text-align: center;
}
#ticketTeamTable .ticketTeamContact {
	line-height: 34px;
}
.permissionCell img {
	vertical-align: middle;
}
.ticketingPermissionAll .icon-add-plus {
	font-size: 18px;
    vertical-align: middle;
    display: inline-block;
    margin-top: 3px;
}
#ticketUpdatesWrapper {
    box-shadow: none !important;
    margin: 25px !important;
	padding: 0px;
}
#ticketUpdatesTable {
	width: 100%;
	table-layout: fixed;
}
#ticketUpdatesTable ul {
	list-style: disc;
	padding-left: 20px;
}
.ticketUpdateColumnMiddle {
	word-break: break-word;
}
#customFieldsInTicketCategory {
	margin: 10px 0px;
}
#customFieldsInTicketCategory li {
	cursor: move;
	margin: 10px 0px;
}
#newTicketField {
	margin: 5px 0px 20px 0px;
}
#ticketFieldsTable th {
	text-align: left;
}
#ticketFieldsTable .icon-advance {
	font-size: 20px;
	display: inline-block;
	vertical-align: bottom;
	padding-top: 5px;
}
.addUpdateToWikiLink, .deleteTicketLink {
	display: none;
}
tr.ticketDetailsTicketUpdateRow:hover .addUpdateToWikiLink, tr.ticketDetailsTicketUpdateRow:hover .deleteTicketLink {
	display: inline-block !important;
}
#ticketUpdatesWrapper .inputTextField {
	width: 250px;
}
#updateTicketButtonTd img {
	height: 24px;
	vertical-align: middle;
}
#ticketCategoriesWrapper, #otherGroupTicketCategories, #ticketFieldsTable {
	background: var(--content-background-color, #fff);
}



/* Project Manager Styles */
#title_Projects {
    padding: 30px 0px 0px 20px !important;
    color: transparent !important;
}
#emptyStateProject {
	max-height: 186px;
	max-width: 332px;
	width: 100%;
}
#projectManagerTabs-1 {
    padding: 0px 30px;
    background: var(--main-background-color, #f8f9fb) !important;
}
#projectManagerTabs {
    padding: 0px !important;
    margin-top: -25px;
}
#projectsActionButtons {
	position: absolute;
	right: 25px;
	margin-top: 12px;
}
#projectManagerTabs a.ui-state-green, #projectManagerTabs a.ui-state-yellow, #projectManagerTabs a.ui-state-red, #projectDetailContent a.ui-state-green, #projectDetailContent a.ui-state-yellow, #projectDetailContent a.ui-state-red {
	font-size: 16px;
}
#newProjectDiv select {
	background-color: var(--content-background-color, #fff);
}
#projectsTable {
	width: 100%;
    border: 1px solid var(--content-border-color, #e2e3e5);
    border-top: 0px;
	table-layout: fixed;
}
.projects_list_header {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	font-size: 14px;
	color: #fff;
	font-weight: bold;
	margin: 0;
}
.projects_list_footer {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	font-size: 14px;
	font-weight: bold;
	margin: 0;
}
.project_row_even {
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-left: solid 1px #aed0ea;
	border-right: solid 1px #aed0ea;
	background-color: var(--even-row-color, #f0f0f0);
	font-size: 14px;
	font-weight: normal;
	margin: 0;
	}
.project_row_odd {
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-left: solid 1px #aed0ea;
	border-right: solid 1px #aed0ea;
	background-color: var(--odd-row-color, #e0e0e0);
	font-size: 14px;
	font-weight: normal;
	margin: 0;
}
.projectButtonsCell {
	vertical-align: top;
	text-align: center;
	width: 10%;
}
.projectButtonsCell div {
	display: block;
	white-space: nowrap;
	padding: 5px 0px;
}
.projects_list_ganttloader {
	background-color: var(--content-background-color, #fff);
}
.projectNameLink, .projectNameLink a {
	font-weight: bold;
}
#projectDetailsHeader {
	display: block;
	padding: 8px;
	font-size: 14px;
	min-height: 78px;
	margin: -1px 0px 30px 0px;
    background-color: var(--content-background-color, #fff);
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    border: 1px solid var(--content-border-color, #e2e3e5);
}
#projects .ui-selectmenu-button {
	max-width: 93%;
}

.divider_right {
	border-right: dotted 1px #ddd;
	padding: 10px;
}
.divider_left {
	border-left: dotted 1px #ddd;
	padding: 10px;
}
.divider_none {
	padding: 10px;
}
.project_header_cell_right {
	border-right: solid 1px #3d4858;
	padding: 10px;
}
.project_header_cell_left {
	border-left: solid 1px #3d4858;
	padding: 10px;
}
#projectUpdateTable {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
	margin-top: 8px;
}
tr.projectUpdateRow ul {
    list-style: disc;
    padding: revert;
}
.projectColor {
	line-height: 10px;
	border-radius: 5px;
	width: 50px;
	margin-top: 5px;
	float: right;
}
#updatesForDiv {
	float: left;
}
#newProjectLink {
    width: auto;
    position: absolute;
    right: 30px;
    top: 85px;
}
#newProjectLink .ui-state-default {
    background: #0082fc !important;
    color: #fff;
    padding: 10px;/** inline to add **/
}
#newProjectLink .icon-add-plus {
    color: #fff;
}
#newProjectLink .ui-state-default:hover {
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.1);
}
.newProjectUpdateLink {
	display: inline;
	margin: 4px;
}
.projectUpdates {
	font-style: italic;
	font-size:	12px;
	color: var(--main-text-color, #404e60);
}
.projectMembers {
	font-size: 12px;
	color: var(--main-text-color, #404e60);
	margin-top: 7px;
}
.projectTaskDataContent p {
	margin-top: 0px;
	margin-bottom: 10px;
}
.projectChecklistDetail {
	display: none;
	position: absolute;
	z-index: 2;
	padding: 20px;
	border: 1px solid #333;
	border-radius: 2px;
	margin-left: 40px;
	background: var(--content-background-color, #fff);
	box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 2px 6px rgba(0,0,0,0.23);
	max-width: 70%;
}
.projectChecklistDetail li {
	white-space: normal;
}
#closedTasksP {
	margin: 10px;
}
#kanbanWrapper {
	width: 100%;
	overflow-x: auto;
}
#kanbanTableWrapper {
	padding-right: 200px;
	width: 100%;
	cursor: ew-resize;
	margin: auto;
}
#kanbanTable td {
	background-color: var(--main-background-color, #f8f9fb);
}
#kanbanTable li {
	background-color: var(--content-background-color, #fff);
	box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.15);
}
#kanbanDiv .ui-selectmenu-menu ul {
	width: auto !important;
}
#kanbanDiv .ui-button {
	padding: 1px 14px;
}
#kanbanProjectKeywordFilterSpan {
	display: inline-block;
	margin-top: 1px;
	margin-left: 10px;
	vertical-align: top;
}
.kanbanBoxColor {
	 float: left;
	 line-height: 10px;
	 border-radius: 5px;
	 width: 50px;
	 margin-top: 5px;
}
.kanbanDragDrop {
	float: right;
	margin-right: 10px;
}
.kanbanTaskTitleWrapper {
	float: left;
	width: 95%;
	padding: 5px 0px;
	font-size: 14px;
}
.kanbanProjectNameWrapper, .kanbanManagerNameWrapper {
	clear: both;
	font-size: 12px;
}
.kanbanBoxFooter {
	margin-top: 5px;
	line-height: 18px;
	white-space: nowrap;
}

.high_priority {
	color: #bd0008;
	font-weight: bold;
}
.progress_bar_wrapper {
	display: block;
	height:	22px;
}
ul.progress_bar {
	margin: 			0;
	padding: 			0;
	font-size:			10px;
	font-weight:		bold;
}
ul.progress_bar li {
	float:          	left;
	list-style:     	none;
	margin-right:		1px;
}
.jquery_button {
	-webkit-border-horizontal-spacing: 2px;
	-webkit-border-vertical-spacing: 2px;
	background-attachment: scroll;
	background-clip: border-box;
	background-color: #D7E6F9;
	background-image: url(/app2/styles/innerCSS0/images/ui-bg_glass_90_d7e6f9_1x400.png);
	background-origin: padding-box;
	border-bottom-color: #AED0EA;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-collapse: separate;
	border-left-color: #AED0EA;
	border-left-style: solid;
	border-left-width: 1px;
	border-right-color: #AED0EA;
	border-right-style: solid;
	border-right-width: 1px;
	border-top-color: #AED0EA;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	border-top-style: solid;
	border-top-width: 1px;
	color: #1E5188;
	cursor: pointer;
	display: inline;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	height: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	outline-color: #1E5188;
	outline-style: none;
	outline-width: 0px;
	padding-bottom: 0px;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 4px;
	width: 0px;
}
.projectLivePicture {
	max-width: 50px; 
	max-height: 50px; 
	border-radius: 50%;
}
.projectLiveInitials {
	height: 50px; 
	width: 50px; 
	border-radius: 50%; 
	background: #bac4d0; 
	color: #fff; 
	text-align: center; 
	display: inline-block; 
	line-height: 50px; 
	font-size: 20px;
}
.projectLiveGreenDot {
	position: absolute; 
	background: #16b370; 
	border-radius: 50%; 
	height: 20px; 
	width: 20px; 
	margin-top: -9px;
}
.projectLiveRedDot {
	position: absolute; 
	background: #bd0008; 
	border-radius: 50%; 
	height: 20px; 
	width: 20px; 
	margin-top: -9px;
}
.projectLiveGrayDot {
	position: absolute; 
	background: #bac4d0; 
	border-radius: 50%; 
	height: 20px; 
	width: 20px; 
	margin-top: -9px;
}
@media screen and (max-width: 1415px) {
    #projectManagerTabs .ui-tabs-anchor {
        padding: 5px!important;
        font-size: .8em;
    }
    #projectManagerTabs .ui-tabs-tab {
        margin: .5em !important;
    }
    #projectManagerTabs > ul > li > .help_icon {
        position: relative;
        top: .5em;
    }
}




/* Wiki */
#title_Wiki {
    padding: 25px 0px 15px 40px !important;
}
#wikiWrapper {
	width: auto;
    margin: 0px 30px;
}
#wikiGroupLogoWrapper {
	position: absolute; 
	left: 45%; 
	margin-top: 0px;
}
#wikiActionButtons {
    top: 130px !important;
	right: 35px;
    top: 130px !important;
    position: absolute;
}
#wikiActionButtons a {
	white-space: nowrap;
}
#wikiWrapperLeft {
	vertical-align: top;
	width: 28%;
	max-width: 28%;
}
#wikiTopicsOuterWrapper {
	max-height: calc(100vh - 200px);
	min-width: 150px;
	background: var(--content-background-color, #fff);
	border: 1px solid var(--content-border-color, #e2e3e5);
	color: var(--main-text-color, #404e60);
}
#wikiTopicsPublicInnerWrapper {
	overflow: auto;
	max-height: calc(100vh - 325px);
}
/* Collapsible wiki topic categories (state persisted in a session cookie). */
/* Emphasise ONLY the article currently open in the editor; nothing else in the
   tree is bolded. viewWiki() tags the open article's link with .wikiLinkActive. */
#wikiTopics #wikiTopicsWrapper .wikiLinks.wikiLinkActive {
	font-weight: bold;
}
/* Keep the tree self-contained: don't rely on the browser's default <ul>
   padding for indentation or the caret gutter. Other bundled stylesheets
   (jQuery UI, bootstrap, portal CSS) reset that default, which flattened the
   nesting and left the negative-margin carets with no gutter to sit in.
   Scoped to #wikiTopics so the Order/Delete dialogs (same #wikiTopicsWrapper
   id) are unaffected. */
#wikiTopics #wikiTopicsWrapper,
#wikiTopics #wikiTopicsWrapper ul {
	padding-left: 0;
}
/* Uniform 12px indent per nesting level (half the 24px caret width). The
   subtopic <ul> lives inside its parent <li>, so it needs no left offset of
   its own; the sub-sub <ul> is a sibling of its parent <li>, so it takes one
   step itself. Each nested <li> then adds one step. !important overrides the
   server's inline 19px margins. */
#wikiTopics #wikiTopicsWrapper ul.wikiSubtopic {
	margin-left: 0 !important;
}
#wikiTopics #wikiTopicsWrapper ul.wikiSubSubTopic {
	margin-left: 12px !important;
}
#wikiTopics #wikiTopicsWrapper ul.wikiSubtopic > li,
#wikiTopics #wikiTopicsWrapper ul.wikiSubSubTopic > li {
	margin-left: 12px !important;
}
/* Vertically centre the label so it lines up with the caret's midpoint. */
#wikiTopics #wikiTopicsWrapper .wikiLinks {
	vertical-align: middle;
}
/* Render every leaf-topic bullet as one uniform solid disc at ~2x the default
   marker diameter. The server sets list-style-type: disc/circle/square inline
   with !important per article (writable / read-only / spreadsheet), which a
   stylesheet can't override, so instead we collapse the native marker to zero
   and draw our own disc with ::before. That gives a single consistent shape
   plus full control over size and vertical centring: vertical-align: middle
   lines the bullet up with the text (and with the category carets), fixing the
   off-centre look the scaled ::marker had. Category rows carry .hasChildren and
   show a caret instead of a bullet, so they're excluded. The disc's width and
   its two side margins net to 0, so it sits in the same gutter as the carets
   without shifting the topic text. */
#wikiTopics #wikiTopicsWrapper li:not(.hasChildren)::marker {
	font-size: 0;
}
#wikiTopics #wikiTopicsWrapper li:not(.hasChildren)::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: -11.5px;
	margin-right: 5.5px;
	border-radius: 50%;
	background-color: currentColor;
	vertical-align: middle;
}
/* Draw the caret as a pure CSS border triangle rather than the ▸/▾ glyph.
   The glyphs aren't in Poppins, so they render via a system fallback whose
   proportions we can't control; borders give a crisp isosceles triangle with
   exact dimensions. The underlying glyph text is hidden with font-size: 0.
   Direction is keyed off the .wikiCollapsed class that both the server render
   and enhanceWikiTopicsTree() keep on the parent <li>. width + margin-left net
   to 0 so category text stays aligned with the leaf bullets. */
#wikiTopicsWrapper .wikiToggle {
	display: inline-block;
	width: 14px;
	margin-left: -14px;
	text-align: center;
	font-size: 0;
	line-height: 1;
	vertical-align: middle;
	color: var(--main-text-color, #404e60);
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}
#wikiTopicsWrapper .wikiToggle::before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	vertical-align: middle;
}
/* Collapsed: right-pointing isosceles triangle (base 8px, length 9px). */
#wikiTopicsWrapper li.wikiCollapsed > .wikiToggle::before {
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 9px solid currentColor;
}
/* Expanded: down-pointing isosceles triangle (base 8px, height 9px). */
#wikiTopicsWrapper li.hasChildren:not(.wikiCollapsed) > .wikiToggle::before {
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 9px solid currentColor;
}
#wikiTopicsWrapper .wikiToggle:hover {
	color: var(--main-link-color, #247cb5);
}
#wikiTopicsWrapper ul.wikiChildrenCollapsed {
	display: none;
}
/* Master expand/collapse-all caret sat next to the Reset button. Reuses the
   same CSS border triangle as the per-topic carets; direction flips via the
   .wikiExpandedAll class (absent = right / collapse state, present = down /
   expanded state), which wikiToggleAllTopics() and wikiSyncToggleAllCaret()
   keep in sync. inline-flex centres the triangle in a square hit area. */
.wikiToggleAll {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-left: 8px;
	vertical-align: middle;
	color: var(--main-text-color, #404e60);
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}
.wikiToggleAll::before {
	content: "";
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 9px solid currentColor;
}
.wikiToggleAll.wikiExpandedAll::before {
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 9px solid currentColor;
	border-bottom: 0;
}
.wikiToggleAll:hover {
	color: var(--main-link-color, #247cb5);
}
#wikiWrapperRight {
	vertical-align: top;
	width: 71%;
	max-width: 71%;
}
#wikiTopics a.ui-state-gray {
	padding: 3px 8px 4px 8px;
	font-size: 14px;
}
#wikiTopicNameH2 {
	margin: 20px 0px 15px 0px;
}
#wikiContent {
	padding: 15px;
	overflow: auto;
	max-height: calc(100vh - 250px);
}
#wikiContent h6 {
	font-size: 14px;
	font-weight: bold;
}
#wikiContent h5 {
	font-size: 16px;
	font-weight: bold;
}
#wikiContent h4 {
	font-size: 18px;
	font-weight: bold;
}
#wikiContent h3 {
	font-size: 20px;
	font-weight: bold;
}
#wikiContent h2 {
	font-size: 22px;
	font-weight: bold;
	margin: 10px 0px;
}
#wikiContent h1 {
	font-size: 24px;
	font-weight: bold;
	margin: 10px 0px;
}
#wikiContent ul {
	list-style-type: disc;
	margin-left: 8px;
	padding-left: 8px;
}
#wikiContent ul > li {
	list-style-type: disc;
}
#wikiContent ol, #wikiContent ol > li {
	list-style-type: decimal;
}
#wikiContent a {
	text-decoration: underline;
	cursor: pointer;
}
#wikiContent pre {
	white-space: pre-wrap;
}
.publicLabel, a.publicLabel {
	font-size: 11px;
	padding: 1px 3px;
	color: #f8f9fb !important;
	background: #16b370;
	opacity: 0.8;
	margin-left: 2px;
}
.publicLabel:hover, a.publicLabel:hover {
	opacity: 1;
}
.strengthIconWrapper {
	display: inline-block;
	padding: 1px;
	margin: 3px 2px;
	border: 1px solid #247cb5;
	vertical-align: top;
	height: 10px;
}
.strengthGreenBlock {
	display: inline-block;
	height: 8px;
	background-color: #16b370;
	margin: 1px;
	vertical-align: top;
}
.strengthGrayBlock {
	display: inline-block;
	height: 8px;
	background-color: #bac4d0;
	margin: 1px;
	vertical-align: top;
}
#orderedWikiTopics li {
	cursor: grab;
}
#wikiTopicParentPicker {
	display: none;
	padding: 10px;
	position: absolute;
	border: 1px solid #999;
	background: #fff;
	border-radius: 4px;
	z-index: 9;
	margin-bottom: 30px;
	box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}
#wikiTopicParentPicker li {
	cursor: pointer;
	color: #247cb5;
}
#wikiTopicParentPicker li:hover {
	color: #0082fc;
}
#wikiTopicParentPicker ul ul {
	margin-left: 10px;
	list-style: disc;
}
#wikiTopicParentPicker ul ul ul {
	margin-left: 20px;
	list-style: disc;
}
#wikiTopicParentPicker ul ul ul ul {
	margin-left: 30px;
	list-style: disc;
}
#wikiTopicParentPicker ul ul ul ul ul {
	margin-left: 40px;
	list-style: disc;
}
#wikiTopicParentPicker ul ul ul ul ul ul {
	margin-left: 50px;
	list-style: disc;
}
#wikiTopicParentPicker ul ul ul ul ul ul ul {
	margin-left: 60px;
	list-style: disc;
}

/* Wiki :: Edit article dialog — modernized form body (matches the Create New Contact design language).
   Everything is scoped under #wikiEditForm; the jQuery-UI footer buttons and the CKEditor chrome are untouched. */
#wikiEditForm {
	container-type: inline-size;
	margin: 2px 0 0;
	text-align: left;
	color: var(--main-text-color, #404e60);
}
#wikiEditForm .wef-panel {
	position: relative;
	background: color-mix(in srgb, var(--main-text-color, #404e60) 4%, var(--input-background-color, #fff));
	border: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 12%, transparent);
	border-radius: 12px;
	padding: 24px 28px 22px;
}
/* two settings selects sit side by side; the two-column grid keeps each control at a comfortable
   half-width while the generous gap keeps the top area airy and professional. the panel, title,
   content and images areas all span the full dialog width so the editor can be as wide as the screen */
#wikiEditForm .wef-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
}
#wikiEditForm .wef-field {
	position: relative;
}
#wikiEditForm .wef-panel > .wef-field,
#wikiEditForm .wef-panel > .wef-loc {
	margin-top: 20px;
}
/* shared control look — direct children only, so the help icon / label wrappers are unaffected */
#wikiEditForm .wef-field > input[type="text"],
#wikiEditForm .wef-field > select {
	width: 100%;
	box-sizing: border-box;
	font-size: 14px;
	color: var(--input-text-color, #404e60);
	background-color: var(--input-background-color, #fff);
	border: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 22%, transparent) !important;
	border-radius: 10px !important;
	padding: 12px 14px !important;
	margin: 0 !important;
	max-width: none !important;
	height: auto !important;
}
/* selects keep the existing chevron background from .tallSelect; add room for it on the right */
#wikiEditForm .wef-field > select {
	padding: 12px 34px 12px 14px !important;
	appearance: none !important;
}
#wikiEditForm .wef-field > input[type="text"]:focus,
#wikiEditForm .wef-field > select:focus {
	outline: none;
	border-color: var(--main-link-color, #0082fc) !important;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--main-link-color, #0082fc) 16%, transparent) !important;
}
/* consistent "notched" label — matches the Create New Contact (cnf) design: the label sits on the
   field's top-left border with a top border line + top-only radius. Shared by every labelled control
   (the two selects, the location field, the content editor, the images select) so all labels have the
   exact same placement and look. */
#wikiEditForm .wef-select > label,
#wikiEditForm .wef-loc > label,
#wikiEditForm .wef-content > label {
	position: absolute;
	top: -10px;
	left: 9px;
	max-width: calc(100% - 18px);
	margin: 0;
	padding: 3px 7px;
	font-size: 11px;
	line-height: 1;
	font-weight: 600;
	color: var(--main-link-color, #0082fc);
	background: var(--input-background-color, #fff);
	border-top: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 22%, transparent);
	border-radius: 10px 10px 0 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	z-index: 2;
	pointer-events: none;
}
/* text fields: the label rests inside like a placeholder, then floats up to the same notch when the
   field is focused or filled */
#wikiEditForm .wef-float > label {
	position: absolute;
	top: 50%;
	left: 14px;
	transform: translateY(-50%);
	max-width: calc(100% - 28px);
	margin: 0;
	padding: 0 4px;
	font-size: 14px;
	color: var(--main-text-tertiary-color, #8a94a2);
	background: var(--input-background-color, #fff);
	border-radius: 6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	transition: top .12s ease, left .12s ease, font-size .12s ease, color .12s ease, transform .12s ease;
}
#wikiEditForm .wef-float > input:focus + label,
#wikiEditForm .wef-float > input:not(:placeholder-shown) + label {
	top: -10px;
	left: 9px;
	transform: translateY(0);
	padding: 3px 7px;
	font-size: 11px;
	line-height: 1;
	font-weight: 600;
	color: var(--main-link-color, #0082fc);
	border-top: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 22%, transparent);
	border-radius: 10px 10px 0 0;
}
/* template URL: help icon pinned inside the field */
#wikiEditForm .wef-templateurl > input {
	padding-right: 40px !important;
}
#wikiEditForm .wef-templateurl .wef-help {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0 !important;
}
/* location: a bordered field (like the selects) so its notched "Location" label lines up with every
   other label; holds the current-parent + "change" chips */
#wikiEditForm .wef-loc {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	border: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 22%, transparent);
	border-radius: 10px;
	padding: 10px 12px;
}
#wikiEditForm .wef-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var(--main-link-color, #0082fc);
	background: color-mix(in srgb, var(--main-link-color, #0082fc) 10%, var(--input-background-color, #fff));
	border: 1px solid color-mix(in srgb, var(--main-link-color, #0082fc) 30%, transparent);
	transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
#wikiEditForm .wef-chip:hover {
	background: color-mix(in srgb, var(--main-link-color, #0082fc) 18%, var(--input-background-color, #fff));
	border-color: color-mix(in srgb, var(--main-link-color, #0082fc) 55%, transparent);
	box-shadow: 0 2px 10px color-mix(in srgb, var(--main-link-color, #0082fc) 20%, transparent);
}
#wikiEditForm .wef-chip--edit {
	border-style: dashed;
	color: var(--main-text-secondary-color, #6b7787);
	background: transparent;
	border-color: color-mix(in srgb, var(--main-text-color, #404e60) 30%, transparent);
}
#wikiEditForm .wef-chip--edit:hover {
	color: var(--main-link-color, #0082fc);
	border-color: color-mix(in srgb, var(--main-link-color, #0082fc) 55%, transparent);
	background: color-mix(in srgb, var(--main-link-color, #0082fc) 8%, transparent);
}
#wikiEditForm .wef-chip__ic {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}
/* parent-topic picker popover -> modern floating card (keeps position:absolute from the base rule) */
#wikiEditForm .wef-tree {
	padding: 8px;
	border: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 16%, transparent);
	border-radius: 12px;
	background: var(--input-background-color, #fff);
	box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
	max-height: 240px;
	min-width: 250px;
	overflow: auto;
	margin-top: 4px;
	z-index: 20;
}
#wikiEditForm .wef-tree ul {
	list-style: none !important;
	padding-left: 0;
}
#wikiEditForm .wef-tree li {
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 7px;
	color: var(--main-link-color, #0082fc);
}
#wikiEditForm .wef-tree li:hover {
	background: color-mix(in srgb, var(--main-link-color, #0082fc) 12%, transparent);
	color: var(--main-link-color, #0082fc);
}
/* title field: larger + prominent */
#wikiEditForm .wef-name {
	margin-top: 22px;
}
#wikiEditForm .wef-name > input {
	font-size: 17px !important;
	font-weight: 600;
	padding: 14px 16px !important;
}
/* content (CKEditor) block — full width so the editor lines up with the panel / title / images, with
   the "Content" label notched onto the editor's top border like every other field */
#wikiEditForm .wef-content {
	position: relative;
	margin-top: 22px;
}
/* images panel */
#wikiEditForm .wef-images {
	width: auto;
	margin: 22px 0 0;
	padding: 16px 18px;
	background: color-mix(in srgb, var(--main-text-color, #404e60) 4%, var(--input-background-color, #fff));
	border: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 12%, transparent);
	border-radius: 12px;
	text-align: left;
}
#wikiEditForm .wef-images__head {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
#wikiEditForm .wef-inline {
	min-width: 200px;
	max-width: 280px;
}
#wikiEditForm .wef-drop {
	margin-top: 12px;
	border: 1.5px dashed color-mix(in srgb, var(--main-text-color, #404e60) 26%, transparent);
	border-radius: 10px;
	padding: 12px;
	min-height: 60px;
}
#wikiEditForm .wef-drop__hint {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--main-text-tertiary-color, #8a94a2);
	font-size: 13px;
	font-style: italic;
}
#wikiEditForm .wef-drop__hint svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	opacity: .8;
}
#wikiEditForm #imageDraggerImagesWiki {
	margin-top: 10px;
}
#wikiEditForm #imageDraggerImagesWiki img {
	max-height: 50px !important;
	max-width: 50px !important;
	display: inline-block;
}
/* the dialog width — not the viewport — drives the layout, so use a container query */
@container (max-width: 470px) {
	#wikiEditForm .wef-grid {
		grid-template-columns: 1fr;
	}
	#wikiEditForm .wef-inline {
		min-width: 0;
		max-width: none;
		width: 100%;
	}
	#wikiEditForm .wef-images__head {
		gap: 8px;
	}
}

/* Wiki :: "Public wiki articles" settings (rendered by View::Resources::Wiki -> action_showWikiTopics).
   The form's inline styles were lifted into these classes and the layout was modernized to match the
   wiki Edit-article form (.wef-*) and Create New Contact (.cnf*) design language: a soft card panel,
   notched labels that sit on each field's top border, rounded inputs with a focus ring, and a bordered
   colour-picker row. Everything is theme-token based (with hex fallbacks) so it reads in light + dark.
   The help panel (.pws-help) renders in normal document flow rather than as an absolute tooltip, so the
   #wikiTopicsPublicInnerWrapper scroll container it lives in can't clip it. */
#publicWikiSettings {
	clear: both;
	margin: 18px auto 10px;
	padding-top: 18px;
	border-top: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 14%, transparent);
	text-align: left;
	color: var(--main-text-color, #404e60);
}
#publicWikiSettings .pws-head {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 12px;
}
#publicWikiSettings .pws-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--main-text-color, #404e60);
}
/* help panel: rendered in normal flow (not an absolute tooltip) so the #wikiTopicsPublicInnerWrapper
   scroll container can't clip it; it drops in below the header row and pushes the card panel down */
#publicWikiSettings .pws-help {
	position: static;
	width: auto;
	max-width: 650px;
	box-sizing: border-box;
	margin: 6px 0 0;
}
#publicWikiSettings .pws-help h6 {
	background: transparent;
}
/* card panel — mirrors #wikiEditForm .wef-panel. container-type lives on the panel (not the root) so the
   grid can respond to the panel width without turning the root into the help tooltip's containing block */
#publicWikiSettings .pws-panel {
	container-type: inline-size;
	background: color-mix(in srgb, var(--main-text-color, #404e60) 4%, var(--input-background-color, #fff));
	border: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 12%, transparent);
	border-radius: 12px;
	padding: 24px 28px 22px;
}
/* every labelled control is a relative field so its notched label can sit on the top border */
#publicWikiSettings .pws-field {
	position: relative;
	margin-top: 22px;
}
#publicWikiSettings .pws-panel > .pws-field:first-child {
	margin-top: 0;
}
/* image picker + its link URL sit side by side, collapsing to one column on a narrow panel */
#publicWikiSettings .pws-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	margin-top: 22px;
}
#publicWikiSettings .pws-grid > .pws-field {
	margin-top: 0;
}
/* shared control look for text inputs — mirrors #wikiEditForm .wef-field > input */
#publicWikiSettings .pws-field > input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	font-size: 14px;
	color: var(--input-text-color, #404e60);
	background-color: var(--input-background-color, #fff);
	border: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 22%, transparent) !important;
	border-radius: 10px !important;
	padding: 12px 14px !important;
	margin: 0 !important;
	max-width: none !important;
	height: auto !important;
}
#publicWikiSettings .pws-field > input[type="text"]:focus {
	outline: none;
	border-color: var(--main-link-color, #0082fc) !important;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--main-link-color, #0082fc) 16%, transparent) !important;
}
/* notched label shared by every field — always visible; the descriptive placeholder stays as a hint */
#publicWikiSettings .pws-field > label {
	position: absolute;
	top: -10px;
	left: 9px;
	max-width: calc(100% - 18px);
	margin: 0;
	padding: 3px 7px;
	font-size: 11px;
	line-height: 1;
	font-weight: 600;
	color: var(--main-link-color, #0082fc);
	background: var(--input-background-color, #fff);
	border-top: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 22%, transparent);
	border-radius: 10px 10px 0 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	z-index: 2;
	pointer-events: none;
}
/* Top Left Image row: the media-picker <select> grows, the clear button sits beside it.
   The <select> keeps its .tallSelect chevron background; we only layer radius/border/padding on top */
#publicWikiSettings .pws-imagePicker {
	display: flex;
	align-items: center;
	gap: 8px;
}
#publicWikiSettings .pws-select {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	font-size: 14px;
	color: var(--input-text-color, #404e60);
	border: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 22%, transparent) !important;
	border-radius: 10px !important;
	padding: 12px 34px 12px 14px !important;
	margin: 0 !important;
	max-width: none !important;
	height: auto !important;
	cursor: pointer;
}
#publicWikiSettings .pws-clearImage {
	flex: none;
	cursor: pointer;
	vertical-align: middle;
	color: var(--gray-text-color, #6a7480);
}
#publicWikiSettings .pws-clearImage:hover {
	color: var(--red-text-color, #bd0008);
}
#publicWikiSettings .pws-hidden {
	display: none;
}
/* colours: a bordered box (like .wef-loc) holding the three picker swatches, with a notched label */
#publicWikiSettings .pws-colors {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	background: var(--input-background-color, #fff);
	border: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 22%, transparent);
	border-radius: 10px;
	padding: 14px 14px 12px;
}
#publicWikiSettings .pws-color {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}
#publicWikiSettings .pws-color__label {
	font-size: 13px;
	color: var(--main-text-secondary-color, #6b7787);
}
/* the jQuery colorpicker turns each hidden input into a small swatch button; keep it clickable */
#publicWikiSettings .pws-color img,
#publicWikiSettings .pws-color button {
	cursor: pointer;
}
/* Save row */
#publicWikiSettings .pws-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
}
/* narrow panel: stack the image picker + link URL */
@container (max-width: 560px) {
	#publicWikiSettings .pws-grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}
}

/* Portal Manager */
.PortalManager_settings_contactform_connectedSortable {
	width: 150px;
	float: left;
	list-style: none;
	cursor: move;
	margin-right: 10px;
}
.AccountManager_settings_contactform_connectedSortable {
	width: 150px;
	float: left;
	list-style: none;
	cursor: move;
	margin-right: 10px;
}
.AccountManager_settings_contactform_connectedSortable li {
	min-height: 18px;
}


/* jQuery 1.9 adjustments */
.ui-helper-hidden-accessible {
	display: none;
}

.collaborateColumn img {
	max-width: 100%;
}


/* Credit Card Page styles */
.cart-summary-box {
	background-color: #eff5fd;
	border: 1px solid #aaa;
	border-radius: 5px;
	padding: 10px;

}
.cart-card-box {
	background-color: #d7e6f9;
	border: 1px solid #aaa;
	border-radius: 5px;
	padding: 10px;
	box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}


/* Calendar */

.fc-daygrid-event > .fc-content {
	white-space: normal;
}
.fc-daygrid-day {
	cursor: copy;
}
.fc-day-today .fc-daygrid-day-number {
	background-color: #0082fc;
    padding: 3px;
    width: 23px;
    height: 23px;
    text-align: center;
    border-radius: 50%;
    color: #fff !important;
    margin: 2px 2px 0px 0px;
}
.fc-unthemed .fc-content, .fc-unthemed .fc-divider, .fc-unthemed .fc-list-heading td, .fc-unthemed .fc-list-view, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead {
    border-color: #e2e3e5 !important;
}
#calendarWrapperTable td {
    background: transparent !important;
}
.fc-event a, .fc-event span, .fc-event div, .fc-list-event a, .fc-list-event span, .fc-list-event div, .fc-list-event td {
	color: #fff !important;
	overflow: visible !important;
}
.fc-timeGridWeek-view .fc-event-title {
	overflow: hidden !important;
}
.fc-event:hover, .fc-event:hover span, .fc-event:hover div {
    color: #fff;
    text-decoration: none !important;
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.1) !important;
}
.fc-daygrid-event {
    padding: 5px !important;
    margin: 5px !important;
    white-space: normal !important;
	border-radius: 10px !important;
}
.fc-daygrid-event .fc-event-main-frame {
	flex-direction: column;
}
.fc-timegrid-event .fc-event-title, .fc-timegrid-event .fc-event-time {
	font-size: 11px !important;
}
.calOtherSeasonDemo_Room, .calOtherSeasonDemo_Room a, .calOtherSeasonDemo_Room span, .calOtherSeasonDemo_Room div, .calOtherSeasonDemo_Room a span {
    background-color: #bac4d0 !important;
    color: #fff;
}
.fc-toolbar button {
    background-color: var(--main-text-color, #404e60) !important;
    border: 1px solid var(--content-border-color, #e2e3e5) !important;
    color: var(--content-background-color, #fff) !important;
    font-size: 14px;
	margin: 0px 2px !important;
}
.fc-toolbar button:hover {
    color: #fff !important;
    background-color: #0082fc !important;
}
.fc-event span {
    background-color: transparent !important;
}
.fc-button-active {
    background: #0082fc !important;
    color: #fff !important;
}
.fc-body {
	background: #fff !important;
}
#title_Locations {
	position: absolute;
	right: 2%;
	margin-top: -40px;
}
#locationsFilter {
	position: absolute; 
	margin-top: -50px; 
	margin-left: 30px;
}
#Locations {
	margin-left: 30px !important;
	width: auto !important;
	border: 1px solid var(--content-border-color, #e2e3e5);
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    width: 99%;
    clear: both;
}
#Locations .ui-tabs .ui-tabs-panel {
	background: #fff !important;
}
.locationsTable {
	width: 100%;
	margin-top: 15px;
}
.locationsTable td {
	vertical-align: middle !important;
	font-size: 12px;
}
.locationsTable td input {
	font-size: 12px;
}
.locationsTable td:first-child {
	width: 33%;
}
.calEditable {
	cursor: pointer !important;
}
.gcalEvent, .gcalEvent a, .gcalEvent span {
	color: #fff;
	background-color: #d95459;
	cursor: default;
}
#calendarWrapper {
    border: 0px !important;
    background: transparent !important;
    box-shadow: none;
    box-shadow: none !important;
}
#calendarWrapperTable {
    width: 100%;
    background: transparent !important;
    border: 0px !important;
}
#calendarWrapperTable td {
	vertical-align: top;
}
.newBox {
    border: 1px solid var(--content-border-color, #e2e3e5);
    background: var(--content-background-color, #fff);
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    border-radius: 0px;
    padding: 20px;
}
#Locations {
	background-color: var(--content-background-color, #fff);
}
#Locations td {
	vertical-align: middle;
}
#Locations a.ui-state-green, #Locations a.ui-state-yellow, #Locations a.ui-state-red, #eventForm a.ui-state-green, #eventForm a.ui-state-yellow, #eventForm a.ui-state-red, #modifyRegistrationDiv a.ui-state-green, #modifyRegistrationDiv a.ui-state-yellow, #modifyRegistrationDiv a.ui-state-red {
	padding: 4px 10px 5px 10px;
	font-size: 16px;
}
.fc-button:hover {
	background-color: #0082fc !important;
}
button.fc-today-button {
    color: #fff;
    background: none;
    opacity: 1;
    background-color: var(--main-text-color, #404e60) !important;
    border: 1px solid #404e60;
}
#belowCalendarBox {
	margin: 20px 0px;
	padding: 10px;
	width: auto;
	min-width: 705px;
	max-width: 100%;
}
#EventDetail input[type="text"] {
	font-size: 14px;
	padding: 6px;
}
.publicEventRow td {
	font-size: 14px;
}
#EventDetail {
    padding: 0px;
    width: 100%;
    margin: 0px;
}
#EventDetail .ui-tabs-nav {
    margin-top: 0px;
    border-bottom: 1px solid var(--content-border-color, #e2e3e5);
}
#EventDetail-1 .ui-corner-all, #EventDetail-4 .ui-corner-all {
    background: var(--content-background-color, #fff);
    border: 1px solid var(--content-border-color, #e2e3e5);
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
}
#newLocationEventDetail {
	margin: 5px 0px 10px 2px;
}
#eventDetailsNotesWrapper {
	float: right; 
	margin-left: 20px; 
	width: 46%;
}
#eventOptionsWrapperTable {
	width: 100%;
}

#calendar {
	background: transparent;
    padding: 0px !important;
}
.fc .fc-view-harness {
	background: var(--main-background-color, #f8f9fb);
}
.fc .fc-toolbar.fc-header-toolbar {
	background: transparent !important;
}
.fc-toolbar h2 {
	font-size: 24px !important;
}
.fc-toolbar .fc-icon {
	margin-top: -1px;
}
.fc-list-table {
	font-size: 14px !important;
}
.fc-list-heading td {
	background: #2C3E50 !important;
	color: #fff;
}
.fc th {
    text-align: center;
    background-color: #EFEFEF;
    font-size: 14px;
}
.fc-col-header-cell {
	padding: 10px !important;
	background-color: var(--content-background-color, #fff) !important;
}
.fc-col-header-cell a {
	cursor: default !important;
	color: var(--main-text-color, #404e60) !important;
}
.fc-event {
    border-radius: 0px;
    border: none;
    font-size: 13px !important;
}
.fc-content {
    position: relative;
    z-index: 2;
    font-size: 13px !important;
    padding: 10px 5px;
    margin-top: -2px;
}
.fc-time-grid-event .fc-time, .fc-time-grid-event.fc-short .fc-title {
	font-size: 13px !important;
}
.fc-list-day .fc-cell-shaded {
	background: #404e60 !important;
}
.fc-list-day .fc-cell-shaded a {
	cursor: default !important;
	color: #fff !important;
}
.fc-list-item-title fc-widget-content a:hover {
	background: transparent !important;
}
.fc-widget-header span {
	color: var(--main-text-color, #404e60);
}
#registrationOptionsList li {
	box-shadow: none;
	background-color: var(--content-background-color, #fff);
	padding: 10px;
	border: 1px solid var(--content-border-color, #e2e3e5);
	margin-top: 10px;
	width: 98%;
}
#publicEventOptionsTable {
	margin-top: 10px; 
	float: left; 
	width: 50%;
}
#reminderSettingsWrapper, #attendanceLabelWrapper {
	float: right; 
	background-color: var(--content-background-color, #fff);
	border: 1px solid var(--content-border-color, #e2e3e5); 
	color: var(--main-text-color, #404e60);
	padding: 10px; 
	border-radius: 2px;
}
#publicRegistrationEmailHelp {
    max-height: 500px;
    overflow-y: auto;
}

/* Events List */
#EventsList {
	border: 1px solid var(--content-border-color, #e2e3e5);
}
#outerWrapperEventsList {
	padding: 20px 0px;
}
#outerWrapperEventsList #locationsFilter {
	display: none;
}
#EventsList-1, #EventsList-2, #EventsList-3, #Locations-1, #Locations-2, #Locations-3 {
	background-color: var(--content-background-color, #fff) !important;
}
#newEventButton {
	position: absolute;
	margin-top: 25px;
	margin-left: 220px;
	z-index: 10;
}



/* Booking Calendar */
#outerWrapperBookingCalendar {
	margin: 30px;
}
#bookingCalendarRequestsTable {
	margin: 15px auto; 
}
#bookingCalendarRequestsTable td {
	padding: 5px;
	margin: 0px;
	vertical-align: top;
}


/* Campaigns and Affiliates */
#title_CampaignsAffiliates {
	margin: 20px 0px 0px 35px;
}
#conversionDrivers, #campaigns, #affiliatePlayers {
	padding: 10px;
}
.campaignAffiliatesContacts {
	padding: 3px;
	white-space: nowrap;
}
.campaignAffiliatesContacts .icon-person {
	vertical-align: middle;
}
#campaignsAffiliatesConversionsTable {
	width: 100%;
}
#campaignsAffiliatesConversionsTable th {
	text-decoration: underline;
	text-align: left;
	font-weight: normal;
}


/* Lead Identifier */
#title_LeadFinder {
	margin: 20px 0px 0px 35px;
}


/* Documents */
#outerWrapperDocuments {
	padding: 20px 30px 20px 30px;
}
#listDocumentsTable {
	margin-top: 45px; 
	clear: both;
	background: var(--content-background-color, #fff);
}


/* Campaign Optimizer */
#optimizedCampaignsSummary {
	text-align: center;
}
#viewOptimizedCampaigns {
	display: none;
	max-height: 350px;
	overflow-y: auto;
	margin: 15px;
}
#viewOptimizedCampaigns table {
	width: 100%;
}
#emailCampaignOptimizer {
	font-size: 14px;
	padding-left: 20px;
}
#audienceSizeSliderWrapper {
	display: block;
	margin: 10px auto;
	width: 400px;
}
#audienceSizeSliderValueWrapper {
	font-size: 16px;
	text-align: center;
}
#deliveryDateWrapper {
	width: 400px;
	margin: 18px auto 0px auto;
}
#launchCampaignOptimizer {
	margin: 20px auto;
	text-align: center;
}

/* Email and Campaign Optimizer */
#EmailSettings {
	background-color: #f3f3f3;
	border: 1px solid var(--content-border-color, #e2e3e5);
	border-radius: 0px;
	width: 692px;
	padding: 10px;
	margin-bottom: 10px;
}
#emailTourBusLink {
	vertical-align: middle;
	display: inline-block;
}
#replyToOk {
	margin: 5px;
	font-size: 18px;
}

#ImageDragger {
	margin: 10px;
}
#ImageDraggerPersonalEmail, #ImageDraggerWebpage, #ImageDraggerWiki, #ImageDraggerCoupon {
	text-align: left;
    background-color: var(--gray-background-color, #f3f3f3);
	border-top: 0px;
	border-right: 1px solid var(--content-border-color, #e2e3e5);
	border-bottom: 1px solid var(--content-border-color, #e2e3e5);
	border-left: 1px solid var(--content-border-color, #e2e3e5);
	border-radius: 4px;
	width: 710px;
	padding: 1px 5px 5px 5px;
	margin: 0px 10px 20px 20px;
}
#ImageDraggerMobileWebpage {
	text-align: left;
    background-color: var(--gray-background-color, #f3f3f3);
	border-top: 0px;
	border-right: 1px solid var(--content-border-color, #e2e3e5);
	border-bottom: 1px solid var(--content-border-color, #e2e3e5);
	border-left: 1px solid var(--content-border-color, #e2e3e5);
	border-radius: 4px;
	width: 653px;
	padding: 1px 5px 5px 5px;
	margin: 0px 10px 20px 20px;
}
#imageDraggerImagesWebpage {
	max-height: 150px;
	overflow-y: auto;
}
#imageDraggerImages img, #ImageDraggerPersonalEmail img, #ImageDraggerwebpage img, #ImageDraggerWiki img, #ImageDraggerCoupon img, .imageDraggerImage img {
	max-height: 50px !important;
	max-width: 50px !important;
	display: inline-block;
}
#TextOnlyVersion {
    background-color: var(--gray-background-color, #f3f3f3);
	border: 1px solid var(--content-border-color, #e2e3e5);
	border-radius: 4px;
	width: 700px;
	min-height: 40px;
	padding: 5px 5px 10px 5px;
	margin-bottom: 10px;
}
#PhysicalAddress {
    background-color: var(--gray-background-color, #f3f3f3);
	border: 1px solid var(--content-border-color, #e2e3e5);
	border-radius: 4px;
	width: 700px;
	min-height: 40px;
	padding: 5px 5px 10px 5px;
	margin-bottom: 10px;
}
#AutomaticAction {
    background-color: var(--gray-background-color, #f3f3f3);
	border: 1px solid var(--content-border-color, #e2e3e5);
	border-radius: 4px;
	width: 700px;
	height: 40px;
	padding: 5px 5px 10px 5px;
	margin-bottom: 10px;
}
#EmailTrackingNav, #emailTrackingSelector, #emailTrackingChartsWrapper, #SocialDashboard, #surveySequenceDetails {
	border: 1px solid var(--content-border-color, #e2e3e5) !important;
	background: var(--content-background-color, #fff) !important;
	box-shadow: none !important;
}
#EmailTo {
	margin: 0px 30px 30px 30px;
	border: 1px solid var(--input-border-color, #e2e3e5) !important;
	background: var(--content-background-color, #fff) !important;
	box-shadow: none !important;
}
#EmailTo .ui-widget-content:not(.helpWidget) {
	background: var(--content-background-color, #fff) !important;
}
#EmailTo input, #EmailSettings input, #EmailSettings .ui-widget textarea {
    box-sizing: border-box;
    box-shadow: none;
    border: 1px solid var(--input-border-color, #e2e3e5);
    margin-top: 5px;
}
#EmailSettings input, #emailerLeftBottom textarea,  #EmailTo input, #EmailTo-2 textarea {
    border: 1px solid var(--input-border-color, #e2e3e5);
    color: var(--input-text-color, #404e60);
    background: var(--input-background-color, #f8f9fb);
}
#emailerLeftBottom .ui-selectmenu-button,, #EmailTo-2 textarea, #EmailTo .ui-selectmenu-button {
    border: 1px solid var(--content-border-color, #e2e3e5);
    color: var(--main-text-color, #404e60);
    background: var(--main-background-color, #f8f9fb);
}
#emailEditorDiv {
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
}
#EmailSettings, #emailEasyBuilderWrapper {
	background: var(--content-background-color, #fff);
	border: 1px solid var(--content-border-color, #e2e3e5) !important;
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
	font-size: 14px;
}
#EmailSettings input {
	font-size: 14px;
	padding: 6px;
}
#emailerLeftBottom {
	clear: both;
	box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    margin-top: 30px;
	border: 1px solid var(--input-border-color, #e2e3e5) !important;
}


#emailCampaignOptimizer input {
    box-sizing: border-box;
    box-shadow: none;
    border: 1px solid var(--input-border-color, #e2e3e5);
    font-size: 16px;
    padding: 5px;
}
#emailCampaignOptimizer .ui-datepicker, #deliveryDatetimeDiv .ui-datepicker {
    width: 25em;
}
#deliveryDatetimeDiv .ui-state-green, #emailCampaignOptimizer .ui-state-green {
	border: 0px !important;
    box-shadow: none !important;
    padding: 10px 15px !important;
    border-radius: 50px;
}
#deliveryDate .ui-state-disabled {
    padding: 0px !important;
    border: 0px !important;
}
#deliveryDate .ui-widget-content {
    border: 1px solid var(--content-border-color, #e2e3e5) !important;
    color: var(--main-text-color, #404e60) !important;
}
#deliveryDate .ui-datepicker .ui-datepicker-header {
    background: var(--main-background-color, #f8f9fb) !important;
}
#emailToUL {
    margin-bottom: 10px;
}
#emailToUL li {
    margin: 0px 10px !important;
}
#emailToUL li a {
    padding: 10px !important;
}
.Contacts_filter_compact {
    border: 0px !important;
    margin: 0px !important;
    padding: 0px !important;
}
.Contacts_filter_summary {
    border: 1px solid var(--content-border-color, #e2e3e5) !important;
}
.Contacts_filter_summary h2 {
    padding: 10px !important;
    border-bottom: 1px solid var(--content-border-color, #e2e3e5) !important;
}
.Contacts_filter_summary_area {
    padding: 10px !important;
}
.post-message {
    border: 1px solid var(--content-border-color, #e2e3e5) !important;
    background: var(--main-background-color, #f8f9fb) !important;
}
.post-message textarea {
    background: var(--content-background-color, #fff) !important;
}
#post-add-message, .post-actions-link {
    border: 1px solid var(--content-border-color, #e2e3e5) !important;
}
#social-email-post {
    margin: 15px 0px !important;
    padding: 0px !important;
}

#preheaderContainer {
	width: 100%;
	position: relative;
}

#preheaderContainer label {
	margin-right: 4px;
}

#preheaderContainer input {
	width: calc(100% - 185px);
	min-width: 200px;
}

#preheaderContainer .preheaderTooltip {
	display:none;
	position: absolute;
	left: 150px;
	margin-top: -40px;
	padding-top: 13px;
	width: calc(100% - 165px);
	text-align: left;
	text-shadow:
		5px 5px 0 #fff,
		-1px -1px 0 #fff,
		1px -1px 0 #fff,
		-1px 1px 0 #fff,
		1px 1px 0 #fff;
    color: #6a7480;
}

#preheaderContainer.disabled label {
	color: #a0aec0;
}

#preheaderContainer.disabled .preheaderTooltip {
	display: block;
}


/* Emailer */
#buildAndSendEmailWrapper #workingWithEmailTemplateID {
	font-size: 12px;
	padding-left: 2px;
	font-weight: normal;
	padding-top: 10px;
}
#cke_emailMessage .cke_button__loadwiki_label, #cke_personalMessage .cke_button__loadwiki_label {
	display: none !important;
}


/* Workflows */
#title_WorkflowManager {
    padding: 30px 0px 0px 30px !important;
    margin-bottom: 0px !important;
}
#workflowActivitiesHelpIcon::before {
	margin-top: -5px;
	vertical-align: top;
	display: inline-block;
}
#workflowFoldersContainer {
	font-size: 14px;
}
#workflowChart {
	height: 240px; 
	min-width: 400px; 
	max-width: 600px;
	width: 100%;
	margin: auto;
	padding: 10px; 
	background: var(--content-background-color, #fff); 
	border: 1px solid var(--content-border-color, #e2e3e5);
}
#editWorkflowForm {
    padding: 0px;
}
#editWorkflowForm .ui-tabs-nav {
    margin-top: 0px;
    border-bottom: 1px solid var(--content-border-color, #e2e3e5);
}
#editWorkflowForm td {
	font-size: 14px;
}
.workflowIcons span {
	font-size: 14px;
	white-space: nowrap;
	margin-left: 7px;
}
.workflowIconsLarge span {
	font-size: 30px;
	white-space: nowrap;
	margin-left: 15px;
}
.workflowFolderHeader {
	margin: 20px 0;
}
.workflowFolderHeader i {
	vertical-align: middle;
	color: #1e5188;
}
.workflowFolderHeader small {
	font-size: 12px;
}
.workflowActivityWrapper {
	border: 1px solid var(--content-border-color, #e2e3e5);
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
	background-color: var(--content-background-color, #fff);
	box-shadow: none;
	padding: 10px;
	border-radius: 2px;
	margin-top: 10px;
}
.workflowActivityWrapper input {
    border: 1px solid var(--input-border-color, #e2e3e5);
    color: var(--input-text-color, #404e60);
    background: var(--input-background-color, #f8f9fb);
}
#workflowActivityWrapper select {
	width: auto;
	max-width: 100%;
	background-color: #f8f9fb !important;
}

#workflowManagerActionButtons {
	right: 30px !important;
	top: 135px !important;
}
.sortableHandle {
	display: inline-block;
	vertical-align: text-bottom;
	padding: 3px 10px 3px 0;
	font-size: 18px !important;
}
#workflowsListWrapper {
    border: 1px solid var(--content-border-color, #e2e3e5) !important;
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0) !important;
    right: 30px !important;
}
#workflowsListWrapper h6 {
    text-align: center !important;
    padding-top: 10px !important;
}
#workflowManagerWrapper, #leadScoringWrapper {
	background: var(--content-background-color, #fff) !important;
	border: 1px solid var(--content-border-color, #e2e3e5);
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    margin: 30px;
}
.editWorkflowTab select.ui-state-default {
	background: var(--content-background-color, #fff);
	color: var(--main-text-color, #404e60);
}
#EditWorkflowTabs-1, #EditWorkflowTabs-2, #EditWorkflowTabs-3, #EditWorkflowTabs-4, #EditWorkflowTabs-5, #EditWorkflowTabs-6 {
    padding: 15px 45px;
}
#workflowChart {
    border: 1px solid var(--content-border-color, #e2e3e5);
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
}



/* Email Tracking */
#emailTrackingFormID {
    margin: 0px 30px;
}
#emailTrackingFormID .ui-tabs-nav {
    border-color: #f1f2f6;
    margin: 0px !important;
}
#emailTrackingFormID li {
    margin: 0px 5px;
}
#emailTrackingFormID li a {
    padding: 10px !important;
}
#expandCompressTabs {
	position: absolute; 
	display: inline;
	z-index: 20; 
	right: 2%; 
	margin-top: 25px;
}
#title_EmailTracking {
    padding: 30px 0px 0px 30px !important;
    margin-left: 0px !important;
    margin-bottom: 0px !important;
}
#EmailTrackingNav, #emailTrackingSelector, #emailTrackingChartsWrapper {
    margin: 30px;
    border: 1px solid var(--content-border-color, #e2e3e5);
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    margin: 30px 0px;
}
#EmailTrackingNav, #emailTrackingSelector {
	margin: 30px 0px !important;
	width: auto !important;
}
#emailTrackingChartsWrapper {
    margin: 30px !important;
}
.emailTrackingSeparator {
	border-bottom: 1px dotted #e2e3e5;
	margin-bottom: 3px;
	padding-bottom: 3px;
}
#emailTrackingSelector {
	font-size: 14px;
	height: auto;
	line-height: 35px;
}
.emailTrackingButton {
	white-space: nowrap;
}
#emailTrackingSecondRow {
	margin-left: 77px;
}
#sendsSelected {
	margin-top: 15px;
	display: block !important;
	clear: both;
}
#EmailTrackingNav-1, #EmailTrackingNav-2, #EmailTrackingNav-3, #EmailTrackingNav-4, #EmailTrackingNav-5, #EmailTrackingNav-6, #EmailTrackingNav-7, #EmailTrackingNav-8 {
	background: var(--content-background-color, #fff) !important;
}
#StartDate input, #EndDate input {
	box-sizing: border-box;
    box-shadow: none;
    border: 1px solid var(--content-border-color, #e2e3e5);
}
#expandTabsLink, #compressTabsLink {
    position: absolute;
    top: 15px;
    right: 20px
}


/* New Dashboard v2 (Compact) */
#dashboardSimpleSearchWrapper {
	float: right; 
	background-color: var(--content-background-color, #fff); 
	margin-bottom: 5px;
}
#dashboardCalendarWidgetText {
	color: var(--main-text-color, #404e60); 
	margin: 0px; 
	padding: 0px;
}
#yourTeamIcon
{
	height: 60px;
	width: 40px;
	margin: 20px 5% 0px 5%;
	background: url(/images/generic_person.png);
	background-size: 100% 100%;
	text-align: center;
	display: inline-block;
	cursor: pointer;
}
#yourTeamIcon span
{
	color: #fff;
	padding: 1px;
	display: inline-block;
	font-size: 12px;
	vertical-align: middle;
	margin-top: 38px;
	font-weight: bold;
}
.visibleWidget2
{
	height: 200px;
	width: 22.5%;
	min-width: 200px;
	float: left;
	margin: 1%;
	text-align: center;
	background-color: var(--content-background-color, #fff);
	display: block;
}
.visibleWidget2 td
{
	text-align: left;
}
.hiddenWidget2
{
	height: 200px;
	width: 22.5%;
	min-width: 150px;
	float: left;
	margin: 1%;
	background-color: var(--content-background-color, #fff);
	text-align: center;
	display: none;
}
.dashboardChart300_2, .dashboardChart250_2, #dashboardWidgets2 #eventPieChart
{
	display: block;
	width: 100%;
	height: 200px;
}
#dashboardWidgets2 .widgetHeader
{
	display: none;
}
#dashboardWidgets2 #dashboard_KPIs
{
	width: 47%;
	min-width: 320px;
	padding-top: 15px;
	height: 185px;
	cursor: pointer;
}
#dashboardWidgets2 .dashboardKPInav {
	text-align: center;
	color: var(--main-text-color, #404e60);
	font-size: 11px;
	margin-bottom: 30px;
}
#dashboardWidgets2 #dashboard_OpenTickets
{
	width: 47%;
	min-width: 320px;
}
#dashboardWidgets2 .kpiGaugeMini
{
	width: 20%;
	height: 120px;
}
#dashboardWidgets2 #dashboardLeaderboard, #dashboardWidgets2 #dashboardProjectTasks, #dashboardWidgets2 #dashboardOpenTickets
{
	cursor: pointer !important;
}
.dashboard2_background
{
	display: none;
	top: 0px;
	left: 0px;
	position: fixed;
	z-index: 100;
	height: 100% !important;
	width: 100% !important;
	background-color: rgba(48,48,48,0.9) !important;
}
.dashboard2_dialog
{
	position: fixed;
	top: 0px;
	left: 0px;
	margin: 5% 10%;
	width: 80%;
	max-height: 80%;
	overflow: auto;
	z-index: 101;
	background-color: rgba(255,255,255,1) !important;
	padding: 10px;
}
.dashboard2_close
{
	position: fixed;
	top: 7%;
	right: 7%;
	margin-left: 5px;
	font-size: 24px;
	background-color: #eee !important;
	z-index: 101;
	opacity: 1;
	border-radius: 12px;
}
.dashboard2_close span
{
	display: block;
	padding: 0px;
	margin: 0px;
	line-height: 20px;
}
.dashboard2_close span:hover
{
	text-decoration: none;
}
.dashboard2_headline
{
	font-size: 11px;
	color: var(--main-text-color, #404e60);
	margin-top: 7px;
}
.dashboard2_td
{
	font-size: 11px;
	color: var(--main-text-color, #404e60);
}
.dashboard2_LeftBox {
	width: 94%;
	background-color: var(--content-background-color, #fff);
	padding: 10px;
	margin-bottom: 25px;
}
#twitterWrapper {
	width: 100%;
	background-color: var(--content-background-color, #fff);
	margin-left: 0px;
	margin-bottom: 25px;
}


/* New Dashboard - Calendar date widget */
time.icon
{
  font-size: 9px; /* change icon size */
  display: block;
  position: relative;
  width: 7em;
  height: 7em;
  background-color: #fff;
  margin: 0px auto 7px auto;
  border-radius: 0.6em;
  box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;
  -webkit-box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: rotate(0deg) skewY(0deg);
  -webkit-transform-origin: 50% 10%;
  transform-origin: 50% 10%;
}

time.icon *
{
  display: block;
  width: 100%;
  font-size: 1em;
  font-weight: bold;
  font-style: normal;
  text-align: center;
}

time.icon strong
{
  position: absolute;
  top: 0;
  padding: 0.4em 0;
  color: #fff;
  background-color: #16b370;
  border-bottom: 1px dashed #777;
  box-shadow: 0 2px 0 #16b370;
  -webkit-box-shadow: 0 2px 0 #16b370;
}

time.icon em
{
  position: absolute;
  bottom: 0.3em;
  color: #16b370;
}

time.icon span
{
  width: 100%;
  font-size: 2.8em;
  letter-spacing: -0.05em;
  padding-top: 0.8em;
  color: var(--main-text-color, #404e60);
}

/* general */
.height24 {
	height: 24px;
}
.ui-icon-arrow-4, .ui-icon-arrowthick-2-n-s {
	cursor: move;
}



/* Personal Email */
#sendPersonalEmailWrapper #EmailSettings input {
	margin-top: 0px !important;
}
#sendPersonalEmailWrapper #personalEmailSubject {
	width: 95%;
}
#sendPersonalEmailWrapper #cke_personalMessage {
    border: 1px solid var(--input-border-color, #e2e3e5) !important;
}
#sendPersonalEmailWrapper {
    margin: auto;
    width: calc(100% - 50px);
    max-width: 1500px;
    border: 1px solid var(--content-border-color, #e2e3e5);
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    background: var(--content-background-color, #fff);
}
#sendPersonalEmailWrapper #sendPersonalEmailLeftColumn {
	display: table-cell; 
	max-width: 715px; 
	min-width: 715px; 
	padding-top: 8px;
}
#sendPersonalEmailWrapper #sendPersonalEmailRightColumn {
	 display: table-cell; 
	 vertical-align: top; 
	 padding: 0px 10px 5px 35px;
}
#sendPersonalEmailWrapper .main-flex-nav {
    border-bottom: 1px solid var(--content-border-color, #e2e3e5);
    height: 61px;
}
#sendPersonalEmailWrapper .main-flex-nav li {
    margin: 0px 15px !important;
    padding: 0px;
}
#sendPersonalEmailWrapper .main-flex-nav li a {
    padding: 18px 10px !important;
    font-size: 16px;
}
#sendPersonalEmailWrapper .main-flex-nav li a:hover{
    border-width: 0px 0px 3px 0px;
	border-style: solid;
}
#sendPersonalEmailWrapper .main-flex-nav .flex-active-link {
    border-width: 0px 0px 3px 0px;
	border-style: solid;
	border-color: var(--nav-box-shadow-color);
}
#sendPersonalEmailWrapper .personal-email-mainbox-content {
	clear: both;
	margin-top: 25px;
}
#sendPersonalEmailWrapper #analyzePersonalEmailTarget {
	margin-top: 20px;
}


/* EasyBuilder */
#title_EasyBuilder {
	padding-bottom: 15px !important;
	padding-left: 15px !important;
	margin-top: -5px;
}
#easyBuilderOuterWrapper {
	margin: 30px;
}
#easyBuilderHelper {
	background: var(--content-background-color, #fff);
}
#easyBuilderHelperUL {
    background: var(--content-background-color, #fff);
    margin: 0px;
    border: 1px solid var(--content-border-color, #e2e3e5);
}
#easyBuilderHelperUL li {
    margin: 0px 10px !important;
}
#easyBuilderHelperUL li a {
    padding: 10px !important;
}

#easyBuilderRestorePoint, #easyBuilderPageSettingsRestorePoint {
	display: none;
}
#Helper-1 {
	height: calc(100vh - 300px);
	overflow-y: auto;
}
/* All four tab panels share one connected white surface */
#Helper-1,
#Helper-2,
#Helper-3,
#Helper-4 {
	background: var(--content-background-color, #fff);
}
	font-size: 16px;
	color: var(--main-text-color, #404e60);
	font-weight: normal;
	font-style: italic;
}
#visibleNewEasyBuilderSections li {
	float: left;
	margin: 10px;
}
.visibleNewSection {
	display: inline-block;
	padding: 10px;
	border: 1px solid var(--content-border-color, #e2e3e5);
	margin-top: 10px;
    background: #fff;
}
.easyBuilderColorEditorPencil
{
	text-shadow: 0px 0px 1px #999;
	text-decoration: none !important;
	cursor: pointer;
}
.easyBuilderSectionShadow {
	box-shadow: 0px 0px 10px var(--main-link-color, #247cb5) !important;
}
#easyBuilderSortable .sortableHandle, #easyBuilderSortable .sortableHandle span
{
	text-shadow: 0px 0px 1px #999 !important;
	cursor: move !important;
	font-size: 18px !important;
}
#easyBuilderSortable li {
	clear: both;
}
.visibleNewSection img {
	cursor: move;
}
.easyBuilderColorEditor
{
	display: none;
	outline: 1px solid #999;
	box-shadow: 0 0 10px #9ecaed;
	-webkit-box-shadow: 0 0 10px #9ecaed;
	position: absolute;
	margin-top: -55px;
	margin-left: 5px;
	background-color: var(--content-background-color, #f8f9fb);
	padding: 10px;
	z-index: 2;
	color: var(--main-text-color, #000) !important;
	font-size: 14px !important;
}
.easyBuilderColorEditor td {
	color: var(--main-text-color, #000) !important;
}
.easyBuilderColorEditor a, .easyBuilderColorEditor .icon-delete {
	color: var(--main-link-color, #247cb5) !important;
	text-decoration: none !important;
}
.easyBuilderColorEditor a.ui-state-blue, .easyBuilderColorEditor a.ui-state-red {
	color: #eee !important;
}
.easyBuilderColorEditor a.ui-state-blue:hover, .easyBuilderColorEditor a.ui-state-red:hover, .easyBuilderColorEditor a.ui-state-default:hover {
	color: #fff !important;
}
.easyBuilderColorEditor a:hover, .easyBuilderColorEditor .icon-delete:hover {
	color: var(--main-link-hover-color, #0082fc) !important;
}
.easyBuilderColorEditor input[type=number] {
	width: 60px;
}
.transparent1, .transparent2, .transparent3 {
	display: inline-block;
	vertical-align: top;
	margin-top: 1px;
}
#visibleNewEasyBuilderSections .sectionContentWrapper {
	display: inline;
}
#easyBuilderBackgroundMedia {
	margin: 10px 0px;
}
#easyBuilderBackgroundMediaFolder {
	width: 90%;
	margin: auto;
	display: block;
}
#easyBuilderBackgroundMediaIDSelector {
	width: 90%;
	margin: auto;
	display: block;
}
.easyBuilderBackgroundImage {
	color: #a15701 !important;
}
#easyBuilderBackgroundMediaPreview {
	text-align: center;
}


.ui-resizable-resizing { border: 1px dotted gray; }

#easyBuilder_MandatoryFields {
	width: 90%;
	max-width: 500px;
	border: 1px dashed #999;
	min-height: 40px;
	overflow: visible;
	margin-bottom: 30px;
	border-radius: 5px;
	padding: 10px;
}
#easyBuilder_MandatoryFields span {
	max-width: 50%;
	overflow: auto;
}
#easyBuilder_AddToGroups {
	width: 90%;
	max-width: 500px;
	border: 1px dashed #999;
	min-height: 40px;
	overflow: visible;
	margin-bottom: 30px;
	border-radius: 5px;
	padding: 10px;
}
#easyBuilder_AddToGroups span {
	max-width: 50%;
	overflow: auto;
}
#easyBuilder_Trash {
	width: 90%;
	max-width: 500px;
	border: 1px dashed #999;
	height: 40px;
	overflow: visible;
	margin-bottom: 30px;
	border-radius: 5px;
	padding: 10px;
}

.emailPreviewRenderBox {
	height: 250px; 
	width: 200px; 
	float: left; 
	margin: 25px; 
	text-align: center;
}
.emailPreviewRenderBoxTitle {
	width: 200px; 
	height: 50px; 
	overflow: hidden; 
	text-align: center;
}
.emailPreviewRenderBoxImageWrapper {
	height: 200px; 
	width: 200px; 
	border: 1px solid #c2c3c5;
}
.emailPreviewRenderImage {
	max-height: 200px; 
	max-width: 200px;
}

.easyBuilderTemplatePicker {
	border: 1px solid #ccc;
	border-radius: 5px;
	display: inline-block;
	height: 160px;
	width: 270px;
	float: left;
	margin: 20px;
	padding: 10px;
	background: #fff;
}
.easyBuilderTemplatePicker:hover {
	box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.15);
}
.easyBuilderTemplatePicker table {
	width: 100%;
}
#easyBuilderFilter .Contacts_filter_summary {
	border: none !important;
	width: 290px !important;
	position: relative;
	left: 0px;
	top: 0px;
}
#easyBuilderFilter .Contacts_filter_summary h2 {
	display: none;
}
#easyBuilderFilter .Contacts_filter_summary_area {
	max-height: calc(100% - 10px);
}
#easyBuilderFilter .Contacts_filter_summary_area h3 {
	margin: -5px 0px 0px 0px !important;
}

/* ============================================================
   EasyBuilder — Organized Inspector (Settings panel redesign)
   Scoped to .eb-inspector (#easyBuilderPageSettings)
   ============================================================ */
.eb-inspector {
	font-size: 13px;
	color: var(--main-text-color, #404e60);
	line-height: 1.4;
}

/* Collapsible group cards — one connected white stack (rounded only at the ends) */
.eb-group {
	border: 1px solid var(--content-border-color, #e2e3e5);
	border-radius: 0;
	margin-bottom: 0;
	background: var(--content-background-color, #fff);
	overflow: hidden;
}
.eb-group + .eb-group {
	border-top: 0;
}
.eb-group:first-child {
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}
.eb-group:last-child {
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}
.eb-group__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	cursor: pointer;
	font-weight: 700;
	font-size: 13px;
	color: var(--main-text-color, #404e60);
	color: color-mix(in srgb, var(--main-text-color, #404e60) 70%, #000);
	background: var(--main-background-color, #f8f9fb);
	background: color-mix(in srgb, var(--main-text-color, #404e60) 12%, var(--content-background-color, #fff));
	list-style: none;
	-webkit-user-select: none;
	user-select: none;
}
.eb-group__head::-webkit-details-marker { display: none; }
.eb-group__head::marker { content: ""; }
.eb-group__title { flex: 1 1 auto; }
.eb-group__head::after {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	margin-right: 2px;
	border-right: 2px solid var(--gray-text-color, #6a7480);
	border-bottom: 2px solid var(--gray-text-color, #6a7480);
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.eb-group:not([open]) > .eb-group__head::after {
	transform: rotate(-45deg);
}
.eb-group__head:hover {
	background: var(--gray-hover-color, #f3f4f7);
	background: color-mix(in srgb, var(--main-text-color, #404e60) 18%, var(--content-background-color, #fff));
}
.eb-group__body {
	padding: 2px 12px 8px;
	border-top: 1px solid var(--content-border-color, #e2e3e5);
}

/* Field row: label + control */
.eb-field {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px dashed var(--content-border-color, #e2e3e5);
}
.eb-field:last-child { border-bottom: 0; }
.eb-field__label {
	flex: 0 0 108px;
	font-size: 12px;
	font-weight: 600;
	color: var(--gray-text-color, #6a7480);
	line-height: 1.3;
}
.eb-field__ctl {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}
.eb-field__ctl--wrap { flex-wrap: wrap; }
.eb-field__ctl--col {
	flex-direction: column;
	align-items: stretch;
	gap: 5px;
}

/* Keep selects / menus / textareas from overflowing the panel */
.eb-inspector select,
.eb-inspector .ui-selectmenu-button,
.eb-inspector textarea {
	max-width: 100%;
}

/* Sub-label (Thickness:, Radius:) */
.eb-sublabel {
	font-size: 12px;
	font-weight: 600;
	color: var(--gray-text-color, #6a7480);
	white-space: nowrap;
}

/* Keep each slider label glued to its slider + value (never wrap apart) */
.eb-slidergroup {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

/* jQuery UI slider (border thickness / radius / line spacing) */
.eb-inspector span.eb-slider,
.eb-inspector .eb-slider.ui-slider {
	display: inline-block;
	width: 96px;
	height: 6px;
	margin: 0 2px;
	vertical-align: middle;
	background: var(--dark-gray-background-color, #d2d3d5);
	border: 0;
	border-radius: 99px;
}
.eb-inspector .eb-slider .ui-slider-range {
	background: var(--main-link-color, #247cb5);
	border-radius: 99px;
}
.eb-inspector .eb-slider .ui-slider-handle {
	width: 15px;
	height: 15px;
	top: -5px;
	margin-left: -8px;
	border-radius: 50%;
	background: var(--main-link-color, #247cb5);
	border: 2px solid var(--content-background-color, #fff);
	box-shadow: 0 1px 3px rgba(0,0,0,.25);
	cursor: pointer;
	outline: none;
}
.eb-slider__val {
	font-size: 12px;
	font-weight: 700;
	color: var(--main-link-color, #247cb5);
	background: var(--gray-hover-color, #f3f4f7);
	border-radius: 6px;
	padding: 2px 7px;
	min-width: 40px;
	text-align: center;
	white-space: nowrap;
}

/* Inline checkbox (reuses the .newCheckbox* custom widget) */
.eb-inspector .newCheckboxWrapper {
	margin-bottom: 0;
	font-size: 12.5px;
}
.eb-check {
	vertical-align: middle;
}
.eb-check-row {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	flex-basis: 100%;
	margin-top: 4px;
}
.eb-check-row .newCheckboxWrapper {
	flex: none;
	width: 16px;
	height: 16px;
	padding: 0;
	margin: 0;
}
.eb-check-row .newCheckboxIndicator {
	top: 0;
	left: 0;
}
.eb-check__text {
	font-size: 12px;
	font-weight: 600;
	color: var(--gray-text-color, #6a7480);
	cursor: pointer;
}

/* Custom CSS <style> tags */
.eb-css-tag {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.2;
}

/* ==========================================================================
   EasyBuilder right-column tab reskins (Concept A "Organized Inspector")
   Sections / Images / Comments. Purely visual; scoped to the palette + panels
   so the drag-drop canvas (#easyBuilderSortable) is never affected.
   ========================================================================== */

/* ---------- Sections tab: draggable section palette as a card grid ---------- */
#visibleNewEasyBuilderSections {
	padding: 4px 2px 12px;
}
#visibleNewEasyBuilderSections .easyBuilderSections {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
#visibleNewEasyBuilderSections .easyBuilderSections > li {
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	padding: 0 !important;
	height: auto !important;
	list-style: none;
}
/* the hidden section-content + margin spacers are only needed on the canvas */
#visibleNewEasyBuilderSections .sectionContentWrapper,
#visibleNewEasyBuilderSections .leftMargin,
#visibleNewEasyBuilderSections .rightMargin {
	display: none !important;
}
#visibleNewEasyBuilderSections .visibleNewSection {
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 62px;
	margin: 0 !important;
	padding: 10px !important;
	border: 1px solid var(--content-border-color, #e2e3e5) !important;
	border-radius: 10px !important;
	background: var(--content-background-color, #fff) !important;
	cursor: grab;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
#visibleNewEasyBuilderSections .visibleNewSection:hover {
	border-color: var(--main-link-color, #247cb5) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .10);
	transform: translateY(-1px);
}
#visibleNewEasyBuilderSections .visibleNewSection img {
	max-width: 100%;
	height: auto;
	display: block;
	cursor: grab;
}

/* ---------- Images tab: media thumbnails as hoverable cards ---------- */
#Helper-3 > .grayText.italic {
	margin: 0 2px 12px;
	font-size: 12px;
}
#imageDraggerImages {
	line-height: 0;
}
#imageDraggerImages td.imageDraggerImage {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 76px;
	height: auto !important;
	margin: 3px;
	padding: 6px !important;
	border: 1px solid var(--content-border-color, #e2e3e5);
	border-radius: 9px;
	background: var(--content-background-color, #fff);
	vertical-align: top;
	cursor: grab;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
#imageDraggerImages td.imageDraggerImage:hover {
	border-color: var(--main-link-color, #247cb5);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .10);
	transform: translateY(-1px);
}
#imageDraggerImages td.imageDraggerImage img {
	max-width: 100% !important;
	max-height: 60px !important;
	border-radius: 4px;
	cursor: grab;
}

/* ---------- Comments tab: avatar thread + composer ---------- */
.eb-comments {
	padding: 4px 2px 8px;
}
.eb-comments__note {
	margin: 8px 2px;
	font-size: 13px;
	font-style: italic;
	color: var(--gray-text-color, #6a7480);
}
.eb-thread {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 14px;
}
.eb-cmt {
	display: flex;
	gap: 10px;
}
.eb-av {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .02em;
	color: #fff;
}
.eb-av-1 { background: linear-gradient(135deg, #0a84ff, #4dabf7); }
.eb-av-2 { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.eb-av-3 { background: linear-gradient(135deg, #16a34a, #4ade80); }
.eb-av-4 { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.eb-av-5 { background: linear-gradient(135deg, #e5484d, #ff7777); }
.eb-cmt__b {
	flex: 1;
	min-width: 0;
	padding: 9px 12px;
	background: var(--main-background-color, #f8f9fb);
	border: 1px solid var(--content-border-color, #e2e3e5);
	border-radius: 11px;
	border-top-left-radius: 3px;
}
.eb-cmt__meta {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 3px;
}
.eb-cmt__meta b {
	font-size: 12.5px;
	color: var(--main-text-color, #404e60);
}
.eb-cmt__meta time {
	font-size: 11px;
	color: var(--medium-gray-text-color, #bac4d0);
}
.eb-cmt__txt {
	font-size: 13px;
	line-height: 1.45;
	color: var(--main-text-color, #404e60);
	word-wrap: break-word;
	overflow-wrap: anywhere;
}
.eb-comments__empty {
	padding: 18px 0;
	font-size: 13px;
	font-style: italic;
	text-align: center;
	color: var(--gray-text-color, #6a7480);
}
.eb-composer {
	padding: 9px;
	background: var(--content-background-color, #fff);
	border: 1px solid var(--content-border-color, #e2e3e5);
	border-radius: 11px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.eb-composer:focus-within {
	border-color: var(--main-link-color, #247cb5);
	box-shadow: 0 0 0 3px rgba(36, 124, 181, .12);
}
.eb-composer__ta {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	border: 0;
	outline: none;
	resize: vertical;
	font: inherit;
	font-size: 13px;
	color: var(--main-text-color, #404e60);
	background: transparent;
}
.eb-composer__row {
	display: flex;
	justify-content: flex-end;
	margin-top: 6px;
}
.eb-btn-green {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 15px;
	border: 0;
	border-radius: 99px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	color: #fff !important;
	background: #43a047;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
	text-decoration: none !important;
	cursor: pointer;
}
.eb-btn-green:hover {
	background: #3d9241;
	filter: brightness(1.03);
}


/* Surveys */
#surveysOuterWrapper {
	margin: 10px 30px 5px 30px !important;
    padding: 0px !important;
}
/* Lock the survey layout to the page width so the editor column can't grow past the
   viewport and scroll underneath the position:fixed left rail (Surveys / Questions lists). */
#surveysOuterTable {
	table-layout: fixed;
}
#surveySequenceDetails {
	min-width: 0;
	/* Contain the legacy auto-layout settings table (Submit Button controls, Footer/Completed
	   editors, fixed-width help widgets) inside the editor column so a wide row can't push the
	   document width and run off to the right; it scrolls within the panel instead. */
	overflow-x: auto;
}
/* ---- Left-rail integrated header bar (Surveys/Questions toggle + help) ---- */
.surveyRailHead {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	border-radius: 4px 4px 0 0;
	background: var(--main-text-color, #404e60);
}
.surveyRailHead .railSeg {
	flex: 1 1 auto;
	display: flex;
	gap: 4px;
	padding: 3px;
	border-radius: 9px;
	background: color-mix(in srgb, var(--content-background-color, #fff) 15%, transparent);
}
.surveyRailHead .railSeg__btn {
	flex: 1 1 0;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	border: 0;
	background: transparent;
	color: color-mix(in srgb, var(--content-background-color, #fff) 80%, transparent);
	padding: 7px 10px;
	border-radius: 7px;
	cursor: pointer;
	transition: .15s;
}
.surveyRailHead .railSeg__btn:hover {
	color: var(--content-background-color, #fff);
	background: color-mix(in srgb, var(--content-background-color, #fff) 12%, transparent);
}
.surveyRailHead .railSeg__btn.is-on {
	background: var(--content-background-color, #fff);
	color: var(--main-text-color, #404e60);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
}
.surveyRailHead__help {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
}
.surveyRailHead__help .help_icon {
	margin: 0;
}
/* ---- Modernized left-rail rows (Surveys list + Questions library) ---- */
.railRow {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 12px;
	border-radius: 8px;
	cursor: pointer;
}
.railRow:hover {
	background: color-mix(in srgb, var(--main-text-color, #404e60) 6%, transparent);
}
.railRow__ico {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: color-mix(in srgb, var(--main-link-color, #0082fc) 12%, transparent);
	color: var(--main-link-color, #0082fc);
}
/* question-type accent coloring for the Questions library rows */
.railRow__ico.sqIcoWrap {
	color: var(--sq-accent);
	background: color-mix(in srgb, var(--sq-accent) 14%, var(--content-background-color, #fff));
}
.railRow__ico.is-select   { --sq-accent: var(--main-link-color, #0082fc); }
.railRow__ico.is-checkbox { --sq-accent: #7c5cff; }
.railRow__ico.is-quality  { --sq-accent: #2f9bd6; }
.railRow__ico.is-stars    { --sq-accent: #e0a100; }
.railRow__ico.is-text     { --sq-accent: #0d9488; }
.railRow__ico.is-short    { --sq-accent: #0d9488; }
.railRow__ico.is-rank     { --sq-accent: #7c5cff; }
.railRow__ico.is-times    { --sq-accent: var(--green-text-color, #16b370); }
.railRow__ico svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.railRow__ico svg .f {
	fill: currentColor;
	stroke: none;
}
.railRow__body {
	flex: 1 1 auto;
	min-width: 0;
	display: block;
	line-height: 1.3;
}
.railRow__name {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 13.5px;
	color: var(--main-text-color, #404e60);
}
.railRow__meta {
	display: block;
	font-weight: 400;
	font-size: 11.5px;
	margin-top: 1px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: color-mix(in srgb, var(--main-text-color, #404e60) 55%, transparent);
}
.railRow__meta a {
	color: inherit;
	text-decoration: none;
}
.railRow__meta .icon-track {
	font-size: 12px;
	margin-right: 1px;
}
.railRow__aside {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
}
.railRow__aside .icon-add-plus {
	font-size: 16px;
}
/* Modernized folder headers */
.railFolder {
	border-radius: 8px;
	margin-top: 8px;
}
.railFolder:hover {
	background: color-mix(in srgb, var(--main-text-color, #404e60) 5%, transparent);
}
.railFolder .icon-file {
	color: var(--main-link-color, #0082fc);
	margin-right: 3px;
}
/* Questions library search box */
.railSearch {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 10px 12px 10px;
	padding: 7px 10px;
	border: 1px solid var(--input-border-color, #e2e3e5);
	border-radius: 9px;
	background: var(--input-background-color, #fff);
}
.railSearch:focus-within {
	border-color: var(--main-link-color, #0082fc);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--main-link-color, #0082fc) 18%, transparent);
}
.railSearch__ico {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: color-mix(in srgb, var(--main-text-color, #404e60) 55%, transparent);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.railSearch__input {
	flex: 1 1 auto;
	min-width: 0;
	border: none !important;
	outline: none;
	background: transparent !important;
	padding: 0 !important;
	font-size: 13px;
	color: var(--input-text-color, #404e60) !important;
}
.railSearch__clear {
	flex: 0 0 auto;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	color: color-mix(in srgb, var(--main-text-color, #404e60) 45%, transparent);
}
.railSearch__clear:hover {
	color: var(--main-text-color, #404e60);
}
#modifySurvey {
	padding: 30px;
}
.surveyResponseDetails {
	display: none;
	margin: 5px 20px 20px 20px;
}
#surveyRail {
	position: fixed;
	box-sizing: border-box;
	width: 510px;
	/* Fallback only; sizeSurveyRail() in Surveys.pm sets the exact height at runtime so the
	   list ends ~25px above the viewport bottom regardless of the masthead/toolbar height. */
	height: calc(100% - 160px);
	min-height: 200px;
	display: flex;
	flex-direction: column;
}
#surveySequences {
	display: block;
	box-sizing: border-box;
	flex: 1 1 auto;
	min-height: 0;
	background: #fff;
	overflow-y: auto;
}
#surveyQuestionsWrapper {
	display: block;
	box-sizing: border-box;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}
#surveyQuestionsWrapper .fixTextBySelectMenu {
	padding-left: 8px;
}
#surveySequenceDetails {
	font-size: 14px;
}
#surveySequenceDetails, #surveySequences, #surveyQuestionsWrapper {
    border: 1px solid var(--content-border-color, #e2e3e5);
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    background: var(--content-background-color, #fff);
}
#surveySequenceDetails a.ui-state-green, #surveySequenceDetails a.ui-state-yellow, #surveySequenceDetails a.ui-state-red {
	font-size: 16px;
}
#surveySequenceDetails .ui-selectmenu-button, #surveySequenceDetails input, #surveySequenceDetails textarea {
    border: 1px solid var(--input-border-color, #e2e3e5);
    color: var(--input-text-color, #404e60);
    background: var(--input-background-color, #fff);
}
#surveySequenceDetails td {
    background: var(--content-background-color, #fff);
}
#surveySubmitButtonColorSpan img {
	height: 20px;
	width: 20px;
	vertical-align: middle;
}
/* ---- Modernized editor header (Modify Survey) ---- */
#surveySequenceDetails .surveyEditorHead {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px 20px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
#surveySequenceDetails .surveyEditorHead__main {
	min-width: 0;
}
#surveySequenceDetails .surveyEditorHead__kick {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--main-text-color, #404e60) 52%, var(--content-background-color, #fff));
	margin-bottom: 3px;
}
#surveySequenceDetails .surveyEditorHead__title {
	margin: 0;
	font-size: 20px;
	line-height: 1.25;
	color: var(--main-text-color, #404e60);
}
#surveySequenceDetails .surveyEditorHead__title .help_icon {
	vertical-align: middle;
}
#surveySequenceDetails .surveyEditorHead__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin-top: 10px;
}
#surveySequenceDetails .surveyStat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: color-mix(in srgb, var(--main-text-color, #404e60) 70%, var(--content-background-color, #fff));
}
#surveySequenceDetails .surveyStat svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: 0 0 auto;
	opacity: .8;
}
#surveySequenceDetails .surveyStat svg .f {
	fill: currentColor;
	stroke: none;
}
#surveySequenceDetails .surveyEditorHead__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}
/* Align the Results button's chart glyph with its label; .icon-track is missing from the global
   .ui-state-default icon list, so it defaults to baseline and sits low next to "Results". */
#surveySequenceDetails .icon-track {
	display: inline-block;
	vertical-align: middle;
	margin-top: 2px;
	font-size: 14px;
}
/* Center the Save Survey pill and the Results link on one axis. margin: 0 cancels the
   theme's .ui-state-green margin-bottom: 18px (innerCSS6), which otherwise inflates the
   pill's margin box and makes flex centering render the pill ~9px above the Results link. */
#surveySequenceDetails .surveyEditorHead__actions a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	margin: 0;
}
#surveySequenceDetails .surveyEditorHead__actions .icon-track {
	margin-top: 0;
	line-height: 1;
}

/* ---- Modernized survey Design panel (Modify Survey -> Design) ---- */
#surveySequenceDetails .surveyPanelCell {
	padding: 8px 20px 16px 20px;
}
#surveySequenceDetails .surveyFields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 18px;
	max-width: 900px;
}
#surveySequenceDetails .surveyField {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
#surveySequenceDetails .surveyField--full {
	grid-column: 1 / -1;
}
#surveySequenceDetails .surveyField--header {
	margin-top: 16px;
}
#surveySequenceDetails .surveyField__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .2px;
	color: color-mix(in srgb, var(--main-text-color, #404e60) 68%, var(--content-background-color, #fff));
}
#surveySequenceDetails input.surveyField__input {
	width: 100%;
	box-sizing: border-box;
	font-size: 14px;
	color: var(--input-text-color, #404e60);
	background: var(--input-background-color, #fff);
	border: 1px solid var(--input-border-color, #e2e3e5);
	border-radius: 10px;
	padding: 10px 12px;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
#surveySequenceDetails input.surveyField__input:focus {
	border-color: var(--main-link-color, #0082fc);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--main-link-color, #0082fc) 22%, transparent);
}
#surveySequenceDetails .surveyField__control {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 10px;
}
#surveySequenceDetails .surveyField__control > .ui-selectmenu-button,
#surveySequenceDetails .surveyField__control > select {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	border-radius: 10px;
}
#surveySequenceDetails .surveyField__control > select {
	font-size: 14px;
	padding: 9px 12px;
	border: 1px solid var(--input-border-color, #e2e3e5);
	background: var(--input-background-color, #fff);
	color: var(--input-text-color, #404e60);
}
#surveySequenceDetails .surveyField__control > .help_icon {
	flex: 0 0 auto;
}
#surveySequenceDetails #surveyCustomURL {
	flex: 1 1 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: color-mix(in srgb, var(--main-text-color, #404e60) 70%, var(--content-background-color, #fff));
}
#surveySequenceDetails .surveyField__input--url {
	flex: 1 1 240px;
}
/* ---- Modernized survey question cards (Modify Survey -> Questions) ---- */
#sequenceQuestions {
	list-style: none;
	margin: 8px 0 0 0;
	padding: 0;
}
#sequenceQuestions li {
	list-style: none;
	clear: none;
	width: auto;
}
#sequenceQuestions .ui-sortable-placeholder {
	visibility: visible !important;
	height: 58px;
	margin: 0 0 10px 0;
	border: 2px dashed color-mix(in srgb, var(--main-link-color, #0082fc) 45%, var(--content-background-color, #fff));
	border-radius: 12px;
	background: color-mix(in srgb, var(--main-link-color, #0082fc) 7%, var(--content-background-color, #fff));
	box-sizing: border-box;
}

/* question card */
#sequenceQuestions li.sqCard {
	--sq-accent: var(--main-link-color, #0082fc);
	margin: 0 0 10px 0;
	padding: 0;
	background: var(--content-background-color, #fff);
	border: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 14%, var(--content-background-color, #fff));
	border-left: 3px solid var(--sq-accent);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
	transition: box-shadow .15s ease, border-color .15s ease;
}
#sequenceQuestions li.sqCard:hover {
	border-color: color-mix(in srgb, var(--main-text-color, #404e60) 24%, var(--content-background-color, #fff));
	box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--main-text-color, #404e60) 60%, transparent);
}
#sequenceQuestions li.is-select   { --sq-accent: var(--main-link-color, #0082fc); }
#sequenceQuestions li.is-checkbox { --sq-accent: #7c5cff; }
#sequenceQuestions li.is-quality  { --sq-accent: #2f9bd6; }
#sequenceQuestions li.is-stars    { --sq-accent: #e0a100; }
#sequenceQuestions li.is-text     { --sq-accent: #0d9488; }
#sequenceQuestions li.is-short    { --sq-accent: #0d9488; }
#sequenceQuestions li.is-rank     { --sq-accent: #7c5cff; }
#sequenceQuestions li.is-times    { --sq-accent: var(--green-text-color, #16b370); }

.sqCard__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
}
.sqCard__grip {
	flex: 0 0 auto;
	cursor: grab;
	opacity: .5;
}
.sqCard__grip:active { cursor: grabbing; }
.sqCard__num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 25px;
	height: 25px;
	padding: 0 7px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	color: var(--sq-accent);
	background: color-mix(in srgb, var(--sq-accent) 15%, var(--content-background-color, #fff));
}
.sqCard__ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	color: var(--sq-accent);
	background: color-mix(in srgb, var(--sq-accent) 13%, var(--content-background-color, #fff));
}
.sqIco {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.sqIco .f { fill: currentColor; stroke: none; }
.sqCard__main {
	flex: 1 1 auto;
	min-width: 0;
}
.sqCard__title {
	font-weight: 700;
	font-size: 15px;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sqCard__title a {
	color: var(--main-text-color, #404e60);
	text-decoration: none;
	cursor: pointer;
}
.sqCard__title a:hover {
	color: var(--main-link-color, #247cb5);
	text-decoration: underline;
}
.sqCard__code {
	margin-top: 2px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.3;
	color: color-mix(in srgb, var(--main-text-color, #404e60) 55%, var(--content-background-color, #fff));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sqCard__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 5px;
}
.sqChip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 20px;
	padding: 0 9px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .2px;
	white-space: nowrap;
}
.sqChip--type {
	color: var(--sq-accent);
	background: color-mix(in srgb, var(--sq-accent) 13%, var(--content-background-color, #fff));
}
.sqChip--score {
	color: var(--green-text-color, #16b370);
	background: color-mix(in srgb, var(--green-text-color, #16b370) 15%, var(--content-background-color, #fff));
}
.sqCard__side {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* required toggle switch */
.sqSwitch {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	cursor: pointer;
	user-select: none;
	font-size: 12.5px;
	white-space: nowrap;
	color: color-mix(in srgb, var(--main-text-color, #404e60) 80%, var(--content-background-color, #fff));
}
#surveySequenceDetails .sqSwitch input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.sqSwitch__track {
	position: relative;
	flex: 0 0 auto;
	width: 34px;
	height: 20px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--main-text-color, #404e60) 28%, var(--content-background-color, #fff));
	transition: background .15s ease;
}
.sqSwitch__track::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .35);
	transition: transform .15s ease;
}
.sqSwitch input:checked + .sqSwitch__track {
	background: var(--green-text-color, #16b370);
}
.sqSwitch input:checked + .sqSwitch__track::after {
	transform: translateX(14px);
}
.sqSwitch input:focus-visible + .sqSwitch__track {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-text-color, #16b370) 35%, transparent);
}

/* icon / label action buttons */
#surveySequenceDetails .sqBtn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 30px;
	padding: 0 11px;
	border-radius: 8px;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	color: color-mix(in srgb, var(--main-text-color, #404e60) 82%, var(--content-background-color, #fff));
	background: var(--content-background-color, #fff);
	border: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 17%, var(--content-background-color, #fff));
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}
#surveySequenceDetails .sqBtn:hover {
	color: var(--main-link-color, #0082fc);
	border-color: var(--main-link-color, #0082fc);
	background: color-mix(in srgb, var(--main-link-color, #0082fc) 8%, var(--content-background-color, #fff));
}
.sqBtn--logic .sqIco { width: 15px; height: 15px; }
#surveySequenceDetails .sqBtn--logic:hover,
#surveySequenceDetails .sqBtn--logic.sqActive {
	color: #7c5cff;
	border-color: #7c5cff;
	background: color-mix(in srgb, #7c5cff 10%, var(--content-background-color, #fff));
}
#surveySequenceDetails .sqBtn--del {
	width: 32px;
	padding: 0;
	justify-content: center;
}
#surveySequenceDetails .sqBtn--del:hover {
	color: var(--red-text-color, #e5484d);
	border-color: var(--red-text-color, #e5484d);
	background: color-mix(in srgb, var(--red-text-color, #e5484d) 9%, var(--content-background-color, #fff));
}
.sqBtn--del .icon-delete { font-size: 14px; line-height: 1; }

/* nested logic editor (kept functional; visually contained) */
.sqCard__logic { padding: 0; }
.sqCard__logic:empty { display: none; }
.sqCard__logic:has([id^="logic"]) {
	padding: 4px 16px 14px 52px;
	border-top: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 10%, var(--content-background-color, #fff));
}

/* page break divider */
#sequenceQuestions li.sqBreak {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px 0;
	padding: 7px 14px;
	border: 1px dashed color-mix(in srgb, var(--main-text-color, #404e60) 24%, var(--content-background-color, #fff));
	border-radius: 8px;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--main-text-color, #404e60) 58%, var(--content-background-color, #fff));
	background: color-mix(in srgb, var(--main-text-color, #404e60) 4%, var(--content-background-color, #fff));
}
#sequenceQuestions li.sqBreak .sqBreak__del { margin-left: auto; }
#surveyCodes {
	padding-bottom: 10px;
}
#noSurveyQuestionsWrapper {
	padding: 5px 10px;
}
.surveyAnswerPointsCell {
	width: 100px;
}
#crossTab1, #crossTab2 {
	max-width: 30%;
}
.surveyResponseWrapper {
	margin-bottom: 25px;
	padding: 15px;
	background-color: var(--content-background-color, #fff);
	box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.15);
}

/* Learning */
#title_Learning {
    padding: 20px 0px 15px 35px !important;
}
#learningButtons {
	position: absolute;
	right: 35px;
	margin-top: 35px;
}
#learningSurveys {
	margin-top: 2%;
}
#learningWikiArticles, #learningSurveys {
	float: left;
	width: 100%;
	height: 47%;
	vertical-align: top;
	overflow-x: visible;
	overflow-y: auto;
    margin-left: 30px !important;
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0) !important;
    border: 1px solid var(--content-border-color, #e2e3e5);
    margin-bottom: 30px !important;
    background: var(--content-background-color, #fff) !important;
}
#learningWikiArticles div, #learningSurveys div {
	background: var(--content-background-color, #fff) !important;
}
#learningCourses {
    padding-left: 30px !important;
	float: left;
	margin-top: 5px;
	margin-left: 26%;
	width: 73%;
	vertical-align: top;
	display: block;
	overflow: auto;
}
#learningCourseDetails, .learningModule {
    margin-left: 0px !important;
    padding: 30px !important;
}
#cke_courseInstructorNotes, #cke_courseDescription {
    margin: 10px 0px;
}
#viewCourseDescription {
    margin: 10px 0px;
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    border: 1px solid var(--content-border-color, #e2e3e5);
    background: var(--content-background-color, #fff);
    width: auto;
}

/* Manage Website */
.sortablePages li {
	margin: 10px 5px;
}
#manageWebsiteActionButtons {
	position: absolute;
	right: 30px;
    top: 179px !important;
    z-index: 9;
}
#eventCheckboxes, #eventCalendarCombine {
	height: auto;
	float: left;
	margin-left: 10px;
	width: 95%;
}
#adManagerWrapper {
	height: auto;
	width: 95%;
}
#blogCategories .innerHeading, #newsHeadlines .innerHeading {
	padding: 5px;
}
#aiBlogGeneratorTable {
	width: 70%; 
	margin-top: 20px;
	border: 1px solid var(--input-border-color, #e2e3e5);
}
.aiBlogGeneratorTr td {
	padding: 15px;
}
#domainsListWrapper {
	height: 150px; 
	overflow: auto; 
	padding: 10px;
}
.domainTrackingDomain {
	white-space: nowrap; 
	max-width: 96%; 
	overflow-x: hidden;
	margin: 5px 0px;
}


/* Automation */
#automationTable {
	margin: 30px auto;
}
#title_AutomationManager {
    padding: 30px 0px 0px 30px !important;
}
#workflowsListWrapper {
	position: fixed;
	right: 5px;
	width: 200px;
	height: 200px;
	max-height: 200px;
	border: 1px solid var(--content-border-color, #e2e3e5);
	border-radius: 2px;
	padding: 10px;
	background-color: var(--content-background-color, #fff);
	overflow-x: visible;
	overflow-y: auto;
	opacity: 0.9;
}
#automationTable td {
	vertical-align: top;
}
#automationNav {
	width: 20%;
	min-width: 285px;
}
#automationNav .wrapper {
    border: 1px solid var(--content-border-color, #e2e3e5);
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
}
#automationContent {
	padding-left: 20px;
}
#automationNav button.accordion {
	background-color: var(--content-background-color, #fff);
	color: var(--main-text-color, #404e60);
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 15px;
	transition: all 0.5s;
}
#automationNav button.accordion:active, #automationNav button.accordion:hover {
    background-color: #0182fc;
    color: white;
}
#automationNav button.accordion:after {
	content: '\02795';
	font-size: 13px;
	color: #fff;
	float: right;
	margin-left: 5px;
}
#automationNav button.accordion.active:after {
	content: "\2796";
}
#automationNav div.panel {
	padding: 0px 0px 0px 12px;
	background-color: var(--content-background-color, #fff);
	max-height: 0;
	overflow: hidden;
	transition: 0.6s ease-in-out;
	opacity: 0;
}
#automationNav div.panel.show {
	opacity: 1;
	max-height: 200px;
	overflow-y: auto !important;
	width: auto;
}
#automationNav .wrapper {
  width: 99%;
  height: auto;
  box-shadow: none;
    border: 1px solid var(--content-border-color, #e2e3e5) !important;
}
#automationNav .panel p {
	width: 90%;
}


/* Drip Campaigns */
#title_DripCampaigns {
    padding: 30px 0px 0px 30px !important;
}
#dripCampaignsWrapper {
	font-size: 14px;
}
#dripCampaignsWrapper a.ui-state-green, #dripCampaignsWrapper a.ui-state-yellow, #dripCampaignsWrapper a.ui-state-red {
	font-size: 16px;
}
.dripCampaignWrapper {
	background: #fff;
	padding: 30px;
}
.dripCampaignWrapper input {
    border: 1px solid var(--input-border-color, #e2e3e5);
    color: var(--input-text-color, #404e60);
    background: var(--input-background-color, #f8f9fb);
}
.dripCampaignWrapper .ui-selectmenu-button {
    border: 1px solid var(--content-border-color, #e2e3e5);
    color: var(--main-text-color, #404e60);
    background: var(--main-background-color, #f8f9fb);
}
.dripCampaignWrapper table {
	margin-top: 5px;
}
.dripPerformanceChart {
	height: 250px;
	min-width: 600px;
	width: 60%;
}
.dripCampaignChartContacts {
	max-height: 280px;
	overflow: auto;
}
#newDripCampaign {
	border: 1px solid var(--content-border-color, #e2e3e5) !important;
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    padding: 30px;
    margin: 0px 30px !important;
}
#dripCampaignsActionButtons {
	top: 190px !important;
}


/* Lead Scoring */
#title_LeadScoring {
    padding: 75px 0px 0px 30px !important;
}
#LeadScoring-1 table {
	width: 50%;
}
#LeadScoring-1 table td {
	padding-top: 5px;
}
div#halfLifeChart {
	right: 3% !important;
}
.hotAutomationLeadScoringBox {
	clear: both;
	line-height: 30px;
	padding: 10px;
	background-color: var(--main-background-color, #f8f9fb);
	border: 1px solid var(--red-text-color, #bd0008);
	box-shadow: none;
	border-radius: 2px;
}
.coldAutomationLeadScoringBox {
	clear: both;
	line-height: 30px;
	padding: 10px;
	background-color: var(--main-background-color, #f8f9fb);
	border: 1px solid #8cb4c6;
	box-shadow: none;
	border-radius: 2px;
}
.leadScoringBox {
	line-height: 30px;
	padding: 10px;
	background-color: var(--content-background-color, #fff);
	border: 1px solid var(--content-border-color, #e2e3e5);
	box-shadow: none;
	border-radius: 2px;
}
#LeadScoring-1, #LeadScoring-2, #LeadScoring-3, #LeadScoring-4, #LeadScoring-5 {
	background: var(--content-background-color, #fff) !important;
}
#leadScoringWrapper .ui-widget-content:not(.helpWidget) {
	background: var(--content-background-color, #fff) !important;
}
#LeadScoring .ui-tabs-nav {
    margin-left: -35px !important;
}
#LeadScoring input {
    border: 1px solid var(--input-border-color, #e2e3e5);
    color: var(--input-text-color, #404e60);
    background: var(--input-background-color, #f8f9fb);
}
#LeadScoring .ui-selectmenu-button {
    border: 1px solid var(--content-border-color, #e2e3e5);
    color: var(--main-text-color, #404e60);
    background: var(--main-background-color, #f8f9fb);
}
#LeadScoring a.ui-state-green {
	font-size: 16px;
}
#leadScoringQuotasDateWrapper {
	font-weight: bold;
	text-align: center;
	margin: 20px;
}
#displayLeadScoringQuotasFrom, #displayLeadScoringQuotasTo {
	width: 220px;
}
#leadScoringQuotasTable {
	width: 92%;
	clear: both;
	table-layout: fixed;
}
#leadScoringQuotasTable th {
	white-space: nowrap;
}
#leadScoringQuotasTable .quotaPointsChart {
	height: 200px;
	width: 90%;
	min-width: 400px;
}
#leadScoringQuotasTable .quotaDial {
	height: 100px;
	width: 150px;
}
#leadScoringActionButtons {
	top: 195px !important;
	right: 20px;
	height: auto;
	position: absolute;
}


/* Link Library */
#title_LinkLibrary {
    padding: 16px 0px 15px 30px !important;
}
#linkLibraryWrapper {
    margin: 0px 30px;
    border: 1px solid var(--content-border-color, #e2e3e5);
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    background: var(--content-background-color, #fff);
}
#linkLibraryWrapper .main-flex-nav {
    border-bottom: 1px solid var(--content-border-color, #e2e3e5);
    height: 61px;
}
#linkLibraryWrapper .main-flex-nav li {
    margin: 0px 15px !important;
    padding: 0px;
}
#linkLibraryWrapper .main-flex-nav li a {
    padding: 18px 10px !important;
    font-size: 16px;
}
#linkLibraryWrapper .main-flex-nav li a:hover{
    border-width: 0px 0px 3px 0px;
	border-style: solid;
}
#linkLibraryWrapper .main-flex-nav .flex-active-link {
    border-width: 0px 0px 3px 0px;
	border-style: solid;
	border-color: var(--nav-box-shadow-color);
}
#linkLibraryWrapper a.ui-state-green, #linkLibraryWrapper a.ui-state-yellow, #linkLibraryWrapper a.ui-state-red {
	font-size: 16px;
}
#linkLibraryTable_length {
	margin-top: 5px;
}
#linkLibraryTableSelector-button {
	vertical-align: middle;
	margin-top: -4px;
}
#dynamic-panel, #static-panel {
    margin: 0px;
    border: 0px;
    box-shadow: none;
    padding: 30px !important;
}
#linkLibraryWrapper input {
    border: 1px solid var(--input-border-color, #e2e3e5) !important;
    color: var(--input-text-color, #404e60);
    background: var(--input-background-color, #f8f9fb);
}
#linkLibraryWrapper .ui-selectmenu-button {
    border: 1px solid var(--content-border-color, #e2e3e5) !important;
    color: var(--main-text-color, #404e60);
    background: var(--main-background-color, #f8f9fb);
}
#linkLibraryTable th {
    border: 1px solid var(--content-border-color, #e2e3e5);
    color: var(--main-text-color, #404e60);
    background: var(--main-background-color, #f8f9fb);
}
#linkLibraryTable_filter input {
	width: 100%;
}
#linkLibraryActionButtons {
	top: 150px !important;
}


/* Journeys */
#title_Journeys {
    padding: 15px 0px 0px 30px !important;
    margin-bottom: 15px !important;
}
#journeysActionButtons {
	position: absolute;
	right: 30px !important;
    top: 160px !important;
}
#journeyButtons {
	margin: 15px 30px 0px 30px;
    display: inline-block;
    padding-bottom: 15px !important;
}
#journeyButtons > .ui-state-default:nth-child(2) {
	border: 1px solid #6a7480 !important;
}
#journeyButtons > .ui-state-default:nth-child(3) {
	border: 1px solid #ffa101 !important;
}
#journeyButtons > .ui-state-default:nth-child(4) {
	border: 1px solid #247cb5 !important;
}
#journeyButtons > .ui-state-default:nth-child(5) {
	border: 1px solid #d95459 !important;
}
#saveJourneyForm #journeyID-button {
	max-width: 350px;
}
.loadJourneyBoxOverlay {
	position: absolute;
	font-size: 36px;
	background: var(--content-background-color, #fff);
	border: 1px solid var(--main-text-color, #404e60);
	border-radius: 10px;
	margin-top: 5px;
	opacity: 0.8;
	padding: 7px;
}

.dragObjectsText {
	float: left;
	display: inline-block;
	padding-top: 12px;
}
.flowchart-operator-title {
	max-height: 250px;
}
.journeyTooltip {
	position: fixed;
	padding: 5px;
	width: 180px;
	z-index: 9999;
	overflow-x: hidden;
	border: 1px solid var(--content-border-color, #e2e3e5);
    background: var(--main-text-color, #404e60); /* inverted color */
    color: var(--main-background-color, #f8f9fb);
}
.journeyProgressOperator {
	background-color: #16b370 !important;
	color: #f8f9fb !important;
}
.flowchart-operator, .draggable_operator {
	color: #404e60;
}
.journeyProgressOperator .flowchart-operator-title {
	color: #333 !important;
}
#journey .operator_border_start .flowchart-operator-title {
	background-color: #16b370 !important;
	color: #f8f9fb !important;
}
#journey .operator_border_delay .flowchart-operator-title {
	background-color: #ffa101 !important;
	color: #f8f9fb !important;
}
#journey .operator_border_decision .flowchart-operator-title {
	background-color: #6a7480 !important;
	color: #f8f9fb !important;
}
#journey .operator_border_action .flowchart-operator-title {
	background-color: #247cb5 !important;
	color: #f8f9fb !important;
}
#journey .operator_border_stop .flowchart-operator-title {
	background-color: #d95459 !important;
	color: #f8f9fb !important;
}
.flowchart-links-layer, .flowchart-operators-layer, .flowchart-temporary-link-layer {
    overflow: visible !important;
}
.flowchart-operator-connector-label {
	white-space: nowrap;
}
#contactsByOperatorReportButton {
	margin-left: 40px;
	display: inline-block;
	float: left;
	margin-top: 11px;
}
#journeyTitle {
	font-style: italic;
	font-size: 16px;
	color: var(--main-text-color, #404e60);
	padding-top: 11px;
	font-weight: normal;
}
#journeyEmailStatsTable {
	table-layout: fixed;
	width: 750px;
}
#journeyEmailStatsTable td {
	text-align: center;
}
#journeyEmailStatsTable div {
	font-size: 20px;
}
#contactsByOperatorReport {
	display: none;
	position: absolute;
	width: 600px;
	z-index: 2;
	padding: 10px;
	margin: 0px 10px;
	border: 1px solid var(--content-border-color, #e2e3e5);
	background: var(--content-background-color, #fff);
	box-shadow: 0 2px 4px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.15);
}
#journeyContainer {
	position: relative;
	height: 1000px;
	/*width: 3000px;*/
	padding: 0;
	clear: both;
	overflow: visible;
	background: repeating-linear-gradient( 45deg, #eee, #eee 10px, #e5e5e5 10px, #e5e5e5 20px );
	margin: 0px 30px;
    width: auto !important;
    border: 1px solid var(--content-border-color, #e2e3e5);
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    margin-bottom: 60px;
}
#journey {
	position: relative;
	height: 100%;
	width: 100%;
	min-width: 12000px;
	min-height: 4000px;
	overflow: visible;
	background: var(--content-background-color, #fff);
}
#journeyButtons .draggable_operator {
	background-color: #fff !important;
    border: 1px solid var(--content-border-color, #e2e3e5) !important;
    box-shadow: none !important;
    padding: 5px 10px !important;
    border-radius: 50px;
}
#journeyButtons .draggable_operator:hover {
    background-color: #1f8dce !important;
    border: 1px solid #1f8dce !important;
    color: #fff !important;
}
#journeyID-menu {
	max-height: 225px;
	overflow: auto;
}
#journeyFolderID-menu {
	max-height: 170px;
	overflow: auto;
}
#journeyDecisionSelect-menu, #decisionValueSignupFormSelector-menu, #decisionValueTicketingFormSelector-menu, #decisionValueHasTag-menu, #decisionValueIsGroupMember-menu, #decisionValueRespondedToSurvey-menu, #decisionValueAnsweredSurveyQuestion-menu, #decisionValueWatchedVimeoVideo-menu, #journeyActionSendEmail-menu, #journeyActionGroupSelect-menu, #journeyActionWorkflowSelector-menu, #journeyDelayDocumentSigned-menu, #journeyDelayUserField-menu  {
	overflow: auto;
}
#decisionSelector {
	display: inline-block;
	vertical-align: top;
	margin-top: -2px;
}
#decisionSelector input {
	padding: 7px;
	margin-left: 5px;
}
.flowchart-operator-title {
	white-space: normal !important;
}
.ui-draggable-dragging {
	z-index: 9999;
}
.flowchart-operator.copy-cursor, .flowchart-operator.copy-cursor .flowchart-operator-title {
  cursor: copy !important; /* shows copy-plus badge on most platforms */
}

/* Emojis Input */
#textEmojis {
	 width: 400px; 
	 padding: 20px; 
	 height: 200px; 
	 overflow: auto; 
	 border: 1px solid #777; 
	 border-radius: 5px; 
	 background: var(--input-background-color, #fff);
}


/* Translation manager icon top right */
#translationManagerDiv {
    overflow: hidden;
    height: 29px;
    width: 24px;
    z-index: 99999;
    position: absolute;
    right: 0px;
    top: -5px;
}
#translationManagerLink {
	color: #fff !important;
    font-size: 18px;
    z-index: 99999;
    padding: 0px;
    background-color: #999;
    border: 6px solid #777;
    border-radius: 25%;
}
#translationManagerLink:hover {
	color: #82c14e !important;
}


/* Talk bubble (project manager, task comments) */
/* Usage is <div class="talkbubble"><textarea>text goes here</textarea></div> */
.talkbubble {
  position: relative;
  padding: 10px;
  border-radius: 5px;
  border: solid #f8f9fb;
  background: var(--main-background-color, #f8f9fb);
  box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 2px 6px rgba(0,0,0,0.23);
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 2px 6px rgba(0,0,0,0.23);
}

.talkbubble:before {
  content:"";
  position: absolute;
  right: 100%;
  top: 26px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 26px solid #f8f9fb;
  border-bottom: 13px solid transparent;
}

.talkbubble textarea {
  position: inherit;
  min-width: 400px;
  min-height: 150px;
  background: inherit;
  margin: 0;
  padding: 0;
  border: none;
  resize: none;
}

.talkbubble span.viewTalkBubble {
  position: inherit;
  width: 400px;
  min-height: 60px;
  vertical-align: middle;
  background: inherit;
  display: inline-block;
  margin: 0;
  padding: 0;
  border: none;
  resize: none;
}



/* New flexbox styles */
button {
	cursor: pointer;
}

.companyOpportunity, .openCompanyProject, .closedCompanyProject, .openCompanyTicket, .closedCompanyTicket, .companyFile, .companyDocument {
	padding: 10px 3px;
}

.companyOpportunity:hover, .openCompanyProject:hover, .closedCompanyProject:hover, .openCompanyTicket:hover, .closedCompanyTicket:hover, .companyFile:hover, .companyDocument:hover {
	background-color: var(--main-background-color, #f8f9fb);
}

.container {
	width: 100%;
	margin: 0px;
	background: var(--body-background-color, #f8f9fb) !important;
	font-size: 14px;
	text-rendering: optimizeLegibility;
}


/* Flex Containers */

.flex-container {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	flex-wrap: wrap !important;
	width: 100%;
}

.flex-left {
	-webkit-flex: 1 0 0;
	flex: 1 0 0;
	margin: 1em;
}

.flex-right {
	-webkit-flex: 0.1 0 300px;
	flex: 0.1 0 300px;
	margin: 1em;
}

.flex-right > div:first-child {
	margin-top: 0px;
}

.flex-container select, .flex-container input, .flex-container textarea {
	background-color: var(--input-background-color, #fff);
}

/* 2 columns inside a flex container */
.flex-container .left-col {
	-webkit-flex: 1 0 0;
	flex: 1 0 0;
	margin: 0.5em 0.25em;
}
.flex-container .right-col {
	-webkit-flex: 1 0 0;
	flex: 1 0 0;
	margin: 0.5em 0.25em;
}

.flex-container .flex-element-wrapper {
	padding: 10px 0px;
	clear: both;
	display: block;
}
.flex-container label {
	float: left;
	display: inline-block;
	text-align: right;
	width: 35%;
	font-weight: 600;
	color: var(--main-text-color, #404e60);
	margin-right: 10px
}
.flex-value {
	float: left;
	display: inline-block;
	width: 60%;
}

/* End Flex Containers */


.main-box {
	background: var(--content-background-color, #fff);
	border-radius: 2px;
	display: inline-block;
	height: auto;
	width: 860px;
}

.box-style1 {
	box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    border: 1px solid var(--content-border-color, #e2e3e5);
}

#bottomLeft {
	margin-top: -10px;
	padding-top: 10px;
	background: url('/app2/images/timeline_background.png') left repeat-y;
}

/* Hover states for new navigation */
.flex-hover-link {
	display: inline-block;
	color: #0082fc;
	text-decoration: none;
}

.flex-hover-link::after {
	content: '';
	display: block;
	width: 0;
	height: 3px;
	background: #0082fc;
	transition: width .5s;
}

.flex-hover-link:hover::after {
	 width: 100%;
	transition: width .5s;
}

.flex-active-link {
	display: inline-block;
	color: #0082fc;
	text-decoration: none;
}

.flex-active-link::after {
	content: '';
	display: block;
	width: 100%;
	height: 3px;
	background: #0082fc;
}
.flex-active-link::after, .flex-hover-link::after {
    display: none;
}


/***** Navigation for new flex Nav ******/

.main-flex-nav {
	width: 100%;
	height: 44px;
}

.main-flex-nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.main-flex-nav li {
	display: inline;
	float: left;
	padding: 8px 20px;
}

.main-flex-nav a {
	font-size: 18px;
	color: var(--main-text-color, #404e60) !important;
	text-decoration: none;
	font-weight: 400;
	cursor: pointer;
}

.main-flex-nav a:hover {
	color: #0082fc !important;
}

.main-flex-nav i {
	padding-right: 5px;
}


/*** End Navigation Activites Styles ****/


/*** Mainbox Styles ***/

.mainbox-content {
	margin: 10px 25px;
	display: none;
	clear: both;
}

.mainbox-content h1 {
	font-size: 1.2em;
	margin: 0;
	padding: 0 0 0.5em 0;
}

.mainbox-content h3 {
	font-size: 1.0em;
	font-weight: 500;
	margin: 0;
	padding: 0 0 0.5em 0;
	color: var(--main-text-color, #404e60);
}

.mainbox-content p {
	margin: 0;
	padding: 0 0 0.5em 0;
	color: var(--main-text-color, #404e60);
}

.mainbox-flex {
	display: flex;
}

.mainbox-flex > div {
	width: 50%;
}

.mainbox-flex > div:last-child {
	margin-top: 30px;
}

.mainbox-flex-left {
	padding-right: 10px;
}

.mainbox-flex-right p {
	overflow: auto;
}

.mainbox-row-wrapper {
	display: block;
	clear: both;
	margin: 10px 0px 15px 0px;
}

.mainbox-content label {
	display: inline-block;
	text-align: right;
	width: 200px;
	font-weight: 400;
	color: var(--main-text-color, #404e60);
	margin-top: 6px;
	font-size: 14px;
}

.mainbox-content input[type="text"], .mainbox-content input[type="number"] {
	display: inline-block;
	width: 50%;
}
.mainbox-content select {
	display: inline-block;
	width: auto;
}

.mainbox-content:not(#products-panel,#overview-panel,#companyinfo-panel,#fields-panel) > div::after {
	content: '';
	display: inline-block;
	width: 100%;
	height: 1px;
	background: rgba(0,0,0,0.1);
}

.mainbox-content > div:last-child::after {
	display: none;
}

/* End Mainbox styles */




/* Small box is used for screens that have 2 columns of content */
.small-box {
	background: var(--content-background-color, #fff);
	border-radius: 2px;
	display: inline-block;
	width: 215px;
	height: auto;
}
.small-box p {
	margin: 20px;
	font-size: 14px;
	color: var(--main-text-color, #404e60);
	font-weight: 600;
}
.small-box-title p {
	font-size: 18px;
	margin-top: 10px;
}
.small-box-data .fieldLabel {
	margin-top: 20px;
}
.small-box-data > div {
	margin-left: 5%;
}
.small-box-data > div > p {
	font-weight: 400;
}
.small-box-active {
	display: block;
	color: #57D154;
	text-decoration: none;
}
.small-box-active::after {
	content: '';
	display: block;
	width: 50%;
	height: 3px;
	background: #16b370;
}




/*** Filter ***/

.filter {
	margin-left: 150px;
}

/*** Activity Timeline Styles ***/

.crm-icon {
	margin: 10px;
	font-size: 28px !important;
	color: white;
}

.item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	max-width: 730px;
	margin: 1% 10px 1% 57px;;
}
.item .image {
	padding: 1em 2em;
}
.item .image > div {
	position: relative;
	text-align: center;
	width: 50px;
	height: 50px;
	background: #0082fc;
	border-radius: 50%;
}

.item .details {
	position: relative;
	width: 640px;
}
.item .details > div {
	background: var(--content-background-color, #fff);
	border-radius: 2px;
	padding: 0.5em 1em;
	margin: 1em 0;
	overflow-wrap: break-word;
}
.item .details > div h1 {
	color: var(--main-text-color, #404e60);
	font-size: 1.1em;
	margin: 0;
	padding: 0 0 0.5em 0;
}

.item .details > div h3 {
	color: var(--main-text-color, #404e60);
	font-size: 1.0em;
	font-weight: 600;
	margin: 0;
	padding: 0 0 0.5em 0;
}
.item .details > div p {
	margin: 0;
	padding: 0 0 0.5em 0;
	color: var(--main-text-color, #404e60);
	overflow-wrap: break-word;
}

/*** End Activity Timeline Styles ***/


/*** Right Side Card Style ***/
.rightpane-card {
	background: var(--content-background-color, #fff);
	border-radius: 2px;
	padding: 0.5em 1em;
	max-width: 250px;
	margin-top: 25px;
}

.rightpane-card h1 {
	font-size: 1.1em;
	margin: 0;
	padding: 0 0 0.5em 0;
}

.rightpane-card h3 {
	font-size: 1.0em;
	font-weight: 600;
	margin: 0;
	padding: 0 0 0.5em 0;
	color: var(--main-text-color, #404e60);
}

.rightpane-card p {
	margin: 0;
	padding: 0 0 0.5em 0;
	color: var(--main-text-color, #404e60);
}


/* Company Details panel */
#companyDetailsDialog .main-flex-nav .flex-active-link, #companyDetails .main-flex-nav a:hover {
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: var(--nav-box-shadow-color);
}
#companyDetails .main-flex-nav a {
	border-bottom-width: 0px;
}
#companyDetailsDialog .flex-left .main-box {
	width: 100%;
}
#companyinfo-panel {
	display: block;
}
#companyinfo-panel > div::after {
	content: '';
	display: none;
}
#companyinfo-panel .intl-tel-input input {
	width: 100%;
}
#companyinfo-panel .intl-tel-input input:not([disabled]) {
	padding-left: 87px !important;
}
#viewCompanyPhone, #viewCompanyPhoneInternational, #editCompanyForm .iti {
	width: 100%;
}
#companyActionsLine {
	line-height: 25px;
	margin-top: 15px;
	clear: both;
	padding-top: 10px;
	width: 100%;
	border-top: 1px solid #ddd;
}
#editCompanyButton {
	margin-right: 10px;
	white-space: nowrap;
}
#contacts-panel {
	max-height: 315px;
	overflow: auto;
}
#companyDetailsDialog .crm-icon {
	color: #fff;
}

.opportunities-accent {
	display: block;
	text-decoration: none;
}
.opportunities-accent::after {
	content: '';
	display: block;
	width: 33%;
	height: 3px;
	background: #0082fc;
}

.events-accent {
		display: block;
		text-decoration: none;
}
.events-accent::after {
	content: '';
	display: block;
	width: 33%;
	height: 3px;
	background: #ffa101;
}

.invoices-accent {
		display: block;
		text-decoration: none;
}
.invoices-accent::after {
	content: '';
	display: block;
	width: 33%;
	height: 3px;
	background: #ffa101;
}

.projects-accent {
		display: block;
		text-decoration: none;
}
.projects-accent::after {
	content: '';
	display: block;
	width: 33%;
	height: 3px;
	background: #16b370;
}

.tickets-accent {
		display: block;
		text-decoration: none;
}
.tickets-accent::after {
	content: '';
	display: block;
	width: 33%;
	height: 3px;
	background: #5BC0DE;
}

.files-accent {
		display: block;
		text-decoration: none;
}
.files-accent::after {
	content: '';
	display: block;
	width: 33%;
	height: 3px;
	background: #bd0008;
}

.documents-accent {
		display: block;
		text-decoration: none;
}
.documents-accent::after {
	content: '';
	display: block;
	width: 33%;
	height: 3px;
	background: #9AA300;
}



/* Opportunities Progress Arrow, Project Stages Arrow */
.arrow-steps .step {
	font-size: 14px;
	text-align: center;
	color: var(--main-text-color, #404e60);
	cursor: default;
	margin: 0 3px;
	padding: 10px 5px 10px 15px;
	min-width: 20px;
	float: left;
	position: relative;
	background-color: #d9e3f7;
	white-space: nowrap;
	user-select: none;
}

.arrow-steps .step:after,
.arrow-steps .step:before {
	content: " ";
	position: absolute;
	top: 0;
	right: -17px;
	width: 0;
	height: 0;
	border-top: 19px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 17px solid #d9e3f7;
	z-index: 2;
}

.arrow-steps .step:before {
	right: auto;
	left: 0;
	border-left: 17px solid #fff;
	z-index: 0;
}

.arrow-steps .step:first-child:before {
	border: none;
}

.arrow-steps .step:first-child {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.arrow-steps .step span {
	position: relative;
}

.arrow-steps .step.done {
	color: #fff;
	background-color: #16b370;
}
.arrow-steps .step.done span:before {
	content: "\2714";
	position: absolute;
	top: 1px;
	left: -14px;
	background-color: transparent;
}

.arrow-steps .step.done:after {
	border-left: 17px solid #16b370;
}

.arrow-steps .step.current:after {
	border-left: 17px solid #16b370;
}

.arrow-steps .step.current {
	color: #fff;
	background-color: #0082fc;
}

.arrow-steps .step.current:after {
	border-left: 17px solid #0082fc;
}

.arrow-steps .step.future {
	color: #fff;
	background-color: #0082fc;
	opacity: 0.3;
}
.arrow-steps .step.future:after {
	border-left: 17px solid #0082fc;
}

.arrow-steps .step.lost {
	color: #fff;
	background-color: #bd0008;
}
.arrow-steps .step.lost:after {
	border-left: 17px solid #bd0008;
}
.arrow-steps .step.lost span:before {
	content: "\2718";
	position: absolute;
	top: 0px;
	left: -10px;
	background-color: #bd0008;
}
.arrow-steps .moveableTaskStage a {
	color: #fff !important;
}
.arrow-steps .opportunityArrowChecklist {
	position: absolute;
	margin-left: 4px;
	display: inline-block;
	float: left;
	z-index: 3;
	color: #fff;
	font-size: 12px;
}
.arrow-steps a.opportunityArrowChecklist {
	color: #7be0fe !important;
	padding-top: 1px;
}
#mydialog {
    background: var(--main-background-color, #f8f9fb) !important;
}
#mydialog input, #mydialog textarea, #mydialog .ui-selectmenu-button {
    border: 1px solid var(--content-border-color, #e2e3e5);
    color: var(--main-text-color, #404e60);
}
#mydialog .opportunityArrowChecklistDialog h6 {
	margin-bottom: 15px;
}
#mydialog .opportunityArrowChecklistDialog div {
	margin-bottom: 10px;
}
#mydialog .opportunityChecklistCompletedIP {
	font-size: 12px;
	font-style: italic;
	color: #777;
}

/* Group Folders */
#title_GroupFolders {
	margin: 15px;
}
.teamsList {
	font-size: 14px;
	padding-bottom: 3px;
	padding-top: 5px;
	list-style: none;
	float: left;
	display: block;
}
.teamListTitle {
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	min-width: 400px; 
	max-width: 570px; 
	width: 42%;
	display: inline-block; 
}
.teamsListLeftColumn {
	min-width: 400px; 
	max-width: 600px; 
	width: 40%; 
	float: left; 
	margin-right: 20px; 
	overflow-y: auto;
}
.teamInList {
	width: 80%;
	max-width: 450px;
    padding: 20px;
    margin: 15px;
    height: auto;
	min-height: 100px;
	list-style: none;
	background-color: var(--content-background-color, #fff);
	color: var(--main-text-color, #404e60);
  	border-radius: 0px;
  	float: left;
	box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.15);
}
.memberInList {
	padding: 8px;
	margin-top: 10px;
	margin-right: 10px;
	width: 230px;
	list-style: none;
	background-color: #d7e6f9;
  	border-radius: 0px;
  	float: left;
}
.teamInList a {
	cursor: pointer;
	color: #0459b8;
}
.teamInList a:hover {
	text-decoration: underline;
}
.teamInList img, .memberInList img {
	vertical-align: middle;
	margin-right: 5px;
}
.seasonsList {
	float: right;
	width: 49%;
	border-left: dotted 1px #0459b8;
}
.seasonsList ul {
	margin: 0px;
	padding: 0px;
}
.seasonsList li {
	list-style: none;
	padding-left: 10px;
}
.teamInList .listitem {
	width: 50%;
}
.listitem {
	float: left;
}
.listitem a {
	font-weight: bold;
}
.listitem ul {
	margin: 0px;
	padding: 0px;
	float: left;
}
.listitem li {
	list-style: none;
	font-weight: normal;
	margin-bottom: 8px;
}
.listitem span {
	float: left;
	display: inline !important;
}


/* Group Settings */
#title_GroupSettings {
	padding: 30px 0px 0px 5px !important;
}
#groupSettingsActionButtons {
	right: 280px !important;
    top: 125px;
    position: absolute;
}
#groupSettings {
	margin: 30px;
	margin-top: 0px;
}
#groupSettings h4 {
	margin-top: 30px;
	font-size: 18px;
	font-weight: 600;
	width: 200px;
	text-align: right;
}
#groupSettings .main-flex-nav {
    box-shadow: inset 0px -1px 0px 0px #e2e3e5;
    height: 61px;
}
#groupSettings .main-flex-nav li {
    margin: 0px 15px !important;
    padding: 0px;
}
#groupSettings .main-flex-nav li a {
    padding: 18px 10px !important;
    font-size: 16px;
}
#groupSettings .main-flex-nav li a:hover {
    box-shadow: inset 0px -3px 0px 0px var(--nav-box-shadow-color) !important;
}
#groupSettings .main-flex-nav .flex-active-link {
    box-shadow: inset 0px -3px 0px 0px var(--nav-box-shadow-color) !important;
}
#groupSettings .flex-container {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	flex-wrap: wrap !important;
	width: 100%;
	margin-top: 15px;
}
#groupSettings .left-col {
	-webkit-flex: 1 0 0;
	flex: 1 0 0;
}
#groupSettings .right-col {
	-webkit-flex: 3 0 0;
	flex: 3 0 0;
}
#groupSettings #description-panel {
	display: block;
}
#automaticBlogDetails {
	font-size: 14px;
	line-height: 30px;
}
#profileUpdateFields li {
	display: block;
	clear: both;
	padding: 5px;
}
#profileUpdateFields li:hover {
	background-color: #f8f9fb;
}
#profileUpdateFields span {
	display: inline-block;
}
.profileUpdateFieldName {
	cursor: move;
	width: 240px;
}
#groupSettings .ui-state-green {
    border: 0px !important;
    box-shadow: none !important;
    padding: 10px 15px 11px 15px !important;
    border-radius: 50px;
    font-size: 16px;
}
#gaLoginOAuth {
    box-shadow: none !important;
    padding: 10px 15px !important;
    border-radius: 50px;
    background: #fff;
    border: 1px solid var(--content-border-color, #e2e3e5) !important;
}
#gaLoginOAuth:hover {
    background: #218bcf;
}
#gaLoginOAuth:hover a {
    color: #fff !important;
}
#groupSettingsCalendarCSS {
	width: 400px; 
	min-height: 50px;
}
#unsubscribeRedirectWrapper, #profileUpdateRedirectWrapper {
	float: left;
	margin-bottom: 15px;
	width: 70%;
	margin-top: 1px;
}
#profileUpdateFieldsHeader {
	padding-top: 5px;
	margin-bottom: 10px;
	margin-left: 212px;
	font-size: 14px;
}
#profileUpdateFields {
	margin-left: 212px;
}

#groupSettings tr:hover {
	background-color: var(--gray-background-color, #f3f3f3);
}


/* Calendar Settings */
#calendarSettings {
	padding-left: 35px;
	padding-top: 15px;
}
#calendarSettingsActionButtons {
	position: absolute;
	right: 35px;
	margin-top: 20px;
}
#title_CalendarSettings {
	margin-left: 5px;
}
#calendarSettings input[type="checkbox"] {
	font-size: 24px;
	vertical-align: middle;
	display: inline-block;
}
#calendarSettings .flex-container {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	flex-wrap: wrap !important;
	width: 100%;
	margin-top: 15px;
}
#calendarSettings .left-col {
	-webkit-flex: 1 0 0;
	flex: 1 0 0;
}
#calendarSettings .right-col {
	-webkit-flex: 3 0 0;
	flex: 3 0 0;
}
#calendarSettings .small-box {
	width: 90%;
}
#calendarSettings #description-panel {
	display: block;
	clear: both;
}
#calendarSettings #description-panel label {
	width: 170px;
}
#calendarSettings #description-panel select {
	width: auto;
	max-width: 60%;
}
#calendarSettings h4 {
	margin-top: 30px;
	font-size: 18px;
	font-weight: 600;
}
#calendarSettings tr:hover {
	background-color: var(--gray-background-color, #f3f3f3);
}
#calendarSettings a.ui-state-green {
	font-size: 16px;
}
#calendarSettings #event-type-panel #eventTypeSettingsTable td {
	border-top: 1px dotted #e2e3e5;
	padding-right: 6px;
	vertical-align: top;
}
#calendarSettings #event-type-panel #eventTypeSettingsTable .remindersCell, #calendarSettings #event-type-panel #eventTypeSettingsTable .visibilityCell {
	white-space: nowrap;
}
#calendarSettings #event-type-panel #eventTypeSettingsTable .checkboxTextLabel {
	display: inline-block;
	cursor: default;
	vertical-align: top;
	margin-top: 4px;
	margin-left: -4px;
}
.calendarSettingsEventTypeColor {
	display: inline-block;
	vertical-align: middle;
	margin-top: 1px;
}
.calendarSettingsEventTypeColor img {
	height: 20px;
}
#calendarSettings .main-flex-nav {
    border-bottom: 1px solid var(--content-border-color, #e2e3e5);
    height: 61px;
}
#calendarSettings .main-flex-nav li {
    margin: 0px 15px !important;
    padding: 0px;
}
#calendarSettings .main-flex-nav li a {
    padding: 18px 10px !important;
    font-size: 16px;
}
#calendarSettings .main-flex-nav li a:hover{
    border-width: 0px 0px 3px 0px;
	border-style: solid;
}
#calendarSettings .main-flex-nav .flex-active-link {
    border-width: 0px 0px 3px 0px;
	border-style: solid;
	border-bottom-color: var(--nav-box-shadow-color);
}


@media screen and (max-width: 1150px) {
	#calendarSettings .left-col {
		order: 2;
		padding-top: 2%
	}
	#calendarSettings .right-col {
		order: 1;
	}
}


/* My Account :: Account Settings for shared access users */
#title_MyAccount {
	margin: 20px 30px;
}
#myAccountSettings {
	width: 95%;
	margin-left: 30px;
	float: left;
	box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.15);
}

/* Account Settings */
#title_AccountSettings {
    padding: 75px 0px 0px 10px !important;
    color: transparent !important;
}
#accountSettingsActionButtons {
	position: absolute;
	right: 45px;
	margin-top: -26px;
	z-index: 99;
}
#accountSettings {
    box-shadow: none;
    background: transparent;
    padding: 0px;
    margin: 0px;
    width: 100%;
    border: 0px;
}
#accountSettings select {
	background-color: var(--input-background-color, #fff) !important;
}
#accountSettings .ui-selectmenu-button, #accountSettings input, #accountSettings textarea {
    border: 1px solid var(--input-border-color, #e2e3e5);
    color: var(--input-text-color, #404e60);
    background: var(--input-background-color, #fff);
}

.moreAboutYouBox {
	float: left; 
	border-radius: 5px; 
	padding: 20px; 
	width: 25%;
	margin: 20px 2%;
	text-align: left;
}
.moreAboutYouBox div {
	margin: 3px 0px;
	font-size: 14px;
}
.moreAboutYouBox input[type="text"] {
	width: calc(100% - 20px) !important;
	margin: auto;
	padding: 10px;
}
.moreAboutYouBox input[type="checkbox"] {
	height: 18px !important;
	width: 18px !important;
	margin: 0px 5px !important;
	vertical-align: middle !important;
	display: inline !important;
}

#navColorPickerWrapper {
	display: inline-block;
	vertical-align: top;
	margin-top: 6px;
}
#navColorPickerWrapper img {
	height: 24px;
	width: 24px;
	display: inline-block;
	vertical-align: middle;
}
#accountSettings-2 .ui-state-green {
    border: 0px !important;
    box-shadow: none !important;
    padding: 10px 15px !important;
    border-radius: 50px;
    display: inline-block;
}
#accountSettings #contact-info-panel {
	display: block;
}
#accountSettings #contact-info-panel > div::after {
	content: '';
	display: none;
}
#accountSettings .mainbox-content input[type="text"], #accountSettings .mainbox-content select {
	width: 80%;
}
#accountSettings #security-panel {
	width: 1000px;
}
#accountSettings #sharedAccessContacts {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	padding-top: 10px;
}
#accountSettings td {
	font-size: 14px;
}
#accountSettings h4 {
	font-size: 18px;
	font-weight: 600;
}
#accountSettings #accountSettingsLeftNav {
	float: left; 
	margin-top: 10px;
	padding: 0px 10px; 
	width: 170px;
	border-right: 1px solid var(--input-border-color, #e2e3e5);
}
#accountSettingsLeftNav a {
	display: block;
	margin: 5px 0px;
}


#accountSettings #settingsTableWrapper {
	float: left; 
	width: calc(100% - 200px);
}
#accountSettings #settings-panel h4 {
	text-align: right;
}
#accountSettings #settings-panel .leftCellCustomSelector {
	text-align: right;
	padding-top: 0px;
}
#accountSettings #settings-panel select {
	width: auto;
	max-width: 300px;
}
#accountSettings #settings-panel .help_icon {
	margin-top: 6px;
	vertical-align: top;
}
#accountSettings #settings-panel #featureOptionsTD {
	max-width: 50%;
}
#accountSettings #editActivityTypesWrapper {
	clear: both;
	padding: 10px 0px 25px 0px;
}
#accountSettings .areCalledLabel, #accountSettings .isCalledLabel {
	white-space: nowrap;
}

#accountSettings .contactMapColorPickerWrapper img {
	vertical-align: middle;
	width: 22px;
}

#accountSettings #integrationsPanelTable {
	margin-top: 10px; 
	width: 100%;
}
#accountSettings #accountSettingsPaypalID {
	width: 80%; 
	max-width: 400px;
}
#accountSettings #zoomIntegrationDetailsTD {
	vertical-align: top; 
	padding-top: 18px;
}
#accountSettings #openAIsecretKey {
	width: 100%;
	max-width: 420px;
}
#globalizeit-selector, #globalizeit-selector-trigger {
	background: var(--input-background-color, #fff) !important;
	border-color: var(--input-border-color, #e2e3e5) !important;
}
.newInvoiceQuotaStyle {
	margin: 20px 0px; 
	border: 1px solid var(--input-border-color, #e2e3e5); 
	padding: 10px; 
	background: var(--body-background-color, #f8f9fb);
}

#accountSettingsActionButtonsBottom {
	clear: both;
	float: right;
	margin: 40px 5px 20px 0px;
}
#shopifyFields div {
	margin: 5px 0px;
}
#shopifyFields select {
	width: auto !important;
	max-width: 50%;
}
#shopifyFields input[type="text"] {
	width: 400px !important;
} 
#settings-panel .newBox {
	border: 0px !important;
    box-shadow: none !important;
}
#currentLocalTime {
	margin: 7px 14px;
	display: inline-block;
}
#contact-info-panel .ui-selectmenu-button {
	padding: 5px 12px 5px 2px;
}
#orderActivities li {
	height: 36px;
	display: inline-block;
}
#orderActivities li span {
	cursor: grab;
	padding: 5px;
	margin: 3px;
	border: 1px solid var(--main-text-color, #404e60);
	background-color: var(--dark-gray-background-color, #d2d3d5);
	color: var(--main-link-color, #247cb5);
	border-radius: 3px;
	width: auto;
	float: left;
}
#activityDefaultNotesTable textarea {
	width: 300px;
	height: 60px;
}
#allRecurringActivitiesTable th {
	text-align: left;
}
.ui-selectmenu-open {
	max-width: 50%;
	max-height: 50vh !important;
    overflow: auto;
}
.selectMenuStyle
{
	padding: 10px;
	font-size: 14px;
}
.selectMenuItemStyle
{
	border: none !important;
}
.selectMenuStyle .ui-menu-item {
	white-space: nowrap;
}
.zap-button {
	color: #fff !important;
}

#sharedAccessWrapperTable {
	width: 100%;
	max-width: 100%;
	table-layout: fixed;
}
#sharedAccessGroupsTD {
	vertical-align: top; 
	width: 23%;
	min-width: 200px;
}
#sharedAccessAssignmentTD {
	vertical-align: top;
	width: 77%;
}
#accountSettings #subscriptionPanelWrapperTable #subscriptionButtonWrapper {
	padding-top: 20px;
}
#accountSettings #referAFriendInstructionsTable {
	max-width: 1024px;
}
#accountSettings #referAFriendInstructionsTable td {
	vertical-align: top;
}
#accountSettings #referAFriendInstructionsTable td:first-child {
	padding-top: 15px;
}
#accountSettings #referAFriendHeaderImage {
	width: 500px;
	border: 0px;
}
#accountSettings #referAFriendAffiliateMessage {
	width: 500px; 
	font-family: verdana; 
	font-size: 11px;
}
#referAFriendRedemptionInstructions {
	width: 70%; 
	padding: 10px;
}
#referAFriendRedemptionInstructions p {
	margin-top: 0px; 
	padding-top: 0px;
}

#sharedAccessContactsTable {
	background: var(--shared-access-contacts-table-background, transparent);
}

@media screen and (max-width: 1450px) {
	#sharedAccessContactsTable th, #sharedAccessContactsTable td {
		font-size: 12px;
	}
	#accountSettings .main-flex-nav li a {
		font-size: 16px !important;
		padding: 18px 10px !important;
		margin: 0px 10px !important;
	}
	#accountSettings .main-flex-nav li {
		margin: 0px 10px !important;
		padding: 0px !important;
	}
}
@media screen and (max-width: 1350px) {
	#sharedAccessContactsTable th, #sharedAccessContactsTable td {
		font-size: 11px;
		padding: 4px 0px;
	}
	#accountSettings .main-flex-nav li a {
		font-size: 14px !important;
		padding: 18px 9px !important;
		margin: 0px !important;
	}
	#accountSettings .main-flex-nav li {
		margin: 0px 5px !important;
		padding: 0px !important;
	}
}
@media screen and (max-width: 1300px) {
	#sharedAccessContactsTable th, #sharedAccessContactsTable td {
		font-size: 10px;
		padding: 4px 0px;
	}
	#accountSettings .main-flex-nav li a {
		font-size: 12px !important;
		padding: 18px 8px !important;
		margin: 0px !important;
	}
	#accountSettings .main-flex-nav li {
		margin: 0px 3px !important;
		padding: 0px !important;
	}
}
@media screen and (max-width: 1250px) {
	#sharedAccessContactsTable th, #sharedAccessContactsTable td {
		font-size: 9px;
		padding: 3px 0px;
	}
	#accountSettings .main-flex-nav li a {
		font-size: 11px !important;
		padding: 18px 7px !important;
		margin: 0px !important;
	}
	#accountSettings .main-flex-nav li {
		margin: 0px 2px !important;
		padding: 0px !important;
	}
}
@media screen and (max-width: 1100px) {
	#sharedAccessContactsTable th, #sharedAccessContactsTable td {
		font-size: 8px;
		padding: 2px 0px;
	}
	#accountSettings .main-flex-nav li a {
		font-size: 11px !important;
		padding: 18px 7px !important;
		margin: 0px !important;
	}
	#accountSettings .main-flex-nav li {
		margin: 0px 1px !important;
		padding: 0px !important;
	}
	#accountSettings #security-panel {
		width: 100%;
	}
	#accountSettings #ipLockdownTextarea {
		width: 99% !important;
	}
}
@media screen and (max-width: 768px) {
    #accountSettings > div:not(div.main-flex-nav) {
        margin-top: 25px !important;
    }
}

.emailJournalingSwitchSpan {
	display: inline-block;
	margin-top: 7px;
	vertical-align: top;
}

#sharedAccessContactsTable td {
	vertical-align: middle;
}
#sharedAccessContactsTable img {
	max-height: 50px;
	max-width: 50px;
	border-radius: 50%;
	opacity: 0.8;
}
#sharedAccessContactsTable img:hover {
	opacity: 1.0;
}
#sharedAccessContactsTable .contactInitials {
	height: 50px;
	width: 50px;
	line-height: 50px;
	border-radius: 50%;
	vertical-align: middle;
	color: #fff;
	background-color: #999;
	display: block;
	font-size: 20px;
	margin: auto;
}
#sharedAccessContactsTable .contactInitials:hover {
	color: #777;
	background-color: #f8f9fb;
}
.sharedAccessCell
{
	line-height: 24px;
	padding-top: 8px;
	text-align: center;
	white-space: nowrap;
}
.sharedAccessCellHighlight {
	background-color: var(--shared-access-cell-highlight-hover-color, #f2f3f5) !important;
}
.sharedAccessCellHighlightOver {
	background-color: var(--shared-access-cell-highlight-over-hover-color, #e2e3e5) !important;
}
.sharedAccessCellHeaderHighlight {
	color: var(--main-link-hover-color, #0082fc);
}

#newContactPermissionDiv {
	padding: 35px 0px 10px 0px;
	text-align: right;
}
#usePermissionFromContact-menu {
	min-height: 100px;
}

#subscriptionPlansList {
	list-style: none;
	margin: 0px;
	padding: 0px;
	cursor: default;
}
#subscriptionPlansList .availablePlan {
	background-color: #f3f3f3;
	border-radius: 6px;
	border: 1px solid var(--content-border-color, #e2e3e5);
	height: 80px;
	margin: 5px 0;
	opacity: 0.8;
	padding: 4px 25px;
	width: 300px;
	text-align: center;
}
#subscriptionPlansList .availablePlan:hover {
	background-color: #d2d2d2;
}
#subscriptionPlansList .unavailablePlan {
	background-color: #15b370;
	border-radius: 6px;
	border: 1px solid #15b370;
	height: 80px;
	margin: 10px 0;
	opacity: 0.8;
	padding: 4px 25px;
	width: 300px;
	text-align: center;
	font-size: 12px;
}
#subscriptionPlansList .unavailablePlan .plan-details, #subscriptionPlansList .unavailablePlan .plan-title, #subscriptionPlansList .unavailablePlan .plan-description {
    color: #ffffff !important;
}
#subscriptionPlansList .activePlan {
	border: 1px solid #5CB85E;
}
#subscriptionPlansList .subscriptionPrice {
    border-radius: 100%;
    cursor: default;
    display: block;
    float: left;
    height: 76px;
    line-height: 70px;
    margin: 2px 0px 0 0;
    text-align: center;
    width: 76px;
    background-color: #16b370;
    color: #fff;
    font-size: 18px;
}
#subscriptionPlansList .unavailablePlan .subscriptionPrice {
	color: #404e60;
	background-color: #fff;
}
#subscriptionPlansList .perMonthText {
	font-size: 9px;
	position: absolute;
	margin-top: 16px;
	margin-left: -42px;
}
#subscriptionPlansList .availablePlan .perMonthText {
	color: #f2f3f5;
}
#subscriptionPlansList .unavailablePlan .perMonthText {
	color: #404e60;
}
#subscriptionPlansList .plan-details {
	color: #222;
	display: block;
	float: left;
	height: 46px;
	margin: 3px 0;
	padding: 0px 8px;
	width: 68%;
}
#subscriptionPlansList .plan-title {
	font-size: 16px;
	font-weight: normal;
	margin: 2px 0 0;
	padding: 0;
	text-align: center;
	text-transform: uppercase;
	color: #404e60;
}
#subscriptionPlansList .plan-description {
	color: #404e60;
	font-size: 14px;
	margin: 0;
	padding: 0;
}
#subscription-panel a.ui-state-green {
	font-size: 18px;
	padding: 10px 15px 11px 15px;
}
#refer-a-friend-panel a.ui-state-green {
	font-size: 16px;
	padding: 10px 15px 11px 15px;
}
#sharedAccessTerms ul {
	font-size: 12px;
}
#sharedAccessTerms li {
	margin-bottom: 7px;
}

@media screen and (max-width: 1350px) {
	#accountSettings .main-flex-nav a {
		font-size: 16px;
	}
	#accountSettings .main-flex-nav li {
		padding: 8px 20px;
	}
	#accountSettings h4 {
		font-size: 16px;
	}
}
@media screen and (max-width: 1180px) {
	#accountSettings .main-flex-nav a {
		font-size: 14px;
	}
	#accountSettings .main-flex-nav li {
		padding: 8px 15px;
	}
}
.dialogImagePreviewContainer, .dialogMediaPropertiesContainer {
    border: 1px solid var(--content-border-color, #e2e3e5);
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
}


/* Opportunity Settings */
.displayOpportunityField {
	cursor: auto;
    background: var(--main-background-color, #f8f9fb);
    padding: 20px;
    margin: 22px 10px;
    width: auto !important;
    border: 1px solid var(--content-border-color, #e2e3e5);
    border-radius: 5px;
    font-size: 14px;
}
#opportunityFieldsWrapper li {
	display: block;
}
#opportunityProductCategoriesWrapper {
	float: left; 
	width: 18%; 
	margin-top: 7px;
}
#opportunityProductCategoriesWrapper h6 {
	padding: 10px;
}
#opportunityProductCategories {
	margin-top: 2px; 
	padding: 10px; 
	cursor: auto;
}
#newOpportunityProductCategory {
	margin-top: 15px; 
	line-height: 40px;
}
#opportunityProductsInCategory {
	float: left; 
	width: 80%; 
	margin-left: 1%;
}
#viewProducts {
	float: left; 
	max-width: 95%;
}
#viewProducts th {
	font-weight: bold;
	font-size: 14px;
	text-align: left;
}
.editOpportunityFieldOrderItem {
	border: 1px solid #6a7480; 
	padding: 5px; 
	background-color: var(--dark-gray-background-color, #d2d3d5);
	color: var(--main-text-color, #404e60); 
	cursor: move;
}

/* Opportunity Custom Fields */
.viewOpportunityField {
	margin: 5px 0px;
}
.viewOpportunityFieldName {
	color: #0082fc;
}
.viewOpportunityFieldValue {
	color: var(--main-text-color, #404e60);
}

/* Opportunities Kanban */
#opportunityKanbanFilterWrapper {
	position: absolute;
	right: 1.6em;
	margin-top: -50px;
}


/* Email Campaign Optimizer */
#emailCampaignOptimizer {
    padding-left: 0px !important;
}
#emailCampaignOptimizer .main-box {
	display: block;
	width: 640px;
	margin: 20px auto;
	padding: 5px;
	margin-bottom: 45px;
}
#emailCampaignOptimizer h4 {
	display: block;
	width: 640px;
	margin: 40px auto 10px auto;
}
#emailCampaignOptimizer #deliveryDate {
	float: left;
}
#viewOptimizedCampaigns th {
	text-align: left;
}
tr.optimizedEmailCampaignRow:hover td {
	background-color: #f8f9fb;
}
.emailCampaignFilter {
	display: none;
	position: absolute;
	z-index: 2;
	width: 300px;
	border: 1px solid #777;
	padding: 10px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.15);
}
#emailCampaignOptimizer .maintitle {
    text-align: center !important;
    padding-left: 0px !important;
    margin-left: -15px !important;
    padding-top: 30px !important;
}
#emailCampaignOptimizer .ui-selectmenu-button {
	border: 1px solid var(--content-border-color, #e2e3e5);
    color: var(--main-text-color, #404e60);
}

/* Build and Send Email */
#buildAndSendEmailWrapper {
    padding: 0px 30px;
}
#buildAndSendEmailWrapper .maintitle {
    padding-top: 30px !important;
    padding-bottom: 15px !important;
}
#buildAndSendEmailWrapper #EmailSettings {
    background-color: var(--content-background-color, #fff) !important;
    border-radius: 0px !important;
    padding: 20px !important;
    margin-bottom: 0px !important;
    width: auto !important;
    border: 1px solid var(--input-border-color, #e2e3e5) !important;
    border-bottom: 0px !important;
}
#buildAndSendEmailWrapper #cke_emailMessage {
    width: auto !important;
    border-radius: 0px !important;
    border-color: #e2e3e5 !important;
}
#buildAndSendEmailWrapper .cke_bottom {
    background-color: #fff !important;
    border-top: 1px solid #e0e0e0 !important;
}
#buildAndSendEmailWrapper #cke_1_resizer {
    border-color: transparent rgb(224, 224, 224) transparent transparent !important;
}
#buildAndSendEmailWrapper #TextOnlyVersion, #buildAndSendEmailWrapper #PhysicalAddress, #buildAndSendEmailWrapper #AutomaticAction {
    background-color: var(--content-background-color, #fff);
    border: 1px solid var(--content-border-color, #e2e3e5);
    border-radius: 0px;
    width: 692px;
    padding: 20px;
    margin-bottom: 0px;
    border-bottom: 0px;
}
#buildAndSendEmailWrapper #emailEasyBuilderWrapper {
    border: 1px solid var(--content-border-color, #e2e3e5) !important;
}
#buildAndSendEmailWrapper #easyBuilderHelper {
    background: transparent !important;
}
#buildAndSendEmailWrapper #AutomaticAction {
    border-bottom: 1px solid var(--content-border-color, #e2e3e5);
}
#post-add-message, .post-actions-link {
	background-color: #fff !important;
    border: 1px solid var(--content-border-color, #e2e3e5);
    box-shadow: none !important;
    padding: 6px 10px 6px 10px !important;
    border-radius: 50px;
}
#post-add-message:hover, .post-actions-link:hover {
	color: #fff !important;
	background-color: #218bcf !important;
}
#stampsBalance {
	background-color: transparent !important;
    border: 0px !important;
    margin-right: 30px;
}

/** Media Library **/
#title_MediaLibrary {
    padding-top: 15px;
    margin-left: 10px;
}
#media_search_box .searchResultsContainer {
	height: auto !important;
	padding: 15px;
	margin-left: 11px;
	background: var(--body-background-color, #f8f9fb);
	color: var(--main-text-color, #404e60);
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
}
#media_search_box .searchResultsContainer label {
	color: var(--main-text-color, #404e60);
}
.mediaLibraryFolderContainer {
    background-color: var(--content-background-color, #fff) !important;
    border-radius: 0px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.15);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.15);
    border: 0px !important;
}
.folderList li, .media-library-filter {
    background: var(--content-background-color, #fff) !important;
}
.folderList .subfolderList {
    list-style: none;
    margin: 0;
    padding: 0;
}
.folderList .subfolderList li a:first-child {
    padding-left: 24px;
}
.media-library-media-list-container {
    background: var(--content-background-color, #fff) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.15);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.15);
    border: 0px !important;
    border-radius: 0px !important;
}
#mediaDirectoriesEvents, .media-library-media-list-container, .mediaLibraryItemPreviewContainer {
    border: 1px solid var(--content-border-color, #e2e3e5);
    margin-top: 0px;
}
#mediaDirectoriesEvents, .media-library-media-list-container {
	border: 1px solid var(--content-border-color, #e2e3e5) !important;
	background: var(--content-background-color, #fff) !important;
	box-shadow: none !important;
}
.mediaLibraryItemPreviewContainer {
	background: var(--main-background-color, #f8f9fb);
}
.mediaLibraryItemPreviewContainer {
	border: 1px solid var(--content-border-color, #e2e3e5) !important;
}
#contactsExportWrapper, #contactsResearchWrapper, #EmailTrackingNav, #emailTrackingSelector, #emailTrackingChartsWrapper, #SocialDashboard, #chatWrapper, #chartChatsAI, #workflowManagerWrapper, .dripCampaignWrapper, #leadScoringWrapper, #calendarWrapper, #accountingWrapper, #advancementWrapper, #bm-terms, #bm-tabs, #couponDetail, #documentsWrapper, #forumMessages, #learningCourseDetails, .learningModule, #websiteManagerWrapper, #signupFormSubscribersChart, #signupFormSubscribersEntryChart, #campaigns, #conversionDrivers, #affiliatePlayers, #campaignChart, .leadFinderInstructions, #b2cLeadFinder {
    margin: 30px;
    border: 1px solid var(--content-border-color, #e2e3e5);
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    background: var(--content-background-color, #fff);
}
#signupFormHTMLmethods {
	border: 1px solid var(--content-border-color, #e2e3e5);
	box-shadow: none;
    width: auto !important;
    padding: 20px;
    background: var(--content-background-color, #fff);
}
#newContactButton {
    display: inline-block;
}

.projects_list_header, .projects_list_footer, .portlet-header, .dataTable th, .media-library-media-list-header { 
	background: var(--main-text-color, #404e60);
    border: 1px solid var(--content-border-color, #e2e3e5);
    color: var(--content-background-color, #fff);
    padding: 10px;
    box-shadow: none;
}
.blue-stripe {
	background: var(--main-text-color, #404e60);
    border: none;
    color: var(--content-background-color, #fff);
    padding: 10px;
    box-shadow: none;
}
#surveySequenceDetails {
    cursor: auto;
    background: var(--content-background-color, #fff);
    padding: 20px;
    width: auto !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.15);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.15);
}
.Contacts_filter_field {
    border: 1px solid transparent !important;
    background-color: transparent !important;
}
.Contacts_filter_wrapper h2, .Contacts_filter_full h1, .Contacts_filter_showhide {
    color: var(--main-text-color, #404e60) !important;
}

/* =====================================================================
   Contacts list — left filter panel, aligned to the contact-card design.
   Scoped to #allContactsNav so the shared filter component is UNCHANGED
   on Export / Reports / SMS / Email Tracking (which render the same
   .Contacts_filter_wrapper outside #allContactsNav).
   ===================================================================== */
#allContactsNav .Contacts_filter_wrapper {
	background: var(--content-background-color, #fff);
	border: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 12%, transparent);
	border-radius: 14px;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--main-text-color, #404e60) 8%, transparent), 0 8px 22px -14px color-mix(in srgb, var(--main-text-color, #404e60) 32%, transparent);
	overflow: hidden;
}
#allContactsNav .Contacts_filter_form { box-sizing: border-box; padding: 14px 16px; }
#allContactsNav .Contacts_filter_full h1 {
	font-size: 15px; font-weight: 700; letter-spacing: -.01em;
	color: var(--main-text-color, #2c3846) !important;
	margin: 0 0 10px; padding: 0; border: 0; background: none;
}
#allContactsNav .Contacts_filter_wrapper h2 {
	font-size: 11px !important; font-weight: 700 !important;
	text-transform: uppercase; letter-spacing: .06em;
	color: var(--gray-text-color, #6a7480) !important;
	background: none !important; border: 0 !important;
	padding: 0 0 4px !important; margin: 12px 0 6px !important;
}
#allContactsNav .Contacts_filter_section,
#allContactsNav .Contacts_filter_order_by {
	border-top: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 8%, transparent);
	margin-top: 10px; margin-left: 2px; padding-top: 10px;
}
#allContactsNav .Contacts_filter_section h2:first-child,
#allContactsNav .Contacts_filter_order_by h2:first-child { margin-top: 0 !important; }
/* "Showing contacts from" scope → segmented pill (3 sections). Real DOM is
   .Contacts_filter_from_radio_buttons > span.Contacts_filter_from_radio_cluster
   (each = input[type=radio] + label[for]); hide the input, style the label as
   the segment, and highlight the checked segment via :has(). */
#allContactsNav .Contacts_filter_from_radio_buttons {
	display: flex; box-sizing: border-box; width: 100%; max-width: 100%; margin: 0 0 12px;
	border: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 18%, transparent);
	border-radius: 10px; overflow: hidden;
	background: color-mix(in srgb, var(--content-background-color, #fff) 94%, var(--main-text-color, #404e60) 6%);
}
#allContactsNav .Contacts_filter_from_radio_buttons br { display: none; }
#allContactsNav .Contacts_filter_from_radio_cluster {
	position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center;
	border-left: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 14%, transparent);
}
#allContactsNav .Contacts_filter_from_radio_cluster:first-child { border-left: 0; }
#allContactsNav .Contacts_filter_from_radio_cluster input[type="radio"] {
	position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0;
}
#allContactsNav .Contacts_filter_from_radio_cluster label {
	flex: 1; min-width: 0; margin: 0; padding: 6px 5px; text-align: center; cursor: pointer;
	font-size: 11.5px; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; color: var(--main-text-color, #404e60);
}
#allContactsNav .Contacts_filter_from_radio_cluster:has(input[type="radio"]:checked) {
	background: var(--main-link-color, #0082fc);
}
#allContactsNav .Contacts_filter_from_radio_cluster:has(input[type="radio"]:checked) label {
	color: #fff; font-weight: 600;
}
#allContactsNav .Contacts_filter_from_radio_cluster:has(input[type="radio"]:focus-visible) {
	outline: 2px solid var(--main-link-color, #0082fc); outline-offset: -2px;
}
/* Filter header "Close" toggle → tidy right-aligned pill (was a bare floated link).
   Scoped to the full-view h1 so the section-collapse chevrons in the h2s are untouched. */
#allContactsNav .Contacts_filter_full h1 { position: relative; }
#allContactsNav .Contacts_filter_full h1 .Contacts_filter_showhide {
	float: right; margin: -1px 0 0; display: inline-flex; align-items: center; gap: 4px;
	padding: 3px 9px; border-radius: 8px;
	border: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 14%, transparent);
	background: color-mix(in srgb, var(--content-background-color, #fff) 92%, var(--main-text-color, #404e60) 8%);
	color: var(--gray-text-color, #6a7480) !important;
	font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
	line-height: 1.5; text-decoration: none; cursor: pointer;
}
#allContactsNav .Contacts_filter_full h1 .Contacts_filter_showhide:hover {
	border-color: color-mix(in srgb, var(--main-link-color, #0082fc) 40%, transparent);
	background: color-mix(in srgb, var(--main-link-color, #0082fc) 12%, transparent);
	color: var(--main-link-color, #0082fc) !important;
}
#allContactsNav .Contacts_filter_full h1 .Contacts_filter_showhide [class^="icon-"] { font-size: 13px !important; line-height: 1; }
/* "(unsaved changes)" note in the header: keep it a small, subdued single line
   (it inherits the h1's 15px bold otherwise → large italic that wraps to 2 lines). */
#allContactsNav .Contacts_filter_full h1 [data-id="unsaved"] {
	font-size: 11px; font-weight: 400;
	color: var(--gray-text-color, #6a7480); white-space: nowrap;
}
/* Collapsed (compact) state: clean summary + a clear, obvious way to re-open the filters.
   (horizontal inset comes from the shared .Contacts_filter_form padding above) */
#allContactsNav .Contacts_filter_compact h1 {
	font-size: 15px; font-weight: 700; letter-spacing: -.01em;
	color: var(--main-text-color, #2c3846) !important;
	margin: 0 0 8px !important; padding: 0 !important; border: 0; background: none;
}
#allContactsNav .Contacts_filter_compact [data-id="description"] {
	float: none !important; font-size: 13px; color: var(--gray-text-color, #6a7480); margin: 0 0 12px;
}
#allContactsNav .Contacts_filter_options_compact { padding: 0; margin: 0; clear: both; }
#allContactsNav .Contacts_filter_options_compact ul {
	list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px;
}
#allContactsNav .Contacts_filter_options_compact li { float: none; margin: 0; line-height: 1.4; font-weight: 500; }
#allContactsNav .Contacts_filter_options_compact li a {
	display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px;
	color: var(--main-link-color, #0082fc); text-decoration: none; font-size: 13px; font-weight: 500;
}
#allContactsNav .Contacts_filter_options_compact li a:hover {
	background: color-mix(in srgb, var(--content-background-color, #fff) 90%, var(--main-text-color, #404e60) 10%);
	text-decoration: none;
}
/* Primary re-open action ("Edit filter options", always the first item) → solid button. */
#allContactsNav .Contacts_filter_options_compact li:first-child { flex: 1 1 100%; }
#allContactsNav .Contacts_filter_options_compact li:first-child a {
	justify-content: center; padding: 8px 14px; font-weight: 600;
	background: var(--main-link-color, #0082fc); color: #fff !important;
}
#allContactsNav .Contacts_filter_options_compact li:first-child a:hover {
	background: var(--main-link-hover-color, #0082fc); color: #fff !important;
}
/* Filter/Include radio & checkbox rows: inline row (input + sibling label) */
#allContactsNav .Contacts_filter_section_body div:has(> input[type="radio"]),
#allContactsNav .Contacts_filter_section_body div:has(> input[type="checkbox"]) {
	display: flex; align-items: center; gap: 8px; margin: 3px 0;
}
#allContactsNav .Contacts_filter_section_body label {
	color: var(--main-text-color, #404e60); font-size: 13px; margin: 0; cursor: pointer;
}
#allContactsNav .Contacts_filter_section_body input[type="radio"],
#allContactsNav .Contacts_filter_section_body input[type="checkbox"] { flex: none; margin: 0; }
#allContactsNav select,
#allContactsNav input[type="text"] {
	border: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 18%, transparent) !important;
	background-color: var(--content-background-color, #fff) !important;
	color: var(--main-text-color, #404e60) !important;
	border-radius: 9px !important; padding: 7px 10px !important;
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
#allContactsNav select {
	background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M7 10l5 5 5-5z" fill="currentcolor"/></svg>') calc(100% - 6px) 50% no-repeat var(--content-background-color, #fff) !important;
	padding: 7px 28px 7px 10px !important;
}
#allContactsNav select:focus,
#allContactsNav input[type="text"]:focus {
	border-color: var(--main-link-color, #0082fc) !important; outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--main-link-color, #0082fc) 18%, transparent);
}
#allContactsNav .Contacts_Orderby,
#allContactsNav .Contacts_PerPage { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
#allContactsNav .Contacts_filter_options { padding-top: 0; }
#allContactsNav .Contacts_filter_options ul { list-style: none; margin: 0; padding: 0; }
#allContactsNav .Contacts_filter_options li { margin: 0; }
#allContactsNav .Contacts_filter_options li a {
	display: block; padding: 6px 10px; border-radius: 9px;
	color: var(--main-link-color, #0082fc); text-decoration: none;
	font-size: 13px; font-weight: 500;
}
#allContactsNav .Contacts_filter_options li a:hover {
	background: color-mix(in srgb, var(--content-background-color, #fff) 90%, var(--main-text-color, #404e60) 10%);
	text-decoration: none;
}
#allContactsNav .Contacts_filter_summary {
	border: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 12%, transparent) !important;
	border-radius: 12px !important; overflow: hidden; margin: 14px 18px 16px;
	background: color-mix(in srgb, var(--content-background-color, #fff) 96%, var(--main-text-color, #404e60) 4%);
}
#allContactsNav .Contacts_filter_summary h2 {
	margin: 0 !important; padding: 10px 12px !important;
	border-bottom: 1px solid color-mix(in srgb, var(--main-text-color, #404e60) 10%, transparent) !important;
}
#allContactsNav .Contacts_filter_summary_area { padding: 10px 12px !important; }
#allContactsNav .Contacts_filter_summary h3 { color: var(--main-text-color, #404e60); font-weight: 700; }

#visibility .ui-state-highlight {
	background-color: #0082fc !important;
	border: 1px solid #0082fc !important;
}
#visibility .ui-state-highlight a {
	color: #fff !important;
}


/* collaborate */
.collaborateColumn {
	width: 31%;
	min-width: 250px;
	float: left;
	padding-bottom: 100px;
}
.collaborateColumn .ui-selectmenu-button, .collaborateColumn input {
    border: 1px solid var(--content-border-color, #e2e3e5);
    background: var(--main-background-color, #f8f9fb);
}
#title_Collaborate {
    padding: 30px 0px 0px 25px !important;
}
.collaborateColumn .portlet:hover {
   	transition: all 0.3s ease;
 	box-shadow: 0px 0px 25px 10px var(--content-box-shadow-color, #e3eaf0) !important;
}
.portlet {
	margin: 5%;
	border: 1px solid var(--content-border-color, #e2e3e5);
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
   	transition: all 0.3s ease;
}
.portlet-header {
	margin: 0px !important;
	padding: 10px 5px;
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
	border-radius: 0px;
	color: #fff;
}
.portlet-header span {
    color: #fff;
}
.portlet-content td {
    word-break: break-all !important;
}
.portlet-header .ui-icon { float: right; }
.portlet-content { 
	padding: 10px; 
	height: auto; 
	min-height: 40px; 
	background-color: var(--content-background-color, #fff); 
	margin-top: 0px !important; 
}
.collaborationContent { word-break: break-all; }
.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
.ui-sortable-placeholder * { visibility: hidden; }


/* custom objects */
#customObjectsActionButtons {
	position: absolute;
	right: 30px;
	margin-top: 25px;
}
#customObjectsList, #customObjectDetails {
	font-size: 16px;
}
.customObjectDefinitionTable {
  border-collapse:separate; 
  border-spacing: 0 0.5em;
}
.customObjectDefinitionTable .leftCol {
	width: 200px;
	text-align: right;
}
.verticalAlignTop {
	vertical-align: top;
}
#sortableAttributes .sortableAttribute {
	margin-top: 20px;
}
.displayCustomObject {
	cursor: auto;
    background: var(--content-background-color, #fff);
    padding: 20px;
    margin: 22px 10px;
    width: auto !important;
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    border: 1px solid var(--content-border-color, #e2e3e5);
}
.displayCustomObject div {
	clear: both;
}
.displayCustomObject div > span {
	display: inline-block;
	margin-top: 5px;
}
#customObjectsWrapper a.ui-state-green, #customObjectsWrapper a.ui-state-yellow, #customObjectsWrapper a.ui-state-red {
    font-size: 16px;
}
#customObjectSearchResultsTableWrapper {
	background: var(--content-background-color, #fff); 
	padding: 10px; 
	margin: 10px 0px;
}
#customObjectSearchResultsTable_length {
	margin-top: 5px;
}
#customObjectSearchResultsTable-button {
	vertical-align: middle;
	margin-top: -4px;
}
#customObjectPermissionsTable span.ui-selectmenu-button {
	width: 93%;
}
#customObjectsWrapper td {
    padding-left: 30px;
}
#title_CustomObjects {
    padding: 20px 0px 10px 40px !important;
	top: 130px !important;
}
#customObjectDetails {
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    border: 1px solid var(--content-border-color, #e2e3e5);
    background: var(--content-background-color, #fff) !important;
}
#customObjectDetails .ui-selectmenu-button, #customObjectDetails input, #customObjectDetails textarea {
    border: 1px solid var(--input-border-color, #e2e3e5);
    color: var(--input-text-color, #404e60);
    background: var(--input-background-color, #fff);
}
#customObjectDefinitionsWrapper  {
	box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
    border: 1px solid var(--content-border-color, #e2e3e5);
    background: var(--content-background-color, #fff);
}

/* Contacts > Custom Objects */
.objectMathSummary {
	margin: 5px;
}


/* Contacts > User Fields */
#importUserFieldsIframe {
	width: 900px;
	height: 540px;
	padding: 5px;
	border: 0px;
	margin: 10px 5% 10px 0px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.15);
}
#userFieldDefinitions {
    font-size: 14px;
    padding-left: 0px;
    margin: 30px !important;
    margin-top: 0px !important;
}
#userFieldDefinitions .maintitle {
    padding-top: 30px !important;
    padding-left: 0px !important;
}
#userFieldsDefinitionsTable {
	width: 100%;
	table-layout: fixed;
}
#userFieldsDefinitionsTable td {
	padding: 10px;
}
#userFieldsLeftColumn {
	width: 33%;
	min-width: 200px;
	vertical-align: top;
	display: table-cell;
}
#userFieldsLeftColumn .icon-filter {
    color: var(--content-background-color, #fff) !important;
}
#userFieldsRightColumn {
	vertical-align: top;
	display: table-cell;
}
#userFieldsLeftColumn div {
	margin: 10px;
}
.userFieldListItemUser {
	width: 60px;
	text-align: right;
	display: inline-block;
	float: left;
	margin-right: 3px;
}
.userFieldListItemName {
	width: calc(100% - 166px);
	display: inline-block;
	float: left;
}
.userFieldListIcons span {
	vertical-align: middle;
	margin: 2px;
}
.userFieldListIcons .invalidDataWarning {
	color: #fff;
	background-color: #bd0008;
	border-radius: 2px;
	font-size: 10px;
	padding: 2px;
	font-weight: bold;
}
#userFieldDefinitions .newUserFieldWrapper {
	width: 96%;
	margin: 15px 0px 15px 2px;
	display: none;
	padding: 5px;
}
#userFieldDefinitions .saveNewUserField {
	padding: 10px 5px;
}
#userFieldDefinitions .existingUserFieldWrapper {
	width: 95%;
	padding: 5px;
	margin-top: -10px;
}
#userFieldDefinitions .existingUserFieldWrapper label {
	width: 30%;
}
#userFieldDefinitions .existingUserFieldWrapper .flex-value {
	width: 67%;
}
.existingUserFieldWrapper input, .existingUserFieldWrapper textarea {
    border: 1px solid var(--input-border-color, #e2e3e5);
    color: var(--input-text-color, #404e60);
    background: var(--input-background-color, #f8f9fb);
}
.existingUserFieldWrapper .ui-selectmenu-button {
    border: 1px solid var(--content-border-color, #e2e3e5);
    color: var(--main-text-color, #404e60);
    background: var(--main-background-color, #f8f9fb);
}
#userFieldDefinitions .preserveCheckboxText {
	float: left;
	margin-top: -2px;
	margin-left: 5px;
	font-style: italic;
	font-weight: normal;
	color: #777;
}
#userFieldDefinitions .userFieldDeleteNotification {
	color: #bd0008;
	font-weight: bold;
}
#userFieldDefinitions .userFieldDescription {
	width: 95%;
}
#userFieldDefinitions select {
	background-color: #fff;
}
#userFieldDefinitions .fieldTriggerWrapper, #opportunitySettings .fieldTriggerWrapper {
	margin: 10px 20px;
}
#userFieldDefinitions .triggerInstructions, #opportunitySettings .triggerInstructions {
	font-style: italic;
	color: #999;
	margin: 10px 15% 15px 135px;
}
#userFieldDefinitions .deleteTrigger, #opportunitySettings .deleteTrigger {
	color: #bd0008;
	font-style: italic;
	margin-left: -5px;
	margin-bottom: 10px;
}
#userFieldDefinitions .newTriggerWrapper, #opportunitySettings .newTriggerWrapper {
	display: none;
	margin: 10px 20px;
}
#userFieldDefinitions #saveChangesUserFieldsButtonsRow {
	margin: 20px 5px;
}
#userFieldDefinitions #saveChangesUserFieldsButtonsRow a {
	font-size: 16px;
	padding: 5px;
	margin-right: 10px;
}


/* Contacts > Reports */
#reportsWrapper select {
	width: auto;
}
#reportsWrapper input[type="text"] {
	width: 250px;
}
#reportsWrapper input {
    border: 1px solid var(--input-border-color, #e2e3e5);
    color: var(--input-text-color, #404e60);
    background: var(--input-background-color, #f8f9fb);
}
#reportsWrapper .ui-selectmenu-button {
    border: 1px solid var(--content-border-color, #e2e3e5);
    color: var(--main-text-color, #404e60);
    background: var(--main-background-color, #f8f9fb);
}
#reportsWrapper {
    border: 0px;
    /* background-color: var(--main-background-color, #f8f9fb); */
    margin-top: -30px;
}
#activityDateRangeWrapper {
	margin: 15px 0px;
}

#crmActivitiesReportsDetails
{
	display: block;
	width: 99%;
	padding: 20px;
}
.activitiesDetail {
	border-top: 1px dotted #999;
	padding-top: 10px;
	padding-bottom: 8px;
	width: 95%;
}
#crmActivitiesReportsDetails h6 {
	margin-bottom: 10px;
}
#crmActivitiesReportsDetails .activitiesDetail .opportunityWrapper {
	width: 100%;
	clear: both;
}
#crmActivitiesReportsDetails .activitiesDetail .opportunityTitle {
	padding-left: 10px;
	color: darkblue;
}
#crmActivitiesReportsDetails .activitiesDetail .personalEmailWrapper {
	width: 100%;
	clear: both;
}
#crmActivitiesReportsDetails .activitiesDetail .personalEmailDatetimeSent {
	color: darkblue;
	padding-right: 1%;
	float: right;
}
#crmActivitiesReportsDetails .activitiesDetail .personalEmailSubjectData {
	padding-left: 72px;
	clear: both;
	width: 95%;
}
#crmActivitiesReportsDetails .activitiesDetail .activityWrapper {
	width: 100%;
	padding-top: 10px;
}
#crmActivitiesReportsDetails .activitiesDetail .activityName {
	color: darkblue;
	padding-left: 10px;
}
#crmActivitiesReportsDetails .activitiesDetail .activityHeaders {
	color: var(--main-text-color, #404e60);
	padding-left: 72px;
}
#crmActivitiesReportsDetails .activitiesDetail .activityGroup {
	color: var(--main-text-color, #404e60);
	padding-left: 72px;
}
#crmActivitiesReportsDetails .activitiesDetail .activityNotes {
	padding-left: 72px;
	width: 95%;
	color: darkblue;
}
#crmActivitiesReportsDetails .activitiesDetail .activityDatetime {
	padding-left: 72px;
}
#crmActivitiesReportsDetails .activitiesDetail .createdDatetime {
	padding-left: 72px;
	margin: 10px 0px;
	color: #777;
}

#accounting-panel #tableSummaryStats, #accounting-panel #tableSummaryStatsCompare {
	margin-top: 20px;
	font-size: 14px;
}
#accounting-panel .datatables-top .ui-buttonset {
	margin-top: 15px;
}
#accounting-panel .dataTables_filter label {
	width: auto;
}

#predictionWrapper {
	box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
    width: auto !important;
    border: 0px;
    background: var(--content-background-color, #fff);
    padding: 0px;
    margin: 0px 12px;
}
#predictionConversionCodes {
	background: var(--content-background-color, #fff);
    border: 0px;
}
#prediction-panel .maintitle {
    padding-top: 0px !important;
}
#title_Reports {
    padding: 100px 0px 15px 30px !important;
    color: transparent;
    font-size: 0px;
}
#title_Reports .help_icon, #title_Reports .help_icon_show {
    top: 125px;
    position: fixed;
    z-index: 10;
    left: 155px;
}
#viewPhases th, #editPhases th {
	font-weight: bold;
	text-align: left;
}
#ViewPhases, #editPhases {
	border-collapse:separate;
    border-spacing:0 5px;
}
#viewPhases tr:hover td, #editPhases tr:hover td {
	background-color: var(--gray-background-color, #f3f3f3);
}
.phaseChecklistPopup {
	position: absolute;
	width: 500px;
	margin-left: -250px;
	z-index: 3;
	padding: 10px;
	border: 1px solid #999;
	background: var(--content-background-color, #fff);
	box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.15);
}
.phaseChecklistPopup h6 {
	float: left;
	margin-bottom: 15px;
}
.phaseChecklistPopup div {
	font-size: 14px;
	margin-bottom: 10px;
}
#presetCRMRanges,#presetOpportunityRanges,#presetDateRanges,#presetFulfillmentOpportunityRanges,#presetOpportunityCreationRanges {
	position: absolute;
	display: none;
	background-color: var(--main-background-color, #f8f9fb);
	border: 1px solid #999;
	padding: 8px;
	z-index: 999;
	box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.15);
}
#presetFunnelRanges,#presetAccountingRanges,#presetAccountingRangesCompare,#presetQuoteValidUntilDate,#presetInvoiceDueDate {
	position: absolute;
	display: none;
	margin-left: 5px;
	margin-top: -27px;
	background-color: var(--main-background-color, #f8f9fb);
	border: 1px solid #999;
	padding: 8px;
	z-index: 999;
	box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.15);
}
.opportunitiesReportsChartButtons {
	line-height: 32px;
}
#opportunitiesChart1 .highcharts-container, #opportunitiesChart2 .highcharts-container {
	max-width: 100% !important;
	width: 100%;
}

#reportsWrapper #custom-panel .Contacts_filter_form label {
	text-align: left;
}
#reportsWrapper #custom-panel .Contacts_filter_form select {
	width: 100%;
}



/* Contacts > Visibility */
#visibilityOuterWrapper {
	margin: 30px;
}
.clusterDragging {
	width: 23%;
	opacity: 0.7;
}
.clusterDropHover {
	background-color: #e2e3e5;
	height: 50px;
	border: 1px dashed #999;
	margin: 10px 0px;
}
.visibilityFieldDropHover {
	background-color: #613e6f;
	width: 95%;
	border: 1px dashed #cfac00;
	margin: 10px;
	padding: 10px;
}


/* Contacts > Research */
#contactsResearchWrapper a.ui-state-green {
    font-size: 16px;
}
#title_Research {
	padding: 30px !important;
	padding-bottom: 0px !important;
}
#contactsResearchWrapper {
	padding: 30px !important;
}


/* Contacts > Tools */
#ContactsTools, #ContactsTools-1, #ContactsTools-2, #ContactsTools-3, #ContactsTools-4, #ContactsTools-5, #ContactsTools-6, #ContactsTools-7, #ContactsTools-8, #ContactsTools-9 {
    border: 0px;
    background: var(--main-background-color, #f8f9fb) !important;
    box-shadow: none;
}
#title_ContactDataTools {
    padding: 0px !important;
    color: transparent !important;
}
#dlgContactNew {
    background: var(--main-background-color, #f8f9fb);
}
#ContactsTools a.ui-state-green, #ContactsTools a.ui-state-yellow, #ContactsTools a.ui-state-red {
	font-size: 16px;
}


/* slider replacement for checkboxes */
.switch {
  position: relative;
  display: inline-block !important;
  width: 40px !important;
  height: 24px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider, .sliderBlue {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--input-border-color, #e2e3e5);
  transition: .4s;
}

.slider:before, .sliderBlue:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: var(--input-background-color, #fff);
  transition: .4s;
}

input:checked + .slider {
  background-color: #16b370;
}

input:focus + .slider {
  box-shadow: 0 0 1px #16b370;
  -webkit-box-shadow: 0 0 1px #16b370;
}

input:checked + .sliderBlue {
  background-color: #0082fc;
}

input:focus + .sliderBlue {
  box-shadow: 0 0 1px #0082fc;
  -webkit-box-shadow: 0 0 1px #0082fc;
}


input:checked + .slider:before, input:checked + .sliderBlue:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 50%;
}


/* The SMALL slider */
.switchSmall {
  position: relative;
  display: inline-block !important;
  width: 30px !important;
  height: 18px;
  margin-top: 4px;
}
.switchSmall input {
  display: none;
}

.sliderSmall, .sliderSmallBlue {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--input-border-color, #e2e3e5);
  transition: .4s;
}

.sliderSmall:before, .sliderSmallBlue:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 3px;
  bottom: 3px;
  background-color: var(--input-background-color, #fff);
  transition: all .4s;
}

input:checked + .sliderSmall {
  background-color: #16b370;
}

input:focus + .sliderSmall {
  box-shadow: 0 0 1px #16b370;
  -webkit-box-shadow: 0 0 1px #16b370;
}

input:checked + .sliderSmallBlue {
  background-color: #0082fc;
}

input:focus + .sliderSmallBlue {
  box-shadow: 0 0 1px #0082fc;
  -webkit-box-shadow: 0 0 1px #0082fc;
}

input:checked + .sliderSmall:before, input:checked + .sliderSmallBlue:before {
  -webkit-transform: translateX(12px);
  -ms-transform: translateX(12px);
  transform: translateX(12px);
}

/* Rounded sliders */
.sliderSmall.round, .sliderSmallBlue.round {
  border-radius: 18px;
}

.sliderSmall.round:before, .sliderSmallBlue.round:before {
  border-radius: 50%;
}


/* new style of checkboxes */
.newCheckboxWrapper {
  display: inline-block;
  position: relative;
  padding-left: 24px;
  margin-bottom: 15px;
  cursor: pointer;
  font-size: 14px;
  text-align: left;
}
.newCheckboxWrapper input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.newCheckboxIndicator, .newCheckboxIndicatorRed, .newCheckboxIndicatorGreen, .newCheckboxIndicatorOrange {
  position: absolute;
  top: -1px;
  left: 0px;
  height: 16px;
  width: 16px;
  background: #e6e6e6;
  outline: 1px solid var(--content-border-color, #e2e3e5);
}
.newCheckboxWrapper:hover input ~ .newCheckboxIndicator, .newCheckboxWrapper input:focus ~ .newCheckboxIndicator {
  background: #e2e3e5;
}
.newCheckboxWrapper input:checked ~ .newCheckboxIndicator {
  background: #0082fc !important;
}
.newCheckboxWrapper:hover input:not([disabled]):checked ~ .newCheckboxIndicator, .newCheckboxWrapper input:checked:focus ~ .newCheckboxIndicator {
  background: #30b2ff;
}
.newCheckboxWrapper input:checked ~ .newCheckboxIndicatorRed {
  background: #bd0008 !important;
}
.newCheckboxWrapper:hover input:not([disabled]):checked ~ .newCheckboxIndicatorRed, .newCheckboxWrapper input:checked:focus ~ .newCheckboxIndicatorRed {
  background: #FF946D;
}
.newCheckboxWrapper input:checked ~ .newCheckboxIndicatorGreen {
  background: #16b370 !important;
}
.newCheckboxWrapper:hover input:not([disabled]):checked ~ .newCheckboxIndicatorGreen, .newCheckboxWrapper input:checked:focus ~ .newCheckboxIndicatorGreen {
  background: #16b370;
}
.newCheckboxWrapper input:checked ~ .newCheckboxIndicatorOrange {
  background: #d97706 !important;
}
.newCheckboxWrapper:hover input:not([disabled]):checked ~ .newCheckboxIndicatorOrange, .newCheckboxWrapper input:checked:focus ~ .newCheckboxIndicatorOrange {
  background: #f59e0b;
}
.newCheckboxWrapper input:disabled ~ .newCheckboxIndicator, .newCheckboxWrapper input:disabled ~ .newCheckboxIndicatorRed, .newCheckboxWrapper input:disabled ~ .newCheckboxIndicatorGreen, .newCheckboxWrapper input:disabled ~ .newCheckboxIndicatorOrange {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}
.newCheckboxIndicator:after, .newCheckboxIndicatorRed:after, .newCheckboxIndicatorGreen:after, .newCheckboxIndicatorOrange:after {
  content: '';
  position: absolute;
  display: none;
}
.newCheckboxWrapper input:checked ~ .newCheckboxIndicator:after, .newCheckboxWrapper input:checked ~ .newCheckboxIndicatorRed:after, .newCheckboxWrapper input:checked ~ .newCheckboxIndicatorGreen:after, .newCheckboxWrapper input:checked ~ .newCheckboxIndicatorOrange:after {
  display: block;
}
.newCheckboxWrapper .newCheckboxIndicator:after, .newCheckboxWrapper .newCheckboxIndicatorRed:after, .newCheckboxWrapper .newCheckboxIndicatorGreen:after, .newCheckboxWrapper .newCheckboxIndicatorOrange:after {
  left: 6px;
  top: 2px;
  width: 3px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.newCheckboxWrapper input:disabled ~ .newCheckboxIndicator:after, .newCheckboxWrapper input:disabled ~ .newCheckboxIndicatorRed:after, .newCheckboxWrapper input:disabled ~ .newCheckboxIndicatorGreen:after, .newCheckboxWrapper input:disabled ~ .newCheckboxIndicatorOrange:after {
  border-color: #7b7b7b;
}


/* Org Charts */
#title_OrgChart {
    padding: 30px 0px 15px 25px !important;
}
#orgChartContacts {
    padding-left: 17px;
	height: 500px;
	overflow-y: auto;
	overflow-x: hidden;
	float: left;
	width: 15%;
}
#orgChartWrapper {
	float: left;
	margin-left: 20px;
	max-width: 79%;
	overflow-x: auto;
}
#orgChartButtonsWrapper {
	top: 30px;
	position: relative;
	right: 30px;
	margin-bottom: 50px;
}
.orgChartTitle {
	font-style: italic;
}
.orgChartPicture, .orgChartPicture img {
	max-width: 80px;
	max-height: 80px;
	margin: auto;
}
.addOrgChartNode {
	float: right;
	color: #16b370;
	font-size: 14px;
}
.deleteOrgChartNode {
	float: right;
	color: #bd0008 !important;
	font-size: 12px;
	vertical-align: middle;
	padding-top: 1px;
}
.draggableContact:hover {
	cursor: move;
}
.droppableOrgChartContact {
	cursor: pointer;
	min-width: 150px !important;
	max-width: 250px !important;
}
.droppableOrgChartContact div {
	clear: both;
}

/* Help page */
#title_Help {
	margin: 20px;
}
#helpSearchTerms {
	padding: 6px;
	margin-top: -6px;
}
#Contacts_filter_help_create_rtbx {
	background: rgba(255,255,255,0.95) !important;
    border-radius: 0px !important;
    box-shadow: none !important;
}
.leftHelpBox, .middleHelpBox {
    box-shadow: none !important;
    border: 1px solid var(--content-border-color, #e2e3e5) !important;
    background: var(--content-background-color, #fff);
    padding: 10px;
}
.helpBulletList li {
	margin-bottom: 10px;
}


/* Coupons */
#couponList h6 {
	color: #fff;
	padding: 5px;
}
#CouponTabs a.ui-state-green, #CouponTabs a.ui-state-yellow, #CouponTabs a.ui-state-red {
    font-size: 16px;
}


/* Project Manager */
.projectColorPicker img {
	height: 24px;
	width: 24px;
	vertical-align: top;
}

/* SMS */
#smsOuterWrapper {
    display: inline-block;
    margin-left: 0px;
}
#smsWrapper {
	margin: 30px !important;
	margin-top: 0px !important;
}
.smsWrapper {
	border: 1px solid var(--content-border-color, #e2e3e5);
	box-shadow: none;
    padding: 20px;
    margin: 20px;
    background: var(--content-background-color, #fff);
    float: left;
    font-size: 14px;
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
}
.smsWrapper input {
    border: 1px solid var(--input-border-color, #e2e3e5);
    color: var(--input-text-color, #404e60);
    background: var(--input-background-color, #f8f9fb);
}
.smsWrapper .ui-selectmenu-button {
    border: 1px solid var(--content-border-color, #e2e3e5);
    color: var(--main-text-color, #404e60);
    background: var(--main-background-color, #f8f9fb);
}
.smsLogContactEntry {
	width: auto;
	max-width: 250px;
	border-radius: 15px;
	background: #0082fc;
	padding: 5px !important;
	color: #fff;
	float: left;
	clear: both;
	font-size: 14px;
	display: block;
	height: auto;
	margin: 5px;
}
.smsLogSystemEntry {
	width: auto;
	max-width: 250px;
	border-radius: 15px;
	background: #404e60;
	padding: 5px !important;
	color: #fff;
	float: right;
	clear: both;
	font-size: 14px;
	display: block;
	height: auto;
	margin: 5px;
}
#a2pWrapper {
	float: right; 
	margin-right: 5%; 
	margin-top: -30px;
}
#modifyPhoneNumberWrapper {
	margin-left: 20px;
}
.newForwardingExceptionRule {
	margin: 20px 0px;
}
#SMSCampaigns-1 {
	background: var(--content-background-color, #fff) !important;
}
#title_SMS {
    margin: 30px 0px 0px 25px;
}
#smsLeftWrapper {
	width: 25%;
}
#smsLeftWrapper div {
	color: var(--main-text-color, #404e60);
}
#smsRightWrapper {
	width: 63%;
}
#smsReports {
	width: 63%;
	height: 300px;
}
#smsReportsNav {
	text-align: center;
	margin-bottom: 20px;
}
#smsReportsChart {
	height: 255px;
}
#SMSCampaigns {
    background-color: var(--content-background-color, #fff) !important;
    border: 1px solid var(--content-border-color, #e2e3e5);
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
}
#SMSCampaigns .ui-tabs .ui-tabs-panel {
	background: var(--content-background-color, #fff) !important;
}
#smsUsageLine {
	color: var(--green-text-color, #16b370);
	line-height: 36px;
}
#availableNumbers .ui-state-green {
	display: inline-block;
}
#availableNumbers tr {
	vertical-align: text-bottom;
}
#newSMS .Contacts_filter_wrapper {
	width: 100%;
}
#newSMS .Contacts_filter_form, #newSMS .Contacts_filter_summary {
	margin: 5px auto !important;
	float: none;
}
#newSmsCampaignTable {
	width: 100%;
	max-width: 100%;
	font-size: 14px;
}

/* Social */
#SocialDashboard {
    margin: -20px 35px 60px 30px;
    border: 1px solid var(--content-border-color, #e2e3e5);
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0);
}
#SocialDashboard .ui-tabs-nav {
    margin-left: -35px !important;
}
#SocialDashboard-1, #SocialDashboard-2, #SocialDashboard-3 {
    background: var(--content-background-color, #fff);
}
#title_Social {
    padding: 50px 0px 15px 30px !important;
    color: transparent !important;
}
#show-reports button {
    padding: 10px 15px;
    background: #0082fc;
    color: #fff;
    text-transform: uppercase;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    border: 0px !important;
}
#show-reports button:hover {
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.1);
}

/* Chat */ /* Chatbot */
#chatWrapper, #chartChatsAI {
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0) !important;
    margin: 0px 30px 40px 30px;
    padding: 30px;
    background: var(--content-background-color, #fff);
    border: 1px solid var(--content-border-color, #e2e3e5);
}
#title_Chat, #title_Chatbot {
    padding: 15px 0px 5px 30px !important;
}
#chartChatsAI {
	height: 300px;
}
#aiChatsList {
    margin: 0px 30px 60px 30px;
}
#aiChatsTable th {
	text-align: left;
}
.crawlMultipleCheckbox {
	height: 18px;
	width: 18px;
	vertical-align: top;
	margin-top: 9px;
	display: inline-block;
}

/* Website Manager */
#title_ManageWebsite {
    padding: 50px 0px 0px 30px !important;
    color: transparent;
}
#websiteManagerTabs {
    border: 0px;
    box-shadow: none;
}
#websiteManagerTabs .ui-tabs-nav {
    margin-left: -34px !important;
    width: 107% !important;
}
#websiteManagerWrapper {
	border: 1px solid var(--content-border-color, #e2e3e5) !important;
	box-shadow: none !important;
}
#websiteManagerWrapper .ui-widget-content:not(.helpWidget) {
	background: var(--content-background-color, #fff) !important;
}
#websiteManagerWrapper input {
	box-sizing: border-box;
    box-shadow: none;
    border: 1px solid var(--input-border-color, #e2e3e5);
}
#pagesList {
	background: var(--main-background-color, #f8f9fb) !important;
	width: 300px;
	border: 1px solid var(--content-border-color, #e2e3e5);
}

#pageEditor input, #pageEditor textarea {
    max-width: 50vh !important;
    width: 90% !important;
    margin: 5px 0;
}
#pageEditor select {
    max-width: 45vh !important;
    width: 90% !important;
    margin: 5px 0;
}
#pageEditor table tr td:nth-of-type(2) {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.directLinkTest {
    margin: 10px 0;
}

#playerAttributes {
	width: 100%;
	margin: 10px;
}
#playerAttributes li {
	margin-bottom: 5px;
	cursor: move;
	width: 97%;
	clear: both;
	padding-top: 3px;
	padding-bottom: 3px;
}
#playerAttributes .playerAttributesSummary {
	width: 70px;
	text-align: center;
	font-weight: bold;
	display: inline-block;
}
#playerAttributes .playerAttributesDetailPopup {
	width: 100px;
	text-align: center;
	font-weight: bold;
	display: inline-block;
}
#playerAttributes .playerAttributesField {
	display: inline-block;
	width: calc(100% - 185px);
	vertical-align: middle;
}

#signupFormSubscribersEntryChart {
    border: 1px solid var(--content-border-color, #e2e3e5) !important;
    box-shadow: none !important;
}
#storeItemCategories {
	float: right;
	background-color: var(--main-background-color, #f8f9fb);
	padding: 10px;
	height: auto;
	width: 420px;
	overflow: visible;
	border: 1px solid var(--content-border-color, #e2e3e5);
}
.storeItemBox, .editStoreDiscountBox, .showGoalBox, #storeReportsChart {
	background-color: var(--main-background-color, #f8f9fb);
}
#allItems img {
	max-width:400px;
	margin-right: 10px;
}
#categoriesLeftNav div {
	margin: 5px 5px 5px 0px;
}
#categoriesLeftNav a {
	white-space: nowrap;
}
#AllStoreItemCategories {
	min-height: 50px;
	width: 100%;
}
.storeItemCategoryWrapper {
	margin-top: 20px;
}
.storeItemCheckboxWrapper {
	padding-left: 10px;
	margin: 3px 0px;
}
#storeTabs .ui-tabs-panel {
	background-color: var(--main-background-color, #f8f9fb);
}
#storeTabs select {
	background-color: var(--content-background-color, #fff);
}
.storeItemBox {
	background-color: var(--content-background-color, #fff);
	box-shadow: none !important;
    border: 1px solid var(--content-border-color, #e2e3e5) !important;
	padding: 10px;
	margin-bottom: 30px;
}
.editStoreDiscountBox, .showGoalBox {
	background-color: var(--content-background-color, #fff);
	padding: 10px;
	box-shadow: none !important;
	margin-bottom: 25px;
	width: auto;
}
#storeReportsChart {
	background-color: var(--content-background-color, #fff);
	box-shadow: none !important;
    border: 1px solid var(--content-border-color, #e2e3e5) !important;
	padding: 10px;
	margin-bottom: 10px;
}
.visitorChartButton {
	white-space: nowrap;
}
#websiteTrackingTabs .ui-tabs-nav, #storeTabs .ui-tabs-nav {
    position: relative !important;
    margin-left: 0px !important;
    width: auto !important;
    top: 0px !important;
    margin: 0px !important
}
#websiteTrackingTabs .ui-tabs-anchor {
    font-size: 14px !important;
}
#websiteTrackingTabsUL {
	z-index: 8 !important;
}


/* Opportunity Settings */
#title_OpportunitySettings {
	margin: 20px 30px;
}
#opportunitySettings {
	display: block;
	margin: 0px 30px 10px 30px;
	padding: 20px 5px 20px 20px;
	width: 95%;
}
#opportunitySettings .hiddenPhaseID {
	display: none;
}
#opportunitySettings .checklistItemDiv {
	margin: 5px 0px;
	white-space: nowrap;
}
.displayOpportunityField {
	cursor: auto;
    background: var(--main-background-color, #f8f9fb);
    padding: 20px;
    margin: 22px 10px;
    width: auto !important;
    border: 1px solid var(--content-border-color, #e2e3e5);
    border-radius: 5px;
}
#opportunitySettings .main-flex-nav li a:hover{
    border-width: 0px 0px 3px 0px;
	border-style: solid;
}
#opportunitySettings .main-flex-nav .flex-active-link {
    border-width: 0px 0px 3px 0px;
	border-style: solid;
	border-bottom-color: var(--nav-box-shadow-color);
}



/* Asset Library */
#outerWrapperAssetLibrary {
	margin: 20px 30px;
}
#pdfList {
	height: 400px;
	width: 250px;
	overflow-y: auto;
}
.draggablePDF {
	cursor: move;
}
#assetLibrariesNav {
	font-size: 14px;
}
#assetLibraryTabsUL {
	margin-left: 25px;
}
#assetLibraryTabsUL li {
    background-color: var(--gray-background-color, #f3f3f3);
    border-radius: 0px !important;
    padding: 10px;
    border: 1px solid var(--content-border-color, #e2e3e5);
    margin-bottom: -1px;
    margin-right: 5px;
    display: inline-block;
    width: auto;
    font-size: 14px;
}
#assetLibraryTabsUL li:hover {
	background-color: var(--main-text-color, #404e60);
}
#assetLibraryTabsUL li:hover a {
	color: #f8f9fb;
}
.assetLibraryTiles {
	margin-left: 25px;
	border: 1px solid var(--content-border-color, #e2e3e5);
	padding: 20px;
	width: 800px;
	height: auto;
	display: block;
	clear: both;
	min-height: 400px;
	background-color: var(--content-background-color, #fff);
}
.assetTile {
	height: 480px;
	width: 200px;
	border: 1px solid #e9e9e9;
	box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.15);
	float: left;
	margin: 20px;
	padding: 10px;
	background-size: 100%;
	font-size: 12px;
	overflow-y: auto;
}
.assetTileHeader {
	margin: 5px 0px;
	padding: 100px 5px 5px 5px;
}
.assetTileTitle {
	font-size: 16px;
	font-weight: bold;
	text-align: right;
	height: 65px;
	display: table-cell;
	vertical-align: bottom;
	width: 186px;
}
.assetTileSubtitle {
	font-size: 14px;
	text-align: right;
}
.assetTileDescription {
	padding: 5px;
	font-size: 14px;
	line-height: 1.5;
}
#assetTileNextPrev {
	font-family: arial;
	float: right;
	margin: 5px 60px 0px 0px;
	font-size: 30px;
}
#assetTileNextPrev a {
	color: #fff;
	opacity: 0.5
}
#assetTileNextPrev a:hover {
	opacity: 1;
}

/* Button transition styles */
.ImmediateTransition {
	transition: 0.1s;
}
.SlowTransition {
	transition: 0.4s;
}

/* Fixed Three Tier NEW Nav */
#contactTabBar, #ContactsTools .ui-tabs-nav, #ContactsImport .ui-tabs-nav, #reportsWrapper .main-flex-nav, #accountSettings .main-flex-nav, #SocialDashboard .ui-tabs-nav, #LeadScoring .ui-tabs-nav, #Tickets .ui-tabs-nav, #projectManagerTabs .ui-tabs-nav, #websiteManagerTabs .ui-tabs-nav {
    margin: 0px;
    position: fixed;
    top: 106px;
    width: 100%;
    background: var(--content-background-color, #fff);
    z-index: 9;
    border-bottom: 1px solid var(--content-border-color, #e2e3e5);
    height: auto;
}
#contactTabBar .ui-tabs-anchor, #ContactsTools .ui-tabs-anchor, #ContactsImport .ui-tabs-anchor, #dlgContactView .ui-tabs-anchor, #SocialDashboard .ui-tabs-anchor, #editWorkflowForm .ui-tabs-anchor, #LeadScoring .ui-tabs-anchor, #EventDetail .ui-tabs-anchor, #projectManagerTabs .ui-tabs-anchor, #Tickets .ui-tabs-anchor, #websiteManagerTabs .ui-tabs-anchor {
    padding: 10px !important;
    transition: none !important;
}
#contactTabBar .ui-tabs-anchor a:hover, #ContactsTools .ui-tabs-anchor a:hover, #ContactsImport .ui-tabs-anchor a:hover, #dlgContactView .ui-tabs-anchor a:hover, #SocialDashboard .ui-tabs-anchor a:hover, #editWorkflowForm .ui-tabs-anchor a:hover, #LeadScoring .ui-tabs-anchor a:hover, #EventDetail .ui-tabs-anchor a:hover, #projectManagerTabs .ui-tabs-anchor a:hover, #Tickets .ui-tabs-anchor a:hover, #websiteManagerTabs .ui-tabs-anchor a:hover {
	color: #0082fc !important;
}
#contactTabBar .ui-tabs-tab, #ContactsTools .ui-tabs-tab, #ContactsImport .ui-tabs-tab, #dlgContactView .ui-tabs-tab, #SocialDashboard .ui-tabs-tab, #editWorkflowForm .ui-tabs-tab, #LeadScoring .ui-tabs-tab, #EventDetail .ui-tabs-tab, #projectManagerTabs .ui-tabs-tab, #Tickets .ui-tabs-tab, #websiteManagerTabs .ui-tabs-tab {
	margin: 0px 15px !important;
	transition: none !important;
}
#websiteTrackingTabs .ui-tabs-tab {
	margin: 0px 8px !important;
}
#contactTabBar .ui-tabs .ui-tabs-nav li.ui-tabs-active, #ContactsTools .ui-tabs .ui-tabs-nav li.ui-tabs-active, #ContactsImport .ui-tabs .ui-tabs-nav li.ui-tabs-active, #dlgContactView .ui-tabs .ui-tabs-nav li.ui-tabs-active, #SocialDashboard .ui-tabs .ui-tabs-nav li.ui-tabs-active, #editWorkflowForm .ui-tabs .ui-tabs-nav li.ui-tabs-active, #LeadScoring .ui-tabs .ui-tabs-nav li.ui-tabs-active, #EventDetail .ui-tabs .ui-tabs-nav li.ui-tabs-active, #projectManagerTabs .ui-tabs .ui-tabs-nav li.ui-tabs-active, #Tickets .ui-tabs .ui-tabs-nav li.ui-tabs-active, #websiteManagerTabs .ui-tabs .ui-tabs-nav li.ui-tabs-active {
    box-shadow: inset 0px -3px 0px 0px var(--nav-box-shadow-color) !important;
}
#reportsWrapper .main-flex-nav li, #accountSettings .main-flex-nav li {
    margin: 0px 15px !important;
    padding: 0px;
}
#reportsWrapper .main-flex-nav li a, #accountSettings .main-flex-nav li a {
    padding: 18px 10px !important;
    font-size: 16px;
}
#reportsWrapper .main-flex-nav li a:hover, #accountSettings .main-flex-nav li a:hover, #reportsWrapper .main-flex-nav .flex-active-link, #accountSettings .main-flex-nav .flex-active-link {
    box-shadow: inset 0px -3px 0px 0px var(--nav-box-shadow-color) !important;
}
#reportsWrapper .mainbox-content, #accountSettings .mainbox-content {
    margin: 15px 30px;
    padding: 15px;
    background: var(--content-background-color, #fff);
    box-shadow: 0px 15px 25px -15px var(--content-box-shadow-color, #e3eaf0) !important;
    border: 1px solid var(--content-border-color, #e2e3e5) !important;
    clear: both;
}



/*



Responsive styles




*/
@media screen and (max-width: 1600px) {
	#Tickets .ui-tabs-tab {
		font-size: 14px;
	}
}
@media screen and (max-width: 1450px) {
	#Tickets .ui-tabs-tab, #ContactsTools .ui-tabs-tab {
		margin: 0px 10px !important;
	}
	.userDataCluster td, .userDataCluster td input {
		font-size: 12px;
	}
}

@media screen and (max-width: 1370px) {
	#accountSettingsLeftNav {
		display: none;
	}
}

@media screen and (max-width: 1350px) {
	.userDataCluster td {
		display: block;
		width: 100% !important;
	}
	.userDataCluster td:last-child {
		margin-bottom: 10px;
	}
	.contactsCheckboxes {
		width: 100%;
	}
	.contactsCheckboxes td {
		display: table-cell;
		width: auto !important;
	}
	#Tickets .ui-tabs-tab, #ContactsTools .ui-tabs-tab {
		font-size: 12px;
	}
}

@media screen and (max-width: 1330px) {
	.main_nav li {
		margin: 0px 10px !important;
	}
	#Tickets .ui-tabs-tab, #ContactTabs .ui-tabs-tab, #emailToUL .ui-tabs-tab, #ContactsTools .ui-tabs-tab {
		margin: 0px 5px !important;
	}
	#emailToUL li a, #dlgContactView .ui-tabs-anchor {
		padding: 5px !important;
	}
	#websiteTrackingTabs .ui-tabs-tab {
		margin: 5px !important;
	}
}

@media screen and (max-width: 1250px) {
	.nav_bar, .nav_bar a, #Tickets .ui-tabs-tab, #ContactTabs .ui-tabs-tab, #emailToUL .ui-tabs-tab, #ContactsTools .ui-tabs-tab {
		font-size: 13px !important;
	}
	#emailToUL li a, #dlgContactView .ui-tabs-anchor {
		padding: 1px !important;
	}
}

@media screen and (max-width: 1200px) {
	.topNavBig::before {
		display: none !important;
	}
	#accountSettings #accountSettingsLeftNav {
		width: 130px;
	}
}


@media screen and (max-width: 1100px) {
	.nav_bar, .nav_bar a, #Tickets .ui-tabs-tab, #ContactTabs .ui-tabs-tab, #emailToUL .ui-tabs-tab, #ContactsTools .ui-tabs-tab {
		font-size: 12px !important;
	}
	#emailToUL li a {
		padding: 0px !important;
	}
}

@media screen and (max-width: 1080px) {
	#deleteUnsubButtonsWrapper {
		clear: both;
		float: none;
		padding: 15px 0px 5px 15px;
	}
	#websiteTrackingTabs .ui-tabs-tab {
		margin: 0px !important;
	}

	#sendTestMessageWrapper p, #sendTestMessageWrapper span {
		font-size: 10px !important;
	}
	#sendTestMessageWrapper h5 {
		font-size: 12px !important;
	}
	#addTestWrapper {
		margin-top: 5px;
	}
}

@media screen and (max-width: 900px) {
	.contactsColumn {
		display: block;
		width: 100%;
	}
}

@media screen and (max-width: 800px) {
	#ContactTabs .ui-tabs-tab .contactTabText {
		display: none;
	}
	.ui-dialog-buttonset button {
		padding: 2px !important;
		font-size: 12px !important;
	}
}


/* Start of Mobile Responsive Styles */

@media screen and (max-width: 768px) {
	body {
		zoom: 1;
	}
	body,#nav_wrapper,.sub_nav_bar {
		min-width: auto !important;
	}
	.nav_bar, #navNotifierWrapper {
		display: none !important;
	}
	#action_container {
		display: none !important;
	}
	.sub_nav_bar .seasons {
		display: none !important;
	}
	.sub_nav_bar_left {
		display: flex !important;
		justify-content: space-between;
		align-items: center;
		height: min-content;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
	}
	.groups, .seasons {
		height: auto !important;
		margin-left: 0px !important;
		margin-top: 0px !important;
		margin-right: 0 !important;
		line-height: 15px !important;
	}
		
	#_widget_wfx_ {
		display: none !important;
	}

	#mobile-nav {
		display: block;
		background: #404e60;
		padding: 10px;
	}
	#mobile-nav .logo {
		height: 33px;
	}
	#mobile-nav .logo img {
		max-width: 145px;
		max-height: 30px;
	}
	
	.topNavDropdown {
		left: 6px;
		width: 50%;
	}

	#main {
		padding: 0px;
	}

	.ui-dialog-title {
		font-size: 0.8em !important;
	}
	#contactTabBar .ui-tabs-tab {
        padding: 0 25px!important;
        margin: 0 15px 0 0 !important;
	}
	.ui-tabs .ui-tabs-nav li {
		display: inline-block;
	}
	.ui-selectmenu-button, .ui-selectmenu-open {
		max-width: 100%;
	}
	.openDataTableStates {
		clear: both;
		float: none;
		text-align: center;
		margin: 10px;
		display: block;
	}


	/** Hamburger **/
	.burger-button {
		position: fixed;
		z-index: 999999;
		padding: 8px;
		right: 5%;
		top: 15px;
	}
	/* this is where you can chand the color of the buttons */
	.burger-button span{
	  width: 25px;
	  border: 1px solid #fff;
	  background-color: #fff;
	  display: block;
	  border-radius: 22px;
	  transition: 1s;
	}
	.burger-button.active span{
	  border-color: #fff;
	  background-color:#fff;
	}
	.burger-top, .burger-bottom{
	  position: absolute;
	}
	.burger-top{
	  top: 0px;
	}
	.burger-bottom{
	  bottom: 0px;
	}
	/* make sure this has the same top as the burger button has padding*/
	.burger-button.active .burger-top{
	  position: absolute;
	  top: 8px;
	  transform: rotateZ(45deg);
	}
	.burger-button.active .burger-middle{
	/*   transform: rotateZ(270deg); */
	  border-color: rgba(0,0,0,0);
	  background-color:rgba(0,0,0,0);
	}
	/* make sure this has the same bottom as the burger button has padding*/
	.burger-button.active .burger-bottom{
	  position: absolute;
	  bottom: 8px;
	  transform: rotateZ(-45deg);
	}
	.burger-menu {
		display: flex;
		position: fixed;
		top: -100vh;
		left:0;
		right: 0;
		bottom: auto; /* Used to be 100vh */
		background-color: rgba(64,78,96,0.90);
		padding:5px;
		box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
		z-index: 99;
	  transition:1s;
		align-content:space-around;
	  /**justify-content:space-around;**/
	  flex-direction:column;
	  height: auto;
	  text-align: center;
	}
	.burger-menu .col {
	margin: 10px;
	width: 23%;
	}
	.burger-menu.active{
	  top:0;
	  bottom:0;
	  padding: 60px 0px;
	}
	.burger-menu a {
	  text-decoration: none;
	  font-size: 20px;
	  color: #fff;
	}
	.burger-menu a:hover {
	opacity: 0.75;
	}
	/** End Hamburger **/

	/* Help */
	.helpWidget {
		width: 90% !important;
		left: 5px !important;
	}
    .help_icon, .help_icon_show {
        margin: 0 .5em;
    }
    
	/* SMS :: Mobile Responsive */
	#smsLeftWrapper {
		width: auto;
	}
	#smsReports {
		width: auto;
		height: auto;
	}
	#smsRightWrapper {
		width: auto;
	}
	#smsWrapper td {
		width:100%;
		display: inline-block;
	}
	#a2pWrapper {
		clear: both; 
		width: 100%;
		display: block;
		margin-top: 15px;
		text-align: right;
	}
	#newSMSmessage {
		width: 100% !important;
	}
	#smsCampaignsTable tr {
		margin-bottom: 10px;
	}
	#smsCampaignsTable td,#newSmsCampaignTable td, #modifyPhoneNumberTable td {
		display: block;
		width: 100%;
		text-align: left !important;
	}
	.Contacts_filter_form,.Contacts_filter_summary {
	    width: 100% !important;
	}
	#loadSMSmessage {
		width: 100% !important;
		min-height: 100px !important;
	}
	#modifyPhoneNumberWrapper {
		margin-left: 0px !important;
	}
	#modifyPhoneNumberTable td {
		display: block;
		width: 99%;
	}
	#modifyPhoneNumberTable .iti, #modifyPhoneNumberTable .routeExceptionPlayerID, #modifyPhoneNumberTable .fromText, #modifyPhoneNumberTable .assignCallActivitySelect {
		display: block;
		max-width: 250px !important;
	}
	#modifyPhoneNumberTable .dialText {
		display: block;
	}
	#modifyPhoneNumberTable textarea {
		max-width: 300px;
	}
	#modifyPhoneNumberTable .optinKeywordOptions span, #modifyPhoneNumberTable .optinKeywordOptions select, #modifyPhoneNumberTable .optinKeywordOptions div, #modifyPhoneNumberTable .optinKeywordOptions input {
		display: block;
		padding-left: 0px !important;
	}
	#modifyPhoneNumberTable .optinKeywordOptions select {
		max-width: 300px;
	}
	

	/* Dashboard :: Mobile Responsive */
	#dashboardLeftColumn, #dashboardRightColumn {
		width: 100%;
		display: block;
	}
	#dashboardLeftWrapper {
		width: 99% !important;
		padding-left: 15px;
		margin-top: 15px;
		margin-left: 0px !important;
	}
	.dashboard2_LeftBox {
		width: 88% !important;
		float: left;
	}
	#reputationAndUsers {
		width: 94% !important;
	}
	#dashboardRightWrapper {
		width: 90% !important;
		margin: 15px 4%;
	}
	.dashboard2_RightBox {
		width: 100% !important;
		float: left;
	}
	.visibleWidget2 {
		width: 100% !important;
	}
	#accountSetupProgressWrapper {
		display: none;
	}
	.dashboardMiniCalWrapperTD {
		width: 100% !important;
		display: inline-block;
		margin: 15px 0px;
	}
	#miniCal {
		height: 100% !important;
	}
	#opportunitiesDetail1 table {
		border-top: 1px solid var(--content-border-color, #e2e3e5);
		padding-top: 10px;
	}
	#opportunitiesDetail1 td {
		width: 100% !important;
		display: inline-block;
		margin: 2px 0px;
	}
	#opportunitiesDetail1 table tr td:first-child {
		margin-bottom: 10px;
	}
	.simpleSearchButtonsWrapper a {
		display: inline-block;
		margin: 5px;
	}
	#dashboardCustomizePrint {
		display: none;
	}
	#simple-search-table tr {
		display: block;
		width: 100%;
		clear: both;
		margin-top: 30px;
		border-bottom: 1px solid #404e60;
	}
	#simple-search-table th {
		font-size: 10px;
	}
	#simple-search-table td {
		display: block;
		width: 100%;
		clear: both;
	}
	
	
	/* Expanded Dashboard :: Mobile Responsive */
	#dashboard_ProjectTasks td {
		display: block; 
		width: 100%;
	}
	


	/* Command Center :: Mobile Responsive */
	#commandCenterTopNav {
		margin-top: 25px;
	}
	#mapSelectorWrapper {
		float: none !important;
	}


	/* Contacts :: Mobile Responsive */
	.maintitle {
		white-space: normal !important;
	}
	#allContactsNav {
		width: 100% !important;
	}
	#Contacts {
		width: 90%;
		min-width: 300px !important;
		padding: 10px;
		margin: auto;
	}
    form#Contacts_list_form {
        width: 100%;
        margin: auto;
    }
	#ContactTabs, #dlgContactView {
		height: 65vh !important;
	}
	.ui-tabs .ui-tabs-panel {
		padding: 5px 0px;
	}
	.contactsColumn {
		width: 88% !important;
		display: block;
	}
	
	#contactTabBar {
		margin: -7px 0;
		left: 0;
        overflow: scroll;
	}
    #contactTabBar .ui-tabs-anchor {
        padding: 10px 0 !important;
    }
    	
	#ContactTabs-1,#ContactTabs-2,#ContactTabs-3,#ContactTabs-4,#ContactTabs-5,#ContactTabs-6,#ContactTabs-7,#ContactTabs-8 {
		padding: 7px;
	}
	#ContactTabs-9 {
		padding: 0px;
	}
	
	#Contacts-1 {
        min-width: min-content !important;
		width: 100%;
	}
	#tagCloudWrapper {
		position: relative;
		top: 0px;
		right: 0px;
		z-index: 1;
        margin: -70px 0 10px;
	}
	#tagCloud {
		float: none;
		margin: auto;
	}
	#listContactsButtonsWrapper {
		position: relative;
		top: 0px;
		width: 100%;
		padding: 10px 0px;
	}
	#contactsSearchBox {
        width: 100% !important;
		min-width: auto !important;
        margin: 15px -10px !important;
		display: inline-block !important;
	}
	#contactsListTable {
        width: 100% !important;
	}
	#Contacts_listContacts {
		width: 100% !important;
		padding-top: 0px;
		margin-left: 0px !important;
		padding-left: 0px !important;
	}
	#Contacts_list_pager {
		display: block;
		line-height: 200%;
	}
	#Contacts_list_display {
		width: 100%;
		padding-top: 20px;
	}
	#allContactsNav .Contacts_filter_wrapper {
        width: 100% !important;
	}
	.searchResultsContainer {
		left: 10px !important;
		width: 97% !important;
	}
	#ContactTabs-5 #attributeHeadline {
		float: none; 
		display: block;
	}
	#ContactTabs-5 #attributionButtons {
		float: none; 
		display: block;
		margin-right: 0px;
		line-height: 36px;
	}
	#ContactTabs-5 .contactAttributionTD {
		display: inline-block;
		width: 100% !important;
		margin-top: 10px;
		text-align: left;
	}
	#ContactTabs-5 #permissionPathWrapper {
		word-break: break-all;
	}
	

	/* Contacts - Companies :: Mobile Responsive */
	#Contacts-2 {
		padding-top: 0px !important;
	}
	#companiesTabContent {
        margin-top: -70px;
	}
	#companyActionButtons {
		position: relative !important;
		right: unset !important;
	}
	#companyActionButtons a {
		float: left;
		white-space: nowrap;
		margin-bottom: 5px;
		margin-left: 0px !important;
	}
	#companiesAllOrGroup {
		display: block;
	}
	#modifyCompanyLink, #importCompanyDataLink, #editCompanyOrderLink {
		display: none;
	}
	#addNewCompany {
		width: 80%;
		float: none;
		margin-top: 10px;
	}

	
	/* Contacts - Conversations :: Mobile Responsive */
	#conversationsPanelWrapper {
		margin-top: -70px;
	}
	#conversationsTable_wrapper {
			overflow-y: scroll;
	}
	#conversationsTable_wrapper .datatables-top {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 95%;
    }


	/* Contacts - To-Do List :: Mobile Responsive */
	#Contacts-3 #contactsToDoListTable {
		width: 90%;
		margin-top: -40px;
	}
	#Contacts-3 #contactsToDoListTableLeftColumn {
		display: inline-block;
		width: 100%;
		padding: 0px;
		margin: 0;
	}
	#Contacts-3 #dashboardNewsFeed, #Contacts-3 #dashboardRecentActions {
		width: 100% !important;
	}
	#Contacts-3 #contactsToDoListTableRightColumn {
		display: inline-block;
		width: 100%;
		padding: 0px;
		margin: 10px 0px;
	}
	#Contacts-3 #crmActivitiesToDoReportsChart {
		width: 100% !important;
	}

	/* Contacts - Hot Contacts :: Mobile Responsive */
	#scatterChart {
		position: relative !important;
		width: 100% !important;
	}
	#hotContactsWrapper {
		margin-top: -50px;
	}
	#hotContactsTable {
		width: 100%;
		max-width: 100%;
	}
	#hotContactsTable th {
		display: none;
	}
	#hotContactsTable td {
		display: block;
		width: 100%;
	}
	#hotContactsTable td div {
		white-space: normal !important;
	}
	#hotContactsTable .icon-magnify {
		display: inline !important;
	}
	#hotContactsTable .hotActivityScore, #hotContactsTable .hotDemographicScore {
		display: none;
	}
	#hotContactsTable .hotTotalScore {
		padding-top: 0px;
		margin-top: -5px;
	}
	#hotContactsTable .hotContactsDetailsRow td {
		padding-top: 0px;
	}
	#hotContactsTable .hotContactsRowNameEmail {
		font-weight: bold;
	}
	
	/* Contacts - Cold Contacts :: Mobile Responsive */
	#coldContactsWrapper {
		margin-top: -50px;
	}
	

	/* Contacts - Opportunities :: Mobile Responsive */
	#opportunitiesDonut {
		position: relative !important;
		left: 0px !important;
	}
	#opportunitiesNavButtons {
		display: block;
		clear: both;
		margin: 10px 0px;
	}
	#opportunitiesKanbanTopWrapper {
		float: none !important;
		clear: both;
		margin: 25px 0px 10px 0px !important;
		display: none;
	}
	#opportunitiesKanbanButtonsWrapper {
		float: none !important;
		margin: 0px !important;
	}
	#opportunityKanbanFilterWrapper {
		position: relative;
		margin: 10px auto;
		text-align: center;
	}
	#dashboardPipelineWrapper {
		width: 97%;
		min-width: 300px !important;
	}
	#dashboardPipelineWrapper td {
		width: 100% !important;
		display: block;
	}
	#opportunitiesMain .pipelineSortable {
		max-height: none;
	}
	.pipelineSortable {
		overflow-y: visible;
	}
	
	/* Contacts - View Contact :: Mobile Responsive */
	#contactMemberOf {
		float: none;
	}
	#contactOtherUserFields {
		margin-left: 20px;
	}
	#contactPrint {
		clear: both;
		float: left;
		margin-top: 5px;
	}	
	#contactEnvelope {
		margin-top: 5px;
	}
	#contactWeather {
		clear: both;
		float: left;
		margin-top: 5px;
	}
	#contactLocalTime {
		margin-top: 5px;
		padding-top: 6px;
	}
	#deleteUnsubButtonsWrapper {
		padding-top: 0px;
		line-height: 32px;
	}
	#groupsTabTopLinks {
		float: none;
		display: block;
		white-space: normal;
	}
	#groupsFilterWrapper {
		display: block;
	}
	.groupFolderBox {
		width: 90% !important;
	}
	.dripStatus {
		white-space: normal;
	}
	#sendPersonalEmailWrapper > div {
		width: 100%;
		max-width: 100% !important;
		min-width: 100% !important;
	}
	#sendPersonalEmailLeftColumn, #sendPersonalEmailRightColumn {
		display: inline-block !important;
		width: 100%;
	}
	#sendPersonalEmailWrapper #personalEmailFromName {
		display: block;
	}
	#sendPersonalEmailWrapper #EmailSettings {
		width: 100% !important;
	}
	#sendPersonalEmailWrapper #EmailSettings td {
		text-align: left !important;
		display: inline-block; 
		width: 100%;
	}
	#sendPersonalEmailWrapper #EmailSettings td:first-child {
		font-weight: bold;
	}
	#sendPersonalEmailWrapper #personalEmailDelay {
		display: block;
	}
	#sendPersonalEmailWrapper #personalEmailToButtons {
		display: block;
		margin-top: 10px;
	}
	#sendPersonalEmailWrapper #ImageDraggerPersonalEmail {
		width: 100% !important;
		margin: 0px;
	}
	#sendPersonalEmailWrapper #ImageDraggerPersonalEmail span {
		display: block;
	}
	.customObjectsWrapperContact .displayCustomObject td {
		display: inline-block; 
		width: 100%;
		text-align: left !important;
	}
	.customObjectsWrapperContact .displayCustomObject td:first-child {
		font-weight: bold;
	}
 
	div#dlgCompanyView {
		height: 75vh !important;
	}
	
			
	/* Contacts :: Quick Activity Form :: Mobile Responsive */
	#newQuickActivityTable td {
		display: inline-block;
		width: 100% !important;
		text-align: left !important;
	}
	#newQuickActivityTable td:first-child {
		font-weight: bold;
	}
	#quickAddWorkflowID-button, #quickAddTeamID-button {
		display: block; 
		max-width: 100%;
	}
	
	
	/* Companies details :: Responsive */
	#companyDetailsDialog .mainbox-content {
		clear: both;
	}
	#companyDetailsDialog .mainbox-flex {
		display: block;
		width: 100%;
	}
	#companyDetailsDialog .mainbox-flex>div {
		width: 100%;
		display: block;
	}
	#companyDetailsDialog .mainbox-flex>div table td {
		display: inline-block;
		width: 100%;
		margin-top: 10px;
	}
	#companyDetailsDialog #companyActionsLine {
		line-height: 36px;
	}
	#companyDetailsDialog .filter {
		margin: 10px;
		background: #fff; 
		padding: 10px;
		border: 1px solid var(--content-border-color, #e2e3e5);
		width: 350px;
	}
	#companyDetailsDialog .item {
		margin: 1% 0px 1% 0px;
		max-width: 100%;
		display: block;
	}
	#companyDetailsDialog .item .image {
		display: none;
	}
	#companyDetailsDialog .item .details {
		width: 100%;
	}
	#companyDetailsDialog .activityNotes {
		word-break: break-all;
	}
	
	/* Emailer :: Mobile Responsive */
	#emailerWrapper td {
		display: block;
		width: 98% !important;
	}
	#emailFromEmail {
		display: block;
		padding-left: 30px;
		margin-bottom: 10px;
	}
	#emailFromWarning {
		width: 100% !important;
	}
	#emailerSubject {
		width: 200px !important;
	}
	#buildAndSendEmailWrapper {
		padding: 0px 10px !important;
	}
	#buildAndSendEmailWrapper #TextOnlyVersion, #buildAndSendEmailWrapper #PhysicalAddress, #buildAndSendEmailWrapper #AutomaticAction {
		width: 100% !important;
		padding: 20px 5% !important;
	}
	#EmailTo {
		margin: 10px 0px !important;
	}
	#emailerLeftBottom {
		width: 90%;
	}
	#sendTestMessageWrapper {
		margin-top: 0px !important;
	}
	#social-email-post {
		margin: 0px !important;
		padding: 12px 0px !important;
	}
	#emailerWrapper .ui-datepicker-calendar td {
		display: table-cell !important;
		width: min-content !important;
	}
	#stampsBalance {
		display: none;
	}
	#emailTourBusLink {
		display: none;
	}
	div#EmailTo-3 div#deliveryDatetimeDiv {
		margin: auto;
		width: 95%;
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
	#deliveryDatetimeDiv .ui-datepicker, #emailCampaignOptimizer .ui-datepicker {
		width: 90% !important;
	}
	.ui-datepicker-calendar .ui-datepicker td .ui-state-default {
		padding: 5px 0 !important;
	}  
        	
	#mailMergeListId li, #mailMergeListId li div, #surveyListId li, #surveyListId li div  {
		display: block !important;
		width: 100% !important;
		overflow: visible !important;
		height: auto !important;
		clear: both;
		float: none !important;
	}
	#surveyListId .modified-date, #surveyListId .modified-time {
		color: #6a7480;
	}


	/* Email Tracking :: Mobile Responsive */
	#expandCompressTabs {
		display: none;
	}
	.emailTrackingTab {
		height: 300px !important;
	}
	div#EmailTrackingNav, div#EmailTrackingNav ul {
		overflow: scroll;
	}
	.viewEditCancelBroadcast a {
		display: block;
		text-align: center;
	}
	#emailTrackingSecondRow {
		margin-left: 0px;
	}
	#emailTrackingChartsWrapper table {
		width: 100% !important;
	}
	#emailTrackingChartsWrapper table td {
		width: 100% !important;
		display: block;
	}
	.emailTrackingArrow {
		transform: rotate(90deg);
		margin-top: 40px;
	}
	#emailTrackingResults1 p, #emailTrackingResults1 div, #emailTrackingResults2 p, #emailTrackingResults2 div, #emailTrackingResults3 p, #emailTrackingResults3 div {
		text-align: center;
	}


	/* Calendar :: Mobile Responsive */

	#calendarWrapper {
		padding: 20px 0px;
		margin: 20px 0px;
	}
	#calendarWrapperTable td, #eventInfoTable td, #publicEventOptionsTable td, #eventOptionsWrapperTable td, #rsvpInteractionSettingsTable td {
		display: block !important;
		width: 100% !important;
		min-width: 300px !important;
		text-align: left !important;
	}
	#eventInfoTable td:first-child, #publicEventOptionsTable td:first-child, #eventOptionsWrapperTable td:first-child, #rsvpInteractionSettingsTable td:first-child {
		margin-top: 10px;
		font-weight: bold;
	}
	#belowCalendarBox {
		min-width: 300px !important;
		word-break: break-all;
	}
	#belowCalendarBox a, #belowCalendarBox p {
		word-break: break-all;
	}
	#publicRegistrationSettingsTop {
		margin-left: 10px;
	}
	#EventDetail .ui-tabs-anchor {
		padding: 0px !important;
	}
	#eventDetailsNotesWrapper {
		float: none;
		width: 100%;
		display: block;
		margin-left: 0px;
	}
	#eventDetailsNotesWrapper p {
		font-weight: bold;
	}
	#publicEventOptionsTable {
		margin-top: 10px; 
		float: none; 
		width: 100%;
	}
	.attendanceHeadingLabel {
		display: block;
		font-weight: bold;
	}

	/* Events List :: Mobile Responsive */
	#outerWrapperEventsList .maintitle {
		margin-left: 10px !important;
	}
	#outerWrapperEventsList #calendarWrapper {
		margin-top: 0px;
	}
	#outerWrapperEventsList #locations {
		margin-top: 65px;
	}
	#title_Locations {
		position: relative;
		margin-left: 10px;
	}
	#Locations {
		margin-left: 2px !important;
		margin-top: 2px;
	}

	#newLocationButton {
		position: relative !important;
		margin: 10px 0px !important;
		left: 0px !important;
	}
	#pastEventsTable tr > :first-child, #futureEventsTable tr > :first-child, #allEventsTable tr > :first-child {
		margin-top: 20px;
	}


	/* Projects :: Mobile Responsive */

	#projectManagerTabs {
		margin-left: -10px;
	}
	#projectManagerTabs .ui-tabs-nav {
		top: 90px;
		margin: 0px 5px !important;
	}
	#projectSearchWrapper {
		margin-top: 80px !important;
	}
	#projectDetailContent {
		width: 100%;
	}
	#projectEfficiencyGauge,#projectTaskBudgetGauge {
		position: relative !important;
		margin: auto !important;
		right: 0px !important;
	}
	#projectDetailContent td {
		display: inline-block;
		width: 100% !important;
	}
	#projectDetailContent td:first-child {
		width: auto !important;
		float: right;
	}
	#projectDetailContent td:nth-child(2) {
		width: auto !important;
		float: left;
	}
	.projectStatusShort {
		word-break: break-all;
	}
	#closedTasksP span {
		float: left !important;
		clear: both;
		display: block;
		margin-bottom: 10px;
	}
	.projectTaskCommentsTable td {
		text-align: left !important;
		display: inline-block;
		width: 100%;
	}
	.projectTaskCommentsTable td:first-child {
		font-weight: bold;
		margin-top: 15px;
	}
	.newProjectTaskCommentTable td {
		text-align: left !important;
		display: inline-block;
		width: 100%;
	}
	.newProjectTaskCommentTable td:first-child {
		font-weight: bold;
		margin-top: 15px;	
	}
	.newProjectTaskCommentTable p {
		display: inline;
	}
	
	#taskIDfilter {
		width: 90%;
	}
	#projectsTable {
		border-top: 1px solid #999;
		padding-top: 10px;
	}
	#projectsTable thead {
		display: none;
	}
	#projectsTable td {
		width: 100% !important;
		display: block;
		padding: 5px;
	}
	.divider_right {
		padding: 0px;
		border-right: 0px;
	}
	.divider_left {
		padding: 0px;
		border-left: 0px;
	}
	.projectColor {
		margin-right: 5%;
	}
	#updatesForDiv {
		clear: both;
		margin: 5px 0px;
	}
	.newProjectUpdateLink {
		clear: both;
		margin: 10px 0px;
		display: block;
	}
	.newProjectUpdateTable td {
		text-align: left !important;
		display: block;
		width: 100%;
	}
	#projectAdministratorsTable {
		margin-top: 80px;
	}
	#selectRemoveAllProjectAdminsRow {
		text-align: center;
	}
	#editProjectCategoriesDiv {
		margin-top: 150px !important;
		padding-left: 20px;
	}
	#editProjectCategoriesDiv div {
		margin: 15px 0px;
	}
	#editProjectCategoriesDiv input {
		display: block;
	}
	#editTaskCategoriesDiv {
		margin-top: 150px !important;
		padding-left: 20px;
	}
	#editTaskCategoriesDiv div {
		margin: 15px 0px;
	}
	#editTaskStagesDiv {
		margin-top: 150px !important;
		padding-left: 5px;
	}

	
	/* Ticketing :: Mobile Responsive */
	#Tickets {
		padding: 10px 0px;
		margin: 140px 0px 10px 0px;
	}
	#Tickets .ui-tabs-nav {
		top: 95px;
	}
	#newTicketWrapper {
		position: relative;
		right: 0;
	}
	#unassignedTicketsTable th, #openTicketsTable th, #closedTicketsTable th {
		display: none;
	}
	#unassignedTicketsTable td, #openTicketsTable td, #closedTicketsTable td {
		display: block;
		width: 100%;
	}
	#ticketUpdatesTable td {
		display: block;
		width: 100%;
		border-top: 0px !important;
	}
	.ticketUpdateColumnLeft {
		border-top: 0px !important;
	}
	.ticketUpdateColumnRight {
		margin-bottom: 25px;
		border-bottom: 1px solid #999;
	}
	.newTicketUpdateEditorWrapper {
		width: 100%;
	}
	.newTicketUpdateLabelWrapper {
		padding-left: 0px;
		display: block;
		float: left;
		clear: both;
		margin: 10px 0px;
	}
	.newTicketUpdateLabelWrapper label, .newTicketUpdateLabelWrapper span {
		float: left;
		display: inline !important;
	}
	#newTicketButtons a {
		display: inline-block;
		margin: 10px;
		float: left;
	}
	#Tickets .dataTables_filter {
		display: block;
		clear: both;
	}
	#ticketsMap, #ticketsMapDetails {
		width: 100% !important;
	}
	#ticketTeamTable {
		width: 100%;
		overflow-x: auto;
	}
	#ticketCategoriesWrapper thead {
		display: none;
	}
	#ticketCategoriesTable td, #otherGroupTicketCategories td {
		width: 100%;
		display: block;
	}
	#Tickets .ui-tabs-tab {
		margin: 0px !important;
		float: left;
	}
	#unassignedDataTableStates, #openDataTableStates, #closedDataTableStates {
		float: none !important;
		margin: 10px auto !important;
		text-align: center;
	}
	#ticketingActionButtons {
		top: 220px !important;
		width: 100%;
		text-align: center;
		margin-left: 270px;
		display: block;
		position: relative;
	}
	.ticketFormsTD {
		display: inline-block;
		margin: 10px 0px;
		width: 100%;
	}
	#ticketUpdatesWrapper .ticketUpdateButtons {
		line-height: 36px;
	}
	#viewTicketUpdatesCustomFields table {
		min-width: 0px;
		max-width: 100%;
	}
	#viewTicketUpdatesCustomFields td {
		display: inline-block;
		width: 100%;
		text-align: left !important;
	}
	#viewTicketUpdatesCustomFields td:first-child {
		margin-top: 5px;
		font-weight: bold;
	}
	.viewDeleteTicket {
		margin-bottom: 15px;
	}
	.ticketMandatoryField {
		display: block;
		margin-bottom: 15px;
	}
	
	/* Wiki :: Mobile Responsive */
	#title_Wiki {
		padding-top: 0px !important;
		margin-top: 10px;
	}
	#wikiGroupLogoWrapper {
		position: relative;
		margin-top: 5px;
		width: 100%;
		left: 0px;
		text-align: center;
	}
	#wikiActionButtons {
		width: 100%;
		margin-top: 12px;
		line-height: 30px;
		position: relative;
		right: auto !important;
		top: auto !important;
		text-align: center;
	}
	#wikiWrapperLeft,#wikiWrapperRight {
		display: block;
		width: 100%;
		max-width: 100%;
	}
	#wikiLeftArrow {
		transform: rotate(90deg);
		margin-top: 20px;
	}
	#wikiContent {
		overflow: auto;
	}
	#wikiContent, #wikiContent div, #wikiContent img, #wikiContent p, #wikiContent pre, #wikiContent iframe {
		max-width: 100%;
	}
	#wikiContent pre {
		white-space: pre-wrap;
	}
	#wikiTopicsOuterWrapper, #wikiTopicsPublicInnerWrapper, #wikiContent {
		max-height: none;
		overflow: visible;
	}


	/* Group Settings :: Mobile Responsive */
	#groupSettings {
		padding: 0px !important;
	}
	#groupSettingsActionButtons {
		top: 170px !important;
		right: 35px !important;
	}
	#groupSettingsActionButtons a {
		display: block; 
		margin: 10px 0px;
	}
	#groupSettings .main-flex-nav {
		box-shadow: none;
		height: auto;
	}
	#groupSettings .main-flex-nav li {
		margin: 0px 5px !important;
	}
	#groupSettings .main-flex-nav li a {
		font-size: 14px;
		margin: 0px;
		padding: 2px;
	}
	#groupSettings .small-box {
		width: 100%;
		margin: auto;
	}
	#groupSettings .flex-container, #groupSettings .left-col, #groupSettings .right-col  {
		display: block;
		width: 100%;
	}
	#groupSettings .main-box {
		display: block;
		width: 100% !important;
	}
	#groupSettings .mainbox-content {
		border-top: 1px solid #999;
		margin-top: 10px;
		padding-top: 10px;
		clear: both;
		display: block;
	}
	.mainbox-content h4, .mainbox-content label {
		text-align: left !important;
		width: 100%;
	}
	#teamSetupNotes, #gaDomainListBox {
		width: 100% !important;
	}
	#teamSetupTicketBlockKeywords, #teamSetupPublicDescription {
		width: 80% !important;
	}
	#groupSettingsCalendarCSS {
		width: 80%;
	}
	#profileUpdateFieldsHeader {
		margin-left: 0px;
	}
	#profileUpdateFields {
		margin-left: 0px;
	}
	#groupSettings .mainbox-content input[type="text"], #groupSettings .mainbox-content input[type="number"], #groupSettings .mainbox-content select {
		width: 80%;
	}

	/* Account Settings :: Mobile Responsive */
	#accountSettings .main-flex-nav {
		top:95px;
	}
	#accountSettings .main-flex-nav li a {
		padding: 10px 5px !important;
	}
	#accountSettings .mainbox-content {
		margin: 15px;
	}
	#accountSettings #googleAerialVideo video {
		right: 4% !important;
		width: 150px !important;
	}
	#accountSettings #security-panel {
		width: 85%;
	}
	#accountSettings #accountSettingsLeftNav {
		display: none;
	}
	#accountSettings #settingsTableWrapper {
		display: block; 
		width: 100%;
	}
	#settingsTableWrapper td, #accountSettings #security-panel #changePasswordTable td, #accountSettings #integrations-panel #integrationsPanelTable td {
		width: 100%;
		display: block;
		text-align: left !important;
	}
	#settingsTableWrapper td:first-child {
		font-weight: bold;
	}
	#accountSettings #settingsTableWrapper .tallSelect {
		max-width: 80%;
	}
	#accountSettings #settingsTableWrapper textarea {
		max-width: 86%;
	}
	#accountSettings #userInterfaceCSS {
		width: 55% !important;	
	}
	#accountSettings .areCalledLabel, #accountSettings .isCalledLabel {
		display: block;
	}
	#accountSettings #accountSettingsShowTZtext {
		display: block;
		line-height: 36px;
	}
	#accountSettings #currentLocalTime {
		margin: 7px 2px;
	}
	#accountSettings #editActivityTypesWrapper a {
		float: left;
		clear: both;
		margin: 5px 0px !important;
	}
	#accountSettings #dailySummaryDate {
		display: block;
		margin-bottom: 12px;
	}
	#accountSettings #doNotEmailDomains {
		width: 80% !important;
	}	
	#addContactFormFieldsRow {
		display: none;
	}



	#accountSettings #integrationsPanelTable {
		table-layout: fixed;
	}
	
	#accountSettings #integrationsPanelTable td:nth-child(2) {
		padding-top: 0px;
	}
	#accountSettings #zoomIntegrationDetailsTD {
		padding-top: 5px;
	}
	#zoomIntegrationDetailsTD .ui-state-default {
		float: left;
		clear: both;
		margin-top: 5px;
	}
	#accountSettings #shopifyFields input[type=text] {
		width: auto !important;
	}
	#accountSettings #zoomConnected {
		display: block;
	}
	#accountSettings .shopifyLabel, #accountSettings .openAIlabel, #accountSettings .companiesHouseLabel {
		display: block;
	}
	#accountSettings #openAIsecretKey {
		width: 55%;
	}
	#sharedAccessGroupsTD, #sharedAccessAssignmentTD {
		display: block;
		width: 100%;
	}
	#accountSettings #subscriptionPanelWrapperTable td, #accountSettings #referAFriendInstructionsTable td {
		width: 100%;
		display: block;
		text-align: left !important;
		margin-bottom: 15px;
	}
	#accountSettings #subscriptionPanelWrapperTable .newBox {
		margin: auto !important;
	}
	#accountSettings #subscriptionPanelWrapperTable #subscriptionButtonWrapper {
		text-align: center;
	}
	#accountSettings #referAFriendHeaderImage, #accountSettings #referAFriendAffiliateMessage {
		width: 300px;
	}
	#referAFriendRedemptionInstructions {
		width: 93%;
	}

	 /* UI-dialog :: Mobile Responsive */
	.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-draggable.ui-dialog-buttons {
		width: 95% !important;
		left: 2.5% !important;
		top: 5vh !important;
		height: min-content !important;
	}
	.ui-dialog-buttonset button {
		padding: 10px !important;
	}
	
	/* 2FA */
	.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-draggable.ui-resizable {
		width: 85% !important;
		left: 2.5% !important;
	}
}
/* End First Responsive */


/* For narrow vertical phone */
@media screen and (max-width: 450px) {
	#buildAndSendEmailWrapper #cke_emailMessage {
		width: auto !important;
	}
	#accountSettings #settingsTableWrapper .tallSelect {
		max-width: 300px;
	}
}