/* COLOR PALETTE */
	:root {
		--subhead-gray: #FAFAFA;
		--background-gray: #F3F3F3;
		--light-gray: #D6D9E2;
		--gray: #6F7288;
		--text-gray: #343943;

		--light-purple: #F9F6FD;
		--medium-purple: #D2C2E9;
		--purple: #8753D4; /* brand purple */
		--dark-purple: #45297A;
		--black-purple: #311D58;

		--light-blue: #5cb0f2;
		--blue: #3674e6;
		--dark-blue: #2d5fbd;
		--darker-blue: #234a93;
		--darkest-blue: #193569;

		--light-orange: #ff9167;
		--light-red: #FFD6CC;
		--red: #FF3300;
		--dark-red: #A33C23;
		--report-red: #FF5E36;	

		--light-yellow: #FFC657;
		--yellow: #FFD800;
		--report-yellow: #FFB440;	

		--light-green: #8FF187;
		--green: #3FFF1D;
		--report-green: #68E153;

		--light-magenta: #E449B5;
		--magenta: #D11F8B;

		--light-pink: #FF5F8B;
		--pink: #FF2F58;

		--light-aqua: #4FE4C2;
		--aqua: #23D19D;

		--light-sky: #4FD1E7;
		--sky: #23B3D5;

		--drop-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12);
		--drop-shadow-smaller: 0 3px 6px 0 rgba(0, 0, 0, 0.12);

		--default-font: 'Open Sans', sans-serif;

		--bold: 700;
		--semibold: 600;
		--regular: 400;
		--light: 300;

		--base: 4px;
	}

/* helper classes */
	.bold {
		font-weight: var(--bold);
	}
	.semibold {
		font-weight: var(--semibold);
	}
	.default-font {
		font-family: 'Open Sans', sans-serif;
	}
	.plain-label {
		font-weight: 400;
	}
	label {
		font-weight: 400;
		color: var(--text-gray);
		margin-bottom: 2px;
	}

/* OVERALL SITE STYLES */
	html {
		font-size: 14px;
		font-family: 'Open Sans', sans-serif;
	}
	body {
		background-color: var(--background-gray);
		color: var(--text-gray);
		font-family: 'Open Sans', sans-serif;
	}
	h1,
	h2,
	.form-group .ql-snow .ql-edit h1,
	.form-group .ql-snow .ql-edit h2 {
		color: var(--text-gray);
	}
	h1,
	.form-group .ql-snow .ql-edit h1 {
		font-size: 18px;
		font-weight: 600;
		margin-top: 0;
	}
	h2,
	.form-group .ql-snow .ql-edit h2,
	th {
		font-size: 14px;
		font-weight: 600;
	}
	h2 {
		margin-top: 10px;
		margin-bottom: 5px;
	}
	.underline-section {
		border-bottom: 1px solid var(--light-gray);     
	}
	.underline-section h2 {
		margin-top: 0;
	}
	.text-muted {
		color: var(--gray);
	}

	.ql-edit.interaction-body {
		margin-top: 10px;
		padding: 0;
		white-space: normal;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.ql-edit.interaction-body ul>li {
		list-style-type: disc;
	}
	.ql-edit.interaction-body ol>li {
		list-style-type: decimal;
	}
	.ql-edit.interaction-body ol>li>ol>li {
	    list-style-type: lower-latin;
	}
	.ql-edit.interaction-body ol>li>ol>li>ol>li {
	    list-style-type: lower-roman;
	}	
	
	.form-control .ql-container,
	.form-control .ql-edit {
		color: var(--text-gray);
		font-size: 14px;
		font-family: 'Open Sans', sans-serif;
	}

	li .dropdown-toggle:hover{
		color: var(--gray) !important;
	}

	a,
	a:visited {
		color: var(--dark-purple);	
	}
	a:hover,
	a:active,
	a:focus {
		color: var(--dark-purple);
		text-decoration: underline;
	}

/* Education Dropowns */
	.btn-education,
	.education-dropdown>li>a.btn-education,
	a.btn-education {
		color: var(--purple);
		background-color: #0000;
		outline: none;
		border: none;
		padding: 6px 12px;
		display: inline-block;
	}
	.education-dropdown>li:before {
	  content: "\2022";
	  color: var(--dark-purple);
	  font-weight: bold;
	  display: inline-block;
	  font-size: 24px;
	  margin-right: -10px;
	  margin-left: 6px;
	  vertical-align: text-top;
	}
	.btn-education:hover,
	.education-dropdown>li>a.btn-education:hover {
		color: var(--dark-purple);
		background-color: #0000;
	}
	.education-dropdown-btn {
		border: 0;
		background-color: #0000;	
		padding: 0 16px;
	}
	.education-dropdown {
		width: 320px;
		margin-left: -260px;
		padding: 15px;
	}
	.education-dropdown button,
	.education-dropdown>li>a {
		margin-bottom: 0;
	}

/* Modals */
	.modal-header {
		padding: 20px;
		border: none;
	}
	.modal-header h2 {
		border-bottom: 1px solid var(--light-gray);
		line-height: 20px;
		margin-top: 0;
	}
	.modal-header .close {
		top: 0;
		right: 0;
		height: 18px;
		opacity: 1;
	}	
	.modal-header .close svg,
	.modal-header .close img {
		height: 14px;
		fill: var(--purple);
	}	
	.modal-body {
		padding: 0 20px 20px 20px;
	}
	.modal-dialog,
	.modal-content {
		max-height: calc(100% - 60px);
		overflow: auto;
		border-radius: 5px;
	}
	.modal-open .modal {
		overflow-y: hidden; /* overrides Bootstrap*/
	}
	
	.modal-footer {
		background-color: var(--light-gray);
		padding: 10px 20px;
		border-radius: 0 0 6px 6px;
	}
	
	/* modal-style footers used on pages */
	.content-section .form-footer {
		text-align: right;
		padding: 8px 15px;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
		background-color: var(--light-gray);
		margin: 30px -15px -15px -15px;
	}

.inner-gray-box {
	padding: 15px;
	background-color: var(--background-gray);
	position: relative; 
	display: block;
}

.dropdown:focus,
.btn.dropdown-toggle:focus {
	outline: none;
}
.ellipses-dropdown-toggle {
	color: var(--gray);
	border: none;
	background-color: transparent;
	box-shadow: none !important;
	padding: 12px;
}
.ellipses-dropdown {
	color: var(--purple);
	top: 32px;
	cursor: pointer;
}
.expand-link,
.minimize-link {
	cursor: pointer;	
	font-weight: var(--semibold);
	color: var(--purple);
}
.expand-link svg,
.minimize-link svg{
	fill: var(--purple);
}
.expand-link:hover,
.minimize-link:hover {
	color: var(--purple);
	text-decoration: underline;
}
.detail-button-link {
	margin: -6px -12px 0 0;
}

/* LISTS */
	.list-page-navigation {
		padding-top: 4px;
	}
	@media (max-width: 767px) {
		.list-page-navigation {
			padding-top: 0;
			display: inline-block;
		}
	}
	.pagination-btn {
		padding: 2px 8px;	
		height: 26px;
		vertical-align: baseline;
	}
	.pagination-btn>img {
		margin-bottom: 3px;
	}

/* CONTACTS LIST */
	.contact-search-suggestion {
		padding: 5px;
		border-bottom: 1px solid var(--light-gray);
		cursor: pointer;
	}
	.contact-search-suggestion:hover {
		background-color: var(--purple);
	}
	.contacts-photo-div,
	.reminder-type-icon {
		margin-left: auto;
		margin-right: auto;
		width: 40px;
		height: 40px;
		overflow: hidden;
		color: var(--gray);
		line-height: 0;
		border-radius: 50%;
		border: 1px solid var(--light-gray);
	}
	.contacts-photo-div img {
		max-width: 40px;
		max-height: 40px;
	}
	.contact-initials-div {
		border-radius: 50%;
		height: 40px;
		width: 40px;		
		font-size: 1.25rem;
		color: var(--dark-purple);
		padding: 20px 0;
	}
	/* This all fails WCAG 2.0 AA standards, but it's functioning as a picture not conveying necessary information. */
	.contact-initials-div,
	.contact-initials-div>.contact-initials {
		background-color: var(--light-purple);
	}

/* Progress Bars */
	.progress_bar {
		width: 350px;
		border-radius: 10px;
		border: 1px solid var(--text-gray);
		height: 20px;
		display: inline-block;
		overflow: hidden;
		text-align: center;
		font-weight: bold;
		position: relative;
		top: 5px;
		left: 25px;
	}
	.progress_bar_fill {
		position: absolute;
		left: 0px;
		top: 0px;
		height: 100%;
		background-color: var(--lighter-purple);
	}
	.progress_bar_text {
		position: absolute;
		width: 100%;
	}
	.progress-bar-div {
		position: relative;
		padding-top: 0;
		padding-bottom: 0;
		margin-top: 20px;
	}
	.progress-bar-step {
		display: block;
		position: relative;
		color: var(--dark-purple);
	}
	.progress-bar-step>span {
		position: relative;
		font-size: 0.8125rem;
		width: 148px;
		display: inline-block;
		margin: 0 -2px;
	}
	.progress-bar-step-circle {
		display: inline-block;
		height: 10px;
		width: 148px;
		position: relative;	
		margin: 0 -2px;
		background-color: #FFF;
		border-top: 1px solid var(--dark-purple);
		border-bottom: 1px solid var(--dark-purple);
	}
	.progress-bar-sub-step {
		display: inline-block;
		height: 10px;
		width: 148px;
		position: relative;	
		margin: 0 -2px;
		background-color: #FFF;
		border-top: 1px solid var(--dark-purple);
		border-bottom: 1px solid var(--dark-purple);
	}
	.progress-bar-step-current {
		font-weight: bold;
		background-color: var(--dark-purple);
	}
	.progress-bar-step-circle-current {
		background-image: linear-gradient(0deg, #8753D4 0%, #8753D4 100%) !important;
		color: #FFF;
		border: 1px solid var(--dark-purple);
	}
	.progress-bar-step-circle-past {
		color: var(--gray);
	}

/* Old Loading Gif Styles*/
	.loading-overlay img {
		margin-top: 15px;
	}
	.loading-overlay {
		position: static;
		top: 40%;
		margin-left: auto;
		margin-right: auto;
		height: 130px;
		width: 130px;
		background-color: rgba(255,255,255,0.5);
		border-radius: 50%;
		text-align: center;
		padding: 10px;
		z-index: 10000;
	}
	.loading-overlay-parent {
		display: none;
		position: fixed;
		height: calc(100% + 20px);
		padding-top: 15%;
		width: 100%;
		z-index: 9999;
	}

/* New Loading Gif Styles*/
	.loading-overlay-large img {
		max-width: 225px;
	}
	.loading-overlay-large {
		text-align: center;
		position: static;
		top: 40%;
		z-index: 10000;
	}
	.loading-overlay-small img {
		max-width: 50px;
	}
	.loading-overlay-small {
		position: static;
		top: 40%;
		margin-left: calc(50% - 25px);
		width: 60px;
		text-align: center;
		padding: 10px;
		z-index: 10000;
	}

/* Miscellaneous */
	.lead-text {
		max-width: 600px;
	}
	.contact-edit-icon {
		display: inline-block;
		margin-left: 6px;
		cursor: pointer;
	}
	.table.contact-table>tbody>tr>th {
		border-top-width: 0;
	}
	.table.contact-table>tbody>tr.spacing>th {
		padding: 2px; /* This sets the space between rows*/
	}
	.onboarding_container{
		position: fixed;
		z-index: 10000;
		left: 20%;
		width: 60%;
		top: 10%;
		border-radius: 10px;
		background-color: #FFFFFF;
		border: 2px solid var(--darkest-blue);
		display: none;
		padding: 0px 15px 15px 15px;
	}
	.onboarding_number{
		width: 20px;
		height: 20px;
		border-radius: 10px;
		background-color: var(--darkest-blue);
		color: #FFF;
		text-align: center;
		font-weight: bold;
	}
	.onboard-cadence-input {
		margin-left: 5px;
		text-align: left;
		display: inline-block;
		padding-left: 2px;
		padding-right: 2px;
	}

	.contact-button-md{
		position: absolute;
		top: -3px;
	}
	.clear-datepicker{
		cursor: pointer;
		position: absolute;
		right: 6px; 
		top: 9px;
	}
	.clear-datepicker svg {
		height: 12px;
	}
	.patterns-design-element {
		margin-top: 16px;
		padding-bottom: 8px;
		border-bottom: 1px solid var(--gray);
	}
	.deal-source-label {
		color: #FFF !important;
		background-color: var(--lighter-purple);
		padding: 4px;
		border-radius: 3px;
	}
	@media (max-width: 767px) {
		.deal-source-label-div {
			margin-top: 14px;
			padding: 8px;
		}
	}
	@media (min-width: 768px) {
		.deal-source-contact {
			padding: 5px;
			width: 120px;
			min-width: 112px;
			padding-bottom: 0;
		}
		.deal-source-label-div {
			padding: 8px;
			margin-bottom: -20px;
		}
	}
	.table>tbody+tbody,
	.table>tbody>tr>td,
	.table>tbody>tr.contact-tr>td {
		border: 0;
	}
	.table>tbody>tr.spacing>td {
		padding: 2px;
	}

	.job-div,
	.each-location-div {
		margin-bottom: 1em;
		width: calc(100% - 36px);
	}
	.dropdown-menu.select-format i {
		font-size: 1.125rem;
		min-width: 18px;
	}
	.form-control.quickadd-notes {
		display: inline-block;
		width: calc(100% - 110px);
		height: auto;
		padding: 5px 10px;
		line-height: 1.3;
		vertical-align: bottom;
		float: right;
	}
	.modal.quickadd {
		display: block;
		max-width: 650px;
		margin: auto;
		height: fit-content;
		padding: 15px;
		background-color: rgb(255, 255, 255);
		-webkit-background-clip: padding-box;
		background-clip: padding-box;
		border: 1px solid rgba(0, 0, 0, 0.2);
		border-radius: 6px;
		outline: 0px;
		overflow: visible;
	}

	.hover-edit-icon {
		color: var(--dark-blue);
		padding: 0 4px;
		font-size: 1rem;
	}
	.contact-detail-lock {
		cursor: pointer;
		height: 1rem;
	}
	.svg-arrow-right {
		transform: rotate(90deg);
	}

/* Sub-Navigation Tabs / Settings */
	.subnav-menu {
		list-style: none;
		margin: 0;
		padding: 0 30px;
		background-color: var(--subhead-gray);
		white-space: nowrap;
		height: 54px;
		border-bottom: none;
	}
	.subnav-menu .nav-tabs {
		border-bottom: none;
	}
	.nav-tabs>li,
	.tab>.subnav-li {
		display: inline-block;
		float: none;
		margin-right: 24px;
	}	
	.subnav-li {
		margin-top: 11px;
	}
	.nav-tabs>li.subnav-li:last-child {
		margin-right: 0;
	}
	.nav-tabs>li>a {
		margin-right: 0;
		text-decoration: none;
		cursor: pointer;
		border-radius: 4px;
		padding: 5px 10px;
		border: 1px solid transparent;
	}
	@media (max-width: 767px) {
		.nav-tabs>li>a {
			display: inline-block;
		}
	}
	.nav>li>a:hover,
	.nav>li>a:focus,
	.nav-tabs>li>a:hover,
	.nav-tabs>li.active,
	.tablinks.active {
		text-decoration: none;
		background-color: transparent;
	}
	.nav-tabs>li.active>a,
	.nav-tabs>li.active>a:active,
	.nav-tabs>li.active>a:focus,
	.nav-tabs>li.active>a:hover,
	.nav-tabs>li.active>a:visited,
	.nav-tabs>li.active {
		border-color: var(--gray);
	}
	.nav>li>a:hover,
	.nav>li>a:focus,
	.nav-tabs>li>a:hover,
	.nav-tabs>li.active,
	.tablinks.active {
		text-decoration: none;
		background-color: transparent;
	}
	.subnav-li a {
		outline: none;
		color: var(--text-gray);
		background-color: transparent;	
		font-weight: 400;		
	}
	.nav-tabs>li.subnav-li.active>a {
		border: 1px solid var(--gray);
		color: var(--text-gray);
		background-color: var(--subnav-gray);	
		font-weight: 600;
	}
	.subnav-menu button,
	.subnav-menu a {
		margin-top: 10px;
	}
	.subnav-menu h1 {
		margin-top: 16px;
	}
	.subnav-menu .btn-subnav {
		margin-top: 0;
	}

	/* Dropdown Subnavs */
	.subnav-menu.dropdown,
	.subnav-menu .dropdown {
		overflow: visible;
	}
	.subnav-menu>.dropdown {
		display: inline;
	}
	/* Used in collapsed subnavs, such as on account settings */
	.subnav-menu .dropdown-menu {
		left: 30px;
	}
	.subnav-menu .pull-right .dropdown-menu {
		left: unset;
	}
	.reports-subnav-container .dropdown-menu {
		left: 0;
	}
	@media (max-width: 767px) {
		.subnav-menu {
			padding: 0 15px;
		}
		.subnav-menu .dropdown-menu {
			left: 15px;
		}
		.reports-subnav-container .dropdown-menu {
			left: 0;
		}
	}
	.subnav-menu.dropdown li,
	.subnav-menu .dropdown li {
		margin: 6px 0;
	}
	.subnav-menu button>svg {
		height: 12px;
		fill: var(--purple);
	}
	.subnav-menu button.btn-primary svg {
		fill: #FFF;
	}
	.subnav-menu .btn-secondary .svg-caret-down {
		color: var(--purple);
	}
	.subnav-menu .dropdown-item {
		margin-top: 0;
	}
	.dropdown-menu {
		cursor: pointer;
	}

/* Contact Statuses */
	.status-icon {
		height: 15px;
		width: 15px;
		border-radius: 15px;
		margin-right: 6px;
		background-color: var(--text-gray);
		display: inline-block;
		vertical-align: text-top;
		margin-top: 2px;		
	}
	.health-label,
	a.health-label {
		display: inline-block;
		color: var(--text-gray);
	}
	.icon-attention,
	a.icon-attention {
		background-color: var(--red);	
	}
	.icon-good {
		background-color: var(--green);	
	}
	.icon-upcoming {
		background-color: var(--yellow);	
	}

/* Overdue reminder indicator */
	.label-attention.overdue {
		fill: var(--red);
	}
	.label-attention.overdue svg {
		vertical-align: bottom;
	}

/* Global Reminder Modal Styles */
	.add-cc-button-div {
		margin-bottom: 15px;
	}
	.add-cc-button {
		margin-left: -12px;
		padding-bottom: 12px;
	}
	.delete-cc {
		position: relative;
		padding-top: 7px;
	}
	.delete-cc svg {
		fill: var(--purple);
	}


/* White Box Sections*/
	.content-section {
		background-color: #FFF;
		border-radius: 5px;
		padding: 15px;
		margin-bottom: 40px;
	}

/* Relationship Strengths */
	.relationship-strength-image {
		width: 30px;
		color: var(--gray);
		font-size: 2.125rem;
		-webkit-filter: grayscale(100%);
		filter: grayscale(100%);
	}
	.relationship-strength-image.editable {
		color: var(--purple);
		font-size: 2.125rem;
		cursor: pointer;
		-webkit-filter: grayscale(0%);
		filter: grayscale(0%);
	}
	.relationship-strength-image.editable:hover {
		color: var(--dark-purple);
		filter: brightness(75%) contrast(150%);
		-webkit-filter: brightness(75%) contrast(150%);
	}

/* JS Flash Message Styles */
	.alert-wrapper{
		position: fixed;
		left: 50%;
		text-align: left;
		z-index: 1051;
	}
	.alert-wrapper .alert {
		position: relative;
		left: -50%;
		font-weight: 600;
		padding: 14px;
		color: var(--text-gray);
		max-width: 100%;
	}
	.alert-wrapper .alert-message {
		margin: 0 8px;
		vertical-align: top;
		max-width: calc(100% - 58px);
		display: inline-block;
		min-width: 150px;
	}
	.alert-dismissible .close {
		top: 0;
		right: 0;
		height: 14px;
		opacity: 1;
		color: var(--text-gray);
	}
	.alert-dismissible .close svg,
	.alert-dismissible .close img {
		height: 14px;
		vertical-align: top;
	}
	
	.alert-success {
		background-color: var(--light-purple);
		border: solid 1px var(--gray);
	}
	.alert-success .svg-check {
		fill: var(--purple);
		height: 20px;
		width: 14px;
		vertical-align: top;
	}
	.alert-danger {
		background-color: var(--light-red);
		border: solid 1px var(--gray);
	}
	.alert-danger .svg-warning {
		fill: var(--red);
	}
	.alert-warning {
		background-color: #FFF;
		border: 1px solid #F6C143;
		color: var(--text-gray);
	}
	@media (max-width: 767px) {
		.alert-wrapper .alert-message {
			max-width: calc(100% - 78px);
		}
		.alert-wrapper .close {
			padding: 10px;
			top: -10px;
			right: -10px;
			height: 34px;
		}
	}

/* Post-Onboarding Tutorial Popovers */
	.popover {
		background-color: var(--light-purple);
		border: 1px solid var(--dark-purple);
		font-family: 'Open sans';
		z-index: 1000;
	}
	.popover .popover-title {
		background-color: var(--light-purple);
		border-bottom: none;
	}
	.popover .popover-content .btn-icon {
		margin-top: -10px;
		margin-right: -10px;
	}
	.popover .popover-content .btn-icon:hover {
		background-color: transparent;
	}
	.popover.bottom .arrow:after,
	.popover.top .arrow:after {
		border-top-color: var(--light-purple);
		border-bottom-color: var(--light-purple);		
	}
	.popover.top .arrow {
		border-top-color: var(--dark-purple);
	}
	.popover.bottom .arrow {
		border-bottom-color: var(--dark-purple);
	}
	.popover.right .arrow:after,
	.popover.left .arrow:after {
		border-right-color: var(--light-purple);
		border-left-color: var(--light-purple);
	}	
	.popover.right .arrow {
		border-right-color: var(--dark-purple);
	}
	.popover.left .arrow {
		border-left-color: var(--dark-purple);
	}
	.popover .btn-link,
	.popover a {
		color: var(--dark-purple);
		margin-bottom: 0;
	}
	.popover .popover-text {
		display: inline-block;
		margin-top: 10px;
		text-align: center;
	}
	.popover .popover-text h2 {
		margin: 0 0 10px;
	}
	.popover .popover-text a {
		color: var(--dark-purple);
		text-decoration: underline;
	}	
	.popover .close-tutorial-div {
		margin: 10px;
	}

/* Reorder Reports Modal */
	.reorder-items-row {
		background-color: var(--background-gray);
		margin-bottom: 8px;
		height: 52px;
	}
	.reorder-items-row .reorder-arrows {
		width: 40px;
		display: inline-block;
	}
	.reorder-items-row .reorder-item-name {
		display: inline-block;
		padding-top: 16px;
		vertical-align: top;
	}
	.reorder-items-row .reorder-arrows .up-arrow {
		height: 30px;
		padding-top: 6px;
	}
	.reorder-items-row .reorder-arrows .down-arrow {
		height: 30px;
		padding-bottom: 6px;
	}
	.reorder-items-row .reorder-arrows svg,
	.reorder-items-row .reorder-arrows img {
		cursor: pointer;
		width: 30px;
		height: 14px;
	}
	.reorder-items-row .reorder-arrows .inactive svg {
		fill: var(--gray);
		cursor: default;
	}

/* Form Elements */
	::placeholder {
		color: var(--light-gray) !important;
	}
	input.form-control[type="text"],
	input.form-control[type="textarea"],
	textarea.form-control,
	input.form-control[type="email"],
	input.form-control[type="password"],
	select.form-control {
		border: 1px solid var(--gray);
		background-color: var(--subhead-gray);
	}
	input.form-control[type="text"]:focus,
	input.form-control[type="textarea"]:focus,
	textarea.form-control:focus,
	input.form-control[type="email"]:focus,
	input.form-control[type="password"]:focus,
	select.form-control:focus {
		-moz-box-shadow: none;
		-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(135 83 212 / 60%);
		box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(135 83 212 / 60%);
		border: 1px solid var(--dark-purple);
	}
	input.form-control.quick-search {
		border: 1px solid var(--dark-purple);
		border-radius: 20px;
		padding-right: 23px;
	}

	/* input hint */
	.optional { 
		font-weight: 400;
	}
	select.form-control option {
		border-radius: 4px;
		margin: 2px 0;
		padding: 4px;
	}
	.form-group {
		margin-bottom: 5px;
	}

/* VALIDATION */
	input:invalid {
		border: solid 1px var(--red);
	}	
	.error-text {
		font-weight: var(--semibold);
		color: var(--dark-red);
	}

/* Checkboxes */
	/* Base for checkbox label styling */
	[type="checkbox"]:not(:checked),
	[type="checkbox"]:checked {
		position: absolute;
		left: 0;
		opacity: 0.01;
	}
	[type="checkbox"]:not(:checked) + label,
	[type="checkbox"]:checked + label {
		position: relative;
		padding-left: 33px;
		cursor: pointer;
	}
	[type="checkbox"]:not(:checked):disabled + label,
	[type="checkbox"]:checked:disabled + label {
		cursor: not-allowed;
	}
	/* checkbox aspect */
	[type="checkbox"]:not(:checked) + label:before,
	[type="checkbox"]:checked + label:before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 20px;
		height: 20px;
		border: 2px solid var(--purple);
		background: #FFF;
	}

	/* checked mark aspect */
	[type="checkbox"]:not(:checked) + label:after,
	[type="checkbox"]:checked + label:after {
		content: url('/static/img/svgs/checkbox-checked-purple.svg');
		position: absolute;
		top: 0;
		left: 0;
		line-height: 0;
		-webkit-transition: all .2s;
			transition: all .2s;
	}

	/* checked mark aspect changes */
	[type="checkbox"]:not(:checked) + label:after {
		opacity: 0;
	}
	[type="checkbox"]:checked + label:after {
		opacity: 1;
	}

/* Radios */
	label {
		display: inline-block;
	}
	input[type="radio"] {
	  position: relative;
	}
	input[type="radio"]:checked::before {
	  content: "";
	  width: 100%;
	  height: 100%;
	  background-color: var(--purple);
	  border-radius: 50%;
	  position: absolute;
	  left: 0;
	  top: 0;
	}
	input[type="radio"]:checked::after {
	  background-color: var(--purple);
	  content: "";
	  width: calc(30%);
	  height: calc(30%);
	  background-color: #FFF;
	  border-radius: 50%;
	  position: absolute;
	  transform: translate(-50%, -50%);
	  left: 50%;
	  top: 50%;
	}

/* Toggles/Switches */
	/* Override other checkbox styles */
	[type="checkbox"]:not(:checked) + label.onoffswitch-label,
	[type="checkbox"]:checked + label.onoffswitch-label {
		padding-left: 0;
	}
	[type="checkbox"]:not(:checked) + label.onoffswitch-label:before,
	[type="checkbox"]:checked + label.onoffswitch-label:before,
	[type="checkbox"]:not(:checked) + label.onoffswitch-label:after,
	[type="checkbox"]:checked + label.onoffswitch-label:after {
		content: '';
		border: none;
		background: none;
	}
	.onoffswitch {
		display: inline-flex;
		position: relative;
		vertical-align: top;
		width: 30px;
		-webkit-user-select:none; 
		-moz-user-select:none;
		-ms-user-select: none;
	}
	.onoffswitch-checkbox {
		display: none;
	}
	.onoffswitch-label {
		overflow: hidden; 
		cursor: pointer;
		border-radius: 20px;
		margin-bottom: 0;
	}
	.onoffswitch-inner {
		display: block;
		width: 200%; 
		margin-left: -100%;
		transition: margin 0.3s ease-in 0s;
	}
	.onoffswitch-inner:before {
		float: left; 
		width: 50%; 
		height: 18px;
		content: "On";
		color: var(--purple);
		background-color: var(--purple);
	}
	.onoffswitch-inner:after {
		float: left; 
		width: 50%; 
		height: 18px;
		content: "Off";
		background-color: var(--gray);
		color: var(--gray);
	}
	.yes-no.onoffswitch-inner:before {
		content: "Yes";
	}
	.yes-no.onoffswitch-inner:after {
		content: "No";
	}
	.onoffswitch-switch {
		width: 14px;
		height: 14px;
		border-radius: 14px;	
		position: absolute;
		right: 13px;
		transition: all 0.3s ease-in 0s;
	}
	.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
		margin-left: 0;
	}
	.onoffswitch-checkbox + .onoffswitch-label .onoffswitch-switch {
		background-color: #FFF;
		height: 14px;
		top: 2px;
	}
	.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
		right: 3px;
	}

/* crunchbase enrichment icon */
	.crunchbase-container:hover {
		text-decoration: none;
	}

/* See more/see less text fields */
	.see-more-field {
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		height: 60px;
		position: relative;
	}
	.see-more-field>.field-value,
	.topbar-field>.field-value {
		display: inline;
		overflow: hidden;
	}
	.see-more-field>.see-more,
	.see-more-field>.see-less {
		text-align: left;
	}
	.see-more-field>.see-more {
		width: 100%;
		position: absolute;
		top: 40px;
		left: 0;
		text-align: left;
	}
	.see-more-field>.see-less {
		margin-top: 20px;
		margin-left: -12px;
	}

/* Add deal modal/Recommender styles */
	.recommender-div {
		border: 1px solid var(--gray);
		max-height: 50vh;
		max-width: 100%;
		width: 100%;
		overflow: auto;
		padding: 0;
		position: relative;
	}
	.recommended-company {
		background-color: #FFF;
		text-overflow: ellipsis;
		white-space: nowrap;	
		overflow: hidden;
		width: 100%;
		height: 80px;
		text-align: left;
		background-image: none;
		border: none;
		border-bottom: 1px solid var(--light-gray);
		padding-top: 9px;
		padding-bottom: 5px;	
	}
	.recommended-source {
		display: block;
		background-color: #FFF;
		text-overflow: ellipsis;
		white-space: nowrap;	
		overflow: hidden;
		width: 100%;
		height: 40px;
		text-align: left;
		background-image: none;
		border: none;
		border-bottom: 1px solid var(--light-gray);
		padding: 5px;
		z-index: 101;
		position:relative;
	}
	.recommended-company:focus,
	.recommended-company:hover,
	.recommended-source:focus,
	.recommended-source:hover {
		background-color: var(--background-gray)!important;
		outline: none;
	}
	.recommended-company .image-div {
		width: 55px;
		height: 40px;
		float: left;
		margin-right: 12px;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
	}
	.recommended-source p {
		margin-top: 4px;
	}
	.recommended-company p {
		margin-top: 4px;
	}
	.recommended-company .description {
		color: var(--gray);
		margin-top: 0;
		text-overflow: ellipsis;
		overflow: hidden;
		margin-right: 20px;	
	}

/* Styles for Text Formatting */
	.interaction-notes {
		height: 100%;
		min-height: 100px;
		max-height: 100px;
		border-top-right-radius: 0;
		border-top-left-radius: 0;	
		overflow: auto;
		background-color: var(--subhead-gray);
		border: 1px solid var(--gray);
		border-bottom: 1px solid var(--light-gray);
	}
	.interaction-notes blockquote,
	.interaction-notes div {
		min-height: 20px;
	}
	/* Modifies styles added via QuillJS Snow theme */
	.form-group .ql-container.ql-snow {
		border: 1px solid var(--gray);
	}	
	.form-group .ql-toolbar.ql-snow {
		border: 1px solid var(--gray);
		border-bottom-color: var(--light-gray);
		border-top-right-radius: 4px;
		border-top-left-radius: 4px;	
	}
	.form-group .ql-toolbar.ql-snow .ql-formats {
		padding-right: 9px;
		margin-right: 9px;
		border-right: 1px solid var(--gray);
	}
	.ql-toolbar.ql-snow .ql-formats:last-child {
		border-right: unset;
	}
	.form-group .ql-snow.ql-toolbar button:hover,
	.form-group .ql-snow.ql-toolbar button:hover .ql-stroke,
	.form-group .ql-snow.ql-toolbar .ql-picker-label:hover,
	.form-group .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
	.form-group .ql-snow.ql-toolbar .ql-picker-item:hover,
	.form-group .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke {
		color: var(--black-purple)!important;
		stroke: var(--black-purple)!important;
	}
	.form-group .ql-snow.ql-toolbar button:hover .ql-fill {
		fill: var(--black-purple);
	}
	.btn-group .dropdown-toggle.text-edit-dropdown {
		user-select: none;
		cursor: pointer;
	}
	.btn-group.open .dropdown-toggle.text-edit-dropdown {
		box-shadow: unset;
	}
	.expand-icon {
		position: relative;
		right: 16px;
		bottom: -32px;
		color: var(--text-gray);
	}
	.ql-container.ql-snow>.ql-tooltip.ql-editing {
		left: 20px!important;
	}