/*
—————————————————
Global
—————————————————
*/
html {
	font:15px/1.5 cera-pro,'Libre Franklin', sans-serif;
	text-size-adjust:none;
	color:#333;
	background:#48484d;
	box-sizing:border-box;
}
body {
	min-width:1024px;
	max-width:2250px;
	position:relative;
	background:#fff;
	margin:auto;
	min-height:100vh;
}
* {
	box-sizing:inherit;
}
h1, h2, h3 {
	font-size:2.5em;
	line-height:1.1;
	font-weight:500;
	letter-spacing:-0.01em;
	margin-bottom:0.7em;
}
h1 {
	font-size:2.2em;
	font-weight:600;
}
h1 span {
	font-weight:normal;
}
h1 small {
	display:inline-block;
	font-size:0.9375rem;
	font-weight:normal;
	color:#777;
	background:#f2f2f2;
	border-radius:5px;
	padding:0.3em 0.5em;
	position:relative;
	top:-0.3em;
	margin-left:0.35em;
	letter-spacing:0;
}
h1 + p.subheading {
	font-size:0.9375em;
	margin-top:-1.3rem;
	margin-bottom:2rem;
	color:#999;
}
.subheading a:hover {
	text-decoration:underline;
}
h2 {
	font-size:1.5em;
}
h1 .button,
h2 .button {
	font-weight:500;
	font-size:0.9375rem;
	margin-left:1.2em;
	position:relative;
	top:0.3em;
	letter-spacing:0;
	vertical-align:top;
}
h1 .trigger {
	position:relative;
	display:inline-block;
}
h1 .trigger-menu {
	font-size:0.9375rem;
	position:absolute;
	top:2.3em; left:1.2em;
	background:#fff;
	width:10em;
	padding:0.4em 0;
	z-index:1;
	border-radius:0 8px 8px 8px;
	box-shadow:0 0 1em rgba(0,0,0,0.2);
	display:none;
}
h1 .trigger-menu a {
	display:block;
	padding:0.5em 1.2em;
}
h1 .trigger-menu a:hover {
	background:#f2f2f2;
}
h1 .trigger-open .trigger-menu {
	display:block;
}
h1 .trigger-open .button {
	z-index:2;
	border-radius:8px 8px 0 0;
}
h2 .button {
	top:-0.2em;
}
h3 {
	font-size:1.2em;
}
p {
	margin-bottom:1em;
}
strong {
	font-weight:bold;
}
em {
	font-style:italic;
}
a {
	color:inherit;
	text-decoration:none;
}
.fancybox-content {
	border-radius:8px !important;
	overflow:hidden !important;
}
.watch {
	display:inline-block;
	margin-left:1em;
	color:#006aa7;
	background:#e1effa;
	font-size:0.6875em;
	padding:0.1em 0.6em;
	border-radius:0.5em;
	cursor:pointer;
	text-transform:uppercase;
	position:relative;
	top:-0.1em;
}
.watching {
	color:#ff317c;
	background:#ffe8f1;
}
.watch:after {
	content:'Watch';
}
.watching:before {
	content:'\f06e';
	font-family:fa-solid;
	margin-right:0.3em;
}
.watching:after {
	content:'Watching';
}


/*
—————————————————
Containers
—————————————————
*/
#sidebar {
	position:fixed;
	width:13em;
	height:100%;
	background:#29292f url(/Images/mark-ols.png) center 3em no-repeat;
	background-size:70px 70px;
	padding-top:10em;
	z-index:3;
	backface-visibility:hidden;
}
#content {
	width:calc(100% - 13em);
	margin-left:13em;
	padding:3em 3.6em;
}
#board-wrapper {
	max-width:1200px;
	position:relative;
}

/*
—————————————————
Navigation
—————————————————
*/
#nav {
	font-weight:600;
	line-height:1.4;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
	backface-visibility:hidden;
}
#nav li a {
	display:block;
	color:rgba(255,255,255,0.45);
	padding:0.2em 1em 0.2em 2em;
	transition:color 150ms linear;
}
#nav li a:hover {
	color:rgba(255,255,255,0.65);
}
#nav li.active a {
	color:#fff;
}
#nav li ul {
	padding:0.3em 0;
}
#nav li.active ul,
#nav li.open ul {
	display:block;
}
#nav li li a {
	padding:0.1em 1em 0.1em 2.7em;
	font-size:1rem;
	font-weight:500;
	color:rgba(255,255,255,0.3) !important;
}
#nav li li a:hover {
	color:rgba(255,255,255,0.55) !important;
}
#nav li.active li.active a {
    color:#ff317c !important;
}
#nav li a.parent {
	position:relative;
}
#nav li a.parent .trigger {
	position:absolute;
	top:0; right:1.5em;
	width:1.6em;
	height:1.6em;
	text-align:center;
	line-height:1.6em;
	color:rgba(255,255,255,0.3);
	transition:color 100ms;
}
#nav li a.parent .trigger:hover {
	color:rgba(255,255,255,0.7);
}
#nav li a.parent .trigger:after {
	content:'\f078';
	font-family:fa-solid;
	font-size:0.8em;
	transition:transform 100ms;
}
#nav li.open .trigger {
	transform:rotate(180deg);
}
#nav li.active .trigger {
	display:none;
}
#nav .count {
	color:#ff317c;
}
#nav li.settings {
	position:absolute;
	bottom:2em;
	left:0;
}
#nav li.recent a:before,
#nav li.search a:before,
#nav li.settings a:before {
	content:'\f017';
	font-family:fa-solid;
	font-weight:normal;
	margin-right:0.4em;
	float:left;
	width:1em;
	line-height:1.3;
}
#nav li.search a:before {
	content:'\f002';
}
#nav li.settings a:before {
	content:'\f013';
}



/*
—————————————————
Global Search
—————————————————
*/
#search {
	width:calc(100% - 13em);
	margin-left:13em;
	padding:3em 3.6em;
	display:none;
}
#search-input {
	background:#f2f2f2;
	border-radius:7px;
	max-width:25em;
	height:3em;
	position:relative;
	margin-bottom:2em;
}
#search-input:before {
	content:'\f002';
	font-family:fa-solid;
	position:absolute;
	top:1em; left:1em;
	line-height:1;
	pointer-events:none;
	color:#999;
}
#search-input input {
	border:0;
	height:3em;
	width:100%;
	outline:0;
	background:none;
	padding-left:3em;
}
#suggestions {
	width:calc(100% + 2em);
	margin-right:-2em;
	display:none;
}
#suggestions h2 {
	font-weight:600;
	border-bottom:1px solid #ddd;
	padding-bottom:0.4em;
}
.suggestion-list {
	float:left;
	width:calc(33.333% - 2em);
	margin-right:2em;
	border-left:1px solid #ddd;
	padding-left:2em;
}
.suggestion-list:first-child {
	border:0;
	padding-left:0;
}
#suggestions a {
	display:block;
	font-size:0.9375em;
	padding:0.5em 1em;
	line-height:1;
}
#suggestions a strong {
	display:block;
}
#suggestions a span {
	display:block;
	color:#999;
	font-size:0.8rem;
}
#suggestions a:hover {
	background:#e2e2e2;
}
#suggestions a {
	line-height:1.2;
	display:block;
	padding:0.7em 0.6em;
	border-radius:5px;
	transition:background-color 150ms;
	margin-left:-0.6em;
	position:relative;
}
#suggestions a.company {
	position:relative;
	padding-left:5.8em;
	height:5.4em;
	padding-top:1.6em;
	border:1px solid #fff;
}
#suggestions a.company .logo {
	position:absolute;
	top:0.7em; left:0.7em;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	width:4em;
	height:4em;
}
#suggestions a.company img {
	max-width:4em;
	max-height:4em;
	mix-blend-mode:multiply;
}
#suggestions a.project {
	padding-left:2em;
}
#suggestions a.status:before {
	position:absolute;
	top:0.85em; left:0.7em;
}
#suggestions a:hover {
	background:#f5f5f5;
}
#suggestions a:active {
	background:#eaeaea;
}
#suggestions a strong {
	font-weight:600;
}

/*
—————————————————
Company Info
—————————————————
*/
#company {
	background:#f2f2f2;
	border-radius:10px;
    padding:2em;
	display:none;
}
.company-column {
	float:left;
	width:calc(33.333% - 2em);
}
.company-column-double {
	float:right;
	width:calc(66.666% - 2em);
}
#company-card {
	display:block;
	padding:2.6em 1em 0 9em;
	background:#fff;
	height:8.4em;
	position:relative;
	border-radius:7px;
}
#company-card h2 {
	margin:0;
}
#company-card span {
	color:#999;
}
#company-card .logo {
	position:absolute;
	top:0.7em; left:0.7em;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	width:7em;
	height:7em;
}
#company-card .logo img {
	max-width:7em;
	max-height:7em;
	mix-blend-mode:multiply;
}


#company-projects {
	width:calc(100% + 2em);
	margin-right:-2em;
}
#company-projects li {
	float:left;
	width:calc(50% - 2em);
	margin:0 2em 2em 0;
	position:relative;
}
#company-projects li:nth-child(4n + 1) {
	clear:left;
}
#company-projects a {
	display:block;
	text-decoration:none;
	color:inherit;
	font-size:0.9375em;
	position:relative;
	height:12em;
	background:#fff;
	border-radius:7px;
	overflow:hidden;
	padding:4.5em 1em 0 14em;
	line-height:1.1;
}
#company-projects span.cover {
	position:absolute;
	top:0; left:0;
	width:12em;
	height:12em;
	display:block;
	background-repeat:no-repeat;
	background-position:top center;
	background-size:cover;
}
#company-projects span.cover:after {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.03);
	transition:background-color 150ms;
}
#company-projects a:hover span.cover:after {
	background:rgba(0,0,0,0.1);
}
#company-projects strong {
	display:block;
	margin-bottom:0.3em;
}
#company-projects span.viewed {
	display:block;
	color:#aaa;
	font-size:0.875em;
}







/*
—————————————————
Tabs
—————————————————
*/
.tabs {
	border-bottom:1px solid #ddd;
	height:2em;
	margin:2em 0 3.2em 0;
}
.tabs + .grid {
	margin-top:-0.6em;
}
.tabs li {
	float:left;
	position:relative;
}
.tabs a {
	display:block;
	height:calc(2em + 1px);
	line-height:2em;
	padding:0 1.2em;
	box-sizing:border-box;
	transition:border-color 150ms linear;
	border-bottom:3px solid rgba(255,255,255,0);
	position:relative;
}
.tabs a span {
	font-size:12px;
	color:#bbb;
	margin-left:0.5em;
	font-weight:500;
}
.tabs li.active a {
	border-bottom-color:#ff317c;
}
.tabs li.active a span {
	color:#f02e75;
}
.tabs a:hover {
	border-bottom-color:#ddd;
}
.tabs a:active {
	border-bottom-color:#ccc;
}


.tabs .tooltip {
	position:absolute;
	top:-0.5em; right:0em;
	cursor:default;
	width:1.8em;
	text-align:center;
}
.tabs .tooltip:before {
	content:'\f059';
	font-family:fa-solid;
	color:#339ad4;
}
.tabs .tooltip-text {
	position:absolute;
	bottom:calc(100% + 0.7em); right:-1.3em;
	max-width:80%;
	color:#fff;
	background:linear-gradient(to bottom, #444, #333);
	box-shadow:0 0 1.2em rgba(0,0,0,0.15);
	border-radius:6px;
	padding:0.8em 1em;
	font-size:0.875em;
	pointer-events:none;
	opacity:0;
	transition:200ms;
}
.tabs .tooltip:hover + .tooltip-text {
	bottom:calc(100% + 1em);
	opacity:1;
}
.tabs .tooltip-text:after {
	content:'';
	width:0;
	height:0;
	border-style:solid;
	border-width:0.8em 0.8em 0 0.8em;
	border-color:#333 transparent;
	position:absolute;
	top:100%; right:1.8em;
}
.tabs li ul {
	position:absolute;
	top:100%; left:0;
	background:#fff;
	border:1px solid #ddd;
	border-radius:5px;
	padding:0.5em 0;
	z-index:7;
	display:none;
}
.tabs li:hover {
	padding-bottom:0.5em;	
}
.tabs li:hover ul {
	display:block;
}
.tabs li ul li {
	float:none;
	padding-bottom:0 !important;	
}
.tabs li ul a {
	white-space:nowrap;
	line-height:1.8em;
	height:auto;
	border-bottom:0;
}
.tabs li ul a:hover {
	background:#f2f2f2;
}
.tabs li ul a:active {
	background:#ececec;
}


/*
—————————————————
Logos
—————————————————
*/
.logo-wrapper {
	position:absolute;
	top:-1em; right:-1em;
	padding:1em;
}
@media only screen and (max-width:1700px) {
	.logo-wrapper {
		display:none;
	}
}
.logo-wrapper img {
	float:right;
	max-width:160px;
	max-height:100px
}
.logo-wrapper .image-buttons {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	opacity:0;
	background:rgba(255,255,255,0.7);
	text-align:center;
	font-size:0.9375em;
}
.logo-wrapper .image-buttons:hover {
	opacity:1;
}
.logo-wrapper .image-buttons .button {
	margin-top:0.7em;
}
.logo-wrapper input.hidden {
	display:none;
}

/*
—————————————————
Rounds
—————————————————
*/
.rounds {
	margin-bottom:1em;
}
.rounds li {
	display:inline-block;
	margin-right:0.25em;
}
.rounds .button-add {
	margin-left:0.6em;
}
.rounds h2 {
	font-size:1.3em;
}
.rounds a {
	display:block;
	padding:0.35em 0.6em;
	border-radius:5px;
	transition:background-color 100ms;
}
.rounds a:hover {
	background:#f5f5f5;
}
.rounds a:active,
.rounds a:focus {
	background:#eee;
}
.rounds li.active a {
	color:#ff317c;
	background:#fff;
	box-shadow:0 0 0.4em #ddd;
}

/*
—————————————————
Steps
—————————————————

.steps {
	min-height:3rem;
	width:100%;
	text-align:center;
	font-size:0;
}
.steps li {
	font-size:0.875rem;
	display:inline-block;
	margin:0 0.2em;
	vertical-align:top;
	position:relative;
}
.steps li:before {
	content:'';
	position:absolute;
	top:0.9em; right:50%;
	width:9em;
	height:0.4em;
	background:#ccc;	
	z-index:1;
}
.steps li.active:before {
	background:#095d9d;	
}
.steps a {
	display:block;
	padding:2.8em 0.7em 2em 0.7em;
	position:relative;
	width:9em;
	text-decoration:none;
	box-sizing:border-box;
	line-height:1.2;
	color:#bbb;
	user-select:none;
}
.steps li.current a {
	color:#ff317c;
	font-weight:500;
}
.steps a:before {
	content:'';
	width:2.2em;
	height:2.2em;
	border-radius:50%;
	position:absolute;
	top:0; left:calc(50% - 1.1em); 
	background:#ccc;	
	z-index:4;
	transition:background 200ms;
}
.steps li.active a:before {
	background:#095d9d;
}
.steps li.current a:before,
.steps li:hover a:before {
	background:#ff317c !important;
}
.steps li.complete a:after,
.steps li.add a:after {
	content:'\f00c';
	font-family:fa-solid;
	font-weight:normal;
	color:#fff;
	position:absolute;
	width:2.2em;
	line-height:2.2em;
	text-align:center;
	top:0; left:calc(50% - 1.1em); 
	z-index:5;
}
.steps li.add a:after {
	content:'\f067';
}
.steps li:first-child:before {
	display:none;
}
.steps li:after {
	content:'';
	position:absolute;
	top:0.9em; left:calc(50% - 9em);
	width:18em;
	height:0.4em;
	background:linear-gradient(to right, rgba(0,0,0,0), #ff317c, rgba(0,0,0,0));
	z-index:3;
	transition:opacity 200ms;
	opacity:0;
}
.steps li:first-child:after {
	width:9em;
	left:50%;
	background:linear-gradient(to right, #ff317c, rgba(0,0,0,0));
}
.steps li:last-child:after {
	width:9em;
	background:linear-gradient(to right, rgba(0,0,0,0), #ff317c);
}
.steps li.current:after,
.steps li:hover:after {
	opacity:1;
}
.steps li:first-child:last-child:after {
	display:none;
}
*/


.steps {
	display:inline-block;
	height:3.5em;
	background:#f2f2f2;
	padding:0.5em;
	margin:0.5em auto 5em auto;
	border-radius:2.5em;
	font-size:0.875em;
}
.steps li {
	float:left;
	width:2.5em;
	height:2.5em;
	border-radius:50%;
	background:#ddd;
	border:0.2em solid #ddd;
	margin-right:6.6666em;
	position:relative;
}
.steps a {
	color:inherit;
	text-decoration:none;
	display:block;
	position:relative;
	height:6.8em;
	margin-top:-2em;
	z-index:6;
}
.steps span {
	position:absolute;
	top:0; left:calc(50% - 3em);
	width:6em;
	text-align:center;
	font-size:0.8666em;
}
.steps strong {
	position:absolute;
	top:5.1rem; left:calc(50% - 3.75rem);
	width:7.5rem;
	line-height:1.2;
	text-align:center;
	font-weight:normal;
	font-size:0.8125rem;
}
.steps div {
	position:absolute;
	top:0.925em;
	right:2.3em;
	width:6.75em;
	height:0.25em;
	background:#d5d7dc;
}
.steps-narrow li {
	margin-right:4.6666em;
}
.steps-narrow div {
	width:4.75em;
}
.steps-narrow strong {
	left:calc(50% - 4em);
	width:8em;
}
.steps li:last-child {
	margin-right:0;
}
.steps li:first-child div {
	display:none;
}
.steps li.active {
	border-color:#ff317c;
	background:#fff;
}
.steps li.current {
	background:#ff317c;
}
.steps li.complete:after,
.steps li.add:after {
	content:'\f00c';
	font-family:fa-solid;
	font-weight:normal;
	color:#ff317c;
	position:absolute;
	width:2.2em;
	line-height:2.2em;
	text-align:center;
	top:0; left:calc(50% - 1.1em); 
	z-index:5;
}
.steps li.add:after {
	content:'\f067';
	color:#fff;
}
.steps li.current:after {
	color:#fff;
}
.steps li.active div {
	background:#ff317c;
}



/*
—————————————————
Buttons
—————————————————
*/
.button {
	display:inline-block;
	color:#fff;
	background:#ff317c;
	font-weight:500;
	font-size:0.9375em;
	line-height:2em;
	padding:0 1.2em;
	outline:0;
	border:0;
	border-radius:1em;
	cursor:pointer;
	text-align:center;
	user-select:none;
	margin-right:0.2em;
}
.button-small {
	font-size:0.8em;
}
.button-undo {
	background-color:#61c391 !important;
	margin:0 0 -0.2em 1em;
}
.button:hover, .button-add:hover {
	background:#f02e75;
}
.button:active, .button-add:active {
	background:#e02b6d;
}
.button-blue {
	xbackground:linear-gradient(170deg,#53b3f7,#095d9d);
	xbackground:linear-gradient(170deg,#2092d4,#07478a);
	background:#006aa7;
}
.button-blue:hover {
	background:#00649d;
}
.button-blue:active {
	background:#005d93;
}
.button-dark-pink {
	background:#e02b6d;
}
.button-white,
.button-white:hover {
	color:#ff317c;
	background:#fff;
	border:1px solid #ff317c;
}
.button-gray {
	color:#666;
	background:#e1e1e1;
}
.button-gray:hover {
	background:#d9d9d9;
}
.button-gray:active {
	background:#d4d4d4;
}
.button-dark-gray {
	color:#fff;
	background:#bbb;
}
.button-dark-gray:hover {
	background:#b4b4b4;
}
.button-dark-gray:active {
	background:#acacac;
}
.button-right {
	float:right;
	margin-right:0 !important;
	margin-left:0.6em;
}
.button-view {
	float:right;
	margin-top:calc(-3.2rem - 1px - 1em);
	margin-right:0;
	position:relative;
	padding-right:2.4em;
	box-shadow:0 0 0 5px #fff;
}
.button-view:after {
	content:'\f0a9';
	font-size:1.3em;
	font-family:fa-solid;
	width:1.875rem;
	text-align:center;
	line-height:1.875rem;
	position:absolute;
	top:0; right:0;
}
.button-back:before {
	content:'\f053';
	float:left;
	font-size:0.85em;
	font-family:fa-solid;
	width:1.6em;
	margin-left:-0.8em;
	opacity:0.7;
}





.creative-tools {
	float:right;
	position:relative;
	margin:-0.25em 0 0 1.5em;
}
.creative-tools + .switches {
	float:right;
	font-size:0.9375em;
}
.context-menu-dots {
	display:block;
	font-size:1.5em;
	width:1.5em;
	height:1.5em;
	line-height:1.5;
	text-align:center;
	cursor:pointer;
	border-radius:50%;
	transition:background-color 200ms;
}
.context-menu-active .context-menu-dots,
.context-menu-dots:hover {
	background:#f2f2f2;
}
.context-menu-dots:before {
	content:'\f142';
	font-family:fa-light;
}
.context-menu ul {
	display:none;
	position:absolute;
	top:3.2em; right:0;
	width:14em;
	z-index:6;
	text-align:left;
	color:#222;
	background:#fff;
	border:1px solid #ddd;
	padding:0.4em 0;
	border-radius:4px;
	box-shadow:0 0 7px rgba(0,0,0,0.07);
	user-select:none;
	font-size:0.9375em;
}
.context-menu-active ul {
	display:block;
}
.context-menu a {
	display:block;
	padding:0.4em 1.5em;
}
.context-menu a:hover {
	background:#f0f0f0;
}
.context-menu a:active {
	background:#e5e5e5;
}
.context-menu a.icon:before {
	content:'\f013';
	display:inline-block;
	font-family:fa-solid;
	width:1em;
	text-align:center;
	margin-right:0.8em;
}
.context-menu a.edit:before {
	content:'\f044';
}
.context-menu a.add:before {
	content:'\f067';
}
.context-menu a.delete:before {
	content:'\f2ed';
}
.context-menu a.label:before {
	content:'\f02b';
}
.context-menu a.pdf:before {
	content:'\f1c1';
}
.context-menu a.download:before {
	content:'\f019';
}
.context-menu a.print:before {
	content:'\f03a';
}
.context-menu a.clock:before {
	content:'\f017';
}
.context-menu a.squares:before {
	content:'\f009';
}
.context-menu a.highlighter:before {
	content:'\f591';
}
.context-menu a.upload:before {
	content:'\f382';
}



.tools a {
	float:right;
	margin-left:0.7em;
	color:#bbb;
}
.tools a:hover {
	color:#aaa;
}
.tools a:active {
	color:#9b9b9b;
}
.tools span {
	display:none;
}
.tools a:after {
	font-family:fa-solid;
	font-size:1.6em;
	font-weight:normal;
	padding:0 0.2em;
}
.tools a:before {
	display:none;
}
.tools .button-print:after {
	content:'\f03a';
}
.tools .button-download:after {
	content:'\f019';
}
.tools .button-pdf:after {
	content:'\f1c1';
}
.tools .button-edit:after {
	content:'\f044';
}
.button-upload:before {
	content:'\f0c6';
	font-family:fa-solid;
	font-weight:normal;
	margin-right:0.4em;
}
.button-download:before {
	content:'\f019';
	font-family:fa-solid;
	font-weight:normal;
	margin-right:0.4em;
}
.button-email {
	padding-left:0.8em;	
}
.button-email:before {
	content:'\f1d8';
	font-family:fa-solid;
	font-weight:normal;
	margin-right:0.4em;
	display:inline-block;
	width:1em;
}
.status-changer {
	float:right;
	border:1px solid #ddd;
	border-radius:5px;
	border-bottom-color:#ccc;
	box-shadow:0 0 5px #f5f5f5;
	font-size:1em;
	outline:none;
	background:#fff !important;
	padding:0.4em 0.6em;
	margin:0.4em 1.5em 0 0;
}


/*
—————————————————
Board Tiles
—————————————————
*/
#board-tiles {
	width:calc(100% + 2.5em);
	margin-right:-2.5em;
}
#board-tiles li {
	float:left;
	width:calc(50% - 2.5em);
	margin:0 2.5em 2.5em 0;
}
#board-tiles a {
	display:block;
	height:20em;
	position:relative;
	overflow:hidden;
	background:#f2f2f2;
	border-radius:10px;
}
#board-tiles .image {
	background:#ddd;
	position:absolute;
	top:0; left:0;
	width:calc(50% - 1.6rem);
	height:100%;
	padding:1.3em;
	display:flex;
	justify-content:center;
	align-items:center;
}
#board-tiles img {
	border-radius:6px;
	max-width:100%;
	max-height:100%;
}
#board-tiles .text {
	position:absolute;
	top:2rem; left:50%;
	width:calc(50% - 1.6rem);
}
#board-tiles h3 {
	font-size:1.4rem;
}
#board-tiles p {
	margin-top:1em;
	font-size:0.875em;
}
#board-tiles .comments {
	position:absolute;
	bottom:1.6em; right:1.6em;
}
#board-tiles .comments:before {
	font-family:fa-light;
	content:'\f075';
	margin-right:0.3em;
}
#board-tiles .comments-recent:before {
    color:#ff317c;
	font-family:fa-solid;
}
#board-tiles .progress {
	position:absolute;
	bottom:4rem; left:50%;
	width:calc(50% - 1.6rem);
}
#board-tiles .progress-bar {
	height:0.4em;
	background:#ddd;
	border-radius:0.2em;
}
#board-tiles .progress-bar span {
	display:block;
	height:100%;
	background:#ff317c;
	border-radius:0.2em;
}
#board-tiles .progress-bar-completed span {
	background:#61c391;
}
#board-tiles .progress-score {
	font-size:0.8125rem;
	margin-top:0.2em;
}

#board-tiles .ui-sortable-helper,
#board-tiles .ui-sortable-helper a {
	cursor:move;
}
#board-tiles li.placeholder {
	background:#f7f7f7;
	border-radius:10px;
	height:20em;
}


/*
—————————————————
Account Info
—————————————————
*/
#account {
	position:absolute;
	top:30px; right:50px;
	line-height:1.2;
	z-index:3;
	user-select:none;
	cursor:pointer;
}
#account.fixed {
	position:fixed;
}
.review #accountinfo.fixed {
	position:absolute;
}
#account .badge,
#account img {
	float:right;
	width:3em;
	height:3em;
	border-radius:50%;
	margin-left:0.8em;
}
#account .badge {
	color:#fff;
	background:#695390;
	line-height:3em;
	text-align:center;
}
#account .account-welcome {
	cursor:pointer;
	height:3em;
}
#account span.welcome {
	float:left;
	margin-top:0.3em;
	text-align:right;
}
#account strong {
	font-weight:normal;
}
#account .account-menu {
	position:absolute;
	background:#ececed;
	top:4em; right:-0.5em;
	width:8em;
	padding:0.9em 1.2em;
	border-radius:5px;
	display:none;
}
#account.active .account-menu {
	display:block;
}
#account .account-menu:after {
	content:'';
	position:absolute;
	top:-0.6em; right:1.4em;
	width:0; height:0; 
	border-left:0.6em solid transparent;
	border-right:0.6em solid transparent;
	border-bottom:0.6em solid #ececed;
}
#account a {
	display:block;
	line-height:1.5em;
	outline:0;
}
#account a:hover {
	color:#ff317c;
}


/*
—————————————————
Toolbar
—————————————————
*/
.toolbar {
	background:#eee;
	border-radius:10px;
	box-sizing:border-box;
	padding:1em;
	margin-bottom:1.5em;
	position:relative;
}
.toolbar input.text, .toolbar select, .grid td select {
	display:inline-block;
	padding:0.4em 0.5em;
	border-radius:4px;
	border:1px solid #ccc;
	width:auto;
	box-sizing:border-box;
	max-width:400px;
	box-shadow:2px 2px #ccc;
	margin-right:5px;
	outline:0;
	font-size:0.9375em;
	height:2.2em;
}
.toolbar select {
	padding-right:1.2em;
}
.toolbar select.filtered {
	color:#006aa7;
	background:#f0f6fa;
	border-color:#006aa7;
	box-shadow:2px 2px #006aa7;
}
.toolbar input.text {
	width:13em;
}
.toolbar input.button {
	width:8em;
	margin-left:1em;
}
.toolbar .counts {
	position:absolute;
	top:5.5em; right:0;
}
.toolbar .counts li {
	display:inline-block;
	font-size:0.9375em;
}
.toolbar .counts li:after {
	content:' / ';
	margin:0 0.3em;
}
.toolbar .counts li:last-child:after {
	display:none;
}

/*
———————————————————
Alphabet Selector
———————————————————
*/
.alphabet {
	margin:0 -4px 1.8em 0;
	width:calc(100% + 4px);
	font-size:0.9em;
}
.alphabet li {
	float:left;
	width:calc(100% / 26);
}
.has-numbers li {
	width:calc(100% / 27);
}
.alphabet a {
	display:block;
	text-align:center;
	line-height:1.8;
	background:#f5f5f5;
	border-radius:5px;
	margin-right:4px;
}
.alphabet a:hover {
	background:#f0f0f0;
}
.alphabet a:active {
	background:#e5e5e5;
}
.alphabet li.active a {
	color:#fff;
	background:#006aa7;
}

/*
—————————————————
Tags
—————————————————
*/
.tags li {
	display:inline-block;
	margin:0 0.2em 0.5em 0;
	font-size:0.9em;
	padding:0 1.2em;
	line-height:2.4em;
	border-radius:1.2em;
	white-space:nowrap;
	background:#eee;
	cursor:pointer;
	user-select:none;
	width:10em;
	text-align:center;
}
.tags li:hover {
	background:#e9e9e9;
}
.tags li:active {
	background:#e2e2e2;
}
.tags li.active {
	color:#fff;
	background:#f02e75;
}

/*
—————————————————
Tables
—————————————————
*/
.grid {
	width:100%;
	font-size:1em;
	margin-bottom:1em;
}
.grid-wrapper {
	margin-bottom:3.2em;
}
.grid th {
	font-size:0.875em;
	font-weight:bold;
	padding:0.8rem 0.7rem;
	color:#006aa7;
	background:#f9f9f9;
	border-top:1px solid #e2e2e2;
	border-bottom:3px solid #e2e2e2;
}
.grid th a {
	display:inline-block;
	line-height:1;
}
.grid a.hover-link:hover {
	text-decoration:underline;
}
.grid th a:after {
	font-family:fa-solid;
	margin-left:0.3em;
}
.grid th a.asc:after {
	content:'\f0d8';
}
.grid th a.desc:after {
	content:'\f0d7';
}
.grid td.group-header {
	padding:2em 0 0 0;
	position:relative;
	border-bottom:2px solid #e2e2e2;
	margin-bottom:-1px;
}
.grid .group-details {
	padding:0.5em 0;
	position:relative;
}
.grid td.group-header h3 {
	color:#006aa7;
	margin:0 0 0.2em 0;
	display:inline;
}
.grid td.group-header a:hover {
	text-decoration:underline;
}
.grid td.group-header h3 a:hover {
	text-decoration:none;
}
.grid.contact-detail td {
	padding-top:0.6em;
	padding-bottom:0.6em;
}
.grid.contact-detail td.group-header {
	padding:2em 0 0 0;
}
.grid.contact-detail td.group-header h3 {
	padding:0.5em 0;
	display:block;
	margin:0;
}
.grid span.nested {
	float:left;
	width:2em;
	height:1.2em;
	margin:-0.6em 0.4em 0 0.5em;
	overflow:hidden;
	position:relative;
}
.grid span.nested:before {
	content:'';
	width:100%;
	height:150%;
	border:2px solid #f02e75;
	border-radius:5px;
	position:absolute;
	bottom:0; left:25%;
}
.grid-tight span.nested {
	margin-top:-0.4em;
}
.grid td {
	font-size:0.9375em;
	padding:0.6rem 0.7rem;
	border-bottom:0.05em solid #e2e2e2;
	transition:background-color 150ms linear;
	vertical-align:top;
}
.grid-tight td {
	padding:0.4rem 0.7rem;
}
.grid-middle td {
	vertical-align:middle;
}
.grid tr.no-border td,
.grid td.no-border {
	border-bottom:0;
}
.grid tr.unread {
	font-weight:bold;
}
.grid tr.feedback-detail td.no-border {
	padding:0;
}
.grid tr.feedback-detail table {
	width:100%;
	line-height:1.2;
	background:#f9f9f9;
}
.grid tr.feedback-detail table td {
	padding-top:0.6em;
	padding-bottom:0.6em;
	vertical-align:top;
}
.grid tr.feedback-detail .button-small {
	float:left;
	padding:0;
	width:10.1em;
	margin:-0.4em 0;
	font-size:0.8rem;
}
.grid tr.feedback-detail .button-reply:before {
	content:'\f3e5';
	font-family:fa-solid;
	margin-right:0.4em;
}
.grid tr.feedback-detail .button-gray,
.grid tr.feedback-detail .button-half {
	width:7.6em;
	border-radius:1em 0 0 1em;
	margin-right:0;
}
.grid tr.feedback-detail .button-reply-small,
.grid tr.feedback-detail .button-delete-small {
	border-radius:0 1em 1em 0;
	width:2.5em;
	padding-right:0.3em;
}
.grid tr.feedback-detail .button-reply-small:after {
	content:'\f3e5';
	font-family:fa-solid;
	color:#666;
}
.grid tr.feedback-detail .button-delete-small:after {
	content:'\f00d';
	font-family:fa-solid;
	color:#fff;
}
.grid .group-details,
.grid .feedback-name {
	display:inline-block;
	cursor:pointer;
	position:relative;
	user-select:none;
}
.grid .group-details:after,
.grid .feedback-name:after {
	content:'\f0d7';
	display:inline-block;
	font-family:fa-solid;
	font-size:0.9rem;
	margin-left:0.1em;
	color:#888;
	padding:0 0.3em;
	border-radius:4px;
	transition:background-color 150ms linear;
}
.grid .recommendation-heading:after {
	display:none;
}
.grid .group-details:hover:after,
.grid .group-details-active:after,
.grid .feedback-name:hover:after,
.grid .feedback-name-active:after {
	background:#e2e2e2;
}
.grid .group-details div,
.grid .feedback-name div {
	display:none;
	cursor:initial;
	background:#fff;
	padding:1.1em 1.3em;
	border-radius:4px;
	box-shadow:0 0 5px rgba(0,0,0,0.12);
	position:absolute;
	z-index:1;
	top:100%; left:100%;
	border:1px solid #ccc;
	min-width:12em;
	font-size:0.9375em;
	line-height:1.7;
	white-space:nowrap;
	user-select:text;
}
.grid .group-details div {
	top:calc(100% - 0.3em);
}
.grid .group-details div a,
.grid .feedback-name div a {
	color:#006aa7;
}
.grid .group-details div a:hover,
.grid .feedback-name div a:hover {
	text-decoration:underline;
}
.grid .group-details-active div,
.grid .feedback-name-active div {
	display:block;
}
.grid .feedback-name-pinterest:before {
	content:'\f0d2';
	color:#e4001e;
	font-family:fa-brands;
	display:inline-block;
	width:1.1em;
}
.grid a.quote-link {
	display:block;
	padding-left:2rem;
	position:relative;
}
.grid a.quote-link-board:before {
	font-family:fa-solid;
	content:'\f009';
	position:absolute;
	top:0; left:0;
	color:#aaa;
}
.grid .checkboxes {
	font-size:0.875em;
}
.grid .checkboxes input {
	margin-right:0.2em;
}
.grid .checkboxes label {
	color:#aaa;
}
.grid .checkboxes input:checked + label {
	color:#333;
	font-weight:bold;
}


.grid .xero:after {
	content:'';
	display:inline-block;
	width:0.75rem;
	height:0.75rem;
	border-radius:50%;
	margin:0 0 0 7px;
	background:#00b7e2;
}

.grid tr.feedback-rows-status1,
.grid tr.feedback-rows-status2,
.grid tr.feedback-rows-status3,
.grid tr.feedback-rows-status4,
.grid tr.feedback-rows-status1 tr.feedback-status1,
.grid tr.feedback-rows-status2 tr.feedback-status2,
.grid tr.feedback-rows-status3 tr.feedback-status3,
.grid tr.feedback-rows-status4 tr.feedback-status4 {
	display:table-row;
}
.group-header-status1 .feedback-status1,
.group-header-status2 .feedback-status2,
.group-header-status3 .feedback-status3,
.group-header-status4 .feedback-status4 {
	color:#fff;
	background:#f02e75;
}
.grid tr.feedback-rows table {
	width:100%;
}
.grid tr.feedback-rows tr:last-child td {
	border-bottom:0;
}
.grid tr.board-row-active + .feedback-rows {
	display:table-row;
}
.grid th.right,
.grid td.right {
	text-align:right;
	padding-right:5rem;
}
.grid .center {
	text-align:center;
}
.grid .checked,
.grid .unchecked {
	font-family:fa-solid;
}
.grid .checked:before {
	content:'\f00c';
	color:#61c391;
}
.grid .unchecked:before {
	content:'\f00d';
	color:#ddd;
}
.grid tr.unallocated strong {
	color:#00649d;
}
.grid tr.highlighted strong {
	color:#ff317c;
}
.grid tr.clickable:hover td {
	background:#fafafa;
	cursor:pointer;
}
.grid tr.clickable:active td {
	background:#eee;
}
.grid tr.inactive-row td {
	color:#ccc;
}
.pager {
	font-size:0.9em;
	color:#888;
	padding:0.5rem 0;
}
.pager .count {
	float:left
}
.pager .paging {
	float:right
}
.pager span.disabled,
.pager span.divider {
	display:none;
}
.pager span.active,
.pager a {
	float:left;
	margin-left:2px;
	border:1px solid #fff;
	min-width:1.8em;
	text-align:center;
	line-height:1.8em;
	border-radius:50%;
}
.pager span.active {
	border:1px solid #006398;
	background:#006398;
	color:#fff;
	margin-left:3px;
}
.button-status-grid {
	display:inline-block;
	background:#fff;
	padding:0.4em 0.9em 0.4em 0.7em;
	margin:-0.4em;
	border-radius:2em;
	user-select:none;
	white-space:nowrap;
}
.button-status-grid:hover {
	box-shadow:0 0 0.6em rgba(0,0,0,0.11);
}
.feedback-stats {
	position:absolute;
	top:1.75em; right:2em;
}
.feedback-stats span {
	display:inline-block;
	line-height:2em;
	font-size:0.9em;
	margin-left:0.3em;
	border-radius:1em;
	background:#e2e2e2;
	cursor:pointer;
	user-select:none;
	width:9em;
	text-align:center;
}
.feedback-reply {
	display:block;
	margin-top:0.3em;
	font-size:0.9em;
	color:#999;
}
.feedback-reply:first-child {
	margin-top:0;
}
.feedback-reply a {
	color:#006aa7;
}
.feedback-reply a:hover {
	text-decoration:underline;
}
.answers {
	margin-top:0.8em;
}
.answers span {
	display:inline-block;
	margin-right:1em;
	background:#fff;
	box-shadow:0 0.15em 0.3em #ddd;
	font-size:0.8em;
	line-height:1.5em;
	border-radius:0.8em;
	padding:0 0.6em;
}
.answers span:before {
	font-family:fa-solid;
	font-size:0.8em;
	display:inline-block;
	width:1.3em;
}
.answers .answer-yes:before {
	content:'\f00c';
	color:#61c391;
}
.answers .answer-no:before {
	content:'\f00d';
	color:#ff317c;
}
.answers .answer-permission {
	color:#fff;
	background:#61c391;
}
.answers .answer-permission:before {
	content:'\f00c';
}



/*
—————————————————
Toggling
—————————————————
*/
.switches input {
	display:none;
}
.switches label {
	display:inline-block;
	line-height:1.8em;
	user-select:none;
}
.switches label:before {
	vertical-align:middle;
}
.switches input:disabled + label {
	opacity:0.4;
}
.toggle:before,
.switches label:before {
	content:'\f205';
	font-family:fa-solid;
	font-size:1.7em;
	display:inline-block;
	line-height:0.8;
	cursor:pointer;
	transition:color 100ms linear;
	margin-right:0.3em;
	text-align:center;
	width:1.2em;
}
.toggle:before,
.switches input:checked + label:before {
	color:#61c391;
	transform:none;	
}
.switches input + label:before,
.toggle-off:before {
	transform:scaleX(-1);
	color:#d2d2d2;
}
.status-switch {
	text-align:center;
	margin-bottom:2em;
	font-size:0.9375em;
}
.status-switch input + label:before {
	color:#ff317c;
}
.status-switch input:checked + label:before {
	color:#61c391;
}
.status-switch input + label:after {
	content:'Awaiting Approval';
}
.status-switch input:checked + label:after {
	content:'With Studio';
}

/*
—————————————————
Files List
—————————————————
*/
.files {
	width:100%;
	border-bottom:1px solid #ddd;
	font-size:0.9375em;
	margin:2em 0;
}
.files td {
	padding:0.3em;
	border-top:1px solid #ddd;
}
.files td.right {
	text-align:right;
	width:6em;
}
.button-remove {
	line-height:1.8em;
	padding:0 1.6em;
	margin:0;
}
.button-remove:before {
	content:'\f1f8';
	font-family:fa-solid;
}

/*
—————————————————
Status Indicators
—————————————————
*/
.status:before {
	content:'';
	display:inline-block;
	width:12px;
	height:12px;
	border-radius:6px;
	margin:0 7px 0 0;
}

/*
.status1:before, .status-selector input[value='1'] + label:before { background:#74d5e4 !important }
.status2:before, .status-selector input[value='2'] + label:before { background:#0f81c2 !important }
.status3:before, .status-selector input[value='3'] + label:before { background:#61c391 !important }
.status4:before, .status-selector input[value='4'] + label:before { background:#ff317c !important }
.status5:before, .status-selector input[value='5'] + label:before { background:#8560ab !important }
.status6:before, .status-selector input[value='6'] + label:before { background:#8560ab !important }
.status7:before, .status-selector input[value='7'] + label:before { background:#cacaca !important }
*/

.status1:before, .status-selector input[value='1'] + label:before { background:#74d5e4 !important }
.status2:before, .status-selector input[value='2'] + label:before { background:#0f81c2 !important }
.status3:before, .status-selector input[value='3'] + label:before { background:#61c391 !important }
.status4:before, .status-selector input[value='4'] + label:before { background:#8560ab !important }


.quote-status1:before, .quote-status-selector input[value='1'] + label:before { background:#cacaca !important }
.quote-status2:before, .quote-status-selector input[value='2'] + label:before { background:#0f81c2 !important }
.quote-status3:before, .quote-status-selector input[value='3'] + label:before { background:#61c391 !important }
.quote-status4:before, .quote-status-selector input[value='4'] + label:before { background:#ff317c !important }


.board-status1:before, .board-status-selector input[value='1'] + label:before { background:#cacaca !important }
.board-status2:before, .board-status-selector input[value='2'] + label:before { background:#61c391 !important }
.board-status3:before, .board-status-selector input[value='3'] + label:before { background:#ff317c !important }
.board-status4:before, .board-status-selector input[value='4'] + label:before { background:#8560ab !important }



#board-wrapper div .status {
	display:inline-block;
	font-size:0.9375em;
	padding:0.2em 0.7em;
	border-radius:3em;
	transition:background-color 150ms;
	margin-right:1em;
	border:1px solid #ddd;
	border-bottom-width:2px;
}
#board-wrapper div .status:hover {
	background:#f7f7f7;
}
#board-wrapper div .status:active {
	background:#f2f2f2;
}


.button-menu {
	display:inline-block;
	position:relative;
	margin-right:1em;
}
.button-menu ul {
	display:none;
	position:absolute;
	top:2.4em; left:0;
	z-index:6;
	text-align:left;
	color:#222;
	background:#fff;
	border:1px solid #ddd;
	padding:0.4em 0;
	border-radius:4px;
	box-shadow:0 0 7px rgba(0,0,0,0.07);
	user-select:none;
	font-size:0.9375em;
}
.button-menu-active ul {
	display:block;
}
.button-menu ul a {
	display:block;
	white-space:nowrap;
	padding:0.4em 2em 0.4em 1.5em;
}
.button-menu ul a:hover {
	background:#f0f0f0;
}
.button-menu ul a:active {
	background:#e5e5e5;
}


/*
.button-with-menu {
	border-radius:1em 0 0 1em;
	margin-right:0 !important;
}
.button-menu-trigger {
	border-radius:0 1em 1em 0;
	padding:0 0.7em 0 0.5em;
	margin-left:-0.3em;
	font-size:1em;
	position:relative;
	z-index:1;
	border-left:1px solid rgba(0,0,0,0.3);	
}
.button-menu-trigger:after {
	content:'\f0d7';
	font-family:'fa-solid';
}
.button-menu-trigger:hover {
	opacity:0.87;
}
*/



.status-selector {
	display:block;
	width:16em;
}
.status-selector label {
	display:block !important;
	float:none !important;
	font-size:1em !important;
	margin-bottom:0.5em;
	cursor:pointer;
	padding:0.3em 1em !important;
	border-radius:2em !important;
	border:2px solid rgba(0,0,0,0);
	background:#f0f0f0 !important;
	user-select:none;
}
.status-selector label:hover {
	background:#e8e8e8 !important;
}
.status-selector label:before {
	content:'';
	display:inline-block;
	width:12px;
	height:12px;
	border-radius:6px;
	margin:0 9px 0 0;
}
.status-selector input:checked + label {
	border-color:#666;
	background:#fff !important;
}
.status-selector input,
.status-selector br {
	display:none;
}

/*
—————————————————
User Avatars
—————————————————
*/
.avatar,
.avatar-image {
	width:2.8em;
	height:2.8em;
	border-radius:50%;
	margin:-4px 0;
}
.grid .avatar-image {
	display:block;
}
.avatar {
	line-height:2.8em;
	background:#e63478;
	text-align:center;
}
.avatar-blue {
	background:#006398;
}
.avatar-purple {
	background:#695390;
}
.avatar span {
	color:#fff;
}


/*
—————————————————
Form Elements
—————————————————
*/
#form {
	background:#f2f2f2;
	padding:2em;
	border-radius:8px;
	margin-bottom:1em;
	max-width:600px;
}
#form.large-form {
	max-width:1200px;
}
#form h2 {
	margin-bottom:0.75em;
}
#form h3 {
	padding-top:0.7em;
}
#form p, #form .field-wrapper {
	margin-bottom:1.3em;
}
#form p:last-child, #form .field-wrapper:last-child {
	margin-bottom:0.3em;
}
#form label {
	display:inline-block;
	padding:0.15em 0.6em calc(0.15em - 1px) 0.6em;
	color:#444;
	background:#ddd;
	border-radius:5px 5px 0 0;
	font-size:0.8125em;
	font-weight:500;
	transition:background-color 150ms linear;
	vertical-align:bottom;
}
#form .checkboxes label {
	float:none;
	background:none;
	padding:0 0 0 0.5rem;
	position:relative;
	top:-0.1em;
	font-size:0.875rem;
	user-select:none;
}
#form .switches label {
	padding-left:0;
	font-weight:normal;
	font-size:0.9375em;
}
#form .select-all {
	margin-bottom:0.7em;
}
#form .select-all label {
	font-size:1.2em;
	font-weight:500;
	letter-spacing:-0.02em;
}
#form .round-label {
	float:left;
	width:3em;
	margin-top:0.35em;
}
#form .round-label + input.text {
	width:calc(100% - 3em);
	border-radius:5px;
}
#form .tooltip {
	display:inline-block;
	margin-left:0.6em;
	font-size:0.9em;
	line-height:1.4;
}
#form .tooltip:after {
	content:'\f121';
	font-family:fa-solid;
	color:#999;
}
#form input.text,
#form textarea,
#form select {
	display:block;
	font-size:1em;
	width:100%;
	border:1px solid #fff;
	border-bottom-color:#ddd;
	border-radius:0 5px 5px 5px;
	box-shadow:0 0.1em 0.2em rgba(0,0,0,0.04);
	transition:border-color 100ms;
	line-height:1.3;
	box-sizing:border-box;
	padding:0.5em 0.6em;
	outline:none;
	background:#fff;
}
#form input.text:focus,
#form textarea:focus,
#form select:focus {
	outline:0;
	border-color:#6cbbe8 !important;
}

#form p.focused label {
	xbackground:#6cbbe8;
	xcolor:#fff;
}



#form .schedule-send select {
	width:auto;
	display:inline;
}


#form .auto-width select {
	display:inline;
	width:auto;
}
#form select.auto-width {
	width:auto;
}
#form .date-picker label {
	display:block;
	width:10em
}
#form .date-picker select {
	display:inline;
	width:auto;
}

.no-label {
	border-radius:5px !important;
}
:root {
    --ck-z-default: 100000 !important;
    --ck-z-modal: calc( var(--ck-z-default) + 999 ) !important;
}
#form .selector label {
	background:none !important;
	padding:0;
	font-size:0.875em;
	font-weight:normal;
}
#form .selector input {
	margin-right:0.3em;
}
#form .error label {
	background:#ff317c !important;
	color:#fff !important;
}
#form .error input.text:focus,
#form .error textarea:focus,
#form .error select:focus {
	border-color:#ff317c !important;
}
.floated-fields {
	width:102%;
	margin-right:-2%;
}
.floated-fields p,
.floated-fields .field-wrapper {
	float:left;
	margin-right:2%;
}
.floated-fields-large {
	width:101.5%;
	margin-right:-1.5%;
}
.floated-fields-large p,
.floated-fields-large .field-wrapper {
	margin-right:1.5%;
}
.floated-fields input.text,
.floated-fields textarea,
.floated-fields select {
	width:100%;
}
p.form-buttons {
	max-width:600px;
}
#form.large-form + p.form-buttons,
p.form-buttons-large {
	max-width:1200px;
}
.form-buttons .button {
	min-width:7em;
	margin-right:0.6em;
}
.form-column-left {
	float:left;
	width:50%;
	padding-right:2em;
}
.form-column-right {
	float:right;
	width:50%;
	border-left:1px solid #ccc;
	padding-left:2em;
}
.form-section-wrapper,
.form-section {
	margin-bottom:2.5em;
}
.form-section:last-child,
#form .floated-fields:last-child p {
	margin-bottom:0;
}
#form.large-form label {
	background:#ddd;
}
#form.large-form .checkboxes label {
	background:none;
	user-select:none;
}
#form.large-form p.form-buttons {
	padding:1.2em;
	margin:1.8em -1.2em -1.2em -1.2em;
	background:#ddd;
	border-radius:0 0 8px 8px;
}
#form .tbc {
	position:absolute;
	top:-0.2em; right:0;
}
#form .tbc label {
	position:static;
	color:inherit !important;
	background:none !important;
}
.link-right {
	float:right;
	color:#ff317c;
}
#hubspot-messages-iframe-container {
	display:none!important;
}
#form .input-grid {
	margin-bottom:1em;
}
#form .input-grid:last-child {
	margin-bottom:0;
}
#form .input-grid p {
	height:2.7em;
	margin:0;
}
#form .input-grid input,
#form .input-grid select {
	float:left;
	width:10em;
	margin-right:0.4em;
	border-radius:5px !important;
}
#form .input-grid select {
	width:18em;
}
#form .input-grid input::placeholder {
	color:#bbb;
}
#form .input-grid input.currency-label {
	width:5em;
}
#form .input-grid input.amount {
	width:7em;
}
#form .input-grid input.who {
	width:16%;
}
#form .input-grid input.what {
	width:calc(64% - 0.8em);
}
#form .input-grid input.days {
	width:20%;
	margin-right:0;
}
#form .input-grid input.channel-status {
	width:11em;
}
#form .input-grid input.channel-status + select {
	width:calc(100% - 11.4em);
	margin-right:0;
}

.floated-lists div {
	float:left;
	width:15em;
	padding-right:3em;
	padding-bottom:2em;
}
.floated-lists h3 {
	font-size:1.1rem;
	min-height:3em;
}



#form .configurator {
	padding:1.4em;
	background:#e4e4e4;
	border-radius:8px;
}
#form .configurator h3 {
	margin-top:1.4em;
	padding-top:0;
	border-bottom:1px solid #bbb;
    padding-bottom:0.4em;
	margin-bottom:0.4em;

	xdisplay:inline-block;
	xborder-bottom:0.3em solid #ff317c;
    xpadding-bottom:0.2em;
}
#form .configurator h3:first-child {
	margin-top:0;
}
#form .configurator label {
	background:none;
	padding:0;
	color:#666;
}
#form .configurator p {
	margin-bottom:0.2em;
}
#form .configurator input.text, #form .configurator textarea, #form .configurator select {
	border-radius:4px;
	font-size:0.9em;
}




.quiz-answer {
	background:#fff;
	padding:1em;
	border-radius:8px;
	margin-bottom:1.15em;
	box-shadow:0 0 0.7em rgba(0,0,0,0.07);
}
.quiz-answer p {
	float:left;
	width:60%;
	margin:0;
}
.quiz-answer .image-holder {
	float:right;
	width:calc(40% - 1em);
	height:6.2em;
	border-radius:5px;
	background-color:#eee;
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}


#form .company-readonly,
#form .client-contact-readonly,
#form .platform-contact-readonly {
	position:relative;
}

#form input.company-selected,
#form .company-remove,
#form .company-readonly .company-selector,
#form input.client-contact-selected,
#form .client-contact-remove,
#form .client-contact-readonly .client-contact-selector,
#form input.platform-contact-selected,
#form .platform-contact-remove,
#form .platform-contact-readonly .platform-contact-selector {
	display:none;
}
#form .company-readonly input.company-selected,
#form .company-readonly .company-remove,
#form .client-contact-readonly input.client-contact-selected,
#form .client-contact-readonly .client-contact-remove,
#form .platform-contact-readonly input.platform-contact-selected,
#form .platform-contact-readonly .platform-contact-remove {
	display:block;
}
#form .company-selector,
#form .client-contact-selector,
#form .platform-contact-selector {
	width:auto;
	height:auto;
}
#form .company-selector input,
#form .client-contact-selector input,
#form .platform-contact-selector input {
	width:100%;
	padding:0.4em 0.6em;
	border-radius:0 5px 5px 5px;
	min-height:2.2em;
}
#form .company-remove,
#form .client-contact-remove,
#form .platform-contact-remove {
	position:absolute;
	top:1.8rem; right:0;
	cursor:pointer;
	width:1.5rem;
    text-align:center;
    font-size:0.9em;
}
#form .company-remove:before,
#form .client-contact-remove:before,
#form .platform-contact-remove:before {
	font-family:fa-solid;
	content:'\f00d';
}
.terms-overlay {
	font-size:0.9em;
	counter-reset:termscounter;
	padding:0.1em 1.2em 1em 1.2em !important;
	min-width:600px;
	max-width:900px;
}
.terms-overlay h3.terms-label {
	display:inline-block;
	margin-bottom:1.9em;
	border-bottom:0.4em solid #ff317c;
	padding-bottom:0.2em;
	font-weight:600;
	font-size:1.7em;
}
.terms-overlay a {
	color:#f32d75;
}
.terms-overlay ol {
	padding-left:1.8em;
	margin:0 0 1.2em 0;
}
.terms-overlay ol li {
	padding-left:0.5em;
	margin-bottom:0.4em;
	list-style:none;
}
.terms-overlay ol li:before {
	content:counter(termscounter) '. ';
	counter-increment:termscounter;
	display:inline-block;
	width:1.8em;
	margin-left:-1.8em;
}
.terms-overlay ol li ol {
	counter-increment:none;
	margin:0.4em 0 1.2em 1.3em;
}
.terms-overlay ol li ol li {
	list-style:lower-alpha outside;
}
.terms-overlay ol li ol li:before {
	counter-increment:none;
	content:'';
}
.terms-overlay ul {
	padding-left:2.3em;
	margin-bottom:1em;
}
.terms-overlay ul li {
	list-style:disc;
	margin-bottom:0.4em;
}
.terms-overlay table {
	border:1px solid #ddd;
	margin-bottom:1.2em;
	margin-left:2.3em;
}
.terms-overlay table.full-width {
	width:calc(100% - 2.3em);
}
.terms-overlay table + p {
	margin-left:2.3em;
}
.terms-overlay table tr {
	border-bottom:1px solid #ddd;
}
.terms-overlay table th {
	background:#eee;
	padding:0.4em 2em 0.4em 0.7em;
}
.terms-overlay table td {
	padding:0.4em 2em 0.4em 0.7em;
}
.terms-overlay table tr:last-child,
.terms-overlay table td:last-child {
	padding-right:0.7em;
}


/*
—————————————————
Placeholders
—————————————————
*/
.template-wrapper {
	float:left;
	width:30em;
}
@media only screen and (min-width:1500px) {
	.template-wrapper {
		width:40em;
	}
}
.placeholder-list {
	float:left;
	margin-left:4em;
	width:32em;
	font-size:0.875em;
}
.placeholder-list dt,
.placeholder-list dd {
	float:left;
	border-top:1px solid #ddd;
	padding:0.3em 0;
}
.placeholder-list dt {
	clear:left;
	width:12em;
	padding-right:1em;
	cursor:pointer;
}
.placeholder-list dt:hover {
	color:#ff317c;
}
.placeholder-list dd {
	width:20em;
}


/*
—————————————————
Uploads
—————————————————
*/
.uploaded-files ul {
	background:#fff;
	border-radius:6px;
	padding:0.6em 0;
	margin:1em 0;
	border:1px solid #ccc;
}
.uploaded-files li {
	padding:0.2em 0.8em;
	font-size:0.875em;
}
.uploaded-files li:nth-child(2n+1) {
	background:#eee;
}
.uploaded-files a {
	font-weight:500;
}
.uploaded-files a:hover {
	color:#ff317c;
}


/*
—————————————————
Alerts
—————————————————
*/
.confirm-message, .error-message, .locked-message, .completed-message, .approved-message, .waiting-message {
	padding:0.5rem 2rem 0.5rem 1rem;
	color:#fff;
	background:#61c391;
	box-sizing:border-box;
	font-weight:500;
	font-size:0.9375em;
	position:relative;
	border-radius:8px;
	margin-bottom:2em;
}
.locked-message, .completed-message, .approved-message, .waiting-message {
	padding-top:1em;
	padding-bottom:1em;
}
#form .confirm-message, #form .error-message {
	margin:-2rem -2rem 2rem -2rem;
	border-radius:8px 8px 0 0;
}
.overlay #form .confirm-message, .overlay #form .error-message {
	margin:0 0 1.6em 0;
	border-radius:8px;
}
.locked-message, .completed-message {
	background:#f2f2f2;
	color:#999;
	text-align:center;
}
.locked-message:before, .completed-message:before, .approved-message:before {
	font-family:fa-solid;
	content:'\f023';
	margin-right:0.5em;
}
.completed-message:before, .approved-message:before {
	font-family:fa-solid;
	content:'\f00c';
	margin-right:0.5em;
}
.approved-message:before {
	display:inline-block;
	font-size:0.9375em;
	width:1.6em;
	height:1.6em;
	line-height:1.45em;
	padding-top:0.15em;
	text-align:center;
	color:#fff;
	border-radius:50%;
	background:#61c391;
	box-sizing:border-box;
	margin-bottom:-0.1em;
	margin-top:-0.1em;
}
.waiting-message {
	color:#006aa7;
	background:#f0f6fa;
	text-align:center;
}
.waiting-message:before {
	font-family:fa-solid;
	font-weight:normal;
	content:'\f017';
	margin-right:0.3em;
}
.approved-message {
	color:#61c391;
	background:#eaf7f1;
	text-align:center;
}
.error-message {
	background:#695390;
}
.waiting-message + .confirm-message,
.approved-message + .confirm-message,
.waiting-message + .error-message,
.approved-message + .error-message {
	margin-top:-1em;
}
.confirm-message {
	padding-left:2.5rem;
}
.confirm-message:before {
	font-family:fa-solid;
	content:'\f00c';
	margin-right:0.5em;
	position:absolute;
	top:0.5rem; left:1rem;
}
.confirm-message .close,
.error-message .close {
	font-family:fa-solid;
	position:absolute;
	top:0; right:0;
	padding:0.5em 1em;
	cursor:pointer;
}
.confirm-message .close:before,
.error-message .close:before {
	font-family:fa-solid;
	content:'\f00d';
}


/*
—————————————————
Image Upload
—————————————————
*/
.profile-upload {
	position:relative;
	height:116px;
	padding:8px 0 0 110px;
	margin-top:1.5em;
}
.upload input.hidden {
	display:none;
}
.upload .button {
	font-size:0.8em;
	width:9em;
	padding:0;
	text-align:center;
	margin-top:8px;
}
.upload .image-buttons {
	float:left;
	width:9.5em;
}
.upload .image-wrapper {
	float:left;
	display:flex;
	align-items:center;
	min-height:4.5em;
}
.upload img {
	display:block;
	max-width:180px;
	max-height:70px;
	margin:auto;
}
.profile-upload img {
	width:96px;
	height:96px;
	max-height:96px;
	border-radius:50%;
	position:absolute;
	top:0; left:0;
	background:#f2f2f2;
	-webkit-animation:rotation 1s cubic-bezier(0.7, -0.5, 0.3, 2);
}
@-webkit-keyframes rotation {
	from {-webkit-transform: rotate(-130deg); opacity:0 }
	to   {-webkit-transform: rotate(  0deg);  opacity:1 }
}
.doc-link {
	margin-top:0.7em;
	display:inline-block;
	text-decoration:underline;
}


/*
—————————————————
Dropzones
—————————————————
*/
.dropzone {
	display:block;
	min-height:8em;
	background:#f5f5f5;
	border:2px dashed #ddd;
	border-radius:8px;
	position:relative;
	margin-bottom:1.5em;
}
.dropzone input {
	opacity:0;
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	z-index:1;
}
.upload-button {
	display:none;
}
.dropzone:hover {
	background:#f0f0f0;
	border-color:#d2d2d2;
}
.dropzone:active {
	background:#ececec;
}
.dropzone span {
	position:absolute;
	top:calc(50% - 2.5em); left:0;
	width:100%;
	text-align:center;
	color:#999;
}
.dropzone span:before {
	content:'\f382';
	display:block;
	font-family:fa-solid;
	font-size:2em;
}
.dropzone span.loading-files:before {
	content:'\f013';
	animation:loading 2s linear infinite;
}
@keyframes loading {
	0% { transform:rotate(0deg) }
	to { transform:rotate(1turn) }
}

/*
—————————————————
Round Intro
—————————————————
*/
.round-intro {
	text-align:center;
}
.round-intro-text {
	max-width:650px;
	margin:auto;
}
.round-intro-text .avatar-wrapper {
	float:left;
	margin-top:0.6em;
}
.round-intro-text .text {
	float:right;
	background:#f2f2f2;
	padding:1em 1.2em;
	border-radius:0.5em;
	text-align:left;
	position:relative;
	width:calc(100% - 4.2em);
	cursor:pointer;
}
.round-intro-text p {
	margin-bottom:0.5em;
	font-size:0.9375em;
}
.round-intro-text p:last-child {
	margin-bottom:0;
}
.round-intro-text .avatar {
	margin-top:0.5em;
}
.round-intro-text .text:before {
	content:'';
	width:0; height:0;
	border-style:solid;
	border-width:0.5em 1em 0.5em 0;
	border-color:transparent #f2f2f2 transparent transparent;
	position:absolute;
	top:calc(50% - 0.5em);
	top:1.3em;
	left:-1em;
}









/*
—————————————————
Masonry
—————————————————
*/
#masonry {
	display:flex;
	flex-flow:column wrap;
	align-content:space-between;
	height:960px;
	border-radius:3px;
	width:80%;
}
#masonry img {
	display:block;
	width:100%;
	border-radius:8px;
}
#masonry .item {
	width:236px;
	position:relative;
	margin-bottom:24px;
	margin-right:24px;
	background-color:#f5f5f5;
	box-sizing:border-box;
}
#masonry .item:after {
	content:'';
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	border-radius:8px;
	background:rgba(0,0,0,0.03);
}

/* Re-order items into 3 rows*/
#masonry .item:nth-of-type(4n+1) { order:1 }
#masonry .item:nth-of-type(4n+2) { order:2 }
#masonry .item:nth-of-type(4n+3) { order:3 }
#masonry .item:nth-of-type(4n)   { order:4 }

/* Force new columns*/
#masonry .break {
	flex-basis:100%;
	width:0;
	margin:0;
	content:'';
	padding:0;
}

.pins {
	width:calc(100% + 1.2em);
	margin:3em -1.2em 2em 0;
}
.pins ul {
	min-height:1200px;
}
.pins li {
	float:left;
	width:calc(25% - 1.2em);
	margin:0 1.2em 2em 0;
	position:relative;
}
.pins li:nth-child(4n+1) {
	clear:left;
}
.pins-sorting li:nth-child(4n+1) {
	clear:none;
}
.pins li.clear {
	clear:left !important;
}
.pins li.ui-sortable-placeholder {
	visibility:visible !important;
	background:#bbb;
	border-radius:16px;
}
.pins .shim {
	display:block;
	position:relative;
}
.pins .image-shim {
	height:0;
}
.pins .shim:after {
	content:'';
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	border-radius:16px;
	background:rgba(0,0,0,0.03);
	transition:background-color 150ms;
}
/* Shimmer */
.pins .image-shim:after {
	background:linear-gradient(to right, #f7f7f7 0%, #ededed 20%, #f7f7f7 40%, #f7f7f7 100%);
	background-size:800px 100%; 
	animation:shimmer 1s linear infinite forwards;
}
@keyframes shimmer {
	0% {
		background-position:-468px 0;
	}
	100% {
		background-position:468px 0;
	}
}
.pins .image-shim-loaded:after {
	background:rgba(0,0,0,0.03);
}
.pins li:hover .shim:after {
	background:rgba(0,0,0,0.2);
}
.pins img,
.pins video {
	display:block;
	width:100%;
	box-sizing:border-box;
	border-radius:16px;
}
.pins .image-shim img {
	position:absolute;
	top:0; left:0;
	height:100%;
	opacity:0;
	transition:opacity 250ms;
}
.pins .image-shim img.loaded {
	opacity:1;
}
.editable-pins li {
	cursor:move;
}
.pins p {
	opacity:0;
	color:#fff;
	background:#48484d;
	background:rgba(0,0,0,0.7);
	padding:0.8em;
	box-sizing:border-box;
	text-align:center;
	position:absolute;
	bottom:2em; left:0;
	width:100%;
	margin:0;
	transition:bottom 150ms, opacity 150ms;
	z-index:1;
}
.pins strong {
	display:block;
	line-height:1.2;
	font-size:0.875em;
	font-weight:500;
	word-wrap:break-word;
}
.pins p a {
	display:none;
}
.editable-pins p a {
	outline:0;
	display:inline-block;
	line-height:2.3em;
	width:2.3em;
	background:rgba(255,255,255,0.1);
	border-radius:50%;
	margin:0.5em 0.3em 0 0.3em;
	transition:background-color 150ms;
}
.pins p a:hover {
	background:#f02e75;
}
.pins p a:active {
	background:#e02b6d;
}
.pins a:after {
	font-family:fa-solid;
}
.pins a.zoom:after {
	content:'\f002';
}
.pins a.edit:after {
	content:'\f303';
}
.pins a.delete:after {
	content:'\f2ed';
}
.pins a span {
	display:none;
}
.pins a.zoom {
	font-size:1.1em;
	position:absolute;
	top:0.8em; right:0.8em;
	color:#555;
	background:rgba(255,255,255,0.9);
	line-height:2.3em;
	width:2.3em;
	border-radius:50%;
	text-align:center;
	outline:0;
	opacity:0;
	transition:opacity 150ms;
	z-index:1;
}
.pins li:hover p,
.pins li:hover a.zoom {
	opacity:1;
}
.pins li:hover p {
	bottom:3em;
}
.pins .title {
	display:block;
	font:700 14px/normal -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, sans-serif;
	margin-top:0.6em;
	color:#111;
	transition:opacity 150ms;
}
.stacked {
	width:auto;
	margin-right:0;
}
.stacked ul {
	min-height:0;
}
.stacked li {
	float:none;
	width:auto;
	margin:0 0 3em 0;
}
.stacked .shim:after,
.stacked img,
.stacked video {
	border-radius:0;
}
.stacked img,
.stacked video {
	width:auto;
	max-width:100%;
	margin:auto;
	box-shadow:0 0 12px rgba(0,0,0,0.05);
}
.stacked .shim:after {
	display:none;
}
.stacked .title {
	text-align:center;
}
.stacked p {
	width:20em;
	left:calc(50% - 10em);
	border-radius:8px;
}
.stacked a.zoom {
	right:calc(50% - 1.15em);
}
.pins li.ui-sortable-helper:hover .shim:after {
	background:rgba(0,0,0,0.03);
}
.pins li.ui-sortable-helper:hover p,
.pins li.ui-sortable-helper:hover a.zoom,
.pins li.ui-sortable-helper:hover .title {
	opacity:0;
}

/*
—————————————————————
Clients
—————————————————————
*/
.search-suggest {
	width:24em;
	height:4em;
	position:relative;
}
.search-suggest input {
	float:left;
	width:calc(100% - 3em);
	border:1px solid #ddd;
	border-radius:5px;
	border-bottom-color:#ccc;
	outline:none;
	padding:0.5em 0.7em;
}
.search-suggest input:focus {
	border-bottom-color:#ccc;
	box-shadow:0 2px 2px #f5f5f5;
}
.button-add {
	width:2.1rem;
	height:2.1rem;
	line-height:2.1rem;
	text-align:center;
	font-size:1.5em;
	border-radius:50%;
	border:0;
	outline:0;
	color:#fff;
	background:#ff317c;
	user-select:none;
	cursor:pointer;
}
.suggestions {
	background:#fff;
	padding:0.5em 1.2em;
	display:none;
	width:100%;
	max-height:500px;
	overflow-y:auto;
	box-shadow:0 0 15px rgba(0,0,0,0.2);
	position:absolute;
	top:3.3em;
	border-radius:5px;
	z-index:1;
}
.suggestions li {
	position:relative;
	padding:0.5em 1.2em;
	line-height:1.2em;
	outline:none;
	color:inherit;
	margin:0 -1.2em;
	user-select:none;
	cursor:pointer;
}
.suggestions li.selected {
	background:#f5f5f5;
}
.suggestions li.selected:active {
	background:#eee;
}
.suggestions strong {
	display:block;
	font-size:0.875em;
}
.suggestions span {
	display:block;
	font-size:0.8125em;
	color:#777;
}
.collaborators-wrapper {
	display:table;
	margin-top:3em;
}
.collaborators-column {
	display:table-cell;
}
.collaborators-column .button-add {
	float:right;
	margin-top:0.05em;
}
.collaborators-column:first-child {
	padding-right:2.5em;
	border-right:1px solid #ddd;
}
.collaborators-column:last-child {
	padding-left:2.5em;
}
.collaborators { 
	width:24em;
	line-height:1.4;
}
.collaborators li {
	margin-bottom:0.6em;
	background:#f2f2f2;
	padding:0.8em 0.8em 0 4.2em;
	border-radius:5px;
	position:relative;
	height:4.2em;
	font-size:0.875em;
}
.collaborators strong {
	display:block;
}
.collaborators span.email {
	display:block;
	font-size:0.8125rem;
	color:#666;
}
.collaborators span.dots {
	width:1.2em;
	text-align:center;
	line-height:1.5;
	font-size:1.5em;
	position:absolute;
	top:calc(50% - 0.75em); right:0;
	color:#888;
	cursor:pointer;
}
.collaborators span.icon-invited,
.collaborators span.icon-viewed {
	position:absolute;
	top:1.6em; right:3em;
	line-height:1em;
	color:#aaa;
	display:none;
}
.collaborators span.icon-invited:after,
.collaborators span.icon-viewed:after {
	content:'\f1d8';
	font-family:fa-solid;
}
.collaborators span.icon-viewed {
	right:5em;
}
.collaborators span.icon-viewed:after {
	content:'\f06e';
}
.collaborators .invitation-sent span.icon-invited,
.collaborators .has-viewed span.icon-viewed {
	display:block;
}
.collaborators .avatar,
.collaborators .avatar-image {
	margin:0;
	position:absolute;
	top:0.7em; left:0.7em;
}
.collaborators .tools {
	display:none;
	position:absolute;
	top:calc(50% + 0.8em); left:calc(100% - 3em);
	background:#fff;
	border-radius:5px;
	box-shadow:0 0 15px rgba(0,0,0,0.2);
	padding:0.5em 0;
	z-index:1;
}
.collaborators .tools span {
	display:block;
	padding:0.35em 1.5em;
	white-space:nowrap;
	cursor:pointer;
	user-select:none;
}
.collaborators .tools span:hover {
	background:#f5f5f5;
}
.collaborators .tools span:active {
	background:#ededed;
}

/*
—————————————————
Round View
—————————————————
*/
html.round, html.round body {
	background:#eee;
}
#round-view {
	margin:auto;
	max-width:1000px;
	background:#fff;
}
#round-header {
	padding:1.5em;
}
#round-header h1 {
	font-size:2em;
	margin-bottom:0.1em;
}
#round-header p {
	margin-bottom:0;
}
.round-pin {
	position:relative;
	clear:left;
	padding:1.5em;
	border-top:1px solid #ccc;
}
.round-pin img,
.round-pin video {
	float:left;
	width:236px;
}
.round-text {
	float:right;
	width:684px;
	font-size:0.875em;
}
.round-text h3 {
	font-size:1.5em;
}
.round-pin .filename {
	display:inline-block;
	margin-bottom:0.7em;
	color:#35a5e3;
	background:#f6f9fb;
	font-weight:normal;
	line-height:1;
	padding:0.4em 0.8em;
	border-radius:0.9em;
	border:1px solid #35a5e3;
}

/*
—————————————————
Amendments
—————————————————
*/
#amendments div {
	background:#fff;
	padding:0.8em;
	font-size:0.8666em;
	border-radius:5px;
	margin-bottom:1.2em;
	box-shadow:0 0 0.7em #ddd;
	position:relative;
}
#amendments div p:last-child {
	margin:0;
}
#amendments .button {
	position:absolute;
	top:1em; right:1em;
}
#amendments .button-resolved {
	background:none;
	padding:0;
	color:inherit;
}
#amendments .button-resolved:before {
	font-family:fa-solid;
	content:'\f00c';
	margin-right:0.4em;
	color:#61c391;
	font-size:1.2em;
}
.attachments a {
	display:inline-block;
	font-size:0.9em;
	padding:0 1em;
	line-height:2.4em;
	border-radius:1.2em;
	white-space:nowrap;
	background:#fff;
	border:1px solid #ccc;
	margin:0 0.5em 0.6em 0;
	text-overflow:ellipsis;
	overflow:hidden;
	max-width:15em;
}
.attachments a:hover {
	border-color:#ff317c;
}
.attachments a:before {
	font-family:fa-solid;
	content:'\f15b';
	margin-right:0.4em;
	color:#ff317c;
	font-size:1.1em;
}

/*
—————————————————
Company Notes
—————————————————
*/
.company-notes-wrapper {
	margin-bottom:2em;
}
.notes-header {
	float:left;
	font-size:0.9375em;
	width:9rem;
}
.notes-header .button {
	display:block;
	width:7.5rem;
	padding:0;
	margin-bottom:0.7em;
}
.notes {
	float:left;
	width:calc(100% - 9em);
	border-left:1px solid #d4d4d4;
	padding-left:1.5em;
	margin-right:-1em;
}
#company-notes {
	display:table;
	table-layout:fixed;
	border-spacing:1em;
	margin:-1em;
	width:calc(100% + 2em);
	max-width:1500px;
}
#company-notes a {
	display:table-cell;
	background:#f8f8f8;
	padding:0.9em;
	font-size:0.8666em;
	border-radius:5px;
	position:relative;
	border-bottom:2px solid #e5e5e5;
}
#company-notes a:hover {
	background:#f5f5f5;
}
#company-notes a:active {
	background:#f2f2f2;
}
#company-notes a:before {
	content:'\f08d';
    font-family:fa-solid;
    color:#006aa7;
    position:absolute;
    top:-0.5em;
    right:0.5em;
    font-size:1.6em;
    transform:rotate(10deg);
}
#company-notes a:last-child:before {
	color:#ff317c;
}
#company-notes p {
	margin-bottom:0.7em;
}
#company-notes p:last-child {
	margin:0;
}
#company-notes .stamp {
	display:block;
	color:#006aa7;
	font-size:0.85em;
	margin-bottom:1.1em;
}
#company-notes a:last-child .stamp {
	color:#ff317c;
}

#company-notes .attachments a {
	border:0;
}


/*
—————————————————
Terms Selector
—————————————————
*/
.terms-selector {
	display:block;
	margin:1.5em 0;
	line-height:1.25;
	vertical-align:top;
}
.terms-selector br {
	display:none;
}
.terms-selector input {
	float:left;
	width:1em;
	margin:0.1em 0.7em 0 0;
}
.terms-selector span {
	color:#888;
	font-size:0.9375em;
	display:block;
	margin:0 0 0.9em 1.7rem;
}
.terms-selector .standard-terms {
	color:#095d9d;
}



@media only screen and (max-width:1330px) {
	html {
		font-size:15px;
	}
	h1 {
		font-size:2.2em;
	}
	h2 {
		font-size:1.6em;
	}
	#sidebar {
		width:9em;
		padding-top:9em;
		background-size:60px 60px;
		background-position:center 2.5em;
	}
	#content, #search {
		width:calc(100% - 9em);
		margin-left:9em;
		padding:2.6em;
	}
}

@media only screen and (max-width:1280px) {
	html {
		font-size:14px;
	}
	#nav li a {
		padding-left:1.6em;
	}
}





/*
—————————————————
Overlays
—————————————————
*/
html.overlay {
	font-size:15px;
	background:#f2f2f2;
}
html.uploader,
html.uploader #form,
html.login {
	background:#fff;
}
.overlay body {
	min-width:0;
	min-height:460px;
	padding:2.5em;
	background:none;
}
.status-selection body {
	min-height:420px;
}
.account body {
	min-height:550px;
}
.uploader body {
	min-height:0;
	padding-bottom:3em;
	overflow:hidden;
}
.overlay #form {
	padding:0;
	margin:0;
}
.overlay p.form-buttons {
	margin:0;
}
.overlay .button {
	backface-visibility:hidden;
	font-size:1em;
}
.overlay #form .checkboxes label {
	float:none;
	background:none;
	display:inline-block;
	vertical-align:top;
}
.overlay #form .checkboxes label span.contact-email {
	display:block;
	color:#aaa;
	margin:-0.2em 0 0.7em 0;
}
.overlay h2.confirm {
	text-align:center;
	margin:5.5em 0 1.5em 0;
}
.overlay h2.confirm + .form-buttons {
	text-align:center;
}
.overlay .error-message span.close {
	display:none;
}
.overlay .dropzone {
	font-size:0.875em;
	min-height:6.5em;
}
html.login {
	width:auto;
	xfont-size:17px;
}
.login body {
	width:94%;
	max-width:480px;
	margin:5em auto 0 auto;
}
.login #form {
	background:none;
	padding:1em;
}
.login #form input.text {
	border-color:#ddd;
}
.login h2 {
	text-align:center;
}
.login img.ols-brandmark {
	display:block;
	margin:auto;
	width:6em;
	height:6em;
	margin-bottom:3em;
}
.login .logo-container {
	margin:0 auto 3em auto;
	width:12em;
	height:6em;
	display:flex;
	align-items:center;
	justify-content:center;
}
.login .logo-container img {
	display:block;
	max-width:12em;
	max-height:6em;
}


.ols-divider {
	height:4em;
	position:relative;
	margin-bottom:2em;
}
.ols-divider:before {
	content:'';
	position:absolute;
	top:50%; left:0;
	width:100%;
	height:0;
	border-bottom:1px solid #ccc;
}
.ols-divider:after {
	content:'';
	position:absolute;
	width:4em;
	height:4em;
	top:0; left:calc(50% - 2em);
	border:1px solid #ccc;
	border-radius:50%;
	background:#fff url(/Images/mark-ols.png) center no-repeat;
	background-size:auto 2.8em;
}
.cobranding {
	text-align:center;
	margin-bottom:2em;
}
.cobranding div {
	height:6em;
	width:9em;
	display:inline-block;
	vertical-align:top;
}
.cobranding span.plus {
	font-size:2.5em;
	width:1.8em;
	line-height:6rem;
	color:#ccc;
	display:inline-block;
	vertical-align:top;
	font-weight:300;
}
.cobranding div span {
	display:flex;
	height:100%;
	align-items:center;
	justify-content:right;
}
.cobranding div:last-child span {
	justify-content:left;
}
.cobranding img {
	display:block;
	max-width:9em;
	max-height:6em;
}


#progress {
	background:#ff317c;
	position:absolute;
	bottom:0; left:0;
	width:0;
	height:0.5em;
	transition:width 150ms;
	max-width:100%;
}

/*
—————————————————
Lists
—————————————————
*/
ul.bullet {
	padding-left:2.3em;
}
ul.bullet li {
	list-style:disc;
	margin-bottom:0.4em;
}
.hs-matches {
	border-top:1px solid #ddd;
}
.hs-matches li {
	padding:0.3em 0;
	border-bottom:1px solid #ddd;
}
.hs-matches span.company {
	float:left;
	width:calc(100% - 7em);
	padding:0.1em 0;
	line-height:1.2;
}
.hs-matches strong {
	display:block;
}
.hs-matches span.company span {
	font-size:0.9375rem;
}
.hs-matches a,
.hs-matches input {
	float:right;
	width:5rem;
	text-align:center;
	font-size:0.875rem;
	margin-top:0.4em;
}
.hs-matches a.use-button,
.board-editing .hs-matches a.use-link {
	display:none;
}
.hs-matches a.use-link,
.board-editing .hs-matches a.use-button {
	display:block;
}
.options-wrapper div {
	width:50%;
	float:left;
	padding-right:1em;
	margin-bottom:1.5em;
}
.options-wrapper div:nth-child(odd) {
	clear:left;
}
.options-wrapper p.option-cost {
	margin:-0.5em 0 0.5em 0 !important;
}
.options-wrapper ul.bullet {
	font-size:0.875rem;
	margin-bottom:1em;
	padding-left:1.6em;
}
.options-wrapper ul.bullet li {
	margin-bottom:0;
}
.add-ons-wrapper div {
	border-top:1px solid #ccc;
	padding:0.3em 0;
}
.option-cost {
	font-size:0.875rem;
}
.add-on-description {
	float:left;
	width:50%;
	padding-right:2em;
	font-size:0.875rem;
}
.add-on-cost {
	float:left;
	width:calc(50% - 10rem);
	text-align:right;
	font-size:0.875rem;
}
.add-on-buttons {
	float:right;
	text-align:right;
	width:10em;
}


/*
—————————————————
Billing
—————————————————
*/
.billing-items {
	max-width:35em;
}
.billing-item {
	display:block;
}
.billing-item .item-name {
	float:left;
}
.billing-item .item-cost {
	float:right;
}
.billing-total {
	border-top:1px solid #aaa;
	border-bottom:2px solid #aaa;
	padding:0.2em 0;
	margin-top:0.3em;
	font-weight:bold;
}

/*
—————————————————
Company Logos
—————————————————
*/
#company-logos li {
	float:left;
	width:200px;
	height:200px;
	margin:0 1.2em 1.2em 0;
}
#company-logos a {
	display:block;
	width:100%;
	height:100%;
	position:relative;
	background:#eee;
	border-radius:10px;
	padding:10px;
	transition:background-color 100ms;
}
#company-logos a:hover {
	background:#e5e5e5
}
#company-logos a:active {
	background:#ddd;
}
#company-logos .image-wrapper {
	display:flex;
	align-items:center;
	width:128px;
	height:128px;
	margin:auto;
}
#company-logos img {
	display:block;
	margin:auto;
	max-width:128px;
	max-height:128px;
}
#company-logos p {
	position:absolute;
	bottom:0; left:0;
	width:100%;
	padding:0.7em 0.5em;
	text-align:center;
	font-size:13px;
	line-height:16px;
	margin:0;
}
#company-logos p * {
	display:block;
	min-height:16px;
}


/*
—————————————————
Quotes
—————————————————
*/
.quote {
	background:#f2f2f2;
	border-radius:8px;
	position:relative;
	margin-bottom:1em;
}
.quote-header {
	display:table;
	table-layout:fixed;
    width:100%;
    border-spacing:1.5em;
    border-collapse:separate;
}
.quote-header + .quote-header {
	margin-top:-1.6em;
}
.quote-header h2 {
	margin-bottom:0.5em;
}
.quote-header h2.blue {
	padding:0.4rem 1.5rem;
	margin:-1.2rem -1.5rem 1em -1.5rem;
	font-size:1.2em;
	line-height:1.3;
	font-weight:500;
	color:#fff;
	background:#095d9d;
	letter-spacing:0;
}
.quote-header .switches {
	margin-bottom:0;
}
.quote-header .columns {
	padding-top:1em;
}
.quote-header .columns:first-child {
	padding-top:0;
}
.quote-header .left-column {
	float:left;
	width:48%;
}
.quote-header .right-column {
	float:right;
	width:48%;
	border-left:1px solid #d4d4d4;
	padding-left:1.6em;
}
.quote-header .terms p {
	margin-bottom:0.5em;
}
.quote-header .terms-date {
	font-size:0.75rem;
	margin-left:0.3em;
}
.quote-header .terms .button {
	width:7em;
	margin-top:0.4em;
}

.company-notes-link {
	position:relative;
	top:-0.1em;
	margin-left:0.2em;
}
.company-notes-link:after {
	font-family:fa-solid;
	content:'\f05a';
	font-size:1rem;
	color:#f02e75;
}


.quote dl {
	width:100%;
}
.quote dl.secondary-list {
	border-top:1px solid #ddd;
	padding-top:0.8em;
	margin-top:0.8em;
}
.quote dt {
	float:left;
	clear:both;
	width:9.4rem;
	font-weight:bold;
	line-height:2;
}
.quote dt input {
	margin-left:1em;
}
.quote dt label {
	font-weight:normal;
	margin-left:0.2em;
	font-size:0.875em;
}
.quote dt.terms-buttons {
	padding-top:0.3em;
	padding-bottom:0.4em;
}
.quote dd {
	float:right;
	width:calc(100% - 9.4rem);
	padding:0 0 0.2em 1em;
	border-left:1px solid #ccc;
}
.quote dd:last-child {
	padding-bottom:0;
}
.quote .address {
	font-size:13px;
	line-height:1.6;
	text-align:center;
	margin:-1em 0 3em 0;
}
.quote .address strong {
	font-size:14px;
}
.quote .address span {
	color:#ff317c;
	margin:0 0.3em;
}
.customer-details-row {
	margin:-1.5rem;
	display:table-row;
}
.customer-details-column {
	width:50%;
	display:table-cell;
}
.customer-details,
.quote-details {
	width:50%;
	padding:1rem 1.5rem;
	display:table-cell;
	vertical-align:top;
	background:#fff;
	border-radius:6px;
	font-size:0.9375em;
	box-shadow:0 5px 10px #eaeaea;
	border-bottom:4px solid #c9c9c9;
}
.customer-details-column .customer-details {
	display:block;
	width:auto;
}
.customer-details-column .customer-details:first-child {
	margin-bottom:1.2rem;
}
.quote input.text,
.quote textarea.no-border,
.quote select,
.quote-header textarea,
.quote-description textarea,
.quote span.readonly {
	display:block;
	width:100%;
	border:1px solid #fff;
	outline:0;
	padding:0.3em 0.5em;
	border-radius:5px;
	appearance:none;
	transition:border-color 100ms;
	line-height:1.2;
}
.quote input.text,
.quote select {
	height:1.8rem;
}
.quote dd.error input.text {
	border-color:#ff317c;
}
.quote input.emphasised {
	font-weight:bold;
	color:#006aa7;
	background-color:#f0f6fa;
}
.quote-header textarea,
.quote input.text:hover,
.quote textarea.no-border:hover,
.quote select:hover {
	border-color:#d2d2d2;
}
.quote-header textarea:focus,
.quote input.text:focus,
.quote select:focus,
.quote textarea.no-border:focus,
.quote-description textarea:focus {
	border-color:#6cbbe8;
	box-shadow:0 2px 2px #f5f5f5;
}

.select-wrapper {
	display:block;
	position:relative;
}
.select-wrapper:hover:after,
.select-wrapper:focus:after {
	content:'\f078';
	font-family:fa-solid;
	font-size:0.8em;
	position:absolute;
	color:#aaa;
	top:0.5em; right:0.7em;
	pointer-events:none;
}


.quote-description {
	margin-bottom:1.5em;
}
.quote-description-fields p {
	float:left;
	margin-right:1.2em;
}
.quote-description-fields label {
	display:block;
	font-weight:bold;
	color:#006aa7;
	font-size:0.9em;
	margin-bottom:0.2em;
}

.quote-description-fields select,
.quote-description-fields input.text,
.quote-description-fields span.pinterest-info {
	display:block;
	border:1px solid #fff;
	border-bottom-color:#ddd;
	background:#fff;
	box-shadow:0 0.1em 0.2em rgb(0 0 0 / 4%);
	padding:0.5em 0.6em;
	border-radius:5px;
	outline:0;
	min-width:15em;
}
.quote-description-fields span.pinterest-info {
	height:2.35em;
	padding:0.4em 0 0 0;
}
.quote-summary {
	float:left;
	width:calc(100% - 12em);
	min-height:5em;
	position:relative;
	padding:calc(0.7em + 1px) calc(0.8em + 1px);
}
.quote-summary textarea {
	position:absolute;
	top:0; left:0;
	height:100%;
	border-bottom-color:#ddd;
	background:#fff;
	box-shadow:0 0.1em 0.2em rgb(0 0 0 / 4%);
	padding:0.7em 0.8em;
}

.quote-buttons {
	float:right;
	width:10em;
}
.quote-buttons .button {
	display:block;
	width:100%;
	margin-bottom:0.3em;
}

.line-item-summary {
	margin-bottom:3em;
}
.line-item-summary:last-child {
	margin-bottom:1em;
}
.line-item-summary li {
	border-bottom:1px solid #ddd;
	padding:0.3em 0;
}
.line-item-description {
	float:left;
	width:calc(100% - 6em);
}
.line-item-amount {
	float:right;
	width:6em;
	text-align:right;
}




.save-prompt {
	display:none;
	position:absolute;
	bottom:-2.2em; right:0;
	font-size:0.9375em;
	height:calc(2.2em + 8px);
	padding-top:8px;
	background:#f2f2f2;
	border-radius:0 0 8px 8px;
	overflow:hidden;
}
.save-prompt p {
	display:inline-block;
}
.save-prompt input {
	display:block;
	font-weight:500;
	color:#fff;
	height:2.2em;
	background:#ff317c;
	border:0;
	width:10em;
	cursor:pointer;
}
.save-prompt input:hover {
	background:#f02e75;
}
.save-prompt input:active {
	background:#e02b6d;
}

.quote-editable {
	background:#f2f2f2;
	border-radius:0 0 8px 8px;
	padding:1.8em 1.6em 2.4em 1.6em;
	font-size:0.9375em;
	position:relative;
	margin-bottom:1.2em;
}

.quote-editable-locked {
	pointer-events:none;
	padding-left:2.4em;
	padding-right:2.4em;
}
.quote-editable-locked .quote-buttons,
.quote-editable-locked .button {
	display:none;
}
.quote-editable-locked .row-headers .column-delete,
.quote-editable-locked .editable-row .column-delete {
	display:none;
}
.quote-editable-locked .editable-row .column-amount {
	border-right:1px solid #ddd;
}
.quote-editable-locked .column-drag-handle {
	display:none !important;
}
.quote-editable-locked .row-headers .column-description {
	padding-left:0.7em;
	width:64%;
}
.quote-editable-locked .totals-wrapper {
	padding-right:0;
}
.quote-editable-locked .quote-summary {
	width:100%;
}



.quote-tabs-wrapper {
	float:left;
	background:#006aa7;
	padding:0.8em 0.8em 0 0.8em;
	border-radius:8px 8px 0 0;
}
.quote-tabs-wrapper:last-child {
	float:right;
	background:#db357a;
}

.quote-tabs {
	height:3em;
}
.quote-tabs li {
	float:left;
	margin-right:0.5em;
}
.quote-tabs li:last-child {
	margin-right:0;
}
.quote-tabs a.tab {
	display:block;
	min-width:4.2em;
	font-size:0.9375em;
	height:3rem;
	line-height:1.4;
	padding:0.3em 1.1em 0 1.1em;
	text-decoration:none;
	text-align:center;
	color:#fff;
	background:rgba(255,255,255,0.35);
	border-radius:5px 5px 0 0;
}
.quote-tabs a:hover {
	background:rgba(255,255,255,0.4);
}
.quote-tabs a:active {
	background:rgba(255,255,255,0.45);
}
.quote-tabs li.active a.tab {
	border-top-color:#006aa7;
	color:#333;
	background:linear-gradient(to bottom, #fff, #f2f2f2);
}
.quote-tabs a.tab strong {
	font-weight:500;
}
.quote-tabs a.tab small {
	display:block;
	font-size:0.8em;
}
.quote-tabs .button-small {
	margin:0.5em 0 0 0.5em;
	background:rgba(255,255,255,0.25);
	background:linear-gradient(to bottom, rgba(255,255,255,0.4), rgba(255,255,255,0.25));
	color:#fff;
}
.quote-tabs .edit-tab {
	display:none;
	outline:0;
}
.quote-tabs-editable a {
	display:none;
}
.quote-tabs-editable .edit-tab {
	display:block;
}



.editable-row {
	display:table;
	background:#fff;
	clear:left;
	width:100%;
}
#editable-rows .ui-sortable-helper {
	opacity:0.6;
}
.row-placeholder {
	display:block;
	background:#ccc;
	width:100%;
	min-height:calc(2.2em + 1px);
}
.editable-row .column {
	display:table-cell;
	border-bottom:1px solid #ddd;
	border-left:1px solid #ddd;
	position:relative;
	line-height:1.2;
	padding:0.5em 0.6em;
}
.column-description {
	width:calc(64% - 2em);
	text-align:left;
}
.row-headers .column-description {
	padding-left:2.7em;
}
.editable-row .column-description {
	width:calc(64% - 4em);
	padding-left:0.6em;
}
.column-drag-handle {
	width:2em;
	cursor:move;
	text-align:center;
	background:#f9f9f9;
}
.column-drag-handle:after {
	font-family:fa-solid;
	font-size:0.8em;
	content:'\f58e';
	color:#aaa;
}
.column-quantity {
	width:12%;
	text-align:right;
}
.column-price {
	width:12%;
	text-align:right;
}
.column-amount {
	width:12%;
	text-align:right;
}
.column-delete {
	width:2em;
}
.editable-row .column-delete {
	cursor:pointer;
	border-right:1px solid #ddd;
	text-align:center;
}
.editable-row .column-delete:after {
	font-family:fa-solid;
	font-size:0.8em;
	content:'\f00d';
	color:#aaa;
}









.row-headers {
	height:1.9em;
	font-weight:bold;
	color:#006aa7;
}
.row-headers div {
	float:left;
	border-bottom:1px solid #ddd;
	border-right:0;
	padding:0.2em 0.7em;
	height:1.9em;
}
.row-headers div span {
	font-size:0.875rem;
}
.editable-row .column-amount {
	background:#f9f9f9;
}
.package-row,
.package-row * {
	background:#ffffdd;
}
.editable-row textarea {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	padding:0.5em 0.6em;
	border:0;
	outline:0;
	text-align:inherit;
	resize:none;
	min-height:2.2em;
	line-height:1.2;
}
.column-description:after,
.quote-summary:after {
	content:attr(data-content) ' ';
	visibility:hidden;
	white-space:pre-wrap;
	display:block;
	line-height:1.2;
}



.editable-row textarea:hover {
	background:#eef;
}
.editable-row textarea:focus {
	background:#fef;
}
.totals {
	float:right;
	clear:right;
	width:36%;
}
.totals div {
	float:left;
	padding:0.2em 0.5em 0.2em 0;
}
.column-total-label {
	width:66.666%;
}
.column-total {
	width:33.333%;
	text-align:right;
}


.totals-wrapper {
	clear:left;
	padding:1em calc(2em + 1px) 0 0;
}
.totals-wrapper .totals:last-child {
	padding:0.1em 0;
	border-top:1px solid #666;
	border-bottom:2px solid #666;
	margin-top:0.5em;
	font-weight:bold;
	font-size:1rem;
}


.company-readonly input.text,
.client-contact-readonly input.text,
.platform-contact-readonly input.text {
	pointer-events:none;
}

.quote .company-readonly,
.quote .client-contact-readonly,
.quote .platform-contact-readonly {
	position:relative;
}

.quote input.company-selected,
.quote .company-remove,
.quote .company-readonly .company-selector,
.quote input.client-contact-selected,
.quote .client-contact-remove,
.quote .client-contact-readonly .client-contact-selector,
.quote input.platform-contact-selected,
.quote .platform-contact-remove,
.quote .platform-contact-readonly .platform-contact-selector {
	display:none;
}
.quote .company-readonly input.company-selected,
.quote .company-readonly .company-remove,
.quote .client-contact-readonly input.client-contact-selected,
.quote .client-contact-readonly .client-contact-remove,
.quote .platform-contact-readonly input.platform-contact-selected,
.quote .platform-contact-readonly .platform-contact-remove {
	display:block;
}
.quote .company-selector,
.quote .client-contact-selector,
.quote .platform-contact-selector {
	width:auto;
	height:auto;
}
.quote .company-selector input,
.quote .client-contact-selector input,
.quote .platform-contact-selector input {
	width:100%;
	padding:0.4em 0.6em;
	border-radius:0 5px 5px 5px;
	min-height:2.2em;
}
.quote .company-remove,
.quote .client-contact-remove,
.quote .platform-contact-remove {
	position:absolute;
	top:0.3rem; right:0.3rem;
	cursor:pointer;
	width:1.5rem;
    text-align:center;
    font-size:0.9em;
}
.quote .company-remove:before,
.quote .client-contact-remove:before,
.quote .platform-contact-remove:before {
	font-family:fa-solid;
	content:'\f00d';
}


.quote .search-suggest input {
	float:none;
	padding:0.3em 0.5em;
    border-radius:5px;
	outline:none;
	min-height:0;
}
.quote .suggestions strong {
	font-size:1em;
}
.quote .suggestions span {
	font-size:0.9375em;
}

.pinterest-funded {
	display:block;
	padding-left:0.6em;
}
.pinterest-funded:before {
	content:'\f0d2';
	color:#e4001e;
	font-family:fa-brands;
	display:inline-block;
	font-size:1.1em;
	width:1.1em;
	margin:-0.3em 0.2em -0.3em 0;
}





















/*
—————————————————
View Log
—————————————————
*/
.view-log-wrapper {
	position:relative;
}
.view-log {
	position:absolute;
	top:-13em;
	left:calc(100% - 2em);
	min-height:16em;
	background:#fff;
	padding:1.8em 0.7em;
	border-radius:10px;
	box-shadow:0 0 5em rgba(0,0,0,0.2);
	opacity:0;
	transition:opacity 150ms, margin-left 150ms;
	margin-left:-1.2em;
	pointer-events:none;
}
.view-log-active {
	opacity:1;
	margin-left:0;
	pointer-events:auto;
}
.view-log:before {
	content:'';
	width:0;
	height:0;
	border-style:solid;
	border-width:16px 16px 16px 0;
	border-color:transparent #fff transparent transparent;
	position:absolute;
	top:8em; left:-15px;
}
.view-log-results {
	display:table;
	width:100%;
	table-layout:fixed;
}
.view-log h2 {
	font-weight:600;
	border-bottom:1px solid #ddd;
	padding-bottom:0.4em;
}
.view-log .result-section {
	display:table-cell;
	border-left:1px solid #ddd;
	width:30em;
	font-size:0.9375em;
	padding:0 1.5em;
}
.view-log .result-section:first-child {
	border:0;
}
.view-log li {
	margin-bottom:0.2em;
}
.view-log a {
	line-height:1.2;
	display:block;
	padding:0.4em 0.6em;
	border-radius:5px;
	transition:background-color 150ms;
	margin-left:-0.6em;
	position:relative;
}
.view-log a.project {
	padding-left:2em;
}
.view-log a.status:before {
	position:absolute;
	top:0.55em; left:0.7em;
}
.view-log a:hover {
	background:#f2f2f2;
}
.view-log a:active {
	background:#eaeaea;
}
.view-log a strong {
	font-weight:600;
}



/*
—————————————————
View Log
—————————————————
*/
.admin-form {
	background:#f2f2f2;	
	padding:4em 3em 3em 3em;
	border-radius:8px;
	margin-bottom:1em;
}
.admin-form .form-content {
	margin:auto;
	max-width:52em;
}
.admin-form .form-section {
	margin-bottom:5em;
}
.admin-form .form-section:last-child {
	margin-bottom:0;
}
.admin-form h2 {
	display:inline-block;
	margin-bottom:1.9em;
	border-bottom:0.4em solid #ff317c;
	padding-bottom:0.2em;
}
.admin-form p,
.admin-form .field {
	margin-bottom:2.8em;
}
.admin-form label {
	display:block;
	line-height:1.2;
	margin-bottom:0.5em;
	font-weight:bold;
	font-size:0.9375em;
}
.admin-form input.text,
.admin-form textarea,
.admin-form select {
	display:block;
	width:100%;
	border-radius:5px;
	border:1px solid #fff;
	border-bottom-color:#ddd;
	padding:0.7em 0.8em;
	background:#fff;
	box-shadow:0 0.1em 0.2em rgba(0,0,0,0.04);
	transition:border-color 100ms;
	line-height:1.3;
}
.admin-form select {
	padding:0.6em 0.8em;
}
.admin-form .textarea-wrapper {
	display:block;
	position:relative;
	min-height:2.75em;
}
.admin-form .textarea-wrapper textarea {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
}
.admin-form textarea {
	resize:vertical;
}
.admin-form .conditional-field {
	display:none;
}
.admin-form .textarea-wrapper:after {
	content:attr(data-content) ' ';
	visibility:hidden;
	white-space:pre-wrap;
	display:block;
	padding:0.7em 0.8em;
	border:1px solid #fff;
	line-height:1.3;
}
.admin-form input.text:focus,
.admin-form textarea:focus,
.admin-form select:focus {
	outline:0;
	border-color:#6cbbe8;
}
.admin-form .checkboxes span label {
	display:inline-block;
	position:relative;
	top:-0.1em;
	user-select:none;
	padding:0 0 0 0.5em;
	font-weight:normal;
}
.admin-form .checkboxes span {
	display:block;
	margin-top:1em;
}
.admin-form .date-selectors {
	display:block;
	margin-top:0.5em;
}
.admin-form .date-selectors span {
	display:inline-block;
	width:7em;
	margin-bottom:1em;
}
.admin-form .date-selectors input.text {
	display:inline-block;
	width:auto;
}



.asset-selector {
	font-size:0.9375em;
}
.asset-selector p {
	margin-bottom:0.5em !important;
	position:relative;
}
.asset-selector .col1 {
	float:left;
	width:40%;
	margin-right:0.5em;
}
.asset-selector .col2 {
	float:left;
	width:40%;
	margin-right:0.5em;
}
.asset-selector .col3 {
	float:right;
	width:calc(20% - 1em);
}
.asset-selector select {
	display:block;
	width:100%;
}
.asset-selector .remove-row {
	width:1.5em;
	text-align:center;
	font-family:fa-light;
	position:absolute;
	font-size:1.4em;
	top:0.2em; right:-1.9em;
	color:#bbb;
	cursor:pointer;
}
.asset-selector .remove-row:hover {
	color:#999;
}
.asset-selector .remove-row:after {
	content:'\f00d';
	font-family:fa-light;
}
.asset-selector p:nth-child(2) .remove-row {
	display:none;
}
.social-icon {
	position:relative;
}
.social-icon:before {
	width:1.5em;
	text-align:center;
	font-family:fa-brands;
	position:absolute;
	font-size:1.4em;
	top:0.2em; left:-1.9em;
}
li.social-icon {
	margin-bottom:1em;
	border-bottom:1px solid #ccc;
	padding-bottom:0.3em;
	max-width:20em;
}
li.social-icon:before {
	position:static;
	display:inline-block;
	font-size:1.2em;
	margin-right:0.3em;
}
.social-icon-pinterest:before {
	content:'\f0d2';
	color:#e4001e;
}
.social-icon-facebook:before {
	content:'\f09a';
	color:#1773ea;
}
.social-icon-linkedin:before {
	content:'\f0e1';
	color:#2867B2;
}
.social-icon-snapchat:before {
	content:'\f2ac';
	color:#FFFC00;
}
.social-icon-tiktok:before {
	content:'\e07b';
	color:#000;
}
.social-icon-instagram:before {
	content:'\f16d';
	color:#e91e61;
}
.social-icon-youtube:before {
	content:'\f167';
	color:#f00;
}


/*
—————————————————
Notes
—————————————————
*/
.notes-wrapper {
	max-width:52rem;
	margin:auto;
	padding:0 1em 0.5em 1em;
	font-size:0.9375em;
}
.notes-wrapper h2 {
	margin-bottom:1.2em;
}
.notes-wrapper h3 {
	padding-top:0 !important;
	margin-top:0;
	margin-bottom:0.7em;
}
.note {
	background:#fff;
	padding:1.6em;
	border-radius:6px;
	border-bottom:3px solid #ddd;
	margin-bottom:1.2em;
}
.note:last-child {
	margin-bottom:0;
}
.note .stamp {
	display:inline-block;
	font-size:0.875em;
	color:#006aa7;
	margin-top:1em;
	background:#e1effa;
	height:2em;
	line-height:2em;
	border-radius:1em;
	padding:0 1em;
}
.note .button {
	float:right;
	margin-top:1em;
	font-size:0.875em;
}
.note p,
.note ul {
	margin-bottom:0.75em !important;
}
.note p:last-child,
.note ul:last-child {
	margin-bottom:0 !important;
}


/*
—————————————————
Quote List
—————————————————
*/

.quote-list {
	background:#f2f2f2;
	padding:1.6em 1.6em 0.1em 1.6em;
	border-radius:8px 8px 0 0;
}

.quote-list a {
	float:left;
	width:15em;
	height:7.2em;
	background:#fff;
	border-radius:6px;
	margin-right:1.6rem;
	text-align:center;
	font-size:0.875em;
	padding:0.4em;
	box-shadow:0 5px 10px #eaeaea;
	position:relative;
}
.quote-list a:after {
	font-family:fa-light;
	content:'\f105';
	position:absolute;
	top:calc(50% - 0.5em); left:100%;
	width:1.6rem;
	font-size:2.4rem;
	line-height:1;
	color:#ddd;
	xcolor:#fff;
	xtext-shadow:0 5px 10px #eaeaea;
}
.quote-list a.invoice:after {
	content:'';
}
.quote-list .heading {
	display:block;
}
.quote-list .job-number {
	display:block;
	font-size:0.8125rem;
}
.quote-list .status-bar {
	position:absolute;
	bottom:0; left:0;
	border-radius:0 0 6px 6px;
	padding:0.15em;
	width:100%;
	font-weight:500;
}
.quote-list .accepted {
	color:#fff;
	background:#61c391;
}
.quote-list .sent {
	color:#fff;
	background:#006aa7;
}

.quote-list .status-bar:before {
	font-family:fa-solid;
	content:'\f00c';
	margin-right:0.3em;
	font-weight:normal;
}
.quote-list .sent:before {
	content:'\f017';
}



.invoice-link:before {
	font-family:fa-solid;
	content:'\f15b';
	margin-right:0.4em;
	color:#13b5ea;
	font-size:1.25em;
	line-height:1;
}
.invoice-link:hover {
	color:#13b5ea;
}
.invoice-link:after {
	font-family:fa-solid;
	content:'\f35d';
	color:#ccc;
	font-size:0.7em;
	margin-left:0.6em;
	position:relative;
	top:-0.05em;
}






#pin-sorting {
	width:100%;
	max-width:1400px;
	margin:auto;
	margin-top:1.5em;
}
#pin-sorting li {
	float:left;
	width:20%;
	height:32em;
	padding:2em 1em;
	box-sizing:border-box;
	text-align:center;
	cursor:move;
}
#pin-sorting li.ui-sortable-placeholder {
	visibility:visible !important;
	background:#f8f8f8;
	border-radius:16px;
}
#pin-sorting img {
	display:block;
	width:100%;
	border-radius:16px;
	margin-bottom:0.7em;
}
#pin-sorting h3 {
	font-weight:bold;
	font-size:1em;
	margin:0;
}
#pin-sorting span {
	font-size:0.875em;
}




#sorting {
	margin-bottom:1.5em;
}
#sorting li {
	background:#eee;
	height:2.7em;
	padding:0.6em 1em;
	margin-bottom:0.6em;
	border-radius:0.3em;
	cursor:move;
}
#gallery li {
	float:left;
	margin:0 1em 1em 0;
}


/*
—————————————————
Text-only Sorting
—————————————————
*/
.sort-icon {
	display:inline-block;
	width:1.2em;
	text-align:center;
	cursor:pointer;
	color:#ff317c;
}
.sort-icon:after {
	font-family:'fa-solid';
	content:'\f0dc';
}
.sortable {
	margin-bottom:1em;
}
.sortable li {
	height:3em;
	user-select:none;
}
.sortable div {
	float:left;
	width:100%;
	height:2.4em;
	line-height:2.4em;
	background:#fff;
	border-radius:5px;
	padding:0 0.9em;
	cursor:move;
	overflow:hidden;
	box-shadow:0 0.1em 0.2em rgb(0 0 0 / 4%);
	white-space:nowrap;
	text-overflow:ellipsis;
}
.sortable div:hover {
	background:#ffd;
}


/*
—————————————————
Dashboard
—————————————————
*/
.prep {
	float:left;
	width:42em;
}
.prep table {
	width:100%;
}
.prep table.prep-more {
	display:none;
}
.prep .button-more {
	display:inline-block;
	font-size:0.8em;
	margin-top:1em;
}
.prep .view-less {
	display:none;
}
.prep .button-more-expanded .view-less {
	display:inline;
}
.prep .button-more-expanded .view-more {
	display:none;
}
.prep th {
	border-bottom:0.05em solid #e2e2e2;
	font-size:0.875rem;
	font-weight:bold;
	padding:0.4rem 0.7rem;
	text-align:center;
}
.prep td {
	font-size:0.875em;
	padding:0.4rem 0.7rem;
	border-bottom:0.05em solid #e2e2e2;
	text-align:center;
}
.prep td:first-child {
	padding-left:0;
	text-align:left;
}
.prep h4 {
	line-height:1.3;
}
.prep h4 span {
	color:#999;
	font-size:0.875rem;
}
.prep .dot {
	display:block;
	margin:auto;
	width:12px;
	height:12px;
	background:#f2f2f2;
	border-radius:50%;
}
.prep .dot-preparation {
	background:#74d5e4;
}
.prep .dot-reviewing {
	background:#0f81c2;
}
.prep .tick-completed:before {
	content:'\f00c';
	font-family:fa-solid;
	color:#61c391;
}
.unallocated-bar {
	display:block;
	margin:1em 0;
}
.activity {
	float:right;
	width:calc(100% - 44em);
	border-left:1px solid #ddd;
	padding:0 2em 0 2.5em;
	overflow-y:scroll;
	max-height:35em;
}
.activity h5 {
	display:inline-block;
	border:1px solid #ccc;
	line-height:1.5em;
	border-radius:0.75em;
	padding:0 0.6em;
	font-size:0.9375rem;
	margin:0 0 0.8em 2.8rem;
}
.activity ul {
	margin-bottom:1.7em;
}
.activity li {
	position:relative;
	padding-left:2.8rem;
	font-size:0.8125rem;
	margin-bottom:0.5em;
}
.activity .time {
	position:absolute;
	top:calc(50% - 0.6em); left:0;
	color:#bbb;
	font-size:0.875em;
	line-height:1;
}
.activity span.title {
	display:block;
}
.activity-text {
	display:block;
	padding:0.7em 1.2em 0.7em 3.2em;
	border-radius:0.5em;
	position:relative;
}
.activity-text:before {
	content:'\f075';
	font-family:fa-solid;
	position:absolute;
	top:calc(50% - 1em); left:0.7em;
	line-height:2;
	width:2em;
	text-align:center;
	border-radius:1em;
	font-size:0.9em;
}

.activity li.feedback .activity-text {
	color:#4db881;
	background:#61c3910e;
}
.activity li.comments .activity-text {
	color:#ff317c;
    background:#ff317c0e;
}
.activity li.status-change .activity-text {
    color:#0f81c2;
    background:#0f81c20e;
}

.activity li.feedback .activity-text:before {
	content:'\f004';
	background:#61c3911c;
}
.activity li.comments .activity-text:before {
	content:'\f075';
    background:#ff317c1c;
}
.activity li.status-change .activity-text:before {
	content:'\f00c';
    background:#0f81c21c;
}

.activity li.feedback a:hover .activity-text {
	background:#61c39114;
}
.activity li.comments a:hover .activity-text {
    background:#ff317c14;
}
.activity li.status-change a:hover .activity-text {
    background:#0f81c214;
}

.activity-text .rating {
	display:inline-block;
}
.board-tabs {
	height:2.2em;
}
.board-tabs li {
	float:left;
	margin-right:0.5em;
	padding:0 1.5em;
	background:#ddd;
	border-radius:5px 5px 0 0;
	line-height:2.2em;
	font-weight:500;
	cursor:pointer;
	user-select:none;
}
.board-tabs li:hover {
	background:#d7d7d7;
}
.board-tabs li:active {
	background:#d2d2d2;
}
.board-tabs li.active {
	background:#f2f2f2;
}

/*
—————————————————
Kanban
—————————————————
*/
.kanban {
	width:calc(100% + 1.2em);
	margin-right:-1.2em;
	max-width:1300px;
	background:#f2f2f2 !important;
	padding:2.5em;
	border-radius:0 8px 8px 8px;
}
.kanban-watching {
	display:none;
}
.kanban h3 {
	font-size:1rem;
	border-bottom:1px solid #d2d2d2;
	padding-bottom:0.3em;
	margin-bottom:1em;
}
.kanban h3:before {
	xcontent:'';
	display:inline-block;
	width:12px;
	height:12px;
	border-radius:6px;
	margin:0 7px 0 0;
	background:#bbb;
}
.kanban h3.status1:before {
	background:#bbb !important;
}
.kanban h3.status2:before {
	background:#61c391 !important;
}
.kanban h3.status3:before {
	background:#ff317c !important;
}
.kanban h3.status4:before {
	background:#8560ab !important;
}
.kanban .column {
	float:left;
	width:calc(25% - 1.2em);
	margin-right:1.2em;
}
.kanban .column ul.tiles {
	min-height:50em;
}
.kanban .column li.tile {
	margin-bottom:0.6rem;
	position:relative;
	background:#fff;
	border-radius:5px;
}
.kanban .column a.tile {
	display:block;
	background:#fff;
	padding:1em;
	height:9.8em;
	border-radius:5px;
	position:relative;
	box-shadow:0 3px 5px #ececec;
	font-size:0.875em;
	user-select:none;
	border:1px solid #fff;
	transition:border-color 150ms;
}
.kanban .column a.tile:hover {
	border:1px solid #bbb;
}
.kanban .column li.unread a.tile {
	border-width:2px;
	padding:calc(1em - 1px);
}
.kanban .column .ui-sortable-helper,
.kanban .column .ui-sortable-helper a {
	cursor:move;
}
.kanban .column li.placeholder {
	font-size:0.875em;
	background:#ddd;
	width:100%;
	height:8em;
	border-radius:5px;
	margin-bottom:0.6rem;
}
.kanban .context-menu {
	position:absolute;
	top:0.3em;
	right:0.3em;
}
li.unread .context-menu-active .context-menu-dots,
li.unread .context-menu-dots:hover {
	background:#fff;
}
.kanban .column h4 {
	line-height:1.3;
	padding-left:calc(0.4em + 12px);
	position:relative;
}
.kanban .column h4 strong {
	display:block;
	font-size:0.9375rem;
}

.kanban .column h4:before {
	content:'';
	width:12px;
	height:12px;
	position:absolute;
	top:3px; left:0;
	background:red;
	border-radius:6px;
}

.kanban .column-status1 h4:before { background:#cacaca !important }
.kanban .column-status2 h4:before { background:#61c391 !important }
.kanban .column-status3 h4:before { background:#ff317c !important }
.kanban .column-status4 h4:before { background:#8560ab !important }

.kanban .column-status1 .comments-recent:before { color:#cacaca }
.kanban .column-status2 .comments-recent:before { color:#61c391 }
.kanban .column-status3 .comments-recent:before { color:#ff317c }
.kanban .column-status4 .comments-recent:before { color:#8560ab }


.kanban .column-status1 li.unread .context-menu-active .context-menu-dots,
.kanban .column-status1 li.unread .context-menu-dots:hover { background:#cacaca1a }

.kanban .column-status2 li.unread .context-menu-active .context-menu-dots,
.kanban .column-status2 li.unread .context-menu-dots:hover { background:#61c3911a }

.kanban .column-status3 li.unread .context-menu-active .context-menu-dots,
.kanban .column-status3 li.unread .context-menu-dots:hover { background:#ff317c1a }

.kanban .column-status4 li.unread .context-menu-active .context-menu-dots,
.kanban .column-status4 li.unread .context-menu-dots:hover { background:#8560ab1a }

.kanban .column-status1 li.unread a.tile { border-color:#cacacacc !important; background:#cacaca08 }
.kanban .column-status2 li.unread a.tile { border-color:#61c391cc !important; background:#61c39108 }
.kanban .column-status3 li.unread a.tile { border-color:#ff317ccc !important; background:#ff317c08 }
.kanban .column-status4 li.unread a.tile { border-color:#8560abcc !important; background:#8560ab08 }

.column-status1 .progress-bar span { background:#cacaca }
.column-status2 .progress-bar span { background:#61c391 }
.column-status3 .progress-bar span { background:#ff317c }
.column-status4 .progress-bar span { background:#8560ab }

.kanban .highlighter span:after {
	content:'unread';
}
.kanban li.unread .highlighter span:after {
	content:'read';
}

.kanban .column h4 span {
	display:block;
	color:#999;
	font-size:0.875rem;
}
.kanban .xstatus {
	position:absolute;
	bottom:1em; left:1em;
	xcolor:#bbb;
	display:none;
}
.kanban .round {
	position:absolute;
	bottom:0.75em; left:1em;
	font-size:0.8125rem;
}

.kanban .progress {
	position:absolute;
	bottom:0.7em; left:1em;
	width:calc(100% - 2em);
}
.kanban .progress-bar {
	height:0.4em;
	background:#eee;
	border-radius:0.2em;
}
.kanban .progress-bar span {
	display:block;
	height:100%;
	xbackground:#ff317c;
	border-radius:0.2em;
}
.kanban .progress-bar-completed span {
	xbackground:#61c391;
}

.kanban .progress-score {
	font-size:0.8125rem;
	margin-top:0.4em;
	color:#aaa;
	text-align:center;
	opacity:0;
	transition:opacity 150ms;
}
.kanban a:hover .progress-score {
	opacity:1;
}
.kanban .progress-score span {
	xdisplay:none;
}



.kanban .comments {
	position:absolute;
	bottom:0.75em; right:1em;
	font-size:0.8125rem;
}
.kanban .comments:before {
	font-family:fa-light;
	content:'\f075';
	margin-right:0.3em;
}
.kanban .comments-recent:before {
	font-family:fa-solid;
}
.kanban .indicators {
	display:none;
	position:absolute;
	bottom:0.75em; left:3em;
	transition:transform 150ms;
	z-index:2;
	background:#fff;
	padding:0.3em 0.3em 0.1em 0.3em;
	min-height:1.6em;
	border-radius:0.8em;
	transform-origin:top left;
}
.kanban .indicators .dot {
	float:left;
	width:1em;
	height:1em;
	border-radius:50%;
	background:#e7e7e7;
	margin:0 0.2em 0.2em 0;
	position:relative;
}
.kanban .indicators .dot:last-child {
	margin-right:0;
}
.kanban .indicators span.approved {
	background:#61c391;
}

.kanban .indicators .dot span {
	opacity:0;
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	text-align:center;
	font-size:0.5em;
	line-height:2;
}


.kanban .indicators:hover {
	transform:scale(2);
	box-shadow:0 3px 5px rgba(0,0,0,0.1);
}
.kanban .indicators:hover .dot span {
	opacity:1;
}











.packery {
	max-width:calc(100% + 24px);
	margin-right:-24px;
}
.packery:after {
	content:'';
	display:block;
	clear:both;
}
.packery-item:after {
	content:'';
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.2);
	opacity:0;
	transition:opacity 150ms;
	border-radius:6px;
}
.packery-item .context-menu {
	position:absolute;
	top:0.4em; right:0.4em;
	z-index:2;
	opacity:0;
	transition:all 150ms;
}
.packery .context-menu-dots {
	background-color:rgba(255,255,255,0.6);
}
.packery .zoom {
	width:2.25em;
	height:2.25em;
	line-height:2.25em;
	position: absolute;
	top:0.4em; right:3em;
	border-radius:50%;
	background-color:rgba(255,255,255,0.6);
	text-align:center;
	outline:0;
	z-index:2;
	transition:all 150ms;
	opacity:0;
}
.packery .zoom:after {
	content:'\f002';
	font-family:fa-solid;
}

.packery-item img,
.packery-item video {
	display:block;
	width:100%;
	border-radius:6px;
}
.packery-item p.filename {
	opacity:0;
	color:#fff;
	background:#48484d;
	background:rgba(0,0,0,0.7);
	padding:0.8em;
	box-sizing:border-box;
	text-align:center;
	font-size:0.9em;
	position:absolute;
	bottom:2em; left:0;
	width:100%;
	margin:0;
	transition:bottom 150ms, opacity 150ms;
	z-index:1;
	word-wrap:break-word;
}
.packery-item:hover p.filename {
	opacity:1;
	bottom:3em;
}
.packery-item:hover:after {
	opacity:1;
}



.width1 { width:calc(25% - 24px) }
.width2 { width:calc(50% - 24px) }
.width3 { width:calc(75% - 24px) }
.width4 { width:calc(100% - 24px) }




.packery-item:hover {
	border-color:hsla(0, 0%, 100%, 0.5);
	cursor:move;
}


.packery-item:hover .context-menu,
.packery-item:hover .zoom {
	opacity:1;
}

.packery-item:hover .context-menu-dots:hover,
.packery-item:hover .zoom:hover {
	background-color:rgba(255,255,255,0.8);
}

.packery-item.ui-draggable-dragging,
.packery-item.is-positioning-post-drag {
	background:#c90;
	z-index:2;
}

.packery-drop-placeholder {
	outline:3px dashed hsla(0, 0%, 0%, 0.5);
	outline-offset:-6px;
	transition:transform 0.2s;
	border-radius:6px;
}


/* jQuery UI Draggable adds ui-draggable-dragging */
.packery-item.ui-draggable-dragging,
/* Packery adds class while transitioning to drop position */
.packery-item.is-positioning-post-drag {
	background:#ea0;
	z-index:2; /* keep dragged item on top */
	border-radius:6px;
}




.packery .colspan-selector {
	display:block;
	cursor:default;
}
.packery .colspan-selector span {
	float:left;
	width:21%;
	cursor:pointer;
	padding:0.2em 1em;
	text-align:center;
	border-radius:0.5em;
	margin:0 2%;
	transition:all 150ms;
}
.packery .colspan-selector span:hover {
	background:#f2f2f2;
}
.packery .colspan-selector span.active {
	color:#fff;
	background:#00649d;
}