:root {
	/* Colors */
	--color-white: #fff;
	--color-black: #000;

	--color-gray-50: #fafafa;
	--color-gray-100: #f5f5f5;
	--color-gray-200: #eeeeee;
	--color-gray-300: #e0e0e0;
	--color-gray-400: #e5e5e5;
	--color-gray-500: #9e9e9e;
	--color-gray-600: #757575;
	--color-gray-900: #212121;

	--color-pink-50: #fce4ec;
	--color-pink-100: #f8bbd0;
	--color-pink-200: #f48fb1;

	--color-blue-50: #e3f2fd;
	--color-blue-100: #bbdefb;
	--color-blue-200: #90CAF9;
	--color-blue-300: #64B5F6;
	--color-blue-400: #42a5f5;
	--color-blue-500: #2196f3;
	--color-blue-600: #1e88e5;
	--color-blue-700: #2177d4;

	--color-purple-50: #ede7f6;
	--color-purple-100: #d1c4e9;
	--color-purple-300: #9575cd;

	--color-red-50: #ffebee;
	--color-red-100: #ffcdd2;
	--color-red-400: #ef5350;
	--color-red-600: #E53935;
	--color-red-800: #c62828;

	--color-green-50: #e8f5e9;
	--color-green-100: #c8e6c9;
	--color-green-400: #66bb6a;
	--color-green-600: #43a047;

	--color-teal-50: #e0f2f1;
	--color-teal-100: #b2dfdb;
	--color-teal-200: #80cbc4;

	--color-brown-50: #efebe9;
	--color-brown-100: #bcaaa4;
	--color-brown-200: #8d6e63;
	--color-brown-400: #8D6E63;

	--color-amber-50: #fff8e1;
	--color-amber-100: #ffecb3;
	--color-amber-200: #ffe082;
	--color-amber-300: #ffd54f;
	--color-amber-400: #ffca28;
	--color-amber-500: #ffc107;
	--color-amber-600: #ffb300;
	--color-amber-700: #ffa000;
	--color-amber-800: #ff8f00;
	--color-amber-900: #ff6f00;

	--color-base: #000;
	--color-base-rgb: 0, 0, 0;
	--color-base-background: #ffffff;

	--color-top-bar: #F4F4F4;

	/** Typography **/
	--base-font-size-lg: 18px;
	--base-line-height-lg: 1.56;

	--base-font-size: 15px;
	--base-line-height: 1.6;

	--base-font-size-sm: 14px;
	--base-line-height-sm: 1.14;

	--base-font-size-xsm: 12px;
	--base-line-height-xsm: 2;

	/* Layout */
	--base-container-width: 1374px;
	--base-container-gutter: 24px;
	--base-container-gutter-sm: 16px;

	--top-height: 58px;
	--top-height-mobile: 48px;
	--header-height: 48px;

	--default-entry-space: 15px;
	--quote-entry-space: 8px;

	/* Transitions */
	--duration-shortest: 0.15s;
	--duration-shorter: 0.2s;
	--duration-short: 0.25s;
	--duration-standard: 0.3s;

	/* Easing */
	--easing-out: cubic-bezier(0.0, 0, 0.2, 1);
	--easing-in: cubic-bezier(0.4, 0, 1, 1);
	--easing-sharp: cubic-bezier(0.4, 0, 0.6, 1);
	--easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);

	/* Options  */
	--border-radius-base: 4px;
	--border-radius-1: calc(var(--border-radius-base) * 1);
	--border-radius-2: calc(var(--border-radius-base) * 2);
	--border-radius-3: calc(var(--border-radius-base) * 3);
	--border-radius-4: calc(var(--border-radius-base) * 4);
	--border-radius-5: calc(var(--border-radius-base) * 5);

	/* Box Shadow  */
	--shadow-0: 'none';
	--shadow-1: 0px 0px 16px rgba(0, 0, 0, 0.08);
	--shadow-2: 0px 0px 16px rgba(0, 0, 0, 0.12);

	/* Z index  */
	--z-top: 1000;
	--z-dropdown: 1050;
	--z-overlay: 1100;
	--z-drawer: 1150;
	--z-modal: 1200;
	--z-tooltip: 1500;
}

/* ------------------------------------------------------------ *\
	Fonts
\* ------------------------------------------------------------ */

@font-face {
	font-family: 'Inter';
	src: url('/templates/htmlburger-spring-2023/css/fonts/Inter-SemiBold.woff2') format('woff2'),
		url('/templates/htmlburger-spring-2023/css/fonts/Inter-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('/templates/htmlburger-spring-2023/css/fonts/Inter-Regular.woff2') format('woff2'),
		url('/templates/htmlburger-spring-2023/css/fonts/Inter-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('/templates/htmlburger-spring-2023/css/fonts/Inter-Bold.woff2') format('woff2'),
		url('/templates/htmlburger-spring-2023/css/fonts/Inter-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('/templates/htmlburger-spring-2023/css/fonts/Inter-Black.woff2') format('woff2'),
		url('/templates/htmlburger-spring-2023/css/fonts/Inter-Black.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('/templates/htmlburger-spring-2023/css/fonts/Inter-Medium.woff2') format('woff2'),
		url('/templates/htmlburger-spring-2023/css/fonts/Inter-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'KitchenApp';
	src: url('/templates/htmlburger-spring-2023/css/fonts/KitchenApp.woff2') format('woff2'),
		url('/templates/htmlburger-spring-2023/css/fonts/KitchenApp.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Feather';
	src: url('/templates/htmlburger-spring-2023/css/fonts/Feather.woff2') format('woff2'),
		url('/templates/htmlburger-spring-2023/css/fonts/Feather.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* ------------------------------------------------------------ *\
	Reset
\* ------------------------------------------------------------ */

* {
	padding: 0;
	margin: 0;
	outline: 0 none;
	box-sizing: border-box;
}

*:before,
*:after {
	box-sizing: inherit;
}

a,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="file"],
input[type="image"],
label[for] {
	cursor: pointer;
}

a[href^="tel"],
button[disabled],
input[disabled],
textarea[disabled],
select[disabled] {
	cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	padding: 0;
	border: 0;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="color"],
textarea,
a[href^="tel"] {
	appearance: none;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	appearance: none;
}

textarea {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
}

button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
}

button,
select {
	text-transform: none;
}

table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

nav ul,
nav ol {
	list-style: none outside none;
}

input::placeholder {
	color: inherit;
	opacity: 1;
}

textarea::placeholder {
	color: inherit;
	opacity: 1;
}

input:-webkit-autofill {
	-webkit-text-fill-color: inherit;
	box-shadow: 0 0 0 1000px #fff inset;
}

input[type="text"],
input[type="button"],
input[type="tel"],
input[type="email"],
input[type="submit"],
input[type="date"],
input[type="search"],
textarea {
	appearance: none;
}

/* Keyboard Input element */

kbd {
	display: inline-block;
	margin: 0 .1em;
	padding: .1em .6em;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 11px;
	line-height: 1.4;
	color: var(--color-gray-900);
	text-shadow: 0 1px 0 var(--color-white);
	background-color: var(--color-gray-300);
	border: 1px solid var(--color-gray-500);
	border-radius: 3px;
	box-shadow: 0 1px 0 rgba(12, 13, 14, 0.2), 0 0 0 2px #FFF inset;
	white-space: nowrap;
}

/* ------------------------------------------------------------ *\
	Base
\* ------------------------------------------------------------ */

body {
	font-family: "Inter", sans-serif;
	font-size: var(--base-font-size);
	line-height: var(--base-line-height);
	color: var(--color-base);
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	background: var(--color-base-background);
}

body,
html {
	height: 100%;
	min-height: 100%;
}

html {
	overflow-y: scroll;
}

textarea {
	overflow: auto;
}

a img {
	border: 0;
}

a {
	color: inherit;
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

a.gray {
	color: var(--color-gray-600);
}


h1 {
	font-size: 18px;
	line-height: 1.19;
}

h2 {
	font-size: 16px;
	line-height: 1.19;
}

h3 {
	font-size: 16px;
	line-height: 1.19;
}

h4 {
	font-size: 15px;
	line-height: 1.6;
}

h5 {
	font-size: 14px;
	line-height: 1.21;
}

/* ------------------------------------------------------------ *\
	Helper Classes
\* ------------------------------------------------------------ */

.l,
.left,
.alignleft {
	float: left;
	display: inline;
}

.r,
.right,
.alignright {
	float: right;
	display: inline;
}

.text-right {
	text-align: right;
}

.hidden {
	display: none;
}

.cl {
	font-size: 0;
	line-height: 0;
	clear: both;
	display: block;
	height: 0;
}

.cl:after,
.quoter-actions:after {
	content: '';
	line-height: 0;
	display: table;
	clear: both;
}

.al {
	text-align: left;
}

.ar {
	text-align: right;
}

.ac {
	text-align: center;
}

td.ar {
	text-align: right !important;
}

.bolded {
	font-weight: bold;
}

input.c {
	font-size: 13px;
	line-height: 13px;
	width: 13px;
	height: 13px;
	position: relative;
	vertical-align: top;
	top: 6px;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

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

a.overflow-truncate {
	display: block;
}

.red {
	color: var(--color-red-600) !important;
}

/* ------------------------------------------------------------ *\
	Layout
\* ------------------------------------------------------------ */

#top,
#header,
#main-container,
.thead,
.page,
.shell,
.charges {
	padding-left: var(--base-container-gutter);
	padding-right: var(--base-container-gutter);
}

#main-container {
	padding-top: 64px;
	padding-bottom: 64px;
}

.shell {
	width: 100%;
	max-width: calc(var(--base-container-width) + 2 * var(--base-container-gutter));
	margin-left: auto;
	margin-right: auto;
}

/* Tablet */

@media screen and (max-width: 1023px) {
	#top,
	#header,
	#main-container,
	.thead,
	.page,
	.shell,
	.charges {
		padding-left: var(--base-container-gutter-sm);
		padding-right: var(--base-container-gutter-sm);
	}

	body>.message:first-child,
	.comment .copy-as-markdown,
	.comment .copy-all-links {
		display: none;
	}
}

/* Mobile */

@media screen and (max-width: 767px) {
	#main-container {
		padding-top: var(--base-container-gutter);
		padding-bottom: var(--base-container-gutter);
	}
}

/* ------------------------------------------------------------ *\
	Wrapper
\* ------------------------------------------------------------ */

#wrapper {
	width: 100%;
	min-height: 100vh;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

@media screen and (max-width: 1023px) {
	#wrapper {
		padding-top: var(--top-height);
	}
}

@media screen and (max-width: 767px) {
	#wrapper {
		padding-top: var(--top-height-mobile);
	}
}

/* ------------------------------------------------------------ *\
	Main
\* ------------------------------------------------------------ */

#main {

}

/* ------------------------------------------------------------ *\
	Page Content
\* ------------------------------------------------------------ */

#page-content {
	width: 100%;
	overflow: hidden;
	flex-grow: 1;
}

/* ------------------------------------------------------------ *\
	Container
\* ------------------------------------------------------------ */

#container {
	display: flex;
	width: 100%;
	height: 100%;
}

#container.project-detailed-container {
	min-height: calc(100vh - (var(--top-height) + var(--header-height)))
}

/* ------------------------------------------------------------ *\
	Content
\* ------------------------------------------------------------ */

#content {
	flex: 1 1 calc(100% - 400px);
	width: calc(100% - 400px);
}

@media screen and (max-width: 1023px) {
	#content {
		flex-basis: calc(100% - 345px);
		width: calc(100% - 345px);
	}
}

@media screen and (max-width: 767px) {
	#content {
		flex-basis: 100%;
		width: 100%;
	}
}

/* ------------------------------------------------------------ *\
	Select2
\* ------------------------------------------------------------ */

.select2-container .select2-selection {
	width: 100%;
	font-size: 13px;
	border: none;
	border-radius: var(--border-radius-1);
	border: 1px solid var(--color-gray-300);
	background-color: var(--color-white);
}
.select2-container .select2-selection--single .select2-selection__rendered {
	color: inherit;
	padding-left: 12px;
	padding-right: 32px;
}

/* Active States */
.select2-container.select2-container--focus .select2-selection,
.select2-container.select2-container--open .select2-selection {
	border-color: var(--color-gray-500);
}

/* Arrow  */
.select2-selection--multiple:before,
.select2-container .select2-selection--single .select2-selection__arrow {
	width: 13px;
	right: 12px;
	pointer-events: none;
}
.select2-container .select2-selection .select2-selection__arrow b {
	display: none;
}

/* Sizes */
.select2-container { --height: 32px; }
.select2-container .select2-selection--single {
	height: var(--height);
}
.select2-container .select2-selection--single .select2-selection__rendered {
	line-height: calc(var(--height) - 2px);
}
.select2-container .select2-selection--single .select2-selection__arrow {
	height: calc(var(--height) - 2px);
}

/* Sizes - small */
.select2-container.small { --height: 28px; }
.select2-container.small .select2-selection--single .select2-selection__rendered {
	padding-left: 8px;
}
.select2-container.small .select2-selection--single .select2-selection__arrow {
	padding-right: 12px;
}

/* Sizes - large */
.select2-container.large { --height: 48px; }

.select2-container.large .select2-selection {
	font-size: 16px;
}
.select2-container.large .select2-selection--single .select2-selection__rendered {
	padding-left: 16px;
}
.select2-container.large .select2-selection--single .select2-selection__arrow {
	padding-right: 16px;
}

/* Select2 Amber */

.select2-container.amber .select2-selection {
	border-color: var(--color-amber-300);
}

.select2-container.select2-container--focus.amber .select2-selection,
.select2-container.select2-container--open.amber .select2-selection {
	border-color: var(--color-amber-500);
}

/* Select2 Dropdown */

.select2-dropdown {
	border-color: var(--color-gray-300);
}

.select2-dropdown .select2-search--dropdown {
	padding: 8px;
}

.select2-dropdown .select2-results__option {
	padding: 6px 10px;
	font-size: var(--base-font-size-xsm);
	line-height: var(--base-line-height-xsm);
	font-weight: 600;
}

.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	color: inherit;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--color-gray-200);
}

.select2-container--default .select2-results__option[aria-selected=true] {
	background-color: var(--color-gray-300);
}

.select2-results__option img {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	margin-right: 10px;
}

.select2-results__option>div {
	display: flex;
	align-items: center;
}

/* Multiple  */

.select2-container .select2-selection--multiple {
	min-height: var(--height);
}

.select2-container .select2-selection--multiple .select2-search--inline {
	padding-left: 8px;
}
.select2-container.small .select2-selection--multiple .select2-search--inline {
	padding-left: 4px;
}
.select2-container.large .select2-selection--multiple .select2-search--inline {
	padding-left: 12px;
}

.select2-container .select2-search--inline .select2-search__field {
	color: var(--color-gray-600);
	height: calc(var(--height) - 2px);
	margin-top: 0;
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
	display: flex;
	flex-wrap: wrap;
	padding-left: 4px;
	padding-right: 4px;
	overflow: visible;
}

.select2-container .select2-selection--multiple .select2-selection__choice {
	height: calc(var(--height) - 8px);
	line-height: calc(var(--height) - 10px);
	border-color: var(--color-gray-300);
	background-color: var(--color-white);
	border-radius: var(--border-radius-1);
	margin-right: 4px;
	margin-top: 3px;
	padding: 0 8px;
}

/* ------------------------------------------------------------ *\
	Dropdowns
\* ------------------------------------------------------------ */

/* Combine Dropdown Chevrons styles for consistency  */
.dd-link:before,
.select2-selection--multiple:before,
.account-dropdown .account-dropdown__button:before,
.select2-selection__arrow:before {
	position: absolute;
	top: 50%;
	font-family: 'KitchenApp' !important;
	transform: translateY(-50%);
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	content: '\e91a';
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.dd-link:before {
	right: 0;
}

.selected .dd-link:before,
.selected .revisions-trigger:before,
.selected .select2-selection--multiple:before,
.account-dropdown.selected .account-dropdown__button:before,
.selected .select2-selection__arrow:before {
	content: '\e923';
}

.account-dropdown .account-dropdown__button:before {
	right: 8px;
}

/* ------------------------------------------------------------ *\
	Default Dropdown
\* ------------------------------------------------------------ */

.dd {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: var(--z-dropdown);
	width: 100%;
	display: none;
	padding: 8px 0;
	border-radius: var(--border-radius-1);
	background: var(--color-base-background);
	border: 1px solid var(--color-gray-300);
}

.dd[data-placement="bottom-left"] {}

.dd[data-placement="bottom-center"] {
	left: 50%;
	transform: translateX(-50%);
}

.dd[data-placement="bottom-right"] {
	left: auto;
	right: 0;
}

.dd>ul>li {
	display: block;
}

.dd>ul>li:hover {
	background-color: var(--color-gray-200);
}

.dd>ul>li.dd-menu-divider {
	padding: 0;
	margin-left: 8px;
	margin-right: 8px;
	height: 1px;
	background-color: var(--color-gray-200);
}

.dd>ul>li>a {
	display: flex;
	align-items: center;
	min-height: 43px;
	padding: 6px 16px;
	text-decoration: none;
	font-size: var(--base-font-size-sm);
	line-height: var(--base-line-height-sm);
}

.dd>ul>li span.dd-menu-item-icon {
	display: block;
	margin-right: 8px;
	text-align: center;
	width: 32px;
	height: 32px;
	line-height: 32px;
	background-color: var(--color-gray-100);
	border-radius: 100%;
	font-size: 18px;
}

.dd>ul>li span.dd-menu-item-icon i {
	line-height: inherit;
}

.dd-link {
	position: relative;
	padding-right: 24px;
	min-width: 24px;
}

.dd-link.no-arrow {
	padding-right: 0;
	min-width: 0;
}

.dd-link.no-arrow:before {
	content: none;
}

.dd-fixed {
	width: 200px !important;
}

/* ------------------------------------------------------------ *\
	Buttons
\* ------------------------------------------------------------ */

.buttons .button {
	margin-right: 4px;
}

.mark-buttons {
	padding-right: 0px;
	float: left;
}

/* ------------------------------------------------------------ *\
	Button
\* ------------------------------------------------------------ */

.button {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	height: 32px;
	line-height: 1;
	padding: 0 12px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	border-radius: var(--border-radius-1);
	border: 1px solid var(--color-gray-300);
	background-color: var(--color-white);
	text-decoration: none;
	vertical-align: middle;
	-webkit-appearance: none;
}

.button i {
	font-size: 14px;
	color: inherit
}

/* Disabled Styles */
.button:disabled,
.button.disabled,
.button-disabled {
	cursor: default;
	opacity: 0.5;
}

/* Active States */
.button:hover,
.button:focus {
	background-color: var(--color-blue-50);
	border-color: var(--color-blue-200);
	color: var(--color-blue-600);
}

/* Bolded Button */
.button.bolded {
	font-weight: 700;
}

.button-link {
	background: none !important;
	border-color: transparent !important;
}

/* FullWidth Button */
.button-block {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* Large Button */
.button-large {
	height: 48px;
	font-size: 16px;
}

/* Small Button */
.button-small {
	gap: 4px;
	height: 24px;
	padding-left: 8px;
	padding-right: 8px;
}

/* Button Colors */

.button-primary {
	font-weight: 700;
	color: var(--color-white);
	border-color: var(--color-blue-600);
	background-color: var(--color-blue-600);
}

.button-alert {
	color: var(--color-white);
	border-color: var(--color-red-600);
	background-color: var(--color-red-600);
}

.button-alert:hover,
.button-alert:focus {
	color: var(--color-white);
	border-color: var(--color-red-800);
	background-color: var(--color-red-800);
}

/* Icon Button */

.button-icon.button-small {
	width: 24px;
	height: 24px;
	padding-left: 0;
	padding-right: 0;
	justify-content: center;
	font-size: 18px;
}

/* Slack Button */

a.slack-button {
	float: none;
	padding-left: 46px;
	background: #fff url(/css/images/slack-small.png) no-repeat 10px center;
}

/* ------------------------------------------------------------ *\
	Field
\* ------------------------------------------------------------ */

.field {
	width: 100%;
	height: 32px;
	font-size: 13px;
	padding-left: 12px;
	padding-right: 12px;
	border: none;
	border-radius: var(--border-radius-1);
	border: 1px solid var(--color-gray-300);
	background-color: var(--color-white);
}

.field:focus,
.field:focus-within {
	border-color: var(--color-gray-500);
}

/* Field Placeholder */
.field::-webkit-input-placeholder {
	color: var(--color-gray-500);
}

.field::-moz-placeholder {
	color: var(--color-gray-500);
}

.field:-moz-placeholder {
	color: var(--color-gray-500);
}

input.disabled,
input.field[type="text"]:disabled {
	cursor: default;
	color: var(--color-gray-500);
	border-color: var(--color-gray-300);
	background-color: var(--color-gray-100);
}

textarea.field {
	padding-top: 8px;
	resize: vertical;
}

/* Sizes */

.field-small {
	height: 24px;
	padding-left: 8px;
	padding-right: 8px;
}

textarea.field-small {
	padding-top: 4px;
}

.field-large {
	height: 48px;
	padding-left: 16px;
	padding-right: 16px;
	font-size: 16px;
}

textarea.field-large {
	padding-top: 12px;
}

/* Field amber */

.field--amber {
	border-color:  var(--color-amber-300);
}

.field--amber:focus,
.field--amber:focus-within {
	border-color: var(--color-amber-500);
}

/* Error */

.field-error {
	border-color: var(--color-red-600) !important;
}

/* ------------------------------------------------------------ *\
	Select
\* ------------------------------------------------------------ */

.select {
	position: relative;
}

/* Hide default arrow for all select fields but those inside Eip form */
select.field:not(.eip select.field) {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

/* Placeholder color */
select.field:required:invalid {
	color: var(--color-gray-500);
}

.select:before {
	position: absolute;
	top: 50%;
	right: 12px;
	z-index: 5;
	font-size: 16px;
	line-height: 1;
	transform: translateY(-50%);
	font-family: 'KitchenApp' !important;
	content: '\e91a';
	pointer-events: none;
}

.select .field {
	padding-right: 48px;
}

/* ------------------------------------------------------------ *\
	Checks & Radios
\* ------------------------------------------------------------ */

.radios,
.checks {
	padding-bottom: 15px;
}

.radios > p,
.checks span.check {
	display: block;
	padding-right: 16px;
}
.radios > p ~ p,
.checks span.check ~ span.check {
	margin-top: 12px;
}

table.radios td {
	padding-top: 4px;
	padding-bottom: 4px;
}

/* ------------------------------------------------------------ *\
	Field Checkbox and Radio
\* ------------------------------------------------------------ */

.field-radio,
.field-checkbox {
	position: relative;
	display: block;
	min-height: 14px;
	padding-left: 24px;
	user-select: none;
	font-size: 12px;
	line-height: 14px;
}

.field-radio>input,
.field-checkbox>input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.field-radio span:before,
.field-radio span:after,
.field-checkbox span:before,
.field-checkbox span:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 14px;
	height: 14px;
	border-radius: var(--border-radius-1);
}

.field-radio span:before,
.field-checkbox span:before {
	border: 2px solid var(--color-base)
}

.field-radio input:checked~span:after,
.field-checkbox input:checked~span:after {
	background-color: var(--color-base);
}

.field-checkbox input:checked~span:after {
	content: "";
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOCA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMSA0TDIuNzE0MjkgNkw3IDEiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
	background-repeat: no-repeat;
	background-position: center;
}

.field-radio span:before,
.field-radio span:after {
	border-radius: 50%;
}

.field-radio span:after {
	top: 4px;
	left: 4px;
	width: 6px;
	height: 6px;
}

/* ------------------------------------------------------------ *\
	Overlay
\* ------------------------------------------------------------ */

.navigation-overlay {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: var(--z-overlay);
	visibility: hidden;
	opacity: 0;
	background: var(--color-black);
	transition: opacity 0.15s linear, visibility linear 0.15s;
}

/* ------------------------------------------------------------ *\
	Navigation dd
\* ------------------------------------------------------------ */

.navigation-dd {

}

@media screen and (max-width: 767px) {
	.navigation-dd.dd > ul > li > a {
		border-radius: var(--border-radius-1);
	}
}

/* ------------------------------------------------------------ *\
	Navigation Trigger
\* ------------------------------------------------------------ */

.navigation-trigger {
	position: relative;
	display: block;
	width: 36px;
	height: 36px;
	z-index: 15;
}

.navigation-trigger span {
	position: absolute;
	right: 8px;
	background-color: var(--color-base);
	height: 2px;
	width: 20px;
	border-radius: 1px;
}

.navigation-trigger span:nth-child(1) {
	top: 10px;
	transform: scaleX(0.5);
	transform-origin: 100%;
}

.navigation-trigger span:nth-child(2) {
	top: 17px;
}

.navigation-trigger span:nth-child(3) {
	top: 24px;
}

.navigation-open .navigation-trigger {
	position: fixed;
}

.navigation-open .navigation-trigger span:nth-child(1),
.navigation-open .navigation-trigger span:nth-child(3){
	top: 17px;

}

.navigation-open .navigation-trigger span:nth-child(1) {
	display: none;
}

.navigation-open .navigation-trigger span:nth-child(2) {
	transform: rotate(45deg);
}

.navigation-open .navigation-trigger span:nth-child(3) {
	transform: rotate(-45deg);
}

/* ------------------------------------------------------------ *\
	Logo
\* ------------------------------------------------------------ */

h1#logo {
	position: relative;
	font-size: 0;
	line-height: 0;
	text-indent: -4000px;
	margin-right: 12px;
}

h1#logo a {
	display: block;
	width: 44px;
	height: 24px;
	padding-right: 20px;
	background: url(/templates/htmlburger-spring-2023/css/images/logo.svg) 0 center/contain no-repeat;
}

/* ------------------------------------------------------------ *\
	Top Bar
\* ------------------------------------------------------------ */

#top {
	display: flex;
	align-items: center;
	height: var(--top-height);
	width: 100%;
	z-index: var(--z-top);
	background-color: var(--color-top-bar);
}

#top .top__right {
	display: flex;
	align-items: center;
	margin-left: auto;
}

#top .top__mobile-actions {
	height: 48px;
	z-index: var(--z-tooltip);
	display: none;
}

#top .top__mobile-actions button {
	position: relative;
	border: none;
	background: none;
    display: block;
    width: 36px;
    height: 36px;
    z-index: 15;
	font-size: 24px;
}

#top .top__mobile-actions button + button {
	margin-left: 12px;
}

#top .top__mobile-actions button.navigation-right-trigger {
	display: none;
}

/* Tablet */

@media screen and (max-width: 1023px) {
	#top {
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		background-color: var(--color-white);
		border-bottom: 1px solid var(--color-gray-300);
	}

	#top .top__mobile-actions {
		display: flex;
		align-items: center;
	}
}


/* Mobile */

@media screen and (max-width: 767px) {
	#top {

		height: var(--top-height-mobile);
	}

	#top .top__mobile-actions button.navigation-right-trigger {
		display: block;
	}
}

/* ------------------------------------------------------------ *\
	Navigation / Primary Navigation
\* ------------------------------------------------------------ */

.navigation>ul {
	display: flex;
	gap: 8px;
	list-style: none;
}

.navigation>ul>li {
	position: relative;
}

.navigation>ul>li>a:not(.button) {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 34px;
	padding-left: 12px;
	padding-right: 12px;
	border-radius: var(--border-radius-1);
	border: 1px solid transparent;
	text-decoration: none;
	font-size: 15px;
}

.navigation>ul>li>a:not(.button) .icon {
	font-size: 18px;
}

.navigation>ul>li>a:not(.button):hover,
.navigation>ul>li>a:not(.button).active,
.navigation>ul>li>a:not(.button).selected {
	border-color: var(--color-gray-300);
	background-color: var(--color-white);
}

@media screen and (max-width: 1200px) {
	.navigation>ul>li>a:not(.button) {
		padding-left: 5px;
		padding-right: 5px;
	}
}

/* Tablet */

@media screen and (max-width: 1023px) {
	.sidebar-open,
	.navigation-open {
		overflow: hidden;
	}

	.navigation:not(.navigation-right) {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: var(--z-drawer);
		width: 280px;
		overflow-y: auto;
		overflow-x: hidden;
		background-color: var(--color-white);
		border-left: 1px solid var(--color-gray-300);
		transform: translateX(100%);
		transition: transform .15s linear, opacity .15s linear, visibility 0s linear .15s;
	}

	.navigation:not(.navigation-right)>ul {
		display: block;
		padding: 48px 24px;
	}

	.navigation:not(.navigation-right)>ul>li>a {
		width: 100%;
	}

	.navigation:not(.navigation-right)>ul>li>a span {
		width: 100%;
	}

	.navigation:not(.navigation-right)>ul>li+li {
		margin-top: 8px;
	}

	.navigation:not(.navigation-right) ul li .dd {
		position: static;
		transform: none;
		border: none
	}

	.navigation:not(.navigation-right) ul li .dd-fixed {
		width: 100% !important;
	}

	.navigation-open .navigation:not(.navigation-right) {
		transform: translateX(0px);
	}

	.navigation-open .navigation-overlay {
		opacity: 0.33;
		cursor: pointer;
		visibility: visible;
	}
}
/* ------------------------------------------------------------ *\
	Right Navigation / Account Navigation
\* ------------------------------------------------------------ */

.navigation-right {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: auto;
}

/* Mobile */

@media screen and (max-width: 767px) {
	.navigation-right {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: 280px;
		display: block;
		padding: 48px 24px;
		z-index: var(--z-drawer);
		overflow-y: auto;
		overflow-x: hidden;
		border-left: 1px solid var(--color-gray-300);
		background-color: var(--color-white);
		transform: translateX(320px);
		transition: transform 0.15s ease, width 0.15s ease, height 0.15s ease, margin 0.15s ease, border-radius 0.15s ease;
	}

	.navigation-right-open .navigation-right {
		transform: translateX(0px);
	}

	.navigation-right-open .navigation-overlay {
		opacity: 0.33;
		cursor: pointer;
		visibility: visible;
	}

	.navigation-right .dd {
		width: 100%;
	}

	.navigation-right > .button {
		width: 100%;
		justify-content: center;
	}
}

/* ------------------------------------------------------------ *\
	Account Dropdown
\* ------------------------------------------------------------ */

.account-dropdown,
.account-dropdown .account-dropdown__button {
	height: 48px;
}

.account-dropdown {
	position: relative;
	z-index: var(--z-dropdown);

	min-width: 132px;
	margin-left: auto;
}

.account-dropdown .account-dropdown__button {
	display: flex;
	width: 100%;
	align-items: center;
	text-decoration: none;
	font-size: 15px;
	line-height: 1.2;
	padding: 4px 32px 4px 8px;
	border-radius: var(--border-radius-1);
	background-color: transparent;
	border: 1px solid  transparent;
}

.account-dropdown .account-dropdown__items {
	position: absolute;
	right: 0;
	width: 100%;
	margin-top: -1px;
	padding: 0 4px 4px;
	background-color: var(--color-white);
	border-width: 0 1px 1px 1px;
	border-style: solid;
	border-color:var(--color-gray-300);
	border-radius: 0 0 var(--border-radius-1) var(--border-radius-1);
	list-style: none;
	font-size: var(--base-font-size-sm);
	line-height: var(--base-line-height-sm);
	font-weight: 500;
}

.account-dropdown .account-dropdown__item {
	display: flex;
	align-items: center;
	text-decoration: none;
	padding: 4px 8px;
	will-change: padding;
	border-radius: 0 0 var(--border-radius-2);
	transition: padding var(--duration-shorter);
}

.account-dropdown .account-dropdown__item:hover {
	background-color: var(--color-gray-100);
	padding-left: 12px;
}

.account-dropdown .account-dropdown__item > span {
	width: 32px;
	height: 32px;
	margin-right: 8px;
	line-height: 30px;
	border-radius: 50%;
	background-color: var(--color-gray-100);
	font-size: 18px;
	text-align: center;
}

.account-dropdown .account-dropdown__divider {
	margin: 4px;
	height: 1px;
	border: none;
	background-color: var(--color-gray-200);
}

.account-dropdown .account-dropdown__divider:first-child {
	margin-top: 0;
}

.account-dropdown .gravatar {
	display: block;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	margin-right: 8px;
}

/* Selected */

.account-dropdown:hover .account-dropdown__button {
	border-color: var(--color-gray-300);
}

.account-dropdown.selected .account-dropdown__button {
	border-color: var(--color-gray-300);
	background-color: var(--color-white);
	border-radius:  var(--border-radius-1) var(--border-radius-1) 0 0;
}

.account-dropdown:not(.selected) .account-dropdown__items {
	display: none;
}


/* Tablet */

@media screen and (max-width: 1023px) {
	.account-dropdown,
	.account-dropdown .account-dropdown__button {
		height: 32px;
	}

	.account-dropdown .gravatar {
		width: 24px;
		height: 24px;
	}
}

/* Mobile */

@media screen and (max-width: 767px) {
	.account-dropdown {
		width: 100%;
	}

	.account-dropdown.impersonated .account-dropdown__button {
		margin-bottom: 36px;
	}

	.account-dropdown .account-dropdown__button {
		padding-right: 0;
		margin-bottom: 16px;
		border: none;
	}

	.account-dropdown .account-dropdown__button:before {
		content: none
	}

	.account-dropdown:not(.selected) .account-dropdown__items {
		display: block;
		border: none;
		padding: 0;
		margin-top: 0;
	}
}

/* ------------------------------------------------------------ *\
	Header
\* ------------------------------------------------------------ */

#header {
	display: flex;
	align-items: center;
	height: var(--header-height);
	background-color: var(--color-amber-100);
	border-top: 1px solid var(--color-amber-300);
	border-bottom: 1px solid var(--color-amber-300);
}

#header > h2 {
	flex-shrink: 0;
}

#header > h2 a.edit {
	font-size: 18px;
	line-height: 0;
	text-decoration: none;
	margin-left: 8px;
	color: var(--color-gray-600);
	opacity: 0;
	visibility: hidden;
	transition-duration:var(--duration-short)  ;
	transition-timing-function: var(--easing-in-out);
	transition-property: opacity, visibility;
}

#header > h2:hover a.edit {
	opacity: 1;
	visibility: visible;
}

#header .header__inner {
	display: flex;
	align-items: center;
	height: inherit;
	flex-grow: 1;
	padding-left: 16px;
}

#header .header__inner--project-details {
	justify-content: flex-end;
}

#header .header__mobile-actions {
	display: none;
	align-items: center;
	flex-shrink: 0;
	align-self: flex-start;
	padding-left: 8px;
}

#header .header__filters-btn {
	padding-left: 0;
	padding-right: 0;
}

#header .header__filters-btn i {
	font-size: 16px;
}

#header .header__dropdowns {
	display: flex;
	align-items: center;
}

#header .header__dropdowns,
#header .header__dropdowns-item + .header__dropdowns-item {
	position: relative;
	padding-left: 16px;
	margin-left: 16px;
}

#header .header__dropdowns:before,
#header .header__dropdowns-item + .header__dropdowns-item:before {
	content: '';
	position: absolute;
	height: 100%;
	left: 0;
	width: 1px;
	background-color: rgba(0, 0, 0, 0.15);
}

#header .header__back-btn {
	margin-left: auto;
}

/* Header Fields */

#header .field-outlined,
#header .select2-container.outline .select2-selection {
	border-color: var(--color-amber-300);
}

/* Header Project Details */
#header.header-project-details {
	padding-top: 13px;
	padding-bottom: 13px;
}

#header.header-project-details > h2 {
	display: flex;
	align-items: center;
	font-size: 22px;
	font-weight: 600;
	max-width: calc(100% - 320px);
	overflow: hidden;
	white-space: nowrap;
}

#header.header-project-details > h2 .eip-project-name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 100%;
}

#header.header-project-details .online-users-inner {
	display: flex;
	align-items: center;
	gap: 5px;
}

/* Header Notebook */

#header.header--notebook > h2 {
	display: flex;
	align-items: center;
}

#header.header--notebook > h2 > span.is-saved {
	color: var(--color-amber-800);
}

@media screen and (max-width: 1023px) {
	#header {
		border-top-width: 0;
	}

	#header.header-project-details {
		flex-wrap: wrap;
	}

	#header.header-project-details > h2 {
		margin-bottom: 10px;
		overflow: visible;
		max-width: 100%;
		white-space: normal;
		align-items: flex-start;
	}

	#header.header-project-details > h2 .eip-project-name {
		overflow: visible;
		white-space: normal;
	}
}

/* Tablet Only */

@media screen and (max-width: 1023px) and (min-width: 768px) {
	#header {
		position: relative;
		padding-top: 10px;
		padding-bottom: 10px;
		height: auto;
		border-top-width: 0;
	}

	#header.header-projects {
		align-items: flex-start;
	}
	#header.header-projects .header__dropdowns {
		border-left: 0;
	}

	#header.header-projects .header__dropdowns {
		margin-left: 0;
	}

	#header.header-projects .header__dropdowns:before {
		display: none;
	}

	#header h2 {
		line-height: 32px;
	}

	#header .header__inner {
		flex-wrap: wrap;
	}
}

/* Mobile */

@media screen and (max-width: 767px) {
	#header {
		height: auto;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-top: 8px;
		padding-bottom: 8px;
		border-top-width: 0;
		background-color: var(--color-white);
		border-color: var(--color-gray-200);
	}

	#header.header-checkout {
		padding-top: 15px;
		padding-bottom: 15px;
	}

	#header .header__inner {
		display: flex;
		position: relative;
		flex-wrap: wrap;
		width: 100px;
		flex: 0 0 100%;
		order: 1;
		padding-left: 0;
		padding-top: 10px;
	}

	#header .header__filters-btn {
		display: inline-flex;
	}

	#header .header__dropdowns {
		padding-left: 0;
		margin-left: 0;
	}

	#header .header__dropdowns:before {
		content: none
	}

	#header .header__mobile-actions {
		display: flex;
	}

	#header.header-project-details {
		flex-wrap: nowrap;
	}

	#header.header-project-details > h2 {
		display: block;
		flex: 0 1 auto;
		font-size: 16px;
		line-height: 1.5;
	}

	body:not(.filters-open) #header .header__inner {
		display: none;
	}

	body.filters-open #header .header__filters-btn i:before {
		content: '\e983';
	}
}

/* ------------------------------------------------------------ *\
	Sub Nav (Inside Header)
\* ------------------------------------------------------------ */

#sub-nav {
	display: flex;
	flex-shrink: 0;
	margin-left: 16px;
}

#sub-nav > * + * {
	margin-left: 16px;
	padding-left: 24px;
}

#sub-nav .sub-nav-drop {
	display: flex;
	gap: 8px;
}

#sub-nav .sub-nav-drop a {
	position: relative;
	display: flex;
	align-items: center;
	font-size: 14px;
	height: 32px;
	padding-left: 8px;
	padding-right: 8px;
	text-decoration: none;
	color: var(--color-gray-900)
}

#sub-nav .sub-nav-drop a .num-active {
	display: inline-block;
	margin-left: 5px;
}

#sub-nav .sub-nav-drop a:before {
	position: absolute;
	bottom: -8px;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--color-amber-800);
}

#sub-nav .sub-nav-drop a:hover {
	color: var(--color-base);
}

#sub-nav .sub-nav-drop a.active {
	font-weight: 600;
	color: var(--color-base);
}

#sub-nav .sub-nav-drop a:hover:before,
#sub-nav .sub-nav-drop a.active:before {
	content: '';
}

/* Header Change User */
.change-user {
	position: relative;
	z-index: 5;
}

/* Sub Nav Change User Dropdown */
.change-user {
	position: relative;
	z-index: 5;
}

.change-user > a {
	display: inline-block;
	padding-left: 14px;
	padding-right: 9px;
	text-decoration: none;
	font-size: 14px;
}

/* Sub Nav Select2 Dropdowns */
select.change-user-select,
select.change-user-select,
select.change-manager-select { display: none; width: 160px; }

/* Tablet */

@media screen and (max-width: 1023px) {
	#sub-nav {
		flex: 0 0 100%;
		padding: 0;
		margin-bottom: 10px;
	}

	#sub-nav .sub-nav-drop a:before {
		bottom: 0;
	}
}

/* Mobile */

@media screen and (max-width: 767px) {
	#sub-nav {
		width: 100%;
		margin-left: 0;
		overflow-y: auto;
		padding-bottom: 12px;
		margin-bottom: 12px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	}

	#sub-nav .sub-nav-drop a {
		white-space: nowrap;
		font-size: 13px;
		border-width: 1px;
		border-style: solid;
		border-color: transparent;
		border-radius: var(--border-radius-1);
		background-color: var(--color-gray-200);
	}

	#sub-nav .sub-nav-drop a.active {
		border-color: var(--color-blue-600);
	}

	#sub-nav .sub-nav-drop a:before {
		content: none !important;
	}
}

/* ------------------------------------------------------------ *\
	Search
\* ------------------------------------------------------------ */

#search {
	flex: 1 1 auto;
	padding-left: 16px;
}

.header__inner--project-details #search {
	flex: 0 1 320px;
}

#search:not(:last-child) {
	padding-left: 24px;
}

#search .search__inner {
	position: relative;
	max-width: 320px;
	margin-left: auto;
}

#search .field {
	width: 100%;
	padding-right: 46px;
}

#search label,
#search button {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	width: 34px;
}

#search button {
	position: absolute;
	top: 0;
	right: 0;
	background-color: transparent;
	border: none;
}

#search label {
	position: relative;
	z-index: 5;
	text-align: center;
	display: none;
}

/* Mobile */

@media screen and (max-width: 767px) {
	#search {
		flex: 0 0 40px;
		padding-left: 0;
		margin-left: auto;
		background-color: var(--color-gray-200);
		border-radius: var(--border-radius-1);
	}

	#search .search__inner {
		position: absolute;
		z-index: 10;
		right: 0;
		bottom: 0;
		width: 0;
		max-width: 100%;
		overflow: hidden;
	}

	#search .search-label {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#search .field {
		border-color: var(--color-gray-200);
		background-color: var(--color-gray-200);
	}

	#search label,
	#search button {
		width: 40px;
	}

	#search.search-open #search button {
		display: block;
	}

	#search.search-open #search label {
		display: none;
	}

	#search.search-open .search__inner {
		width: 100%;
	}
}

/* ------------------------------------------------------------ *\
	Footer
\* ------------------------------------------------------------ */

#footer {
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	z-index: 3;
	font-size: 12px;
	height: 30px;
	line-height: 30px;
	border-top: 1px solid var(--color-gray-400);

	/**
		Hide footer using CSS, instead
		of removing it from each template
	**/
	display: none !important;

}

#footer p {
	padding: 0 calc(var(--base-container-gutter) / 2);
}

/* ------------------------------------------------------------ *\
	Star Ctrl
\* ------------------------------------------------------------ */

.star-ctrl {
	font-size: 20px;
	text-decoration: none;
	line-height: 0;
}

.star-ctrl.has-star i  {
	color: var(--color-amber-600) !important;
}

.star-ctrl.has-star i:before {
	content: '\e90a';
}

/* ------------------------------------------------------------ *\
	Tags
\* ------------------------------------------------------------ */

.tags {
	white-space: nowrap;
}

.tags span {
	display: inline-block;
	font-size: 11px;
	padding: 3px 4px;
	line-height: 12px;
	border-radius: var(--border-radius-1);
	text-transform: lowercase;
	background-color: var(--color-gray-100);
}

.tags span.tag-main {
	font-weight: 700;
}

/* ------------------------------------------------------------ *\
	Table Components / Table Results
\* ------------------------------------------------------------ */
/* Common cols */
col.space { width: calc(var(--base-container-gutter) + 4px) }
col.check { width: 32px; }
col.impersonate { width: 128px; }
col.date { width: 115px; }
col.date + col.date { width: 85px; }
col.date-normal { width: 128px; }
col.date-charges { width: 188px; }
col.mail { width: 256px; }
col.amount { width: 100px; }

/* Common cols */
col.title { width: 392px; }
col.name { width: 180px; }

col.desc {}
col.timezone {}


/* col.feedback-question { width: 220px; } */

col.read { width: 32px; }


col.charge-title {}

col.pay {
	width: 58px;
}

col.small-title {
	width: 210px;
}

col.small-price {
	width: 70px;
}

col.small-button {}

col.project-count {
	width: 120px;
}

col.company-name {
	width: 250px;
}

col.company-name-tax {
	width: 400px;
}

col.company-url {
	width: 200px;
}

col.subject {
	width: 200px;
}

col.change-status {
	width: 140px;
}

col.edit {
	width: 40px;
}

col.edit-secondary {
	width: 60px;
}

/* Quotes  Table*/
col.quotes-name { width: 450px; }
col.quotes-postedin {}
col.quotes-date { width: 148px; }

/* Clients */
col.clients-title { width: 254px; }
col.clients-project-count,
col.clients-timezone { width: 128px; }

/* Client Notes Table */
col.client-note-name { width: 192px; }
col.client-note-excerpt {}
col.client-note-author { width: 128px;}
col.client-note-date { width: 256px; }

/* Coworkers */
col.coworkers-title { width: 256px; }
col.coworkers-project { width: 128px; }

/* feedback */
col.feedback-client-name { width: 280px; }
col.feedback-project { width: 164px; }
col.feedback-question { width: 140px; }
col.feedback-suggestions {  }

/* Testimonials */
col.testimonials-title { width: 256px; }
col.testimonials-content {}
col.testimonials-date {}

/* Transaction */
col.transaction-id,
col.transaction-amount,
col.transaction-invoice { width: 128px; }
col.transaction-date,
col.transaction-signature{ width: 264px; }

td.edit {
	text-align: right;
}

tr.clickable { cursor: pointer; }
tr.paid .eip:hover {

}

/* Table Head */

.row-headings th {
	text-align: left;
	font-weight: 400;
	color: var(--color-gray-600);
	border-bottom: 1px solid var(--color-gray-400);
	height: 40px;
	font-size: 12px;
}

table tr td.no-results {
	text-align: center;
	padding: 16px 0 !important;
	font-weight: 500;
	background-color: var(--color-amber-50);
}

table th.last,
table td.last {
	text-align: right;
}

.thead {
	padding-top: 8px;
	padding-bottom: 8px;
	background-color: var(--color-gray-100);
}

.thead input.button-cancel {
	display: none;
	float: right;
}

/* Table Footer */

.tfoot {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.tfoot .tfoot-actions {
	display: flex;
	align-items: center;
	margin-top: -6px;
	margin-left: -12px;
}

.tfoot .tfoot-actions__item {
	padding-top: 6px;
	padding-left: 12px;
}

.tfoot .tfoot-actions--right {
	margin-left: auto;
}

/* Table Pagination */

.thead .pagging {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 16px;
}

.thead .pagging p {
	flex-shrink: 0;
	font-size: var(--base-font-size-xsm);
}

.thead .pagging .pagging-button i {
	color: inherit;
}

@media screen and (max-width: 767px) {
	.tfoot .button span {
		display: none;
	}
}

/* ------------------------------------------------------------ *\
	Default Table Styles (Shared between all tables)
\* ------------------------------------------------------------ */

.projects {
	font-size: var(--base-font-size-sm);
	line-height: var(--base-line-height-sm);
}

.projects table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}

.projects td {
	border-bottom: 1px solid var(--color-gray-400);
	height: 40px;
	white-space: nowrap;
	overflow: hidden;
	vertical-align: middle;
	background-color: var(--color-white);
}

.projects .project-row {
	cursor: pointer;
}

.projects td:not(.col-empty):not(.col-check) {
	padding-right: 8px;
}

/* Table Checkbox  */

.projects td.col-check .field-checkbox input:not(:checked) ~ span {
	opacity: 0.5;
}

/* Table Date  */

.projects td.date {
	text-align: right;
	font-size: 12px;
	line-height: 1.33;
	padding-right: 0;
}

.projects td.date i {
	font-size: 16px;
}

/* Projects Active / Hover States */

.projects tr:hover td:not(.no-results) {
	background: var(--color-gray-50);
}

.projects tr.selected td:not(.no-results) {
	background: var(--color-gray-200);
}

/* Tablet */

@media screen and (max-width: 1023px) {
	.projects {
		overflow-x: auto;
	}
}

/* Mobile */

@media screen and (max-width: 767px) {
	.projects {
		padding: 8px;
		background-color: var(--color-gray-100);
	}

	.projects tr.row-headings {
		display: none;
	}

	.projects tr:hover td:not(.no-results),
	.projects tr.selected td:not(.no-results) {
		background: var(--color-white);
	}

	.projects.collapse-on-mobile table,
	.projects.collapse-on-mobile tbody,
	.projects.collapse-on-mobile tr,
	.projects.collapse-on-mobile td {
		display: block;
	}

	.projects.collapse-on-mobile tr {
		position: relative;
		padding: 16px;
		border-bottom: 2px solid var(--color-gray-300);
		border-radius: var(--border-radius-2);
		background-color: var(--color-white);
	}

	.projects.collapse-on-mobile tr td {
		background-color: transparent !important;
	}

	.projects.collapse-on-mobile tr:not(:last-child) {
		margin-bottom: 4px;
	}

	.projects.collapse-on-mobile td {
		height: auto;
		padding: 0;
		border: none;
		white-space: normal;
	}

	.projects.collapse-on-mobile td:not(.col-check) {
		padding-right: 0 !important;
	}

	.projects.collapse-on-mobile td.col-empty {
		display: none;
	}
}

/* ------------------------------------------------------------ *\
	Projects Table
\* ------------------------------------------------------------ */

.table-projects tbody td.col-client-name .col-client-name-container {
	display: flex;
	align-items: center;
	height: inherit;
}

.table-projects td.col-client-name a:not(.star-ctrl),
.table-projects td.col-project-details a {
	height: 100%;
	display: flex;
	align-items: center;
	text-decoration: none;
}

/** Projects Client Name **/

.table-projects td.col-client-name a.star-ctrl {
	flex-shrink: 0;
	margin-right: 12px;
}

.table-projects td.col-client-name a:not(.has-star) .icon {
	color: rgba(var(--color-base-rgb), 0.3);
}

.projects.table-projects .date-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-right: 0;
}

.meta-icons {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.meta-icons .icon-clock,
.meta-icons .icon-alert-triangle {
	flex-shrink: 0;
	margin-right: 8px;
	font-size: 20px;
}

@media screen and (min-width: 768px) {
	.meta-icons {
		min-width: 48px;
	}
}

.date__content {
	justify-self: flex-end;
}

.table-projects td.col-client-name a:not(.star-ctrl) {
	flex: 1 0 auto;
}

.table-projects td.col-client-name h3 {
	margin-right: 12px;
	font-size: inherit;
	line-height: inherit;
	display: inline;
}

.table-projects tr:not(.unread) td.col-client-name h3 {
	font-weight: inherit;
}

.table-projects td.col-client-name .tags {
	display: inline;
}

/** Projects Table Project Details **/

.table-projects tr td.col-project-details .tags-managers {
		flex-shrink: 0;
		margin-right: 16px;
}

.table-projects tr td.col-project-details p span {
	display: inline-block;
	padding-left: 4px;
	padding-right: 4px;
}

.table-projects tr:not(.unread) .col-project-details p {
	color: rgba(var(--color-base-rgb), 0.5)
}

.table-projects tr:not(.unread) td.col-project-details p strong {
	color: var(--color-base);
}

.table-projects tr:not(.unread) td.col-project-details p strong {
	font-weight: 400;
}

/** Table Projects Online Users **/
.table-projects .col-online-users {
	overflow: visible;
}

.table-projects .col-online-users .online-users {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	margin-left: auto;
	margin-right: auto;
	background: var(--color-green-400);
	border: 1px solid var(--color-green-600);
	border-radius: 50%;
	margin-right: 12px;
}

.table-projects .col-online-users .online-users .online-users-inner {
	position: absolute;
	z-index: 100;
	left: 0;
	top: calc(100% + 8px);
	min-width: 120px;
	padding: 8px;
	background-color: var(--color-white);
	border-radius: var(--border-radius-1);
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: all 0.2s ease-out;
	box-shadow: var(--shadow-1);
}

.table-projects .col-online-users .online-users ul,
.table-projects .col-online-users .online-users h5 {
	display: block;
}

.table-projects .col-online-users .online-users h5 {
	margin-bottom: 4px;
}

.table-projects .col-online-users .online-users li {
	display: block;
	white-space: nowrap;
}

.table-projects .col-online-users .online-users li {
	margin: 0 0 5px;
}

.table-projects .col-online-users .online-users img {
	display: inline-block;
	vertical-align: middle;
}

.table-projects .col-online-users .online-users span {
	display: inline-block;
	vertical-align: middle;
	position: static;
	padding: 0;
	margin: 0 0 0 4px;
	border-radius: 0;
	background: none;
	visibility: visible;
	opacity: 1;
	transform: none;
	font-size: 13px;
	color: inherit;
}

.table-projects .col-online-users .online-users:hover {
	z-index: 11;
}

.table-projects .col-online-users .online-users:hover .online-users-inner {
	visibility: visible;
	opacity: 1;
}

/** Projects Unread **/

.table-projects tr.unread td {
	background: rgba(255, 248, 225, 0.5);
}

.table-projects tr.unread td strong {
	font-weight: bold;
}

.table-projects tr.unread .tags-managers span {
	background-color: var(--color-amber-100);
}
.table-projects tr.unread .tags-managers span.tag-main {
	background-color: var(--color-amber-200);
}

.table-projects tr.new .tags span.type {
	color: var(--color-white);
	background-color: var(--color-amber-800);
}

/* Mobile */

@media screen and (max-width: 767px) {
	.table-projects .col-online-users .online-users {
		position: absolute;
		right: 0;
		top: 23px;
	}

	.table-projects .col-online-users .online-users .online-users-inner {
		left: auto;
		right: 0;
	}

	.table-projects.collapse-on-mobile tr {
		padding-right: 88px;
	}

	/* Col Client Checkbox */
	.table-projects tbody tr td.col-check {
		position: absolute;
		top: 19px;
		left: 21px;
	}

	.table-projects td.col-client-name a:not(.star-ctrl),
	.table-projects td.col-project-details a {
		display: block;
		height: auto;
	}

	/* Col Client Name */
	.table-projects tbody tr td.col-client-name {
		padding-bottom: 8px;
		padding-left: 32px;
	}

	.table-projects tbody tr td.col-client-name .tags {
		display: none;
	}

	/* Col Client Details */
	.table-projects tr td.col-project-details .tags-managers {
		margin-right: 0;
		margin-bottom: 16px;
		white-space: wrap;
	}

	.table-projects tr td.col-project-details p strong {
		display: block;
		white-space: normal;
		margin-bottom: 4px;
	}

	.table-projects tr td.col-project-details p span {
		display: none;
	}

	/* Col Client Date */

	.table-projects tr td.date {
		position: absolute;
		bottom: 16px;
		right: 16px;
	}
}

/* ------------------------------------------------------------ *\
	Outstanding Charges Table
\* ------------------------------------------------------------ */

.oustanding-charges {
	overflow-x: auto;
}

.oustanding-charges .oustanding-charges__inner {
	min-width: 1250px;
}

.oustanding-charges td.amount {
	text-align: right;
}

/* Oustanding Charges Foot */

.tfoot-charges {
	gap: 8px 0;
	flex-wrap: wrap;
}

.tfoot-charges .tfoot-actions:not(.tfoot-actions--right) {
	margin-right: 16px;
}

.tfoot-charges .tfoot-actions--right {
	margin-left: -12px;
}

.tfoot-charges .tfoot-charges__totals {
	display: flex;
	flex-grow: 1;
	flex-wrap: wrap;
	margin-left: -16px;
	margin-top: -6px;
	margin-right: auto;
}

.tfoot-charges .tfoot-charges__totals > * {
	padding-left: 16px;
	padding-top: 8px;
}

.tfoot-charges .tfoot-charges__balance {
	padding-left: 16px;
}

.sub-total,
.out-balance {
	padding-left: 8px;
	padding-right: 8px;
}

/* Mobile */

@media screen and (max-width: 767px) {
	.oustanding-charges {
		overflow-x: hidden;
	}

	.oustanding-charges .oustanding-charges__inner {
		min-width: 0;
	}

	.oustanding-charges.collapse-on-mobile tr {
		padding-left: 66px;
	}

	.oustanding-charges tbody td.date,
	.oustanding-charges tbody tr td.amount,
	.oustanding-charges tbody tr td.col-ch-edit,
	.oustanding-charges tbody tr td.col-check {
		position: absolute;
	}

	.oustanding-charges tbody tr td.col-check {
		top: 19px;
		left: 21px;
	}

	.oustanding-charges tbody tr td.col-ch-edit {
		left: 16px;
	}

	.oustanding-charges tbody td.date {
		top: 16px;
	}

	.oustanding-charges tbody tr td.amount,
	.oustanding-charges tbody tr td.col-ch-edit {
		bottom: 16px;
	}

	.oustanding-charges tbody td.col-ch-user,
	.oustanding-charges tbody td.col-ch-name {
		width: 100%;
	}

	.oustanding-charges tbody td.col-ch-user,
	.oustanding-charges tbody td.col-ch-name {
		margin-bottom: 8px;
	}

	.oustanding-charges tbody td.amount,
	.oustanding-charges tbody td.col-ch-pay,
	.oustanding-charges tbody td.charge-title {
		align-self: center;
	}

	.oustanding-charges tbody td.col-ch-pay {
		padding-right: 0;
	}

	.oustanding-charges tbody td.charge-title {
		margin-right: auto;
	}

	.oustanding-charges tbody td.date,
	.oustanding-charges tbody tr td.amount {
		right: 16px;
	}

	.oustanding-charges tbody td.col-ch-pay {
		margin-top: 8px;
	}

	.oustanding-charges tbody tr td.amount {
		line-height: 24px;
	}
}

/* ------------------------------------------------------------ *\
	Quotes Table
\* ------------------------------------------------------------ */

.quotes-list {
	overflow-x: auto;
}

.quotes-list table {
	min-width: 1023px;
}

.quotes-list tr .col-quote-name__inner {
	display: flex;
}

.quotes-list tr .col-quote-name__inner span {
	display: inline-block
}

/* ------------------------------------------------------------ *\
	Transactions Table
\* ------------------------------------------------------------ */

.transactions {
	overflow-x: auto
}

.transactions table {
	min-width: 1372px;
}

/* Transactions Invoices */

.transactions--invoices table {
	min-width: 1024px;
}

/* Prevents popover from getting cut */
.transactions--invoices td.col-transaction-projects {
	overflow: visible;
}

/* Transactions Slim */

.transactions--slim {}


/* ------------------------------------------------------------ *\
	Coworkers Table
\* ------------------------------------------------------------ */

.coworkers {
	overflow-x: auto;
}

.coworkers table {
	min-width: 900px;
}

/* ------------------------------------------------------------ *\
	Clients
\* ------------------------------------------------------------ */

.clients {
	overflow-x: auto;
}

.clients table {
	min-width: 1358px;
}

.clients tr.disabled-client td {
	background: var(--color-amber-50);
	color: var(--color-gray-600);
}

/* ------------------------------------------------------------ *\
	Client Notes Table
\* ------------------------------------------------------------ */

.client-notes-table {
	overflow-x: auto;
}

.client-notes-table table {
	min-width: 878px;
}

/* ------------------------------------------------------------ *\
	Feedback Table
\* ------------------------------------------------------------ */

.feedback {
	overflow-x: auto;
}

.feedback table {
	min-width: 1525px;
}

.feedback th,
.feedback td {
	padding-top: 8px;
	padding-bottom: 8px;
}

/* ------------------------------------------------------------ *\
	Online Users
\* ------------------------------------------------------------ */

.online-users {
	position: relative;
	z-index: 10;
	white-space: nowrap;
}

.online-users h5 {
	display: inline-block;
	vertical-align: middle;
}

.online-users ul {
	display: inline-block;
	vertical-align: middle;
	list-style: none outside none;
	font-size: 0;
	line-height: 1;
}

.online-users li {
	position: relative;
	display: inline-block;
	vertical-align: top;
}

.online-users li+li {
	margin-left: 5px;
}

.online-users img {
	width: 24px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, .2);
	box-sizing: border-box;
}

.online-users span {
	position: absolute;
	z-index: 100;
	left: 50%;
	top: 100%;
	padding: 2px 4px;
	margin-top: 5px;
	background: rgba(0, 0, 0, .8);
	border-radius: 3px;
	font-size: 11px;
	font-weight: bold;
	color: #fff;
	transform: translate(-50%, -10px);
	visibility: hidden;
	opacity: 0;
	transition: all .2s;
}

.online-users li:hover span {
	visibility: visible;
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ------------------------------------------------------------ *\
	Sidebar
\* ------------------------------------------------------------ */

#sidebar {
	position: relative;
	--sidebar-width: 400px;
	width: var(--sidebar-width);
	flex: 0 0 var(var(--sidebar-width));
	font-size: 13px;
	line-height: 20px;
	background-color: var(--color-gray-100);
	border-left: 1px solid var(--color-gray-400)
}

@media screen and (max-width: 1023px) {
	#sidebar {
		--sidebar-width: 345px;
		flex-basis: var(--sidebar-width);
	}
}

@media screen and (max-width: 767px) {
	#sidebar {
		position: fixed;
		right: 0;
		bottom: 0;
		z-index: 1001;
		width: 100%;
		height: 85%;
		will-change: transform;
		transform: translateY(100%);
		transition: transform .15s linear, opacity .15s linear, visibility 0s linear .15s, box-shadow 0s linear .15s;
	}

	#sidebar .sidebar__scrollable {
		height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}


	.sidebar-open #sidebar {
		box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.25);
		transform: translateY(0);
	}

	.sidebar-open .navigation-overlay {
		cursor: pointer;
		visibility: visible;
		opacity: 0.16;
	}
}

@media screen and (max-width: 580px) {
	#sidebar {
		width: 100%;
	}
}

/* ------------------------------------------------------------ *\
	Sidebar sidebar box
\* ------------------------------------------------------------ */

#sidebar .sidebar-box {
	position: relative;
	width: var(--sidebar-width);
	padding: 24px;
	border-bottom: 1px solid var(--color-gray-400);
	background-color: var(--color-gray-100);
}

#sidebar .buttons-box-top > .buttons:not(:last-child) {
	margin-bottom: 16px;
}

#sidebar .sidebar-box .sidebar-box-head {
	display: flex;
	margin-bottom: 16px;
}

#sidebar .sidebar-box .sidebar-box-head > h3 {
	flex: 1 0 auto;
}

#sidebar .sidebar-box .sidebar-box-head .sidebar-box-head__actions {
	flex-shrink: 0;
}

#sidebar .sidebar-box .sidebar-box-head > h3 > i {
	display: inline-block;
	margin-right: 8px;
	font-size: 20px;
}

#related-tasks-box {
	border-radius: var(--border-radius-1);
	padding: 16px;
	border: 1px solid var(--color-gray-300);
	background-color: var(--color-white);
	font-size: 14px;
	line-height: 1.71;
}

/* Fixed Boxes */
#buttons-box,
#pay-box-holder {
	z-index: 998;
}

.sidebar-box--related-tasks {
	z-index: 10;
}

@media screen and (max-width: 1023px) {
	#sidebar .sidebar-box {
		padding: 16px;
	}
}

@media screen and (max-width: 767px) {
	#sidebar .sidebar-box {
		width: 100%;
	}
}

/* ------------------------------------------------------------ *\
	Comment List
\* ------------------------------------------------------------ */

.comment-list .error {
	color: var(--color-red-600);
}

.comment-list > ol {
	list-style: none;
}

.comment-list ol li.comment.comment-hightlight {
	transition: background 0.4s ease-in-out;
	background: #ffff4f;
}

.comment-list ol li.comment.comment-lowlight {
	transition: background 0.4s ease-in-out;
}

.comment-list ol li.comment--urgent {
	background-color: #ffe6e6;
	border-left: 3px solid #ff4444;
}

@media screen and (max-width: 767px) {
	.comment-list {
		padding: 8px;
		background-color: var(--color-gray-100);
	}
}

/* ------------------------------------------------------------ *\
	Single Project Details (Aboce comment list)
\* ------------------------------------------------------------ */

.project-details {
	padding: 16px 24px;
	list-style: none;
	background: rgba(255, 236, 179, 0.25);
	border-bottom: 1px solid rgba(255, 202, 40, 0.45);
	font-size: var(--base-font-size-sm);
	line-height: var(--base-line-height-sm);
}

.project-details .project-details__head {
	position: relative;
	margin-bottom: 16px;
}

.project-details .project-details__head i {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: none;
	font-size: 16px;
}

.project-details .project-details__body a:not([class]) {
	color: var(--color-blue-600);
}

.project-details .project-details__body span {
	color: var(--color-gray-600);
}

.project-details .project-details__body strong {
	font-weight: 600;
}


.project-details .project-details__body table td {
	padding-right: 10px;
	width: 25%;
}

.project-details .project-details__body table td p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	word-break: break-word;
}

.project-details .project-details__body table td p > img + img {
	margin-left: 4px;
}

.project-details .project-details__body table td p > span {
	margin-right: 8px;
}

.project-details .project-details__body table td p:not(:last-child) {
	margin-bottom: 13px;
}

/* Tablet */

@media screen and (max-width: 1023px) {
	.project-details .project-details__body table
	.project-details .project-details__body tbody {
		display: block;
	}

	.project-details .project-details__body tr {
		display: flex;
		flex-wrap: wrap;
	}

	.project-details .project-details__body table td {
		width: 50%;
	}
}

/* Mobile */

@media screen and (max-width: 767px) {
	.project-details {
		margin-bottom: 8px;
		padding-left: 16px;
		padding-right: 16px;
		border: 1px solid var(--color-gray-400);
		background-color: var(--color-white);
		border-radius: var(--border-radius-2);
	}

	.project-details .project-details__head {
		margin-bottom: 0;
	}

	.project-details .project-details__head i {
		display: inline-block;
	}

	.project-details .project-details__body {
		display: none;
		padding-top: 16px;
	}

	.project-details .project-details__body table td {
		width: 100%;
		padding-right: 0;
	}

	.project-details .project-details__body table td:not(:last-child),
	.project-details .project-details__body table td p:not(:last-child) {
		margin-bottom: 8px;
	}

	.project-details.expanded .project-details__body {
		display: block;
	}

	.project-details.expanded .project-details__head i:before {
		content: '\e923';
	}
}

/* ------------------------------------------------------------ *\
	Comments
\* ------------------------------------------------------------ */

.comments {
	position: relative;
	min-height: 50px;
}

.comments > ol {
	list-style: none;
}

.comment-list ol li.comment + li.comment {
	margin-top: -1px;
}

.comments .comments__expand {
	position: relative;
	display: flex;
	gap: 8px;
	padding: 16px;
	justify-content: center;
	text-align: center;
}

@media screen and (max-width: 1023px){
	.comments .comments__expand {
		flex-direction: column;
		align-items: center;
	}
}

@media screen and (max-width: 767px) {
	.comments .comments__expand .button {
		padding-block: 5px;
		height: auto;
		min-height: 32px;
	}

	.comment-list ol li.comment + li.comment {
		margin-top: 8px;
	}
}

/* ------------------------------------------------------------ *\
	Comment and Events
\* ------------------------------------------------------------ */

.comment.event,
.comment.collapsed-comment {
	background-color: var(--color-gray-50);
}

/* ------------------------------------------------------------ *\
	Comment
\* ------------------------------------------------------------ */

.comment {
	position: relative;
	padding: 16px 24px;
	border-width: 1px 0;
	border-style: solid;
	border-color: var(--color-gray-400);
}


.comment .comment__inner {
	position: relative;
	padding-left: 56px;
}

.comment:not(.event).collapsed-comment:hover {
	background-color: var(--color-amber-50);
}

/* Comment Short Desc */

.comment .short-desc {
	width: 100%;
	margin-top: 8px;
	color: var(--color-gray-600);
}

/* Comment Avatar */

.comment .comment-avatar {
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

/* Comment Head */

.comment-head {
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
}

.comment-head .comment-head__title {
	flex: 1 0 auto;
	padding-right: 16px;
}

.comment-head .comment-head__right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.comment-head .comment-head__right .date {
	font-size: var(--base-font-size-xsm);
	list-style: var(--base-line-height-xsm);
	color: var(--color-gray-600);
	margin-right: 16px;
}

.comment-head .comment-head__dd {
	position: relative;
	cursor: default;
}

.comment-head__dd-trigger {
	text-decoration: none;
	font-size: 20px;
}

.comment-head__dd-body {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 12;
}

.comment-head .impersonated-comment-note {
	font-style: italic;
}

.comment-head .from {
	flex: 0 0 auto;
	font-size: 15px;
	line-height: 1.6;
	font-weight: 700;
}

.comment-head .comment-type {
	font-size: 16px;
}

.comment-head .comment-head__more {
	font-size: 20px;
	text-decoration: none;
}

.comment-head .comment-head__date,
.comment-head *:not(.has-star) .comment-head__icon {
	color: var(--color-gray-900);
}

.comment-head .comment-head__date {
	margin-right: 16px;
	font-size: 12px;
	line-height: 2;
}

.comment-head .comment-head__actions > ul {
	display: flex;
	align-items: center;
	list-style: none;
}

.comment-head .comment-head__actions > ul > li {
	line-height: 1;
}

.comment-head .comment-head__actions > ul > li:not(:last-child) {
	margin-right: 4px;
}

.comment-head .comment-head__actions .comment-head__icon {
	display: block;
	padding: 2px;
	font-size: 20px;
}

.comment-head.unread .date {
	font-weight: bold;
}

.comment-head a.read-status{ margin-right:5px; position:relative; top:5px;}
.comment-head .tags{ top:5px;}

/* Comment Body */

.comment-body {
	margin-top: 8px;
}

/* Comment Files */

.comment-files {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--color-gray-100);
}

.comment-files ul {
	margin-bottom: 8px;
	list-style-type: none;
}

.comment-files ul:not(:first-child) {
	margin-top: 16px;
}

.comment-files ul li:not(:last-child) {
	margin-bottom: 8px;
}

.comment .comment-reminder { position: relative; border-bottom: 1px dashed #888; cursor: copy; }
.comment .comment-reminder:hover { background: #ffffb5; }

.comment:not(.collapsed-comment) .comment-emails-tracking:hover ul { visibility: visible; opacity: 1; }

/* Comment Collapsed State  */

.comment.collapsed-comment {
	cursor: pointer;
}

.comment.collapsed-comment .short-desc {
	display: block;
}

.comment.collapsed-comment .buttons,
.comment.collapsed-comment .comment-body,
.comment.collapsed-comment .comment-project-details {
	display: none;
}

.comment.collapsed-comment .comment-head .comment-head__date,
.comment.collapsed-comment .comment-head *:not(.has-star) .comment-head__icon {
	color: var(--color-gray-500);
}

/* .comment-list ol .show-comment {
	display: none;
}
.comment-list ol .show-comment .comment-project-details,
.comment-list ol .show-comment .comment-files,
.comment-list ol .show-comment .comment-entry {
	display: block;
}
.comment-list ol .show-comment .comment-head-details {
	border: 0;
} */

/* Mobile */

@media screen and (max-width: 767px) {
	.comment {
		padding: 16px;
		background-color: var(--color-white);
		border: 1px solid var(--color-gray-400);
		border-radius: var(--border-radius-2)
	}

	.comment.event,
	.comment.collapsed-comment,
	.comment.collapsed-comment:hover {
		background-color: var(--color-white);
	}

	.comment .comment__inner {
		padding-left: 0;
	}

	.comment .comment-avatar {
		width: 24px;
		height: 24px;
	}

	.comment-head .comment-head__date {
		order: 1;
		width: 100%;
	}

	.comment-head .comment-head__title {
		position: relative;
		padding-left: 32px;
	}

	.comment-head *:not(.has-star) .comment-head__icon {
		font-size: 18px;
	}

	.comment .short-desc {
		order: 2
	}
}


/* ------------------------------------------------------------ *\
	Comment Preview
\* ------------------------------------------------------------ */

#previewed_comment {
	background: var(--color-gray-50) url('/css/images/draft.png') 50% repeat;
}

/* ------------------------------------------------------------ *\
	Event Comment
\* ------------------------------------------------------------ */

.comment.event {
	height: auto;
	font-size: 12px;
	line-height: 1.33;
}

.comment.event .comment__inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.comment.event .event__icon {
	flex-shrink: 0;
	margin-right: 12px;
	font-size: 20px;
	color: var(--color-gray-600);
}

.comment.event .event__meta,
.comment.event .event__date {
	margin-right: 8px;
}

.comment.event .event__author {
	background: rgba(255, 226, 109, 0.25);
	padding: 2px 4px;
}

.comment.event .event__entry {
	overflow: hidden;
}

.comment.event .event__what {
	flex: 0 0 100%;
	padding: 10px 0 0;
}

/* Mobile */

@media screen and (max-width: 767px) {
	.comment.event {
		padding-top: 8px;
		padding-bottom: 8px;
		border-radius: 16px;
	}

	.comment.event .event__icon {
		margin-right: 8px;
		font-size: 14px;
	}
}

/* ------------------------------------------------------------ *\
	Comment Note
\* ------------------------------------------------------------ */

.comment--note:not(.collapsed-comment) .comment__inner {
	padding: 24px 24px 24px 80px;
	background-color: var(--color-amber-50);
	border-radius: var(--border-radius-2);
}

.comment--note:not(.collapsed-comment) .comment-avatar {
	top: 24px;
	left: 24px;
}

@media screen and (max-width: 767px) {
	.comment--note:not(.collapsed-comment) {
		background-color: var(--color-amber-50);
	}

	.comment--note:not(.collapsed-comment) .comment__inner {
		padding: 0;
	}

	.comment--note:not(.collapsed-comment) .comment-avatar {
		top: 0;
		left: 0;
	}
}

/* ------------------------------------------------------------ *\
	Hidden Comments( Not used )
\* ------------------------------------------------------------ */

.comment-list ol li.hidden-comments { cursor:pointer; height:30px; overflow:hidden; position:relative; }
.comment-list ol li.hidden-comments ol li.comment{ height:24px; overflow:hidden; position:relative; background:transparent !important; }
.comment-list ol li.hidden-comments ol li.comment .comment-head,
.comment-list ol li.hidden-comments ol li.comment .short-desc { display:none;}
.comment-list ol li .num-hidden{ position:absolute; top:3px; left:0; font-size:12px; width:100%; text-align: center; display:none; text-decoration: underline;}
.comment-list ol li.hidden-comments .num-hidden{ display:block; }
/* .comment .comment__clipboard { position: absolute; left: -5000px; top: -5000px; opacity: 0; } */
/* .has-attachment { background:url(/css/images/file.png) no-repeat right 5px; padding-right:17px;} */


/* ------------------------------------------------------------ *\
	Comment Copy As Markdown
\* ------------------------------------------------------------ */

.comment .copy-as-markdown {
	font-size: 10px;
	line-height: 16px;
	padding: 0 3px;
	border-radius: 3px;
	text-transform: lowercase;
	text-decoration: none;
	position: relative;
	display: block;
	margin: -8px 0 -8px auto;
	border: 0 none;
	background: transparent;
	cursor: pointer;
}

.collapsed-comment .copy-as-markdown {
	display: none;
}

/* ------------------------------------------------------------ *\
	Comment Email Tracking (Dropdown inside comment actions)
\* ------------------------------------------------------------ */

.comment .comment-emails-tracking {
	position: relative;
	cursor: default;
}

.comment .comment-emails-tracking > span {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 1px 3px;
	font-size: 11px;
	color: var(--color-white);
	background: var(--color-red-800);
	border-radius: 2px;
	line-height: 1;
}

.comment .comment-emails-tracking ul {
	position: absolute;
	z-index: 100;
	left: 70%;
	top: 100%;
	min-width: 300px;
	max-width: 300px;
	padding: 8px;
	background: rgba(0, 0, 0, 0.7);
	border-radius: var(--border-radius-2);
	color: #fff;
	list-style: none outside none;
	font-size: 12px;
	line-height: 1.2;
	transform: translateX(-70%);
	visibility: hidden;
	opacity: 0;
	transition: all 0.2s ease-out;
}

.comment .comment-emails-tracking li {
	white-space: normal;
}

.comment .comment-emails-tracking li + li {
	padding-top: 2px;
	padding-left: 24px;
	margin-top: 4px;
}

.comment .comment-emails-tracking img {
	width: 16px;
	height: auto;
	vertical-align: middle;
	margin: -2px 0 0 -24px;
	border-radius: var(--border-radius-1);
}

.comment .comment-emails-tracking strong {
	margin-bottom: 4px;
	font-size: var(--base-font-size-sm);
}

/* ------------------------------------------------------------ *\
	Comment Dropdown
\* ------------------------------------------------------------ */

.comment-dd {
	width: 300px;
	z-index: 1000;
	box-shadow: var(--shadow-1);
	border-radius: var(--border-radius-2);
    background: var(--color-base-background);
    border: 1px solid var(--color-gray-300);
	overflow: hidden;
}

.comment-dd ul {
	list-style-type: none;
}

.comment-dd ul li a,
.comment-dd ul li span.disabled-copy-link {
	display: flex;
	justify-content: space-between;
	padding: 6px 16px;
    text-decoration: none;
    font-size: var(--base-font-size-sm);
    line-height: var(--base-line-height-sm);
}
.comment-dd ul li a.disabled ,
.comment-dd ul li span.disabled-copy-link {
	color: var(--color-gray-600);
}

.comment-dd ul li a .dd-shortcut,
.comment-dd ul li span.disabled-copy-link .dd-shortcut {
	float: right;
}
.comment-dd ul li a:hover {
	background: var(--color-gray-100);
}

.comment-dd ul li .dd-shortcut {
	font-size: 12px;
	line-height: calc(1.25 * var(--base-line-height-sm));
	font-family: monospace;
	text-transform: uppercase;
}


.collapsed-comment .comment-dd-ctrl {
	display: none;
}

/* ------------------------------------------------------------ *\
	Note (currently not used)
\* ------------------------------------------------------------ */

.note {
	position: relative;
	padding-left: 45px;
	margin: 5px 10px 15px;
}

.note .note__avatar {
	position: absolute;
	left: 0;
	top: 0;
	width: 26px;
	height: 26px;
	border-radius: 4px;
	overflow: hidden;
}

.note .note__content {
	position: relative;
	padding: 8px;
	background: #fdf7dd;
	border-radius: 4px;
	border: 1px solid #e6deb0;
	color: #5a4838;
}

.note .note__content:before {
	content: '';
	position: absolute;
	right: 100%;
	top: 9px;
	border-width: 0 14px 12px 0;
	border-color: transparent #e6deb0;
	border-style: solid;
}

.note .note__content:after {
	content: '';
	position: absolute;
	right: 100%;
	top: 10px;
	border-width: 0 12px 10px 0;
	border-color: transparent #fdf7dd;
	border-style: solid;
}

.note .note__author {
	display: block;
	margin-bottom: 8px;
	font-weight: bold;
	line-height: 1.2;
}

.note .note__date {
	position: absolute;
	right: 4px;
	top: 4px;
	font-size: .9em;
}

.note .note__entry {
	line-height: 1.2;
}

/* ------------------------------------------------------------ *\
	Snoozed Project (Inside Sidebar)
\* ------------------------------------------------------------ */

.snoozed-project {
	padding: 16px;
	border-radius: var(--border-radius-2);
	background-color: var(--color-white);
	border: 1px solid  var(--color-gray-300);
	font-size: 14px;
	line-height: 1.71;
}

.snoozed-project > h5 {
	margin-bottom: 8px;
}
.snoozed-project > p ~ p {
	margin-top: 8px;
}

.snooze-project { position: relative; display: inline-block; vertical-align: middle; }
.snooze-project:after { content: ''; display: table; clear: both; line-height: 0; }

.snooze-project .snooze-project__btn { position: relative; z-index: 11; margin-right: -1px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.snooze-project .snooze-project__btn:hover { z-index: 12; }

.snooze-project .snooze-project__carret { position: relative; z-index: 11; margin-right: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; text-decoration: none; }
.snooze-project .snooze-project__carret .dd-link { position: relative; display: block; float: none; min-width: 0; width: 14px; padding: 0; background: none; }
.snooze-project .snooze-project__carret .dd-link:after { content: ''; position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -2px 0 0 -3px; border-width: 4px 3px 0; border-style: solid; border-color: currentColor transparent; }

.snooze-project .snooze-project__carret.selected { border-bottom-right-radius: 0; }

.snooze-project .snooze-project__dropdown { display: none; position: absolute; z-index: 10; left: 0; top: 100%; width: 100%; margin-top: -3px; padding-top: 3px; border-radius: 0 0 6px 6px; background: #f7f7f7; overflow: hidden; }
.snooze-project .snooze-project__dropdown ul { list-style: none outside none; font-size: 12px; }
.snooze-project .snooze-project__dropdown li { border-bottom: 1px solid #e4e4e4; }
.snooze-project .snooze-project__dropdown li:last-child { border-bottom: 0; }
.snooze-project .snooze-project__dropdown a { padding: 3px 6px; display: block; text-decoration: none; color: inherit; }
.snooze-project .snooze-project__dropdown a:hover { background: #e4e4e4; }

.follow,
.edit-small {
	position: relative;
	font-size: 18px;
	color: var(--color-gray-600);
	text-decoration: none;
	margin-left: 8px;
	line-height: 0;
}

.edit-small {
	opacity: 0;
	visibility: hidden;
}

.comment-project-details table td p:hover .edit-small {
	opacity: 1;
	visibility: visible;
}

/* ------------------------------------------------------------ *\
	Update Status (Currently from the UI)
\* ------------------------------------------------------------ */

.update-status { position: relative; }
.update-status .new-status-select { display: none; }
.update-status .select2-container { left: auto !important; right: 0 !important; }


.update-status .is-submitting {
	opacity: .7;
	pointer-events: none;
}

.update-status .field {
	width: 100%;
}

.update-status .button {
	display: none;
	position: absolute;
	right: 0;
	top: 0;
	margin: 0;
}

.update-status select[data-value="new"]+.select2 .select2-selection--single {
	border-color: var(--color-pink-100) !important;
	background-color: var(--color-pink-50) !important;
}

.update-status select[data-value="new"]+.select2 .select2-selection__rendered i,
.select2-container.status [data-value="new"]>i {
	color: var(--color-pink-200) !important;
}

.update-status select[data-value="analysis"]+.select2 .select2-selection--single {
	border-color: var(--color-amber-100) !important;
	background-color: var(--color-amber-50) !important;
}

.update-status select[data-value="analysis"]+.select2 .select2-selection__rendered i,
.select2-container.status [data-value="analysis"]>i {
	color: var(--color-amber-600) !important;
}

.update-status select[data-value="quoted"]+.select2 .select2-selection--single {
	border-color: var(--color-blue-100) !important;
	background-color: var(--color-blue-50) !important;
}

.update-status select[data-value="quoted"]+.select2 .select2-selection__rendered i,
.select2-container.status [data-value="quoted"]>i {
	color: var(--color-blue-400) !important;
}

.update-status select[data-value="production"]+.select2 .select2-selection--single {
	border-color: var(--color-purple-100) !important;
	background-color: var(--color-purple-50) !important;
}

.update-status select[data-value="production"]+.select2 .select2-selection__rendered i,
.select2-container.status [data-value="production"]>i {
	color: var(--color-purple-300) !important;
}

.update-status select[data-value="lost"]+.select2 .select2-selection--single {
	border-color: var(--color-red-100) !important;
	background-color: var(--color-red-50) !important;
}

.update-status select[data-value="lost"]+.select2 .select2-selection__rendered i,
.select2-container.status [data-value="lost"]>i {
	color: var(--color-red-400) !important;
}

.update-status select[data-value="delivered"]+.select2 .select2-selection--single {
	border-color: var(--color-green-100) !important;
	background-color: var(--color-green-50) !important;
}

.update-status select[data-value="delivered"]+.select2 .select2-selection__rendered i,
.select2-container.status [data-value="delivered"]>i {
	color: var(--color-green-400) !important;
}

.update-status select[data-value="awaiting_payment"]+.select2 .select2-selection--single {
	border-color: var(--color-teal-100) !important;
	background-color: var(--color-teal-50) !important;
}

.update-status select[data-value="awaiting_payment"]+.select2 .select2-selection__rendered i,
.select2-container.status [data-value="awaiting_payment"]>i {
	color: var(--color-teal-200) !important;
}

.update-status select[data-value="after_sale"]+.select2 .select2-selection--single {
	border-color: var(--color-brown-100) !important;
	background-color: var(--color-brown-50) !important;
}

.update-status select[data-value="after_sale"]+.select2 .select2-selection__rendered i,
.select2-container.status [data-value="after_sale"]>i {
	color: var(--color-brown-400) !important;
}


.select2-container.status .select2-dropdown .select2-results__option i {
	margin-right: 10px;
}

@media screen and (max-width: 1023px) {
	.update-status .select2-container .select2-selection {
		font-size: 12px;
	}
}

/* ------------------------------------------------------------ *\
	Summary
\* ------------------------------------------------------------ */

.summary { }
.summary .left,
.summary .right { width:200px;}
.summary strong{ font-weight: normal; }
.summary strong.red{ }

/* ------------------------------------------------------------ *\
	Sidebar Hidden forms
\* ------------------------------------------------------------ */

.add-user,
.add-charge,
.add-project-note {
	padding-top: 16px;
}

/* ------------------------------------------------------------ *\
	Charges Small (Inside Sidebar)
\* ------------------------------------------------------------ */

.charges-small .charges-small__items:not(.is-expanded) .charge-small.paid {
	display: none;
}

/* ------------------------------------------------------------ *\
	Charge Small (Inside Sidebar)
\* ------------------------------------------------------------ */

.charge-small {
	position: relative;
	display: flex;
    align-items: center;
    padding: 8px 16px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius-1);
}

.charge-small:not(:last-child) {
	margin-bottom: 4px;
}

.charge-small .charge-small__title {
	flex-grow: 1;
	padding-right: 8px;
	min-width: 0;
	overflow: hidden;
}

.charge-small .charge-small__title span {
	display: block;
	width: 100%;
}

.charge-small .charge-small__actions {
	flex-shrink: 0;
	padding-right: 8px;
}

.charge-small .charge-small__amount {
	flex-shrink: 0;
	color: var(--color-red-600);
}

.charge-small.paid.charge-small .charge-small__amount {
	color: var(--color-green-600);
}

.charge-small .delete-charge-holder {
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0;
	visibility: hidden;
}

.charge-small:hover .delete-charge-holder {
	opacity: 1;
	visibility: visible;
}

.charge-small a.delete-charge {
	padding-left: 4px;
	padding-right: 4px;
	color: var(--color-red-600);
}

/* Tablet */

@media screen and (max-width: 1023px) {
	.charges-small__items {
		padding-right: 16px;
	}

	.charges-small .delete-charge-holder {
		right: -10px;
		margin-top: 0;
	}
	.charges-small a.delete-charge {
		padding: 4px;
	}
}

/* ------------------------------------------------------------ *\
	Feedback Button, Download Button And Pay Button
\* ------------------------------------------------------------ */

.action-button {
	display: inline-block;
	height: auto;
	padding: 16px 24px;
	text-align: center;
	color: var(--color-white);
	border: 1px solid var(--color-blue-600);
	border-radius: var(--border-radius-2);
	background-color: var(--color-blue-600);
	text-decoration: none;
	font-size: 12px;
	line-height: 1.25;
}

.action-button:hover,
.action-button:focus {
	background-color: var(--color-blue-50);
	border-color:  var(--color-blue-200);
	color:  var(--color-blue-600);
}

.action-button span,
.action-button strong {
	display: block;
}

.action-button span{
	margin-bottom: 4px;
}

.action-button strong{
	font-size: 24px;
	line-height: 1.2;
}

.disabled .action-button {
	cursor: default;
	color: var(--color-gray-600) !important;
	border-color: var(--color-gray-300) !important;
	background-color: var(--color-gray-300) !important;
}

/* Pay Button */
.pay-button {
	 width: 100%;
}

/* Disabled Button */
.disabled .cc { background-position:0 -12px; }

/* ------------------------------------------------------------ *\
	Pay Box
\* ------------------------------------------------------------ */

.pay-box {
	display: flex;
	flex-wrap: wrap;
}

.pay-box .pay-box__cost {
	width: 45%;
	align-self: center;
}

.pay-box .pay-box__cc,
.pay-box .pay-box__actions {
	width: 55%;
    margin-bottom: 10px;
}

.pay-box .pay-box__cc {
	margin-top: 16px;
	text-align: center;
}

/* total cost */

.total-cost {
	text-align: center;
	font-size: 12px;
	line-height: 1.25;
}

.total-cost span,
.total-cost strong {
	display: block;
}

.total-cost strong {
	margin-top: 4px;
	font-size: 20px;
	line-height: 1.2;
}

/* .total-cost { position:absolute; top:18px; left:210px; line-height:1.1; white-space:nowrap;}
.total-cost span{ display:block; text-transform: uppercase; font-size:11px;}
.total-cost strong{ display:block; font-size:26px; padding-top:3px;}

.total-cost-small { float: right; line-height: 1.85; } */

/* ------------------------------------------------------------ *\
	Box Source Files
\* ------------------------------------------------------------ */

.box-source-files > p {
	margin-bottom: 16px;
}

.cc {
	width: 157px;
	margin-left: auto;
	margin-right: auto;
	font-size: 0;
	line-height: 0;
	display: block;
	height: 10px;
	background: url(/templates/htmlburger/css/images/cc.png) no-repeat 0 0;
	text-indent: -4000px;
}

.comments-buttons { height:24px; padding:10px 0;}

/*
#pay-box-holder,
#related-tasks-box,
 #buttons-box { width:340px; }
#buttons-box { z-index:10; padding-bottom:4px; padding-top:6px; margin-top:-6px; position:relative; }

#buttons-box { margin-bottom:8px; padding-bottom:0; }
#buttons-box div.buttons{ margin-bottom:0 !important; } */

/* #related-tasks-box { z-index: 9; padding-top: 12px; } */

/* ------------------------------------------------------------ *\
	Submit Comment
\* ------------------------------------------------------------ */

.submit-comment-holder {
	padding: var(--base-container-gutter);
	background-color: var(--color-gray-50);
	border-bottom: 1px solid var(--color-gray-400);
}

.submit-comment-wrapper {
	position: relative;
	background-color: var(--color-white);
	border: 1px solid var(--color-gray-300);
	border-radius: var(--border-radius-2);
	padding-left: 16px;
	padding-right: 16px;
}

/* Submit Comment Top Bar */

.submit-comment-type {
	position: relative;
	display: flex;
	padding: 8px 0;
	list-style: none;
	font-size: var(--base-font-size-sm);
}

.submit-comment-type li + li {
	margin-left: 16px;
}

.submit-comment-type a {
	position: relative;
	display: block;
	padding: 8px;
	text-decoration: none;
}

.submit-comment-type .active a:before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--color-blue-600);
}

/* Active Internal note  */

.submit-comment-note {
	background: var(--color-amber-50);
}

.submit-comment-note .submit-comment-field {
	background: var(--color-amber-50);
}

.submit-comment-note .submit-comment-type .active a:before {
	background-color: var(--color-amber-300);
}

/* Comment Form Textarea */
.submit-comment textarea {
	width: 100%;
	display: block;
	padding-top: 16px;
	padding-bottom: 16px;
	border: none;
	height: 56px;
	font-size: 15px;
	line-height: 1.6;
	resize: vertical;

}

/* Comment Form Actions */

.submit-comment-actions {
	display: flex;
	flex-wrap: wrap;
	width: calc(100% + 8px);
	align-items: center;
	padding: 16px 0;
	margin-top: -8px;
	margin-left: -8px;
}

.submit-comment-actions > * {
	padding-top: 8px;
	padding-left: 8px;
}

/* Comment Form Actions */

.submit-comment .send-as {
	display: block;
	width: 330px;
	max-width: 100%;
}

/* Collapsed Form */

.submit-smaller .send-as,
.submit-smaller .buttons-top,
.submit-smaller .buttons-bottom,
.submit-smaller .form-head,
.submit-smaller .project-status,
.submit-smaller .uploaded-files,
.submit-smaller .submit-comment-actions,
.submit-smaller .attach-files { display:none; }

.submit-smaller .submit-comment-field {
	height: 56px !important;
	resize: none
}

@media screen and (max-width: 1199px) {
	.submit-comment-holder {
		padding: 8px;
	}
}

@media screen and (max-width: 767px) {
	.submit-comment-holder {
		padding: 8px;
	}
}

@media screen and (max-width: 580px) {
	.edit-toolbar > a {
		width: 20px;
		height: 20px;
		line-height: 20px;
	}
}

/* ------------------------------------------------------------ *\
	hidden form ( Inside Sidebar )
\* ------------------------------------------------------------ */

.hidden-form {
	display: none;
	padding: 16px;
	border-radius: var(--border-radius-2);
	background-color: var(--color-white);
	border: 1px solid var(--color-gray-300);
	font-size: 14px;
	line-height: 1.71;
}

.hidden-form span.left {
	margin-right: 5px;
}

.hidden-form label {
	font-size: 10px;
	display: block;
	line-height: 12px;
	padding-top: 4px;
	padding-left: 5px;
}

.hidden-form .field-code-repository,
.hidden-form .field-title {
	width: 200px;
}

.charge-form .field-title {
	width: 180px;

}

body .charge-form select.field.field-currency {
    -webkit-appearance: auto;
    appearance: auto;
    padding-left: 2px;
    padding-right: 2px;
    width: 54px;
}

.hidden-form .field-amount {
	width: 70px;
	padding-left: 6px;
	padding-right: 6px;
}

.hidden-form .field-name {
	width: 140px;
}

.hidden-form .buttons {
	margin-top: 16px;
}

/* ------------------------------------------------------------ *\
	Related Satellites
\* ------------------------------------------------------------ */

.update-source-files,
.buttons-update-source-files { margin: 16px 0; }

.update-source-files:last-child,
.buttons-update-source-files:last-child { margin-bottom: 0; }

.update-source-files .field { width: calc(100% - 10px); }

.form-top { padding:10px 0; }
.form-top .hidden-form{ float:left; }
.form-top .hidden-form .field-name{ width:200px}

/* ------------------------------------------------------------ *\
	Status Log
\* ------------------------------------------------------------ */

.status-log,
.status-log ul { margin-top: 10px; }
.status-log ul { display: none; list-style: none; }
.status-log .show-status-log { float: none; }
.status-log .show-status-log.show + ul { display: block; }

/* ------------------------------------------------------------ *\
	Popup
\* ------------------------------------------------------------ */

#popup {
	position: fixed;
	top: 70px;
	left: 50%;
	width: 0;
	height: 0;
	z-index: var(--z-modal);
	display: none;
}

#popup-form #main-container {
	padding: 0;
}

#popup .tfoot {
	padding: 0;
	border-bottom: 0;
	background: none;
}

#popup .simple-form .form-row label {
	width: 170px;
}

#popup textarea.field {
	min-width: 0;
	height: 100px;
}

.popup-loading {
	display: block;
	padding: 30px;
	text-align: center;
}

#popup-container {
	position: relative;
	width: 540px;
	left: -270px;
	padding: 16px;
	border-radius: var(--border-radius-2);
	background-color: var(--color-white);
	border: 1px solid var(--color-gray-300);
	box-shadow: var(--shadow-1);
}

/* Simple Form Secondary */

#popup-form .simple-form-secondary .field {
	width: 100%;
}

#popup-form .simple-form-secondary textarea.field {
	resize: vertical;
	height: 100px;
	display: block;
}

#popup-form .simple-form-secondary .radio-options {
	padding-left: 0;
}

#popup-form .simple-form-secondary .radio-options-hidden {
	display: none;
}

#popup-form .simple-form-secondary .tfoot-form {
	padding-left: 0;
}

#popup-form .simple-form-secondary label {
	padding-bottom: 4px;
}

@media screen and (min-width: 767px) and (max-width: 900px) {
	#popup-container {
		width: calc(100vw - 385px);
		left: 5px;
		transform: translateX(-50%);
	}
}

/* Mobile */

@media screen and (max-width: 767px) {
	#popup { left: 10px !important; right: 10px; width: auto; }
	#popup-container { left: 0; width: auto; }
}

/* Mobile Small */

@media screen and (max-width: 580px) {
	#popup-form .simple-form-secondary .field { width: 100%; box-sizing: border-box; }
	#popup-form .simple-form-secondary .tfoot-form-secondary { padding-left: 0; }
}

.meta-field-wrap { display: none; float: left; }
.meta-value-wrap { display: inline; float: left; }
.meta-label { display: inline; float: left; padding-right: 5px; }
.save-meta { margin-right: 5px; }

.meta-field-select-tag { height: 18px; font-size: 11px; min-width: 80px; border-radius: 4px; }
.meta-field-input-text-tag { height: 18px; font-size: 11px; min-width: 80px; border-radius: 4px; }

/* Inline Editor CSS */
.inline-editor-controls { display: none; }
.inline-editor-field { height: 18px; line-height: 18px; font-size: 11px; width: 90%; max-width: 200px; border-radius: 4px; position: relative; top: -1px; }
.inline-editor-link { font-size: 10px; line-height: 18px; position: relative; top: -4px; display: none !important; }
.inline-editor-being-edited td { }
body.no-js #send-comment-button { display: block; }

/* ------------------------------------------------------------ *\
	Autocomplete
\* ------------------------------------------------------------ */

.ac_results {
	padding: 0;
	overflow: hidden;
	z-index: 99999;
	width: 264px !important;
	background: var(--color-base-background);
	border: 1px solid var(--color-gray-300);
}

.ac_results ul {
	width: 100%;
	list-style-position: outside;
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
	top: -1px;
}

.ac_results li {
	margin: 0;
	padding: 4px 5px;
	cursor: default;
	display: block;
	font-size: 13px;
	line-height: 16px;
	overflow: hidden;
}

.ac_results .ac_over,
.ac_results li:hover {
	background-color: var(--color-gray-400);
}

.ac_results,
.ac_results li:last-child {
	border-bottom-left-radius: var(--border-radius-2);
	border-bottom-right-radius: var(--border-radius-2);
}

@media screen and (max-width: 1023px) {
	.ac_results { width: 188px !important; }
}

/* ------------------------------------------------------------ *\
	File Attachment
\* ------------------------------------------------------------ */

.file-attachment {
	height: 38px;
	display: flex;
	align-items: center;
}

.file-attachment-image {
	height: 96px;
}

.file-meta {
	display: inline;
	padding-left: 10px;
	line-height: 16px;
}

.file-meta strong {
	display: block;
}

/* ------------------------------------------------------------ *\
	file preview
\* ------------------------------------------------------------ */

a.file-preview {
	width: 96px;
	height: 96px;
	background: url(/css/images/file-icos.png) no-repeat -38px 0;
	position: relative;
	text-align: center;
	line-height: 95px;
	overflow: hidden;
	border-radius: var(--border-radius-2);
	box-shadow: var(--shadow-1);
}

a.file-preview img {
	display: inline-block;
	vertical-align: middle;
	max-width: 96px;
	max-height: 95px;
	width: auto;
	height: auto;
}

a.file-ico {
	position: relative;
	width: 36px;
	height: 38px;
	background: url(/css/images/file-icos.png) no-repeat 0 0;
	font-size: 0;
	line-height: 0;
	text-indent: -4000px;
	float: left;
}


a.ico-psd { background-position:0 -40px; }
a.ico-ai { background-position:0 -80px; }
a.ico-pdf { background-position:0 -120px; }
a.ico-gz,
a.ico-rar,
a.ico-zip { background-position:0 -160px; }
a.ico-css { background-position:0 -200px; }
a.ico-html,
a.ico-xml { background-position:0 -240px; }
a.ico-doc,
a.ico-docx { background-position:0 -280px; }
a.ico-xls,
a.ico-xlsx { background-position:0 -320px; }
a.ico-txt,
a.ico-rtf { background-position:0 -360px; }
a.ico-ttf,
a.ico-otf { background-position:0 -400px; }

a.ico-avi, a.ico-mpg, a.ico-mpeg, a.ico-mp4, a.ico-mp3,
a.ico-wmv { background-position:0 -440px; }

/* ------------------------------------------------------------ *\
	Edit Toolbar
\* ------------------------------------------------------------ */

.edit-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.edit-toolbar > a {
	display: inline-block;
	width: 28px;
	height: 28px;
	line-height: 28px;
	border-radius: var(--border-radius-1);
	text-decoration: none;
	text-align: center;
	overflow: hidden;
	color: var(--color-gray-500);
}

.edit-toolbar > a:not(:last-child) {
	margin-right: 4px;
}

.edit-toolbar > a:hover {
	color: var(--color-gray-600);
	background-color: var(--color-amber-300);
}
.comment-syntax-hint { margin-left: 12px; font-size: 11px; }

/* ------------------------------------------------------------ *\
	Attach Files
\* ------------------------------------------------------------ */

.attach-files {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px;
	position: relative;
	background-color: var(--color-white);
	border: 1px dashed var(--color-blue-600);
	border-radius: var(--border-radius-1);
}

.attach-files p {
	color: var(--color-gray-600);
	padding-left: 8px;
}

.drop-here {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 200;
	display: none;
	width: 100%;
	background-color: var(--color-green-100);
	border: 2px dashed var(--color-green-400);
	border-radius: var(--border-radius-1);
	padding: 49px 0;
	text-align: center;
	font-weight: 500;
}

.attach-link {

}

.attachment {
}

.hidden-comment { display: none; }
.show-hidden-comments { width:100%; text-align: center; padding: 8px; }


.image-preview { padding: 4px; margin-right: 5px;}

/* ------------------------------------------------------------ *\
	Comment Entry
\* ------------------------------------------------------------ */

.comment-entry {
	overflow: hidden;
}

.comment-entry > p,
.comment-entry > h1,
.comment-entry > h2,
.comment-entry > h3,
.comment-entry > h4,
.comment-entry > h5,
.comment-entry > h6,
.comment-entry > li,
.comment-entry > blockquote {
	overflow-wrap: break-word;
}

.comment-entry img {
	max-width: 80%;
	max-height: 600px;
	height: auto;
}

.comment-entry a:not([class]) {
	color: var(--color-blue-600);
}
.comment-entry a:not([class]):hover {
	color: var(--color-blue-700);
}
.comment-entry table,
.comment-entry .emergency,
.comment-entry h1:not(:last-child),
.comment-entry h1:not(:last-child),
.comment-entry h2:not(:last-child),
.comment-entry h3:not(:last-child),
.comment-entry h4:not(:last-child),
.comment-entry h5:not(:last-child),
.comment-entry h6:not(:last-child),
.comment-entry p:not(:last-child) {
	margin-bottom: var(--default-entry-space);
}

.comment-entry h1 {
	font-size: 26px;
}

.comment-entry h2 {
	font-size: 23px;
}

.comment-entry h3 {
	font-size: 21px;
}

.comment-entry h4 {
	font-size: 19px;
}

.comment-entry h5 {
	font-size: 17px;
}

.comment-entry h6 {
	font-size: 16px;
}


.comment-entry ol {
	padding: 0 0 10px 30px;
	list-style-type: decimal;
}

.comment-entry ul {
	padding: 0 0 15px 25px;
	list-style-type: disc;
}

.comment-entry hr {
	border: 0;
	border-top: solid 1px var(--color-gray-300);
	font-size: 0;
	line-height: 0;
	display: block;
	margin: 12px 0 16px;
}

.comment-entry ul,
.comment-entry ol {
	padding-left: 30px;
}

.comment-entry .code,
.comment-entry code {
	display: block;
	padding: 12px;
	margin-bottom: 10px;
	overflow: auto;
	border-radius: var(--border-radius-1);
	font-family: Consolas, monospace, serif;
	border: dashed 1px  var(--color-gray-300);
	background: var(--color-gray-50);
}


.comment-entry em.quotes,
.comment-entry blockquote {
	color:#854F61;
}

.comment-entry .code+br,
.comment-entry code br {
	display: none;
}

.comment-entry pre {
	overflow: auto;
}

.comment-entry p code,
.comment-entry li code {
	display: inline-block;
	padding: 0 5px;
	margin: 0;
	vertical-align: middle;
}

.comment-entry blockquote {
	border-left: 1px solid var(--color-gray-500);
	padding-left: 8px;
	margin-bottom: 8px;
	font-style: italic;
}

.comment-entry blockquote p {
	padding: 0;
}

.comment-entry blockquote p~p,
.comment-entry blockquote p~ul,
.comment-entry blockquote ul~p {
	margin-top: 8px;
}

.comment-entry blockquote blockquote {
	margin-left: 8px;
}

.comment-entry blockquote :last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}

.comment-entry li p {
	margin: 8px 0;
}

.comment-entry li ul {
	padding-bottom: 0;
}

.comment-entry table {
	border: 1px solid #ccc;
	border-collapse: collapse;
	border-spacing: 0;
}

.comment-entry table th,
.comment-entry table td {
	padding: 8px 12px;
	border: 1px solid var(--color-gray-300);

}

.comment-entry table th {
	background-color: var(--color-gray-50);
	font-weight: 700;
}

.comment-entry table td {
}

.comment-entry .urgency-quote,
.comment-entry .emergency {
	display: inline-block;
	padding: 4px 8px;
	font-weight: normal;
	background: var(--color-red-50);
	color: var(--color-red-600);
	border: solid 1px var(--color-red-100);
	border-radius: var(--border-radius-1);
}

.comment-entry .urgency-quote .emergency {
	margin-bottom: 0;
}

/* ------------------------------------------------------------ *\
	Copy Success
\* ------------------------------------------------------------ */

.copy-success {
	background: rgba(255, 255, 255, 0.75);
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	right: 0;
	text-align: center;
	z-index: 10;
	border-radius: 5px;
	visibility: hidden;
	opacity: 0;
}
.copy-success {
	transition: opacity 0.05s, visibility 0s 0.05s;
}

.copied .copy-success {
	visibility: visible;
	opacity: 1;
}

.copied .copy-success {
	transition: opacity 0.05s;
}

.copy-success p {
	position: absolute;
	bottom: 16px;
	left: 50%;
	font-weight: bold;
	padding: 8px;
	border-radius: var(--border-radius-1);
	background: var(--color-amber-100);
}

.copied-fixed .copy-success p {
	position: fixed;
	bottom: 50%;
	margin-left: -200px;
}

.copy-success p {
	transform: translateX(-50%);
}

.comment-collapsed .copy-success {
	display: none;
}

/* ------------------------------------------------------------ *\
	User Listing
\* ------------------------------------------------------------ */

.user-listing {
	display: flex;
	flex-wrap: wrap;
}

.user-listing .user-container {
	padding-right: 16px;
	padding-bottom: 8px;
}

/* ------------------------------------------------------------ *\
	User Container
\* ------------------------------------------------------------ */

.user-container {
	display: inline-flex;
	align-items: center;
	position: relative;
}

.user-container img.gravatar {
	display: block;
	width: 24px;
	flex: 0 0 24px;
	border-radius: 50%;
}

.user-container .user-data {
	padding-left: 8px;
}
.user-container .involved-user {
	font-size: 13px;
	line-height: 1.38;
	white-space: nowrap;
}

.user-container .involved-user small {
	color: var(--color-gray-600);
	font-weight: 400;
	font-size: 10px;
	padding-left: 8px;
	vertical-align: middle;
}

.user-container .ico-schedule-chat { position: absolute; left: -6px; top: -6px; width: 13px; height: 14px; background: url(/css/images/ico-schedule-chat@2x.png); background-size: 13px 14px; }

.user-container[data-is-project-owner="true"] .involved-user,
.user-container[data-is-main-manager="true"] .involved-user { font-weight: bold; }

/* ------------------------------------------------------------ *\
	Eip Form
\* ------------------------------------------------------------ */

/* .eip-form {}
.eip-form .field{ height:20px !important; }
.eip-form .button{ float:none; margin-left:5px;} */
form.eip-form {
	display: inline;
}

form.eip-details-form,
.eip-project-name form.eip-form {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
}

form.eip-details-form { gap: 2; }


.eip-num-pages form.eip-details-form .field { width:40px;}

#project-time-frame select{ width:75px; }
#project-implement-as select { width:103px;}
#project-samples-section select { width:55px;}
p.block form.eip-details-form { display:block; }
p.block form.eip-details-form .field{ display:block; margin-bottom:2px;}


span.eip-quoter-name .field,
span.eip-project-name .field{ width: 240px; }

span.eip-quoter-name form { height: 25px; padding-top: 1px; overflow: hidden; margin-top: 0; line-height: 0; }


#project-delivery-date { font-size:0; line-height:0; height:0; width:0; border:0; position:absolute; top:20px; left:65px; background:transparent;}
.delivery-date-holder { position:relative; z-index: 1; }

.source-files { padding-top:15px; }

.source-files table { line-height:18px; }
.source-files td { padding:5px 10px; white-space:nowrap; vertical-align:middle; }

/* ------------------------------------------------------------ *\
	Simple Form
\* ------------------------------------------------------------ */

.simple-form .form-heading {
	display: block;
	overflow: hidden;
	margin-bottom: 24px;
	font-weight: 700;
}

.simple-form .form-label {
	display: block;
	margin-bottom: 12px;
}

.simple-form .form-heading span {
	position: relative;
	display: inline-block;
	background-color: var(--color-white);
}

.simple-form .form-heading span:before {
	content: '';
	position: absolute;
	top: 50%;
	left: calc(100% + 16px);
	width: 100vw;
	height: 1px;
	background-color: var(--color-gray-100);
}

.simple-form .form-row {
	margin-bottom: 16px;
}

.simple-form .form-row__actions {
	margin-top: 8px;
}


.simple-form .form-fields {
	margin-bottom: 32px;
}

.simple-form .simple-form__body {
	margin-bottom: 32px;
}

.simple-form .simple-form__actions *:not(:last-child){
	margin-bottom: 8px;
}

.simple-form .field + .field {
	margin-top: 8px;
}

.simple-form textarea.field {
	height: 128px;
}

.simple-form .select-project-manager {
	width: 100%;
	visibility: hidden;
}

/* .simple-form .radios { float:left; white-space:nowrap;}
.simple-form .radios label{ float:none; font-weight:normal; width:auto; position:relative; top:1px;} */
.simple-form p.note { padding-bottom:20px; padding-left:20px;}

.simple-form .hidden { display: none; }



/* .simple-form .select2-container .select2-selection--multiple { min-height: 26px; line-height: 24px; }
.simple-form .select2-container .select2-selection--multiple .select2-selection__rendered { vertical-align: top; }
.simple-form .select2-container .select2-selection--multiple .select2-selection__choice { margin: 2px 4px 2px 0; line-height: 20px; } */

/*  Simple Form Columns  */

.simple-form .form__cols { display: flex; align-items: center; }
.simple-form .form__col--size1 { flex: 0 0 200px; max-width: 200px; }
.simple-form .form__col--size2 { flex: 1 1 auto; }

.simple-form .form-row--disable label { max-width: 80%; }

.simple-form .vfa-entry h3 { padding-bottom: 0; }

.simple-form .vfa-entry h3,
.simple-form .vfa-entry p { margin-bottom: 20px; }

.simple-form .vfa-image { margin-left: -18px; }
.simple-form .vfa-image img { max-width: 100%; height: auto; }

.simple-form .vfa-secret { display: inline-block; padding: 5px 10px; border-radius: 5px; background-color: #ffeebf; }


.simple-form--login {
	max-width: 330px;
	margin-left: auto;
	margin-right: auto;
}

.simple-form--login .forgot-holder {
	margin-top: 16px;
	padding-top: 8px;
	border-top: 1px solid var(--color-black);
}

.simple-form--login .form-buttons {
	display: flex;
	align-items: center;
	justify-content: space-between;
}


@media (max-width: 580px) {
  .simple-form .form__cols { flex-wrap: wrap; }
  .simple-form .form__col--size1,
  .simple-form .form__col--size2 { flex: 1 0 100%; max-width: 100%; }

  .simple-form .form-row--disable .form__col--size1 { flex-basis: 90%; }
  .simple-form .form-row--disable .form__col--size2 { flex-basis: 10%; }

  .simple-form .vfa-image { margin-left: 0; text-align: center; }
  .simple-form .vfa-entry h3 { font-size: 14px; }
}

/* ------------------------------------------------------------ *\
  Form vfa Login / Two Factor authentication Page
\* ------------------------------------------------------------ */

/* Main VFA login  */
.main-vfa-login {
	min-height: 500px;
	min-width: 320px;
}

.form-vfa-login {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 585px;
}
.form-vfa-login h2 {
	font-size: 34px;
}
.form-vfa-login h5 {
	font-size: 18px;
	font-weight: 400;
}

.form-vfa-login h2,
.form-vfa-login h5 {
	margin-bottom: 15px;
}

.form__inner {
	max-width: 330px;
	margin-left: auto;
	margin-right: auto;
}

.form-vfa-login .form__head {
	text-align: center;
}
.form-vfa-login .form__actions {
	padding: 15px 0;
	text-align: center;
}

.form-vfa-login .form__label {
	display: block;
	margin-bottom: 10px;
	font-weight: 700;
}

@media (max-width: 767px) {
	.form-vfa-login {
		width: 90%;
	}
	.form-vfa-login h2 {
		font-size: 24px;
	}
	.form-vfa-login h5 {
		font-size: 14px;
	}
}


/* ------------------------------------------------------------ *\
	Message
\* ------------------------------------------------------------ */

.message,
.form-message {
	position: relative;
	padding: 8px 91px;
	font-weight: bold;
	text-align: center;
	background:var(--color-amber-50);
	border-bottom:1px solid var(--color-amber-300);
}

.message.error-message {
	color: var(--color-red-600);
}

.message.hideable-message {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.message.message-global {
	font-weight: normal;
}

/* Dismiss button located in the message component */
.message .dismiss {
	position: absolute;
	right: var(--base-container-gutter);
	top: 8px;
	margin: 0;
	font-weight: normal;
}

.message .dismiss.button {
    height: 24px;
    padding-left: 8px;
    padding-right: 8px;
}

/* Welcome Message */

.welcome-message {
	display: none;
	float: left;
	white-space: nowrap;
	padding: 2px 0 0 10px;
	white-space: nowrap;
	line-height: 31px;
}

/* Small Message */
.small-message {
	display: inline-block;
	padding: 20px 30px;
	font-weight: bold;
	position: relative;
	top: -30px;
}

/* ------------------------------------------------------------ *\
	Eip (Editable content)
\* ------------------------------------------------------------ */

.eip {
	cursor: default;
	display: inline-block;
	border-radius: var(--border-radius-1);
}

.eip-hover {
	background-color: var(--color-amber-200);
}

/* ------------------------------------------------------------ *\
	Eip Vue
\* ------------------------------------------------------------ */

.eip-vue {
	display: flex;
	align-items: center;
}

.eip-vue .eip-preview,
.eip-vue .eip-edit,
.eip-vue .eip-form {

}

.eip-vue .eip-form {
	height: 25px;
	font-size: 0;
	line-height: 0;
	padding-top: 1px;
	margin-top: 0;
}

.eip-vue .eip-form .field {
	width: 240px;
}

.eip-vue .eip-form .button {
	margin-left: 5px;
}

.eip-vue .eip-preview {
	padding: 0 5px;
	border-radius: 5px;
}

.eip-vue .eip-preview:hover {
	background-color: var(--color-amber-200);
}

/* ------------------------------------------------------------ *\
	Fluid Form (New project or New project question)
\* ------------------------------------------------------------ */

.fluid-form {
	margin-left: auto;
	margin-right: auto;
	width: 680px;
 	max-width: 100%;
}

.fluid-form .fluid-form__messages {
	margin-bottom: 32px;
}

/* ------------------------------------------------------------ *\
	Profile Gravatar
\* ------------------------------------------------------------ */

.profile-gravatar {
	display: flex;
	align-items: center;
}

.profile-gravatar img {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 50%;
}

.profile-gravatar p {
	flex:  0 1 auto;
	padding-left: 16px;
	font-size: var(--base-font-size-sm);
	line-height: var(--base-line-height-sm);
}

 /* ------------------------------------------------------------ *\
	Services
\* ------------------------------------------------------------ */

/* .services { padding-bottom:15px; }
.services ul{ list-style-type: none; }
.services ul li{ float:left; display:inline; width:100px; padding:10px 0 0 0; cursor:pointer; text-align:center; margin-right:15px; min-height:100px;}
.services ul li.active{ }
.services ul li strong{ display:block; line-height:18px; padding-bottom:1px;}
.services ul li strong.title{ font-weight:normal; }
.services ul li strong.price{ font-size:16px; padding-bottom:6px; }
.services ul li .service-image{ display:block; margin:0 auto; width:60px; font-size:0; line-height:0; height:50px;}
.services ul li .service-image{ margin-bottom:5px; }
.services ul li .service-html { }
.services ul li .service-email { }
.services ul li .service-wordpress { }
.services ul li .service-mobile { }
.services ul li .service-other { } */

#order-summary {text-align:center; width:220px; z-index:2; }
#order-summary h3{ padding-bottom:10px;}
#order-summary h3#selected-service-title{ padding-top:2px; }
#order-summary ul{ list-style-type:none; text-transform: uppercase; font-size:12px; line-height:18px; padding-top:5px; }
#order-summary ul li{ padding-bottom:15px; }
#order-summary ul li.total{ }
#order-summary ul li.total strong{ font-size:26px; line-height:28px;  }
#order-summary ul li strong{ display:block; font-size:14px; text-transform: none;  }
#order-summary ul li strong#delivery-date{ font-weight:normal;  }
#order-summary ul li strong#delivery-date strong{ display:inline;  }
#order-summary ul li p#delivery-date-extended { text-transform: none; font-size: 13px; display: none; }

#order-summary ul li #breakdown{ text-transform: none; display:block; text-align:left; top:-8px; position:relative; width:100%;}
#order-summary ul li #breakdown strong{ display:inline; }
#order-summary ul li #breakdown p{ height:20px; margin:0 20px;}
#order-summary ul li #breakdown p span,
#order-summary ul li #breakdown p strong { float:left; white-space:nowrap; position:relative; top:11px; padding-right:10px;}
#order-summary ul li #breakdown p strong { float:right; padding:0 0 0 10px;}

#order-summary p.small{ font-size:12px; line-height:17px; }

.selected-service { height:140px; }
.selected-service div{ display:none; font-size:0; line-height:0; text-indent: -4000px; margin:auto; position:relative; }
.selected-service div#selected-html { }
.selected-service div#selected-wordpress { }
.selected-service div#selected-email { }
.selected-service div#selected-mobile { }
.selected-service div#selected-other { }

.addons-holder { display:none; }

#sidebar .snoozed-project-opts { overflow: hidden; margin-top: 5px; }

/* ------------------------------------------------------------ *\
	Uploaded Files
\* ------------------------------------------------------------ */

.uploaded-files {
	padding: 8px 0;
}

.uploaded-files:empty {
	display: none;
}

.uploaded-files .file-row {
	display: flex;
	align-items: center;
}

.uploaded-files .file-row:not(:last-child) {
	margin-bottom: 4px;
}

.uploaded-files .file-row .field-checkbox {
	font-size: inherit;
}

.uploaded-files .file-row .field-checkbox,
.uploaded-files .file-row a,
.uploaded-files .file-row .filesize,
.uploaded-files .file-row .filename {
	margin-right: 4px;
}

.uploaded-files .file-row .progressbar {
	position: relative;
	width: 200px;
	height: 14px;
	padding-left: 0;
	padding-right: 0;
	font-size: 8px;
	line-height: 8px;
	background: var(--color-amber-50);
	border: solid 1px var(--color-amber-300);
	border-radius: var(--border-radius-1);
	overflow: hidden;
	text-align: right;
}

.uploaded-files .file-row .progressbar-inner {
	background: var(--color-amber-300);
	line-height: 12px;
}

.uploaded-files .file-row .progressbar-inner__number {
	padding: 0 8px;
}

/* ------------------------------------------------------------ *\
	Radio Options
\* ------------------------------------------------------------ */

.radio-options {
	display: flex;
}

.radio-options > label {
	margin-right: 16px;
	margin-bottom: 8px;
}

.local-time { font-size:10px; position:relative; top:-4px; cursor:pointer;}
.local-time:hover { }
.local-time span{ padding-left:5px; display:none; }

.tooltip { position:absolute; padding:1px 5px; display:none; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; font-size:12px; }

.upfront { text-align:center; }
.upfront h2{ text-align:center; float:none !important; display:block !important; }
.upfront .button { float:none; display:inline-block; position:relative; top:5px; }
.message-holder { }
.message-holder p{ padding-bottom:10px; }
/* .download-csv { float: right; margin: 8px 0px; } */

.sidebar-box-no-border { border:0 !important; }

.feedback-message-holder { border-radius:4px; text-align:center; margin:10px 0; }
.feedback-message { padding: 30px 0 30px 0;}
.feedback-message h2{ padding-bottom:5px; }
.feedback-message h2 em{ font-style:normal; font-weight:normal; }
.feedback-message .buttons{ text-align:center; padding-top:17px;}
.feedback-message .buttons a{ float:none; display:inline-block;}

/* .form-row-block { padding-bottom:10px;}
.form-row-block .radio{ width:14px; height:14px; position:relative; vertical-align:top; top:4px;}
.form-row-block label{ font-weight:bold; display:block; }
.form-row-block .radio-options{ padding-left:15px; }
.form-row-block .radio-options label{ display:inline; font-weight:normal; margin-right:20px;}
.form-row-block .textarea-place { padding-top:8px; display:none; } */

#popup .feedback-form textarea { width:440px !important; height:135px; }
#popup .feedback-form .tfoot-form { padding-left:19px; }

/* ------------------------------------------------------------ *\
	Profile Popup
\* ------------------------------------------------------------ */

.profile-popup {
	position: absolute;
	top: 100%;
	padding: 16px;
	background: var(--color-white);
	border: solid 1px var(--color-gray-300);
	z-index: 1000;
	min-width: 300px;
	border-radius: var(--border-radius-2);
	box-shadow: var(--shadow-2);
}

.profile-popup.left-directed {
	right: 0;
}

.profile-popup img {
	float: right;
	box-shadow: var(--shadow-1);
	border-radius: var(--border-radius-1);
}

.porfile-popup-content {
	width: 190px;
	float: left;
}

.profile-popup-status {
	cursor: default;
}

.profile-popup-status img {
	float: none;
	display: inline-block;
	vertical-align: middle;
	width: 20px;
	height: auto;
}

.profile-popup .profile-popup-aside {
	float: right;
	width: 90px;
	margin-left: 16px;
}

.profile-popup .profile-popup-aside img {
	vertical-align: top;
	float: none;
	width: 100%;
	height: auto;
}

.profile-popup .profile-popup-avatar-wrapper {
	position: relative;
	height: 90px;
	margin-bottom: 8px;
}

.profile-popup .profile-popup-avatar-wrapper a {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 0 0 4px 4px;
	font-size: 11px;
	text-decoration: none;
}

.profile-popup .profile-popup-avatar-wrapper a:hover {
	background: rgba(255, 255, 255, 0.9);
}

.profile-popup .profile-popup-avatar-wrapper a .icon {
	margin-right: 3px;
	font-size: 14px;
}

.profile-popup .profile-popup-actions {
	list-style: none outside none;
	font-size: 12px;
}

.profile-popup .profile-popup-actions li {
	line-height: 1;
	margin-bottom: 0.2em;
}

.profile-popup .profile-popup-actions li:last-child {
	margin-bottom: 0;
}

.profile-popup .profile-popup-actions a {
	text-decoration: none;
}

.profile-popup .profile-popup-actions a:hover {
	text-decoration: underline;
}

.profile-popup .profile-popup-actions .icon {
	width: 1.2em;
	margin-right: 4px;
	font-size: 14px;
	text-align: center;
}

.profile-popup .profile-popup-livechat {
	color: #578429;
	margin-top: 10px;
}

.profile-popup .profile-popup-livechat .icon {
	font-size: 14px;
}

.profile-popup .profile-popup-content {
	overflow: hidden;
}

.profile-popup .profile-popup-content a .icon {
	margin-right: 4px;
}

.profile-popup .profile-popup-quoting {
	padding-top: 8px;
	margin-top: 8px;
	border-top: 1px solid #ccc;
	font-size: 12px;
	line-height: 1.2;
}

.profile-popup .profile-popup-quoting h4 {
	margin-bottom: 4px;
	padding-bottom: 0;
}

@media screen and (max-width: 560px) {
	.profile-popup {
    	min-width: 288px;
	}
}

/* ------------------------------------------------------------ *\
	Follow Button
\* ------------------------------------------------------------ */

.follow.is-following i:before{
	content: '\e939';
}

/* ------------------------------------------------------------ *\
	WIP
\* ------------------------------------------------------------ */

.wip-request-info { display: none; }

/* ------------------------------------------------------------ *\
	Compatibility
\* ------------------------------------------------------------ */

/* .breakpoints { padding-bottom:15px; }
.breakpoints ul{ list-style-type: none; }
.breakpoints ul li{ float:left; display:inline; width: 80px; padding:10px 0 4px 0; cursor:pointer; text-align:center; margin-right:15px; }
.breakpoints ul li.active{ }
.breakpoints ul li strong{ display:block; line-height:18px; padding-bottom:1px;}
.breakpoints ul li strong.title{ font-weight: normal; display: block; padding: 3px 0;  }
.breakpoints ul li strong.price{ font-size:16px; padding-bottom:6px; } */

/* ------------------------------------------------------------ *\
	Checkout
\* ------------------------------------------------------------ */

.checkout {
	position: relative;
	--summary-width: 448px
}

/* Checkout Bar */
.checkout-bar {
	position: absolute;
	top: -4px;
	left: 0;
	width: 100%;
	z-index: 10;
}

/* Checkout Inner */
.checkout-inner {
	padding: 64px calc(var(--summary-width) + 130px) 64px 0;
}

.checkout-inner--stripe { padding-right: 0; }

/* Checkout Head */
.checkout-head {
	padding-bottom: 16px;
	border-bottom: solid 1px var(--color-gray-300);
	margin-bottom: 64px;
}

/* Braintree Checkout */

#payment-form { position: relative; }
#payment-form .loader-outer { background: #fff; }

/* Stripe Checkout */
.checkout-redirector .loader-outer { position: static; background: transparent; }
.checkout-redirector .loader-outer .loader { position: static; margin: 0 auto; }
.checkout-redirector-text { font-size: 14px; color: #888; text-align: center; }

/* Checkout Full */
.checkout-full {}
.checkout-full .checkout-inner { padding-right: 0; }

@media screen and (max-width: 1199px) {
	.checkout-inner {
		padding: 64px calc(var(--summary-width) + 24px) 64px 0;
	}
}

@media screen and (max-width: 1023px) {
	.checkout {
		--summary-width: 324px
	}

	.checkout-inner {
		padding-top: 32px;
		padding-bottom: 32px;
	}
}

@media screen and (max-width: 767px) {
	.checkout-inner {
		padding-top: 32px;
		padding-right: 0;
	}
}

/* ------------------------------------------------------------ *\
	Checkout CC Icons
\* ------------------------------------------------------------ */

[class^='ico-cc'] {
	display: inline-block;
	font-size: 0;
	line-height: 0;
	text-indent: -4000px;
	height: 26px;
	background-position: 0 0;
	background-image: url(/css/images/cc.png);
	border-radius: var(--border-radius-1);
	width: 43px;
	vertical-align: middle;
}


.ico-cc-visa { background-position: 0 0; }
.ico-cc-mastercard { background-position: -47px 0; }
.ico-cc-amex { background-position: -94px 0; }
.ico-cc-discover { background-position: -141px 0; }
.ico-cc-jcb { background-position: -188px 0; }
.ico-cc-paypal { background-position: -235px 0; width: 65px; }
.ico-cc-bankwire { background-position: -304px 0; width: 121px;}

/* ------------------------------------------------------------ *\
	Checkout Summary
\* ------------------------------------------------------------ */

.summary-checkout {
	position: absolute;
	right: 0;
	top: 64px;
	z-index: 10;
	width: var(--summary-width);
	border-radius: var(--border-radius-2);
	border: solid 1px var(--color-gray-200);
	box-shadow: var(--shadow-1);
	background: var(--color-white);
}

.summary-checkout .summary-inner,
.summary-checkout .summary-actions {
	padding-left: 32px;
	padding-right: 32px;
}

.summary-checkout .summary-inner {
	padding-top: 32px;
	padding-bottom: 16px;
}

.summary-checkout .summary-actions {
	padding-top: 24px;
	padding-bottom: 32px;
}

.summary-checkout .summary-head {
	border-bottom: solid 1px var(--color-gray-200);
	padding-bottom: 16px;
	margin-bottom: 16px;
}

.summary-checkout .summary-head h3 {
	font-size: 18px;
	line-height: 1.22;
}

.summary-checkout .summary-body {
	padding: 12px 0;
	border-bottom: solid 1px var(--color-gray-200);
	color: rgba(0, 0, 0, .6);
}

.summary-checkout .summary-body p {
	padding-top: 4px;
}
.summary-checkout .summary-body ul ~ ul {
	padding-top: 4px;
}

.summary-checkout .summary-body-scroll {
	max-height: 200px;
	overflow: auto;
}

.summary-checkout .summary-total {
	font-size: 16px;
	line-height: 1;
	padding: 16px 40px;
	background: var(--color-amber-100);
	overflow: hidden;
	font-weight: bold;
}

.summary-checkout .summary-total-aside {
	float: left;
}

.summary-checkout .summary-total-price {
	float: right;
}

.summary-checkout .summary-actions {
	text-align: center;
}

.summary-checkout .summary-actions .button:not(:last-child) {
	margin-bottom: 16px;
}

.summary-checkout .summary-actions small {
	display: block;
	font-size: var(--base-font-size-sm);
	line-height: var(--base-line-height-sm);
	color: var(--color-gray-600);
}

.summary-checkout .summary-actions .gateway-link {
	padding-bottom: 16px;
}

.summary-checkout .summary-actions p {
	margin-bottom: 16px;
	font-size: var(--base-font-size-sm);
	line-height: var(--base-line-height-sm);
}

.summary-checkout .summary-actions .gateway-link input {
	width: 100%;
	border-color: var(--color-gray-300);
}

/* Fixed Summary Checkout */

.summary-checkout-fixed {
	position: fixed;
	top: 30px;
	left: 50%;
	margin-left: calc((var(--summary-width) + 24px) / 2);
}

@media screen and (max-width: 1440px) {
	.summary-checkout-fixed  {
		left: auto;
		right: 24px;
		margin-left: 0;
	}
}

@media screen and (max-width: 1023px) {
	.summary-checkout-fixed {
		top: 64px;
		margin-left: 0;
		left: auto;
		right: 16px;
	}
}

@media screen and (max-width: 767px) {
	.summary-checkout {
		position: static;
		width: auto;
		margin: 0;
	}

	.summary-checkout .summary-inner {
		padding-top: 16px;
	}

	.summary-checkout .summary-inner,
	.summary-checkout .summary-actions {
		padding-left: 16px;
		padding-right: 16px;
	}

	.summary-checkout .summary-actions {
		padding-bottom: 16px;
	}

	.summary-checkout .summary-total {
		padding-left: 16px;
		padding-right: 16px;
	}

	.summary-checkout .summary-actions .gateway-link input {
		width: 100%;
		text-align: center;
	}
}

/* ------------------------------------------------------------ *\
	Checkout Sections
\* ------------------------------------------------------------ */

.section-checkout:not(:last-child) {
	margin-bottom: 64px;
	padding-bottom: 64px;
	border-bottom: 1px solid var(--color-gray-200);
}

.section-checkout h2 {
	margin-bottom: 16px;
	font-size: 32px;
	line-height: 1.22;
}

.section-checkout .section-head {
	margin-bottom: 48px;
}

.section-checkout .section-head > a,
.section-checkout .section-head > p { color: var(--color-gray-600);}


.section-checkout .section-alert {
	background: var(--color-amber-50);
	padding: 13px 16px;
	border-radius: var(--border-radius-2);
	margin-top: 32px;
	color: var(--color-base);
	font-size: 16px;
	line-height: 1.4;
}

/* Section Checkout Summary */

.section-checkout-summary { padding-left: 0; padding-right: 0; }

@media screen and (max-width: 1023px) {
	.section-checkout .section-head {
		margin-bottom: 32px;
	}
}

@media screen and (max-width: 767px) {
	.section-checkout:not(:last-child) {
		margin-bottom: 32px;
		padding-bottom: 32px;
	}

		.section-checkout h2 {
		font-size: 24px;
		margin-bottom: 8px;
	}

	.section-checkout .section-head {
		margin-bottom: 24px;
	}
}

/* ------------------------------------------------------------ *\
	Section Transaction ( Single Tranactoin Page)
\* ------------------------------------------------------------ */

.section-transaction { padding-bottom: 50px; }
.section-transaction .section-head { padding-right: 115px; }
.section-transaction ~ .section-transaction { padding-top: 40px; }
.section-transaction .section-head { position: relative; padding-bottom: 20px; }
.section-transaction .section-head .button { color: #333; }
.section-transaction .section-head-actions  { position: absolute; top: 0; right: 0; }
.section-transaction .section-head-actions .button { margin-left: 10px; }

/* ------------------------------------------------------------ *\
	Checkout Forms (Second step checkout )
\* ------------------------------------------------------------ */

/* Checkout Forms */

.form-checkout {
}

.form-checkout .field {
}
.form-checkout .field:focus + .vat-prefix {
}

.form-checkout .field-vat {
}

.form-checkout .vat-prefix {
	position: absolute;
	top: 0;
	left: 0;
	background: var(--color-gray-100);
	height: 48px;
	line-height: 48px;
	border-radius: var(--border-radius-1);
	border: solid 1px var(--color-gray-300);
	width: 48px;
	text-align: center;
}

.form-checkout .form-row {
	display: flex;
	align-items: flex-start;
}

.form-checkout .form-row ~ .form-row {
	margin-top: 32px;
}

.form-checkout .form-label {
	display: flex;
	flex-direction: column;
	min-height: 48px;
	justify-content: center;
	width: 230px;
	flex: 0 0 230px;
	font-weight: bold;
}

.form-checkout .form-label small {
	display: block;
	font-size: var(--base-font-size-xsm);
	color: var(--color-gray-600);
	font-weight: normal;
}

.form-checkout .form-controls {
	position: relative;
	overflow: hidden;
	flex: 1 1 auto;
}

.form-checkout .form-hint {
	font-size: var(--base-font-size-xsm);
	color: var(--color-gray-600);
	margin-left: 16px;
}

.form-checkout .form-notice {
	font-size: var(--base-font-size-xsm);
	color: var(--color-gray-600);
	position: relative;
	padding-left: 15px;
	display: none;
}
.form-checkout .form-notice:before {
	content: '\e901';
	font-size: 12px;
	font-family: 'KitchenApp' !important;
	line-height: 1;
	vertical-align: middle;
	margin-right: 8px;
}

.form-checkout .form-notice-error {
	color: var(--color-red-800);
}

.form-checkout .form-notice-success {
	color: var(--color-green-600);
}

.form-checkout .form-notice-success:before {
	font-family: 'Feather' !important;
	content: '\e92e';
}

.form-checkout .form-group ~ .form-group {
	margin-top: 32px;
}

.form-checkout .form-group-hidden {
	display: none;
}

.form-checkout .form-row-vat .form-controls {
	position: relative;
	padding-left: 56px;
}

.form-checkout .form-row-hidden {
	display: none;
}

.form-checkout .form-row-no-label {
	padding-left: 230px;
}

.form-checkout .form-row-error .field,
.form-checkout .form-row-error .vat-prefix {
	border-color: var(--color-red-800) !important;
}
.form-checkout .form-row-error .form-notice-error {
	display: inline;
}
.form-checkout .form-row-error .form-hint {
	display: none;
}

.form-checkout .form-row-success .field,
.form-checkout .form-row-success .vat-prefix {
	border-color: var(--color-green-600);
}
.form-checkout .form-row-success .form-notice-success {
	display: inline;
}

.form-checkout .form-row-disabled,
.form-checkout .form-row-disabled small {
	color: var(--color-gray-300);
}
.form-checkout .form-row-disabled .form-controls {
	opacity: 0.4;
}

.form-checkout .form-alert {
	position: relative;
	background: var(--color-amber-100);
	font-size: var(--base-font-size-xsm);
	color: var(--color-gray-600);
	padding: 16px;
	margin: 16px 0;
	border-radius: var(--border-radius-2);
}

.form-checkout .form-alert-error {
	background: var(--color-red-800);
	color: #fff;
}

.form-checkout .form-alert-error ul {
	list-style-type: none;
}

.form-checkout .form-alert-hidden {
	display: none;
}

.form-checkout .form-row-other-payment-methods {
	font-size: 11px;
	position: relative;
	top: -10px;
}
.form-checkout .form-row-other-payment-methods a {
	color: #888;
}

/* .form-checkout .form-group-hidden,
.form-checkout .form-row-hidden { display: block; } */
@media screen and (max-width: 1023px) {
	.form-checkout .form-label {
		width: 160px;
    	flex: 0 0 160px;
	}

	.form-checkout .form-row-no-label {
		padding-left: 160px;
	}
}

@media screen and (max-width: 767px) {
	.form-checkout {
		padding-bottom: 32px;
	}

	.form-checkout .form-row:not(.form-row-hidden) {
		display: block;
	}
	.form-checkout .form-label {
		min-height: auto;
		margin-bottom: 8px;
	}

	.form-checkout .form-row ~ .form-row {
		margin-top: 16px;
	}

	.form-checkout .form-row-no-label {
		padding-left: 0;
	}
}

/* ------------------------------------------------------------ *\
	Radio / Radio buttons for payment methods
\* ------------------------------------------------------------ */

.radio input {
	position: absolute;
	opacity: 0;
}

.radio label {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	height: 48px;
	padding-left: 48px;
	padding-right: 16px;
	cursor: pointer;
	background-color: var(--color-gray-200);
	border-radius: var(--border-radius-1);
}

.radio label:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -9px;
	left: 18px;
	width: 18px;
	height: 18px;
	border: solid 2px var(--color-gray-500);
	border-radius: 50%;
}

.radio input:checked + label {
		background-color: var(--color-blue-50);
}

.radio label:hover,
.radio input:checked + label {
	background-color: var(--color-blue-50);
}

.radio input:checked + label:after {
	border-color: var(--color-blue-500);
}

.radio input:checked + label:before {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	background: var(--color-blue-500);
	border-radius: 20px;
	z-index: 2;
	top: 50%;
	left: 22px;
}

/*  Hidden Radio  */

.radio-hidden {
	display: none;
}

/* ------------------------------------------------------------ *\
	Checkbox
\* ------------------------------------------------------------ */


.checkbox {}
.checkbox label:after { border-radius: 3px; }
.checkbox input:checked + label:before { width: 11px; height: 9px; background: url(/css/images/ico-forms.png) no-repeat 0 0; border-radius: 0; top: 4px; left: 2px; }


/*  Authorize Forms  */

#authorize-sim-form { text-align: center; padding-top: 50px; }

#authorize-sim-form .button { float: none; }

/* ------------------------------------------------------------ *\
	Checkout Lists
\* ------------------------------------------------------------ */

/* List Steps ( above checkout sections ) */

.list-checkout-steps {
	list-style-type: none;
	position: absolute;
	width: 600px;
	left: 50%;
	margin-left: -300px;
	height: 6px;
	border-radius: var(--border-radius-1);
	background-color: var(--color-amber-200);
}

.list-checkout-steps li {
	float: left;
	width: 188px;
	display: inline;
	position: relative;
	height: 6px;
}

.list-checkout-steps li:first-child {
	width: 125px;
}

.list-checkout-steps li:first-child {
	border-top-left-radius: var(--border-radius-1);
	border-bottom-left-radius: var(--border-radius-1);
}

.list-checkout-steps li:last-child {
	border-top-right-radius: var(--border-radius-1);
	border-bottom-right-radius: var(--border-radius-1);
}


.list-checkout-steps li em {
	position: absolute;
	top: -10px;
	right: 0;
	width: 28px;
	height: 28px;
	font-size: 12px;
	line-height: 28px;
	font-weight: bold;
	font-style: normal;
	border-radius: 50%;
	text-align: center;
	color: rgba(var(--color-base-rgb), 0.3);
	background-color: var(--color-amber-200);
}

.list-checkout-steps li span {
	position: absolute;
	color: var(--color-gray-500);
	font-size: 11px;
	line-height: 1;
	width: 100px;
	top: 24px;
	text-align: center;
	right: -37px;
}


.list-checkout-steps li.completed em {
	font-size: 0;
	line-height: 0;
	text-indent: -4000px;
	background-image: url(/css/images/check.png);
	background-position: center center;
	background-repeat: no-repeat;
}

.list-checkout-steps li.single {
	left: 188px;
}

.list-checkout-steps li.completed,
.list-checkout-steps li.completed em,
.list-checkout-steps li.current,
.list-checkout-steps li.current em,
.list-checkout-steps-completed,
.list-checkout-steps-completed li,
.list-checkout-steps-completed li em {
	color: var(--color-white);
	background-color: var(--color-blue-300);
}

@media screen and (max-width: 580px) {

	.list-checkout-steps {
		width: 80%;
		margin-left: -40%;
	}
	.list-checkout-steps li {
		width: 33%;
	}
	.list-checkout-steps li:first-child {
		width: 19%;
	}
	.list-checkout-steps li.single,
	.list-checkout-steps li.single em {
		left: 50%;
	}
	.list-checkout-steps li.single,
	.list-checkout-steps li.single em,
	.list-checkout-steps li.single span {
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	.list-checkout-steps li.single span {
		left: 50%;
		right: auto;
	}

}

/* List Summary Hidden */

.list-summary-hidden { display: none; }

/* List Summary & Total */

.list-summary,
.list-sub-total {
	padding: 8px 0;
	list-style: none;
	font-size: var(--base-font-size-sm);
    line-height: var(--base-line-height-sm);
}

.list-summary li,
.list-sub-total li {
	position: relative;
	padding-left: 8px;
	padding-right: 8px;
}

.list-summary li:not(:last-child),
.list-sub-total li:not(:last-child) {
	margin-bottom: 16px;
}

.list-summary strong,
.list-sub-total strong {
	font-weight: normal;
	position: absolute;
	top: 0;
	right: 8px;
}

.list-summary a,
.list-sub-total a {
	text-decoration: none;
}

/* List radios */

.list-radios {
	list-style-type: none;
	margin-right: -8px;
	margin-top: -4px;
}

.list-radios li {
	display: inline-block;
	padding-right: 8px;
	padding-top: 4px;
}


/* List Charges */

.list-charges {
	list-style-type: none;
}

.list-charges li {
	display: flex;
	position: relative;
	font-size: var(--base-font-size-sm);
	line-height: var(--base-line-height-sm);
}

.list-charges li:not(:last-child) {
	margin-bottom: 6px;
}

.list-charges .list-charges__title {
	position: relative;
	flex: 1 0 auto;
	overflow: hidden;
}

.list-charges .list-charges__title:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	height: 1px;
	width: 100%;
	background-color: var(--color-gray-200);
}

.list-charges .list-charges__title span {
	position: relative;
	z-index: 2;
	padding-right: 16px;
	background-color: var(--color-white);
}

.list-charges li > p {
	width: 136px;
	flex: 0 0 136px;
	padding-left: 16px;
}

/* List Thanks */

.list-thanks { list-style-type: none; line-height: 22px; }
.list-thanks li~li { padding-top: 20px; }
.list-thanks small { font-size: 12px; text-transform: uppercase; display: block; color: #777; }

/* List Bank Details, (Bankwire page) */

.list-bank-details {
	list-style-type: none;
	padding-top: 24px;
}

.list-bank-details ~ h5 {
	margin-top: 40px;
}

.list-bank-details li {
	position: relative;
	padding-left: 336px;
}

.list-bank-details li ~ li {
	margin-top: 20px;
}

.list-bank-details span {
	position: absolute;
	top: 0;
	left: 0;
	white-space: nowrap;
	padding-top: 0;
	font-weight: bold;
	font-size: var(--base-font-size-sm);
}

.list-bank-details i {
	margin-left: 5px;
}

.list-bank-details .total {
	color: #a60000; /* margin-top: 30px; */
}




/* ------------------------------------------------------------ *\
	Checkout Widgets
\* ------------------------------------------------------------ */

/* Widget Charges */

.widget-charges {
	position: relative;
}

.widget-charges ~ .widget-charges {
	padding-top: 32px;
}

.widget-charges .list-totals {
	width: 200px;
	float: right;
}

/* .widget-charges .list-bank-details { float: left; width: 46%; padding-top: 18px; }
.widget-charges .list-bank-details:last-child { float: right; } */

.widget-charges .widget-inner {
	border-radius: var(--border-radius-2);
	padding: 28px 30px;
	border: solid 1px var(--color-gray-200);
	background: var(--color-white);
}

.widget-charges .widget-head {
	display: flex;
	margin-bottom: 24px;
	overflow: hidden;
}

.widget-charges .widget-head__title {
	flex: 1 0 auto
}

.widget-charges .widget-head__aside {
	width: 136px;
	flex: 0 0 136px;
	padding-left: 16px;
}

.widget-charges h5 {
	color: rgba(var(--color-base-rgb), 0.5);
	text-transform: uppercase;
	font-size: var(--base-font-size-xsm);
	line-height: var(--base-line-height-xsm);
	font-weight: normal;
	border-bottom: solid 1px currentColor;
	min-width: 136px;
	display: inline-block;
}

.widget-charges .widget-head .button {
	position: absolute;
	top: 10px;
	right: 10px;
}

.widget-charges .widget-body h4 {
	margin-bottom: 8px;
	font-size: 16px;
	line-height: 1.4;
}

.widget-charges .widget-body h4 small {
	font-weight: 400;
	color: rgba(var(--color-base-rgb), 0.5);
	font-size: var(--base-font-size-sm);
	line-height: var(--base-line-height-sm);

}
.widget-charges .widget-body h4 a {
	margin-right: 10px;
	text-decoration: none;
}

.widget-charges .widget-body .list-charges {
	padding-left: 16px;
}

.widget-charges .widget-body .list-charges:not(:last-child) {
	margin-bottom: 12px;
}

.widget-charges .widget-foot {
	padding: 10px 0 0 0;
	overflow: hidden;
}

/* Widget Charges Secondary */

/* .widget-charges-secondary .list-charges {
	background: var(--color-white);
} */

/* .widget-charges-secondary .widget-inner,
.widget-charges-secondary h5 { border-color: #e9e9e9; } */

/* .widget-charges-secondary .list-charges li:after { background-color: #e9e9e9; } */

/* .widget-charges-secondary .widget-inner,
.widget-charges-secondary .list-charges strong,
.widget-charges-secondary .list-charges span { background: #fff; } */

/* ------------------------------------------------------------ *\
	Widget Transaction Details
\* ------------------------------------------------------------ */

.widget-transaction {
	background: var(--color-amber-50);
	border: solid 1px var(--color-amber-300);
	border-radius: var(--border-radius-2);
	padding: 24px 32px;
	overflow: hidden;
}

.widget-transaction h3 {
	font-size: 18px;
	font-weight: normal;
	display: inline-block;
	border-bottom: solid 1px currentColor;
	padding-bottom: 4px;
	padding-right: 16px;
}

.widget-transaction .list-transaction-details {
	float: left;
	width: 50%;
}

.widget-transaction .widget-head {
	margin-bottom: 24px;
}

.widget-transaction .widget-inner {
	overflow: hidden;
}

.widget-transaction .widget-body {

}

.widget-transaction .widget-col {
	float: left;
	display: inline;
	width: 50%;
}

/* List Transaction Details  */

.list-transaction-details {
	list-style-type: none;
}

.list-transaction-details li {
	padding-bottom: 4px;
	min-height: 70px;
}

.list-transaction-details li:last-child {
	padding-bottom: 0;
	min-height: 0;
}

.list-transaction-details span {
	display: block;
	color: var(--color-gray-600);
}

.list-transaction-details .refund {
	display: block;
	color: var(--color-red-800)
}

/*  List Transaction Details Inline  */

.list-transaction-details-inline { overflow: hidden; }
.list-transaction-details-inline ~ .list-transaction-details-inline { margin-top: 20px; }
.list-transaction-details-inline li { float: left; width: 25%; min-height: 0; }

/* Mobile */

@media screen and (max-width: 767px) {
	.widget-charges .widget-inner {
		padding: 15px 16px;
	}
}
/* ------------------------------------------------------------ *\
	Checkout Thanks
\* ------------------------------------------------------------ */

.thanks {
	position: relative;
	text-align: center;
	font-size: 22px;
	line-height: 1.4;
}
.thanks h2 {
	margin-bottom: 16px;
	font-size: 32px;
	line-height: 1.22;
}
.thanks h3 {
	font-size: 24px;
	font-weight: normal;
	margin-bottom: 24px;
}

.thanks p:not(:last-child) {
	padding-bottom: 10px;
}
.thanks p small {
	font-size: 12px;
}

.thanks-image {
	width: 220px;
	margin: 0 auto 32px;
}

.thanks-image img {
	display: block;
	width: 100%;
}

.thanks-inner {
	padding: 80px 200px 30px 200px;
}
.thanks-head {
	margin-bottom: 32px;
}

.thanks-body {
	border-top: solid 1px #e9e9e9;
	border-bottom: solid 1px #e9e9e9;
	padding: 22px 0 25px 0;
}
.thanks-body p ~ p {
	padding-top: 15px;
}

.thanks-price {
	color: var(--color-red-600);
}

.thanks .list-checkout-steps {
	top: -4px;
}

/*  Error  */

.thanks-error {
}

.thanks-error h2,
.thanks-error h3 {
	color: var(--color-red-600) !important;
}

@media screen and (max-width: 850px) {
	.thanks-inner { padding: 64px 0 32px;  }
}

@media screen and (max-width: 580px) {
	.thanks  {
		font-size: 14px;
	}

	.thanks h2 {
		font-size: 28px;
	}

	.thanks h3 {
		font-size: 22px;
		margin-bottom: 12px;
	}
}

/* ------------------------------------------------------------ *\
	Loaders
\* ------------------------------------------------------------ */

.loader {
	padding-bottom: 20px;
	text-align: center;
}
.loader .loader-text {
	font-size: 11px;
	line-height: 15px;
	color: var(--color-gray-600);
	display: block;
	padding-top: 20px;
}


.loader-outer {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: rgba(255, 255, 255, 0.95);
	z-index: 2;
	display: none;
}

.loader-outer.active {
	display: block;
}

.loader-outer .loader {
	position: fixed;
	top: 30%;
	left: 50%;
	width: 200px;
	margin-left: calc((var(--summary-width)) * -1);

}

/* ------------------------------------------------------------ *\
	Spinner
\* ------------------------------------------------------------ */

.spinner {
	width: 60px;
	height: 60px;
	position: relative;
	text-align: center;
	margin: auto;
}
.spinner {
	-webkit-animation: rotate 2s infinite linear;
	animation: rotate 2s infinite linear;
}

.spinner-dot1,
.spinner-dot2 {
	width: 60%;
	height: 60%;
	display: inline-block;
	position: absolute;
	top: 0;
	border-radius: 100%;
}
.spinner-dot1,
.spinner-dot2 {
	-webkit-animation: bounce 2s infinite ease-in-out;
	animation: bounce 2s infinite ease-in-out;
}

.spinner-dot2 {
	top: auto;
	bottom: 0px;
	-webkit-animation-delay: -1s;
	animation-delay: -1s;
}

.spinner-dot1 {
	background-color: var(--color-red-600);
}

.spinner-dot2 {
	background-color: var(--color-amber-300);
}

@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

@-webkit-keyframes bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

/* ------------------------------------------------------------ *\
	Quote
\* ------------------------------------------------------------ */

/*  Quote Structure  */

.quote {
	position: relative;
	overflow: hidden;
	padding: 32px 0 24px 24px;
	margin: 20px 0;
	max-width: 740px;
	background-color: var(--color-white);
	border: 1px solid var(--color-brown-100);
	border-radius: var(--border-radius-2);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}

.quote-inner  {
	position: relative;
}

/* Quote Head */

.quote-head {
	padding-bottom: 8px;
	min-height: 48px;
}
.quote-head h2 {
	word-break: break-word;
	font-size: 24px;
	color: var(--color-gray-900);
}

.quote .quote-head h2 {
	margin-bottom: var(--quote-entry-space);
}

.quote-head p {
	color: var(--color-gray-600);
	margin: 0;
}

.quote .quote-head p {
	margin-bottom: var(--quote-entry-space);
}

.quote-head.quote-head-cols-1 {
	margin-right: 112px;
}
.quote-head.quote-head-cols-2 {
	margin-right: 200px;
}
.quote-head.quote-head-cols-3 {
	margin-right: 288px;
}

.quote-body {
	position: relative;
	z-index: 3;
	padding: 0;
}

.quote-nav,
.quote-foot {
	padding-right: 24px;
}

/* quote foot */

.quote-foot {
	color: var(--color-gray-600);
	padding-top: 16px;
}
.quote-foot p { margin: 0; }
.quote-foot p + p { margin-top: 10px; }

/*  Quote Nav  */

.quote-nav {
	position: relative;
	padding-top: 8px;
	text-align: right;
}

.quote-nav a ~ a {
	position: relative;
	margin-left: 16px;
}

.quote-nav a ~ a:before {
	content: '';
	position: absolute;
	top: 4px;
	left: -10px;
	width: 1px;
	height: 12px;
	background: var(--color-gray-500);
}

/*  Quote Items First Level  */

.quote-section {
	padding-top: 8px;
}

.quote-section h3 {
	font-size: 16px;
	color: var(--color-brown-400);
	border-bottom: solid 1px var(--color-brown-100);
	display: inline-block;
	line-height: 1.4;
	padding: 0;
}
.quote .quote-section h3 {
	margin-bottom: var(--quote-entry-space);
}

.quote-section h3 ~ .quote-items {
	margin-top: 4px;
}
.quote-cols-2 .quote-section h3 {
	margin-right: 200px;
}

/*  Quote Items Second Level  */

.quote-section .quote-section h3 {
	font-size: 14px;
	border: 0;
	display: block;
	margin: 0;
}
.quote-section .quote-section h3 ~ .quote-items {
	margin-top: 0;
}

/* Quote Items Third Level */
.quote-section .quote-section h3 ~ .quote-section {
	padding: 0 0 0 15px;
}
.quote-section .quote-section .quote-section h3 {
	font-weight: normal;
	font-style: italic;
}

.quote-section .quote-section h3,
.quote-section h3 ~ .quote-items {
	margin-left: 16px;
}

/*  Quote Elements  */

.quote-price {
	color: var(--color-red-600);
	font-size: 16px;
}

/*  Quote Cols  */

.quote-col {
	display: table-cell;
	width: auto;
	position: relative;
	border-right: solid 24px transparent;
}

.quote-col-price {
	width: 100px;
	padding: 0 8px;
	border-right: 0;
}

.quote-col-price:after {
	content: '';
	width: 1px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.quote-col-line:after {
	content: '';
	position: absolute;
	height: 1px;
	background: #e9e9e9;
	top: 12px;
	left: 0;
	width: 100%;
}

/*  Quote Items  */

.quote-items {
	list-style-type: none !important;
	padding: 0 !important;
	font-size: 14px;
	line-height: 22px;
}

.quote-item {
	display: table;
	width: 100%;
	position: relative;
}

/*  Quote Items Hover  */

.quote-item-regular:hover,
.quote-unit-summary:hover {
	background: var(--color-amber-50);
}

.quote-item-regular:hover .quote-col-line:after,
.quote-unit-summary:hover .quote-col-line:after,
.quote-item-regular:hover .quote-item-description,
.quote-unit-summary:hover .quote-item-description,
.quote-item-regular:hover .quote-item-title,
.quote-unit-summary:hover .quote-item-title {
	background: transparent;
}

.quote-item-regular:hover .quote-col-price:after,
.quote-unit-summary:hover .quote-col-price:after {
	background: var(--color-amber-100);
}

.quote-col {
	z-index: 2;
}

.quote-item-title,
.quote-item-description {
	position: relative;
	z-index: 2;
	background: #fff;
}

.quote-item-title {
	padding-right: 16px;
}

.quote-item-description {
	position: absolute;
	right: 0;
	white-space: nowrap;
	padding: 0 0 0 16px;
	color: var(--color-gray-600);
	top: 1px;
}

/*  Quote Item Primary Secondary Discount */

.quote-item-secondary {
	color: var(--color-gray-600);
}

.quote-item-primary {}
/* .quote-item-discount { }
.quote-item-discount:first-child { padding-top: 25px; }
.quote-item-discount .quote-item-title:before { content: 'discount'; position: absolute; top: 2px; left: -50px; background: #ddd; border-radius: 2px; padding: 1px; font-size: 10px; line-height: 12px; width: 42px; text-align: center; } */

.quote-item-discount {
	color: var(--color-red-600);
}

.quote-item-discount .quote-col-price {
	position: relative;
}

.quote-item-discount .quote-col-price em {
	position: absolute;
	left: 4px;
	top: 0;
	font-style: normal;
}

/*  Quote Items Totals  */

.quote-items-totals {}

.quote-items-totals .quote-item-title {
	background-color: transparent;
	padding: 0;
}

.quote-items-totals .quote-col {
	text-align: right;
}

.quote-items-totals .quote-col-price {
	text-align: left;
}

/* Quot Units */
.quote-unit-summary {
	display: table;
	width: 100%;
	position: relative;
}
.quote-unit-items {
	margin-left: 16px;
	font-size: 12px;
}

/*  Quote Turnaround Heads  */

.quote-turnarounds {
	position: absolute;
	top: -5px;
	right: 0;
	bottom: 5px;
}

.quote-turnarounds em {
	display: inline-block;
	border-bottom: solid 1px var(--color-gray-300);
	text-transform: uppercase;
	font-weight: normal;
	font-size: 12px;
	font-style: normal;
}

.quote-turnarounds small {
	display: block;
	font-size: 11px;
	color: var(--color-gray-600);
	padding-top: 4px;
}

.quote-turnarounds .quote-col-price {
	height: 100%;
	float: left;
	padding-top: 4px;
}
.quote-turnarounds .quote-col-price:after {
	background: var(--color-gray-200);
}

.quote-turnarounds .quote-col-price-accepted {
	background: var(--color-gray-50);
}
.quote-turnarounds .quote-col-price-accepted .quote-ico-included {
	opacity: 1;
	position: absolute;
	top: 12px;
	right: 12px;
}

/*  Quote Section Content  */

.quote-content { padding-bottom: 24px; }

/*  Quote Section Totals  */

.quote-totals {
	background: var(--color-amber-50);
	padding: 0 0 0 24px;
	margin: 0 0 0 -24px;
	position: relative;
}

.quote-totals h3 {
	display: inline-block;
	margin-bottom: 4px;
	color: var(--color-gray-900);
	font-size: 16px;
	border-bottom: solid 1px var(--color-gray-400);
}

.quote-totals .quote-col-price:after {
	background: var(--color-amber-200);
}

.quote-totals .quote-item:first-child .quote-col {
	padding-top: 8px;
}

.quote-totals .quote-item:last-child .quote-col {
	padding-bottom: 8px;
}

/*  Quote Section Totals Summary  */

.quote-totals-summary {
	margin: 0;
	padding: 0;
	background-color: transparent;
}

.quote-totals-summary .quote-col-price:after {
	background-color: transparent;
}

/*  Quote Section Accept  */

.quote-accept {
	padding-top: 8px;
	text-align: right;
}

.quote-accept .quote-item {
	width: auto;
	margin-left: auto;
}

/*  Quote Status  */

.quote .quoter-status {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	border-radius: 0;
	border-bottom-right-radius: 6px;
}

.quote-accept .quote-item .quote-col-price {
	text-align: left;
}

/*  Quote Expired/Accepted/Voided  */

.quote-expired,
.quote-expired .quote-head h2,
.quote-expired .quote-section h3,
.quote-expired .quote-totals h3,
.quote-expired .quote-price,
.quote-expired .quote-item-discount,
.quote-voided,
.quote-voided .quote-head h2,
.quote-voided .quote-section h3,
.quote-voided .quote-totals h3,
.quote-voided .quote-price,
.quote-voided .quote-item-discount,
.quote-accepted,
.quote-accepted .quote-head h2,
.quote-accepted .quote-section h3,
.quote-accepted .quote-totals h3,
.quote-accepted .quote-price,
.quote-accepted .quote-item-discount {
	color: var(--color-gray-600);
}

.quote-expired .quote-section h3,
.quote-voided .quote-section h3,
.quote-accepted .quote-section h3 {
	border-color: var(--color-gray-200);
}

.quote-expired .quote-ico,
.quote-voided .quote-ico,
.quote-accepted .quote-ico {
	opacity: 0.7;
}

.quote-expired .quote-totals-primary,
.quote-voided .quote-totals-primary,
.quote-accepted .quote-totals-primary {
	background: var(--color-gray-100);
}

.quote-expired .quote-totals-primary .quote-col-price::after,
.quote-voided .quote-totals-primary .quote-col-price::after,
.quote-accepted .quote-totals-primary .quote-col-price::after {
	background: var(--color-gray-200);
}

.quote-expired .quote-foot,
.quote-voided .quote-foot,
.quote-accepted .quote-foot,
.quote-accepted .quote-totals-primary .quote-col-price,
.quote-accepted .quote-totals-primary strong {
	color: var(--color-gray-900);
}

.quote-expired .quote-item-regular:hover,
.quote-voided .quote-item-regular:hover,
.quote-accepted .quote-item-regular:hover {
	background: var(--color-gray-100);
}

.quote-expired .quote-item-regular:hover .quote-col-price:after,
.quote-voided .quote-item-regular:hover .quote-col-price:after,
.quote-accepted .quote-item-regular:hover .quote-col-price:after {
	background: var(--color-gray-200);
}

/* ------------------------------------------------------------ *\
	Quoter /  Quoter Page
\* ------------------------------------------------------------ */

.quoter {
	position: relative;
	padding: 16px 0 32px 0;
}

/*  Quoter Actions  */

.quoter-actions {
	margin-bottom: 16px;
	position: relative;
	z-index: 10;
}

.quoter-actions-content {
	float: left;
}

.quoter-actions-aside {
	float: right;
}


/*  Quoter Title  */

.quoter-date {
	position: relative;
	font-size: var(--base-font-size-sm);
	vertical-align: middle;
	top: -1px;
	color: var(--color-gray-600);
}


/*  Nav Quote  */

.quoter-nav { }

.quoter-nav ul { list-style-type: none; font-size: 13px; }

.quoter-nav a { text-decoration: none; color: #333; }
.quoter-nav a:hover { background: #ddd; background: #fef0c8; background: #fceecb; }

.quoter-nav > ul > li { display: inline-block; position: relative; }
.quoter-nav > ul > li > a { display: inline-block; padding: 2px 10px; border-radius: 3px; position: relative; z-index: 2; }

.quoter-nav .current > a { background: #fff; border-bottom-right-radius: 0; border-bottom-left-radius: 0; position: relative; box-shadow: 0 0 2px rgba(0, 0, 0, 0.4); }
.quoter-nav .current > a:after { content: ''; position: absolute; width: 100%; height: 3px; background: #fff; bottom: -3px; left: 0; }
.quoter-nav .current .quoter-nav-dd { display: block; }

.quoter-close { text-decoration: none; color: #333; display: inline-block; padding: 2px 10px; border-radius: 3px; position: absolute; z-index: 2; top: -5px; right: -5px; background: #f5f5f5; font-size: 13px; }
.quoter-close:hover  { background: #eee; }

.quoter-nav .button-quoter-void { color: #ab0000;}

/*  Quoter Nav Dropdown  */

.quoter-nav-dd { position: absolute; top: 27px; left: 0; width: 200px; background: #fff; padding: 5px 0; border-radius: 3px; border-top-left-radius: 0; box-shadow: 0 0 2px rgba(0, 0, 0, 0.4); display: none; }
.quoter-nav-dd li {  }
.quoter-nav-dd a { display: block; padding: 2px 10px 2px 20px; }

/*  Quoter Cols  */

.quoter-row { display: table; width: 100%; table-layout: fixed; height: 400px; }
.quoter-col { display: table-cell; vertical-align: top; width: 50%; }
.quoter-col-space { width: 30px; }

/*  Quoter Body  */

.quoter-body { }

/*  Quoter Editor  */

.quoter-editor { background: #202329; padding: 15px 0; border-radius: 6px; overflow: hidden; position: relative; }
.quoter-editor:before{ content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 50px; background: rgba(255,255,255,.1); }

/*  Quoter Preview  */

.quoter-preview {
	border: 1px solid var(--color-gray-500);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
	border-radius: var(--border-radius-2);
	position: relative;
	overflow: hidden;
}

.quoter-preview:after {
	content: 'draft';
	position: absolute;
	width: 100%;
	margin: auto;
	height: 150px;
	line-height: 150px;
	font-size: 150px;
	color: rgba(0, 0, 0, 0.03);
	text-transform: uppercase;
	top: 0;
	bottom: 0;
	text-align: center;
	font-weight: bold;
	transform: rotate(-30deg);
	pointer-events: none;
}

.quoter-preview .quote { margin: 0; max-width: 100%; border: 0; box-shadow: none; border-radius: 0; }

/*  Quoter alert / shows when saving a quote  */

.quoter-alert {
	position: absolute;
	top: 20px;
	left: 0;
	right: 0;
	text-align: center;
	height: 0;
	display: none;
}
.quoter-alert span {
	display: inline-block;
	background: var(--color-amber-100);
	border-radius: var(--border-radius-1);
	height: 24px;
	line-height: 24px;
	font-size: var(--base-font-size-sm);
	padding: 0 8px;
}

/*  Quoter status  */

.ico-status,
.quoter-status {
	position: relative;
	display: inline-block;
	font-style: normal;
	font-size: 11px;
	line-height: 1.18;
	margin-left: 8px;
	padding: 2px 4px;
	border-radius: var(--border-radius-1);
	background-color: var(--color-gray-200);
}

.ico-status-primary,
.quoter-status-primary {
	font-size: 12px;
	margin-left: 10px;
	padding: 4px;
}

/*  Quoter status colors  */

.quoter-status-posted { background: var(--color-amber-600); color: #fff; }
.quoter-status-accepted { background: var(--color-green-600); color: #fff; }
.quoter-status-draft { background: var(--color-red-600); color: #fff; }

.quoter-status-expired { background: var(--color-gray-400); }
.quoter-status-voided { background: var(--color-gray-600); color: #fff; }
.quoter-status-new { background: var(--color-gray-900); color: #fff; }


/*  Quoter shortcode  */

.quoter-copy-shortcode {
	border: none;
	background: transparent;
	cursor: pointer;
}

.quoter-copy-shortcode:hover,
.quoter-copy-shortcode:active {
	color: var(--color-blue-700);
}

.quoter-shortcode {
	display: inline-block;
	background: var(--color-amber-100);
	border-radius: var(--border-radius-1);
	padding: 2px 4px;
	margin-right: 16px;
	border: 0;
}

/*  Quoter saved status  */

.quoter-unsaved-status { display: none; }

/*  Quoter error  */

.quoter-error { margin: 30px; background: #fceecb; color: #000; padding: 20px; border-radius: 10px; }

/* ------------------------------------------------------------ *\
	Quoter readonly
\* ------------------------------------------------------------ */

.quoter-readonly { }

.quoter-readonly .quoter-shortcode,
.quoter-readonly .quoter-copy-shortcode { display: none; }

.quoter-readonly .quoter-editor { background: #444; }
.quoter-readonly .edit-quoter-name  { display: none; }
.quoter-readonly .eip-quoter-name { background: transparent !important; }

.quoter-posted .quoter-preview:after,
.quoter-expired .quoter-preview:after,
.quoter-voided .quoter-preview:after,
.quoter-accepted .quoter-preview:after  { color: rgba(0,0,0,0.05); }

.quoter-posted .quoter-preview:after { content: 'posted'; }
.quoter-expired .quoter-preview:after { content: 'expired'; }
.quoter-accepted .quoter-preview:after  { content: 'accepted'; }
.quoter-voided .quoter-preview:after  { content: 'voided'; }

/* ------------------------------------------------------------ *\
	Quote icons
\* ------------------------------------------------------------ */

.quote-ico { font-size: 0; line-height: 0; display: inline-block; background-image: url(/css/images/ico-forms.png); background-repeat: no-repeat; text-indent: -4000px; vertical-align: middle; }
.quote-ico-included { width: 11px; height: 10px; background-position: -21px 0; }
.quote-ico-excluded { width: 8px; height: 10px; background-position: -42px 0; }

/* ------------------------------------------------------------ *\
	Quote Lists
\* ------------------------------------------------------------ */

.list-quotes { list-style-type: none; }
.list-quotes li ~ li { padding-top: 3px; }
.list-quotes:not(.is-expanded) .quote--is-expired { display: none; }

.list-quotes .quoter-status { top: 0; }

/* ------------------------------------------------------------ *\
	Quote Misc
\* ------------------------------------------------------------ */

.button-void { float: none; display: inline-block; position: relative; top: 2px; vertical-align: middle; margin-left: 10px; }


/* ------------------------------------------------------------ *\
	Email / signature outer
\* ------------------------------------------------------------ */

.form-row .signature-outer {
	width: 350px;
	border: 1px solid  var(--color-gray-300);
	border-radius: var(--border-radius-1);
	padding: 16px;
}

/* ------------------------------------------------------------ *\
	Single Transactions Page
\* ------------------------------------------------------------ */

.main-transaction {
	position: relative;
}

.main-transaction .shell {
	padding-top: 46px;
	padding-bottom: 64px;
}

/* Mobile */

@media screen and (max-width: 767px) {
	.main-transaction .shell {
		padding-top: 24px;
		padding-bottom: 24px;
	}
}

/* ------------------------------------------------------------ *\
	Transaction Tables
\* ------------------------------------------------------------ */

.table-items table {
	border-collapse: collapse;
	width: 100%;
	color: var(--color-gray-600);
}

.table-items th {
	background: transparent;
	color: var(--color-gray-500);
	padding: 4px 0;
	font-weight: normal;
	border-color: var(--color-gray-300);
}

.table-items td {
	border-bottom: solid 1px var(--color-gray-300);
	padding: 8px 0;
}

.table-items th:first-child,
.table-items td:first-child {
	padding-left: 8px;
}

.table-items th:last-child,
.table-items td:last-child {
	padding-right: 8px;
}

.table-items a {
	text-decoration: none;
}

.table-items th:last-child,
.table-items td:last-child {
	text-align: right;
}

.table-items .table-items-total td {
	border: 0;
	color: var(--color-gray-600);
	text-align: right;
	padding-top: 16px;
}

.table-items .total-price {
	color: var(--color-red-600);
}

.table-items-price {
	color: var(--color-red-600);
}

.table-items-discount {
	color: var(--color-gray-500);
}

.total-invoice-details {
	font-size: 22px;
}

/* ------------------------------------------------------------ *\
	Transaction Statuses
\* ------------------------------------------------------------ */

.ico-status-paid {
	background: var(--color-amber-600);
	color: #fff;
}
.ico-status-completed {
	background: var(--color-green-600);
	color: #fff;
}
.ico-status-error {
	background: var(--color-red-600);
	color: #fff;
}

/* ------------------------------------------------------------ *\
	Page Notification
\* ------------------------------------------------------------ */

.page-notification { position: fixed; left: 10px; right: 10px; bottom: 10px; text-align: center; font-weight: bold; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 20px; border: solid 1px #aaa; -moz-box-shadow: 0 0 3px #aaa; box-shadow: 0 0 3px #aaa; -webkit-box-shadow: #aaa 0 0 3px; z-index: 150; background: #ffffcc; }
.page-notification a { margin: 0 3px; }

/* ------------------------------------------------------------ *\
	Sidebar Trigger
\* ------------------------------------------------------------ */

.sidebar-trigger {
	font-size: 24px;
	line-height: 1;
	padding: 6px;
	text-decoration: none;
	user-select: none;
}

/* ------------------------------------------------------------ *\
	Forms (2016-03-22)
\* ------------------------------------------------------------ */

.simple-form-reminder .form-row-block { width: 450px; }

/* ------------------------------------------------------------ *\
	Vue (2016-03-22)
\* ------------------------------------------------------------ */

[v-cloak] { visibility: hidden; }

/* ------------------------------------------------------------ *\
	Transitions (2016-03-22)
\* ------------------------------------------------------------ */

.fade-transition {
	transition: opacity .2s, visibility .2s;
}

.fade-enter,
.fade-leave {
	opacity: 0;
	visibility: hidden;
}

/* ------------------------------------------------------------ *\
	Project Notebook (2016-03-22)
\* ------------------------------------------------------------ */

.page-project-notebook {
	position: relative;
    display: flex;
	height: calc(100vh - var(--top-height) - var(--header-height));
	padding-top: 16px;
	padding-bottom: 24px;
    flex-flow: column;
}

.project-notebook #top-title>span:first-child:not([style])~.eip-vue {
	margin-left: 5px;
}

.project-notebook .link-back-to {
	font-size: var(--base-font-size-sm);
	line-height: var(--base-line-height-sm);
}

.project-notebook-bar {
	overflow: hidden;
	padding-bottom: 16px;
}

.project-notebook-body {
	position: relative;
	flex-grow: 1;
}

.project-notebook-actions {
	float: left;
}

.project-notebook-actions a {
	float: left;
	padding: 4px 8px;
	border-radius: 3px;
	font-size: 13px;
	text-decoration: none;
	color: var(--color-gray-900);
}

.project-notebook-actions a:hover {
	background: var(--color-amber-300);
}

.project-notebook-editor,
.project-notebook-preview,
.project-notebook-errors { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; box-sizing: border-box; overflow: auto; border-radius: 6px; }

.project-notebook-preview,
.project-notebook-errors { padding: 30px; background: #fff; border: solid 1px #999; box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); }

.project-notebook-editor { background: #202329; overflow: hidden; }
.project-notebook-editor pre { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

.project-notebook-preview .comment-entry { padding: 0; }

.project-notebook-errors-message { padding: 20px; border-radius: 10px; }
.project-notebook-shortcode { float: right; padding: 3px 5px; border-radius: 4px; }
.project-notebook-shortcode input { font-size: 14px; line-height: 1; padding: 0; background: transparent; border: 0; width: 200px; text-align: center; }
.project-notebook-shortcode ~ .project-notebook-shortcode { margin-right: 10px;  }

.project-notebook-syntax-hint { float: right; padding: 1px 10px; }

.project-note { padding: 15px; border: solid 1px #b38b62; border-color: #ccc; border-radius: 3px; max-width: 740px; box-shadow: 0 0 4px rgba(0,0,0,.10); margin: 20px 0; }

.project-note-head { border-bottom: 1px solid #e9e9e9; margin-bottom: 15px; }
.project-note-head h2 { font-size: 22px; color: #000; font-weight: normal; margin-bottom: 10px; }

.project-note-alert { text-align: center; margin: 20px 0; }
.project-note-alert p { display: inline-block; vertical-align: middle; border-radius: 3px; padding: 10px; }

.page-project-note .project-note { max-width: none; }

.project-notebook-shortcode,
.project-notebook-errors-message,
.project-note-alert p {
	background: var(--color-amber-50);
}

/* ------------------------------------------------------------ *\
	Toast (2016-03-22)
\* ------------------------------------------------------------ */

.toast {
	position: absolute;
	top: 24px;
	left: 0;
	right: 0;
	text-align: center;
	height: 0;
}

.toast-message {
	display: inline-block;
	border-radius: var(--border-radius-1);
	height: 24px;
	padding: 0 10px;
	font-size: 14px;
	line-height: 24px;
	background: var(--color-amber-100);
}

/* ------------------------------------------------------------ *\
	Revisions dropdown, note edit page (2016-03-22)
\* ------------------------------------------------------------ */

.revisions {
	position: relative;
	z-index: 1;
	display: inline-block;
}

.revisions-trigger {
	text-decoration: none;
}

.revisions-items {
	display: none;
	width: 200px;
	max-height: 200px;
	overflow: auto;
}

.revisions-item {
	overflow: hidden;
	padding: 6px;
	cursor: pointer;
}

.revisions-item a {
	text-decoration: none;
	color: #000;
	display: block;
	overflow: hidden;
}

.revisions-item a strong {
	text-decoration: underline;
}

.revisions-item-current,
.revisions-item-current *,
.revisions-item-current:hover {
	cursor: default;
}

.revisions-items>ul>li.revisions-item-current {
	background: var(--color-gray-300);
}

.revisions-item-avatar {
	float: left;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	margin-right: 10px;
}

.revisions-item-content {
	overflow: hidden;
	font-size: 10px;
	line-height: 1.2;
}

.revisions-item-content h5 {
	font-size: 11px;
	margin-bottom: 2px;
	font-weight: normal;
}

.revisions-alignright .revisions-items {
	left: auto;
	right: 0;
}

/* Revisions Open */
/* .revisions-is-open .revisions-items {
	display: block !important;
} */

/* Note Revisions Dropdown   */
.revisions-project-note {}

@media screen and (max-width: 767px) {
	.revisions-alignright .revisions-items {
		left: 0;
		right: auto;
	}
}

/* ------------------------------------------------------------ *\
	Buttons Box Top
\* ------------------------------------------------------------ */

.buttons-box-top .buttons {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.buttons-box-top .update-status {
	margin: 0 10px 0 auto;
}

@media screen and (max-width: 1023px) {
	.buttons-box-top .update-status  {
		margin-right: 5px;
	}
}

@media screen and (max-width: 767px) {
	.buttons-box-top .update-status {
		order: 1;
		flex: 1 1 100%;
		margin-top: 16px;
	}
}

/* ------------------------------------------------------------ *\
	Client (2016-03-29)
\* ------------------------------------------------------------ */

.client-section {
	position: relative;
    padding: 16px var(--base-container-gutter);
    border-width: 1px 0;
    border-style: solid;
    border-color: var(--color-gray-400);
}

.client-section + .client-section {
	margin-top: -1px;
}

.client-section-head {
	display: flex;
	align-items: center;
	margin-bottom: 16px;
}

.client-section-head-actions {
	flex-shrink: 0;
	margin-left: 8px;
}


@media screen and (max-width: 767px) {
	.client-section {
		padding: 16px var(--base-container-gutter-sm);
		background-color: var(--color-gray-100);
	}
}

.client-widget { padding-bottom: 20px; }
.client-widget-head { padding-bottom: 10px; }
.client-widget-actions { padding-top: 10px; overflow:auto; }
.client-widget-empty { text-align: center; padding: 10px; border-radius: 6px; }

/* ------------------------------------------------------------ *\
	Client aside
\* ------------------------------------------------------------ */

.client-aside { padding: 24px; }

/* ------------------------------------------------------------ *\
	Client - vCard (2016-03-29)
\* ------------------------------------------------------------ */

.client-vcard {
	overflow: hidden;
}

.client-vcard-avatar {
	float: left;
	border-radius: 50%;
	margin-right: 15px;
}
.client-vcard-content {
	overflow: hidden;
}

.client-vcard-actions {
	float: left;
	clear: left;
	width: 52px;
	margin-top: 5px;
}
.client-vcard-actions .button {
	margin-left: 16px;
}

.client-vcard-details {
	overflow: hidden;
}
.client-vcard-details dt {
	float: left;
	font-weight: bold;
	width: 90px;
	clear: left;
}
.client-vcard-details dd {
	margin: 0 0 5px 90px;
	word-break: break-word;
}

/* ------------------------------------------------------------ *\
	Client - Notes (2016-03-29)
\* ------------------------------------------------------------ */

.client-notes-empty { text-align: center; padding: 10px; border-radius: 6px; }

.client-note {
	padding: 16px 24px;
	border: 1px solid var(--color-gray-300);
	background: #fff;
	border-radius: var(--border-radius-2);
}

.client-note-inner {
	position: relative;
	padding-left: 56px;
}

.client-note:not(:last-child) {
	margin-bottom: 4px;
}

.client-note-head {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
	overflow: hidden;
}

.client-note-head > *:not(:last-child) {
	margin-right: 8px;
}

.client-note-author-avatar {
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
}

.client-note-author-name {
    font-size: 15px;
    line-height: 1.6;
    font-weight: 700;
}

.client-note-date {
	margin-left: auto;
    font-size: 12px;
    color: var(--color-gray-500);
}

.client-note-foot-actions {
	text-align: right;
}

.client-notes-table table { table-layout: auto; }

.client-note-is-unread { background: var(--color-amber-50); }

.client-notes-empty,
.client-widget-empty { background: var(--color-amber-100); }

@media screen and (max-width: 767px) {
	.client-note {
		padding: 8px 16px;
		background-color: var(--color-white);
		border: 1px solid var(--color-gray-400);
		border-radius: var(--border-radius-2);
	}

	.client-note-inner {
		padding-left: 0;
	}

	.client-note-head {
		position: relative;
		display: block;

	}

	.client-note-author {
		padding-left: 32px;
	}

	.client-note-author-avatar {
		width: 24px;
		height: 24px;
	}

}

/* ------------------------------------------------------------ *\
	Client - Co-workers (Client Sidebar Widget)
\* ------------------------------------------------------------ */

.client-coworkers {
	list-style: none outside none;
}

.client-coworker ~ .client-coworker {
	padding-top: 8px;
	margin-top: 8px;
	border-top: 1px solid var(--color-gray-400);
}

.client-coworker-link {
	display: flex;
	align-items: center;
	overflow: hidden;
	text-decoration: none;
}

.client-coworker-avatar {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border-radius: 50%;
}

.client-coworker-name {
	padding-left: 8px;
}

.client-coworker-body {
	padding-left: 34px;
	margin-top: 4px;
}

.client-coworker-notes {
	list-style: none;
}

.client-coworker-note {
	padding: 4px 0;
	border-top: 1px solid var(--color-gray-300);
}

/* ------------------------------------------------------------ *\
	Client - Projects (2016-04-12)
\* ------------------------------------------------------------ */

.client-projects {
	list-style: none outside none;
}

.client-projects-has-more {
	overflow: hidden;
	max-height: 260px;
}

.client-projects-has-more.is-expanded {
	max-height: none;
}

.client-project {
	padding: 4px 0;
}

/* ------------------------------------------------------------ *\
	Project - Client Notes (2016-03-30)
\* ------------------------------------------------------------ */

.project-clients,
.project-client-notes {
	list-style: none outside none;
}

.project-clients .project-client:not(:last-child) {
	border-bottom: 1px solid var(--color-gray-300);
	padding-bottom: 4px;
	margin-bottom: 4px;
}

.project-clients .project-client-head,
.project-clients .project-client-link {
	display: flex;
	align-items: center;
}


.project-clients .project-client-link,
.project-clients .project-client-name {
	flex: 1 1 auto;
	margin-right: 8px;
}

.project-clients .project-client-link {
	min-width: 0;
}

.project-clients .project-client-avatar {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border-radius: 50%;
	margin-right: 8px;
}

.project-clients .project-client-total-notes {
	flex: 0 0 auto
}

.project-client-notes {
	display: none;
	padding: 4px 0 0 34px;
}

.project-client-note {
	border-top: 1px solid var(--color-gray-300);
	padding: 4px 0;
}

.project-client-note-is-unread {
	font-weight: bold;
}

.project-client-is-open .project-client-notes {
	display: block;
}

/* ------------------------------------------------------------ *\
	Project - Reminders (2016-04-06)
\* ------------------------------------------------------------ */

.project-reminders {
	list-style: none outside none;
	font-size: 12px;
	line-height: 1.5;
}

.project-reminder {
	display: flex;
	align-items: center;
	padding: 8px;
	overflow: hidden;
	background-color: var(--color-white);
	border: 1px solid var(--color-gray-300);
	border-radius: var(--border-radius-1);
}
.project-reminder ~ .project-reminder {
	margin-top: 2px;
}
.project-reminder-body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	flex-grow: 1;
	min-width: 0;
}

.project-reminder-actions {
	flex-shrink: 0;
	padding-left: 8px;
}

.project-reminder-actions a {
	font-size: 10px;
	text-decoration: none;
}
.project-reminder-actions a + a {
	margin-left: 4px;
}
.project-reminder-actions a.project-reminder-delete {
	color: var(--color-red-600);
	font-size: 16px;
}

.project-reminder-author {
	flex-shrink: 0;
	padding: 2px 5px;
	color: #fff;
	font-size: 12px;
	line-height: 1;
	overflow: hidden;
	border-radius: var(--border-radius-1);
}

.project-reminder-entry {
	flex-grow: 1;
	padding-right: 8px;
	padding-left: 8px;
	text-decoration: none;
	min-width: 0;
}

.project-reminder-time {
	flex: 0 0 auto;
}

.project-reminder-is-past .project-reminder-body {
	opacity: .5;
}

/* ------------------------------------------------------------ *\
	Hidden Form Reminder
\* ------------------------------------------------------------ */

.hidden-form-reminder label {
	overflow: hidden;
}

.hidden-form-reminder .reminder-date-preview {
	float: right;
}

.hidden-form-reminder .reminder-syntax {
	float: left;
	line-height: 24px;
}

.hidden-form-response {
	text-align: center;
}

.hidden-form-reminder,
.hidden-form-reminder-response {
	margin-top: 8px;
	font-size: 14px;
	line-height: 26px;
}

.hidden-form-reminder .when-static {
	display: none;
}

.hidden-form-reminder .when-static span {
	display: block;
}

/* ------------------------------------------------------------ *\
	Departments list (2016-05-13)
\* ------------------------------------------------------------ */

.departments-list .receive-clients {
	display: none;
}

.departments-list .department.checked + .receive-clients {
	display: block;
}

/* ------------------------------------------------------------ *\
	Managers Widget (2016-05-19)
\* ------------------------------------------------------------ */

.client-widget-managers .autopick-managers{
	display: none;
}

.client-widget-managers .select.autopick~.autopick-managers {
	display: inline;
}

.client-widget-managers .select.loading~.autopick-managers {
	display: none;
}

.client-widget-managers table td {
	vertical-align: top;
	padding-bottom: 12px;
	padding-right: 8px;
}

/* ------------------------------------------------------------ *\
	Client Widget Remove Client
\* ------------------------------------------------------------ */

.client-widget-remove-client {
	margin-top: 16px;
}

/* ------------------------------------------------------------ *\
	Order Popup Details
\* ------------------------------------------------------------ */

.order-popup {
}

.order-popup:before {
	content: '';
	position: fixed;
	z-index: var(--z-overlay);
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.7);
}

.order-popup .order-popup__container {
	position: fixed;
	z-index: var(--z-modal);
	left: 50%;
	top: 50%;
	min-width: 300px;
	max-width: 100%;
	padding: 16px;
	background: var(--color-white);
	border-radius: var(--border-radius-1);
	border: solid 1px  var(--color-gray-300);
	box-shadow: var(--shadow-1);
	transform: translate(-50%, -50%);
}

.order-popup .order-popup__title {
	margin-bottom: 16px;
}
.order-popup .order-popup__row:not(:last-child) {
	margin-bottom: 8px;
}

.order-popup .order-popup__button {
	margin-top: 32px;
}

/* ------------------------------------------------------------ *\
	Popover
\* ------------------------------------------------------------ */

.popover {
	position: relative;
	display: inline-block;
}

.popover .popover__trigger {
	text-decoration: underline;
}

.popover .popover__content {
	position: absolute;
	z-index: 100;
	left: 0;
	top: 100%;
	min-width: 200px;
	padding: 8px;
	border-radius: var(--border-radius-2);
    background: var(--color-base-background);
    border: 1px solid var(--color-gray-300);
	box-shadow: var(--shadow-1);
	line-height: 1.5;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--duration-short), visibility var(--duration-short);
}

.popover:hover .popover__content {
	visibility: visible;
	opacity: 1;
}

/* ------------------------------------------------------------ *\
	Loading
\* ------------------------------------------------------------ */

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

div.loading {
	position: absolute;
	z-index: 10;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.5);
}

div.loading:before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	border-radius: 50%;
	border: 3px solid var(--color-gray-400);
	border-right-color: transparent;
	animation: spin 1s infinite linear;
}

/* ------------------------------------------------------------ *\
	Related Tasks
\* ------------------------------------------------------------ */

/* #related-tasks-box .sidebar-box { min-height: 70px; } */

.related-tasks > strong {
	display: block;
	margin-bottom: 16px;
}

.related-tasks .related-tasks__list {
	list-style: none;
}

.related-tasks .related-tasks__list:not(:last-child) {
	margin-bottom: 16px;
}

/* Single Item */
.related-tasks .related-tasks__item {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.related-tasks .related-tasks__item:not(:last-child) {
	margin-bottom: 4px;
}

.related-tasks .related-tasks__item a {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	font-size: var(--base-font-size-xsm);
	line-height: var(--base-line-height-xsm);
}

.related-tasks .related-tasks__item i.icon-check {
	font-size: 16px;
}
.related-tasks .related-tasks__item i.icon-refresh-cw {
	width: 16px;
	font-size: 13px;
	text-align: center;
}

.related-tasks .related-tasks__item i,
.related-tasks .related-tasks__item img {
	flex-shrink: 0;
	margin-right: 8px;

}

.related-tasks .related-tasks__item img {
	display: inline-block;
	vertical-align: middle;
	width: 26px;
	height: 26px;
	border-radius: 50%;
}

.related-tasks .related-tasks__item span {
	flex-shrink: 1 0 auto;
}

/* Expanded */

.related-tasks.related-tasks--expanded {
	max-height: 219px;
	overflow-y: auto;
}

.related-tasks:not(.related-tasks--expanded) .related-tasks__list--archived > li:nth-child(n + 4) {
	display: none;
}
.related-tasks:not(.related-tasks--expanded) .related-tasks__list--archived > li:nth-child(2) {
	opacity: 0.5;
}
.related-tasks:not(.related-tasks--expanded) .related-tasks__list--archived > li:nth-child(3) {
	opacity: 0.2;
}

/* ------------------------------------------------------------ *\
	Vouchers Table
\* ------------------------------------------------------------ */

.vouchers { overflow-x: auto; }
.vouchers td { vertical-align: middle; }


body.user-type-client #sidebar h3 i.fa {  display: none; }

/* ------------------------------------------------------------ *\
	Admin Archive Button and Popup
\* ------------------------------------------------------------ */

.popup {
	position: fixed;
	z-index: 100000;
	left: 50%;
	top: 40%;
	margin: 0px 0 0 -200px;
	width: 400px;
}

.popup .popup__content {
	box-shadow: var(--shadow-1);
	background: #eee;
	border-radius: var(--border-radius-2);
	padding: 16px;
}

.popup .popup__content .button {
	gap: 0;
}

.popup .icon.icon-x {
	font-size: 20px;
	cursor: pointer;
}

.popup .archive-help-ctrl {
	line-height: 24px;
	cursor: pointer;
}

.popup .archive-help {
	padding-top: 8px;
}

.popup .archive-help p {
	margin-bottom: 8px;
}

.popup .archive-help ul {
	padding-left: 24px;
}

/* ------------------------------------------------------------ *\
	Kitchenapp Banner (Shows in retired mode)
\* ------------------------------------------------------------ */

.kitchenapp-banner {
	display: block;
	padding: 8px;
	border-radius: var(--border-radius-2);
	margin-top: 6px;
	width: 100%;
	color: #fff;
	background: var(--color-red-800);
}

.kitchenapp-banner a {
	color: inherit;
}

/* ------------------------------------------------------------ *\
	Message Popup
\* ------------------------------------------------------------ */

.message-wrapper { position: fixed; z-index: 100; top: 0; left: 0; }
.message-backdrop { content: ''; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,.5);  }

.message-popup { position: fixed !important; max-width: 640px; width: 90vw; height: 80vh; max-height: 550px; top: 0; left: 0; bottom: 0; right: 0; margin: auto; z-index: 100; border-radius: 10px; display: flex;  padding: 40px 40px 70px; box-shadow: 0 0 20px rgba(0,0,0,.3); text-align: left; font-weight: normal !important; box-sizing: border-box; }
.message-popup .message__wrapper {  }
.message-popup .message__body { overflow: auto; flex: 1;  }
.message-popup .message__actions { text-align: left; padding-top: 20px; position: absolute; bottom: 30px; left: 40px; }
.message-popup .message__actions .button { float: none; display: inline-block; }

.message-popup p + p { margin-top: 20px; }
.message-popup h2 { margin-bottom: 30px; color: #333 !important; }

@media (max-width: 580px) {
	.message-popup { padding: 30px 20px 60px; }
	.message-popup .message__actions { left: 20px; bottom: 20px; }
}

/* ------------------------------------------------------------ *\
	Responsive Styles (2015-11-19)
\* ------------------------------------------------------------ */

@media screen and (max-width: 1023px) {

	/* .clients tr td { padding-left: 2px; padding-right: 2px; }
	.clients tr td:nth-of-type(6) { width: 200px; max-width: 200px; white-space: normal; }

	.testimonials table { table-layout: auto; } */

	span.eip-project-name .field { width: 200px; }

	/* Sidebar */

	.quoter-col { display: block; width: auto; }

	/* .shell { width: auto; } */

	.list-transaction-details li { word-wrap: break-word; }

	.checkout-inner .list-radios li { float: left; margin-bottom: 20px; }

	/* .form-checkout .form-hint { display: block; margin-left: 0; }
	.form-checkout .form-row-error .form-notice-error { display: block; margin-left: 0; }
	.form-checkout .form-notice:after { top: 7px; } */

	/* .checkout-full .section-checkout-summary { margin-right: 15px; } */

	/* #pay-box-holder,
	#related-tasks-box,
	#buttons-box { width: 230px; } */

	/* .total-cost { position: static; margin: 20px 0 0; } */

	/* .page { padding-left: 10px; padding-right: 10px; } */



	/* .hidden-form .field-title { width: 180px; } */

	/* .oustanding-charges + .tfoot > .left,
	.oustanding-charges + .tfoot > .right { float: none; display: block; overflow: hidden; }
	.oustanding-charges + .tfoot > .right { height: auto; }
	.oustanding-charges + .tfoot .totals { padding-top: 10px; }
	.oustanding-charges + .tfoot .totals,
	.oustanding-charges + .tfoot .pay-balance { float: none; display: block; clear: both; padding-left: 0; } */

}

@media screen and (max-width: 875px) {
	.sp-holder { height: auto !important; }

	.fluid-form #container { padding-right: 0; }

	.fluid-form #main-container { width: auto; min-width: 0; max-width: 100%; }

	.fluid-form #content { float: none; padding: 0 15px; width: auto; }

	.fluid-form #sidebar { float: none; display: block; margin: 0; width: auto; }

	#order-summary { position: static !important; padding: 10px; width: auto; max-width: 280px; border: 1px solid; border-radius: 8px; margin: 0 auto; }

	.fluid-form .tfoot-holder, .fluid-form #main-container { min-width: 0; width: auto; }

	.copy-as-markdown { display: none; }
}

@media screen and (max-width: 767px) {
	span.eip-quoter-name .field { width: 100px; }

	/* Quoter  */

	.quoter-actions-aside { float: none; display: inline; }
	.quoter-shortcode { float: right; margin-right: 0; margin-bottom: 3px; }
	.quoter-date { display: block; clear: both; text-align: right; font-size: 11px; }

	/* Quote  */

	.quote { padding: 24px 0 12px 12px; }

	.quote-head.quote-head-cols-2 { margin-right: 135px; }
	.quote-head h2 { font-size: 16px; }
	.quote-head p { font-size: 13px; }

	.quote-section .quote-section h3 ~ .quote-section { padding-left: 10px; }
	.quote-section .quote-section h3 { margin-left: 10px; }
	.quote-section h3 { font-size: 14px; }

	.quote-cols-2 .quote-section h3 { margin-right: 135px; word-break: break-word; }

	.quote-items { font-size: 12px; margin-left: 10px !important; }

	.quote-item-title { word-wrap: break-word; }

	.quote-col-price { width: 68px; padding: 0 8px 0 7px; }

	.quote-foot { padding-right: 12px; }
	.quote-foot p { font-size: 12px; line-height: 1.5; }

	/* section transaction */

	.section-transaction { padding: 0 15px 30px; }
	.section-transaction .section-head { padding-bottom: 0; }
	.section-transaction .section-head { padding-bottom: 10px; }

	/* Widget Transaction */

	.widget-transaction { padding: 10px; font-size: 12px; }
	.widget-transaction h3 { font-size: 15px; padding-right: 10px; }


	.widget-transaction .widget-col { width: auto; float: none; display: block; overflow: hidden; }
	.widget-transaction .widget-col ~ .widget-col { padding-top: 10px; border-top: 1px solid rgba(0,0,0,.2); margin-top: 10px; }

	.total-invoice-details { font-size: 16px; }

	.table-items table { font-size: 12px; }

	pre#quoter-editor-ace { font-size: 12px !important; }



	.checkout-head { padding: 0 0 20px; margin: 0 0 30px; }



	/* .form-checkout .form-label { float: none; display: block; width: auto; padding-bottom: 5px; }
	.form-checkout .select { width: 100%; height: 32px; }
	.form-checkout .field { width: 100%; height: 32px; }
	.form-checkout .field {
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
			-ms-box-sizing: border-box;
			 -o-box-sizing: border-box;
				box-sizing: border-box;
	}
	.form-checkout .vat-prefix { height: 30px; line-height: 30px; }

	.form-checkout .form-row-no-label { padding-left: 0; }


	.form-checkout .form-group ~ .form-group { margin-top: 20px; } */

	/* .section-checkout ~ .section-checkout { padding-top: 30px; } */

	.checkout-inner .list-radios li { margin-bottom: 0; }

	.loader-outer .loader { margin-left: -100px; }

	.eip-quoter-name .eip-form { white-space: nowrap; font-size: 0; }
	.eip-quoter-name .button { display: inline-block; vertical-align: top; }
	.eip-quoter-name .field { display: inline-block; vertical-align: top; }

	/* .list-checkout-steps { z-index: 2; } */

	/* #container { padding: 10px 0; } */

	.project-detailed #sidebar { width: 280px; margin: 0; position: fixed; top: 0; right: 0; bottom: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; background: #fff; border-left: 1px solid #ccc; box-shadow: 0 0 20px rgba(0,0,0,.5); z-index: 15; padding: 20px 10px; }
	.project-detailed #sidebar {
		-webkit-transform: translate3d(320px,0,0);
		   -moz-transform: translate3d(320px,0,0);
			-ms-transform: translate3d(320px,0,0);
			 -o-transform: translate3d(320px,0,0);
				transform: translate3d(320px,0,0);
	}

	.project-detailed #sidebar {
		-webkit-transition: -webkit-transform .15s ease, box-shadow .15s linear;
		   -moz-transition:    -moz-transform .15s ease, box-shadow .15s linear;
		   -moz-transition:    -moz-transform .15s ease, box-shadow .15s linear;
			-ms-transition: 	-ms-transform .15s ease, box-shadow .15s linear;
			 -o-transition: 	 -o-transform .15s ease, box-shadow .15s linear;
				transition: 		transform .15s ease, box-shadow .15s linear;
	}

	/* #buttons-box,
	#related-tasks-box,
	#pay-box-holder { width: auto; } */

	.project-detailed { overflow: hidden; }

	.client-layout #admins-sidebar-box > h3,
	.client-layout #co-workers-sidebar-box > h3 { cursor: pointer; }
	.client-layout #admins-sidebar-box > h3:after,
	.client-layout #co-workers-sidebar-box > h3:after { content: ''; width: 0; height: 0; display: inline-block; overflow: hidden; border-width: 7px 6px 0; border-style: solid; vertical-align: top; position: relative; border-left-color: transparent; border-right-color: transparent; top: 6px; margin-left: 8px; }
	.client-layout #admins-sidebar-box.expanded > h3:after,
	.client-layout #co-workers-sidebar-box.expanded > h3:after { border-width: 0 6px 7px; }

	.client-layout #admins-sidebar-box > .user-listing,
	.client-layout #admins-sidebar-box > .add-user,
	.client-layout #co-workers-sidebar-box > .user-listing,
	.client-layout #co-workers-sidebar-box > .add-user { display: none; }
	.client-layout #admins-sidebar-box.expanded > .user-listing,
	.client-layout #admins-sidebar-box.expanded > .add-user,
	.client-layout #co-workers-sidebar-box.expanded > .user-listing,
	.client-layout #co-workers-sidebar-box.expanded > .add-user { display: block; }

	span.eip-project-name .field { width: 120px; }

	#buttons-box,
	#related-tasks-box,
	#pay-box-holder { position: static !important; }
	.project-detailed #sidebar .sp-holder { display: none !important; }

	.project-details .eip .eip-details-form { min-width: 220px; overflow: hidden; }
	.project-details .eip .eip-details-form .field,
	.project-details .eip .eip-details-form .button { float: left; }

	.client-layout #admins-sidebar-box > h3,
	.client-layout #co-workers-sidebar-box > h3 {
		-webkit-user-select: none;
		   -moz-user-select: none;
		   user-select: none;
			-ms-user-select: none;
			 -o-user-select: none;
				user-select: none;
	}

	.file-attachment { padding-left: 50px; position: relative; }
	.file-attachment .file-ico { float: none; position: absolute; top: 0; left: 3px; }

	.file-meta { max-width: 100%; padding-left: 0; }
	.file-meta strong { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

	.comment-head .right .date { font-size: 11px; }

	.quote-item-description { position: static; display: block; padding-left: 0; line-height: 14px; white-space: normal; }

	.checkbox-mode .projects + .tfoot { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9; top: auto; }
	.checkbox-mode .projects + .tfoot .pagging { display: none; }
	.checkbox-mode .projects + .tfoot .button-cancel { display: block; }

	.section-transaction { padding: 0 10px 20px; }

	/* .transactions .ico-status { position: static; display: inline-block; vertical-align: top; padding: 2px 4px; border-radius: 4px; } */

	/* .comment-entry { padding-right: 0; } */

	.submit-comment .form-body { width: auto; }
	.submit-comment textarea { resize: none; }

	.tags span { line-height: 13px; padding: 2px 4px; border-radius: 4px; }

	.quoter-alert { top: 46px; right: auto; }

	a.file-preview { width: 34px; height: 34px; line-height: 34px; padding: 0; position: absolute; top: 0; left: 3px; background: transparent; border: 1px solid #eee; border-radius: 3px; }
	a.file-preview img { max-width: 30px; max-height: 30px; margin: 2px; }

	.file-attachment-image { height: 35px; }
	.file-attachment-image .file-meta { padding: 0; }

	.quote-turnarounds .quote-col-price-accepted em {
		color: var(--color-green-600);
		border-bottom-color: var(--color-green-600);
	}
	.quote-turnarounds .quote-col-price-accepted .quote-ico-included { display: none; }

	.quote-section h3 { white-space: normal; }

	.comment-syntax-hint { font-size: 0; }
	.comment-syntax-hint a { font-size: 10px; }

	.project-notebook-bar { display: flex; flex-direction: column; gap: 10px; }
	.project-notebook-shortcode ~ .project-notebook-shortcode { margin-right: 0; }
	.project-notebook-shortcode input { width: 100%; text-align: left; }
	.project-notebook #header { padding-bottom: 10px; }
	.project-notebook #header > .left h2 span { float: left; }
	.eip-vue .eip-form .field { width: 100px; }

	.project-note-head h2 { font-size: 16px; }

	.client:after { right: 229px; }
	.client-content { width: calc(100% - 240px); }
	.client-aside { width: 220px; margin-left: 19px; }

	.related-tasks { max-height: none; }

	div.popup { position: static; margin: 0; width: 100%; margin: 15px 0;}
}

@media screen and (max-width: 580px) {
	/* .simple-form .form-row label,
	#popup .simple-form .form-row label { float: none; width: auto; display: block; padding-bottom: 5px; }

	.simple-form input.c + label,
	.simple-form .radios p input + label { display: inline; }
	.simple-form .radios .option { display: block; }
	.simple-form .radios .option input { top: 1px; }
	.simple-form .radios .option ~ .option { margin-top: 5px; }

	.form-fields { padding: 0; }

	.simple-form .field { width: 100%; display: block; height: 32px; }
	.simple-form .field {
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
			-ms-box-sizing: border-box;
			 -o-box-sizing: border-box;
				box-sizing: border-box;
	}

	.simple-form textarea.field,
	#popup textarea.field,
	.fluid-form .simple-form textarea.field,
	.simple-form select.field { width: 100%; resize: none; min-width: 0; }

	.checks span.check { display: block; }
	.checks span.check ~ span.check { margin-top: 5px; }

	.fluid-form .checks-radios { padding-left: 0; } */

/* 	.services ul li,
	.breakpoints ul li { float: none; display: block; width: auto; height: auto; min-height: 0; border-radius: 0; margin: 0; position: relative; padding: 10px 10px 10px 30px; overflow: hidden; }
	.services ul li ~ li,
	.breakpoints ul li ~ li { margin-top: -1px; }
	.services ul li.active,
	.breakpoints ul li.active { z-index: 1; }
	.services ul li:first-of-type,
	.breakpoints ul li:first-of-type { border-radius: 5px 5px 0 0; }
	.services ul li:last-of-type,
	.breakpoints ul li:last-of-type { border-radius: 0 0 5px 5px; }
	.services ul li .service-image { position: absolute; top: 50%; left: 23px; }
	.services ul li .service-image {
		-webkit-transform: translateY(-55%) scale(.5);
		   -moz-transform: translateY(-55%) scale(.5);
			-ms-transform: translateY(-55%) scale(.5);
			 -o-transform: translateY(-55%) scale(.5);
				transform: translateY(-55%) scale(.5);
	}
	.services ul li strong.title,
	.breakpoints ul li .title { float: left; line-height: 30px; }
	.services ul li strong.price { float: right; line-height: 30px; padding: 0; }
	.services ul li .radio,
	.breakpoints ul li .radio { position: absolute; top: 50%; left: 10px; }
	.services ul li .radio,
	.breakpoints ul li .radio {
		-webkit-transform: translateY(-50%);
		   -moz-transform: translateY(-50%);
			-ms-transform: translateY(-50%);
			 -o-transform: translateY(-50%);
				transform: translateY(-50%);
	} */

	/* .tfoot-form { text-align: center; padding: 0; text-align: center; }
	.tfoot-form .button { float: none; display: inline-block; vertical-align: top; padding: 3px 10px; }
	.tfoot-form input.button { height: 36px; }
	.tfoot-form a.button { height: 28px; line-height: 28px; }
	.tfoot-form .buttons { float: none; display: block; }
	#popup .tfoot-form { padding: 0; } */

	#order-summary { max-width: 100%; margin: 0 15px; }

	.section-checkout-payment .section-body .form-row:first-child .list-radios li { margin-bottom: 20px; }
	.section-checkout-payment .section-body .form-row:first-child + .form-row { margin-top: 0; }

	/* .widget-charges .widget-inner { padding: 15px 14px 18px; } */

	.section-checkout .section-head { font-size: 12px; }
	.section-checkout .section-alert { padding-left: 15px; padding-right: 15px; font-size: 12px; }

	/* .list-bank-details li { padding-left: 150px; font-size: 12px; }
	.list-bank-details span { max-width: 140px; } */

	.page:not(.no-sidebar) .comment-project-details td { width: auto; display: block; float: none; }

	/* .comment-list ol li.project-details { padding-bottom: 3px; } */

	/* .project-details .comment-head strong { margin: 0; } */
	.project-details .comment-project-details { display: none; }
	.project-details.expanded .comment-head:after { border-width: 0 4px 5px; }
	.project-details.expanded .comment-project-details { display: block; }

	.submit-comment .form-head { padding-left: 100px; padding-right: 82px; position: relative; }
	.submit-comment .form-head label { position: absolute; top: 7px; left: 10px; }
	.submit-comment .form-head .button { position: absolute; top: 7px; right: 10px; }
	.submit-comment .form-head .field { width: 100%; height: 26px; }
	.submit-comment .form-head .field {
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
			-ms-box-sizing: border-box;
			 -o-box-sizing: border-box;
				box-sizing: border-box;
	}

	/* #login-box .form-row .field { width: 100%; } */

	.quote-cols-3 .quote-col-price { width: 45px; padding: 0 4px 0 5px; font-size: 10px; }
	.quote-cols-3 .quote-col-price .button { font-size: 10px; height: 24px; padding: 0 6px; }
	.quote-cols-3 .quote-turnarounds small { font-size: 10px; line-height: 1.3; }
	.quote-cols-3 .quote-turnarounds em { font-size: 10px; }

	.quote-cols-3 .quote-price { font-size: 12px; }

	.quote-accept .quote-item .quote-col-price {
		padding: 0 5px;
	}

	.quote-accept .quote-item .quote-col-price .button {
		padding: 0 5px;
		font-size: 12px;
	}

	.simple-form-reminder .form-row-block { width: auto; }

	.client:after { display: none; }
	.client-content,
	.client-aside { width: auto; float: none; }
	.client-aside { padding-top: 20px; border-top: 1px solid #d6d6d6; margin: 0; }
}

body.billing__paid-charges-visible .toggle-charges { display: none; }
body.billing__paid-charges-visible .charges-small .charges-small__items .charge-small.paid {
    display: flex;
}

.loading-spinner {
    animation: spin 1s linear infinite;
    transform-origin: center center;
    font-size: 17px;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.editable:hover {
	background-color: var(--color-amber-200);
}