:root {
	--primary-bg: #fff;
	--secondary-bg: #eee;
	--hover-bg: #f0f0f0;
	--disabled-fill-color: #bababa;

	--primary-font: #000;
	--secondary-font: #333;
	--alt-font: #777;
	--placeholder-font: rgba(0,0,0,.5);
	--positive-font: #7cb517;
	--negative-font: #db4437;
	--informative-font: #ef966b;

	--style-fill: #409aed;
	--style-light-fill: #409aedaa;
	--style-semi-fill: #409aed22;
	--style-font: #fff;
	--style-placeholder-font: rgba(255,255,255,.8);
	--style-alt-fill: rgba(255,255,255,.2);
	--style-invert-fill: rgba(0,0,0,.1);

	--border-color: var(--style-invert-fill);

	--icon-filters: unset;

	--bg-image: url(/images/background);
	--select-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

#body.dark {
	--primary-bg: #222;
	--secondary-bg: #1a1a1a;
	--hover-bg: #333;

	--primary-font: #fff;
	--secondary-font: #ddd;
	--alt-font: #777;
	--placeholder-font: rgba(255,255,255,.5);

	--style-invert-fill: rgba(255,255,255,.1);
	--border-color: var(--style-invert-fill);

	--icon-filters: invert(100%);

	--select-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23FFFFFF%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23FFFFFF%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.banner {
	width: 100%;
	padding: 10px;
	text-align: center;
}
.banner .title {
	font-size: 20px;
	font-weight: bold;
}
.banner .subtitle {
	font-size: 15px;
	color: var(--alt-font);
}

div.maps {
	background-color: var(--primary-bg);
	width: calc(100% - 90px);
    height: 100%;
    border: none;
    outline: none;
    position: absolute;
    top: 0;
    left: 90px;
    z-index: 1;
}

iframe.maps {
	width: calc(100% - 90px);
    height: 100%;
    border: none;
    outline: none;
    position: absolute;
    top: 0;
    left: 90px;
    z-index: 2;
}

input[disabled],select[disabled],textarea[disabled] {
	border: none !important;
}

input[type=time]::-webkit-calendar-picker-indicator { 
	filter: var(--icon-filters);
}

.relative {
	position: relative;
}

.categoryResults {
	width: 100%;
    max-height: 110px;
    padding: 10px;
    background: var(--secondary-bg);
    position: absolute;
    z-index: 1;
    overflow-y: scroll;
    overflow-x: hidden;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.searchResultBusiness {
	width: 280px;
}

.paymentHistoryDescription {
	width: 200px;
}

.tagResultBusiness {
	width: 450px;
}

.invoiceDescription {
	width: 380px;
}

.preload * {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	transition: none !important;
 }

 .bold {
 	font-weight: bold;
 }

 @font-face {
    font-family: 'Hack';
    src: url('/css/fonts/hack-regular.woff2') format('woff2'), url('/css/fonts/hack-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Hack';
    src: url('/css/fonts/hack-bold.woff2') format('woff2'), url('/css/fonts/hack-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Hack';
    src: url('/css/fonts/hack-italic.woff2') format('woff2'), url('/css/fonts/hack-italic.woff?') format('woff');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Hack';
    src: url('/css/fonts/hack-bolditalic.woff2') format('woff2'), url('/css/fonts/hack-bolditalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}

* {
	font-family: 'Open Sans', sans-serif;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	box-sizing: border-box;

	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;

	-webkit-mask-size: contain;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-moz-mask-size: contain;
	-moz-mask-position: center;
	-moz-mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
}

*:not(input):not(textarea) {    
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

form table {
	border-spacing: 10px 0;
}

input[type=checkbox] {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeSpeed;
	width: 13px;
	height: 13px;
	display: block;
	position: relative;
	cursor: pointer;
	margin-left: auto;
	margin-right: auto;
}

input[type=checkbox]:after {
    content: "";
    vertical-align: middle;
    text-align: center;
    line-height: 15px;
    position: absolute;
    cursor: pointer;
    height: 15px;
    width: 15px;
    left: -2px;
    top: -2px;
    font-size: 10px;
    background: var(--primary-bg);
    border: 1px solid var( --border-color);
    border-radius: 3px;
}

input[type=checkbox]:checked:after {
	background: var(--style-fill);
	content: "\2714";
	color: var(--style-font);
}

input {
	background-color: transparent;
	border: none;
	outline: none;
}

input::-webkit-contacts-auto-fill-button, input::-webkit-credentials-auto-fill-button {
	visibility: hidden;
	display: none !important;
	pointer-events: none;
	height: 0;
	width: 0;
	margin: 0;
}

select {
	color: var(--primary-font);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0px;
    background-image: var(--select-image);
    background-color: var(--primary-bg);
    background-position: 98% 50%;
    background-repeat: no-repeat;
    background-size: 10px;
}

input, textarea {
	background: transparent;
	color: var(--primary-font);
}

textarea {
	resize: none;
}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus textarea:-webkit-autofill, textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
}

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

#body {
	height: 100%;
	width: 100%;
	min-width: 800px;
    background-image: var(--bg-image);
    background-color: var(--secondary-bg);
    background-size: cover;
    display: flex;
    flex-direction: column;
    color: var(--primary-font);
}

#body.dark:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    filter: invert(100);
}

.styled {
	color: var(--style-fill);
}

.hidden {
	display: none;
}

.logo {
	-webkit-mask-image: url(/images/amrlogo);
	-moz-mask-image: url(/images/amrlogo);
	mask-image: url(/images/amrlogo);
	background-color: var(--style-fill);
	height: 50px;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
}

::placeholder {
	color: var(--placeholder-font);
}

::selection {
  background-color: var(--style-fill);
  color: var(--style-font);
}

::-moz-selection {
  background-color: var(--style-fill);
  color: var(--style-font);
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
    height: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: var(--style-light-fill);
}

.spacer {
	margin-top: 20px;
}

.hover {
	cursor: pointer;
}

.left {
	text-align: left;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

.inline {
	display: inline-block;
}

a, .link {
	font-weight: bold;
	text-decoration: none;
	color: var(--style-fill);
}
a:hover, .link:hover {
	color: var(--style-light-fill);
}

.shown {
	display: block !important;
	opacity: 1 !important;
}

#header {
	width: 100%;
	height: 70px;
	line-height: 50px;
	background-color: var(--style-fill);
	padding: 10px 10px 10px 20px;
    -webkit-box-shadow: 0 1px 8px rgba(0,0,0,.3);
    -moz-box-shadow: 0 1px 8px rgba(0,0,0,.3);
    box-shadow: 0 1px 8px rgba(0,0,0,.3);
    z-index: 80;
}

#headerContent {
	width: 100%;
	height: 100%;
}

#headerLogo {
	width: 50px;
	height: 100%;
	-webkit-mask-image: url(/images/amrlogo);
	-moz-mask-image: url(/images/amrlogo);
	mask-image: url(/images/amrlogo);
	-webkit-mask-size: 25px;
	-moz-mask-size: 25px;
	mask-size: 25px;
	background-color: var(--style-font);
	float: left;
}

#headerSeparator {
	width: 1px;
	height: 40px;
	background-color: var(--style-alt-fill);
	margin-left: 20px;
	margin-right: 20px;
	position: relative;
	top: 5px;
	float: left;
}

#headerTitle {
	max-width: 125px;
	height: 100%;
	color: var(--style-font);
	font-size: 20px;
	float: left;
}

#headerSearchIcon {
	width: 25px;
	display: table-cell;
	background-image: url(/images/search);
	background-size: contain;
}

#headerSearch {
	min-width: 500px;
	height: 100%;
	background-color: var(--style-alt-fill);
	float: right;
	border-radius: 5px;
	display: table;
	padding-left: 10px;
	padding-right: 10px;
}

#iconSearch {
	width: 100%;
	height: 100%;
	float: right;
	border-radius: 5px;
	display: table;
	padding-bottom: 10px;
}

#headerSearchBox {
	width: 100%;
	height: 100%;
	font-size: 17px;
	color: var(--style-font);
	display: table-cell;
	padding-left: 5px;
}

#iconSearchBox {
	width: 100%;
	height: 100%;
	font-size: 17px;
	color: var(--style-font);
	display: block;
}

#iconSearchBox {
	color: var(--primary-font);
}

#headerSearchBox::placeholder {
	color: var(--style-placeholder-font);
}

#searchResultsHolder {
	max-height: 500px;
	width: 500px;
	background-color: var(--primary-bg);
	position: absolute;
	top: 0;
	right: 10px;
	z-index: 110;
	display: none;
	padding: 10px;
    overflow-y: scroll;
}

.searchResult {
	height: 90px;
}

.searchResult:hover {
	background-color: var(--hover-bg);
}

.collapse {
	border-collapse: collapse;
}

.tagResult {
	height: 60px;
}

.searchIcon {
	width: 50px;
    background-size: 25px;
    background-color: var(--style-fill);
}

.searchIcon.contact {
	background-image: url(/images/contact);
}
.searchIcon.name {
	background-image: url(/images/name);
}
.searchIcon.company {
	background-image: url(/images/company);
}
.searchIcon.email {
	background-image: url(/images/email);
}
.searchIcon.phone {
	background-image: url(/images/phone);
}

#main {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	overflow: hidden;
	position: relative;
}

#blackout {
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.2);
	z-index: 90;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}

#menu {
	width: 90px;
	height: 100%;
	background-color: var(--primary-bg);
	-webkit-box-shadow: 0 16px 10px 0 rgba(0,0,0,0.14), 0 11px 18px 0 rgba(0,0,0,0.12), 0 13px 5px -1px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 16px 10px 0 rgba(0,0,0,0.14), 0 11px 18px 0 rgba(0,0,0,0.12), 0 13px 5px -1px rgba(0,0,0,0.2);
	box-shadow: 0 16px 10px 0 rgba(0,0,0,0.14), 0 11px 18px 0 rgba(0,0,0,0.12), 0 13px 5px -1px rgba(0,0,0,0.2);
	padding: 10px;
	z-index: 80;
}

.menuSeparator {
	width: 100%;
	height: 1px;
	background-color: var(--style-invert-fill);
}

.menuIcon {
	height: 100%;
    width: 100%;
    position: absolute;
    -webkit-mask-size: 30px;
    -moz-mask-size: 30px;
    mask-size: 30px;
    background-color: var(--style-fill);
    transition: -webkit-mask-position .25s, -moz-mask-position .25s, mask-position .25s;
}

.menuItem {
	width: 100%;
	height: 70px;
	margin: 5px 0px 5px 0px;
	border-radius: 10px;
	font-size: 11px;
	text-align: center;
	line-height: 90px;
	color: rgba(0,0,0,0);
	transition: color .25s, line-height .25s;
	position: relative;
}

.menuItem:hover > .menuIcon, .menuItem.current > .menuIcon {
	-webkit-mask-position: center 12px;
	-moz-mask-position: center 12px;
	mask-position: center 12px;
}

.menuItem:hover {
	background-color: var(--hover-bg);
	color: var(--secondary-font);
	line-height: 102.5px;
}

.menuItem.current {
	background-color: var(--style-semi-fill);
	color: var(--secondary-font);
	line-height: 102.5px;
}

.menuIcon.home {
	-webkit-mask-image: url(/images/home);
	-moz-mask-image: url(/images/home);
	mask-image: url(/images/home);
}
.menuIcon.records {
	-webkit-mask-image: url(/images/records);
	-moz-mask-image: url(/images/records);
	mask-image: url(/images/records);
}
.menuIcon.leads {
	-webkit-mask-image: url(/images/leads);
	-moz-mask-image: url(/images/leads);
	mask-image: url(/images/leads);
}
.menuIcon.apple-leads {
	-webkit-mask-image: url(/images/apple);
	-moz-mask-image: url(/images/apple);
	mask-image: url(/images/apple);
}
.menuIcon.alexa-leads {
	-webkit-mask-image: url(/images/alexa);
	-moz-mask-image: url(/images/alexa);
	mask-image: url(/images/alexa);
}
.menuIcon.scans {
	-webkit-mask-image: url(/images/scans);
	-moz-mask-image: url(/images/scans);
	mask-image: url(/images/scans);
}
.menuIcon.tags {
	-webkit-mask-image: url(/images/tags);
	-moz-mask-image: url(/images/tags);
	mask-image: url(/images/tags);
}
.menuIcon.fulfillment {
	-webkit-mask-image: url(/images/fulfillment);
	-moz-mask-image: url(/images/fulfillment);
	mask-image: url(/images/fulfillment);
}
.menuIcon.builder {
	-webkit-mask-image: url(/images/builder);
	-moz-mask-image: url(/images/builder);
	mask-image: url(/images/builder);
}
.menuIcon.admin {
	-webkit-mask-image: url(/images/admin);
	-moz-mask-image: url(/images/admin);
	mask-image: url(/images/admin);
}
.menuIcon.apple-search {
	-webkit-mask-image: url(/images/map);
	-moz-mask-image: url(/images/map);
	mask-image: url(/images/map);
}
.menuIcon.history {
	-webkit-mask-image: url(/images/history);
	-moz-mask-image: url(/images/history);
	mask-image: url(/images/history);
}
.menuIcon.settings {
	-webkit-mask-image: url(/images/settings);
	-moz-mask-image: url(/images/settings);
	mask-image: url(/images/settings);
}
.menuIcon.logout {
	-webkit-mask-image: url(/images/logout);
	-moz-mask-image: url(/images/logout);
	mask-image: url(/images/logout);
}
.menuIcon.recordings {
	-webkit-mask-image: url(/images/recordings);
	-moz-mask-image: url(/images/recordings);
	mask-image: url(/images/recordings);
}
.icon.apple {
	-webkit-mask-image: url(/images/apple);
	-moz-mask-image: url(/images/apple);
	mask-image: url(/images/apple);
}

.listItem {
	width: 70px;
	margin: 0px 5px 0px 5px;
	color: var(--secondary-font);
	line-height: 102.5px;
}

.listItem .menuIcon {
	-webkit-mask-position: center 12px;
	-moz-mask-position: center 12px;
	mask-position: center 12px;
}

.menuIcon.addCard {
	-webkit-mask-image: url(/images/addcard);
	-moz-mask-image: url(/images/addcard);
	mask-image: url(/images/addcard);
}
.menuIcon.invoice {
	-webkit-mask-image: url(/images/invoice);
	-moz-mask-image: url(/images/invoice);
	mask-image: url(/images/invoice);
}
.menuIcon.cards {
	-webkit-mask-image: url(/images/cards);
	-moz-mask-image: url(/images/cards);
	mask-image: url(/images/cards);
}
.menuIcon.charge {
	-webkit-mask-image: url(/images/charge);
	-moz-mask-image: url(/images/charge);
	mask-image: url(/images/charge);
}
.menuIcon.subscription {
	-webkit-mask-image: url(/images/subscription);
	-moz-mask-image: url(/images/subscription);
	mask-image: url(/images/subscription);
}

#content {
	width: 100%;
	height: 100%;
	flex: 1;
	overflow-y: scroll;
}

#holder {
	display: grid;
	width: 100%;
	max-width: 710px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px 20px 0px 20px;
    margin-bottom: 20px;
}

#holder[data-page=admin], #holder[data-page=settings] {
	max-width: 1000px;
}

.section {
	background-color: var(--primary-bg);
}

.section:not(#searchResultsHolder) {
	border-radius: 15px;
}

#searchResultsHolder {
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}

.section:not([data-name=weather], [data-name=sort]) {
	width: 100%;
}

.section:not(.noPadding) {
	padding: 20px;
}

.section.transparent {
	background-color: transparent;
}

.section:not(#searchResultsHolder):not([data-name=weather]) {
	margin-top: 20px;
}

.section:not(.transparent) {
	-webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 1px 6px rgba(0,0,0,0.2);
    box-shadow: 0 1px 6px rgba(0,0,0,0.2);
    transition: box-shadow .25s;
}
.section:not(.transparent):hover {
	-webkit-box-shadow: 0 10px 10px 0 rgba(0,0,0,0.2), 0 0px 20px 0 rgba(0,0,0,0.22);
	-moz-box-shadow: 0 10px 10px 0 rgba(0,0,0,0.2), 0 0px 20px 0 rgba(0,0,0,0.22);
	box-shadow: 0 10px 10px 0 rgba(0,0,0,0.2), 0 0px 20px 0 rgba(0,0,0,0.22);
}

.grid {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.grid .submitButton:not(:first-child) {
	margin-left: 10px;
}

.grid .submitButton:not(:last-child) {
	margin-right: 10px;
}

.gridItem {
	min-height: 264px;
}

.gridItem.auto {
	min-height: auto;
}

.gridItem.short {
	min-height: auto;
	height: 120px !important;
}

.gridItem.half {
	width: calc(50% - 10px);
	height: fit-content;
}

.gridItem.full {
	width: 100%;
}

#holder[data-page=records] .gridItem {
    display: flex;
    flex-wrap: wrap;
}

.paddingTop {
	padding-top: 20px;
}

.bigger {
	font-size: 20px;
	line-height: 30px;
    height: 30px;
}
.bigger.auto {
	height: auto;
}

.big {
	font-size: 60px;
	line-height: 132px;
    height: 132px;
}

.notAsBig {
	font-size: 55px;
	line-height: 100px;
    height: 100px;
}

form#password table.formTable {
	padding-top: 19px;
    padding-bottom: 19px;
}

.sectionTitleHolder {
	display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px;
    margin-bottom: 10px;
}

.sectionTitle {
	font-size: 15px;
	font-weight: bold;
}

.companyIcon {
	display: inline-block;
	height: 30px;
	width: 30px;
	border-radius: 50%;
	margin-right: 5px;
}

.companyIcon[data-id=vpr] {
	background-image: url(/images/clogo);
}

.companyIcon[data-id=amr] {
	background-image: url(/images/applemaps);
}

.companyIcon[data-id=bpr] {
	background-image: url(/images/bing);
	background-color: #fff;
}

.sectionInfo {
	width: 100%;
	display: table;
	font-size: 12px;
}

#picker {
    display: flex;
    justify-content: center;
}

.section[data-name=info] .sectionInfo table {
	display: table-cell;
}

.section table:not(.infoTable):not(.weather) {
	width: 100%;
}

.sectionFooter {
	width: 100%;
	text-align: center;
	margin-top: 10px;
}

.contactInfoField {
    font-weight: bold;
}

.contactInfoField.top {
    vertical-align: top;
}

.contactInfoField::after {
	content: ":";
}

.contactField {
	display: table-cell;
	height: 21px;
}
.contactField:not(.tag):not(.name) {
	width: 220px;
}

.autoMargin {
	margin-left: auto;
	margin-right: auto;
}

.actionButtons {
    display: flex;
}
.actionButton:not(.link):not(.floatingAction):not(.pin):not(.deletePhoto):not(.deleteBannerPhoto):not(.selectImage) {
	background-color: var(--style-fill);
}
.actionButton {
	width: 25px;
	height: 25px;
	background-position: center;
	-webkit-transition: background-image .25s;
	-moz-transition: background-image .25s;
	transition: background-image .25s;
}
.actionButton.add {
	-webkit-mask-image: url(/images/add);
	-moz-mask-image: url(/images/add);
	mask-image: url(/images/add);
}
.actionButton.edit {
	-webkit-mask-image: url(/images/edit);
	-moz-mask-image: url(/images/edit);
	mask-image: url(/images/edit);
}
.actionButton.save {
	-webkit-mask-image: url(/images/save);
	-moz-mask-image: url(/images/save);
	mask-image: url(/images/save);
}
.actionButton.delete {
	-webkit-mask-image: url(/images/delete);
	-moz-mask-image: url(/images/delete);
	mask-image: url(/images/delete);
}
.actionButton.outlink {
	-webkit-mask-image: url(/images/outlink);
	-moz-mask-image: url(/images/outlink);
	mask-image: url(/images/outlink);
}
.actionButton.verify {
	-webkit-mask-image: url(/images/verified);
	-moz-mask-image: url(/images/verified);
	mask-image: url(/images/verified);
}
.actionButton.close {
	-webkit-mask-image: url(/images/add);
	-moz-mask-image: url(/images/add);
	mask-image: url(/images/add);
	transform: rotate(45deg);
}
.actionButton.refund {
	-webkit-mask-image: url(/images/refund);
	-moz-mask-image: url(/images/refund);
	mask-image: url(/images/refund);
}
.actionButton.receipt {
	-webkit-mask-image: url(/images/receipt);
	-moz-mask-image: url(/images/receipt);
	mask-image: url(/images/receipt);
}
.actionButton.hide {
	-webkit-mask-image: url(/images/hide);
	-moz-mask-image: url(/images/hide);
	mask-image: url(/images/hide);
}
.actionButton.retry {
	-webkit-mask-image: url(/images/charge);
	-moz-mask-image: url(/images/charge);
	mask-image: url(/images/charge);
}
.actionButton.shred {
	-webkit-mask-image: url(/images/shred);
	-moz-mask-image: url(/images/shred);
	mask-image: url(/images/shred);
}
.actionButton.resend {
	-webkit-mask-image: url(/images/resend);
	-moz-mask-image: url(/images/resend);
	mask-image: url(/images/resend);
}
.actionButton.icons {
	-webkit-mask-image: url(/images/icons);
	-moz-mask-image: url(/images/icons);
	mask-image: url(/images/icons);
}

.actionButton:not(.apple):hover {
	opacity: 0.7;
}

.actionButton.delete, .actionButton.outlink {
	float: right;
}

.floatingActionButtons {
	width: 56px;
	position: fixed;
	bottom: 32px;
	right: 32px;
	z-index: 80;
}

.floatingActionButton {
	width: 56px;
    height: 56px;
    background-color: var(--style-fill);
    border-radius: 55px;
    -webkit-box-shadow: 0 6px 10px 0 rgba(0,0,0,0.3);
    -moz-box-shadow: 0 6px 10px 0 rgba(0,0,0,0.3);
    box-shadow: 0 6px 10px 0 rgba(0,0,0,0.3);  
}

.floatingActionButton:not(:last-child) {
	margin-bottom: 10px;
}

.floatingAction {
	width: 100%;
	height: 100%;
}

.deleteCell, .outlinkCell {
	width: 30px;
}
.verifyCell {
	width: 40px;
}

#newAppointment {
    background-image: url(/images/newappointment);
    background-size: 25px;
    background-position: center;
    background-repeat: no-repeat;
}

#newAppointmentAlt {
    background-image: url(/images/newappointmentalt);
    background-size: 25px;
    background-position: center;
    background-repeat: no-repeat;
}

#newContact {
    background-image: url(/images/newcontact);
    background-size: 25px;
    background-position: center;
    background-repeat: no-repeat;
}

#saveWebsite {
    background-color: var(--style-font);
    -webkit-mask-image: url(/images/save);
	-moz-mask-image: url(/images/save);
	mask-image: url(/images/save);
	-webkit-mask-size: 25px;
	-moz-mask-size: 25px;
	mask-size: 25px;
}

.insideField {
	position: relative;
    float: right;
    margin-top: -32px;
    margin-right: 5px;
}

#listIcons {
	height: 400px;
	overflow-y: scroll;
}
#listIcons table tr {
	height: 40px;
	padding-bottom: 5px;
}

.listIcon {
	color: var(--primary-font);
	height: 30px;
	width: 30px;
    margin: 10px;
}

.theIcon {
	width: 100%;
	height: 100%;
	font-size: 30px;
}

.unset {
	justify-content: unset;
}

.start {
	align-content: start;
	justify-content: start;
}

.tag {
	position: relative;
    padding: 0px 20px 0px 5px;
    color: var(--style-font);
    background-color: var(--style-fill);
    display: flex;
    height: 24px;
    line-height: 24px;
    min-width: 50px;
}

.tag::before {
	content: "";
    display: inline-block;
    position: absolute;
    width: 15px;
    right: 0;
    top: 0;
    height: 24px;
    background-color: var(--primary-bg);
}

.tag::after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 15px;
    right: 0;
    top: 0;
    height: 24px;
    background-color: var(--style-fill);
    -webkit-mask-image: url(/images/tag);
    -moz-mask-image: url(/images/tag);
    mask-image: url(/images/tag);
    -webkit-mask-size: 12px 24px;
    -moz-mask-size: 12px 24px;
    mask-size: 12px 24px;
    -webkit-mask-position: top left;
    -moz-mask-position: top left;
    mask-position: top left;
    -webkit-mask-repeat: no-repeat;
    -moz-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.iconList {
	display: flex;
}

.submitButton {
    min-width: 100px;
    width: auto;
    padding: 0px 10px 0px 10px;
	height: 40px;
	background-color: var(--style-fill);
	color: var(--style-font);
	line-height: 40px;
	border-radius: 5px;
	text-align: center;
	font-size: 15px;
	text-transform: uppercase;
}

.submitButton:not(.disabled):not(.altButton):hover {
	background-color: var(--style-light-fill);
}

.payments {
	width: 100%;
	overflow: hidden;
}

.paymentCard {
	line-height: 27px;
    width: 40px;
}

.positive {
	color: var(--positive-font);
}

.informative {
	color: var(--informative-font);
}

.negative {
	color: var(--negative-font) !important;
}

.negativeBackground {
	background-color: var(--negative-font) !important;
}

.notes {
	border-spacing: 0 15px;
	width: 100%;
    overflow: hidden;
    word-break: break-word;
}

.noteHeader, .noteContents {
	width: 100%;
}

.note {
	background-color: var(--hover-bg);
	padding: 10px;
	border-radius: 10px;
	min-height: 40px;
	height: 40px;
	width: 100%;
}

.pin {
	-webkit-mask-image: url(/images/pin);
	-moz-mask-image: url(/images/pin);
	mask-image: url(/images/pin);
	-webkit-mask-size: 25px;
	-moz-mask-size: 25px;
	mask-size: 25px;
	-webkit-mask-position: right;
	-moz-mask-position: right;
	mask-position: right;
	background-color: var(--disabled-fill-color);
	width: 40px;
	height: 40px;
	display: none;
	float: right;
}

.pin:hover {
	opacity: 0.7;
}

.noteHolder.pinned .pin {
	display: block;
	background-color: var(--style-fill);
}

.noteHolder:hover .pin {
	display: block;
}

.sectionAction {
	width: 200px;
    display: flex;
    justify-content: flex-end;
}

.inputField, .contactField select, .sectionAction select {
	width: 100%;
	height: 19px;
    border: none;
    outline: none;
    border-bottom: 1px solid var(--border-color);
    padding: 0;
    box-sizing: border-box;
    font-size: 12px;
}
.inputField.name {
	font-size: 15px;
	height: 21px;
}
.contactField select[data-name=tag] {
	width: 100px;
	font-size: 15px;
	height: 24px;
	border: none;
	background-color: var(--style-fill);
	color: var(--style-font);
}

.infoTable {
	width: 50%;
}

.popover {
	width: 600px;
	position: absolute;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	z-index: 100;
	background-color: var(--primary-bg);
	box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.4);
	padding: 20px 20px 20px 20px;
	opacity: 0;
	display: none;
	border-radius: 15px;
}

.popover .sectionInfo form {
	max-height: 500px;
	overflow-y: scroll;
	display: block;
}

.spacedTable {
	border-spacing: 5px;
	position: relative;
}

.stickyHeader {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--primary-bg);
    z-index: 1;
}

.popover table:not(.discountTable):not(.nextBillTable),.gridItem table {
	width: 100%;
	display: table;
}

.dateAndDiscountTable {
	margin-top: 20px;
	margin-bottom: 20px;
}

.dateAndDiscountTable .price, .dateAndDiscountTable .date {
	width: 75px;
	text-align: center;
}

.popover:not([data-name=subscription]):not([data-name=editUsers]) input:not([type=checkbox]), .form input:not([type=checkbox]) {
	width: 100%;
	height: 40px;
    border: none;
    outline: none;
    border-bottom: 1px solid var(--style-invert-fill);
    font-size: 14px;
    margin-top: 5px;
    padding: 0;
}

.popover[data-name=editUsers] {
	width: 1200px;
}

.popover[data-name=locationErrors] .sectionInfo th:first-child {
	text-align: left;
}

.quantity {
	width: 50px;
	text-align: center;
}

.proration {
	margin-top: 20px;
}

.proration tr td, .dateAndDiscountTable tr td {
	width: 33%;
}

.dateAndDiscountTable tr td select[data-name=interval] {
	width: 100px;
	text-align: center;
}

.popover:not([data-name=subscription]):not([data-name=editUsers]) select, .form select {
	width: 100%;
	height: 40px;
    border: none;
    outline: none;
    border-bottom: 1px solid var(--style-invert-fill);
    font-size: 14px;
    margin-top: 5px;
    padding: 0;
}

.popover textarea, .form textarea {
	width: 100%;
    height: 400px;
    border: none;
    outline: none;
    font-size: 14px;
    margin-top: 5px;
    padding: 0;
}

td.large {
    width: 180px;
}

td.small {
    width: 75px;
}

.form textarea.small {
	height: 200px;
}

.popoverActionBar {
	/*display: flex;*/
    justify-content: space-between;
    align-items: center;
    height: 30px;
    margin-top: 10px;
}

.popoverSubmit {
	float: right;
}

.disabled {
	background-color: var(--disabled-fill-color);
}

.cardIcon {
	height: 25px;
    -webkit-mask-position: left;
    -moz-mask-position: left;
    mask-position: left;
    -webkit-mask-size: 32px;
    -moz-mask-size: 32px;
    mask-size: 32px;
    background-color: var(--style-fill);
}

.popover[data-name=cards] .cardIcon {
	width: 40px;
}

.amex {
	-webkit-mask-image: url(/images/amex);
	-moz-mask-image: url(/images/amex);
	mask-image: url(/images/amex);
}
.visa {
	-webkit-mask-image: url(/images/visa);
	-moz-mask-image: url(/images/visa);
	mask-image: url(/images/visa);
}
.mastercard {
	-webkit-mask-image: url(/images/mastercard);
	-moz-mask-image: url(/images/mastercard);
	mask-image: url(/images/mastercard);
}
.discover {
	-webkit-mask-image: url(/images/discover);
	-moz-mask-image: url(/images/discover);
	mask-image: url(/images/discover);
}
.diners {
	-webkit-mask-image: url(/images/diners);
	-moz-mask-image: url(/images/diners);
	mask-image: url(/images/diners);
}
.klarna {
	-webkit-mask-image: url(/images/klarna);
	-moz-mask-image: url(/images/klarna);
	mask-image: url(/images/klarna);
}
.cashapp {
	-webkit-mask-image: url(/images/cashapp);
	-moz-mask-image: url(/images/cashapp);
	mask-image: url(/images/cashapp);
}

input[data-stripe="number"]::after {
	content: "blah";
	width: 100px;
	height: 100px;
	position: absolute;
	top: 0;
	left: 0;
	background-color: red;
}

#cardNumberHolder {
	position: relative;
}

.cardNumber {
	width: 140px;
}

#cardVerificationIcon {
	position: absolute;
    right: 0;
    top: 8px;
    height: 30px;
    width: 30px;
	-webkit-mask-image: url(/images/verified);
	-moz-mask-image: url(/images/verified);
	mask-image: url(/images/verified);
	background-color: var(--style-fill);
	display: none;
}

.inline {
	display: inline-block;
}

.devices {
	display: block;
	height: 19px;
}

.os {
    height: 100%;
    width: 21px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
}
.os.shift {
    top: 4px;
    position: relative;
}
.os.Windows {
	background-image: url(/images/Windows);
}
.os.macOS {
	background-image: url(/images/macOS);
}
.os.Ubuntu {
	background-image: url(/images/Ubuntu);
}
.os.Linux {
	background-image: url(/images/Linux);
}
.os.Android {
	background-image: url(/images/Android);
}
.os.iOS {
	background-image: url(/images/iOS);
}

.verified {
    position: relative;
    height: 17px;
    width: 17px;
    top: 4px;
    left: 0px;
    -webkit-mask-image: url(/images/verified);
	-moz-mask-image: url(/images/verified);
	mask-image: url(/images/verified);
	background-color: var(--style-fill);
    display: inline-block;
}
.camera {
    position: relative;
    height: 17px;
    width: 17px;
    top: 4px;
    left: 0px;
    -webkit-mask-image: url(/images/camera);
	-moz-mask-image: url(/images/camera);
	mask-image: url(/images/camera);
	background-color: var(--style-fill);
    display: inline-block;
}

.streetView {
	width: 100%;
	height: 100%;
	margin-top: -20px;
	display: block;
}
.streetViewLoading {
	height: 20px;
}

#presetDescription {
	padding: 0px 30px 0px 0px;
}

select[data-name=product] {
	width: 250px;
}

td[data-info=comments], textarea[data-name=comments] {
	vertical-align: top;
	height: 84px;
}

table.locations {
	border-spacing: 0px 10px;
}

table.locations td:first-child {
	width: 50%;
	padding-right: 10px;
}

.commentsOverflow {
    height: 84px;
    overflow: auto;
}

.lead {
	height: 75px;
}

.time {
	width: 60px;
}

div.name {
	width: 200px;
}

.address {
	width: 200px;
}

.phoneNumbers {
	width: 120px;
}

.section[data-name=weather], .section[data-name=sort]  {
	max-width: 300px;
    min-width: 240px;
    justify-self: end;
}

.section[data-name=weather] .sectionInfo {
    font-size: 12px;
    position: relative;
    right: 0;
    top: 0;
    display: grid;
}

.section[data-name=sort] .sectionInfo {
    font-size: 16px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.section[data-name=sort] .sortTimeZone {
	margin-left: auto;
    margin-right: auto;
}

.section[data-name=sort] .message {
	width: 100%;
}

.weather td.positive {
	padding-left: 10px;
}

.callIndicator {
	width: 60px;
}

.weatherIcon {
	height: 60px;
	width: 60px;
	margin-left: auto;
    margin-right: auto;
}

.weatherIcon.i01d {
	background-image: url(/images/weather/01d.svg);
}
.weatherIcon.i01n {
	background-image: url(/images/weather/01n.svg);
}
.weatherIcon.i02d {
	background-image: url(/images/weather/02d.svg);
}
.weatherIcon.i02n {
	background-image: url(/images/weather/02n.svg);
}
.weatherIcon.i0304 {
	background-image: url(/images/weather/0304.svg);
}
.weatherIcon.i09 {
	background-image: url(/images/weather/09.svg);
}
.weatherIcon.i10 {
	background-image: url(/images/weather/10.svg);
}
.weatherIcon.i11 {
	background-image: url(/images/weather/11.svg);
}
.weatherIcon.i13 {
	background-image: url(/images/weather/13.svg);
}
.weatherIcon.i50 {
	background-image: url(/images/weather/50.svg);
}

#emailSignature {
	margin-left: auto;
	margin-right: auto;
	width: fit-content;
}

.bannerHolder {
	height: 200px;
	width: 100%;
	padding: 10px;
	position: relative;
}

.bannerPhotoMessage {
	width: 100%;
    line-height: 180px;
    position: absolute;
    left: 0;
    top: 0;
    padding: 10px;
}

.newPhotoHolder {
	height: 50px;
	width: 100%;
	position: relative;
	display: flex;
	justify-content: center;
}

.bannerImage {
	height: 100%;
	width: 100%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	top: 0;
	left: 0;
}

.circleActionButton {
	height: 50px;
	width: 50px;
	background-color: var(--style-fill);
	border: 2px solid var(--style-font);
	border-radius: 50%;
	margin: 5px;
}

.selectImage {
	background-image: url(/images/upload);
	background-size: 25px;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
}

.deleteBannerPhoto {
	background-image: url(/images/whitetrash);
	background-size: 25px;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
}

.deletePhoto {
	background-image: url(/images/whiteadd);
	background-size: 20px;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	transform: rotate(45deg);
}

.galleryPhoto {
	height: 100px;
	width: calc(20% - 20px);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
    margin: 10px;
    display: inline-flex;
    position: relative;
}

.galleryPhoto:hover {
	cursor: move;
}

.deletePhotoHolder {
	position: absolute;
	top: -5px;
	right: -5px;
	height: 30px;
	width: 30px;
	background-color: var(--style-fill);
	border: 2px solid var(--style-font);
	border-radius: 50%;
}

.block {
	display: block !important;
}

.table {
	display: table;
}

.calendar {
	border-collapse: collapse;
}

.scroll {
	overflow: scroll;
	position: relative;
}

.scroll .appointments {
	height: 1200px;
	width: calc(100% - 45px);
	position: absolute;
	top: 0;
	left: 45px;
}

.calendar.hourly .appointment {
	position: absolute;
    border-radius: 10px;
    border: 2px solid #fff;
}

.calendar.hourly .appointment {
	transition: all 1s;
}

.calendar.hourly .appointment.color1 {
	background-color: #4285F4;
}
.calendar.hourly .appointment.color2 {
	background-color: #DB4437;
}
.calendar.hourly .appointment.color3 {
	background-color: #F4B400;
}
.calendar.hourly .appointment.color4 {
	background-color: #0F9D58;
}

.calendar .day {
	height: 90px;
	width: 90px;
	text-align: center;
	padding: 15px;
	font-size: 15px;
}

.calendar .day:not(.current):not(.today):not(:hover) {
	opacity: 0.5;
}

.calendar .day .inner {
	height: 100%;
	width: 100%;
	border-radius: 50%;
	line-height: 60px;
}

.calendar .day .inner:hover {
	cursor: pointer;
}

.calendar .day.today .inner {
	background: var(--style-light-fill);
	color: var(--style-font);
}

.calendar .day.today:hover > .inner {
	background: var(--style-fill);
}

.calendar .day:not(.today):hover > .inner {
	background: var(--hover-bg);
}

.calendar .day .inner.appointments {
	font-weight: bold;
}

.calendar .day:not(.today) .inner.appointments {
	color: var(--style-fill);
}

.calendar.view {
	height: 559px;
	display: block;
	box-sizing: border-box;
}

.calendar.hourly {
	border-top: 1px solid var(--border-color);
}

.calendar.hourly:last-child {
	border-bottom: 1px solid var(--border-color);
}

.calendar.hourly {
	height: 50px;
	width: 100%;
	display: inline-flex;
}
.calendar.hourly .hour {
	width: 45px;
	vertical-align: top;
	border-right: 1px solid var(--border-color);
	padding-right: 4px;
}

.calendly-overlay {
	height: 700px;
	width: 1000px;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -350px;
	margin-left: -500px;
	z-index: 100;
}

.calendly-popup {
	height: 100%;
	display: grid;
}

.calendly-close-overlay {
	width: 25px;
	height: 25px;
	background-color: var(--style-fill);
	position: absolute;
	right: 110px;
	top: 75px;
	background-position: center;
	-webkit-transition: background-image .25s;
	-moz-transition: background-image .25s;
	transition: background-image .25s;
	-webkit-mask-image: url(/images/add);
	-moz-mask-image: url(/images/add);
	mask-image: url(/images/add);
	transform: rotate(45deg);
}
.calendly-close-overlay:hover {
	cursor: pointer;
	opacity: 0.7;
}

.checkbox {
	opacity: 0;
	position: absolute;
}

.label {
	background-color: var(--style-invert-fill);
	border-radius: 50px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px;
	position: relative;
	height: 26px;
	width: 50px;
	transform: scale(1.2);
}

.label .ball {
	background-color: #fff;
	border-radius: 50%;
	position: absolute;
	top: 2px;
	left: 2px;
	height: 22px;
	width: 22px;
	transform: translateX(0px);
	transition: transform 0.2s linear;
}

.checkbox:checked + .label .ball {
	transform: translateX(24px);
}


.fa-moon {
	color: #f1c40f;
}

.fa-sun {
	color: #f39c12;
}