/* || Theme Overrides */
:root {
	--black: #1B2225;
	--content-max-width: 1500px;
	--darkGrey: #c0c0c0;
	--darkRed: #690020;
	--dashboard-max-width: 1100px;
	--green: #0AE43A;
	--lightGreen: #24de47;
	--grey: #F1F1F1;
	--gun-metal: #323F46;
	--helpHighlight: #ffd700;
	--lightRed: #ce3c50;
	--primary-btn-size: 16pt;
}

/* || Light Theme */
body.light-theme {
	--accent: var(--red);
	--acw: #ffe8c7;
	--banner-color: #0084ff;
	--banner-button-color: #0059ab;
	--border-color: #D8D8D8;
	--btn-hover: var(--grey);
	--call-type-bg: var(--grey);
	--contextMenu: #737373;
	--editMenu: #fff;
	--editMenuBorder: var(--black);
	--font-color: 0, 0, 0;
	--font-color-trans: #0000006b;
	--footer-bg: transparent;
	--paymentPromised: #deb02421;
	--popup-bg: var(--red);
	--popup-color: var(--black);
	--primary: #fff;
	--primary-border: #D8D8D8;
	--nav-accent-bg: #fff;
	--nav-accent-text: var(--red);
	--nav-background: var(--red);
	--percentNeg: var(--red);
	--percentPos: var(--darkGreen);
	--row-line: 1px solid #0000004d;
	--secondary: var(--black);
	--secondaryAccent: var(--red);
	--secondary-color: #fff;
	--section-bg: #fff;
	--scrollbar-track: #E2E2E2;
	--scrollbar-btn: #B5B5B5;
	--sms-outbound: var(--red);
	--sms-outbound-text: #fff;
	--table-even: #0000000d;
	--table-total: #e3e3e3;
	--theme-background: #F2F2F0;
	--status-bar-border: none;
}

/* || Dark Theme */
body.dark-theme {
	--accent: #24de47;
	--acw: #ff9906;
	--banner-color: #0084ff;
	--banner-button-color: #0059ab;
	--border: 1px solid #ffffff4d;
	--border-color: transparent;
	--btn-hover: #48585e;
	--call-type-bg: var(--black);
	--contextMenu: var(--black);
	--darkGreen: #34CF6E;
	--editMenu: #333a3f;
	--editMenuBorder: #ffffff94;
	--error: var(--lightRed);
	--font-color: 255, 255, 255;
	--font-color-trans: #ffffff6b;
	--footer-bg: var(--gun-metal);
	--loader-color1: #fff;
	--loader-color2: #868686;
	--paymentPromised: #ffffff29;
	--percentNeg: #f79d9d;
	--percentPos: #6ce993;
	--popup-bg: var(--black);
	--popup-color: var(--black);
	--primary: var(--gun-metal);
	--primary-border: #616161;
	--nav-accent-bg: #FFC700;
	--nav-accent-text: var(--black);
	--nav-background: transparent;
	--red: #FF6363;
	--row-line: 1px solid #ffffff4d;
	--secondary: #fff;
	--secondaryAccent: #FFC700;
	--secondary-color: var(--black);
	--scrollbar-track: #435259;
	--scrollbar-btn: #ffffffa3;
	--sms-outbound: #fff;
	--sms-outbound-text: #000;
	--theme-background: var(--black);
	--table-total: #253036;
	--status-bar-border: 1px solid var(--primary-border);
}

/* Set date icon color */
body.dark-theme ::-webkit-calendar-picker-indicator {
	filter: invert(1);
}
/* Make loading image white */
body.dark-theme .loading img {
	filter: brightness(0) invert(1)
}

body.dark-theme .popup .loading img{
	filter: brightness(1);
}

body.dark-theme .select-search-options,
body.dark-theme .select-search-open input.select-search,
body.dark-theme .select-search-open .select-search-btn-wrapper {
	background: var(--black);
}

body.dark-theme .select-search-options button {
	color: rgb(var(--font-color));
}

body.dark-theme .select-search-option.selected {
	background: var(--primary);
}

/* || General --------------------- */

h1, h2, h3, h4, h5, h6,
p, span, div {
	color: rgb(var(--font-color));
}

p, button, div {
	font-weight: 300;
}

a,
a:not(.nav-link):visited,
a:not(.nav-link):focus {
	color: rgb(var(--font-color));
	transition: .2s ease-in-out;
}

a:hover {
	color: var(--secondaryAccent);
}

a i {
	transition: none;
}

.accent-color {
	color: var(--accent);
}

.accent-two-color {
	color: var(--secondaryAccent);
}

.toastify {
	border-radius: 3px 0 0 3px;
}

.dark-theme .toastify {
	color: black !important;
}

.toastify-right {
	right: 0;
	animation: .3s slideInLeft forwards;
}

@keyframes slideInLeft {
	0% {
		margin-right: -100vw;
	}
	100% {
		margin-right: 0;
	}
}

section {
	background: var(--theme-background);
}

p {
	margin: 0;
}

.flex-row {
	color: rgb(var(--font-color));
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}

.flex-row.center {
	justify-content: center;
}

h3 {
	font-family: Goldman, monospace;
}

i {
	transition: .3s ease-in-out;
}

.rotate i {
	transform: rotate(180deg);
}

.scroll {
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	margin-left: -5px;
	margin-right: -8px;
	padding-right: 6px;
}

::-webkit-scrollbar {
	background-color: var(--scrollbar-track);
	border-radius: 10px;
	height: 5px;
	width: 5px;
}
::-webkit-scrollbar-track {
	border-radius: 10px;
}
::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar-btn);
	border-radius: 10px;
}

input,
select,
textarea {
	border-radius: 3px;
}

input[type=file] {
	padding: 2px;
}

.no-labels .form-item label {
	display: none;
}

.form-item.in-line label {
	margin: 0 0 0 5px;
}

.form-item {
	position: relative;
}

.form-item input,
.form-item select,
.form-item textarea {
	background: var(--primary);
	color: rgb(var(--font-color));
	font-weight: 300;
}

.dark-theme .form-item select option,
.dark-theme .filter-date-wrapper select option {
	background-color: #d5d5d5 !important;
	color: #595959 !important;
}

.dark-theme .form-item select option:hover,
.dark-theme .filter-date-wrapper select option:hover {
	background-color: var(--blue) !important;
	color: #fff !important;
}

.popup:not(.confirm-wrapper) .form-item select{
	border: var(--border);
}

.form-item.error {
	color: var(--red) !important;
}

.form-item.error input {
	border-color: var(--red) !important;
}

.form-item:not(.error) .show-error {
	display: none;
}

.popup-form h4,
.popup-form .form-item,
.popup-form .form-item input,
.popup-form .form-item select {
	color: var(--black);
}

.popup-form .form-item input,
.popup-form .form-item select {
	border-color: var(--black);
}

.form-item textarea {
	padding: 7px;
}

.form-item select {
	background: url('data:image/svg+xml;utf-8,<svg fill="lightgrey" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') no-repeat top 5px right 3px;
}

.form-item .toggle {
	margin: 8px 0;
	height: 20px;
}

.form-item .toggle:before {
	background: var(--scrollbar-btn);
	border-radius: 2px;
	height: 14px;
	left: 13px;
	top: 3px;
	width: 5px;
}
.form-item .toggle:after {
	border-radius: 4px;
	height: 20px;
	width: 43px;
}
.form-item .toggle:checked:before {
	background: #ffffff;
	border-radius: 2px;
	left: 39px;
	width: 5px;
}

.form-col > .form-row {
	width: 100%;
}

.table-wrapper.scroll {
	padding-left: 6px;
}

.ellipsis-container {
	align-items: center;
	display: inline-flex;
	width: 100%;
}

.ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
}

.ellipsis > * {
	white-space: nowrap;
}

.no-wrap-text {
	white-space: nowrap;
}

.dot {
	border-radius: 20px;
	padding: 1px 9px;
}

.task {
	position: relative;
}

.percents .pos {
	color: var(--percentPos);
}

.percents .neg {
	color: var(--percentNeg);
}

.percents .value {
	display: inline-block;
	min-width: 18px;
}

.row .percents {
	padding-right: 1.2em;
}

.environment-label {
	align-items: center;
	border-left: var(--border);
	display: inline-flex;
	flex-grow: 0;
	margin-left: 1em;
	padding-left: 1em;
	justify-content: flex-end;
}
.environment-label i {
	color: var(--orange);
}

nav:not(.show-search) .nav-links input {
	display: initial;
}

.center-content {
	display: flex;
	align-items: center;
	text-align: center;
}

.mobile-only {
	display: none;
}

.container {
	max-width: 100%;
}

.toggle-view {
	color: #fff !important;
	font-size: 1.3em;
	padding: 2px 7px 0 16px;
}

.z-index-popup {
	z-index: 101;
}

.confirm-wrapper .confirm-container {
	background: var(--primary);
	text-align: center;
}

.clickable {
	cursor: pointer;
}

.help-highlight {
	animation: pulse-animation 1s infinite;
	outline: 3px solid var(--helpHighlight);
}


@keyframes pulse-animation {
	0% {
		--helpHighlight: #ffd700;
	}
	20% {
		--helpHighlight: #9cff00;
	}
	50% {
		--helpHighlight: #00ffaf;
	}
	70% {
		--helpHighlight: #00ff0f;
	}
	100% {
		--helpHighlight: #ffd700;
	}
}

input.toggle:checked:after {
	background: var(--darkGreen);
}

.notice {
	color: var(--secondaryAccent);
	margin-bottom: .5em;
}
.notice i {
	font-size: .9em;
}

.load-spinner {
	animation: .75s linear infinite spinner-border;
	color: var(--darkGrey);
}

.site-mask {
	background: #000000a3;
	display: flex;
	height: 100%;
	justify-content: center;
	max-width: 100%;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 500;
}

.above-mask {
	background: var(--primary);
	border: 1px solid var(--primary-border);
	border-radius: 4px;
	position: relative;
	z-index: 501;
}

/* || UI Tooltip ------------------- */

.ui-tooltip,
.ui-tooltip .arrow:after {
	background: var(--black);
	border: var(--border) !important;
}

.ui-tooltip {
	padding: 5px 10px;
	color: #fff;
	border-radius: 10px;
	box-shadow: 0 0 10px -3px #0000005e;
	white-space: pre-line;
}

.ui-tooltip .ui-tooltip-content {
	color: #fff;
}

.ui-tooltip .arrow {
	width: 70px;
	height: 16px;
	overflow: hidden;
	position: absolute;
	left: 50%;
	margin-left: -35px;
	bottom: -16px;
}

.ui-tooltip .arrow.top {
	top: -16px;
	bottom: auto;
}

.ui-tooltip .arrow.left {
	left: 10%;
}

.ui-tooltip .arrow.right {
	left: 90%;
}

.ui-tooltip .arrow:after {
	content: "";
	position: absolute;
	left: 20px;
	top: -20px;
	width: 25px;
	height: 25px;
	box-shadow: 6px 5px 9px -9px black;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.ui-tooltip .arrow.top:after {
	bottom: -20px;
	top: auto;
}

.dotted-list > p {
	align-items: baseline;
	display: flex;
	justify-content: space-between;
}

.dotted-list > p span:last-child {
	text-align: end;
}

.dotted-list .dotted-line {
	border-bottom: 1px dotted;
	flex-grow: 1;
	margin: 0 5px 5px;
	opacity: .35;
}

.dotted-list .divider {
	border-bottom: var(--border);
	display: inline-flex;
	justify-content: center;
	margin: 0 auto 10px 0;
	padding: 0 0 5px;
	width: 100%;
}

.dotted-list > p.divider span:last-child {
	text-align: center;
}

.context-menu {
	background-color: var(--contextMenu);
}

/* || Pagination ------------------- */

.pagination-menu {
	align-items: flex-end;
	margin-top: 1em;
}

.pagination-menu .page-list button {
	max-height: 35px;
	padding: 0 10px;
}

.sm-menu .pagination-menu .page-list button {
	align-items: center;
	font-size: 1em;
	max-height: 27px;
	padding: 0 8px;
}

.sm-menu .pagination-menu .page-wrapper > button {
	font-size: 1em;
	margin-top: -1px;
}

.pagination-menu .page-wrapper > button {
	background: none;
	border-color: transparent;
}

body.dark-theme .pagination-menu .page-link {
	border: 1px solid var(--black);
}

body.dark-theme .pagination-menu .page-link:hover,
body.dark-theme .pagination-menu .page-link.active {
	background: transparent;
	color: #fff;
	border: 1px solid rgb(var(--font-color))
}

/* || Chosen ----------------------- */

.chosen-container {
	border: var(--border);
	border-color: var(--darkGrey);
	border-radius: 3px;
	flex-grow: 1;
	padding: 3px 5px;
}
.chosen-container-single .chosen-single,
.chosen-container-active.chosen-with-drop .chosen-single,
.chosen-container-multi .chosen-choices {
	background: transparent;
	border: none;
	box-shadow: none;
	width: 100%;
}

.chosen-container-single .chosen-single {
	font-size: 1.2em;
	padding: 0 2px;
}

.chosen-container-single .chosen-choices li.search-field input[type=text],
.chosen-container-multi .chosen-choices li.search-field input[type=text] {
	font-size: 1.2em;
	opacity: .6;
}

.chosen-container .chosen-drop {
	left: 0;
	margin-left: -1px;
	right: 0;
	width: calc(100% + 2px);
}

.chosen-container-multi .chosen-choices li.search-choice {
	background: var(--primary) !important;
	border-color: var(--primary);
	box-shadow: none !important;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
	background-position: -42px 1px;
	opacity: .5;
}

.chosen-item {
	align-items: start;
}

.chosen-item > .btn-close {
	margin-top: 2px;
}

/* || DatePicker ------------------- */

#ui-datepicker-div {
	background: var(--theme-background);
	border: var(--border);
	box-shadow: 0 10px 20px -5px #00000030;
	padding: 0;
	z-index: 999 !important;
}

.ui-datepicker th span {
	color: rgb(var(--font-color));
}

.ui-widget-header {
	background: transparent;
	border: 0;
	border-radius: 3px 3px 0 0;
}

.ui-state-default, .ui-widget-content .ui-state-default {
	background: transparent;
	border: var(--border);
}

.ui-state-active, .ui-widget-content .ui-state-active {
	border-color: rgb(var(--font-color));
	background: #5e5e5e;
}

.ui-state-hover, .ui-widget-content .ui-state-hover {
	border-color: rgb(var(--font-color));
	background: #5e5e5e;
	color: rgb(var(--font-color));
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight {
	border-color: rgb(var(--font-color));
	background: #5e5e5e;
	color: rgb(var(--font-color));
}

.ui-datepicker td a {
	text-align: center;
}

/* || Buttons ---------------------- */

.btn,
.btn:hover {
	color: rgb(var(--font-color));
}

.btn:focus {
	box-shadow: none;
}

.btn.btn-primary,
button.box {
	font-size: var(--primary-btn-size)
}

.btn.nav-collapse {
	color: #fff;
	display: none;
	font-size: 1.3em;
}

/* Light Theme buttons */
body.light-theme .btn,
body.light-theme button.box {
	background: var(--grey);
	border-color: var(--primary-border);
}
body.light-theme .btn:hover,
body.light-theme button.box:hover {
	background: var(--darkGrey);
}

body.light-theme .btn-end-call {
	background: var(--red);
	border: none;
	color: #fff;
}
body.light-theme .btn-end-call:hover {
	background: var(--lightRed);
}

.btn-open-pad {
	margin-right: 5px;
}

body.light-theme .btn-dark {
	background: var(--black);
	--font-color: #fff;
}

/* Dark Theme buttons */
body.dark-theme .btn,
body.dark-theme button.box {
	background: var(--black);
	border: none;
}
body.dark-theme .btn:hover,
body.dark-theme button.box:hover {
	background: var(--btn-hover);
	border: none;
}

body.light-theme .btn.btn-clear,
body.dark-theme .btn.btn-clear {
	background: transparent;
	border: none;
}

.btn-wrapper .btn {
	display: block;
	margin: 0 auto;
	width: 95%;
}

.btn-primary:active,
.btn-primary:focus,
.btn-primary:disabled {
	color: rgb(var(--font-color));
}

.btn-primary:disabled {
	opacity: .5;
}

.btn.flip {
	transform: rotate(180deg);
}

.btn-secondary:focus {
	color: inherit;
}

.btn-sort {
	background: none;
	border: none;
	color: rgb(var(--font-color));
	opacity: .5;
	margin-bottom: 6px;
	padding-left: 10px;
	transition: transform .3s ease-in-out;
}

.btn-sort.active {
	opacity: 1;
}

.btn-sort i {
	padding-bottom: 8px;
}

.btn-sort.flip i {
	transform: rotate(180deg);
}

button.box {
	border: var(--border);
	border-radius: .25rem;
	color: rgb(var(--font-color));
	padding: 5px 10px;
}

body.light-theme button.box.btn-primary {
	background: var(--black);
	color: #fff;
}

.btn-help {
	color: var(--helpHighlight);
	cursor: pointer;
	font-weight: 400;
}

/* || Elements ---------------------- */

body,
html {
	background: var(--theme-background);
}

nav {
	background: var(--nav-background);
	color: rgb(var(--font-color));
	margin-bottom: 5px;
	position: relative;
	height: 60px;
}

nav .brand-logo {
	align-items: center;
	display: flex;
	max-width: 100%;
	margin: 0 10px 0 3em;
}

nav .brand-logo img {
	min-height: 15.67px;
	max-height: 60px;
	min-width: 129.88px;
}

/*	sizing for search box on Sales Rep Nav */
nav .nav-links:nth-child(2) {
	align-items: center;
	max-width: 1000px;
	padding: 8px 10px;
	width: 100%;
}

nav.minimal .nav-links:last-child {
	margin: 0 10px;
}

/*	Padding for search box on Sales Rep Nav */
nav.minimal .nav-links:nth-child(2) {
	/* margin-left: auto; */
}

.box {
	border: var(--border);
	border-radius: 3px;
	display: flex;
	flex-grow: 1;
	justify-content: center;
	padding: 2em 1em;
}

.mobile-quick-search {
	display: none;
}

.dark-theme nav {
	padding-top: 10px;
}

.quick-search {
	align-items: center;
	border: 1px solid var(--primary-border);
	border-radius: 20px;
	display: flex;
	flex-flow: row nowrap;
	flex-grow: 1;
	max-height: 42px;
}

.quick-search i {
	margin-left: 1em;
}

.open-popup .quick-search .fa-magnifying-glass {
	color: rgb(var(--font-color));
}

.dealer-search-wrapper .load-spinner {
	margin: 3em;
}

.quick-search .load-spinner.hide {
	display: none;
}

#quickSearch {
	color: rgb(var(--font-color));
}

#quickSearch,
#dealerQuickSearch {
	background: transparent;
	border: none;
	display: block;
	padding: 8px 10px;
	/*	Make the input field narrower so that the text doesn't jump around after the results load */
	width: 93%;
}

#dealerQuickSearch {
	color: rgb(var(--font-color));
}

#quickSearch:focus-visible,
#dealerQuickSearch:focus-visible {
	outline: none;
}

.quick-search button.advanced-search {
	color: var(--nav-accent-bg);
	margin-right: .5em;
}

.show-search input#quickSearch {
	/*	After the results are open, the outer field is reduced, so we can expand the width back to 100% */
	width: 100%;
}

body.light-theme .open-popup .quick-search button.advanced-search {
	color: var(--black);
}

#stickyNote {
	align-items: center;
	color: var(--nav-accent-bg);
	display: inline-flex;
}

#stickyNote i {
	font-size: 1.2em;
	padding: 7px 9px;
	transition: none;
}

#stickyNote .dot {
	background: var(--nav-accent-bg);
	color: var(--nav-accent-text);
	font-size: .8em;
	padding: 0.02em 6px 0;
}

.show-sticky #stickyNote {
	z-index: 200;
}

.show-sticky #stickyNote .dot {
	opacity: 0;
}

nav .nav-links:last-child {
	align-items: center;
	margin-right: 70px;
}

body.light-theme nav .quick-search,
body.light-theme nav .quick-search input {
	color: #fff;
}
body.light-theme nav input::placeholder {
	color: #ffffff6b;
	font-weight: 200;
}

.nav-links.open-popup {
	position: relative;
}

nav button.call-history {
	padding: 5px 12px 3px;
}

nav button.active-agents {
	margin-right: 2px;
	padding: 7px 12px;
}

.nav-links button.active-agents {
	align-items: center;
	display: flex;
	height: 32px;
	padding: 7px 2px 6px 7px;
}

.nav-links:not(.open-popup) button.active-agents.show-counter {
	background: #fff !important;
	border-radius: 20px;
	color: var(--popup-bg);
}

.nav-links button.active-agents i {
	padding: 0;
}

.nav-links .active-agent-counter {
	color: var(--black);
	margin-left: 5px;
}

.show-counter .active-agent-counter {
	padding-right: 5px;
}

/* || Task Menu */

nav .task-menu {
	background: none;
	border: none;
	font-size: 1.5em;
	padding: 0 0.5em;
}

#taskMenu:not(.show) {
	margin-left: -250px;
}

#taskMenu {
	background: var(--primary);
	box-shadow: 0 0 8px var(--black);
	height: 100vh;
	left: 0;
	position: fixed;
	top: 0;
	width: 250px;
	z-index: 500;
}

/* Slide out */
#taskMenu.animate {
	animation: taskMenuSlide .3s forwards;
}

/* Slide in */
#taskMenu.show.animate {
	animation: reverseTaskMenuSlide .3s forwards;
}

@keyframes taskMenuSlide {
	0% {
		margin-left: -250px;
	}
	100% {
		margin-left: 0;
	}
}

@keyframes reverseTaskMenuSlide {
	0% {
		margin-left: 0;
	}
	100% {
		margin-left: -250px;
	}
}

#taskMenu .menu-top button {
	display: block;
	margin-left: auto;
	padding: 10px 15px;
}

#taskMenu .link-section {
	display: flex;
	flex-flow: column;
}

#taskMenu .link-section > .btn {
	align-items: center;
	border-radius: 0;
	display: inline-flex;
	padding: 10px 15px;
	transition: .3s ease-in-out;
	width: 95%;
}

#taskMenu .link-section > .btn:hover {
	width: 100%;
}

#taskMenu .link-section > .btn i {
	flex-grow: 1;
	text-align: end;
}


#taskMenu .dot {
	background: var(--secondaryAccent);
	color: var(--theme-background);
	font-size: .9em;
	margin: -1px 5px 0 0;
	padding: 0 6px;
}

/* || Main Content */

#mainContent {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: calc(100vh - 115px) 50px;
}

#mainContent.full {
	grid-template-columns: 100%;
}

/* Set date icon color */
body.light-theme #mainContent {
	margin-top: 10px;
	grid-template-rows: calc(100vh - 125px) 50px;
}

/* || Workspace */

.workspace {
	display: grid;
	grid-template-columns: calc(100% - 275px) 275px;
	grid-template-rows: calc(100vh - 115px) 50px;
	grid-template-areas: "primary side-menu";
}

.workspace .primary-content {
	grid-area: primary;
	height: calc(100% - 1em);
	position: relative;
	display: flex;
	justify-content: center;
}

/* || Overlays */

.task-overlay:not(.show) {
	display: none;
}

.task-overlay {
	background: var(--primary);
	border: 1px solid var(--primary-border);
	border-radius: 3px;
	bottom: 0;
	display: flex;
	flex-flow: column;
	position: absolute;
	top: 0;
	width: calc(100% - 2em);
	z-index: 200;
}

.task-overlay .close-overlay {
	display: block;
	margin-left: auto;
	padding: 10px 15px;
}

.task-overlay .overlay-content {
	flex-grow: 1;
	height: auto;
	margin: 0;
	max-height: calc(100% - 57px);
	padding: 0 1em 1em;
	position: relative;
	width: 100%;
}

.task-overlay .submit {
	display: block;
	margin-left: auto;
}

.task-overlay .submit-account {
	margin-left: auto;
	max-width: 200px;
}

/* || Side Menu */

#sideMenu {
	display: flex;
	flex-flow: column;
	grid-area: side-menu;
	margin: 0 1em 0 0;
	position: relative;
}

section.admin-full.empty #sideMenu,
#sideMenu.hide {
	display: none;
}

#sideMenu .empty-wrapper {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: 100%;
}

#sideMenu .sidebar_container .sidebar,
#sideMenu .phone-wrapper,
#sideMenu .contract-details-wrapper {
	background: var(--primary);
	border: 1px solid var(--primary-border);
	border-radius: 3px;
	display: flex;
	flex-flow: column;
	padding: 10px;
}

#sideMenu .contract-details-wrapper {
	position: relative;
}

#sideMenu .contract-details {
	display: flex;
	flex-flow: column;
}

#sideMenu .contract-details .secondary-status {
	color: var(--secondaryAccent);
	font-size: 1.2em;
	font-weight: 400;
}

#sideMenu .contract-details .accounts-wrapper {
	display: flex;
	flex-flow: row nowrap;
}

#sideMenu .contract-details .accounts-wrapper button:nth-child(2) {
	font-size: 1em;
	margin-left: 5px;
	max-width: 41px;
}

#sideMenu .contract-details .detail-btn {
	display: block;
	padding: 0;
}

#sideMenu .contract-details .detail-btn.hide {
	display: none;
}

#sideMenu .phone-wrapper {
	align-items: center;
	padding: 1em 10px;
	position: relative;
}

#sideMenu .phone-wrapper.open {
	backface-visibility: hidden;
	background: var(--banner-color);
	border-color: white;
}

#sideMenu .phone-wrapper.open.shake {
	animation: delayShake 10s infinite cubic-bezier(.36,.07,.19,.97) both;
	perspective: 1000px;
	transform: translate3d(0, 0, 0);
}

.light-theme #sideMenu .phone-wrapper.open {
	--font-color: #fff;
}

#sideMenu .phone-wrapper.open .btn-primary {
	background: var(--banner-button-color);
	transition: .2s ease-in-out;
}

#sideMenu .phone-wrapper.open .btn-primary:hover {
	filter: brightness(1.5);
}

#sideMenu .call-type,
#sideMenu .call-details,
#sideMenu .btn-end-call {
	font-size: var(--primary-btn-size);
	max-width: 90%;
	width: 100%;
}

#sideMenu .btn-end-call {
	margin-top: 0.7em;
}

#sideMenu .btn-open-pad {
	display: none;
}

#sideMenu .btn.call-type {
	border: 1px solid var(--border-color);
	padding: 2px;
}

#sideMenu .btn.call-type.acw {
	background: var(--acw);
	border-color: #fa9c14;
}

#sideMenu .btn.call-type.Unavailable {
	background: #88283547;
	border-color: #862633;
}

#sideMenu .btn.call-type.Offline {
	background: var(--red);
}

#sideMenu .btn.call-type.Incoming {
	background: var(--darkGreen)
}

#sideMenu .btn.call-type.Incoming span {
	color: #fff;
}

#sideMenu span.call-type {
	font-size: .9em;
}

#sideMenu .call-details {
	align-items: center;
	background: var(--primary);
	border-bottom: 3px solid var(--accent);
	border-radius: 0;
	color: rgb(var(--font-color));
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	margin-top: .5em;
}

#sideMenu .call-details .customer-name {
	align-items: center;
	display: flex;
}

#sideMenu .call-details .customer-name .dot{
	background-color: var(--secondaryAccent);
	color: var(--black);
	font-size: .7em;
	margin-right: 5px;
	padding: 0.2px 7px 0;
}

.light-theme #sideMenu .call-details .customer-name .dot{
	color: #fff;
}

.sidebar_container .sidebar {
	display: flex;
	flex-flow: row wrap;
}

.sidebar_container .sidebar .sidebar-wrapper .dealer-sales,
.sidebar_container .sidebar .sidebar-wrapper .state-sales
{
	color: var(--secondaryAccent);
	display: inline-flex;
	font-size: 1.4em;
	justify-content: center;
	margin-bottom: 1em;
	width: 100%;
}

.sidebar_container .sidebar .sidebar-wrapper .dealer-sales span {
	color: var(--secondaryAccent);
}

.sidebar_container .sidebar .sidebar-kpis-wrapper h6 {
	display: inline-flex;
	justify-content: space-between;
	width: 100%;
}

.inline-overview {
	display: flex;
	flex-flow: row wrap;
}

.inline-overview > *:not(.overview-item) {
	width: 100%;
}

.inline-overview .overview-item {
	flex-grow : 1;
}

.inline-overview .overview-item:not(:first-child) {
	margin-left: 1em;
}

.row-container {
	flex-grow: 1;
}

.row-container .row {
	cursor: pointer;
}

.row-container > .row {
	align-items: center;
	border-bottom: var(--border);
	margin: 0;
}

.row-container > .row .row {
	align-items: center;
	background: var(--theme-background);
	border-radius: 4px;
	margin-bottom: 10px;
	padding: 5px 0;
	transition: background-color .3s ease-in-out;
}

.row-container > .row .row:hover {
	background: var(--btn-hover);
}

.row-container .collapsed-messages,
.row-container .collapsed-contracts {
	height: 100%;
	overflow: hidden;
	position: relative;
}

.row-container .row:not(.expanded) .collapsed-messages,
.row-container .row:not(.expanded) .collapsed-contracts {
	height: 0;
}

.row-container .row.expanded > .flip i {
	transform: rotate(180deg);
}

.row-container .dot {
	padding: 5px;
}

#sideMenu .multi-contracts {
	justify-content: center;
	margin-bottom: 1em;
}

#sideMenu .multi-contracts button:not(.active) {
	color: var(--font-color-trans);
}

#sideMenu .multi-contracts > *:not(:first-child) {
	border-left: 1px solid rgb(var(--font-color));
	border-radius: 0;
}


#sideMenu .open-popup .edit-wrapper {
	display: block;
}

.contract-details.open-popup .task-footer .btn {
	color: var(--black);
}

.contract-details.open-popup .task-footer .btn:first-child,
.task-footer.show-escalate .btn:last-child {
	background: var(--popup-bg);
	color: #fff;
}

#sideMenu .escalate {
	border-radius: 20px 20px 3px;
	bottom: 0;
	display: flex;
	flex-flow: column;
	padding: 1em 1em 50px;
	position: absolute;
	right: 0;
	width: 300px;
}


#sideMenu .escalate .btn {
	padding: 0;
	font-size: 1.2em;
	text-align: end;
}

#sideMenu .status-message {
	color: var(--black);
	font-weight: 400;
	position: absolute;
}

#sideMenu .overlay-menu {
	background: var(--primary);
	height: calc(100% - 31px);
	left: 0.5em;
	overflow-x: hidden;
	overflow-y: auto;
	padding-left: 7px;
	position: absolute;
	top: 0.5em;
	width: calc(100% - .5em);
}

#sideMenu .overlay-menu:not(.show) {
	display: none;
}

#sideMenu .overlay-menu > button {
	color: var(--darkGrey);
	display: block;
	margin-left: auto;
	padding-bottom: 0.7em;
}

#sideMenu .overlay-menu h5 {
	border-bottom: var(--border);
	padding-bottom: 0.5em;
	text-align: center;
}

.overlay-menu > div {
	border-top: var(--border);
	padding-top: .5em;
}

.overlay-menu .associated-contracts .list-row {
	align-items: center;
	border-bottom: var(--border);
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.5em;
	padding-bottom: 0.5em;
}

.overlay-menu .fee-details .container {
	display: flex;
	flex-flow: column;
}

.overlay-menu .edit-contract .basic-wrapper,
.overlay-menu .edit-contract .billing-wrapper,
.overlay-menu .edit-contract .shed-wrapper,
.overlay-menu .edit-contract .advanced-wrapper {
	overflow-x: hidden;
}

.overlay-menu .edit-contract:not(.advanced) .basic-wrapper,
.overlay-menu .edit-contract.advanced .advanced-wrapper {
	height: 100%
}

.overlay-menu .edit-contract.advanced .basic-wrapper,
.overlay-menu .edit-contract.advanced .billing-wrapper,
.overlay-menu .edit-contract.advanced .shed-wrapper,
.overlay-menu .edit-contract:not(.billing) .billing-wrapper,
.overlay-menu .edit-contract:not(.shed) .shed-wrapper,
.overlay-menu .edit-contract:not(.advanced) .advanced-wrapper {
	height: 0;
}

.overlay-menu .edit-contract.advanced .shed-wrapper,
.overlay-menu .edit-contract.advanced .billing-wrapper,
.overlay-menu .edit-contract.advanced .toggle-btn.shed,
.overlay-menu .edit-contract.advanced .toggle-btn.billing {
	display: none;
}

.overlay-menu .edit-contract.billing .billing-wrapper,
.overlay-menu .edit-contract.shed .shed-wrapper,
.overlay-menu .edit-contract.advanced .advanced-wrapper {
	padding-bottom: 1em;
}

.overlay-menu .edit-contract .toggle-btn {
	align-items: center;
	display: inline-flex;
	width: 100%;
}

.overlay-menu .edit-contract .toggle-btn span{
	margin-right: 5px;
}

.overlay-menu .edit-contract .toggle-btn i {
	margin-left: auto;
	transition: .3s ease-in-out;
}

.overlay-menu .edit-contract.shed .toggle-btn.shed i,
.overlay-menu .edit-contract.billing .toggle-btn.billing i,
.overlay-menu .edit-contract.advanced .toggle-btn.advanced i {
	transform: rotate(180deg);
}

.overlay-menu .advanced-wrapper .form-item {
	margin-bottom: 0;
}

/* || Footer */

#statusBar {
	align-items: center;
	background: var(--footer-bg);
	border: var(--status-bar-border);
	border-bottom: none;
	border-radius: 3px 3px 0 0;
	display: inline-flex;
	/*grid-area: footer;*/
	margin: 0 1em;
	padding-right: 1em;
	position: relative;
}

#statusBar .tasks-wrapper > button {
	align-items: center;
	display: inline-flex;
	position: relative;
	z-index: 204;
}

#statusBar .tasks-wrapper > button:not(.resales-pending) i {
	font-size: 1.2em;
	padding: 5px 8px;
	transition: none;
}

#statusBar .dot {
	background: var(--secondary);
	color: var(--secondary-color);
}

#statusBar .flagged-wrapper-container {
	overflow: auto;
}

#statusBar .flagged-wrapper {
	display: inline-flex;
	justify-content: flex-end;
	overflow: auto;
}


#statusBar .flagged-wrapper > .btn:not(:last-child) {
	margin-right: .5em;
}

#statusBar .flagged-wrapper > .btn {
	align-items: center;
	display: inline-flex;
	white-space: nowrap;
}

#statusBar .tasks-wrapper {
	align-items: center;
	display: inline-flex;
	flex-grow: 1;
	position: relative;
}

#statusBar .tasks-wrapper.opened .btn-task i {
	color: var(--black);
}

#statusBar .tasks-wrapper .btn-task.close-it {
	position: relative;
}

#statusBar .tasks-wrapper .btn-task.close-it .fa-xmark {
	background: var(--black);
	border-radius: 20px;
	color: #fff;
	margin-left: 4px;
	position: absolute;
}

#statusBar .tasks-wrapper .task-container {
	background: #fff;
	border-radius: 4px 4px 0 0;
	bottom: -4px;
	height: auto;
	left: 0;
	max-height: calc(100vh - 60px);
	padding: 15px 10px 54px;
	position: absolute;
	width: 300px;
	z-index: 201;
}

#statusBar .task-container .item *:not(button) {
	color: var(--black);
}

#statusBar .task-container .item:not(:last-child) {
	border-bottom: 1px solid var(--darkGrey);
	margin: 0 0 1em;
	padding-bottom: 10px;
}

#statusBar .task-container .item > * {
	margin-bottom: .5em;
}

#statusBar .task-container .item-note {
	cursor: pointer;
	word-wrap: break-word;
}

#statusBar .task-container .item-note img {
	width: 100%;
}

#statusBar .task-container .item-note:not(.show-all) {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

#statusBar .task-container .item-row {
	display: inline-flex;
	justify-content: space-between;
	width: 100%;
}

#statusBar .task-container select {
	border: 1px solid var(--black);
}

#statusBar .load-spinner {
	margin: 1em;
}

#statusBar .tasks-wrapper > button {
	align-items: center;
	display: inline-flex;
}

#statusBar .letter-batch {
	margin-left: 1em;
}
#statusBar .letter-batch span {
	color: #fff;
}
#statusBar .resales-pending {
	margin-left: .5em;
}

/* || Popup */

.popup:not(.show, .confirm-wrapper) {
	display: none;
}

.dot.empty {
	opacity: 0;
}

.popup {
	background: var(--theme-background);
	box-shadow: 0 0 20px 6px #00000042;
	z-index: 100;
}

body.light-theme .popup {
	background: #fff;
}

.popup .btn-clear {
	color: rgb(var(--font-color));
}

.popup .btn {
	--black: var(--primary-border);
}

.show-sticky #stickyNote {
	opacity: 1;
}

.show-sticky #stickyNote i {
	color: #fff;
	background: var(--popup-bg) !important;
	border-radius: 20px;
}

.right-nav-links > .nav-link {
	margin-right: 0.5em;
	padding: 0;
}

.right-nav-links > .nav-link:last-child {
	margin-right: 0;
}

.right-nav-links > .nav-link i {
	font-size: 1.3em;
	padding: 7px 6px 5px;
}

nav .right-nav-container {
	max-height: 60vh;
}

.right-nav-container .nav-link {
	padding: 5px 0 0;
}

.open-popup.right-nav-links .nav-link {
	opacity: 1;
	z-index: 200;
}

body.light-theme .open-popup .nav-link {
	color: var(--accent);
}

.open-popup.user.right-nav-links .user,
.open-popup.agent-list.right-nav-links .active-agents,
.open-popup.call-history.right-nav-links .call-history {
	color: #fff !important;
	background: var(--popup-bg) !important;
	border-radius: 20px;
}

.open-popup.agent-list.right-nav-links .active-agents span {
	color: #fff !important;
}

.open-popup .right-nav-wrapper,
.show-sticky .sticky-note-wrapper {
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	display: block;
	padding: 50px 1em 1em;
	position: absolute;
	width: 100%;
}

.show-sticky .sticky-note-wrapper {
	top: 0;
	width: calc(100% - 40px);
}

.sticky-note-wrapper > .btn {
	position: absolute;
	top: 15px;
	left: 5px;
}

.sticky-note-wrapper > .btn i {
	background: var(--popup-bg);
	border-radius: 20px;
	color: #fff;
	font-size: .9em;
	padding: 2px 2px 1px;
}

.sticky-note-wrapper > .btn i {
	background: var(--popup-bg);
	border-radius: 20px;
	color: #fff;
	font-size: .9em;
	padding: 2px 2px 1px;
}

.sticky-note-wrapper .note-field {
	align-items: center;
	display: none;
	margin: 1em 0 0;
}

.sticky-note-wrapper .note-field.show {
	display: flex;
	flex-flow: row wrap;
}

.sticky-note-wrapper .note-field input {
	background: #fff;
	border: 1px solid var(--grey);
	border-radius: 4px;
	flex-grow: 1;
	color: var(--black);
}

.sticky-note-wrapper .note-field button {
	color: var(--font-color);
	flex-grow: 0;
	font-size: 1.4em;
	margin-left: 15px;
	padding: 0;
}

.sticky-note-container {
	background: var(--paymentPromised);
	border-radius: 10px;
	padding: 10px;
}

.sticky-note-container .item {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.sticky-note-container .item > * {
	margin-bottom: 0;
}

.open-popup .right-nav-wrapper {
	right: -10px;
	text-align: center;
	top: -14px;
	width: 199px;
}

.show-options .quick-search,
.show-search .quick-search {
	z-index: 200;
}

nav .show-options .quick-search-wrapper,
nav .show-search .quick-search-wrapper {
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	display: block;
	padding: 60px 1em 1em;
	position: absolute;
	left: -5px;
	right: 28px;
	top: -10px;
}

nav.minimal .show-search .quick-search-wrapper {    
	left: -5px;
	/*	Expand the right side so that the close button is visible */
	right: 0px;
	top: -11px;
}

nav.minimal .show-search .quick-search {
	margin-right: 48px;
}

.dealer-search-wrapper {
	padding: 10px;
}

.dealer-search-wrapper.show-search {
	background: var(--theme-background);
	border-radius: 30px;
	position: absolute;
	width: calc(100% - 2em);
	z-index: 1;
}

.dealer-search-wrapper:not(.show-search) .quick-search-wrapper {
	display: none;
}

.nav-links:not(.show-search) #quickSearch {
	color: rgb(var(--font-color));
}

.nav-links:not(.show-options) .advanced-search-options {
	display: none;
}

.quick-search-wrapper > button {
	font-size: 1.5em;
	opacity: .5;
	position: absolute;
	right: 11px;
	top: 20px;
}

.dealer-search-wrapper .quick-search-wrapper > button {
	right: 14px;
	top: 8px;
}

.quick-search-wrapper .results-title {
	align-items: center;
	display: inline-flex;
	justify-content: space-between;
	width: 100%;
}

.quick-search-wrapper .results-title .btn{
	background: none !important;
	color: var(--black);
	padding: 0;
}

nav .advanced .quick-search {
	margin-left: 1em;
	margin-right: 1em;
}

.advanced .results-title p {
	opacity: 0;
}

.show-search.advanced .quick-search-wrapper {
	display: flex;
	flex-flow: column;
	left: 11px;
	max-height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;
	right: 19px;
}

#advancedSearchForm {
	padding: 0 2em;
}

#advancedSearchForm label,
#advancedSearchForm input {
	color: rgb(var(--font-color)) !important;
	background: transparent;
}

#advancedSearchForm select,
#advancedSearchForm input {
	flex-grow: 1;
}

#advancedSearchForm .form-row:last-child {
	padding: 7px 0 10px;
}

#advancedSearchForm label {
	flex-grow: 0;
	font-size: .9em;
	margin: 0 10px 0 0;
	white-space: nowrap;
}

#advancedSearchForm .radio-toggle label{
	position: relative;
}

#advancedSearchForm .date-range-options .btn-close {
	width: auto;
	margin: 0 0 1em auto;
}

#advancedSearchForm .date-range-options [type=date] {
	padding-left: 10px;
}

.advanced-search-wrapper {
	display: flex;
	flex-flow: row wrap;
	height: calc(100% - 131px);
}

.adv-search > button {
	font-size: 1.2em;
	margin-top: 4px;
	opacity: .5;
	padding-left: 0;
	padding-right: 15px;
}

.advanced-search-wrapper:not(.show-search) .adv-search > button {
	display: none;
}

.adv-search {
	align-items: center;
	border: 1px solid var(--primary-border);
	border-radius: 20px;
	display: flex;
	flex-flow: row nowrap;
	flex-grow: 1;
	max-height: 42px;
	width: 100%;
}

.adv-search i {
	margin-left: 1em;
}

.adv-search .load-spinner {
	display: none;
}

.show-search .adv-search {
	z-index: 200;
}

.show-search .adv-search button i{
	color: var(--popup-bg);
}

.show-search .adv-search input {
	color: var(--black) !important;
}


#advSearch{
	background: transparent;
	color: rgb(var(--font-color));
	border: none;
	display: block;
	padding: 8px 10px;
	width: 100%;
}

#advSearch:focus-visible {
	outline: none;
}



.show-search:not(.advanced) .advanced-search-options {
	display: none;
}

.advanced-search-options .button-wrapper {
	align-items: center;
	display: inline-flex;
	justify-content: space-between;
	width: 100%;
}

.advanced-search-options .button-wrapper button {
	color: var(--black);
	padding-left: 5px;
}

.advanced-search-container {
	padding-left: 1em;
	position: relative;
	width: 100%
}

.advanced-search-container.empty {
	height: 100%;
}

.advanced-search-container.empty .results-count-wrapper {
	display: none;
}

.advanced-search-container.empty .search-results-container {
	height: 100%;
	max-height: 100%;
}

.advanced-search-container .pagination-menu {
	align-items: flex-end;
}

.advanced-search-container .pagination-menu .page-list button {
	max-height: 35px;
	padding: 0 10px;
}

.advanced-search-container .empty-message-wrapper {
	display: flex;
	flex-flow: column;
	height: 100%;
	justify-content: center;
	text-align: center;
}

#advancedSearchForm .form-item {
	align-items: center;
	flex-flow: row nowrap;
	margin-bottom: 5px;
}

.advanced-search-options input,
.advanced-search-options select {
	border: var(--border);
	height: 26px;
}

.advanced-search-options .chosen-container {
	border: var(--border);
}

.advanced-search-options .chosen-container-multi .chosen-choices li.search-field input[type=text]{
	height: 18px;
}

#advancedSearchForm .form-item select {
	background: url('data:image/svg+xml;utf-8,<svg fill="lightgrey" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') no-repeat top 2px right 3px;
}

#advancedSearchForm .form-item.in-line {
	flex-flow: row nowrap;
}

.advanced-search-options .radio-toggle label {
	margin-top: 5px;
}
.advanced-search-options .radio-toggle input {
	margin-top: 27px;
}

.advanced-search-options .form-item .toggle {
	margin-right: 0;
	margin-top: 8px;
	padding-right: 0;
}

.results-count-wrapper {
	padding-top: .5em;
	text-align: end;
	width: 100%;
}

.search-results-container {
	height: initial;
	max-height: 75vh;
	padding: 10px 0;
}

.advanced-search-container .search-results-container {
	max-height: calc(100% - 14px);
}

.search-results-container p {
	padding: 10px 0 0;
	text-align: center;
}

body.dark-theme .overlay-content .search-results-container:not(.dealer-results) {
	--font-color: #fff;
	--border-color: var(--grey);
}

body.dark-theme .overlay-content .pagination-menu .page-link {
	border: 1px solid var(--black);
}

body.dark-theme .overlay-content .pagination-menu .page-link:hover,
body.dark-theme .overlay-content .pagination-menu .page-link.active {
	background: transparent;
	border-color: #fff;
	color: #fff;
}

.advanced-search-container .search-results-container .row.header{
	margin: 0 1em 0 0;
}

.search-results-container .row.header {
	border-bottom: 2px solid var(--primary-border);
}

.advanced-search-container .advanced-results {
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}

.advanced-search-container .search-results-container {
	height: 100%;
	overflow: hidden;
}

.advanced-search-container .advanced-results .row {
	margin-right: 10px;
}

.advanced-search-container .advanced-results .row:last-child {
	padding-top: 5px;
	border-bottom: none;
}

.advanced-search-container .advanced-results .row:last-child span:last-child {
	font-weight: 400;
}

.search-results-container .advanced-results .row {
	align-items: center;
	border-bottom: var(--border);
}

.search-results-container .advanced-results .row > div {
	font-weight: 200;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.search-results-container .advanced-results .row.bold > div,
.search-results-container .advanced-results button,
.dealer-search-wrapper .row:not(.bold) .btn-link {
	font-weight: 300;
}

.search-results-container .advanced-results button {
	padding: 5px 0;
}

.search-results-container .advanced-row {
	display: inline-flex;
	justify-content: space-between;
	width: 100%;
}

.search-results-container .header > * {
	align-items: center;
	display: inline-flex;
}

.show-criteria select.select-search-hide {
	display: none;
}

.show-criteria .select-search-btn-wrapper,
.show-criteria .select-search-options {
	width: calc(100% - 31px);
}

.select-search-btn-wrapper {
	top: 5px;
}

/* || Tabs */

section.workspace.empty .tab-wrapper {
	display: none;
}

.tab-wrapper,
.dash-wrapper {
	background: var(--primary);
	border: 1px solid var(--primary-border);
	border-radius: 3px;
	position: relative;
}

.dash-wrapper {
	max-height: calc(100vh - 131px);
	min-height: calc(100vh - 131px);
	overflow: hidden;
}

.primary-content:not(.show-edit-menu) .tab-wrapper.edit-menu {
	display: none;
}

.tab-content {
	overflow: hidden;
}

section.workspace .tab-wrapper {
	width: calc(50% - 1.5em);
}

.primary-content.show-edit-menu .tab-wrapper {
	width: calc(33% - 1em);
}

.tab-wrapper:not(:nth-child(4)) {
	margin-left: 1em;
}

.tab-wrapper .tabs {
	display: flex;
	justify-content: space-around;
	overflow-x: scroll;
}

.dash-wrapper.scroll {
	padding-right: 0;
}

.dash-wrapper .tabs {
	display: flex;
	justify-content: flex-start;
	overflow-x: auto;
}

.dash-wrapper .tab-item,
.tab-wrapper .tab-item,
.dealer-tabs .tab-item {
	align-items: center;
	background: transparent;
	border: none;
	border-bottom: 3px solid var(--primary-border);
	color: rgb(var(--font-color));
	display: flex;
	flex-grow: 1;
	justify-content: center;
	margin: 10px 5px 5px;
	white-space: nowrap;
	outline: none;
}

.tab-wrapper .tab-item.close {
	border-bottom: none;
	flex-grow: 0;
	padding: 0 12px;
}

.dash-wrapper .tab-item.active,
.dealer-tabs .tab-item.active,
.tab-wrapper .tab-item.active {
	border-bottom-color: var(--accent);
}

.dash-wrapper .tab-item i,
.dealer-tabs .tab-item i,
.tab-wrapper .tab-item i {
	color: var(--accent);
	margin-left: 5px;
}

.tab-wrapper .tab-content {
	padding: 10px;
	height: calc(100% - 45px);
}

.tab-content:not(.open) {
	display: none;
}

.tab-wrapper.edit-menu form {
	display: flex;
	flex-flow: column;
}

.tab-wrapper.edit-menu form hr {
	margin-top: 0;
	height: 0;
	padding: 1px;
}

.tab-wrapper.edit-menu form .btn-wrapper:last-child {
	align-items: end;
	display: flex;
	flex-grow: 1;
}

.dash-wrapper .tab-content {
	height: calc(100% - 45px);
	overflow: auto;
}

.dash-wrapper .tab-content .date-filtered {
	border-bottom: var(--border);
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	padding: 1em;
	text-align: center;
	width: 100%;
}

.dash-wrapper .tab-content .date-filtered .btn {
	opacity: .5;
	transition: .2s ease-in-out;
}

.dash-wrapper .tab-content .date-filtered .btn:hover {
	opacity: 1;
}

.dash-wrapper .scroll {
	padding-right: 0;
}

.dash-wrapper .table-section {
	padding: 1em 1em .5em;
}

.dash-wrapper .table-section .row {
	padding: 5px 0;
}

.dash-wrapper .table-section .mobile-only {
	display: none;
}

.dash-wrapper .row:not(:last-child, .total) {
	border-bottom: var(--border);
}

.dash-wrapper .row.total {
	border-top: 1px solid;
}

.dash-wrapper .row.dashed-border {
	border-top: 2px dashed #ffffffa1;
	border-bottom: 2px dashed #ffffffa1;
}

.dash-wrapper .header > div{
	align-items: center;
	display: inline-flex;
	font-weight: 400;
}


/* || Dashboards */

.workspace:not(.empty) .dashboard-wrapper {
	display: none;
}

section.collections .dashboard-wrapper {
	align-items: center;
	background: var(--primary);
	border: 1px solid var(--primary-border);
	border-radius: 3px;
	display: flex;
	flex-flow: column;
	padding: 10px;
	position: relative;
	width: calc(100% - 2em);
}

.workspace.empty.admin-full,
.workspace.empty.sales-reps {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: calc(100vh - 115px) 50px;
}

section.admin-full .dashboard-wrapper,
section.sales-reps .dashboard-wrapper {
	display: grid;
	grid-template-columns: 38% 38% calc(24% - 2em);
	grid-template-rows: 100%;
	grid-gap: 1em;
	margin: 0 1em;
	width: 100%;
}

section.admin-full .dashboard-wrapper.scroll,
section.sales-reps .dashboard-wrapper.scroll {
	padding-right: 0;
}

.dash-wrapper .monthly-items-wrapper {
	border-bottom: var(--border);
	margin: 0.5em 0;
	padding: 0 .5em 0.5em;
}

.dash-wrapper .monthly-items-wrapper .container {
	padding: 0;
}

.dash-wrapper .monthly-items-title {
	padding: 1em .5em;
}

/* || Tasks */

.task {
	height: 100%;
}


/* || SMS */

.sms-messages {
	display: flex;
	flex-flow: column;
	height: 100%;
}

.sms-messages .task-content {
	flex-grow: 1;
}

.input-wrapper {
	align-items: center;
	background: var(--theme-background);
	border-radius: 20px;
	display: inline-flex;
	justify-content: space-between;
	width: 100%;
}

.input-wrapper input {
	background-color: transparent;
	color: rgb(var(--font-color));
	border: none;
	font-weight: 200;
	flex-grow: 1;
	padding-left: 15px;
}

.input-wrapper button {
	font-size: var(--primary-btn-size)
}

.input-wrapper > .add-file {
	padding: 0;
}

.input-wrapper input::placeholder {
	color: rgb(var(--font-color));
}

.input-wrapper .payoff-sms {
	color: var(--accent);
	font-size: .8em;
	padding-right: 0;
}

.phone-tag-wrapper {
	display: inline-flex;
}

.phone-tag-wrapper > button {
	align-items: center;
	display: inline-flex;
}


.tab-item .dot,
.phone-tag-wrapper .dot {
	background: var(--secondaryAccent);
	color: var(--black);
	font-size: .9em;
	margin-left: 6px;
	padding: 0 6px;
	margin-top: -1px;
}

.light-theme .tab-item .dot,
.light-theme .phone-tag-wrapper .dot {
	color: #fff;
}

.sms-details {
	display: flex;
}

.sms-divider {
	width: 100%;
	background: rgb(var(--font-color));
	height: 2px;
}

.sms-content {
	padding: 10px;
	border: 1px solid rgb(var(--font-color));
	border-radius: 20px;
	max-width: 90%;
	word-break: break-word;
}

.sms-content img {
	cursor: pointer;
	width: 100%;
}

.sms-row:not(.Incoming) .sms-content .contract {
	color: var(--primary);
	display: block;
	font-size: .8em;
	margin-right: 5px;
	text-align: right;
}

.sms-row.Incoming .sms-content .contract {
	display: none;
}

.sms-row:not(.Incoming) .sms-content {
	background-color: var(--sms-outbound);
	color: var(--sms-outbound-text);
	border-color: transparent;
}

.sms-row {
	align-items: center;
	display: grid;
	grid-gap: 2%;
	grid-template-columns: 45% 5% 45%;
	justify-content: center;
	margin-bottom: 1em;
	width: 100%;
}

.sms-row:not(.Incoming) .sms-details {
	align-items: center;
	justify-content: end;
	text-align: right;
}

.sms-row:not(.Incoming) .sms-details .agent {
	border-right: 2px solid rgb(var(--font-color));
	margin-right: 10px;
	padding-right: 10px;
}

.sms-row:not(.Incoming) .sms-details .date {
	white-space: nowrap;
}

.sms-row.Incoming .sms-details {
	order: 3;
}

.sms-row.Incoming .sms-divider {
	order: 2;
}

.sms-row.Incoming .sms-content {
	margin-left: auto;
}

.sms-row.unread .sms-content {
	border-color: var(--secondaryAccent);
}

.light-theme .sms-row.unread .sms-content {
	border-width: medium;
	border-color: #43b4c4;
}

.sms-content .file-link {
	align-items: center;
	background: var(--grey);
	border-radius: 4px;
	color: var(--black);
	display: flex;
	margin-top: 5px;
	padding: 5px 10px;
	width: 100%;
}

.sms-content .file-link:visited {
	color: var(--black);
}

.sms-content .file-link i {
	margin-right: 5px;
}

#smsNoteMessage {
	outline: none;
}

.sms-footer .add-file-container {
	align-items: center;
	background: var(--paymentPromised);
	border: var(--border);
	border-radius: 4px;
	display: inline-flex;
	justify-content: space-between;
	margin-bottom: 1em;
	padding: 4px 8px;
	width: 100%;
}

.sms-footer .add-file-container:first-child {
	margin-top: 1em;
}

.sms-footer .add-file-container i {
	padding: 0 5px;
}

/* || Pay History */

.payment-history .table-header {
	border-bottom: 1px solid rgb(var(--font-color));
}

.payment-history .table-header > .row {
	padding-right: 0;
}

.payment-history .table-header .col:last-child {
	display: inline-flex;
	justify-content: end;
	padding-right: 0;
}

.payment-history .table-header .col:last-child > :last-child {
	margin: 0 0 0 10px;
}



.payment-history {
	height: 100%;
}

.payment-history .row {
	padding: 5px;
	width: 100%;
	margin: 0;
}

.payment-history .row.total-line {
	opacity: .5;
}

.payment-history .scroll {
	height: calc(100% - 104px);
	margin: 10px 0;
}

.payment-history .btn {
	display: block;
	margin-left: auto;
	padding: 0;
	transition: .3s ease-in-out;
}

.payment-history .row > div:first-child {
	align-items: center;
	display: inline-flex;
	text-wrap: nowrap;
}

.payment-history .row .fa-circle-exclamation {
	font-size: .8em;
	margin-right: 5px;
}

.bordered-rows .row:not(:last-child) {
	border-bottom: var(--border);
}

.history-footer {
	border-top: 1px solid rgb(var(--font-color));
}

.payment-item {
	border: var(--border);
	border-radius: 3px;
	margin: 10px 0;
	padding: 5px;
}

.bordered-rows .payment-item .row:not(:last-child) {
	border-bottom-style: dotted;
}

.collapsed-details {
	height: 100%;
	overflow: hidden;
	position: relative;
}

.collapsed-details:not(.expanded) {
	height: 0;
}

.payment-retry-overlay {
	background: var(--primary);
	border: var(--border);
	border-radius: 4px;
	display: none;
	height: 94% !important;
	left: 0;
	padding: 14px;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
}

.payment-retry-overlay.show {
	display: flex;
	flex-flow: column;
}

.payment-retry-overlay .payment-retry {
	border: var(--border);
	border-radius: 4px;
	display: inline-flex;
	justify-content: space-between;
	margin-top: 1em;
	padding: 6px 5px;
}

.payment-history .linked-wrapper {
	border: 1px solid var(--acw);
	border-radius: 8px;
	margin: 13px 0 5px;
	padding: 5px 10px 0;
	position: relative;
}

.payment-history .linked-wrapper > .fa-link {
	background: var(--primary);
	padding: 0 5px;
	position: absolute;
	right: 21px;
	top: -7px;
}

.payment-history .note-wrapper {
	color: var(--acw);
}

/* || Make Payment */

.make-payment .task-content,
.make-payment form,
.make-payment .form-col {
	height: 100%;
}

.make-payment .form-col .form-item:last-child {
	flex-grow: 1;
	justify-content: flex-end;
}

.tag-wrapper,
.make-payment .form-item {
	margin-bottom: 1.5em;
}

.make-payment .form-col > .form-item {
	flex-grow: 0;
}

.make-payment .form-col > .form-item:last-child {
	margin-bottom: 0;
}

.tag-wrapper > button:not(:last-child) {
	margin-right: 1em;
}

.tag-wrapper .btn.active {
	background-color: var(--secondary);
	color: var(--secondary-color);
}

.form-item.append-button {
	flex-flow: row nowrap;
}

.form-item.append-button > *:not(button) {
	flex-grow: 1;
}

.form-item.append-button #paymentMethod {
	margin-right: 1em;
}

.form-item.dollar-sign {
	position: relative;
}

.form-item.dollar-sign:after {
	content: '$';
	font-weight: 400;
	left: 6px;
	position: absolute;
	top: 6px;
}

.form-item.dollar-sign > input {
	padding-left: 17px;
}

.form-item.date {
	max-width: 133px;
}

.payment-list-items {
	border-top: 1px solid rgb(var(--font-color));
	padding-top: 1em;
}

.payment-list-items > .list-item {
	display: flex;
	flex-flow: row wrap;
	margin-bottom: 1em;
}

.payment-list-items .list-item .note {
	padding-left: 1em;
	width: 100%;
}

.payment-list-items .list-item .note .small{
	margin-left: 5px;
	opacity: .6;
}

.payment-total {
	display: flex;
	justify-content: space-between;
}

.one-time-payment-wrapper {
	border-bottom: var(--border);
	margin: 0 15px 1em 0;
}

.new-method-wrapper {
	background: var(--primary);
	border-radius: 3px;
	bottom: 0;
	left: 0;
	padding: 20px 0 10px;
	position: absolute;
	top: 50px;
	width: 100%;
}

.new-method-wrapper:not(.show){
	display: none;
}

.new-method-wrapper .close {
	margin-left: auto;
	margin-right: 0 !important;
	opacity: .5;
	padding-right: 0;
	width: 37px;
}

.new-method-wrapper form {
	display: grid;
	padding: 0 10px;
	overflow-x: hidden;
	overflow-y: auto;
}

.new-method-wrapper .form-item {
	margin-bottom: 0.5em;
}

.cc-method > .form-row,
.check-method > .form-row {
	width: 100%;
}

.cc-method > .form-item,
.check-method > .form-item {
	width: calc(100% - 15px);
}

.make-payment .loading {
	z-index: 101;
}

.make-payment .ch,
.make-payment .bank.empty,
.make-payment .bank button {
	display: none;
}

.make-payment .bank #paymentMethod {
	margin-right: 0 !important;
}

.make-payment .message-banner {
	border-radius: 4px;
	color: var(--black);
	display: none;
	padding: 5px 10px;
}

.make-payment .message-banner.success {
	background: var(--darkGreen);
	display: block;
}

.make-payment .message-banner.failed {
	background: var(--red);
	display: block;
}

.light-theme .make-payment .message-banner {
	color: #fff;
}


.make-payment .form-item.scheduled-payments {
	margin-bottom: 0;
}

.scheduled-payments .scheduled-payment {
	align-items: center;
	background: var(--paymentPromised);
	border: var(--border);
	border-radius: 6px;
	display: inline-flex;
	justify-content: space-between;
	padding: 5px 10px;
}

.light-theme .scheduled-payments .scheduled-payment {
	--font-color: var(--black);
}

.scheduled-payments .scheduled-payment:not(:nth-child(2)) {
	margin-top: 1em;
}

.scheduled-payments .scheduled-payment .value-wrapper {
	align-items: center;
	display: inline-flex;
	justify-content: space-between;
	flex-grow: 1;
}

.make-payment .cc-fees {
	align-items: end;
	display: flex;
	flex-flow: column;
	font-size: .8em;
}

.make-payment .cc-fees span:not(.active){
	display: none;
}

.make-payment .cc-fees.both-fees {
	margin-top: -14px;
}

.make-payment form.extend .cc-fees.both-fees {
	margin-top: -10px;
}


/* || Contract Files */

.dealer_files {
	height: calc(100% - 30px);
}

.dealer_files .row {
	align-items: center;
	margin: 0;
	width: 100%;
}

.dealer_files .row:not(:last-child),
.contract-letters .row:not(:last-child) {
	border-bottom: var(--border);
}

.dealer_files .row .col:nth-child(4) {
	flex: 0 0 auto;
	width: 62px;
}

.contract-letters .row a,
.dealer_files .row a {
	text-decoration: underline;
}

.email-prompt {
	align-items: center;
	background: var(--theme-background);
	border: var(--border);
	border-radius: 10px;
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	padding: 1em;
}

.email-prompt p {
	flex-grow: 1;
}

.dealer_files.show-upload .task-content,
.dealer_files.show-upload .upload {
	display: none;
}

.dealer_files.show-upload .upload-menu {
	display: block;
}

.dealer_files .upload-menu {
	display: none;
}

.dealer_files .close,
.dealer_files .upload {
	display: block;
	font-weight: 200;
	margin-left: auto;
	padding: 0 0 5px;
}

.dealer_files .close {
	color: var(--darkGrey);
}

.dealer_files form .error {
	border-color: var(--red);
}

/* || EPO */

.epo {
	height: 100%;
}

.epo .row {
	align-items: center;
}

.epo .task-content {
	display: flex;
	flex-flow: column;
	padding: 10px;
}

.epo .list-items {
	padding-right: 5px;
}

.epo .list-items:nth-child(2) {
	align-items: end;
	display: flex;
	flex-flow: column;
	justify-content: center;
	margin: 2em 0;
}

.epo .list-items:last-child button {
	margin-left: auto;
	display: block;
	min-width: 120px;
}

.list-items > .list-item {
	display: flex;
	flex-flow: row wrap;
	justify-content: end;
	margin-bottom: 1em;
}

.list-items > .list-item.indented {
	font-weight: 200;
	margin-left: 2em;
}

.list-items > .list-item.hide {
	display: none;
}

.list-items .list-item > .value {
	font-weight: 300;
}

.list-items .list-item:not(.indented) > .value{
	font-weight: 500;
}

.list-items > .list-item.right-align {
	justify-content: flex-end;
}

.list-items > .list-item.right-align > *:first-child {
	margin-right: 2em;
}

/* Set date icon color */
body.dark-theme .payoff-date ::-webkit-calendar-picker-indicator {
	filter: invert(0);
}

.epo .payoff-date .payoff-wrapper {
	display: flex;
	flex-flow: column;
	flex-grow: 1;
}

.epo .payoff-date input {
	border-radius: 4px;
	border: var(--border);
	height: 35px;
	padding: 0 7px;
	margin-right: 1em;
}

.epo .payoff-date {
	align-items: flex-end;
	display: inline-flex;
	justify-content: center;
	width: calc(100% - 2em);
}

.epo .payoff-date button {
	max-width: 40%;
	width: 100%;
}

/* || Letters */

.contract-letters > a {
	display: block;
	margin: 0 0 .5em auto;
	text-align: end;
}

.contract-letters > a.hide {
	display: none;
}

.contract-letters .row {
	padding: 5px 0;
	width: 100%;
}

/* || Summary Details */

.summary-details {
	padding: 0 1em;
	overflow: auto;
	width: 100%;
}

.summary-details .row {
	align-items: center;
	border-bottom: var(--border);
	padding: 1em 0;
}

.summary-details .row:not(.task) .col:not(:first-child) {
	text-align: center;
}

.summary-details .row.summary-header {
	border-bottom-width: 3px;
}

.overlay-content .summary-tabs,
.dashboard-wrapper .summary-tabs {
	display: inline-flex;
	width: 100%;
}

.overlay-content .summary-tabs .tab-item,
.dashboard-wrapper .summary-tabs .tab-item {
	align-items: center;
	background: transparent;
	border: none;
	border-bottom: 3px solid var(--primary-border);
	color: rgb(var(--font-color));
	display: flex;
	flex-grow: 1;
	justify-content: center;
	margin: 10px 5px 5px;
}

.overlay-content .summary-tabs .tab-item:hover,
.overlay-content .summary-tabs .tab-item.active,
.dashboard-wrapper .summary-tabs .tab-item:hover,
.dashboard-wrapper .summary-tabs .tab-item.active {
	border-bottom-color: var(--accent);
	outline: none;
}

.summary-details .summary-header i {
	margin-left: 5px;
	opacity: .5;
}

.summary-details .summary-header .col.active i {
	opacity: 1;
}

.summary-details .summary-header .col.reverse i {
	transform: rotateX(180deg);
}

.summary-details .summary-table {
	min-height: 300px;
	position: relative;
}

.summary-details .summary-table .row.active {
	background: var(--primary-border);
}

.summary-details .task-summary {
	min-height: 200px;
	position: relative;
	width: 100%;
}

.summary-details .row.task:nth-child(2) {
	border-top: var(--border);
}

.summary-details .row.task span {
	margin-right: 5px;
	opacity: .7;
}

.summary-details .task-container {
	display: flex;
	align-items: center;
}

.summary-details .task-container .dot {
	background: var(--secondaryAccent);
	color: var(--secondary-color);
	clip-path: circle(15px);
	padding: 1em;
	position: relative;
}

.summary-tabs .filter-date-wrapper {
	margin-left: .5em;
}


.summary-tabs [data-id=year] .filter-date-wrapper {
	margin-left: 2px;
}

.summary-tabs .filter-date-wrapper input {
	background: transparent;
	border: none;
	color: rgb(var(--font-color));
}

.summary-tabs .tab-item:not(.active) .filter-date-wrapper {
	display: none;
}

.summary-tabs .tab-item[data-id=daily] input {
	max-width: 88px;
}
.summary-tabs .tab-item[data-id=month] input {
	max-width: 64px;
}
.summary-tabs .tab-item[data-id=year] input {
	max-width: 58px;
}

.summary-tabs input,
.summary-tabs select {
	outline: none;
}

.summary-tabs input[type=date],
.summary-tabs input[type=month] {
	position: relative;
	width: 150px;
	color: rgb(var(--font-color));
}

.summary-tabs input[type=date]:before,
.summary-tabs input[type=month]:before {
	content: attr(data-date);
	display: inline-block;
	color: rgb(var(--font-color));
}

.summary-tabs input[type=date]::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button,
.summary-tabs input[type=month]::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button {
	display: none;
}

.summary-tabs input[type=date]::-webkit-calendar-picker-indicator,
.summary-tabs input[type=month]::-webkit-calendar-picker-indicator {
	position: absolute;
	top: 3px;
	right: 0;
	color: rgb(var(--font-color));
	opacity: 1;
}

.summary-tabs input[type="date"]::-webkit-inner-spin-button,
.summary-tabs input[type="month"]::-webkit-inner-spin-button,
.summary-tabs input[type="date"]::-webkit-calendar-picker-indicator,
.summary-tabs input[type="month"]::-webkit-calendar-picker-indicator {
	display: none;
	-webkit-appearance: none;
}

.filter-date-wrapper select {
	-moz-appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: none;
	color: rgb(var(--font-color));
	padding: 0 15px 0 7px;
}

.filter-date-wrapper .btn {
	cursor: pointer;
	margin-left: 4px;
	opacity: .6;
	padding: 0;
}

/* || Graphs */

.dash-wrapper .tab-content .wrapper {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	overflow: hidden;
	width: 100%;
}

.dash-wrapper .tab-content .wrapper:not(:last-child){
	border-bottom: var(--border);
}

.graph-wrapper {
	display: flex;
	max-width: 800px;
	width: 100%;
}

.graph-container {
	padding: 1em;
	width: 100%;
	flex: 1;
}

.graph-container canvas{
	width: 100% !important;
}

.graph-btn-wrapper {
	display: flex;
	flex-flow: column;
	padding: 0 1em 1em;
}

.graph-details {
	padding: 0 1em 1em;
	text-align: right;
}

.graph-btn {
	align-items: center;
	display: inline-flex;
	padding: 2px 7px;
	margin-bottom: 2px;
	transition: .3s ease-in-out;
	width: fit-content;
}

.graph-btn span:nth-child(2){
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.dark-theme .btn.graph-btn {
	background: none;
}

body.dark-theme .btn.graph-btn.active,
body.dark-theme .btn.graph-btn:hover {
	background: var(--black);
}

.graph-link-dot {
	background: var(--accent);
	border-radius: 20px;
	margin-right: 8px;
	padding: 8px;
}

/* Sidebar Details ------------------------ */

#sideMenu .sidebar_container {
	height: calc(100% - 1em);
	overflow-x: hidden;
	overflow-y: auto;
}

#sideMenu .sidebar_container .sidebar .form-item {
	position: relative;
}

#sideMenu .sidebar_container .sidebar .show-password {
	position: absolute;
	right: -3px;
	top: 27px;
}

#sideMenu .sidebar_container .sidebar .show-password .fa-eye {
	opacity: .5;
}

#sideMenu .overlay-menu.scroll {
	padding-right: 6px;
}

/* || Sales Leads --------------------------- */

.lead-list-wrapper .expanded .expand-content {
	padding: 1em;
}


/* || Dealer Calls --------------------------- */

.dealer-calls {
	height: 100%;
}

.dealer-calls .scroll {
	height: calc(100% - 82px);
	margin-right: -8px;
	padding-right: 15px;
}

.dealer-calls .search-wrapper {
	align-items: center;
	display: flex;
	justify-content: end;
	width: 100%;
}

.dealer-calls .search-wrapper i {
	margin-right: 10px;
}

.dealer-calls .search-wrapper input {
	background: transparent;
	border: none;
	border-bottom: var(--border);
	border-radius: 0;
	color: var(--secondary);
}

.dealer-calls .search-wrapper .call-history-search {
	min-width: 200px;
}


.dealer-calls .call-history-header {
	border-bottom: 2px solid;
	margin: 1em 0 10px;
	padding: 10px 5px;
	width: 100%;
}

.dealer-calls .call-history-header i {
	margin-left: 5px;
}

.dealer-calls .call-history-header div:not(.active) i {
	opacity: .4;
}

.dealer-calls .call-history-header .reverse i {
	transform: rotateX(180deg);
}

.dealer-calls .call-history-wrapper {
	width: 100%;
}

.dealer-calls audio {
	border-radius: 20px;
	height: 30px;
	width: 100%;
}


/* || Notes ---------------------------------- */

.rep-ideas,
.office-notes,
.sales-notes {
	display: flex;
	flex-flow: column;
	height: 100%;
	overflow: hidden;
}

/* || Office Notes --------------------------- */

.notes-wrapper {
	flex-grow: 1;
	margin: 0;
	padding-left: 7px
}

.note-row .note-header span{
	font-weight: 200;
}

.note-row .note-content,
.note-row .note-content p {
	font-weight: 400;
}

.note-row:not(:last-child) {
	border-bottom: var(--row-line);
}

.notes-wrapper .note-header {
	align-items: center;
	display: inline-flex;
	justify-content: space-between;
	width: 100%;
}

.notes-wrapper .note-header .notification {
	color: var(--secondaryAccent);
	font-weight: 400;
}

.notes-wrapper .note-header .notification button {
	padding: 4px;
}

.notes-wrapper .task-header {
	display: inline-flex;
}

.notes-wrapper .small {
	opacity: .5;
}

.notification-date-container {
	align-items: center;
	display: inline-flex;
	justify-content: end;
	width: 100%;
}

.notification-date-container i {
	font-size: .9em;
}

.notification-date-container > i {
	opacity: .4;
	margin-right: 5px;
}

.notification-date-container button {
	padding: 5px;
}

.textarea-wrapper .textarea-footer .btn {
	border: none !important;
}

.textarea-wrapper {
	background: var(--theme-background);
	border-radius: 3px;
	margin-top: 1em;
	position: relative;
}

.textarea-wrapper .tox-tinymce {
	background: var(--theme-background);
	border: none !important;
	border-radius: 3px !important;
	padding: 0 10px 10px;
}

.textarea-wrapper .tox-tinymce html {
	background: #323F46;
}

.textarea-wrapper .tox-statusbar {
	border-top: none !important;
}

.textarea-wrapper .tox-edit-area {
	margin: 10px 0;
}

.textarea-wrapper .textarea-footer {
	align-items: center;
	display: inline-flex;
	justify-content: end;
	width: 100%;
}

.textarea-wrapper .textarea-footer input {
	font-size: var(--primary-btn-size);
}

/* || Sales Map --------------------------- */

.sales-map #salesMap {
	border-radius: 3px;
	height: 100%;
	min-height: calc(100vh - 222px);
	width: 100%;
}

.sales-map .map-content > *:not(button) {
	color: var(--black);
}

.sales-map .legend {
	display: inline-flex;
}

.sales-map .legend .legend-item {
	display: inline-flex;
	margin-right: 1em;
	cursor: pointer;
}

.sales-map .legend .legend-item.inactive {
	text-decoration: line-through;
}

.sales-map .legend .dot {
	height: 18px;
}

.sales-map ::-webkit-scrollbar {
	background: none;
}

div.salesMap div#salesMap div.map-content a{
	color:black;
}

/* || Rep Ideas --------------------------- */

.rep-ideas .note-header .button-wrapper .btn {
	padding: 0 0.75rem;
}

.rep-ideas .note-header .button-wrapper .btn:first-child {
	border-right: var(--border);
	border-radius: 0;
}
.rep-ideas .note-header .button-wrapper .btn:last-child {
	margin-top: 2px;
}

.rep-ideas .note-row.active {
	background: #ffffff22;
	border-radius: 5px;
	padding: 4px 0 1px 9px;
}

.rep-ideas .edit-wrapper {
	padding: 6px 2px 0;
	text-align: end;
}

/* || Written / Delivered --------------------- */

.delivered-contracts,
.written-contracts {
	display: flex;
	flex-flow: column;
	height: 100%;
}

.delivered-contracts .table-section,
.written-contracts .table-section {
	padding-left: 0.55rem;
}

.delivered-contracts .table-section:not(:last-child),
.written-contracts .table-section:not(:last-child) {
	padding-bottom: 1em;
	margin-bottom: 1em;
	flex-grow: 1;
}

.delivered-contracts .table-section:first-child,
.written-contracts .table-section:first-child {
	margin-top: 11px;
}

.delivered-contracts .row.total,
.written-contracts .row.total {
	border-top: 1px solid;
	padding-top: 7px;
}

.delivered-contracts .row.sub-total {
	background: #0000004f;
}

.delivered-contracts .row.sub-total:first-child {
	margin-top: 10px;
}

.delivered-contracts .date-filtered,
.written-contracts .date-filtered {
	border-bottom: var(--border);
	padding: 0.5em 1em 1em;
	text-align: center;
}

/* || Sales Admin -------------------------- */

.sales-admin .product-wrapper {
	display: grid;
	font-size: .9em;
	grid-template-columns: 119px calc(100% - 119px);
	overflow-x: hidden;
	width: 100%;
}

.sales-admin .product-wrapper .labels,
.sales-admin .product-wrapper .info-container {
	display: flex;
	flex-flow: column;
}
.sales-admin .product-wrapper .label:first-child {
	margin-top: 56px;
}

.sales-admin .product-wrapper .label,
.sales-admin .product-wrapper .item {
	align-items: center;
	display: inline-flex;
	justify-content: space-between;
	padding: 1em 10px;
}

.sales-admin .product-wrapper .label:nth-child(odd),
.sales-admin .product-wrapper .item:nth-child(even) {
	background-color: var(--table-even);
}

.sales-admin .product-wrapper .item {
	padding: 1em .7em;
	white-space: nowrap;
}

.sales-admin .product-wrapper .info-wrapper {
	display: inline-flex;
	min-width: 100%;
	overflow-x: auto;
	width: 100%;
}

.sales-admin .product-wrapper .info-container {
	align-items: stretch;
	display: inline-flex;
	border-left: var(--border);
	min-width: 200px;
	width: 100%;
}

.sales-admin .product-wrapper .definition {
	cursor: pointer;
	font-size: .8em;
	opacity: .6;
	padding-left: 5px;
}


div.button-container{
	display: flex;
	justify-content: space-between;
	width: 300px; /* Adjust the width as needed */
	margin: 0 auto; /* Center the container horizontally */
}
div.button-container button {
	padding: 10px 20px;
	font-size: 16px;
}