/* Reset */
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{font-size:100%;}legend{color:#000;}del,ins{text-decoration:none;}

/* Icons */
@font-face {
	font-family:'fa-solid';
	/*src:url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/webfonts/fa-solid-900.woff2') format('woff2');*/
	src:url('/CSS/Fonts/fa-solid-900.woff2?update=1') format('woff2');
	font-weight:normal;
	font-style:normal;
}
@font-face {
	font-family:'fa-brands';
	src:url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/webfonts/fa-brands-400.woff2') format('woff2');
	font-weight:normal;
	font-style:normal;
}
@font-face {
	font-family:'fa-light';
	src:url('Fonts/fa-light-300.woff2') format('woff2');
	font-weight:normal;
	font-style:normal;
}




:root {

  --marge:#006ba5;
  --leela:#675a95;
  --barbie:#e63478;

  --elsa:#8fcbe1;
  --ursula:#7e84ad;
  --peppa:#f79cbf;

  --maleficent:#8cc696;
  --belle:#f0e0a4;
  --patrick:#e5b0a7;

  --leelaRGB:103,90,149;
  --ursulaRGB:126,132,173;

}

/*
—————————————————
Global
193-196-203
—————————————————
*/
html {
	color:#333;
	font:15px/1.4 cera-pro, 'Libre Franklin', sans-serif;
}
* {
	box-sizing:border-box;
}
p {
	margin-bottom:1em;
}
p.center {
	text-align:center;
}
strong {
	font-weight:bold;
	font-style:inherit;
}
h1 {
	font-size:1.8em;
	font-weight:500;
	line-height:1.1;
	margin-bottom:1.3em;
}
h1 small, span.job-number, a.job-number, .watch {
	display:inline-block;
	font-size:0.866rem;
	font-weight:normal;
	line-height:1.1;
	color:#888;
	background:#f2f2f3;
	border-radius:5px;
	padding:0.3em 0.5em;
	position:relative;
	margin-left:0.6em;
	letter-spacing:0;
}
a.job-number:hover {
	color:#808080;
	background:#ececed;
}
a.job-number:active {
	color:#777;
	background:#e7e7e8;
}
h1 + p.subheading {
	margin-top:-2.1em;
	margin-bottom:2.1em;
	color:#aaa;
}
.subheading a:hover {
	text-decoration:underline;
}
h1:last-child,
p:last-child {
	margin-bottom:0;
}
h2 {
	font-size:1.4em;
	font-weight:500;
	line-height:1.2;
	display:inline-block;
	margin-bottom:1em;
	xborder-bottom:0.17em solid var(--barbie);
	xpadding-bottom:0.1em;
}
h2.center {
	display:block;
	text-align:center;
	border:0;	
	padding:0;
}
h2.table-section {
	margin-bottom:0.2em;
	padding:0.2em 0.55em;
	border-radius:0.4em;
	color:#4987c3;
	background:#ecf2f9;
	border:0;
}
h1 .button,
h2 .button {
	font-weight:500;
	font-size:1rem;
	margin-left:1.2em;
	letter-spacing:0;
	vertical-align:top;
}
h1 .button + .button,
h2 .button + .button {
	margin-left:0.3em;
}
h3 {
	font-size:1.2em;
	margin-bottom:1em;
	font-weight:500;
}
h3 small {
	font-size:0.9rem;
	font-weight:normal;
	margin-left:0.2em;
}
.fancybox-content {
	border-radius:8px !important;
	overflow:hidden !important;
}

.content-wrapper {
	max-width:68em;
	margin:auto;
}
a {
	color:inherit;
	text-decoration:none;
}
.not-added {
	color:#c1c4cb;
}
select.grouped optgroup {
	color:var(--barbie);
}
select.grouped optgroup option {
	font-weight:normal;
	color:initial;
}


/*
—————————————————
Designer View
—————————————————
*/
.designer-hidden {
	display:none !important;
}
.designer-view .hs-link,
.designer-view .button-menu,
.designer-view .quote .button,
.designer-view .approved-message .button {
	display:none;
}
.designer-view .quote,
.designer-view .button-status,
.designer-view .button-status-grid {
	pointer-events:none;
}
.designer-view .quote .brand-remove:before,
.designer-view .quote .company-remove:before,
.designer-view .quote .client-contact-remove:before,
.designer-view .quote .platform-contact-remove:before {
	display:none;
}




/*
—————————————————
Global
—————————————————
*/
#welcome {
	font-size:1.2em;
	font-weight:500;
	color:#ffffffcc;
	text-align:center;
	padding:0 1.5em;
	height:4em;
	margin:0;
}
#welcome span {
	white-space:nowrap;
}
#content {
	margin-left:16em;
	padding:6em;
}
#sidebar {
	position:fixed;
	top:0; left:0;
	width:13em;
	height:100vh;
	background:#29292f url(/Images/logo-ols-2023.png) center 1.5em no-repeat;
    background-size:3em 4em;
	padding-top:7em;
	z-index:4;
}

#main-menu {
	height:8em;
}
#main-menu li a {
	display:block;
	padding:0.4em 2em;
	text-decoration:none;
	color:#ffffffcc;
	line-height:1.4;
}
#main-menu li.active a {
	color:#fff;
	background-color:#ffffff11;
}
#main-menu li a:hover {
	background-color:#ffffff07;
}
#main-menu li a:before {
	float:left;
	content:'\f015';
	font-family:fa-light;
	font-size:1.1em;
	line-height:1.4rem;
	color:#fff;
	opacity:0.3;
	width:1.2em;
	text-align:center;
	margin-right:0.8em;
	vertical-align:middle;
}
#main-menu li.active a:before {
	color:var(--barbie);
	opacity:1;
}
#main-menu li a.dashboard:before {
	content:'\f625';
}
#main-menu li a.feed:before {
	content:'\f5f8';
}
#main-menu li a.reporting:before {
	content:'\f201';
}
#main-menu li a.new:before {
	content:'\f055';
}
#main-menu li a.users:before {
	content:'\f007';
}
#main-menu li a.clients:before {
	content:'\f0c0';
}
#main-menu li a.money:before {
	content:'\f571';
}
#main-menu li a.building:before {
	content:'\f1ad';
}
#main-menu li a.clipboard:before {
	content:'\f328';
}
#main-menu li a.tag:before {
	content:'\f02b';
}
#main-menu li a.settings:before {
	content:'\f013';
}
#main-menu li a.portfolio:before {
	content:'\f009';
}
#main-menu li a.clock:before {
	content:'\f017';
}
#main-menu li a.calendar:before {
	content:'\f133';
}
#main-menu li a.cart:before {
	content:'\f07a';
}
#main-menu li a.pin:before {
	content:'\f08d';
}
#main-menu li a.projects:before {
	content:'\f07b';
}
#main-menu li a.mail:before {
	content:'\f01c';
}
#main-menu li a.coffee:before {
	content:'\f7b6';
}
#main-menu li a.gauge:before {
	content:'\f626';
}
#main-menu li a.pointer:before {
	content:'\f245';
}
#main-menu li a.bug:before {
	content:'\f188';
}
#main-menu li a.completed:before {
	content:'\f467';
}
#main-menu li a.search:before {
	content:'\f002';
}
#main-menu li a.assets:before {
	content:'\f03e';
}
#main-menu li a.data:before {
	content:'\f1ec';
}



#main-menu li.spaced {
	margin-bottom:4em;
}



#main-menu li .count {
	color:var(--barbie);
	
}

#sidebar h4  {
	
}
#project-list {
	padding-top:1.8em;
	border-top:1px solid #ffffff33;
	height:calc(100vh - 26.5em);
	overflow-y:auto;
}
#project-list a {
	display:block;
	padding:0.6em 2em 0.6em 3.2em;
	text-decoration:none;
	color:#ffffffaa;
	line-height:1.3;
	position:relative;
}
#project-list li.active a {
	color:#fff;
	background-color:#ffffff11;
}
#project-list a:hover {
	background-color:#ffffff07;
}
#project-list .status {
	position:absolute;
	top:1.9em; left:2em;
	width:0.7em;
	height:0.7em;
	border-radius:50%;
}
#project-list .status .tooltip {
	display:none;
	position:absolute;
	bottom:calc(100% + 0.5em); left:-1.6em;
	max-width:20em;
	color:#333;
	background:linear-gradient(to bottom, #fff, #ddd);
	box-shadow:0 0 1.2em rgba(0,0,0,0.15);
	border-radius:6px;
	padding:0.6em 0.8em;
	font-size:0.875em;
	pointer-events:none;
	opacity:1;
	transition:200ms;
	white-space:nowrap;
}
#project-list .tooltip:after {
	content:'';
	width:0;
	height:0;
	border-style:solid;
	border-width:0.5em 0.5em 0 0.5em;
	border-color:#ddd transparent;
	position:absolute;
	top:100%; left:1.5em;
}
#project-list .status:hover .tooltip {
	display:block;
}
#project-list .status:before {
	content:none;
}
#project-list strong {
	display:block;
	font-weight:500;
}
#project-list span.name {
	display:block;
	font-size:0.8666em;
}

#project-list .status1 { background:#74d5e4 }
#project-list .status2 { background:#0f81c2 }
#project-list .status3 { background:var(--maleficent) }
#project-list .status4 { background:#8560ab }

#profile {
	background:#e1e2e4;
	color:#fff;
	background:#3b3b40;
	padding:0.8em;
	border-radius:0.7em;
	position:absolute;
	bottom:1.1em; left:1.1em;
	width:calc(100% - 2.2em);
	user-select:none;
	cursor:pointer;
}
#profile:hover {
	background:#ffffff1d;
}
#profile .avatar {
	font-size:0.8em;
}
#profile .text {
	float:right;
	width:calc(100% - 3em);
	display:flex;
	flex-direction:column;
	justify-content:center;
	min-height:1.5em;
}
#profile strong {
	display:block;
	line-height:1.2;
	xmargin-bottom:0.1em;
	font-size:0.9em;
}
#profile strong span {
	white-space:nowrap;
}
#profile span.company {
	color:#aaa;
	font-size:0.9em;
}



/*
—————————————————
Top Bar
—————————————————
*/
#topbar {
	position:absolute;
	top:0; left:13em;
	width:calc(100% - 13em);
	height:7em;
	background:#fff;
	box-shadow:0 0 0.4em rgba(0 0 0 / 15%);
	z-index:2;
}
#topbar-heading {
	display:flex;
	flex-direction:column;
	justify-content:center;
	height:100%;
	padding-left:3em;
}
#topbar h1 {
	margin:0;
}
#topbar h1.project-heading {
	font-weight:normal;
	max-width:calc(100% - 21rem);
	text-overflow:ellipsis;
	overflow:hidden;
	height:1.1em;
	white-space:nowrap;
}
#topbar h1.has-brand-menu strong {
	display:inline-block;
	cursor:pointer;
	user-select:none;
}
.brand-project-menu,
.brand-project-menu .parent ul {
    position:absolute;
    z-index:2;
    top:4em; right:auto;
    min-width:16em;
    border:1px solid #e2e2e2;
    box-shadow:0 0.1em 0.3em rgba(0, 0, 0, 0.2);
    background:#fff;
    border-radius:0.5em;
    padding:0.5em 0;
    user-select:none;
	display:none;
}
.brand-menu-active .brand-project-menu {
	display:block;
}
.brand-project-menu h3 {
	font-size:1.05em;
	padding:0.1em 0 0.2em 1rem;
	margin:0;
}
.brand-project-menu ul + h3 {
	border-top:1px solid #ddd;
	padding-top:0.5em;
	margin-top:0.7em;
}
.brand-project-menu li {
	position:relative;
}
.brand-project-menu a {
	display:block;
	padding:0.2em 2em 0.2em 1em;
	white-space:nowrap;
}
.brand-project-menu a:hover {
	background:rgba(193 196 210 / 17%);
}
.brand-project-menu a:active {
	background:rgba(193 196 210 / 23%);
}
.brand-project-menu span.status {
	margin-right:0.3em !important;
	font-size:0.9em;
}
.brand-project-menu span.id {
	font-size:0.8em;
	color:#bbb;
	font-weight:500;
}
.brand-project-menu .parent a:after {
	content:'\f105';
	font-family:fa-light;
	width:2em;
	text-align:center;
	position:absolute;
	top:0.2em; right:0;
}
.brand-project-menu .parent ul {
	top:-0.4em;
    left:calc(100% - 0.2em);
	right:auto;
	min-width:12em;
}
.brand-project-menu .parent:hover ul {
	display:block;
}
.brand-project-menu .parent ul a:after {
	display:none;
}



#topbar p {
	font-size:1rem;
	margin:0.5em 0 0 0;
}
#topbar .status {
	margin-right:0.7em;
}
.logo-wrapper {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	height:100%;
	float:left;
	width:15.5em;
	background:rgba(193 196 203 / 12%);
}
.logo-wrapper img {
	display:block;
	max-width:9em;
	max-height:3.8em;
	mix-blend-mode:multiply;
}





#topbar.client-view h1,
#topbar.client-view .logo-wrapper {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	height:100%;
}
#topbar.client-view h1 {
	padding-right:20px;
}
#topbar.client-view .logo-wrapper {
	float:left;
	width:15.5em;
	background:rgba(193 196 203 / 12%);
}
#topbar.client-view .logo-wrapper img {
	display:inline-block;
	max-width:9em;
	max-height:3.8em;
	mix-blend-mode:multiply;
}












.watch {
	color:var(--marge);
	background:#e1effa;
	cursor:pointer;
	text-transform:uppercase;
}
.watching {
	color:var(--barbie);
	background:#ffe8f1;
}
.watch:after {
	content:'Watch';
}
.watching:before {
	content:'\f06e';
	font-family:fa-solid;
	margin-right:0.3em;
}
.watching:after {
	content:'Watching';
}



#content {
	margin-left:13em;
	padding:2.5em 3em;
}
#secondary-sidebar + #content {
	margin-left:28.5em;
}
.archived-message {
	background:var(--elsa);
	width:100%;
	height:2em;
	position:absolute;
	top:0; left:0;
	color:#fff;
	font-weight:500;
	line-height:2em;
	padding:0 3em;
}
.archived-message + .tabs {
	margin-top:-2em;
}

/*
—————————————————
Secondary Sidebar
—————————————————
*/
#secondary-sidebar {
	position:fixed;
	top:0; left:13em;
	width:15.5em;
	height:100vh;
	padding:3em 2em 2em 2em;
	background:rgba(193 196 203 / 34%);
	z-index:2;
	overflow-y:auto;
	scrollbar-width:thin;
}
#secondary-sidebar.has-topbar {
	top:7em;
	height:calc(100vh - 7em);
	padding-top:2em;
}
#content.has-topbar {
	position:fixed;
	top:7em; left:28.5em;
	width:calc(100% - 28.5em);
	height:calc(100vh - 7em);
	margin-left:0 !important;
	overflow-y:scroll;
}
#content.archived {
	padding-top:4.5em;
}	
#secondary-sidebar h2 {
	display:block;
	text-align:center;
	font-size:1.7em;
	border:0;
	font-weight:normal;
	text-align:center;
	margin-bottom:1.3em;
	line-height:1.1;

	text-transform:uppercase;
	color:#444;
	font-size:1.1em;
	font-weight:500;
	letter-spacing:0.05em;
	padding-top:0.3em;
	margin-bottom:2.4em;
}

#secondary-sidebar h2 span {
	display:inline-block;
	position:relative;
}
#secondary-sidebar h2 span:after {
	content:'';
	position:absolute;
	width:calc(100% - 1.4em);
	height:0.05em;
	bottom:-0.4em; left:0.7em;
	background:var(--barbie);
	opacity:0.7;
}
#secondary-sidebar.switches label {
	display:block;
	text-align:center;
}


#content.tinted {
	background:rgba(193 196 203 / 17%);
}
#secondary-nav {
	margin-bottom:2em;
}
#secondary-nav li {
	margin-bottom:0.3em;
}
#secondary-nav a {
	display:block;
	border-radius:0.4em;
	padding:0.3em 1em;
	text-decoration:none;
	color:#555;
	font-weight:500;
	position:relative;
	transition:background-color 100ms;
}
#secondary-nav a span {
	font-size:0.9em;
	font-weight:normal;
	position:absolute;
	top:0.35rem; right:1rem;
	line-height:1.4rem;
}
#secondary-nav a span.status {
	font-size:0.7rem;
	right:auto; left:1rem;
	top:1.35em;
}
#secondary-nav .nav-boards a {
	padding-left:2.2em;
}
#secondary-nav a span.status:before {
	margin-right:0;
}
#secondary-nav a:hover,
#secondary-nav a.active {
	background:rgba(193 196 203 / 50%);
}
#secondary-nav a:active {
	background:rgb(193 196 203 / 70%);
}
#secondary-nav li.active a {
	background:var(--barbie);
	color:#fff;
}
#secondary-nav li.active a.parent {
	border-radius:0.4em 0.4em 0 0;
}
#secondary-nav li ul {
	background:#fff;
	padding:0.6em 0;
	border-radius:0 0 0.4em 0.4em;
	display:none;
}
#secondary-nav li.active ul {
	display:block;
}
#secondary-nav li ul li {
	margin-bottom:0;
}
#secondary-nav li ul a {
	font-size:0.9em;
	font-weight:normal;
	color:#333 !important;
	background:none !important;
	padding:0.3em 1rem;
	border-radius:0;
}
#secondary-nav li ul a span {
	top:0.25rem;
}
#secondary-nav li ul a:hover {
	background:rgb(193 196 203 / 18%) !important;
}
#secondary-nav li ul a:active {
	background:rgb(193 196 203 / 30%) !important;
}
#secondary-nav li ul li.active a {
	color:var(--barbie) !important;
}
.hs-link {
	position:absolute;
	text-align:center;
	width:100%;
	bottom:2.5em; left:0;
	font-size:0.9333em;
	color:#777;
}
.hs-link:before {
	font-family:fa-brands;
	content:'\f3b2';
	display:inline-block;
	width:1.2em;
	font-size:1.2rem;
	color:#ef6b40;
	margin-right:0.4em;
}
.app-links {
	text-align:center;
	margin:-1em 0 2em 0;
}
.board-columns .app-links {
	margin:0;
}
.app-links a {
	display:inline-block;
	vertical-align:top;
	font-size:1.2rem;
	width:1.2em;
	height:1.2em;
	margin:0 0.2em;
}
.app-links a.hs:before {
	content:'\f3b2';
	font-family:fa-brands;
	color:#ef6b40;
}
.app-links a.dropbox:before {
	content:'\f16b';
	font-family:fa-brands;
	color:#0061ff;
}
.app-links a.figma {
	background:url(/Images/icon-figma.png) center no-repeat;
	background-size:auto 1em;
}
.app-links a.slack {
	background:url(/Images/icon-slack.png) center no-repeat;
	background-size:1em 1em;
}
.app-links a.send:before {
	content:'\f1d8';
	font-family:fa-solid;
	color:#aaa;
}
.app-links a.history {
	line-height:1.2;
}
.app-links a.history:before {
	content:'\f1da';
	font-family:fa-light;
	font-size:0.8em;
}


/*
————————————————————
Board Assignment Log
————————————————————
*/
.assignment-log h2 {
	display:block;
	margin-bottom:1.4em;
}
.assignment-log h2 + h2 {
	color:var(--barbie);
	margin-top:-1.2em;
}
.assignment-log h3 {
	margin:1.6em 0 0.3em 0;
}
.assignment-log td strong {
	display:block;
	font-weight:500;
}
.assignment-log td strong + span  {
	color:#aaa;
	font-size:0.866em;
}
.assignment-log .grid th {
	border:0;
	background:none;
}
.assignment-log .grid td {
	background:rgba(193 196 203 / 17%);
	color:#777;
}
.assignment-log .pending-approval td {
	color:#848cc9;
	background:#edeff7;
}
.assignment-log .current-assignee td {
	color:#55b565;
	background:#f1f7f1;
}
.assignment-log .green td {
	color:#55b565 !important;
	background:#f1f7f1 !important;
}
.assignment-log .light-blue td {
	color:#58b7d9 !important;
	background:#eef6fa !important;
}
.assignment-log .blue td {
	color:var(--marge) !important;
	background:#f0f3fa !important;
}

.assignment-log .pending-approval td span,
.assignment-log .current-assignee td span {
	color:inherit;
}
.assignment-log .grid td {
	border-bottom:5px solid #fff;
}
.assignment-log .outcome {
	display:inline-block;
}
.assignment-log .outcome:after {
	width:1.5em;
	font-family:fa-light;
}
.assignment-log .outcome-pending:after {
	content:'\f017';
}
.assignment-log .outcome-approved:after {
	content:'\f00c';
}
.assignment-log .outcome-rejected:after {
	content:'\f00d';
}
.assignment-log .outcome-sentback:after {
	content:'\e2e1';
}


/*
—————————————————
Sidebar Toggle
—————————————————
*/
#toggle-sidebar {
	position:absolute;
	top:0.5em; right:0.5em;
	width:2em;
	height:2em;
	cursor:pointer;
	text-align:center;
	line-height:2em;
	color:#fff;
	opacity:0.5;
	transition:opacity 1s, color 1s;
}
#toggle-sidebar:after {
	content:'\f0c9';
	font-family:fa-light;
}
.sidebar-closed #toggle-sidebar {
	color:#333;
	opacity:1;
	right:-2.5em;
}
.sidebar-closed #sidebar {
	left:-16em;
}
.sidebar-closed #content {
	margin-left:0;
}
.sidebar-closed #topbar {
	left:0;
	width:100%;
}
.sidebar-closed #secondary-sidebar {
	left:0;
}
.sidebar-closed #content {
	left:15em;
	width:calc(100% - 15em);
}
.sidebar-closed.no-secondary-sidebar #content {
	width:100%;
}





body.animating #content {
	transition:margin-left 400ms ease-in-out;
}
body.animating #sidebar {
	transition:left 400ms ease-in-out;
}
body.animating #topbar {
	transition:left 400ms ease-in-out, width 400ms ease-in-out;
}
body.animating #secondary-sidebar {
	transition:left 400ms ease-in-out;
}
body.animating #content {
	transition:left 400ms ease-in-out, width 400ms ease-in-out;
}




/*
—————————————————
Global Search
—————————————————
*/
#search {
	width:30em;
	padding:1.6em;
	position:fixed;
	top:1.6em; left:14.6em;
	background:#fff;
	min-height:12em;
	max-height:calc(100% - 3.2em);
	overflow-y:auto;
	scrollbar-width:thin;
	z-index:10;
	border-radius:0.6em;
	box-shadow:0 0.5em 1em rgba(0,0,0,0.15);
	display:none;
}
#search.search-active {
	display:block;
}
#search-input {
	background:#f2f2f2;
	border-radius:7px;
	cmax-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 h3 {
	border-top:1px solid #ddd;
	padding:0.8rem 1.6rem 0 1.6rem;
	margin:0 -1.6rem 0.7em -1.6rem;
}
#suggestions a.view-all {
	display:inline-block;
	font-size:0.8rem;
	font-weight:normal;
	line-height:1.8em;
	padding:0 0.7em;
	margin-left:1em;
	color:#555;
	border:1px solid #d2d2d2;
	border-radius:1em;
	transition:background-color 150ms;
}
#suggestions a.view-all:hover {
	background:#f5f5f5;
}
#suggestions .suggestion-list:first-child h3 {
	border:0;
	padding-top:0;
}
.suggestion-list {
	margin-bottom:1em;
}
.suggestion-list:last-child {
	margin:0;
}
#suggestions li a strong {
	display:block;
	font-weight:500;
}
#suggestions li a span {
	display:block;
	color:#999;
	font-size:0.8rem;
	word-wrap:break-word;
}
#suggestions li a {
	display:block;
	font-size:0.9375em;
	line-height:1.2;
	padding:0.7em 0.6em;
	border-radius:5px;
	transition:background-color 150ms;
	position:relative;
	text-align:left;
	margin:0;
}
#suggestions li.selected a {
	background:#f5f5f5;
}
#suggestions li a:active {
	background:#eaeaea;
}
#suggestions li a.company,
#suggestions li a.member {
	position:relative;
	padding-left:5.4em;
	height:4em;
	padding-top:0.8em;
}
#suggestions li a.company .logo,
#suggestions li a.member .avatar-wrapper {
	position:absolute;
	top:0.5em; left:0.5em;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	width:4em;
	height:3em;
}
#suggestions li a.company img {
	max-width:4em;
	max-height:3em;
	mix-blend-mode:multiply;
}
#suggestions li a.member .avatar {
	width:3em;
	height:3em;
}
#suggestions li a.project {
	padding-left:2em;
}
#suggestions li a.status:before {
	position:absolute;
	top:0.95em; left:0.7em;
}


/*
—————————————————
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 {
	display:block;
	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;
}






/*
—————————————————
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;
	color:inherit;
	background:#fff;
	border-bottom:3px solid #dadbdd;
	border-radius:0.5em;
	transition:border-color 150ms;
}
#board-tiles .image {
	position:absolute;
	top:0; left:0;
	width:calc(50% - 1.6rem);
	height:100%;
	padding:1.3em;
	display:flex;
	justify-content:center;
	align-items:center;
	background:rgb(193 196 203 / 40%);
	transition:background-color 150ms;
}
#board-tiles a:hover {
	border-color:#cacbcd;
}
#board-tiles a:hover .image {
	background:rgb(193 196 203 / 55%);
}
#board-tiles img {
	max-width:100%;
	max-height:100%;
}
#board-tiles img.brand-logo {
	max-width:6.5em;
	max-height:4em;
	mix-blend-mode:multiply;
}
#board-tiles li.rounded-corners img {
	border-radius:6px;
}
#board-tiles .text {
	position:absolute;
	top:2rem; left:50%;
	width:calc(50% - 1.6rem);
}
#board-tiles h3 {
	line-height:1.2;
}
#board-tiles p {
	margin-top:1em;
}
#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:var(--barbie);
	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:rgb(193 196 203 / 40%);
	border-radius:0.2em;
}
#board-tiles .progress-bar span {
	display:block;
	height:100%;
	background:var(--barbie);
	border-radius:0.2em;
}
#board-tiles .progress-bar-completed span {
	background:var(--maleficent);
}
#board-tiles .progress-score {
	font-size:0.8666rem;
	margin-top:0.3em;
}




/*
—————————————————
Creative Tiles
—————————————————
*/
#creative-tiles {
	width:calc(100% + 2.5em);
	margin-right:-2.5em;
}
#creative-tiles li.top,
#creative-tiles li.placeholder {
	float:left;
	width:calc(50% - 2.5em);
	margin:0 2.5em 2.5em 0;
	height:20em;
	border-bottom:3px solid #dadbdd;
	border-radius:0.5em;
	position:relative;
	background:#fff;
}


@media only screen and (min-width:1900px) {
	#creative-tiles li.top, #creative-tiles li.placeholder {
		width: calc(33.333% - 2.5em);
	}
}

#creative-tiles .context-menu {
	top:0.6em;
}
#creative-tiles .context-menu-dots {
	width:2em;
	height:2em;
	line-height:2;
}


#creative-tiles li.approved:after {
	content:'\f00c';
	font-family:fa-solid;
	font-size:0.9em;
	color:#fff;
	background:var(--maleficent);
	width:2.3em;
	height:2.3em;
	line-height:2.3em;
	text-align:center;
	position:absolute;
	border-radius:50%;
	top:0.2em; right:0.2em;
	z-index:1;
	font-size:0.8em;
	top:0.8em; right:0.6em;
	pointer-events:none;
}




#creative-tiles li.placeholder {
	background:rgba(193 196 210 / 8%);
	border:2px dashed rgba(193 196 210 / 70%);
}
#creative-tiles .image {
	position:absolute;
	top:0; left:0;
	width:50%;
	height:100%;
	padding:1.3em;
	display:flex;
	justify-content:center;
	align-items:center;
	background:rgb(193 196 203 / 40%);
	transition:background-color 150ms;
	border-radius:0.5em 0 0 0.4em;
}
#creative-tiles a:hover {
	border-color:#cacbcd;
}
#creative-tiles a:hover .image {
	background:rgb(193 196 203 / 55%);
}
#creative-tiles img {
	max-width:100%;
	max-height:100%;
}
#creative-tiles.rounded-corners img {
	border-radius:6px;
}
#creative-tiles .text {
	position:absolute;
	top:0; left:50%;
	width:50%;
	height:20em;
}
#creative-tiles .text .button {
	position:absolute;
	bottom:1.3rem; left:calc(50% - 6em);
	width:12em;
}
#creative-tiles h3 {
	line-height:1.15;
	padding:0.9rem 3.2rem 0.9rem 1.2rem;
	border-bottom:1px solid #ddd;
}
#creative-tiles h3 .tag-icon {
	display:none;
	font-size:0.6em;
	font-weight:500;
	line-height:1.4em;
	display:inline-block;
	color:#fff;
	text-align:center;
	min-width:4em;
	padding:0 0.6em;
	border-radius:2em;
}
#creative-tiles h3 .tag-icon {
	display:none;
}
#creative-tiles h3 .tag-active {
	display:inline-block;
}
#creative-tiles h3 .tag1 {
	color:var(--barbie);
	background:#e6347822;
}
#creative-tiles h3 .tag2 {
	color:#4db881;
	background:#8cc69622;
}


#creative-tiles p {
	margin-top:1em;
}

#creative-tiles p.unresolved {
	position:absolute;
	top:calc(50% - 2.5em); left:1.2rem;
	padding-top:2.4rem;
	color:#aaa;
	margin:0;
}
#creative-tiles p.unresolved em {
	position:absolute;
	top:0; left:0;
	font-size:2.2em;
	color:#333;
}

#creative-tiles ul.approved {
	position:absolute;
	top:12.5rem; left:1.2rem;
	color:#848cc9;
	font-size:0.875em;
	line-height:1;
	cursor:default;
}
#creative-tiles ul.approved li {
	display:inline-block;
	border-radius:2em;
	margin:0 1.3em 0.4em 0;
	line-height:1;
	color:#ddd;
}
#creative-tiles ul.approved li.approved-tag {
	color:inherit;
}
#creative-tiles ul.approved li:before {
	content:'\f017';
	font-family:fa-light;
	width:1.25em;
	display:inline-block;
}
#creative-tiles ul.approved li.approved-tag:before {
	content:'\f058';
	font-family:fa-solid;
	color:#848cc9;
}




#creative-tiles .file-status {
	position:absolute;
	bottom:1.2em; left:1.2em;
	width:calc(100% - 2.4em);
	text-align:center;
}
#creative-tiles .file-status span {
	display:block;
	line-height:2.2em;
	text-align:center;
	font-weight:500;
	color:#777;
	background:#eee;
	border-radius:1.1em;
	font-size:0.9em;
}

#creative-tiles .file-status span.up-to-date {
	color:#4db881;
	background:#8cc69622;
}
#creative-tiles .file-status span.figma {
	
}
#creative-tiles .file-status span.not-found {
	color:var(--barbie);
	background:#e6347822;
}
#creative-tiles .file-status span.new-version {
	color:#0f81c2;
	background:#0f81c222;
}   




#creative-tiles .file-status span:before {
	font-family:fa-light;
	display:inline-block;
	width:1.2em;
	text-align:center;
	margin-right:0.2em;
	font-size:1.1em;
}

#creative-tiles .file-status span.up-to-date:before  { content:'\f00c' }
#creative-tiles .file-status span.not-found:before   { content:'\f06a' }
#creative-tiles .file-status span.new-version:before { content:'\f021' }
#creative-tiles .file-status span.figma:before       { content:'\f021' }

#creative-tiles .syncing span:before {
	display:none;
}

/* The two classes below not needed? */

#creative-tiles p.file-status + .button {
	opacity:0;
	pointer-events:none;
	transition:opacity 400ms;
}
#creative-tiles p.can-update + .button {
	opacity:1;
	pointer-events:all;
}


#creative-tiles .comments {
	position:absolute;
	bottom:1.6em; right:1.6em;
}
#creative-tiles .comments:before {
	font-family:fa-light;
	content:'\f075';
	margin-right:0.3em;
}
#creative-tiles .comments-recent:before {
    color:var(--barbie);
	font-family:fa-solid;
}
#creative-tiles .progress {
	position:absolute;
	bottom:4rem; left:50%;
	width:calc(50% - 1.6rem);
}
#creative-tiles .progress-bar {
	height:0.4em;
	background:rgb(193 196 203 / 40%);
	border-radius:0.2em;
}
#creative-tiles .progress-bar span {
	display:block;
	height:100%;
	background:var(--barbie);
	border-radius:0.2em;
}
#creative-tiles .progress-bar-completed span {
	background:var(--maleficent);
}
#creative-tiles .progress-score {
	font-size:0.8666rem;
	margin-top:0.3em;
}


/*
—————————————————
Tag Details
—————————————————
*/
.tag-details h2 {
	display:inline-block;
	color:var(--marge);
	border:1px solid var(--marge) !important;
	line-height:1;
	padding:0.1em 0.6em;
	border-radius:2em;
	margin:0.5em 0;
}
.tag-details h3 {
	margin-bottom:0.5em;
}


/*
—————————————————
Round Heading
—————————————————
*/
.round-heading {
	cursor:pointer;
	user-select:none;
	display:inline-block;
	margin-right:2em;
}
.round-heading span {
	font-size:0.85em;
	font-weight:normal;
	color:#777;
}
.round-heading:after {
	font-family:fa-light;
	font-size:0.9em;
	content:'\f078';
	margin-left:0.5em;
	margin-right:-1em;
	color:#999;
	display:inline-block;
	width:1em;
	text-align:center;
	transition:transform linear 200ms;
}
.round-heading.active:after {
	transform:rotate(180deg);
}
ul.rounds {
	display:none;
	position:absolute;
	z-index:2;
	top:3em; left:0; right:auto;
	min-width:16em;
	border:1px solid #e2e2e2;
	box-shadow:0 0.1em 0.3em rgba(0,0,0,0.2);
	background:#fff;
	border-radius:0.5em;
	padding:0.5em 0;
	user-select:none;
}
.round-heading.active + ul.rounds,
.trigger-menu-active + ul.trigger-menu {
	display:block;
}
.round-heading-archived {
	cursor:default;
}
.round-heading-archived.active + ul.rounds {
	display:none;
}
.round-heading-archived:after {
	display:none;
}
 ul.rounds a {
	display:block;
	padding:0.2em 2em 0.2em 1em;
	white-space:nowrap;
}
 ul.rounds a:hover {
	background:rgba(193 196 210 / 17%);
}
 ul.rounds a:active {
	background:rgba(193 196 210 / 23%);
}
 ul.rounds li.section-top:not(:first-child) {
	padding-top:0.4em;
	margin-top:0.4em;
	border-top:1px solid #ddd;
}

.has-trigger {
	width:9.5rem;
}
.has-trigger .button {
	float:left;
	border-radius:1.2em 0 0 1.2em;
	width:6.9rem;
}
.button +.trigger {
	float:right;
	width:2.6rem;
	height:2.2em;
	line-height:2.2em;
	border-radius:0 1.2em 1.2em 0;
	color:#fff;
	background:var(--barbie);
	cursor:pointer;
	border-left:1px solid rgb(0,0,0,0.1);
	text-align:center;
	padding-right:0.3em;
	box-shadow:0 0 0 100vmax inset rgb(0,0,0,0.07);
	font-size:0.866em;
	user-select:none;
}
.button-white +.trigger {
	box-shadow:none;
	border:0;
}
.button + .trigger:after {
	content:'\f078';
	font-family:fa-solid;
	font-size:0.9em;
	transition:transform linear 200ms;
	display:inline-block;
}
.trigger-menu-active .button + .trigger:after {
	transform:rotate(180deg);
}
ul.trigger-menu {
	position:absolute;
	top:2.5em;
	left:0;
	width:auto;
	min-width:0;
}

/*
—————————————————
Board Description
—————————————————
*/
.board-description {
	font-size:0.85em;
	max-width:22em;
	margin:-0.5em 0 1.5em 0;
	color:#888;
	border-left:4px solid #ccc;
	padding-left:0.6em;
	line-height:1.3;
}








/*
—————————————————
Project Steps
—————————————————
*/
.steps {
	display:inline-block;
	height:3.5em;
	background:rgba(193 196 203 / 20%);
	padding:0.5em;
	margin:0.5em auto 6em auto;
	border-radius:2.5em;
}
.steps li {
	float:left;
	width:2.5em;
	height:2.5em;
	border-radius:50%;
	background:#d5d7dc;
	border:0.2em solid #d5d7dc;
	margin-right:7.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.3rem; left:calc(50% - 5rem);
	width:10rem;
	line-height:1.2;
	text-align:center;
	font-weight:normal;
	font-size:0.8666em;
}
.steps div {
	position:absolute;
	top:0.925em;
	right:2.3em;
	width:8em;
	height:0.25em;
	background:#d5d7dc;
	z-index:-1;
}
.steps-narrow li {
	margin-right:4.6666em;
}
.steps-narrow div {
	width:5em;
}
.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:var(--barbie);
	background:#fff;
}
.steps li.current {
	background:var(--barbie);
}
.steps li.complete:after {
	content:'\f00c';
	font-family:fa-solid;
	font-weight:normal;
	color:var(--barbie);
	position:absolute;
	width:2.2em;
	line-height:2.2em;
	text-align:center;
	top:0; left:calc(50% - 1.1em); 
	z-index:5;
}
.steps li.current:after {
	color:#fff;
}
.steps li.active div {
	background:var(--barbie);
}


/*
—————————————————
Lists
—————————————————
*/
#xcontent dt {
	float:left;
	clear:both;
	width:12rem;
	padding-right:1.4rem;
	font-weight:500;
}
#xcontent dd {
	float:left;
	width:calc(100% - 12rem);
	padding:0 0 1.8em 1em;
	border-left:1px solid #ccc;
}



/*
—————————————————
SOW & Brief
—————————————————
*/
.section-readonly {
	margin-bottom:2.4em;
	position:relative;
}
.section-readonly h3.section-heading {
	display:inline-block;
	font-size:1.1em;
	color:#fff;
	background:#095d9d;
	padding:0.4em 1.4rem;
	border-radius:0.5rem 0.5rem 0 0;
	margin:0;
	outline:0;
}
.section-readonly dd:last-child {
	padding-bottom:0.5em;
}
.section-focused h3.section-heading {
	background:var(--barbie);
}
.section-readonly .section-content {
	clear:left;
	background:#fff;
	padding:1.4em;
	border-radius:0 0 0.5rem 0.5rem;
	border-bottom:3px solid #dadbdd;
	position:relative;
}
.section-readonly .section-hero-image {
	display:none;
	position:absolute;
	top:0; right:0;
	width:18em;
	height:100%;
	border-radius:0 0.6em 0.6em 0;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	background-color:#dadce4;
}
.section-has-image .section-content {
	padding-right:20em;
}
.section-has-image .section-hero-image {
	display:block;
}
.section-has-image .section-hero-image .button {
	position:absolute;
	width:6em;
	bottom:1em; left:calc(50% - 3em);
}



.section-readonly dt {
	float:left;
	clear:both;
	width:12rem;
	padding:0.2em 0.3em;
	font-weight:500;
	outline:0;
}
.section-readonly dd {
	float:right;
	width:calc(100% - 13rem);
	padding:0 0 1.8em 1em;
	border-left:1px solid #ccc;
	min-height:3em;
	outline:0;
}
.section-readonly dd:last-child {
	padding-bottom:0.5em;
}
.section-focused h3.section-heading {
	background:var(--barbie);
}

.brief-editable .section-readonly dt {
	float:none;
	width:auto;
	border-bottom:1px solid #ccc;
    margin-top:0.5em;
    margin-bottom:0.5em;
    font-size:1.2em;
}
.brief-editable .section-readonly dd {
	float:none;
	width:auto;
	border:0;
	padding:0;
	margin-bottom:1.6em;
	min-height:1em;
}

.section-comments {
	width:28em;
	position:absolute;
	top:2.4em; left:calc(100% + 2.5em);
	border-left:3px solid var(--barbie);
	border-radius:0.5em;
	padding:1.6em;
	background:#fff;
	display:none;
}
.section-focused .section-comments {
	display:block;
}





/*
—————————————————
Artwork
—————————————————
*/

.latest {
	text-align:center;
	position:relative;
	top:-3em;
	color:var(--barbie);
}


/*
—————————————————
Buttons
—————————————————
*/
.button {
	display:inline-block;
	color:#fff;
	background:var(--barbie);
	font-weight:500;
	padding:0 1.1em;
	text-align:center;
	text-decoration:none;
	border:0;
	cursor:pointer;
	outline:none;
	height:2.2em;
	line-height:2.2em;
	border-radius:1.1em;
	user-select:none;
	box-sizing:border-box;
}
h2 + .button {
	margin-left:0.8em;
}
.button:hover {
	xbackground:#f32d75;
    box-shadow: 0 0 0 100vmax inset rgb(0, 0, 0, 0.05);
}
.button:active {
	background:#ea286f;
}
.button-share:before {
	content:'\f064';
	font-family:fa-solid;
	font-weight:normal;
	margin-right:0.5em;
	display:inline-block;
	width:1em;
}
.button-secondary {
	color:var(--barbie) !important;
	background:#fff !important;
	border:2px solid var(--barbie);
	line-height:100%;
}
.button-white, .button-white:hover {
	color:var(--barbie);
	background:#fff !important;
}
.button-restore {
	height:1.5em;
	line-height:1.5em;
	padding:0.0.9em;
	margin-left:0.8em;
}




.button-small {
	font-size:0.866em;
}
.button-undo {
	background-color:var(--maleficent) !important;
	margin:0 0 -0.2em 1em;
}
.button-undo-blue {
	background-color:var(--marge) !important;
	margin:0 0 -0.2em 1em;
}
.button:hover {
	background:#f02e75;
}
.button:active {
	background:#e02b6d;
}
.button-blue {
	background:var(--marge);
}
.button-blue:hover {
	background:#00649d;
}
.button-blue:active {
	background:#005d93;
}
.button-green {
	background:var(--maleficent);
}
.button-green:hover {
	background:#88c292;
}
.button-green:active {
	background:#81bb8b;
}
.button-yellow,
.button-yellow:hover {
	color:#333;
	background:#ffb;
}
.button-dark-pink {
	background:#e02b6d;
}

.button-gray {
	color:#666;
	background:#e1e1e1;
}
.button-gray:hover {
	background:#d9d9d9;
}
.button-gray:active {
	background:#d4d4d4;
}
.button-dark-gray {
	color:#fff;
	background:#bbb;
	background:#c1c4cb;
}
.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;
	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;
}
.loading {
	opacity:0;
	display:inline-block;
	pointer-events:none;
	font-size:0.866em;
	font-weight:500;
	height:2.2em;
	line-height:2.2em;
	text-transform:lowercase;
}
.loading:before {
	content:'\f3f4';
	font-family:fa-solid;
	color:var(--elsa);
	display:inline-block;
	width:2em;
	height:2em;
	line-height:2em;
	text-align:center;
	margin-left:2em;
	animation:loadspin 2s linear infinite;
}
@keyframes loadspin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


.dropdown {
	position:relative;
	display:inline-block;
}
.dropdown .menu {
	position:absolute;
	top:2.4em; left:0;
	background:#fff;
	padding:0.4em 0;
	z-index:1;
	border-radius:0.5em;
	box-shadow:0 0 1em rgba(0,0,0,0.1);
	display:none;
	text-align:left;
}
.dropdown .menu a {
	display:block;
	padding:0.5em 1.2em;
	white-space:nowrap;
}
.dropdown .menu a:hover {
	background:#f0f0f2;
}
.dropdown-open .menu {
	display:block;
}
.dropdown-open .button {
	z-index:2;
	xborder-radius:8px 8px 0 0;
}




























.status {
	margin:-1em 0 3em 0;
	text-align:center;
}
.status p {
	display:inline-block;	
	padding:0.5em 1.2em 0.5em 0.8em;
	line-height:2;
	border-bottom:3px solid #dadbdd;
	border-radius:3em;
	margin:0;
	background:#fff;
}
#form .status {
	margin:-3.4em 0 -1.2em 0;
}
#form .status p {
	border:0;
	box-shadow:0 0 0.7em #dadada;
}
.status p:before {
	float:left;
	content:'\f0a4';
	color:var(--barbie);
	font-family:fa-solid;
	font-size:1.75em;
	line-height:2rem;
	margin-right:0.5em;
}
.status-warning p:before {
	content:'\f06a';
}
.status-waiting p:before {
	content:'\f017';
}
.status-completed p:before,
.status-approved p:before,
.status-sent p:before {
	content:'\f00c';
	color:var(--maleficent);
}
.status .button {
	margin:0 -0.6em 0 0.8em!important;
}





#pins {
	max-width:1300px;
	margin:auto;
}

.pins ul {
	width:calc(100% + 2em);
	margin-right:-2em;
}
.pins li {
	float:left;
	width:calc(25% - 2em);
	margin:0 2em 2em 0;
	position:relative;
}
.pins li.approved:after {
	content:'\f00c';
	font-family:fa-solid;
	color:#fff;
	background:var(--maleficent);
	width:2em;
	height:2em;
	line-height:2em;
	text-align:center;
	position:absolute;
	border-radius:50%;
	top:-0.4em;
	right:-0.4em;
	font-size:1.2em;
	z-index:1;	
}
.pins li:nth-child(4n+1) {
	clear:left;
}
.pins a {
	display:block;
	position:relative;
	text-decoration:none;
}
.pins a:after {
	content:'';
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	border-radius:16px;
	background:rgba(0,0,0,0.03);
}
.pins a:hover:after {
	background:rgba(0,0,0,0.09);
}
.pins img,
.pins video {
	display:block;
	width:100%;
	box-sizing:border-box;
	border-radius:16px;
	outline:0;
}

.thumbnail-pins a {
	width:0;
	height:0;
	padding:50%;
	background:#fff;
	border-radius:16px;
	overflow:hidden;
}
.thumbnail-pins .image {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	padding:1.3em;
	display:flex;
	justify-content:center;
	align-items:center;
	background:rgb(193 196 203 / 25%);
	transition:background-color 150ms;
}
.thumbnail-pins a:hover .image {
	background:rgb(193 196 203 / 30%);
}
.thumbnail-pins img,
.thumbnail-pins video {
	border-radius:6px;
	width:auto;
	max-width:100%;
	max-height:100%;
}



.square-pins a:after,
.square-pins img,
.square-pins video {
	border-radius:0;
}
.stacked .pins li {
	float:none;
	width:auto;
	margin-bottom:5em;
	text-align:center;
}
.stacked .pins a {
	display:inline-block;
}
.stacked .pins a:after {
	display:none;
}
.stacked .pins img,
.stacked .pins video {
	display:inline-block;
	border-radius:0;
	width:auto;
	max-width:100%;
	margin:auto;
	box-shadow:0 0 12px rgba(0,0,0,0.02);
}








.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.09);
}

.pins .image-shim img {
	position:absolute;
	top:0; left:0;
	height:100%;
	opacity:0;
	transition:opacity 250ms;
}
.pins .image-shim img.loaded {
	opacity:1;
}
















.pins .icons {
	display:block;
	height:1.6em;
	margin-top:0.4em;
	text-align:center;
	color:#bbb;
}
.pins .icons span {
	display:inline-block;
	line-height:1.6em;
	margin:0 2em;
	color:#333;
}
.pins .icons span:before {
	font-family:fa-solid;
	float:left;
	width:1.5em;
	text-align:center;
	color:#ccc;
}
.pins .icon-comments:before {
	content:'\f075';
}
.pins .icon-approvals:before {
	content:'\f164';
}
.pins .icons .icon-approvals.icon-active:before {
	color:var(--maleficent);
}


.pins .arrows {
	display:none;
}
.pins .carousel-pin .arrows {
	display:block;
	position:absolute;
	top:calc(50% - 2.5em);
	left:0;
	width:100%;
}
.pins .carousel-pin .arrows:before,
.pins .carousel-pin .arrows:after {
	font:1.5em/2 fa-solid;
	content:'\f053';
	color:#fff;
	width:2em;
	text-align:center;
	float:left;
}
.pins .carousel-pin .arrows:after  {
	content:'\f054';
	float:right;
}



/*
—————————————————
Overlays
—————————————————
*/
#terms-wrapper {
	max-width:900px;
}
.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 var(--barbie);
	padding-bottom:0.2em;
}
.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;
}

/*
—————————————————
Carousel
—————————————————
*/
.carousel {
	width:23.3vw;
	xheight:35vw;
	position:relative;
	margin:auto;
}
.info-panel-expanded .carousel {
	xmax-width:30vw;
	xmax-height:30vw;
}
.carousel-inner {
	width:100%;
	xheight:100%;
	border-radius:16px;
	overflow:hidden;
	position:relative;
}
.carousel-inner:after {
	content:'';
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	z-index:1;
	background:rgba(0,0,0,0.4);
	pointer-events:none;
	opacity:0;
	transition:opacity 100ms linear;
}
.carousel-inner:hover:after {
	opacity:1;
}
.carousel ul {
	height:100%;
	transition:margin-left 400ms ease-in-out;
}
.carousel li {
	float:left;
	height:100%;
}
.carousel img {
	display:block;
	width:100%;
	xheight:100%;
}
.carousel-nav {
	font:1.5em/2 fa-solid;
	color:#fff;
	width:2em;
	text-align:center;
	position:absolute;
	top:calc(50% - 1.5em);
	left:0;
	z-index:2;
	cursor:pointer;
}
.carousel-nav:after {
	content:'\f053';
}
.carousel-nav-next {
	left:auto;
	right:0;
}
.carousel-nav-next:after {
	content:'\f054';
}
.carousel-dots {
	position:absolute;
	text-align:center;
	bottom:-2.5em;
	left:0;
	width:100%;
}
.carousel-dot {
	display:inline-block;
	width:1em;
	height:1em;
	background:#ddd;
	border-radius:50%;
	cursor:pointer;
	margin:0 0.3em;
}
.carousel-dot-active {
	background:#aaa;
}












/*
—————————————————
Projects
—————————————————
*/
#boards {
	width:calc(100% + 4em);
	margin-right:-4em;
	max-width:1400px;
	margin-bottom:4em;
}
#boards li {
	float:left;
	width:calc(20% - 4em);
	margin:0 4em 3em 0;
	position:relative;
}
#boards li:nth-child(5n + 1) {
	clear:left;
}
#boards a {
	display:block;
	text-decoration:none;
	color:inherit;
	text-align:center;
	line-height:1.3;
}
#boards span.cover {
	display:block;
	padding:60% 50%;
	background-repeat:no-repeat;
	background-position:top center;
	background-size:contain;
	background-position:center;
	margin-bottom:0.6em;
	position:relative;
	border-radius:8px;
	border:1em solid transparent;
}
#boards span.cover-logo {
	background-size:128px auto;
	background-position:center;
}
#boards span.cover:after {
	content:'';
	position:absolute;
	top:-1em;
	left:-1em;
	width:calc(100% + 2em);
	height:calc(100% + 2em);
	border-radius:8px;
	background:rgba(0,0,0,0.03);
	transition:background-color 150ms;
}
#boards a:hover span.cover:after {
	background:rgba(0,0,0,0.08);
}
#boards strong {
	display:block;
	overflow-wrap:break-word;
}
#boards span.viewed {
	display:block;
	color:#aaa;
	font-size:0.875em;
}




/*
—————————————————
Portfolios
—————————————————
*/
#portfolio-tiles {
	width:calc(100% + 1em);
	margin-right:-1em;
}
#portfolio-tiles li {
	float:left;
	width:calc(25% - 1em);
	margin:0 1em 1em 0;
	user-select:none;
	position:relative;
}
#portfolio-tiles .tile-wrapper {
	display:block;
	width:0;
	height:0;
	padding:60% 50%;
	background:#fff;
	border-bottom:3px solid #dadbdd;
	border-radius:0.5em;
	position:relative;
	overflow:hidden;
}
#portfolio-tiles .image {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:80%;
	padding:1.3em;
	display:flex;
	justify-content:center;
	align-items:center;
	background:rgb(193 196 203 / 40%);
	cursor:move;
}
#portfolio-tiles a.tile-wrapper .image {
	cursor:pointer;
}
#portfolio-tiles.project-selector li {
	cursor:pointer;
}
#portfolio-tiles.project-selector li:hover .image {
	background:rgb(193 196 203 / 55%);
}
#portfolio-tiles a:hover {
	border-color:#cacbcd;
}
#portfolio-tiles a:hover .image {
	background:rgb(193 196 203 / 55%);
}
#portfolio-tiles img,
#portfolio-tiles video {
	max-width:100%;
	max-height:100%;
	border-radius:6px;
}
#portfolio-tiles .text {
	position:absolute;
	top:80%; left:0;
	width:100%;
	height:20%;
	text-align:center;
	padding:0 1em;
	display:flex;
	justify-content:center;
	align-items:center;
}
#portfolio-tiles p {
	display:block;
	width:100%;
}
#portfolio-tiles strong {
	display:block;
	width:100%;
	line-height:1.1;
	font-size:1.05em;
	font-weight:500;
	outline:none;
}
#portfolio-tiles span {
	display:block;
	width:100%;
	font-size:0.9em;
	outline:none;
}
#portfolio-tiles li.selected .image:before {
	content:'';
	position:absolute;
	top:0; left:0;
	background:#000000bb;
	width:100%;
	height:100%;
}
#portfolio-tiles li.selected .image:after {
	content:'\f00c';
	position:absolute;
	top:1em; left:0;
	width:100%;
	color:var(--barbie);
	font-family:fa-solid;
	font-size:5.5em;
	text-align:center;
}
#portfolio-tiles li.selected .text {
	color:#fff;
	background:var(--barbie);
}
#portfolio-tiles .delete {
	cursor:pointer;
	width:1.8em;
	height:1.8em;
	position:absolute;
	top:-0.4em; right:-0.4em;
	border-radius:0.9em;
	background:#d0d2d8;
	text-align:center;
}
#portfolio-tiles .delete:after {
	content:'\f00d';
	font-family:fa-solid;
	line-height:1.8;
	color:#fff;
}

@media only screen and (min-width:1900px) {
	#portfolio-tiles li {
		width:calc(20% - 1em);
	}
}
@media only screen and (max-width:1600px) {
	#portfolio-tiles .text {
		font-size:1vw;
	}
}

/*
—————————————————
User Avatars
—————————————————
*/
.avatar {
	width:3em;
	height:3em;
	user-select:none;
	border-radius:50%;
	overflow:hidden;
	float:left;
	margin-right:0.6rem;
}
.avatar img,
.avatar span {
	display:block;
	width:100%;
	height:100%;
}
.avatar span {
	font-size:1em;
	line-height:2.8em;
	text-align:center;
	color:#fff;
	background:#695390;
	background:linear-gradient(to bottom right, var(--elsa), var(--ursula));
	font-weight:500;
}




/*
—————————————————
Team
—————————————————
*/
.team-wrapper {
	max-width:56em;
	margin:auto;
}
.team-columns {
	width:calc(100% + 6em);
	margin-right:-6em;
}
.team-column {
	float:left;
	width:calc(50% - 6em);
	margin-right:6em;
}
.team-column p {
	margin:-0.7em 0 2em 0;
}
.team-column .error {
	clear:left;
	display:block;
	color:var(--barbie);
	font-weight:500;
	font-size:0.9em;
	padding-top:0.5em;
}
.team {
	margin-bottom:3em;
	position:relative;
}
.team li.person {
	height:4.4em;
	background:#fff;
	padding:0.7em;
	border-radius:0.5em;
	margin-bottom:1em;
	border-bottom:3px solid #e0e1e5;
	position:relative;
}
.team-sortable {
	min-height:4.4em;
}
.team-sortable li.person {
	padding-left:2.5em;
}
.team-sortable li.person .remove {
	position:absolute;
	top:-0.5em;
	right:-0.5em;
	width:1.5em;
	height:1.5em;
	border-radius:50%;
	color:#666;
	background:#eaebed;
	text-align:center;
}
.team-sortable li.person .remove:after {
	display:inline-block;
	font-size:0.75em;
	font-family:fa-solid;
	line-height:1.5rem;
	content:'\f00d';
}
.team-sortable .drag-handle {
	position:absolute;
	top:0; left:0;
	width:1.7em;
	height:100%;
	cursor:move;
	background:#eaebed;
}
.team-sortable .drag-handle:after {
	content:'\f0dc';
	font-family:fa-solid;
	color:rgba(0,0,0,0.15);
	position:absolute;
	top:calc(50% - 0.5em); left:0;
	line-height:1;
	width:100%;
	text-align:center;
}

.team-sortable .placeholder {
	border-radius:0.5em;
	height:4.4em;
	background:rgba(193 196 210 / 20%);
	margin-bottom:1em;
	border:2px dashed rgba(193 196 210 / 70%);
}


.team .text strong {
	display:block;
	padding-top:0.1em;
	font-weight:500;
}
.team .text span {
	display:block;
	color:#818284;
	font-size:0.9em;
}
.team .text:hover strong {
	color:var(--barbie);
}
.team .avatar {
    margin:0 0.6rem 0 0;
}

.team-selector {
	width:64em;
	margin-right:-1em;
}
.team-selector li {
	float:left;
	width:20em;
	margin:0 1em 1em 0;
}
.team-selector li.disabled .avatar {
	pointer-events:none;
	cursor:default;
}
.team-selector li.inactive {
	display:none;
}

.team-selector .avatar {
	cursor:pointer;
	position:relative;
}
.team-selector li .avatar:hover {
	background:var(--marge);
}
.team-selector li .avatar:after {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	font-family:fa-solid;
	color:#fff;
	font-size:1.6em;
	line-height:2.8rem;
}
.team-selector li .avatar:hover:after {
	content:'\2b';
}

.team-selector li.selected .avatar {
	background:var(--barbie);
}
.team-selector li .avatar:hover span,
.team-selector li .avatar:hover img,
.team-selector li.selected .avatar span,
.team-selector li.selected .avatar img {
	display:none;
}
.team-selector li.selected .avatar:after {
	content:'\f00c';
}

.filter {
	position:relative;
	display:inline-block;
	vertical-align:top;
	margin-right:0.5em;
}
.has-trigger .filter-label {
	width:11.5em;
	text-align:left;
}
.filters .rounds ul {
	width:auto;
	min-width:11em;
}
.filters .rounds li input {
	position:absolute;
	top:0.3em; left:0.8em;
}
.filters .rounds li.section-top:not(:first-child) input {
	top:0.7em;
}
.filters .rounds li {
	position:relative;
	padding:0 1em 0 2.5em;
}
.filters .rounds li label {
	display:block;
	white-space:nowrap;
}

.skill-tags {
	margin-bottom:2em;
	min-height:2.5em;
}
.skill-tags li {
	display:inline-block;
	font-size:0.8em;
	font-weight:500;
	line-height:2.2;
	height:2.2em;
	padding:0 2em 0 0.8em;
	border-radius:2em;
	color:#fff;
    background:var(--ursula);
	margin:0 0.3em 0.5em 0;
	position:relative;
	user-select:none;
}
.skill-tags-readonly li {
	padding:0 0.8em;
}
.skill-tags-truncated li {
	display:none;
}
.skill-tags-truncated li:nth-child(1),
.skill-tags-truncated li:nth-child(2),
.skill-tags-truncated li:nth-child(3),
.skill-tags-truncated li:nth-child(4) {
	display:inline-block;
}
.skill-tags-truncated li.more {
	display:inline-block;
	cursor:pointer;
}
.skill-tags li .remove {
	position:absolute;
	top:0; right:0;
	width:2em;
	line-height:2.2;
	text-align:center;
	cursor:pointer;
}
.skill-tags li .remove:after {
	font-family:fa-light;
	content:'\f00d';
}

.filter:nth-child(1) .has-trigger  span.button-small, .filter:nth-child(1) .trigger, .skill-tags li.type1 { color:#fff; background:var(--ursula) !important }
.filter:nth-child(2) .has-trigger  span.button-small, .filter:nth-child(2) .trigger, .skill-tags li.type2 { color:#fff; background:var(--elsa) !important }
.filter:nth-child(3) .has-trigger  span.button-small, .filter:nth-child(3) .trigger, .skill-tags li.type3 { color:#fff; background:var(--peppa) !important }
.filter:nth-child(4) .has-trigger  span.button-small, .filter:nth-child(4) .trigger, .skill-tags li.type4 { color:#fff; background:var(--maleficent) !important }
.filter:nth-child(5) .has-trigger  span.button-small, .filter:nth-child(5) .trigger, .skill-tags li.type5 { color:#fff; background:var(--patrick) !important }


/*
—————————————————
Studio Approvers
—————————————————
*/
.approval-types {
	position:absolute;
	top:1em; left:23em;
	width:calc(100% - 23em);
	user-select:none;
}
#project-managers .skill-tags,
#studio-approvers .skill-tags,
#studio-team .approval-types {
	display:none;
}
.approval-types li {
	float:left;
	text-align:center;
	line-height:1.1;
	cursor:pointer;
	opacity:0.2;
}
.team li.person:hover .approval-types li {
	opacity:0.3;
}
.team li.person:hover .approval-types li:hover {
	opacity:0.5;
}
.approval-types li.selected {
	opacity:1 !important;
	color:var(--barbie);
}
.approval-types strong {
	display:block;
	font-weight:normal;
	font-family:fa-light;
	font-size:1.3em;
}
.approval-types li.selected strong {
	font-family:fa-solid;
}
.approval-types span {
	display:block;
	font-size:0.9em;
}
.team li.person .skill-tags {
	position:absolute;
	top:1.2em; left:19em;
	width:calc(100% - 19em);
}


.approval-types-editable {
	margin-bottom:2em;
}
.approval-types-editable li {
	height:2em;
	margin-bottom:1em;
}
.approval-types-editable input.text {
	float:left;
	width:60% !important;
	border-radius:5px !important;
}
.approval-types-editable select {
	float:right;
	width:calc(40% - 2.5em) !important;
	border-radius:5px !important;
}

.approval-types-editable span.drag-handle {
	float:left;
	width:1.5em;
	height:2em;
	line-height:2rem;
	cursor:move;
}
.approval-types-editable span.drag-handle:after {
	font-family:fa-solid;
	font-size:1.2em;
	content:'\f7a5';
	opacity:0.5;
}




/*
—————————————————
Member Profile
—————————————————
*/

.member-header {
	height:4em;
	position:relative;
	padding-left:5em;
	margin-bottom:1.2em;
}
.member-header .avatar {
	position:absolute;
	top:0; left:0;
	font-size:1.5em;
}
.member-header h2 {
	margin:0;
}
.member-header h4 {
	font-size:1.05em;
	color:#777;
}
.member-header + .skill-tags {
	margin-bottom:1em;
	min-height:0;
}
.member-description {
	background:#f5f5f5;
	padding:0.8em 1em;
	border-radius:1em;
}
.member-description p:last-child {
	margin:0;
}
.member-lists {
	margin-top:2em;
}
.member-lists h3 {
	margin-bottom:0.7em;
	color:var(--barbie);
}
.member-lists strong {
	font-weight:500;
}
.member-projects li {
	border:1px solid #ddd;
	border-bottom-width:2px;
	border-radius:0.5em;
	padding:0.7em 0.8em;
	margin-bottom:0.5em;
	line-height:1.2;
	display:none;
}
.member-projects-all li,
.member-projects li:nth-child(1),
.member-projects li:nth-child(2),
.member-projects li:nth-child(3),
.member-projects li:nth-child(4),
.member-projects li:nth-child(5) {
	display:block;
}

.member-projects {
	float:left;
	width:calc(50% - 2em);
	margin-right:3em;
}
.extra-projects {
	display:inline-block;
	cursor:pointer;
}
.member-projects-all .extra-projects {
	display:none;
}
.member-brands {
	float:left;
	width:calc(25% - 2em);
	margin-right:3em;
}
.member-channels {
	float:left;
	width:calc(25% - 2em);
}


.member-brands li,
.member-channels li {
	position:relative;
	padding-top:0.5em;
	margin-bottom:0.5em;
	line-height:1.2;
	border-top:1px solid #ddd;
}
.member-brands strong,
.member-channels strong {
	display:block;
}
.member-brands strong {
	padding-right:2em;
	line-height:1;
	margin-bottom:0.2em;
}
.member-channels strong {
	font-weight:normal;
}
.member-brands span,
.member-channels span {
	display:block;
	color:#aaa;
	font-size:0.9em;
}
.member-brands em,
.member-channels em {
	font-style:normal;
	position:absolute;
	top:0.5em; right:0;
}

/*
—————————————————
Billing
—————————————————
*/
.quote-list {
	margin-top:2em;
	margin-bottom:-1.6em;
}
.quote-list a {
	float:left;
	width:15em;
	height:7.4em;
	color:inherit;
	background:#fff;
	border-radius:6px;
	margin:0 1.6rem 1.6em 0;
	text-align:center;
	padding:0.7em;
	box-shadow:0 5px 10px #eaeaea;
	position:relative;
	text-decoration:none;
	box-sizing:border-box;
}
.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;
	box-sizing:border-box;
}
.quote-list a:last-child:after {
	content:'';
}
.quote-list a.invoice:after {
	content:'';
}
.quote-list .heading {
	display:block;
}
.quote-list .job-number {
	display:block;
	font-size:0.933rem;
	margin-bottom:0.3em;
}
.quote-list .status-bar {
	position:absolute;
	bottom:0; left:0;
	border-radius:0 0 6px 6px;
	padding:0.15em;
	width:100%;
	font-weight:500;
	box-sizing:border-box;
	line-height:1.6rem;
}
.quote-list .accepted {
	color:#fff;
	background:var(--maleficent);
}
.quote-list .sent,
.quote-list .latest-version {
	color:#fff;
	background:var(--marge);
}
.quote-list .unpaid {
	color:#fff;
	background:var(--barbie);
}
.quote-list .status-bar:before {
	font-family:fa-solid;
	font-weight:normal;
	margin-right:0.3em;
}
.quote-list .status-bar:after {
	font-family:fa-solid;
	font-weight:normal;
	margin-left:0.3em;
}
.quote-list .accepted:before {
	content:'\f00c';
}
.quote-list .sent:before {
	content:'\f017';
}
.quote-list .unpaid:after {
	xcontent:'\f054';
}
.add-ons-wrapper {
	border-top:1px solid #ccc;
	margin-bottom:1em;
	max-width:40em;
}
.add-on {
	border-bottom:1px solid #ccc;
	padding:0.4em 0;
}
.add-on-description {
	float:left;
	width:calc(100% - 10em);
}
.add-on-cost {
	float:right;
	width:10em;
	text-align:right;
}









/*
—————————————————
SOW & Brief
—————————————————
*/


#brief-header {
	display:table;
	width:calc(100% + 4.5em);
	border-spacing:1.5em;
    border-collapse:separate;
    margin:0 -1.5em 1.5em -1.5em;
}
.board-summary {
	display:table-cell;
	width:50%;
	margin:0;
	padding:1.5em;
	background:#fff;
	border-radius:0.5em;
	border-bottom:3px solid #ddd;
	overflow:hidden;
}
#brief-header .fullwidth {
	width:100%;
}
.topline-brief {
	display:table-cell;
	width:50%;
	padding:1.5em;
	background:#fff;
	border-radius:0.5em;
	border-bottom:3px solid #ddd;
	overflow:hidden;
}
#brief-header dt {
	width:10.5rem;
	font-size:1rem;
	padding-right:1.5em;
}
#brief-header dd {
	padding-bottom:0;
	width:calc(100% - 10.5rem);
	padding-bottom:0.3em;
}
#brief-header h3 {
	padding:0.5rem 1.5rem;
	margin:-1.5rem -1.5rem 1em -1.5rem;
	font-size:1.1em;
	font-weight:500;
	color:#fff;
	background:#095d9d;
}
#brief-header p {
	margin-bottom:0.7em;
}
#brief-header p:last-child {
	margin:0;
}


.content-wrapper dt,
.basic dt {
	float:left;
	clear:both;
	width:12rem;
	padding-right:1.4rem;
	font-weight:500;
}
.content-wrapper dd,
.basic dd {
	float:left;
	width:calc(100% - 12rem);
	padding:0 0 1.8em 1em;
	border-left:1px solid #ccc;
	word-break:break-word;
}

.brief-specs {
	margin-bottom:4em;
}
.brief-specs dd,
.brief-specs dd:last-child {
	padding-bottom:0;
}






.overview dd {
	min-height:4.5em;
}
.overview dd:last-child {
	min-height:0;
}
.timeline {
	border-top:1px solid #ccc;
	margin-bottom:1em;
	max-width:40em;
}
.timeline li {
	padding:0.4em 0;
	border-bottom:1px solid #ccc;
}
.timeline span {
	display:inline-block;
}
.timeline .who {
	width:20%;
	font-weight:bold;
}
.timeline .what {
	width:60%;
}
.timeline .days {
	width:20%;
	font-weight:bold;
	text-align:right;
}
.timeline li:nth-child(odd) .who,
.timeline li:nth-child(odd) .days {
	color:var(--barbie);
}
.terms-box {
	padding:1.5em;
	background:rgba(255,255,255,0.8);
	border-radius:5px;
	border:1px solid #ddd;
	counter-reset:termscounter;
}
.terms-box a, dd a {
	color:#f32d75;
}
.terms-box ol {
	padding-left:1.8em;
	margin:0 0 1.2em 0;
}
.terms-box ol li {
	padding-left:0.5em;
	margin-bottom:0.4em;
	list-style:none;
}
.terms-box ol li:before {
	content:counter(termscounter) '. ';
	counter-increment:termscounter;
	display:inline-block;
	width:1.8em;
	margin-left:-1.8em;
}
.terms-box ol li ol {
	counter-increment:none;
	margin:0.4em 0 1.2em 1.3em;
}
.terms-box ol li ol li {
	list-style:lower-alpha outside;
}
.terms-box ol li ol li:before {
	counter-increment:none;
	content:'';
}
.terms-box ul, ul.bullet, .section-readonly dd ul:not(.file-list) {
	padding-left:2.3em;
	margin-bottom:1em;
}
.terms-box ul:last-child, ul.bullet:last-child, .section-readonly dd ul:not(.file-list):last-child {
	margin-bottom:0;
}
.terms-box ul li, ul.bullet li, .section-readonly dd ul li:not(.file-list li) {
	list-style:disc;
	margin-bottom:0.4em;
}
.terms-box table {
	border:1px solid #ddd;
	margin-bottom:1.2em;
	margin-left:2.3em;
}
.terms-box table.full-width {
	width:calc(100% - 2.3em);
}
.terms-box table + p {
	margin-left:2.3em;
}
.terms-box table tr {
	border-bottom:1px solid #ddd;
}
.terms-box table th {
	background:#eee;
	padding:0.4em 2em 0.4em 0.7em;
}
.terms-box table td {
	padding:0.4em 2em 0.4em 0.7em;
}
.terms-box table tr:last-child,
.terms-box table td:last-child {
	padding-right:0.7em;
}
.terms-switcher {
	border-radius:0 0 5px 5px;
	padding:0.5em;
	cursor:pointer;
	color:#666;
	background:#ddd;
	text-align:center;
}
.terms-switcher:hover {
	background:#d7d7d7;
}
.terms-switcher:active {
	background:#d2d2d2;
}
.terms-switcher:before {
	content:'View full terms';
}
.view-abridged:before {
	content:'View abridged terms';
}
.terms-switcher:after {
	font-family:fa-solid;
	content:'\f078';
	margin-left:0.4em;
}
.view-abridged:after {
	content:'\f077';
}
.terms-abridged {
	border-radius:5px 5px 0 0;
}
.terms-abridged + .terms-full {
	display:none;
	border-radius:5px 5px 0 0;
}
.sow-intro {
	display:block;
	margin:1.2em auto 0 auto;
	max-width:32em;
}
.sow-intro a {
	color:#f32d75;
}
.approve-buttons {
	text-align:center;
	margin-bottom:0;
}
.approve-buttons .button {
	font-size:1.12em;
	width:12em;
	margin:0 0.3em;
	border:2px solid transparent;
	border-radius:2em;
	line-height:calc(2em - 4px);
}
.approve-buttons .white-button {
	background:#fff;
	color:#f32d75;
	border-color:#f32d75;
	font-weight:500;
}
.approved-text {
	text-align:center;
}
.approved-text:before {
	font-family:fa-solid;
	content:'\f00c';
	color:var(--maleficent);
	display:inline-block;
	margin-right:0.3em;
}
.request-change textarea {
	width:100%;
	height:8em;
	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-top:2em;
	box-sizing:border-box;
}
.brief-approved #form.large-form * {
	user-select:none;
}
.brief-approved #form.large-form {
	pointer-events:none;
}







/*
—————————————————
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;
}
.switches input + label:before,
.switches span + label:before,
.toggle-off:before {
	transform:scaleX(-1);
	color:#d2d2d2;
}
.toggle:before,
.switches input:checked + label:before,
.switches-on span + label:before {
	color:var(--maleficent);
	transform:none;	
}
.status-switch {
	text-align:center;
	margin-bottom:2em;
	font-size:0.9375em;
}
.status-switch input + label:before {
	color:var(--barbie);
}
.status-switch input:checked + label:before {
	color:var(--maleficent);
}
.status-switch input + label:after {
	content:'Awaiting Approval';
}
.status-switch input:checked + label:after {
	content:'With Studio';
}




/*
—————————————————
Form Elements
—————————————————
*/
#form {
	padding:1.8em;
	border-radius:0.6em;
	background:rgba(193 196 203 / 17%);
	max-width:35em;
	margin-bottom:1.3em;
}
#form.large-form {
	max-width:100%;
}
#form h2 {
	border:0;
}
#form h3 {
	padding-top:0.7em;
}
#form h3:first-child {
	padding-top:0;
}
#form p, #form .field-wrapper {
	margin-bottom:1.3em;
}
#form p:last-child:not(.floated-fields p), #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;
	border-radius:5px 5px 0 0;
	font-size:0.8666em;
	font-weight:500;
	transition:background-color 150ms linear;
	vertical-align:bottom;
	z-index:1;
	color:#4987c3;
	background:#d5e6f3;
}


#form.briefing-form {
	padding-bottom:2.4em;
}
#form.briefing-form p {
	margin-bottom:1.8em;
}
h3.step-heading {
	margin-bottom:1.8em;
}
h3.step-heading span {
	display:inline-block;
	color:#fff;
	background:var(--barbie);
	padding:0.1em 0.7em;
	border-radius:3em;
}
#form.briefing-form label {
	padding:0.3em 0.9em;
	font-size:0.9333em;
}
#form.briefing-form textarea,
#form.briefing-form .textarea-wrapper:after {
	padding:0.8em 0.9em;
	min-height:3em;
}
#form.briefing-form .upload-folder h2 {
	font-size:1.2em;
}
#form.briefing-form .upload-folder h2 + p {
	font-size:0.866em;
	margin:-1.2em 0 1.6em 0;
}
#form.briefing-form .upload-folder h2:before {
	content:'Upload ';
}


.conditional-field {
	margin-top:1em;
}
.stock-note {
	display:block;
	padding:0.8em;
	font-size:0.9em;
	background:#ffffdd
}


#form .checkboxes label {
	float:none;
	background:none;
	padding:0 0 0 0.5rem;
	position:relative;
	top:-0.1em;
	user-select:none;
	color:inherit;
	font-weight:normal;
}
#form .file-list-checkboxes label {
	background:none;
	color:inherit;
	font-weight:normal:
}
#form .switches label {
	padding-left:0;
	font-weight:normal;
	font-size:0.9375em;
	color:inherit;
	background:none;
}
#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 label.has-tooltip {
	display:block;
	position:relative;
	padding-right:3em !important;
}
#form .tooltip {
	position:absolute;
	top:0; right:0;
	cursor:default;
	width:1.8em;
	text-align:center;
}
#form .tooltip:before {
	content:'\f059';
	font-family:fa-solid;
	color:#339ad4;
}
#form .tooltip-text {
	position:absolute;
	bottom:calc(100% + 0.5em); right:-1.6em;
	max-width:65%;
	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;
}
#form .tooltip:hover + .tooltip-text {
	bottom:calc(100% + 1em);
	opacity:1;
}
#form .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;
}
















#form input.text,
#form textarea,
#form select {
	display:block;
	font-size:1em;
	width:100%;
	border:none;
	border-bottom:1px solid #d2d2d2;
	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;
	xborder-color:#d5e6f3 !important;
	border-bottom-color:#cfcfcf;
	box-shadow:0 0.1em 0 rgba(0,0,0,0.09);
}


#form .textarea-wrapper {
	display:block;
	position:relative;
	min-height:2.75em;
}
#form .textarea-wrapper textarea {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
}
#form textarea {
	resize:vertical;
}
#form .textarea-wrapper:after {
	content:attr(data-content) ' ';
	visibility:hidden;
	white-space:pre-wrap;
	display:block;
	padding:0.5em 0.6em;
	border-bottom:1px solid #fff;
	line-height:1.3;
}
#form optgroup {
	font-weight:bold;
	color:var(--barbie);
}
#form optgroup option {
	font-weight:normal;
	color:black;
}






#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:var(--barbie) !important;
	color:#fff !important;
}
#form .yes-no-error label:first-child {
	color:var(--barbie) !important;
}
#form .error input.text:focus,
#form .error textarea:focus,
#form .error select:focus {
	border-color:var(--barbie) !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:35em;
}
#form.large-form + p.form-buttons,
p.form-buttons-large {
	max-width:100%;
}
.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.8em;
}
.form-section:last-child,
#form .floated-fields:last-child p {
	margin-bottom:0;
}
#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:var(--barbie);
}
#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.days-over {
	color:var(--barbie);
	background:#fbedf1;
}
#form .input-grid input.days-under {
	color:#4db881;
	background:#f1f9f4;
}
#form .input-grid input.days[disabled] {
	background:#e2e2e3;
}
#form .input-grid input.channel-status {
	width:11em;
}
#form .input-grid input.channel-status + select {
	width:calc(100% - 11.4em);
	margin-right:0;
}
#form .input-grid input.highlighted {
	border-left:0.5em solid #e63478;
	font-weight:bold;
}



#form .input-grid p.last-completed-phase {
	height:auto;
}
#form .input-grid p.last-completed-phase:after {
	content:'CURRENT STAGE';
	clear:left;
	display:block;
	background:var(--marge);
	color:#fff;
	text-align:center;
	padding:0.2em;
	line-height:1;
	font-size:0.8em;
	font-weight:500;
	border-radius:2em;
	margin:0 0 1.6em 0;
	position:relative;
	top:0.8em;
}

.date-marker {
	display:inline-block;
	margin-left:2em;
	vertical-align:middle;
	position:relative;
	top:0.2em;
}

.incrementers {
	display:inline-block;
	width:5em;
}
.incrementer {
	display:inline-block;
	width:1.6em;
	height:1.6em;
	line-height:1.6em;
	background:#ccc;
	text-align:center;
	border-radius:0.8em;
	color:#4987c3;
	background:#d5e6f3;
	cursor:pointer;
	position:relative;
	top:0.3em;
	margin-left:0.6em;
	user-select:none;
}
.incrementer + .incrementer {
	margin-left:0.2em;
}
.tick-completed {
	color:var(--maleficent);
	font-weight:500;
}
.tick-completed:before {
	content:'\f058';
	font-family:fa-solid;
	color:var(--maleficent);
	font-size:1em;
	font-weight:normal;
}

.warning-error {
	color:red;
	font-weight:500;
}
.warning-error:before {
	content:'\f06a';
	font-family:fa-solid;
	color:#red;
	font-size:1em;
	font-weight:normal;
}



.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 var(--barbie);
    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;
}


#form a.remove-selected {
	display:inline-block;
	width:1.2em;
	height:1.2em;
	position:relative;
	margin:0.1em 0.2em 0.3em 0;
	border-radius:50%;
	vertical-align:top;
	color:var(--barbie);
	xbackground:var(--barbie);
}
#form a.remove-selected:after {
	content:'\f00d';
	font-family:fa-solid;
	position:absolute;
	top:0; left:0;
	font-size:0.9em;
	width:1.2rem;
	height:1.2rem;
	line-height:1.2rem;
	text-align:center;
}












/*
—————————————————
Alerts
—————————————————
*/
.confirm-message, .error-message, .locked-message, .completed-message, .approved-message, .waiting-message {
	padding:0.5rem 2rem 0.5rem 1rem;
	color:#fff;
	background:var(--maleficent);
	box-sizing:border-box;
	font-weight:500;
	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:-1.8em -1.8em 1.8em -1.8em;
	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:var(--maleficent);
	box-sizing:border-box;
	margin-bottom:-0.1em;
	margin-top:-0.1em;
}
.waiting-message {
	color:var(--marge);
	background:#f0f6fa;
	text-align:center;
}
.waiting-message:before {
	font-family:fa-solid;
	font-weight:normal;
	content:'\f017';
	margin-right:0.3em;
}
.approved-message {
	color:var(--maleficent);
	background:#8cc6962f;
	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';
}

.recaptcha {
	margin-bottom:1.2em;
}
.start-over {
	text-align:center;
	background:#eee;
	padding:1em;
}
.start-over a {
	font-size:0.875em;
	color:#095d9d;
	text-decoration:underline;
}
.project-status-bar {
	padding:0.7em 0.8em;
	background:#fff;
	box-sizing:border-box;
	position:relative;
	z-index:2;
	border-radius:4em;
	margin-bottom:2em;
	vertical-align:top;
	height:4.2em;
	box-shadow:0 0.4em 0.8em rgba(0, 0, 0, 0.1);
}
.project-status-bar .due-date {
	float:right;
	text-align:center;
	cursor:pointer;
	user-select:none;
	margin-right:1em;
}
.project-status-bar .no-date {
	float:right;
	width:2.8rem;
	height:2.8rem;
	border-radius:3em;
	color:#999;
	background:#eee;
	text-align:center;
	line-height:2.8em;
	padding:0;
	cursor:pointer;
	margin-right:0;
}
.project-status-bar .no-date:before {
	content:'\f073';
	font-family:fa-light;
	transform:scale(1.1);
	display:block;
	transition:transform 200ms;
}
.project-status-bar .due-date strong {
	display:block;
	font-weight:500;
	font-size:1.25em;
	line-height:1.4;
}
.project-status-bar .due-date span {
	display:block;
	font-weight:500;
	font-size:0.8em;
	line-height:1;
}

.project-status-bar .due-date-picker {
	display:none;
	position:absolute;
	background:#fff;
	z-index:1;
	box-shadow:0 0 1em #00000033;
	border-radius:0.4em;
	top:5em; right:1em;
	font-size:0.875em;
}
.project-status-bar .due-date-picker div {
	padding:1em;
	max-width:14em;
}
.project-status-bar .due-date-picker div + div {
	border-top:1px solid #ddd;
	padding:0.6em 0 0.8em 0;
}
.project-status-bar .due-date-picker-visible {
	display:block;
}
.project-status-bar .due-date-picker input,
.project-status-bar .due-date-picker select {
	border:0;
	border-radius:0.3em;
	padding:0.2em 0.3em;
	outline:0;
	margin-bottom:0.4em;
	border:1px solid #ccc;
	width:100%;
}
.project-status-bar .due-date-picker .button {
	margin-top:0.6em;
}












.project-status-bar:before {
	display:inline-block;
	font-family:fa-solid;
	font-size:1.1rem;
	margin-right:0.5em;
}
.status-bar-waiting:before {
	content:'\f017';
}
.status-bar-assignees:before {
	content:'\f007';
}
.status-bar-approved:before {
	content:'\f00c';
}
.status-bar-received:before {
	content:'\f4ac';
}

.project-status-bar .button {
	vertical-align:top;
}
.project-status-bar .button-second {
	margin-left:1.2em;
	line-height:calc(2.2em - 4px);
	background:#fff !important;
}
.project-status-bar .button + .button {
	margin-left:0.6em;
}
.project-status-bar .first-name:after {
	content:' ';
}
.project-status-bar .approver-names {
	border-bottom:1px solid #ddd;
	user-select:none;
	cursor:pointer;
}
.project-status-bar .request-info,
.project-status-bar .assignees {
	left:auto;
	width:auto;
	text-align:left;
}
.project-status-bar .request-info .button,
.project-status-bar .has-trigger .button,
.project-status-bar .trigger-menu .button {
	margin-left:0;
}


.status-bar-lightblue .project-status-bar:before,
.status-bar-lightblue .approver-names {
	color:var(--elsa);
}
.status-bar-lightblue .project-status-bar,
.status-bar-lightblue .approver-names {
	border-color:#8fcbe199;
}
.status-bar-lightblue .due-date,
.status-bar-lightblue .button,
.status-bar-lightblue .has-trigger,
.status-bar-lightblue .trigger {
	background:var(--elsa);
}
.status-bar-lightblue .button-second {
	border:2px solid var(--elsa);
	color:var(--elsa);
}



.status-bar-gray .project-status-bar:before,
.status-bar-gray .approver-names {
	color:#cacaca;
}
.status-bar-gray .project-status-bar,
.status-bar-gray .approver-names {
	border-color:#cacaca99;
}
.status-bar-gray .due-date,
.status-bar-gray .button,
.status-bar-gray .has-trigger,
.status-bar-gray .trigger {
	background:#cacaca;
}
.status-bar-gray .button-second {
	border:2px solid #cacaca;
	color:#cacaca;
}




.status-bar-blue .project-status-bar:before,
.status-bar-blue .approver-names {
	color:#006ba5;
}
.status-bar-blue .project-status-bar,
.status-bar-blue .approver-names {
	border-color:#006ba599;
}
.status-bar-blue .due-date,
.status-bar-blue .button,
.status-bar-blue .has-trigger,
.status-bar-blue .trigger {
	background:#006ba5;
}
.status-bar-blue .button-second {
	border:2px solid #006ba5;
	color:#006ba5;
}




.xstatus-bar-green .project-status-bar:before,
.xstatus-bar-green .approver-names {
	color:var(--maleficent);
}
.xstatus-bar-green .project-status-bar,
.xstatus-bar-green .approver-names {
	border-color:#8cc69699;
}
.xstatus-bar-green .due-date,
.xstatus-bar-green .button,
.xstatus-bar-green .has-trigger,
.xstatus-bar-green .trigger {
	background:var(--maleficent);
}
.xstatus-bar-green .button-second {
	border:2px solid var(--maleficent);
	color:var(--maleficent);
}



.status-bar-pink .project-status-bar:before,
.status-bar-pink .approver-names {
	color:#e63478;
}
.status-bar-pink .project-status-bar,
.status-bar-pink .approver-names {
	border-color:#e6347899;
}
.status-bar-pink .due-date,
.status-bar-pink .button,
.status-bar-pink .has-trigger,
.status-bar-pink .trigger {
	background:#e63478;
}
.status-bar-pink .button-second {
	border:2px solid #e63478;
	color:#e63478;
}



.status-bar-orange .project-status-bar:before,
.status-bar-orange .approver-names {
	color:#ff6600;
}
.status-bar-orange .project-status-bar,
.status-bar-orange .approver-names {
	border-color:#ff660099;
}
.status-bar-orange .due-date,
.status-bar-orange .button,
.status-bar-orange .has-trigger,
.status-bar-orange .trigger {
	background:#ff6600;
}
.status-bar-orange .button-second {
	border:2px solid #ff6600;
	color:#ff6600;
}



.status-bar-purple .project-status-bar:before,
.status-bar-purple .approver-names {
	color:#8560ab;
}
.status-bar-purple .project-status-bar,
.status-bar-purple .approver-names {
	border-color:#8560ab99;
}
.status-bar-purple .due-date,
.status-bar-purple .button,
.status-bar-purple .has-trigger,
.status-bar-purple .trigger {
	background:#8560ab;
}
.status-bar-purple .button-second {
	border:2px solid #8560ab;
	color:#8560ab;
}

 
 /*
—————————————————
Assignee Lozenges
—————————————————
*/
.assignee-lozenge-wrapper {
	float:left;
	position:relative;
	margin-right:0.5em;
}
.assignee-lozenge {
	color:#888;
	background:#eee;
	height:2.8em;
	line-height:1em;
	padding:0.3em 2.5em 0.3em 1.3em;
	border-radius:4em;
	cursor:pointer;
	user-select:none;
	border:1px solid transparent;
}
.assignee-lozenge:after {
	position:absolute;
	top:0.9em; right:0.7em;
	font-family:fa-light;
	content:'\f078';
	width:1em;
	line-height:1;
	text-align:center;
	transition:transform linear 200ms;
}
.assignee-lozenge-active .assignee-lozenge:after {
	transform:rotate(180deg);
}

.assignee-lozenge strong {
	display:block;
	font-size:1.1em;
	font-weight:500;
	margin-bottom:0.1em;
}
.assignee-lozenge strong + span {
	font-size:0.8em;
}
.assignee-lozenge img,
.assignee-lozenge .tick {
	position:absolute;
	top:0.6em; left:0.6em;
	width:1.6em;
	height:1.6em;
	border-radius:50%;
}
.assignee-lozenge .tick {
	color:#fff;
	background:#848cc9;
	text-align:center;
	line-height:1.6em;
}
.assignee-lozenge .tick:before {
	content:'\f00c';
	font-family:fa-solid;
}
.assignee-lozenges div.approved {
	color:#848cc9;
	background:#fff;
	padding-left:2.8em;
	border:1px solid #cbcde5;
}
.assignee-lozenges div.assigned {
	color:#55b565;
	background:#f1f7f1;
	padding-left:2.8em;
}
.assignee-lozenges div.pending-approval {
	color:#848cc9;
    background:#edeff7;
	padding-left:2.8em;
}
.assignee-menu {
	display:none;
	position:absolute;
	font-size:0.866em;
	z-index:2;
	top:3.7em; left:0; right:auto;
	min-width:21em;
	border:1px solid #e2e2e2;
	box-shadow:0 0.1em 0.3em rgba(0,0,0,0.2);
	background:#fff;
	border-radius:0.5em;
	user-select:none;
}
.assignee-lozenge-active .assignee-menu {
	display:block;
}


.add-assignee-lozenge {
	float:left;
	width:2.8rem;
	height:2.8rem;
	border-radius:3em;
	color:#999;
	background:#eee;
	text-align:center;
	line-height:2.8em;
	padding:0;
	cursor:pointer;
}
.add-assignee-lozenge span {
	display:none;
	font-weight:500;
	font-size:1.1em;
}
.add-assignee-lozenge:before {
	content:'\2b';
	font-family:fa-light;
	transform:scale(1.1);
	display:block;
	transition:transform 200ms;
}
.assignee-lozenge-active .add-assignee-lozenge:before {
	transform:scale(1.1) rotate(45deg);
}
.add-assignee-text .add-assignee-lozenge {
	width:auto;
	padding:0 1em;
}
.add-assignee-text .add-assignee-lozenge span {
	display:inline;
}
.add-assignee-text .add-assignee-lozenge:before {
	float:left;
	margin-right:0.4em;
}


.start-stop-timer {
	float:right;
	width:2.8rem;
	height:2.8rem;
	border-radius:3em;
	color:#fff;
	background:var(--barbie);
	text-align:center;
	line-height:2.8em;
	padding:0;
	cursor:pointer;
	margin-left:0.8em;
}
.start-stop-timer-mismatch {
	background:#f60;
}
.start-stop-timer:before {
	content:'\f04b';
	font-family:fa-solid;
	transform:scale(1.1);
	display:block;
	transition:transform 200ms;
}
.start-stop-timer-running {
	background:#4fae5f;
}
.start-stop-timer-running:before {
	content:'\f04c';
}


.assignee-selector {
	padding:0.8em;
}
.assignee-selector p,
.approval-request ul {
	background:#f5f5f6;
	border-radius:0.5em;
	padding:0.8em;
	line-height:1.6em;
	position:relative;
}
.assignee-selector p label {
	display:inline-block;
	border-radius:0.3em 0.3em 0 0;
	padding:0 0.6em;
	font-weight:500;
	color:#4987c3;
	background:#d5e6f3;
}
.assignee-selector p select,
.approval-request p select {
	display:block;
	outline:0;
	border:0;
	border-radius:0 0.3em 0.3em 0.3em;
	padding:0.4em 0.4em;
	width:100%;
	border-bottom:1px solid #d2d2d2;
	box-shadow:0 0.1em 0.2em rgba(0, 0, 0, 0.04);
}
.assignee-selector a.remove {
	cursor:pointer;
	position:absolute;
	top:0.4em; right:0.7em;
	width:1em;
	height:1.6em;
	opacity:0.7;
}
.assignee-selector a.remove:before {
	display:block;
	text-align:center;
	content:'\f00d';
	font-family:fa-light;
}

.approval-request {
	border-top:1px solid #ddd;
	padding:0.8em;
}
.approval-request ul {
	margin:-0.3em 0 0.7em 0;
}
.approval-request input {
	margin-right:0.4em;
	position:relative;
	top:0.15em;
}
.approval-request li select {
	float:right;
	min-width:5.5em;
	outline:0;
	border:0;
	border-radius:0.3em;
    border-bottom:1px solid #d2d2d2;
}
.approval-request label .video-icon {
	display:inline-block;
}
.request-info .video-file a:after,
.approval-request label .video-icon:after {
	content:'\f03d';
	font-family:fa-solid;
	display:inline-block;
	width:1.2em;
	margin-left:0.5em;
	font-size:0.8em;
	color:var(--barbie);
}
.deliverable-selector-toggle {
	display:inline-block;
	color:#888;
	background:#f2f2f3;
	padding:0.2em 2.1em 0.2em 0.7em;
	border-radius:2em;
	cursor:pointer;
	margin-bottom:1em;
	position:relative;
}
.deliverable-selector-toggle:hover {
	background:#eee;
}
.deliverable-selector-toggle:after {
	position:absolute;
	top:0.4em; right:0.7em;
	font-family:fa-light;
	content:'\f078';
	width:1em;
	line-height:1;
	text-align:center;
	transition:transform linear 200ms;
}
.deliverable-selector-active .deliverable-selector-toggle:after {
	transform:rotate(180deg);
}
.deliverable-selector ul {
	display:none;
}
.deliverable-selector-active ul {
	display:block;
}

/*
—————————————————
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 !important;
	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;
}


/*
—————————————————
Round Intro
—————————————————
*/
.round-intro {
	max-width:800px;
	margin:0 auto 3.5em auto;
}
.round-intro .avatar-wrapper {
	float:left;
	margin-top:0.6em;
	cursor:pointer;
}
.designer-view .round-intro .avatar-wrapper {
	cursor:default;
	pointer-events:none;
}
.round-intro .text {
	float:right;
	background:#f2f2f2;
	padding:1em 1.2em;
	border-radius:0.5em;
	text-align:left;
	position:relative;
	width:calc(100% - 4.2em);
}
.round-intro .text:empty:after {
	content:attr(placeholder);
	pointer-events:none;
	color:#aaa;
}
.round-intro p {
	margin-bottom:0.5em;
	font-size:0.9375em;
}
.round-intro p:last-child {
	margin-bottom:0;
}
.round-intro .avatar {
	color:#fff;
}
.round-intro .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:-0.9em;
}

.new-round-intro .text {
	background:#fff;
	outline:0;
	border-bottom:3px solid #dadbdd;
}
.new-round-intro .text:before {
	border-color:transparent #fff transparent transparent;
}

/*
—————————————————
Rationale
—————————————————
*/
.rationale-list {
	background:#fff;
	padding:0.8em 1.2em;
	border-radius:0.5em;
	text-align:left;
	position:relative;
	border-bottom:3px solid #dadbdd;
	max-width:800px;
	margin:0 auto 3.5em auto;
}
.rationale-list {
	line-height:1.3;
}
.rationale-list .top-level-task {
	background:#fff;
	border-top:1px solid #ddd;
	padding:0.8em 0.5em 0.8em 2.8em;
	position:relative;
	transition:150ms box-shadow;
	min-height:2.8em;
}
.rationale-list .top-level-task:first-child {
	border-top:0;
}
.rationale-list .task-metadata-resolved.rationale-rejected + .task-content {
	color:#ccc;
}
.rationale-list .task-heading {
	padding:2em 0 0.3em 0;
	background:#fff;
	border-top:0;
	border-bottom:3px solid #ddd;
}
.rationale-list .task-heading .task-content {
	font-size:1.2em;
	line-height:1.3rem;
	font-weight:500;
}
.rationale-list .task-drag-handle {
	display:none;
	position:absolute;
	top:0; left:0;
	width:1.3em;
	height:100%;
	background:#ddd;
	cursor:move;
	border-radius:0.6em 0 0 0.6em;
}


.rationale-list .task-drag-handle:after {
	content:'\f7a5';
	font-family:fa-solid;
	width:1.3em;
	height:1em;
	line-height:1em;
	text-align:center;
	color:#aaa;
	position:absolute;
	top:calc(50% - 0.5em);
	left:0;
}

.rationale-list .new-rationale-wrapper {
	display:none;
}
.rationale-list .new-rationale-wrapper:first-child {
	margin-top:0;
}

.rationale-list .task-metadata {
	position:absolute;
	top:0.45em; left:0;
}
.rationale-list .roundel {
	display:block;
	width:2em;
	height:2em;
	line-height:2em;
	border-radius:50%;
	cursor:pointer;
	overflow:hidden;
	text-align:center;
}
.rationale-list .roundel span {
	display:block;
	width:2.5em;
	height:2.5em;
	line-height:2.5em;
	color:#fff;
	font-weight:500;
	font-size:0.8em;
	background:linear-gradient(to bottom right, var(--elsa), var(--ursula));
}
.rationale-list .task-metadata-resolved .roundel {
	background:var(--maleficent);
}
.rationale-list .task-metadata-resolved .roundel:after {
	content: '\f00c';
	font-family:fa-solid;
	color:#fff;
}
.rationale-list .task-metadata-resolved.rationale-rejected .roundel {
	background:#ddd;
}
.rationale-list .task-metadata-resolved.rationale-rejected .roundel:after {
	content: '\f00d';
}


.rationale-list .roundel img {
	display:block;
	width:100%;
	height:100%;
	transition:filter 150ms;
}
.rationale-list .roundel img:hover {
	filter:brightness(90%);
}

.rationale-list .task-metadata-resolved .roundel img,
.rationale-list .task-metadata-resolved .roundel span {
	display:none;
}

.rationale-list .task-actions {
	visibility:hidden;
	opacity:0;
	position:absolute;
	top:0; left:3em;
	z-index:1;
	width:16em;
	border:1px solid #e2e2e2;
	box-shadow:0 0.1em 0.3em rgba(0,0,0,0.2);
	background:#fff;
	border-radius:0.5em;
	padding:0.5em 0;
	user-select:none;
	transition:all 100ms;
}
.rationale-list .actions-visible .task-actions {
	visibility:visible;
	opacity:1;
}
.task-actions li {
	padding:0.2em 1em;
	cursor:pointer;
}
.task-actions li:hover {
	background:rgba(193 196 210 / 17%);
}
.task-actions li:active {
	background:rgba(193 196 210 / 23%);
}
.task-actions li.icon:before {
	content:'\f013';
	display:inline-block;
	font-family:fa-light;
	width:1em;
	text-align:center;
	margin-right:0.8em;
}
.task-actions li.button-accept:before    { content:'\f00c' }
.task-actions li.button-reject:before    { content:'\f00d' }
.task-actions li.button-clear:before     { content:' ' }
.task-actions li.button-delete:before    { content:'\f2ed' }

.task-actions li.section-top {
	padding-top:0.4em;
	margin-top:0.4em;
	border-top:1px solid #ddd;
}




.rationale-list .task-actions .log-text {
	font-size:0.8em;
	color:#888;
	width:100%;
	padding:0.7em 1em 0.4em 1em;
	margin-top:0.7em;
	border-top:1px solid #ddd;
}
.rationale-list .task-actions .log-text p {
	margin:0;
}
.rationale-list p.resolved-by,
.rationale-list .task-metadata-resolved span.created-by-date {
	display:none;
}
.rationale-list .task-metadata-resolved p.resolved-by {
	display:block;
}


.rationale-list .task-content {
	padding:0.4em 0.5em;
	margin:-0.4em -0.5em;
	border-radius:0.3em;
	outline:0;
	word-break:break-word;
}
.rationale-list .task-heading .task-content {
	margin-bottom:-0.4em;
}
.rationale-list .task-heading + .top-level-task {
	padding-top:1em;
	border-top:0;
}
.rationale-list .task-heading + .top-level-task .task-metadata {
	top:0.65em;
}
.rationale-list .task-content:focus {
	background:#fffddd;
}
.rationale-list .replies {
	margin:0.8em -0.5em -1.2em 0;
}
.rationale-list .reply {
	border-top:1px solid #ddd;
	padding:0.8em 0.5em 0 2.8em;
	margin-bottom:0.8em;
	position:relative;
}
.rationale-list .reply .roundel {
	top:0.8em; left:0;
}
.rationale-list .task-images {
	display:none;
	margin-top:0.6em;
}
.rationale-list .task-images-visible {
	display:block;
}
.rationale-list .task-images li {
	display:inline-block;
	margin:0.3em 0.6em 0 0;
	position:relative;
}
.rationale-list .task-images a {
	display:block;
	overflow:hidden;
	border-radius:0.3em;
	background:#000;
}
.rationale-list .task-images img {
	display:block;
	width:4em;
	height:4em;
	object-fit:cover;
}
.rationale-list .task-images a:hover img {
	opacity:0.97;
}
.rationale-list .task-images .delete {
	position:absolute;
	top:-0.3em; right:-0.3em;
	width:1.2em;
	height:1.2em;
	border-radius:50%;
	cursor:pointer;
	background:#fff;
	box-shadow:0 0 0.4em rgba(0,0,0,0.15);
	color:#999;
}
.rationale-list .task-images .delete:after {
	display:block;
	font-family:fa-light;
	content:'\f00d';
	font-size:0.8em;
	line-height:1.5;
	text-align:center;
}



.new-round-intro + .rationale-list-wrapper {
	display:none;
	margin-top:-2em;
}
.new-round-intro + .rationale-list-wrapper .add-rationale {
	display:none;
}













/*
—————————————————
Deliverable
—————————————————
*/

#artwork-sidebar {
	grid-column:1;
	grid-row:1;
	height:100vh;
	background:#29292f;
	padding:1.6em;
	overflow-y:auto;
}
#artwork-sidebar p {
	text-align:center;
	line-height:1.2;
	margin-top:2em;
	color:#fff;
}
#artwork-sidebar p strong {
	display:block;
}

#artwork-sidebar .button-back {
	background:rgba(255,255,255,0.1);
	color:rgba(255,255,255,0.6);
	display:block;
	width:auto;
}
#artwork-sidebar .button-back:hover {
	color:rgba(255,255,255,0.8);
}
#artwork-sidebar .button-back:before {
	content:'\f053';
	font-family:fa-solid;
	font-weight:normal;
	font-size:0.8em;
	margin-right:0.5em;
}
.submit-round {
	padding:1.6em;
	margin:2em -1.6em 2em -1.6em;
	color:#fff;
	background:rgba(255,255,255,0.1);
}
.submit-round-ready {
	background:var(--barbie);
}
#artwork-sidebar .submit-round p {
	text-align:center;
	margin-top:0;
}

.board-switcher {
	position:relative;
}
#artwork-sidebar .board-switcher + p {
	margin-top:1em;
}
.board-switcher ul {
	position:absolute;
	top:calc(100% + 0.3em); left:0;
	padding:0.5em 0;
	background:#fff;
	border-radius: 0.3em;
	width:100%;
	z-index:1;
	display:none;
}
.board-switcher ul a {
	display:block;
	width:100%;
	padding:0.5em 1em;
	text-decoration:none;
}
.board-switcher ul a:hover {
	background:#f2f2f2;
}
.board-switcher ul a:active {
	background:#eee;
}
.board-switcher-trigger {
	display:block;
	text-align:center;
	cursor:pointer;
	text-decoration:none;
	padding:0.4em;
	transition:background-color 150ms;
	display:block;
	font-weight:500;
	background:rgba(255,255,255,0.1);
	color:rgba(255,255,255,0.6);
	border-radius:1em;
}
.board-switcher-trigger:after {
	content:'\f078';
	font-family:fa-solid;
	font-size:0.8em;
	font-weight:normal;
	margin-left:0.4em;
}
.board-switcher-trigger:hover {
	color:rgba(255,255,255,0.8);
}
.board-switcher-trigger-active:after  {
	content:'\f077';
}
.board-switcher-trigger-active + ul {
	display:block;
}


#artwork-grid {
	display:grid;
	width:100%;
	height:100vh;
	grid-template-columns:16em calc(70% - 8em) calc(30% - 8em);
}
#artwork-grid.info-panel-expanded {
	grid-template-columns:16em calc(60% - 8em) calc(40% - 8em);
}


#artwork-sidebar #thumbs {
	width:calc(100% + 1em);
	margin-right:-1em;
	margin-top:1.5em;
}
#artwork-sidebar #thumbs li {
	float:left;
	width:calc(50% - 1em);
	margin-right:1em;
	margin-bottom:1em;
}
#artwork-sidebar #thumbs li a {
	display:block;
	position:relative;
}
#artwork-sidebar #thumbs li img {
	display:block;
	width:100%;
	border-radius:0.3em;
	filter:grayscale(1);
	opacity:0.3;
	transition:all 300ms;
}
#artwork-sidebar #thumbs li:nth-child(odd) {
	clear:left;
}
#artwork-sidebar #thumbs li:hover img {
	opacity:0.8;
	filter:none;
}
#artwork-sidebar #thumbs li.active img {
	opacity:1;
	filter:none;
}
#artwork-sidebar #thumbs li.approved a:after {
	content:'\f00c';
	font-family:fa-solid;
	color:#fff;
	background:var(--maleficent);
	width:1.8em;
	height:1.8em;
	line-height:1.8em;
	text-align:center;
	position:absolute;
	border-radius:50%;
	top:-0.5em;
	right:-0.5em;
	font-size:0.8em;
}






#artwork-sidebar #thumbs.square-thumbs a {
	width:0;
	height:0;
	padding:50%;
	background:rgba(255,255,255,0.1);
	border-radius:0.3em;
}
#artwork-sidebar #thumbs.square-thumbs .image {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	padding:0.3em;
	display:flex;
	justify-content:center;
	align-items:center;
	transition:background-color 150ms;
}
#artwork-sidebar #thumbs.square-thumbs img,
#artwork-sidebar #thumbs.square-thumbs video {
	border-radius:3px;
	width:auto;
	max-width:100%;
	max-height:100%;
}











#artwork-panel {
	grid-column:2;
	grid-row:1;
	position:relative;
	height:100vh;
	background:rgba(193 196 203 / 17%);
	padding:4em 12em;
	transition:background-color 150ms;
}
#compare {
	position:absolute;
	background:#29292fdd;
	top:0; left:0;
	width:100%;
	height:100%;
	display:none;
}
#close-compare {
	position:absolute;
	top:1em; right:1em;
	cursor:pointer;
	width:1.5em;
	line-height:1.2em;
	text-align:center;
	font-size:1.6em;
	color:#fff;
	opacity:0.7;
}
#close-compare:hover {
	opacity:1;
}
#close-compare:after {
	content:'\f00d';
	font-family:fa-light;
}
#compare p {
	height:4em;
	text-align:center;
	margin:auto;
	color:#fff;
}
#compare p strong {
	display:block;
	font-weight:500;
	xline-height:2;
	border-radius:1em;
	padding:0 1em;
	font-size:1.2em;
}
#compare p span {
	display:block;
}

#compare img.single,
#compare video {
	display:block;
	max-width:100%;
	max-height:calc(100vh - 10em);
	margin:auto;
	box-shadow:0 0 0.7em rgba(0,0,0,0.08);
	border-radius:1em;
	outline:0;
}
#compare .previous,
#compare .current {
	position:absolute;
	top:0; left:3em;
	width:calc(50% - 3em);
	height:100vh;
	padding:2em 2em 4em 2em;
	display:flex;
	align-items:center;
}
#compare .current {
	left:auto; right:3em;
}
#compare .compare-artwork {
	width:100%;
	position:relative;
}
.compare-video-controls {
	position:absolute;
	top:-1.2em; left:calc(100% - 1.6em);
	width:7.2em;
	height:4em;
	z-index:1;
}
.compare-video-controls span {
	float:left;
	width:3.2rem;
	text-align:center;
	color:rgba(255,255,255,0.7);
	background:red;
	font-size:1.2em;
	line-height:3.2rem;
	border-radius:50%;
	background:rgba(0,0,0,0.3);
	cursor:pointer;
}
.compare-video-controls span:hover {
	color:#fff;
}
.compare-video-controls span:last-child {
	float:right;
}
.compare-video-controls span:after {
	font-family:fa-solid;
}
.compare-video-controls #compare-play:after {
	content:'\f04b';
}
.compare-video-controls #compare-play.pause:after {
	content:'\f04c';
}
.compare-video-controls #compare-mute:after {
	content:'\f6a9';
}
.compare-video-controls #compare-mute.unmuted:after {
	content:'\f028';
}

#info-panel {
	grid-column:3;
	grid-row:1;
	position:relative;
	height:100vh;
	padding-left:0.5em;
	xoverflow-y:auto;
}



#artwork-wrapper {
	width:100%;
	height:100%;
	max-width:100%;
	max-height:100%;
	display:flex;
	align-items:center;
}
#artwork-panel .status + #artwork-wrapper {
	max-height:calc(100% - 4.1em);
}
#artwork-wrapper img.single {
	cursor:pointer;
}
#artwork-wrapper img.single,
#artwork-wrapper video {
	display:block;
	max-width:100%;
	max-height:100%;
	margin:auto;
	box-shadow:0 0 0.7em rgba(0,0,0,0.08);
	border-radius:1em;
	outline:0;
}









#artwork-nav a {
	position:absolute;
	top:calc(50% - 2em);
	width:4em;
	height:4em;
	color:#d0d0d0;
	text-decoration:none;
}
#artwork-nav a:hover {
	color:#bbb;
}
#artwork-nav a:active {
	color:#aaa;
}
#artwork-nav a span {
	display:none;
}
#artwork-nav a:before {
	display:block;
	width:100%;
	text-align:center;
	font-size:4em;
	font-family:fa-light;
	line-height:4rem;
	transition:color 150ms;
}
#artwork-nav a.arrow-prev {
	left:5em;
}
#artwork-nav a.arrow-prev:before {
	content:'\f053';
	content:'\f0a8';
}
#artwork-nav a.arrow-next {
	right:5em;
}
#artwork-nav a.arrow-next:before {
	content:'\f0a9';
}













#info-header {
	padding:1.5em 4.5em 1.5em 1.5em;
	border-bottom:1px solid #ddd;
	position:relative;
}
#info-panel-variable {
	overflow-y:auto;
	height:calc(100vh - 3.5em);
}
#info-header h1 {
	font-size:1.4em;
	font-weight:500;
}
#info-header .capped {
	height:5.6em;
	overflow:hidden;
	position:relative;
}
#info-header .capped:after {
	content:'';
	position:absolute;
	bottom:0; left:0;
	width:100%;
	height:100%;
	background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}
#info-header .capped-visible {
	height:auto;
}
#info-header .capped-visible:after {
	display:none;
}
#info-header .button {
	display:none;
}
#info-header #description.capped + .button {
	display:inline-block;
}
#info-header .button-expand:before {
	content:'Read more';
}
#info-header .capped-visible + .button-expand:before {
	content:'Read less';
}
.button-expand {
	font-size:0.8333em;
	margin-top:0.8em;
}
.resize-info-panel {
	position:absolute;
	top:1em; right:1em;
	cursor:pointer;
	width:2.4em;
	height:2.4em;
	text-align:center;
	line-height:2.4em;
	border-radius:50%;
}
.resize-info-panel:after {
	font-family:fa-light;
	font-size:1.4rem;
	content:'\f34b';
}
.info-panel-expanded .resize-info-panel:after {
	content:'\f34c';
}


#info-panel h3 {
	font-size:1.1em;
	margin-bottom:0.7em;
}
#info-panel h3:before {
	font-family:fa-light;
	content:'\f4a6';
	display:inline-block;
	margin-right:0.6em;
	position:relative;
	top:0.15em;
}




#comments-panel {
	position:relative;
	padding-bottom:5em;
}




#actions {
	text-align:center;
	font-size:1.05em;
}
#actions .button {
	width:8em;
	margin-top:1.8em;
	margin-bottom:0.7em;
}

#comments-panel {
	padding:1.5em;
}

#info-drag-handle {
	position:absolute;
	top:0; right:-0.5em;
	width:0.5em;
	height:100%;
	background:#eee;
	cursor:ew-resize;
}
#info-drag-handle:hover {
	background:#ddd;
}




.add-comment {
	margin-bottom:2em;
	min-height:2.8em;
	position:relative;
}
.add-comment textarea {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	border:1px solid #ddd;
	background:#fbfbfb;
	border-radius:1.1em;
	padding:0.75em 0.75em 0.75em 3.2em;
	box-sizing:border-box;
	margin-bottom:0.4em;
	outline:0;
	resize:none;
	line-height:1.3;
}
.add-comment:after {
	content:attr(data-content) ' ';
	visibility:hidden;
	white-space:pre-wrap;
	display:block;
	padding:0.75em 0.75em 0.75em 3em;
	border:1px solid #fff;
	line-height:1.3;
}
.add-comment textarea:focus {
	border-color:#ccc;
	background:#fff;
	padding-bottom:4em;
}
.add-comment-focused:after {
	padding-bottom:4em;
}
.add-comment label {
	position:static;
	font-weight:normal;
	font-size:0.9em;
	margin-left:0.2em;
	pointer-events:auto;
	transition:background 200ms, border 200ms;
}
.add-comment .button {
	position:absolute;
	bottom:0.5em; right:0.5em;
	z-index:2;
	font-size:0.8666em;
	display:none;
}
.add-comment-focused .button {
	display:block;
}
.add-comment .button-upload {
	right:auto; left:0.5em;
}
.add-comment .button-upload:after {
	xcontent:'\f0c6';
	font-family:fa-light;
	font-family:fa-solid;
}


#info-panel .avatar {
	position:absolute;
	top:calc(0.3em + 1px); left:calc(0.3em + 1px);
	width:2.2em;
	height:2.2em;
	line-height:2.2em;
}
#info-panel .avatar span {
	font-size:0.9em;
	line-height:2.2rem;
}


/*
—————————————————
Context Menu
—————————————————
*/
.context-menu {
	position:absolute;
	xz-index:1;
	top:0.3em; right:0.4em;
}
.context-menu-dots {
	display:inline-block;
	width:1.2em;
	height:1.2em;
	text-align:center;
	border-radius:50%;
	line-height:1.2em;
	cursor:pointer;
	transition:200ms;
}
.context-menu-dots:hover,
.context-menu-active .context-menu-dots {
	background:#f2f2f2;
}
.context-menu-dots:before {
	content:'\f142';
	font-family:fa-light;
}
.context-menu-actions {
	display:none;
	position:absolute;
	top:1.7em; right:-4em;
	max-width:20em;
	color:#333;
	background:#fff;
	box-shadow:0 0 1.2em rgba(0,0,0,0.15);
	border-radius:6px;
	padding:0.4em 0;
	font-size:0.875em;
	z-index:1;
}
.context-menu-actions a {
	display:block;
	cursor:pointer;
	white-space:nowrap;
	user-select:none;
	padding:0.2em 0.8em;
	text-decoration:none;
}
.context-menu-actions a:hover {
	color:var(--barbie);
}
.context-menu-active .context-menu-actions {
	display:block;
}
 .context-menu li.section-top {
	padding-top:0.4em;
	margin-top:0.4em;
	border-top:1px solid #ddd;
}
.context-menu a.checkbox {
	padding-top:0.15em;
	padding-bottom:0.15em;
	white-space:nowrap;
}
.context-menu a.checkbox:before {
	content:'\f0c8';
	display:inline-block;
	font-family:fa-light;
	width:1.4em;
}
.context-menu a.checked:before {
	content:'\f14a';
	font-family:fa-solid;
	color:var(--marge);
}



/*
—————————————————
Comments
—————————————————
*/
.comments h4 {
	text-align:center;
	position:relative;
	height:1.6em;
	margin:1.7em 0 1.2em 0;
}
.comments h4:before {
	content:'';
	border-top:1px solid #ddd;
	position:absolute;
	top:0.9em; left:0;
	width:100%;
}
.comments h4 span {
	display:inline-block;
	line-height:1.6em;
	border:1px solid #d7d7d7;
	border-radius:1em;
	padding:0 0.8em;
	background:#fff;
	position:relative;
	z-index:1;
}
.comments li {
	min-height:3em;
	position:relative;
	margin-bottom:1em;
}
.comments li ul {
	margin-top:1em;
}
.comments li ul li {
	padding-left:2.6em;
}

#info-panel .comments .avatar {
	position:static;
	float:left;
	font-size:0.65rem;
	margin-right:0.6em;
}
.comment-text {
	background:#f3f4f4;
	padding:0.6em 0.8em;
	border-radius:1em;
}
.comment-text p {
	margin-bottom:0.6em;
	line-height:1.3;
}
.comment-text p:last-child {
	margin-bottom:0;
}

.comments li.approval .comment-text p:first-child:before {
	font-family:fa-solid;
	content:'\f00c';
	margin-right:0.3em;
	font-size:1.3em;
	line-height:1;
	color:var(--maleficent);
}
.comments li.project-lead.approval .comment-text p:first-child:before,
.comments li.studio.approval .comment-text p:first-child:before,
.comments li.studio-contact.approval .comment-text p:first-child:before {
	color:#fff;
}
.comments li.project-lead.approval .comment-text:not(.comments li li .comment-text),
.comments li.studio.approval .comment-text:not(.comments li li .comment-text),
.comments li.studio-contact.approval .comment-text:not(.comments li li .comment-text) {
	color:#fff;
	background:var(--maleficent);
}
.comments li.reply-comment .comment-text p:first-child:before {
	display:none !important;
}


.comments .userdata {
	margin-bottom:0.15em;
	padding:0 0.8em;
}
.comments .userdata span.timestamp {
	font-size:0.875em;
	color:#aaa;
}

.comments .userdata strong:after {
	display:inline-block;
	margin:0 0.6em;
	color:#695390;
	font-weight:500;
	text-transform:uppercase;
	line-height:1;
	background:#6953901c;
	font-size:0.65em;
	padding:0.35em 0.75em;
	border-radius:0.85em;
	position:relative;
	top:-0.15em;
}
.comments li.project-lead .userdata strong:after {
	content:'Project Lead';
}
.comments li.studio .userdata strong:after {
	content:'Studio';
	color:var(--barbie);
	background:var(--barbie)1c;
}
.comments li.studio-contact .userdata strong:after {
	content:'Studio Contact';
	color:var(--barbie);
	background:var(--barbie)1c;
}


.comment-context-menu {
	position:relative;
	z-index:1;
}

.comments .menu-dots {
	display:inline-block;
	background:#f2f2f2;
	width:1.2em;
	height:1.2em;
	text-align:center;
	border-radius:50%;
	line-height:1.2em;
	cursor:pointer;
	opacity:0;
	transition:200ms;
}
.comments .comment:hover .menu-dots,
.comments .menu-dots-active {
	opacity:1;
}
.comments .menu-dots:before {
	content:'\f141';
	font-family:fa-light;
}
.comments .menu-actions {
	display:none;
	position:absolute;
	top:2em; right:-4em;
	max-width:20em;
	color:#333;
	background:#fff;
	box-shadow:0 0 1.2em rgba(0,0,0,0.15);
	border-radius:6px;
	padding:0.4em 0;
	font-size:0.875em;
}
.comments .menu-actions span {
	display:block;
	cursor:pointer;
	white-space:nowrap;
	user-select:none;
	padding:0.2em 0.8em;
}
.comments .menu-actions span:hover {
	color:var(--barbie);
}
.comments .menu-dots-active + .menu-actions {
	display:block;
}














.comments .metadata {
	color:#aaa;
	padding:0 0.8em;
	margin-top:-0.2em;
}
.comments .metadata div {
	display:inline-block;
}
.comments .metadata .action {
	display:inline-block;
	font-size:0.8125em;
	margin-right:0.9em;
	user-select:none;
}
.comments .like,
.comments .reply {
	cursor:pointer;
}
.comments .liked,
.comments .like:hover,
.comments .reply:hover {
	color:var(--barbie);
}
.comments .reply-wrapper,
.comments .edit-wrapper {
	position:relative;
	display:none;
	margin:0.4em -0.8em;
}
.comments .edit-wrapper {
	margin:0.4em 0 1.5em 0;
}
.comments .reply-wrapper-active {
	display:block;
}
.comments .reply-active {
	pointer-events:none;
	color:var(--barbie);
}
.comments .reply-wrapper .button,
.comments .edit-wrapper .button {
	position:absolute;
	bottom:0.5em;
	right:0.5em;
	margin-right:0;
	z-index:2;
	font-size:0.8666em;
}
.comments .edit-wrapper .button-cancel {
	right:5em;
}
.comments .reply-wrapper textarea,
.comments .edit-wrapper textarea {
	display:block;
	width:100%;
	height:100%;
	border:1px solid #ddd;
	background:#fbfbfb;
	border-radius:1em;
	padding:0.75em 0.75em 3em 0.75em;
	box-sizing:border-box;
	outline:0;
	resize:none;
	line-height:1.3;
	position:absolute;
	top:0; left:0;
	overflow:hidden;
}
.comments .reply-wrapper textarea:focus,
.comments .edit-wrapper textarea:focus {
	border-color:#ccc;
}
.comments  .reply-wrapper:after,
.comments  .edit-wrapper:after {
	content:attr(data-content) ' ';
	visibility:hidden;
	white-space:pre-wrap;
	display:block;
	padding:0.75em 0.75em 3em 0.75em;
	border:1px solid #fff;
	line-height:1.3;
}

.comments li.edit-mode .metadata,
.comments li.edit-mode .comment-text {
	display:none;
}
.comments li.edit-mode .edit-wrapper {
	display:block;
}
.comments li.edit-mode.hidden .comment-hidden {
	display:none;
}
.comments li.edit-mode.hidden .comment-body {
	display:block;
}


.comments .likes {
	color:#000;
	margin-left:0.4em;
}
.comments .likes:before {
	content:'\f164';
	font-family:fa-solid;
	color:var(--barbie);
	margin-right:0.2em;
}
.comments .likes-wrapper {
	float:right;
	margin-top:-0.3em;
}
.comments .likes-box {
	position:relative;
	background:#fff;
	border-radius:1em;
	padding:0 0.2em 0.1em 0.2em;
	box-shadow:0 0.15em 0.3em rgba(0,0,0,0.1);
}
.comments .likers {
	position:absolute;
	top:2.5em; right:0;
	color:#fff;
	background:linear-gradient(to bottom, #444, #333);
	box-shadow:0 0 1.2em rgba(0,0,0,0.15);
	padding:0.8em 1.1em;
	border-radius:6px;
	z-index:2;
	pointer-events:none;
	opacity:0;
	transition:200ms;
}
.comments .likes-wrapper:hover .likers {
	top:2em;
	opacity:1;
}
.comments .likers span {
	display:block;
	white-space:nowrap;
}
.comments-locked {
	margin:1em auto 0 auto;
	background:#f2f2f2;
	border-radius:0.5em;
	padding:0.6em 1em 0.7em 1em;
	color:#777;
	position:relative;
	text-align:center;
}
.comments-locked:before {
	font-family:fa-solid;
	content:'\f023';
	font-size:1.2em;
	margin-right:0.7em;
}

/*
—————————————————
Hidden comments
—————————————————
*/
.comment-hidden {
	display:none;
	background:#f3f4f4;
	padding:0.7em;
	border-radius:1em;
	line-height:1.3;
	margin-bottom:2.2em;
	position:relative;
}
.comment-hidden-status {
	margin:0;
	font-style:italic;
}
.comment-hidden p {
	color:#888;
}
.hidden .comment-body,
.hidden ul,
.hidden .reply {
	display:none;
}
.hidden .comment-hidden {
	display:block;
}
.view-hidden {
	position:absolute;
	top:0.9em; right:1.2em;
	cursor:pointer;
	font-size:0.8125em;
	color:#888;
	user-select:none;
}
.hidden-comment-text {
	display:none;
	background:#fff;
	padding:0.6em 0.8em;
	box-shadow:0 0 0.5em rgba(0,0,0,0.1);
	border-radius:0.6em;
	z-index:2;
	margin-top:0.8em;
}
.view-hidden-active + .hidden-comment-text{
	display:block;
}
		

/*
.has-replies .comment-body {
	position:relative;
}
.has-replies .comment-body:after {
	content:'';
	position:absolute;
	top:0.1em; left:-2em;
	width:0.12rem;
	height:calc(100% + 1.5em);
	background:#ddd;
}
.reply-comment .comment-body:after {
	left:-5em;
	top:-2.2em;
	height:calc(100% + 3.8em);
}
.last-reply .comment-body:after {
	display:none;
}
.reply-comment:before {
	content:'';
	position:absolute;
	top:0; left:-2em;
	width:1.6em;
	height:1em;
	border-radius:0 0 0 0.8em;
	border-bottom:0.12rem solid #ddd;
	border-left:0.12rem solid #ddd;
}
*/


/*
—————————————————
Activity
—————————————————
*/
#activity {
	height:3.5em;
	padding:0.8em 1.5em;
	background:#fafafa;
	overflow:hidden;
	position:absolute;
	bottom:0; left:0.5em;
	width:calc(100% - 0.5em);
	border-top:1px solid #ddd;
	text-decoration:none;
}
#activity h3:before {
	content:'\f06e';
}

#collaborators {
	font-size:0.9333em;
	max-width:900px;
	margin:0;
}
#collaborators th {
	background:#f2f2f2;
	padding:0.3em 0.7em;
}
#collaborators td {
	border-top:1px solid #ddd;
	padding:0.3em 0.7em;
	color:#bbb;
	padding-right:3em;
	white-space:nowrap;
}
#collaborators tr.viewed td {
	color:#333;
}


/*
—————————————————
Uploads
—————————————————
*/
.uploaded-files ul {
	background:#fff;
	border-radius:6px;
	padding:0.6em 0;
	margin:1em 0;
	width:100%;
	border:2px 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;
	color:inherit;
	text-decoration:none;
}
.uploaded-files a:hover {
	color:var(--barbie);
}
#feedbackInputs .uploaded-files {
	clear:both;
}
#feedbackInputs .uploaded-files ul {
	border:0;
	margin:0;
	padding:0;
	border-radius:0;
	max-width:100%;
}
#feedbackInputs .uploaded-files li {
	display:inline-block;
	margin:0 0.5em 0.6em 0;
	background:none !important;
	padding:0;
}
.attachments a,
#feedbackInputs .uploaded-files a {
	display:block;
	padding:0 1em;
	line-height:2.2em;
	border-radius:2em;
	white-space:nowrap;
	background:#fff;
	border:1px solid #ccc;
	text-overflow:ellipsis;
	overflow:hidden;
	max-width:15em;
}
.attachments {
	display:block;
	margin:0.7em 0 -0.6em 0;
	font-size:0.875em;
}
.attachments a {
	display:inline-block;
	margin:0 0.5em 0.6em 0;
	color:inherit;
	text-decoration:none;
}
.attachments a:hover,
#feedbackInputs .uploaded-files a:hover {
	border-color:#aaa;
	color:inherit;
}
.attachments a:before,
#feedbackInputs .uploaded-files a:before {
	font-family:fa-solid;
	content:'\f15b';
	margin-right:0.4em;
	color:var(--barbie);
	font-size:1.1em;
}





/*
—————————————————
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 var(--barbie);
	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
—————————————————
*/
.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;
}








.packery {
	max-width:calc(100% + 24px);
	margin-right:-24px;

	max-width:calc(100% + 40px);
	margin-right:-40px;
	margin-bottom:10em;
}
.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.06);
	opacity:0;
	transition:opacity 150ms;
	border-radius:16px;
	pointer-events:none;
}
.packery-item img,
.packery-item video {
	display:block;
	width:100%;
	border-radius:16px;
	pointer-events:none;
}
.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) }

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


.packery-item.approved:before {
	content:'\f00c';
	font-family:fa-solid;
	color:#fff;
	background:var(--maleficent);
	width:2em;
	height:2em;
	line-height:2em;
	text-align:center;
	position:absolute;
	border-radius:50%;
	top:-0.4em;
	right:-0.4em;
	font-size:1.2em;
	z-index:1;
}











/*
—————————————————
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:linear-gradient(to bottom right, var(--elsa), var(--ursula));
	text-align:center;
}
.avatar-studio {
	background:linear-gradient(to bottom right, var(--peppa), var(--ursula));
}
.avatar-blue {
	background:#006398;
}
.avatar-purple {
	background:#695390;
}
.avatar span {
	color:#fff;
}





/*
—————————————————
Toolbar
—————————————————
*/
.toolbar {
	display:inline-block;
	background:rgba(193 196 203 / 25%);
	border-radius:50px;
	box-sizing:border-box;
	padding:0.6em;
	margin-bottom:1.5em;
	margin-top:-0.7em;
	position:relative;
}
.toolbar input.text, .toolbar input.date, .toolbar select, .grid td select {
	display:inline-block;
	padding:0.3em 0.5em;
	line-height:1.2;
	border-radius:1em;
	border:0;
	width:auto;
	height:2.2em;
	box-sizing:border-box;
	max-width:25em;
	margin-right:0.3em;
	outline:0;
	border-bottom:2px solid rgba(0, 0, 0, 0.10);
	background:#fff;
}
.toolbar select {
	padding-right:1.2em;
}
.toolbar select.filtered {
	color:var(--marge);
	background:#f0f6fa;
	border-color:var(--marge);
	box-shadow:2px 2px var(--marge);
}
.toolbar input.text {
	width:13em;
	padding:0.4em 0.7em;
}
.toolbar input.button {
	width:7.5em;
	margin-left:0;
}
.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;
}








/*
—————————————————
Tables
—————————————————
*/
.grid {
	width:100%;
	line-height:1.3;
	margin-bottom:1em;
	background:#fff;
}
.grid-wrapper {
	margin-bottom:3.2em;
}
.grid th {
	font-size:0.9333em;
	font-weight:500;
	padding:0.8rem 0.7rem;
	color:var(--marge);
	background:rgba(193 196 203 / 17%);
	border-top:1px solid rgba(193 196 203 / 25%);
	border-bottom:2px solid rgba(193 196 203 / 50%)
}
.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,
.grid td.section-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 h3 {
	font-size:1.1em;
	margin:0.3em 0 0 0;
}
.grid td.group-header h3,
.grid td.section-header h3 {
	color:var(--marge);
	display:inline;
}
.grid td.group-header a:hover {
	text-decoration:underline;
}
.grid td.group-header h3 a:hover {
	text-decoration:none;
}
.grid td.section-header {
	padding:2em 0 0 0;
}
.grid td.section-header h3 {
	padding:0.5em 0;
	display:inline-block;
	margin:0 0.4em 0 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 {
	padding:0.6em 0.7em;
	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:var(--marge);
}
.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 .prefix {
	color:#4987c3;
	background:#ecf2f9;
	font-weight:bold;
	padding:0.2em 0.45em;
	border-radius:0.3em;
	font-family:monospace;
}
.grid .prefix-inactive {
	color:#a082bc;
	background:#f4e8f8;
}


.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:4rem;
}
.grid .center {
	text-align:center;
}
.grid .checked,
.grid .unchecked {
	font-family:fa-solid;
}
.grid .checked:before {
	content:'\f00c';
	color:var(--maleficent);
}
.grid .unchecked:before {
	content:'\f00d';
	color:#ddd;
}
.grid tr.unallocated strong {
	color:#00649d;
}
.grid tr.highlighted strong {
	color:var(--barbie);
}
.grid tr.clickable:hover td {
	background:#fafafa;
	cursor:pointer;
}
.grid tr.clickable:active td {
	background:#eee;
}
.grid tr.inactive-row td {
	color:#ccc;
}
.pager {
	color:#aaa;
	padding:0.5em 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);
}
.button-status-archived:after {
	font-family:fa-light;
	color:var(--elsa);
	content:'\f187';
	margin-left:0.3em;
	font-size:0.9em;
}
.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:var(--marge);
}
.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:var(--maleficent);
}
.answers .answer-no:before {
	content:'\f00d';
	color:var(--barbie);
}
.answers .answer-permission {
	color:#fff;
	background:var(--maleficent);
}
.answers .answer-permission:before {
	content:'\f00c';
}
@media (max-width: 1400px) {
	.grid .ago {
		display:none;
	}
	.grid .status-label {
		display:none;
	}
}


/*
—————————————————
Tracking
—————————————————
*/
.week-nav {
	float:left;
	margin-right:1em;
	height:2.2em;
}
.week-nav a {
	float:left;
	line-height:2.2em;
	width:2.2em;
	text-align:center;
	border:1px solid #ccc;
	border-radius:0.5em 0 0 0.5em;
	position:relative;
	background:#fff;
}
.week-nav a:before {
	content:'\f104';
	font-family:fa-light;
}
.week-nav a:last-child {
	border-radius:0 0.5em 0.5em 0;
	margin-left:-1px;
}
.week-nav a:last-child:before {
	content:'\f105';
}
.week-nav a:hover {
	z-index:1;
	border-color:#aaa;
}
.week-nav a:active {
	border-color:#777;
}
.report-totals {
	margin-bottom:2em;
}
.report-totals .total-box {
	float:left;
	width:10em;
	height:4.7em;
	background:rgba(193 196 203 / 25%);
	border-radius:0.5em;
	margin-right:1em;
	text-align:center;
	padding:0.7em; 
}
.report-totals .total-box span {
	display:block;
	font-size:0.9em;
}
.report-totals .total-box strong {
	display:block;
	font-size:1.5em;
	font-weight:500;
}

.hours-chart {
	display:inline-block;
	width:15em;
	height:1.3em;
	line-height:1.3em;
	border-radius:4px;
	overflow:hidden;
	vertical-align:middle;
	position:relative;
}
.hours-chart:after {
	content:'';
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	box-shadow:inset 0 0 0 1px #0003;
	border-radius:4px;
}
.hours-chart .bar {
	float:left;
	height:100%;
	background:var(--marge);
}
.hours-chart .non-billable {
	background:var(--elsa);
}
.pc-rate {
	font-weight:500;
	color:var(--maleficent);
}



.time-tracker-weekly {
	width:100%;
	table-layout:fixed;
}
.readonly .time-tracker-weekly {
	pointer-events:none;
}
.readonly .time-tracker-weekly .button {
	display:none;
}
.time-tracker-weekly td {
	border-bottom:1px solid #ccc;
	padding:0.5em;
	line-height:1.3;
	position:relative;
}
.time-tracker-weekly th {
	background:#f5f5f5;
	padding:0.5em 0;
	line-height:1.1;
	border-bottom:1px solid #ccc;
}
.time-tracker-weekly th.absent {
	background:#e2e2e2;
}
.time-tracker-weekly .timesheet-capacity-header {
	font-weight:500;
	color:var(--barbie);
	margin-top:0.5em;
	display:block;
}
.time-tracker-weekly th.absent .timesheet-capacity-header span {
	display:none;
}
.time-tracker-weekly th.absent .timesheet-capacity-header:after {
	content:'Absent';
}
.time-tracker-weekly .project-name {
	width:25em;
	padding-right:2em;
}
.time-tracker-weekly h4 {
	font-size:1em;
	font-weight:bold;
	margin-bottom:0.1em;
}
.time-tracker-weekly h4 span {
	font-size:0.85em;
	font-weight:500;
	color:var(--barbie);
}
.time-tracker-weekly h5 {
	font-size:0.85em;
	xcolor:#aaa;
	word-break:break-word;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	min-height:2.4em;
}
.time-tracker-weekly .work-type {
	font-size:0.85em;
	font-weight:500;
	color:var(--elsa);
}
.time-tracker-weekly input.time-input {
	display:block;
	width:100%;
	height:2.8em;
	border:1px solid #bbb;
	border-bottom-color:#aaa;
	border-radius:0.4em;
	padding:0.8em;
	outline:0;
	text-align:right;
	xmargin:0.5em 0;
}
.time-tracker-weekly input.time-input:focus {
	border-color:var(--elsa);
	border-width:1px;
	background:#a5d5e722;
}
.time-tracker-weekly .time-input-notes {
	position:absolute;
	top:1.7em; left:0.9em;
	opacity:0;
	transition:200ms;
	color:var(--elsa);
}
.time-tracker-weekly .has-notes {
	opacity:1;
	color:var(--marge);
}
.time-tracker-weekly td:hover .time-input-notes {
	opacity:1;
}
.time-tracker-weekly .time-input-notes:before {
	content:'\f05a';
	font-family:fa-solid;
}

.time-tracker-weekly .tooltip-text {
	position:absolute;
	top:3.5em; left:-1.3em;
	width:20em;
	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;
	z-index:1;
}
.time-tracker-weekly .time-input-notes:hover + .tooltip-text {
	opacity:1;
}



.time-totals td {
	border:0;
	padding:1.5em 1.2em 0 0;
	text-align:right;
	vertical-align:top;
}
.time-totals td span,
.time-row-total {
	font-weight:500;
	color:#aaa;
}
.time-totals td.time-buttons {
	text-align:left;
	padding-top:1.2em;
}
.time-totals td.time-buttons .button {
	margin-right:0.2em;
}
.time-totals td.week-totals {
	padding-right:0.5em;
	font-weight:500;
}
.time-totals td.week-totals span {
	display:block;
}
.time-totals td span.week-total {
	color:#000;
}

.timesheet-status {
	display:inline-block;
	width:1.8em;
	height:1.8em;
	line-height:1.8em;
	text-align:center;
	margin-left:1em;
	color:#0f81c2;
    background:#0f81c20e;
	border-radius:50%;
}
.timesheet-status:before {
	font-family:fa-solid;
	content:'\f017';
}
.timesheet-approved {
	color:#fff;
	background:#7bc087;
}
.timesheet-approved:before {
	content:'\f00c';
}

/*
—————————————————
Project Summary
—————————————————
*/
.project-time-summary {
	
}
.project-time-summary li {
	border-top:1px solid #ddd;
	padding:0.5em;
	line-height:1.3;
	min-height:3.6em;
}
.project-time-summary .job-id {
	color:var(--barbie);
	font-size:0.85em;
	font-weight:500;
}
.project-time-summary .time {
	float:right;
}
.project-total-hours {
	border-top:1px solid #ddd;
	border-bottom:2px solid #ddd;
	padding:0.6em 0.5em;
	background:#f7f7f7;
}
.project-total-hours .time {
	float:right;
}

/*
—————————————————
Schedule
—————————————————
*/
.week-wrapper {
	position:relative;
	padding-left:14em;
}
.week-sidebar {
	position:absolute;
	top:0; left:0;
	width:14em;
	height:100vh;
	background:#eee;
	overflow-y:scroll;
	scrollbar-width:thin;
	padding:0.5em;
}
.week-sidebar li a {
	display:block;
	padding:0.3em 0.7em;
	font-size:0.9em;
	border-bottom:1px solid #ccc;
}
.week-editor {
	padding:2.5em;
}
.schedule-day {
	float:left;
	width:20%;
	min-height:20em;
	border-right:1px solid #ccc;
	padding:0 0.5em 0.5em 0.5em;
}
.schedule-day:last-child {
	border:0;
}
.schedule-day-header {
	line-height:1.2;
	border-bottom:1px solid #ccc;
	margin-bottom:1em;
	padding-bottom:0.4em;
	position:relative;
}
.schedule-day-header em {
	position:absolute;
	top:0.2em; right:0.2em;
	font-size:1.5em;
	font-weight:500;
	color:rgba(90,170,140, 1.00);
}
.allocation {
	display:block;
	background:#eee;
	padding:0.6em 0.6em 1.5em 0.6em;
	margin-bottom:0.5em;
	border-radius:0.4em;
	cursor:pointer;
	position:relative;
}
.allocation .brand {
	display:block;
	line-height:1;
}
.allocation .brand em {
	font-weight:500;
	font-size:0.9em;
}
.allocation .secondary {
	display:block;
	font-size:0.9em;
	opacity:0.9;
}
.allocation .hours {
	position:absolute;
	bottom:0; right:0;
	font-size:0.9em;
	border-radius:0.4rem 0 0.4rem 0;
	background:rgba(0,0,0,0.1);
	padding:0 0.6em;
	line-height:1.5;
}


.budget-chart {
	display:inline-block;
	height:1.5em;
	line-height:1.5em;
	xborder-radius:4px;
	overflow:hidden;
	vertical-align:middle;
	position:relative;
	margin:-2px 1em -2px 0;
}
.budget-chart:after {
	content:'';
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	box-shadow:inset 0 0 0 1px #0003;
	xborder-radius:4px;
}
.budget-chart .bar {
	position:absolute;
	top:0; left:0;
	height:50%;
	background:var(--marge);
}
.budget-chart .tracked {
	top:50%;
	background:var(--barbie);
}

.budget-chart .non-billable {
	background:var(--elsa);
}



/*
—————————————————
Tabs
—————————————————
*/
.tabs {
	border-bottom:1px solid #ddd;
	height:2em;
	margin:2em 0 3.2em 0;
}
h2 + .tabs, .tabs:first-child {
	margin-top: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 {
	display:inline-block;
	font-size:0.8em;
	color:#bbb;
	margin-left:0.5em;
	font-weight:500;
	min-width:0.6em;
}
.tabs li.active a {
	border-bottom-color:var(--barbie);
}
.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;
}


.dashboard-tabs {
	height:2.4em;
	margin-top:1em;
}
.dashboard-tabs li {
	float:left;
	margin-right:0.5em;
}
.dashboard-tabs a {
	display:block;
	line-height:2.4em;
	padding:0 1.2em;
	border-radius:0.4em 0.4em 0 0;
	transition:background-color 150ms;
}
.dashboard-tabs a:hover,
.dashboard-tabs a:focus {
	background:#d8d8da;
}
.dashboard-tabs a:active {
	background:#d3d3d5;
}
.dashboard-tabs li.active a {
	background:linear-gradient(to bottom, #fff, #f5f5f7);
}
.studio-tabs li.active a {
	color:#fff;
	background:var(--maleficent);
}




/*
—————————————————
Quotes
—————————————————
*/
.quote {
	border-radius:0.6em;
	position:relative;
	margin-bottom:1em;
	background:#f5f5f6;
    padding:1.8em;
}
.quote-header {
	display:table;
	table-layout:fixed;
    width:calc(100% + 3em);
    border-spacing:1.5em;
    border-collapse:separate;
	margin:-1.5em;
}
.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:var(--barbie);
	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:0.5em;
	box-shadow:0 0.1em 0.3em rgb(0 0 0 / 8%);
	border-bottom:3px solid #cacbcd;
}
.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 .quote-package-name input.text,
.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;
	background:#fff;
}
.quote span.readonly:after {
	content:'\a0';
}
.quote input.text,
.quote select {
	height:1.8rem;
}
.quote dd.error input.text,
.quote dd.error select {
	border-color:var(--barbie);
}
.quote input.emphasised {
	font-weight:bold;
	color:var(--marge);
	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,
.quote-description .quote-package-name label {
	display:inline-block;
	padding:0.15em 0.6em calc(0.15em - 1px) 0.6em;
	color:#fff;
	background:#58a8d8;
	border-radius:5px 5px 0 0;
	font-size:0.8666em;
	font-weight:500;
	transition:background-color 150ms linear;
	vertical-align:bottom;
	z-index:1;
	color:#4987c3;
	background:#d5e6f3;
}

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

.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:var(--barbie);
	border:0;
	width:10em;
	cursor:pointer;
}
.save-prompt input:hover {
	background:#f02e75;
}
.save-prompt input:active {
	background:#e02b6d;
}

.quote-editable {
	background:rgba(193 196 203 / 17%);
	border-radius:0 0.6em 0.6em 0.6em;
	padding:1.8em 1.6em 6em 1.6em;
	position:relative;
	margin-bottom:1.2em;
}
.quote-editable + .form-buttons {
	position:relative;
	top:-4.8em; left:1.8em;
}
.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-editable .context-menu {
	display:inline-block;
	position:relative;
	top:auto; right:auto;
}
.quote-editable .context-menu-dots {
	color:#666;
	xbackground:#e1e1e1;
	font-size:1.333rem;
}

.quote-tabs-wrapper {
	float:left;
}
.quote-tabs-wrapper + .button {
	margin:1em 0 0 1.8em;
}
.quote-tabs {
	height:3em;
}
.quote-tabs li {
	float:left;
	background:var(--marge);
	padding:0.8em 0.8em 0 0.8em;
	border-top-right-radius:0.6em;
	margin-left:-0.8em;
}
.quote-tabs li:first-child {
	margin-left:0;
}
.quote-tabs li:first-child,
.quote-tabs li.group1 + li.group2 {
	padding-left:0.8em;
	border-top-left-radius:0.6em;
}
.quote-tabs li.group1 + li.group2 {
	margin-left:1.8em;
}
.quote-tabs a.tab {
	display:block;
	min-width:4.2em;
	height:4.2rem;
	line-height:1.2;
	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;
	position:relative;
}
.quote-tabs a.accepted:after {
	font-family: fa-solid;
	content:'\f00c';
	position:absolute;
	top:-1.9em;
	left:calc(50% - 0.8em);
	font-size:0.9333em;
	width:1.6em;
	height:1.6em;
	line-height:1.45em;
	padding-top:0.15em;
	text-align:center;
	color:#fff;
	border-radius:50%;
	background:var(--maleficent);
	box-sizing:border-box;
}
.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:var(--marge);
	color:#333;
	background:linear-gradient(to bottom, #fff, #f5f5f6);
}
.quote-tabs a.tab em {
	display:block;
	width:2.5em;
	margin:0 auto 0.1em auto;
	color:#fff;
	background:#2968a4;
	font-weight:bold;
	padding:0.1em 0.45em;
	border-radius:0.3em;
	font-family:monospace;
	font-size:0.866em;
}
.quote-tabs li.active em {
	xbackground:#5f93c5;
}
.quote-tabs a.tab strong {
	font-weight:500;
	font-size:0.9333em;
}
.quote-tabs a.tab small {
	display:block;
	font-size:0.8666em;
}
.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;
}



.display-secondary-price .column-description {
	width:calc(52% - 2em);
}
.display-secondary-price .editable-row .column-description {
	width:calc(52% - 4em);
}
.column-secondary-price {
	width:12%;
	text-align:right;
	display:none !important;
}
.display-secondary-price .column-secondary-price {
	display:table-cell !important;
}




.row-headers {
	height:1.9em;
	font-weight:500;
	color:var(--marge);
}
.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;
}


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

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

.quote input.brand-selected,
.quote .brand-remove,
.quote .brand-readonly .brand-selector,
.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 .brand-readonly input.brand-selected,
.quote .brand-readonly .brand-remove,
.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 .brand-selector,
.quote .company-selector,
.quote .client-contact-selector,
.quote .platform-contact-selector {
	width:auto;
	height:auto;
}
.quote .brand-selector input,
.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 .brand-remove,
.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 .brand-remove:before,
.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;
}


/*
—————————————————
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:rgba(193 196 203 / 14%);
	border-radius:10px;
	padding:10px;
	transition:background-color 100ms;
	overflow:hidden;
}
#company-logos a:hover {
	background:rgba(193 196 203 / 20%);
}
#company-logos a:active {
	background:rgba(193 196 203 / 31%);
}
#company-logos .image-wrapper {
	display:flex;
	align-items:center;
	width:9em;
	height:9em;
	margin:auto;
}
#company-logos img {
	display:block;
	margin:auto;
	max-width:9em;
	max-height:5em;
	mix-blend-mode:multiply;
}
#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;
	background:rgba(193 196 203 / 24%);
}
#company-logos p * {
	display:block;
	min-height:16px;
}





/*
—————————————————
Notes
—————————————————
*/
.notes-wrapper {
	margin-bottom:2em;
}
.notes {
	padding:1.2em;
	border-radius:0.6em;
	background:rgba(193 196 203 / 17%);
	margin-bottom:1.3em;
}
.notes h2 {
	margin-bottom:1.2em;
}
.notes 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;
	max-width:52rem;
	margin:0 auto 1.2em auto;
	font-size:0.933em;
}
.note:last-child {
	margin-bottom:0;
}
.note .stamp {
	display:inline-block;
	font-size:0.875em;
	color:var(--marge);
	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;
}

/*
—————————————————
Creative Briefs
—————————————————
*/
.creative-brief {
	border:none;
	border-bottom:1px solid #d2d2d2;
	border-radius:0.6em;
	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;
	background:rgba(193 196 203 / 17%);
	padding:3em 11.5em 1.5em 1.5em;
	background:#fff;
	overflow:hidden;
	position:relative;
	margin-bottom:1.2em;
	min-height:7em;
}
.creative-brief h3 {
	background:#4987c3;
	color:#fff;
	position:absolute;
	top:0; left:0;
	padding:0.1em 0.8em;
	border-radius:0 0 0.6rem 0;
}
.creative-brief dl {
	font-size:0.9em;
}
.creative-brief dt {
	float:left;
	width:6em;
	clear:left;
	font-weight:bold;
	padding-bottom:1.2em;
}
.creative-brief dd {
	float:left;
	width:calc(100% - 6em);
	padding-bottom:1.2em;
	border-left:1px solid #ddd;
	padding-left:1em;
}
.creative-brief dd p:last-child {
	margin-bottom:0 !important;
}
.creative-brief dd:last-child {
	padding-bottom:0;
}
.creative-brief dd a {
	color:inherit;
	font-size:0.8rem;
	display:inline-block;
}
.creative-brief .file-list span.filename {
	display:inline-block;
	overflow:visible;
}
.creative-brief a.button {
	position:absolute;
	top:1.5em; right:13em;
}
.main-asset {
	position:absolute;
	top:0; right:0;
	width:10em;
	height:100%;
	padding:1em;
	background-image:url(/Images/clear.gif);
	background-color:rgba(193 196 203 / 40%);
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
}


/*
—————————————————
Editable Brief
—————————————————
*/


#task-content {
	background:#fff;
	border-radius:0.4em;
	box-shadow:0 0 0.5em rgb(0 0 0 / 3%);
	padding:1.5em;
	overflow-y:auto;
	height:calc(100vh - 15em);
}
.tasklist {
	font-size:14px;
	line-height:1.3;
}
.tasklist .top-level-task {
	background:#fff;
	border-top:1px solid #ddd;
	padding:1em 0.5em 1em 2.8em;
	position:relative;
	transition:150ms box-shadow;
	min-height:2.8em;
}
.tasklist .top-level-task:first-child {
	border-top:0;
}
.tasklist .task-metadata-resolved + .task-header,
.tasklist .task-metadata-resolved + .task-header + .task-content {
	color:#ccc;
}
.tasklist .task-heading {
	padding:2em 0 0.3em 0;
	background:#fff;
	border-top:0;
	border-bottom:3px solid #ddd;
	margin-bottom:0.4em;
}
.tasklist .task-heading .task-content {
	font-size:1.2em;
	line-height:1.3rem;
	font-weight:500;
	padding-right:3em;
}
.tasklist .task-drag-handle {
	display:none;
	position:absolute;
	top:0; left:0;
	width:1.3em;
	height:100%;
	background:#ddd;
	cursor:move;
	border-radius:0.6em 0 0 0.6em;
}


.tasklist .task-drag-handle:after {
	content:'\f7a5';
	font-family:fa-solid;
	width:1.3em;
	height:1em;
	line-height:1em;
	text-align:center;
	color:#aaa;
	position:absolute;
	top:calc(50% - 0.5em);
	left:0;
}

.tasklist .new-task-wrapper,
.tasklist .new-reply-wrapper {
	display:none;
}
.tasklist .new-reply {
	min-height:2em;
}
.tasklist .new-task-wrapper:first-child {
	margin-top:0;
}

.tasklist .task-hotspots {
	position:absolute;
	top:0; right:1em;
	cursor:pointer;
	display:none;
}
.tasklist .task-hotspots:before {
	content:'\e269';
	font-family:fa-light;
	font-size:2em;
}


.tasklist .task-metadata {
	position:absolute;
	top:0.6em; left:0;
}
.tasklist .roundel {
	display:block;
	width:2em;
	height:2em;
	line-height:2em;
	border-radius:50%;
	cursor:pointer;
	overflow:hidden;
	text-align:center;
}
.tasklist .roundel span {
	display:block;
	width:2.5em;
	height:2.5em;
	line-height:2.5em;
	color:#fff;
	font-weight:500;
	font-size:0.8em;
	background:linear-gradient(to bottom right, var(--elsa), var(--ursula));
}
.tasklist .task-metadata-resolved .roundel {
	background:var(--maleficent);
}
.tasklist .task-approval .roundel {
	background:var(--ursula);
}
.tasklist .task-metadata-resolved .roundel:after,
.tasklist .task-approval .roundel:after {
	content: '\f00c';
	font-family:fa-solid;
	color:#fff;
}
.tasklist .task-metadata-resolved.task-ignored .roundel {
	background:#ddd;
}
.tasklist .task-metadata-resolved.task-ignored .roundel:after {
	content: '\f00d';
}

.tasklist .roundel img {
	display:block;
	width:100%;
	height:100%;
	transition:filter 150ms;
}
.tasklist .roundel img:hover {
	filter:brightness(90%);
}

.tasklist .task-approval .roundel img,
.tasklist .task-approval .roundel span,
.tasklist .task-metadata-resolved .roundel img,
.tasklist .task-metadata-resolved .roundel span {
	display:none;
}


.tasklist .task-actions {
	visibility:hidden;
	opacity:0;
	position:absolute;
	top:0; left:3em;
	z-index:1;
	width:16em;
	border:1px solid #e2e2e2;
	box-shadow:0 0.1em 0.3em rgba(0,0,0,0.2);
	background:#fff;
	border-radius:0.5em;
	padding:0.5em 0;
	user-select:none;
	transition:all 100ms;
}
.tasklist .task-heading-actions {
	top:3.4em;
	left:auto; right:0;
	width:14em;
}
.tasklist .actions-visible .task-actions,
.tasklist .task-heading-actions-trigger-active + .task-actions {
	visibility:visible;
	opacity:1;
}
.tasklist .task-heading-actions-trigger {
	position:absolute;
	top:2em; right:0;
	width:2em;
	text-align:center;
	cursor:pointer;
	color:#666;
}
.tasklist .task-heading-actions-trigger:after {
	content:'\f078';
	font-family:fa-solid;
	font-size:0.9em;
	transition:transform linear 200ms;
	display:inline-block;
}
.tasklist .task-heading-actions-trigger-active:after {
	transform:rotate(180deg);
}
.task-actions li {
	padding:0.2em 1em;
	cursor:pointer;
}
.task-actions li:hover {
	background:rgba(193 196 210 / 17%);
}
.task-actions li:active {
	background:rgba(193 196 210 / 23%);
}
.task-actions li.icon:before {
	content:'\f013';
	display:inline-block;
	font-family:fa-light;
	width:1em;
	text-align:center;
	margin-right:0.8em;
}
.task-actions li.button-accept:before    { content:'\f00c' }
.task-actions li.button-ignore:before    { content:'\f00d' }
.task-actions li.button-clear:before     { content:' ' }
.task-actions li.button-clock:before     { content:'\f017' }
.task-actions li.button-carousel:before  { content:'\e256' }
.task-actions li.button-delete:before    { content:'\f2ed' }
.task-actions li.button-attach:before    { content:'\f0c6' }
.task-actions li.button-duplicate:before { content:'\f0c5' }
.task-actions li.button-import:before    { content:'\f56f' }
.task-actions li.button-reply:before     { content:'\f3e5' }
.task-actions li.button-list:before      { content:'\f0ae' }
.task-actions li.button-new:before       { content:'\2b' }

.task-actions li.section-top {
	padding-top:0.4em;
	margin-top:0.4em;
	border-top:1px solid #ddd;
}



.tasklist .task-actions .log-text {
	font-size:0.8em;
	color:#888;
	width:100%;
	padding:0.7em 1em 0.4em 1em;
	margin-top:0.7em;
	border-top:1px solid #ddd;
}
.tasklist .task-actions .log-text p {
	margin:0;
}
.tasklist p.resolved-by,
.tasklist .task-metadata-resolved span.created-by-date {
	display:none;
}
.tasklist .task-metadata-resolved p.resolved-by {
	display:block;
}


.tasklist .task-header {
	margin-bottom:0.1em;
}
.tasklist .task-author {
	font-weight:bold;
	line-height:1;
	margin-right:0.4em;
	display:inline-block;
	vertical-align:top;
}

.tasklist .task-content {
	padding:0.2em 0.5em;
	margin:-0.2em -0.5em;
	border-radius:0.3em;
	word-break:break-word;
	outline:0;
	transition:background-color 150ms;
}

.tasklist .new-task:before,
.tasklist .task-heading .task-content:before {
	display:none;
}

.tasklist .task-heading + .top-level-task:not(.task-heading) {
	padding-top:1em;
	border-top:0;
}
.tasklist .task-heading + .top-level-task .task-metadata {
	top:0.65em;
}
.tasklist .task-content:hover {
	background:#f4f4f7;
}
.tasklist .task-content:focus {
	background:#fffddd;
}
.tasklist .replies {
	margin:0.8em -0.5em -1.2em 0;
}
.tasklist .reply {
	border-top:1px solid #ddd;
	padding:0.8em 0.5em 0 2.8em;
	margin-bottom:0.8em;
	position:relative;
}
.tasklist .reply .roundel {
	top:0.8em; left:0;
}
.tasklist .task-images {
	float:left;
}
.tasklist .task-images li {
	display:inline-block;
	margin:0.3em 0.6em 0 0;
	position:relative;
}
.tasklist .task-images a {
	display:block;
	overflow:hidden;
	border-radius:0.3em;
	background:#000;
}
.tasklist .task-images img {
	display:block;
	width:4em;
	height:4em;
	object-fit:cover;
}
.tasklist .task-images a:hover img {
	opacity:0.97;
}

.task-extras {
	margin-top:0.6em;
	display:none;
}
.task-extras-visible {
	display:block;
}
.task-extras .delete {
	position:absolute;
	top:-0.3em; right:-0.3em;
	width:1.2em;
	height:1.2em;
	border-radius:50%;
	cursor:pointer;
	background:#fff;
	box-shadow:0 0 0.4em rgba(0,0,0,0.15);
	color:#999;
}
.task-extras .delete:after {
	display:block;
	font-family:fa-light;
	content:'\f00d';
	font-size:0.8em;
	line-height:1.5;
	text-align:center;
}





.task-attachments {
	float:left;
}
.task-attachments li {
	display:inline-block;
	margin:0.2em 0.6em 0.2em 0;
	position:relative;
	vertical-align:top;
}
.task-attachments a {
	display:block;
	overflow:hidden;
	border-radius:0.3em;
	width:4em;
	height:4em;
	text-align:center;
	background:#fff;
	color:rgba(193 196 210);
	border:2px solid rgba(193 196 210);
}
.task .comment-attachments .delete {
	display:none;
}
.task-attachments a span {
	display:none;
}
.task-attachments a:before {
	content:'\f15b';
	font-family:fa-solid;
	font-size:1.5em;
	line-height:calc(2.667em - 4px);
}
.task-attachments a.doc,
.task-attachments a.docx {
	color:#2b579a;
	border-color:#2b579a;
}
.task-attachments a.doc:before,
.task-attachments a.docx:before {
	content:'\f1c2';
}
.task-attachments a.xls,
.task-attachments a.xlsx {
	color:#217346;
	border-color:#217346;
}
.task-attachments a.xls:before,
.task-attachments a.xlsx:before {
	content:'\f1c3';
}
.task-attachments a.pdf {
	color:#d00;
	border-color:#d00;
}
.task-attachments a.pdf:before {
	content:'\f1c1';
}
.task-attachments a.png:before,
.task-attachments a.jpg:before,
.task-attachments a.jpeg:before,
.task-attachments a.gif:before,
.task-attachments a.tif:before {
	content:'\f1c5';
}


.add-attachment {
	display:none;
	background:#f1f1f4;
	padding:0.6em;
	border-radius:0.5em;
	height:2.9em;
	margin-top:1em;
}
.add-attachment input {
	float:left;
	border:0;
	outline:0;
	border-radius:0.3em;
	height:1.7em;
	line-height:1.3em;
	padding:0.2em;
	width:calc(100% - 5em);
}
.add-attachment span {
	float:right;
	width:2em;
	background:#dadce4;
	text-align:center;
	line-height:1.7em;
	border-radius:0.3em;
	cursor:pointer;
	margin-left:0.4em;
}
.add-attachment .button-add-attachment:after {
	font-family:fa-light;
	content:'\f00c';
}
.add-attachment .button-cancel-attachment:after {
	font-family:fa-light;
	content:'\f00d';
}




/*
—————————————————
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:var(--maleficent);
}
.quote-list .sent {
	color:#fff;
	background:var(--marge);
}

.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;
	position:relative;
}
#gallery span.remove {
	background:url(/Images/icon-remove.gif) center no-repeat;
	background-color:rgba(0,0,0,0.5) !important;
	background-size:16px 16px;
	width:20px; height:20px;
	position:absolute;
	top:0; right:0;
	opacity:0.6;
	cursor:pointer;
}
#gallery span.remove:hover {
	opacity:1;
}
#gallery img {
	cursor:move;
}






/*
—————————————————
Text-only Sorting
—————————————————
*/
.sort-icon {
	display:inline-block;
	width:1.2em;
	text-align:center;
	cursor:pointer;
	color:var(--barbie);
}
.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;
}
.sort-dashboard-tabs div {
	cursor:default;
	width:calc(100% - 8em);
	padding:0;
	float:left;
}
.sort-file-specs div {
	width:calc(50% - 2em);
	margin-right:0.5em;
}
.sort-file-specs div:last-child {
	margin-right:0;
}
.sort-dashboard-tabs .editable-label {
	display:block;
	width:100%;
	border:0;
	height:2.4em;
	line-height:2.4em;
	padding:0 0.7em;
	outline:0;
}
.sort-dashboard-tabs .handle {
	float:left;
	cursor:move;
	width:1.6em;
	height:2.4em;
	line-height:2.4em;
	margin-right:0.5em;
	background:#e1e1e1;
	border-radius:0.3em;
	text-align:center;
}
.sort-dashboard-tabs .handle:before {
	content:'\f7a5';
	font-family:fa-solid;
}





/*
—————————————————
New Indicator
—————————————————
*/
.grid .dot {
	display:block;
	padding-left:1.3em;
	position:relative;
	margin-left:0.5em;
}
.grid .dot:before {
	content:'';
	width:0.7em;
	height:0.7em;
	border-radius:50%;
	position:absolute;
	top:0.33em; left:0;
}
.grid .dot-green:before {
	background:var(--maleficent);
}
.grid .dot-yellow:before {
	background:#fcc82b;
}
.grid .dot-hidden:before {
	display:none;
}

/*
—————————————————
Status Indicators
—————————————————
*/
.status:before {
	content:'';
	display:inline-block;
	width:0.7em;
	height:0.7em;
	border-radius:50%;
	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:var(--maleficent) !important }
.status4:before, .status-selector input[value='4'] + label:before { background:var(--barbie) !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:var(--elsa) !important }
.status2:before, .status-selector input[value='2'] + label:before { background:#0f81c2 !important }
.status3:before, .status-selector input[value='3'] + label:before { background:var(--maleficent) !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:var(--maleficent) !important }
.quote-status4:before, .quote-status-selector input[value='4'] + label:before { background:var(--barbie) !important }


.has-trigger span.board-status1, span.button-small.board-status1, span.board-status1:before, .board-status1 + .trigger, .board-status-selector input[value='1'] + label:before { color:#fff; background:var(--maleficent) !important }
.has-trigger span.board-status2, span.button-small.board-status2, span.board-status2:before, .board-status2 + .trigger, .board-status-selector input[value='2'] + label:before { color:#fff; background:var(--barbie) !important }
.has-trigger span.board-status3, span.button-small.board-status3, span.board-status3:before, .board-status3 + .trigger, .board-status-selector input[value='3'] + label:before { color:#fff; background:#8560ab !important }



.billing-status {
	padding:0.3em 0.7em;
	border-radius:2em;
	font-weight:500;
	font-size:0.866em;
}
.billing-status1 {
	color:#74d5e4;
	background:#fff;
	border:1px solid #74d5e4;
}
.billing-status2 {
	color:#4987c3;
	background:#d5e6f3;
}
.billing-status3 {
	color:var(--maleficent);
	background:#8cc6962f;
}


#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-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;
	font-weight:normal !important;
	margin-bottom:0.5em;
	cursor:pointer;
	padding:0.3em 1em !important;
	border-radius:2em !important;
	border:2px solid rgba(0,0,0,0);
	color:#333 !important;
	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;
}




/*
—————————————————
Dashboard
—————————————————
*/
#content.dashboard-wrapper {
	margin-right:22em;
	padding:0;
}
.dashboard-wrapper ul.rounds {
	xtop:2.5em;
}
.dashboard-wrapper .toolbar {
	background:none;
	padding:0;
	font-size:0.9375em;
	margin:0 0 0 2em;
	position:relative;
	top:0.4em;
}
.dashboard-wrapper .toolbar select,
.dashboard-wrapper .toolbar .button {
	vertical-align:top;
}
.dashboard-wrapper .toggles {
	display:inline-block;
	width:8em;
	height:2em;
	margin-left:3em;
}
.dashboard-wrapper .toggles span {
	float:left;
	width:2.5em;
	height:2em;
	line-height:2em;
	margin-right:0.7em;
	cursor:pointer;
	border-radius:0.4em;
	color:#aaa;
	text-align:center;
}
.dashboard-wrapper .small-tiles:after {
	display:block;
	content:'\f2fc';
	font-family:fa-solid;
}
.dashboard-wrapper .large-tiles:after {
	display:block;
	content:'\f2fa';
	font-family:fa-solid;
	transform:scale(1.4);
}
.dashboard-wrapper .toggles span:hover {
	background:#e9e9e9;
}
.dashboard-wrapper .toggles span.active {
	background:#d9d9d9;
	color:#999;
}


/*
—————————————————
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:var(--maleficent);
}
.unallocated-bar {
	display:block;
	margin:1em 0;
}

.activity-bar {
	position:fixed;
	top:0; right:0;
	width:22em;
	height:100%;
	background:#fff;
	border-left:3px solid #eee;
	padding:3.5em 2em 2em 2em;
	overflow-y:auto;
	scrollbar-width:thin;
}
.activity-bar .button-toggle {
	position:absolute;
	font-size:1.2em;
	top:0.5em; left:0.5em;
	width:2em;
	height:2em;
	line-height:2;
	text-align:center;
	cursor:pointer;
}
.activity-bar .button-toggle:before {
	font-family:fa-light;
	content:'\f340';
}
.activity-bar-hidden .button-toggle {
	left:0;
	width:100%;
}
.activity-bar-hidden .button-toggle:before {
	content:'\f344';
}
.activity-bar-hidden .activity-bar {
	width:4em;
	padding:0;
}
.activity-bar-hidden .activity-bar h3,
.activity-bar-hidden .activity-bar div,
.activity-bar-hidden .activity-bar ul {
	display:none;
}
.activity-bar-hidden #content {
	margin-right:4em;
}
.activity-bar h3.divider {
	border-top:1px solid #ddd;
	padding:0 2rem;
	margin-left:-2rem;
	margin-right:-2rem;
	padding-top:1em;
}
.activity h5 {
	font-size:0.9375rem;
	margin-bottom:1.4em;
}
.activity h5 span {
	display:inline-block;
	border:1px solid #ccc;
	line-height:1.5em;
	border-radius:0.75em;
	padding:0 0.6em;
}
.activity ul {
	margin-bottom:1.7em;
}
.activity ul li:last-child {
	margin-bottom:0.5em;
}
.activity ul:last-child {
	margin-bottom:0;
}
ul.activity {
	margin-bottom:2.5em;
}
ul.activity:last-child {
	margin-bottom:0;
}
.activity li {
	position:relative;
	font-size:0.8125rem;
	margin-bottom:1.8em;
}
.activity .time {
	position:absolute;
	top:-1em; 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.waiting-for-me .activity-text,
.activity li.feedback .activity-text {
	color:#7bc087;
	background:#8cc6960e;
}
.activity li.comments .activity-text {
	color:var(--barbie);
    background:#e634780e;
}
.activity li.status-change .activity-text {
    color:#0f81c2;
    background:#0f81c20e;
}
.activity li.board-approval .activity-text {
	color:#848cc9;
	background:#edeff7;
}


.activity li.waiting-for-me .activity-text:before,
.activity li.feedback .activity-text:before {
	content:'\f004';
	background:#8cc6961c;
}
.activity li.waiting-approval .activity-text:before {
	content:'\f017';
}
.activity li.waiting-assigned .activity-text:before {
	content:'\f007';
}

.activity li.comments .activity-text:before {
	content:'\f075';
    background:#e634781c;
}
.activity li.status-change .activity-text:before {
	content:'\f00c';
    background:#0f81c21c;
}
.activity li.board-approval .activity-text:before {
	content:'\f00c';
	color:#fff;
	background:#848cc9;
}


.activity li.waiting-for-me a:hover .activity-text,
.activity li.feedback a:hover .activity-text {
	background:#8cc69614;
}
.activity li.comments a:hover .activity-text {
    background:#e6347814;
}
.activity li.status-change a:hover .activity-text {
    background:#0f81c214;
}
.activity li.board-approval a:hover .activity-text {
    background:#7e84ad14;
}

.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;
	text-align:center;
	min-width:11em;
}
.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;
	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:var(--maleficent) !important;
}
.kanban h3.status3:before {
	background:var(--barbie) !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;
	height:11em;
	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 span.waiting-days {
	font-weight:500;
	display:inline-block;
	color:#fff;
	background:#000;
	padding:0.05em 0.4em;
	border-radius:1em;
	margin-left:0.4em;
}
.kanban .column h4 span.waiting-days1 {
	opacity:0.4;
}
.kanban .column h4 span.waiting-days2 {
	opacity:0.7;
}

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

.kanban .column-status1 h4 span.waiting-days { background:#cacaca !important }
.kanban .column-status2 h4 span.waiting-days { background:var(--maleficent) !important }
.kanban .column-status3 h4 span.waiting-days { background:var(--barbie) !important }
.kanban .column-status4 h4 span.waiting-days { background:#8560ab !important }

.kanban .column-status1 h4:before { background:#cacaca !important }
.kanban .column-status2 h4:before { background:var(--maleficent) !important }
.kanban .column-status3 h4:before { background:var(--barbie) !important }
.kanban .column-status4 h4:before { background:#8560ab !important }

.kanban .column-status1 .comments-recent:before { color:#cacaca }
.kanban .column-status2 .comments-recent:before { color:var(--maleficent) }
.kanban .column-status3 .comments-recent:before { color:var(--barbie) }
.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:#8cc6961a }

.kanban .column-status3 li.unread .context-menu-active .context-menu-dots,
.kanban .column-status3 li.unread .context-menu-dots:hover { background:var(--barbie)1a }

.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:#8cc696cc !important; background:#8cc69608 }
.kanban .column-status3 li.unread a.tile { border-color:var(--barbie)cc !important; background:var(--barbie)08 }
.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:var(--maleficent) }
.column-status3 .progress-bar span { background:var(--barbie) }
.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:var(--barbie);
	border-radius:0.2em;
}
.kanban .progress-bar-completed span {
	xbackground:var(--maleficent);
}

.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:var(--maleficent);
}

.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;
}



/*
—————————————————————
Board Columns
—————————————————————
*/
.board-columns {
	display:table;
	width:100%;
	min-height:300px;
	table-layout:fixed;
}
.board-columns .column {
	display:table-cell;
	padding:0.2em 0;
}
.board-columns .column:first-child {
	border:0;
}
.board-columns .column-scroller {
	height:calc(100vh - 20.5em);
	overflow-y:scroll;
	scrollbar-width:thin;
	padding:0 0.8em;
}
.board-columns h3 {
	border-bottom:1px solid #ddd;
	line-height:1;
	padding-bottom:0.3em;
	margin:0 0.8rem 1.5em 0.8rem;
}
.board-columns h3 strong {
	display:inline-block;
	font-weight:inherit;
	cursor:pointer;
}
.board-columns h3 span {
	color:#aaa;
	font-size:0.8em;
}
.board-columns h3:before {
	content:'\f111';
	font-family:fa-solid;
	width:1.1em;
	display:inline-block;
	transform:scale(60%);
}

.board-columns .status1 h3:before { color:var(--elsa) }
.board-columns .status2 h3:before { color:#0f81c2 }
.board-columns .status3 h3:before { color:var(--maleficent) }
.board-columns .status4 h3:before { color:var(--barbie) }
.board-columns .status5 h3:before { color:var(--leela) }

.studio-view h3:before {
	font-family:fa-light;
	color:#8cb68e !important;
	transform:none;
	margin-right:0.3em;
}
.studio-view .status5 h3:before {
	color:#848cc9 !important;
}



.studio-view .studio1 h3:before { content:'\f007' }
.studio-view .studio2 h3:before { content:'\f46d' }
.studio-view .studio3 h3:before { content:'\f304' }
.studio-view .status5 h3:before { content:'\f01c' }


.board-columns .tile {
	position:relative;
	margin-bottom:0.7em;
}
.board-columns .tile-inactive {
	display:none;
}
.board-columns .project {
	display:block;
	background:#fff;
	border-radius:0.3em;
	padding:0.7em 0.8em;
	line-height:1.2;
	height:11em;
	position:relative;
	border-bottom:3px solid #eee;
	xbox-shadow:0 1px 3px #ececec;
	transition:border-color 150ms, height 250ms ease-in-out, margin-bottom 250ms ease-in-out;
}
.board-columns-small .project {
	height:8.3em;
}
.board-columns-small .milestones,
.board-columns-small .progress,
.board-columns-small .assignee-tags {
	display:none;
}

/* Tile border hovers */
.board-columns .status1 a.project:hover,
.board-columns .status1 .show-date-picker a.project {
	border-color:#a5d5e7;
}
.board-columns .status2 a.project:hover,
.board-columns .status2 .show-date-picker a.project,
.board-columns .status2 .show-koc a.project {
	border-color:#3f9ace
}
.board-columns .status3 a.project:hover,
.board-columns .status3 .show-date-picker a.project,
.board-columns .status3 .show-assignees a.project,
.board-columns .status3 .show-request-details a.project {
	border-color:#a3d1ab;
}
.board-columns .status4 a.project:hover,
.board-columns .status4 .show-date-picker a.project {
	border-color:#f085ae;
}
.board-columns .status5 a.project:hover {
	border-color:#848cc9;
}



.board-columns .project h4 {
	font-size:1em;
	font-weight:bold;
	padding-right:3.5em;
	margin-bottom:0.1em;
}
.board-columns .project h4 span {
	font-size:0.85em;
	font-weight:500;
}
.board-columns .project h5 {
	font-size:0.85em;
	color:#aaa;
	margin-bottom:1em;
	height:2.4em;
	word-break:break-word;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.board-columns .author {
	font-size:0.95em;
	position:absolute;
	bottom:0.9em; left:0.8em;
	overflow:hidden;
	border-radius:50%;
}
.board-columns .round-number {
	position:absolute;
	font-size:0.85em;
	bottom:1.3em; left:3.3em;
}
.board-columns .author img {
	display:block;
	width:1.6em;
	height:1.6em;
	border-radius:50%;
	background:#eee;
}


.board-columns .assignee-tags {
	font-size: 0.866em;
}
.board-columns .assignee-tags li {
	display:inline-block;
	border-radius:2em;
	margin:0 1.3em 0.4em 0;
	line-height:1;
	color:#ddd;
}
.board-columns .assignee-tags li.approved-tag {
	background:#fff;
	color:inherit;
}
.board-columns .assignee-tags li:before {
	content:'\f017';
	font-family:fa-light;
	width:1.25em;
	display:inline-block;
}
.board-columns .assignee-tags li.approved-tag:before {
	content:'\f058';
	font-family:fa-solid;
	color:#848cc9;
}




.board-columns .concept-tag {
	display:inline-block;
	color:#a7942e;
	background:var(--belle);
	padding:0.3em 0.6em;
	border-radius:1em;
	font-weight:500;
}
.board-columns .awaiting-tag {
	color:#ac796c;
	background:#eedfd9;
}
.board-columns .approval-status {
	font-size:0.85em;
	position:absolute;
	bottom:1em; right:0.8em;
	max-width:calc(100% - 1.6em);
	text-align:right;
	padding:0.3em 2.3em 0.3em 0.8em;
	border-radius:2em;
	margin:0;
}
.board-columns .approval-status:after {
	font-family:fa-solid;
	font-size:0.9em;
	content:'\f078';
	transition:transform linear 200ms;
	position:absolute;
	top:0.4em; right:1em;
	width:1em;
}
.board-columns .show-koc .approval-status:after,
.board-columns .show-assignees .approval-status:after,
.board-columns .show-request-details .approval-status:after {
	transform:rotate(180deg);
}
.board-columns .status1 .approval-status,
.board-columns .status4 .approval-status {
	pointer-events:none;
	padding-right:0.9em;
}
.board-columns .status1 .approval-status:after,
.board-columns .status4 .approval-status:after {
	display:none;
}
.board-columns .approval-status:before {
	font-family:fa-solid;
	width:1.5em;
	display:inline-block;
	text-align:left;
}
.board-columns .approval-status-waiting:before {
	content:'\f017';
}
.board-columns .approval-status-approved:before {
	content:'\f00c';
}
.board-columns .status5 .approval-status-waiting:before,
.board-columns .approval-status-assignees:before {
	content:'\f007';
}
.board-columns .approval-status-unassigned {
	background:#f6f6f6 !important;
	color:#b0b0b0 !important;
}
.board-columns .approval-status-unassigned:hover {
	background:#f0f0f0 !important;
}

.board-columns .status1 .project h4 span {
	color:var(--elsa);
}
.board-columns .status1 .approval-status {
	color:var(--elsa);
	background:#8fcbe11a;
}
.board-columns .status1 .approval-status-approved {
	background:var(--elsa) !important;
}
.board-columns .status1 .project-waiting-me {
	border-color:#8fcbe1cc !important;
}
.board-columns .status1 .date-overdue {
	background:#a5d5e7 !important;
}



.board-columns .status2 .project h4 span {
	color:#0f81c2;
}
.board-columns .status2 .approval-status {
	color:#0f81c2;
	background:#0f81c21a;
}
.board-columns .status2 .show-assignees .approval-status,
.board-columns .status2 .approval-status:hover {
	background:#0f81c22a;
}
.board-columns .status2 .approval-status-approved {
	background:#0f81c2 !important;
}
.board-columns .status2 .project-waiting-me {
	border-color:#0f81c2cc !important;
}
.board-columns .status2 .date-overdue {
	background:#3f9ace !important;
}

/*
.board-columns .status3 .approval-status {
	color:#f6914e;
	background:#f6914e1a;
}
.board-columns .status3 .show-assignees .approval-status,
.board-columns .status3 .approval-status:hover {
	background:#f6914e2a;
}
.board-columns .status3 .approval-status-approved {
	background:#f6914e !important;
}
.board-columns .status3 .project-waiting-me {
	border-color:#f6914ecc !important;
}
.board-columns .status3 .date-overdue {
	background:#f6914ecc !important;
}
*/

.board-columns .status3 .project h4 span {
	color:#72ba7e;
}
.board-columns .status3 .approval-status {
	color:#72ba7e;
	background:#8cc6961a;
}
.board-columns .status3 .show-assignees .approval-status,
.board-columns .status3 .approval-status:hover {
	background:#8cc6962a;
}
.board-columns .status3 .approval-status-approved {
	background:var(--maleficent) !important;
}
.board-columns .status3 .project-waiting-me {
	border-color:#8cc696cc !important;
}
.board-columns .status3 .date-overdue {
	background:#a3d1ab !important;
}


.board-columns .status4 .project h4 span {
	color:var(--barbie);
}
.board-columns .status4 .approval-status {
	color:var(--barbie);
	background:#e6347818;
}


.board-columns .status5 .project h4 span {
	color:#848cc9;
}
.board-columns .status5 .approval-status {
	color:#848cc9;
	background:#edeff7;
}
.board-columns .status5 .project {
	height:8.3em;
	border-left:0.5em solid #9fa4d2;
	border-bottom:0;
}
.board-columns .status5 .assignee-tags {
	display:block !important;
	position:absolute;
	bottom:0.8em; left:0.9em;
}
.board-columns .status5 .requester {
	color:#848cc9;
	font-size:0.866em;
	font-weight:500;
}
.board-columns .assignee-tags li {
	color:inherit;
}
.board-columns .assignee-tags li:before {
	color:#848cc9;
}
.board-columns .status5 .date {
	pointer-events:none;
	background:none;
	color:#848cc9;
	font-weight:normal;
}
.board-columns .status5 .tile:hover .no-date {
	opacity:0;
}




.board-columns .approval-status-approved {
	color:#fff !important;
}
.board-columns .approval-status-waiting-me {
	color:#fff !important;
	background:var(--barbie) !important;
}

.board-columns .round {
	position:absolute;
	bottom:3.6em; left:1em;
	font-size:0.8125rem;
}
.board-columns .progress {
	xposition:absolute;
	bottom:3.5em; left:0.8em;
	width:calc(100% - 1.6em);
}
.board-columns .progress-bar {
	height:3px;
	border-radius:0.2em;
	position:absolute;
	top:100%; left:0;
	width:100%;
}
.board-columns .progress-bar span {
	display:block;
	height:100%;
	background:var(--maleficent);
	background:#a3d1ab;
}
.board-columns .status5 .progress-bar span {
	background:var(--barbie);
}

.board-columns .progress-bar-completed span {
	background:var(--maleficent);
}


.board-columns .progress-bars {
	display:table;
	table-layout:fixed;
	height:0.2em;
	width:calc(100% + 6px);
	border-spacing:3px;
	margin:0 -3px;
}
.board-columns .progress-bars span {
	display:table-cell;
	border-radius:0.1em;
	height:0.2em;
	background:#eee;
}
.board-columns .progress-bars span.approved {
	background:var(--barbie);
}
.board-columns .status6 .progress-bars span.approved {
	background:var(--leela);
}


.board-columns .progress-score {
	font-size:0.8125rem;
	margin-top:0.3em;
	xcolor:#aaa;
	xtext-align:center;
	xopacity:0;
	transition:opacity 150ms;
}
.board-columns a:hover .progress-score {
	xopacity:1;
}
.board-columns .date {
	position:absolute;
	top:-2px; right:-2px;
	font-size:0.8em;
	padding:0.4em 0.75em;
	border-radius:0 0.3em 0 0.5em;
	transition:background-color 150ms;
	cursor:pointer;
	background:rgba(193 196 203 / 17%);
}
.board-columns .project-waiting-me .date {
	top:0; right:0;
	border-radius:0 0.2em 0 0.5em;
}
.board-columns .no-date {
	opacity:0;
	transition:opacity 150ms;
	background:none;
}
.board-columns .no-date:after {
	font-family:fa-light;
	content:'\f073';
	color:#999;
}
.board-columns .tile:hover .no-date {
	opacity:1;
}
.board-columns .date-overdue {
	color:#fff;
	font-weight:500;
}
.board-columns .date:hover {
	background:rgba(193 196 203 / 17%);
}
.board-columns .due-date-picker {
	display:none;
	position:absolute;
	background:#fff;
	z-index:1;
	box-shadow:0 0 1em #00000033;
	border-radius:0.4em;
	top:2em; right:1em;
	font-size:0.875em;
}
.board-columns .due-date-picker div {
	padding:1em;
	max-width:14em;
}
.board-columns .due-date-picker div + div {
	border-top:1px solid #ddd;
	padding:0.6em 0 0.8em 0;
}
.board-columns .show-date-picker .due-date-picker,
.board-columns .show-koc .koc-picker {
	display:block;
}
.board-columns .due-date-picker input,
.board-columns .due-date-picker select,
.board-columns .koc-picker input,
.board-columns .koc-picker select {
	border:0;
	border-radius:0.3em;
	padding:0.2em 0.3em;
	outline:0;
	margin-bottom:0.4em;
	border:1px solid #ccc;
	width:100%;
}
.board-columns .koc-picker input.text {
	padding:0.3em 0.4em;
}
.board-columns .koc-picker input.error {
	border-color:var(--barbie);
}
.board-columns .due-date-picker .button,
.board-columns .koc-picker .button {
	margin-top:0.6em;
}
.board-columns .koc-picker .button-url {
	float:right;
}
.board-columns .koc-picker {
	display:none;
	position:absolute;
	top:calc(100% - 0.5em); left:1em;
	width:calc(100% - 2em);
	color:#333;
	background:#fff;
	box-shadow:0 0 1.8em rgba(0,0,0,0.25);
	border-radius:0.4em;
	padding:0.4em 0;
	font-size:0.875em;
	z-index:1;
	padding:1em;
}


.board-columns .koc {
	margin:0;
	font-size:0.85em;
}

.board-columns .milestones {
	margin:0;
	text-align:center;
}
.board-columns .milestones span {
	font-size:0.85em;
	display:inline-block;
	margin-right:1.6em;
	color:#ddd;
}
.board-columns .milestones span:last-child {
	margin-right:0;
}
.board-columns .milestones span:before {
	font-family:fa-solid;
	content:'\f00c';
	display:inline-block;
	width:1.3em;
}
.board-columns .milestones span.complete {
	color:#333;
}
.board-columns .milestones span.complete:before {
	color:var(--elsa);
	content:'\f00c';
}


.board-columns .comments {
	position:absolute;
	bottom:0; right:0;
	font-size:0.8125rem;
}
.board-columns .comments:before {
	font-family:fa-light;
	content:'\f075';
	margin-right:0.3em;
}
.board-columns .comments-recent:before {
	font-family:fa-solid;
}


.board-columns .info-tile {
	position:absolute;
	top:50%; left:50%;
	padding:10px;
	background:#fff;
	box-shadow:0 0 10px rgba(0,0,0,0.2);
	z-index:1;
	border-radius:0.3em;
	display:none;
}
.board-columns .info-tile img {
	display:block;
	width:100px;
}

@media only screen and (max-width:2100px) {
	.board-columns .hideable {
		display:none;
	}
}

@media only screen and (max-width:1900px) {
	.board-columns .milestones span {
		margin-right:1em;
	}
}

/*
—————————————————————
Assignees
—————————————————————
*/
.assignees,
.work-assignees {
	display:none;
	position:absolute;
	top:calc(100% - 0.5em); left:2em;
	width:calc(100% - 4em);
	color:#333;
	background:#fff;
	box-shadow:0 0 1.8em rgba(0,0,0,0.25);
	border-radius:6px;
	padding:0.4em 0;
	font-size:0.875em;
	z-index:1;
}
.work-assignees {
	left:1em;
	width:calc(100% - 2em);
	padding:0;
	text-align:left;
}
.project-status-bar .work-assignees {
	top:calc(100% + 0.5em);
	width:25em;
}
.work-assignees p {
	padding:1em;
	margin:0;
}
.work-assignees p select {
	outline:0;
	border-radius:2em;
	border:1px solid #ddd;
	padding:0.25em;
	margin-right:0.3em;
}
@media only screen and (max-width:1330px) {
	.work-assignees p select {
		max-width:7.4em;
	}
}
.work-assignees p .button {
	vertical-align:top;
}
.work-assignees ul {
	border-top:1px solid #ddd;
	padding:1em;
	display:none;
}
.has-assignees ul {
	display:block;
}
.work-assignees li {
	background:#f5f5f6;
	border-radius:0.5em;
	padding:0.8em;
	margin-bottom:0.5em;
	line-height:1.6em;
	position:relative;
}
.work-assignees li:last-child {
	margin-bottom:0;
}
.work-assignees li span.work-type {
	display:inline-block;
	border-radius:0.3em 0.3em 0 0;
	padding:0 0.6em;
	font-weight:500;
	color:#4987c3;
	background:#d5e6f3;
}
.work-assignees li select {
	display:block;
	outline:0;
	border:0;
	border-radius:0 0.3em 0.3em 0.3em;
	padding:0.4em 0.4em;
	width:100%;
	border-bottom:1px solid #d2d2d2;
	box-shadow:0 0.1em 0.2em rgba(0, 0, 0, 0.04);
}
.work-assignees li span.remove {
	cursor:pointer;
	position:absolute;
	top:0.4em; right:0.7em;
	width:1em;
	height:1.6em;
	opacity:0.7;
}
.work-assignees li span.remove:before {
	display:block;
	text-align:center;
	content:'\f00d';
	font-family:fa-light;
}

.show-assignees .assignees,
.show-assignees .work-assignees {
	display:block;
}
.assignees li {
	display:block;
	cursor:pointer;
	white-space:nowrap;
	user-select:none;
	text-decoration:none;
}
.assignees a:hover {
	color:var(--barbie);
}
.assignees .context-menu-actions {
	display:block;
}
 .assignees li.section-top {
	padding-top:0.4em;
	margin-top:0.4em;
	border-top:1px solid #ddd;
}
.assignees span.checkbox {
	display:block;
	padding:0.15em 0.8em;
}
.assignees span.checkbox:before {
	content:'\f0c8';
	display:inline-block;
	font-family:fa-light;
	width:1.4em;
}
.assignees span.checked:before {
	content:'\f14a';
	font-family:fa-solid;
	color:var(--marge);
}


.request-info-wrapper {
	display:none;
	position:absolute;
	top:calc(100% - 0.5em); left:1em;
	width:calc(100% - 2em);
	color:#333;
	background:#fff;
	box-shadow:0 0 1.2em rgba(0,0,0,0.15);
	border-radius:0.4em;
	font-size:0.875em;
	z-index:1;
}
.request-info .buttons {
	text-align:center;
	border-top:1px solid #ddd;
	padding-top:0.9em;
	margin-bottom:0.9em;
}
.request-info p.request-details {
	padding:0.8rem 1rem 0.8rem 3.2rem;
	line-height:1.3;
	position:relative;
	margin:0;
}
.request-info span {
	white-space:nowrap;
}
.request-info span.request-date {
	display:block;
	color:#aaa;
}
.request-info p img {
	position:absolute;
	width:1.6rem;
	height:1.6rem;
	top:1.3em; left:1em;
	border-radius:50%;
	margin:0;
}
.request-info ul.approval-list {
	padding:0.9em 1em;
	border-top:1px solid #ddd;
	line-height:1.6;
	margin:0;
}
.request-info ul.approval-list li:before {
	display:inline-block;
	width:1.3em;
	content:'\f00c';
	font-family:fa-light;
	margin-right:0.4em;
	text-align:center;
}
.request-info ul.approval-list li.unset:before {
	content:' ';
}
.request-info ul.approval-list li.rejected:before {
	content:'\f00d';
}
.request-info ul.approval-list li.pending:before {
	content:'\f017';
	color:#ccc;
}
.request-info ul.approval-list li a {
	display:inline-block;
}
.request-info ul.approval-list li a:hover {
	color:var(--barbie);
}

@media only screen and (max-width:1800px) {
	.board-columns .request-info li span {
		display:none;
	}
}
.show-request-details .request-info-wrapper {
	display:inline-block;
}
.request-info span.checkbox {
	display:block;
	padding:0.15em 0.8em;
}
.request-info span.checkbox:before {
	content:'\f0c8';
	display:inline-block;
	font-family:fa-light;
	width:1.4em;
}
.request-info span.checked:before {
	content:'\f14a';
	font-family:fa-solid;
	color:var(--marge);
}
.request-edit {
	display:none;
}
.show-edit .request-summary {
	display:none;
}
.show-edit .request-edit {
	display:block;
}

/*
—————————————————————
Priority Lists
—————————————————————
*/
.priority-lists h3:before {
	display:none;
}
.priority-lists .row {
	margin-bottom:3em;
}
.priority-lists .project {
	float:left;
	width:20em;
	margin:0 1.4em 1.4em 0;
}
.priority-lists h4:before {
	content:'\f111';
	font-family:fa-solid;
	width:1.1em;
	display:inline-block;
	transform:scale(60%);
}


.priority-lists .status1 h4:before { color:var(--elsa) }
.priority-lists .status2 h4:before { color:#0f81c2 }
.priority-lists .status3 h4:before { color:#f60 }
.priority-lists .status4 h4:before { color:var(--maleficent) }
.priority-lists .status5 h4:before { color:var(--barbie) }
.priority-lists .status6 h4:before { color:var(--leela) }




/*
—————————————————————
Clients
—————————————————————
*/
.search-suggest {
	height:6em;
	position:relative;
	xz-index:2;
}
.search-suggest input {
	float:left;
	width:calc(100% - 5em);
	border:1px solid #ddd;
	border-radius:5px;
	border-bottom-color:#ccc;
	outline:none;
	padding:0.5em 0.7em;
	margin-right:0.5em;
}
.search-suggest input:focus {
	border-bottom-color:#ccc;
	box-shadow:0 2px 2px #f5f5f5;
}
.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:2;
}
.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 { 
	xwidth: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;
}



/*
—————————————————
Upload Assets
—————————————————
*/
#uploads-wrapper {
	display:table;
	border-spacing:2em;
	width:calc(100% + 4em);
	margin:-1.6em -2em 0 -2em;
	table-layout:fixed;
}
.upload-folder {
	display:table-cell;
	background:#fff;
	box-shadow: 0 5px 10px #eaeaea;
	border-radius:0.6em;
	padding:1.8em;
	position:relative;
}
.upload-folder .button {
	position:absolute;
	top:1.8em; right:1.8em;
}
.upload-folder .progress-wrapper {
	opacity:0;
}
.upload-folder .progress-text {
	font-size:0.866em;
	text-align:center;
	margin-bottom:0.3em !important;
	height:1.5em;
}
.upload-folder .progress {
	width:100%;
	height:0.7em;
	margin-bottom:1em;
	background:rgba(193 196 203 / 24%);
	border-radius:0.35em;
}
.upload-folder .progress-bar {
	background:var(--barbie);
	width:0;
	height:100%;
	border-radius:0.35em;
	transition:width 150ms;
	box-shadow:inset 0 2px 9px rgba(255,255,255,0.15), inset 0 -2px 6px rgba(0,0,0,0.3);
	position:relative;
	overflow:hidden;
}
.upload-folder .progress-bar-success {
	background:var(--maleficent);
}
.upload-folder .progress-bar-finalising {
	background:var(--elsa);
}
.upload-folder .progress-bar:after {
	content:'';
	position: absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	background-image:linear-gradient(
		-45deg, 
		rgba(255, 255, 255, .2) 25%, 
		transparent 25%, 
		transparent 50%, 
		rgba(255, 255, 255, .2) 50%, 
		rgba(255, 255, 255, .2) 75%, 
		transparent 75%, 
		transparent
	);
	background-size:3em 3em;
	animation:move 2s linear infinite;
}

@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position:3em 3em;
  }
}








.upload-folder .progress-bar-no-transition {
	transition:none !important;
}


.upload-widgets {
	width:calc(100% + 0.8em);
	margin-right:0.8em;
	height:4em;
	margin-bottom:1em;
}
.upload-widgets li {
	float:left;
	width:calc(25% - 0.8em);
	width:calc(33.333% - 0.8em);
	height:4em;
	margin-right:0.8em;
	position:relative;
	cursor:pointer;
	background:rgba(193 196 203 / 17%);
	border-radius:0.5em;
	user-select:none;
}
.upload-widgets li:hover {
	background:rgba(193 196 203 / 24%);
}
.upload-widgets li:active {
	background:rgba(193 196 203 / 31%);
}
.upload-widgets li.local input {
	opacity:0;
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	z-index:1;
	cursor:pointer;
}
.upload-widgets li.cloud:before {
	content:'';
	position:absolute;
	top:0.4rem; left:0;
	width:100%;
	height:2.2em;
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	xfilter:grayscale(1);
	xopacity:0.6;
	transition:all 150ms;
	pointer-events:none;
}
.upload-widgets li:hover:before {
	filter:grayscale(0);
	opacity:1;
}
.upload-widgets li.cloud-local:before {
	background-image:url(/Images/icon-cloud-local.png);
}
.upload-widgets li.cloud-box:before {
	background-image:url(/Images/icon-cloud-box.png);
}
.upload-widgets li.cloud-dropbox:before {
	background-image:url(/Images/icon-cloud-dropbox.png);
}
.upload-widgets li.cloud-google-drive:before {
	background-image:url(/Images/icon-cloud-google-drive.png);
}
.upload-widgets li.cloud-onedrive:before {
	background-image:url(/Images/icon-cloud-onedrive.png);
}
.upload-widgets span {
	font-size:0.7333em;
	text-align:center;
	position:absolute;
	bottom:0.3rem; left:0;
	width:100%;
	line-height:1rem;
	color:#777;
	pointer-events:none;
}
.small-upload-widgets {
	height:3em;
}
.small-upload-widgets li {
	height:3.2em;
	font-size:0.8em;
}
.small-upload-widgets span {
	display:none;
}



.assets-list li {
	border-top:0.05em solid #ddd;
	height:2em;
	clear:left;
	font-size:0.8em;
}
.assets-list li li {
	padding-left:1em;
}
.assets-list li ul {
	display:none;
}
.assets-list h3 {
	margin-bottom:0.3em;
	padding-top:0 !important;
}
.assets-list h3 + ul {
	margin-bottom:1.4em;
	border-bottom:0.05em solid #ddd;
}
.assets-list a:hover {
	color:var(--barbie);
}
.assets-list span.filename {
	float:left;
	padding:0.5em 0;
	line-height:1;
	width:calc(100% - 8em);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.assets-list span.filename:before {
	content:'\f15b';
	font-family:fa-light;
	float:left;
	width:1.2em;
	text-align:center;
	margin-right:0.3em;
	color:#94b8d3;
}
.assets-list span.filename em {
	display:inline-block;
	font-size:0.8em;
	font-weight:500;
	padding:0.2em 0.5em;
	background:#a085c4;
	color:#fff;
	border-radius:1em;
	margin-left:1em;
}
.assets-list span.zip:before {
	content:'\f07b';
}
.assets-list span.filesize {
	float:left;
	padding:0.5em 0;
	line-height:1;
	width:6em;
	text-align:right;
}
.assets-list span.delete-file {
	float:right;
	padding:0.5em 0;
	line-height:1;
	width:2em;
	text-align:right;
	cursor:pointer;
}
.assets-list span.delete-file:after {
	content:'\f2ed';
	font-family:fa-light;
	color:#94b8d3;
}


.asset-selector-list {
}
.asset-selector-list h3 {
	margin-bottom:0.3em;
	padding-top:0 !important;
}
.asset-selector-list h3 + ul {
	margin-bottom:1.4em;
}
.asset-selector-list li {
	font-size:0.8em;
	position:relative;
}

.asset-selector-list input {
	position:absolute;
	top:0.5em; left:0.5em;
}
.asset-selector-list label {
	display:block;
	cursor:pointer;
	height:2em;
	line-height:2em;
	border-radius:0.9em;
	padding:0 0.4em 0 2em;
	transition:background-color 150ms;
	user-select:none;
}
.asset-selector-list label:hover {
	background:#ddd;
}




.asset-selector {
	float:left;
	width:calc(100% - 26em);
}
.asset-selector h3 {
	margin-bottom:0.3em;
	padding-top:0 !important;
}
.asset-selector ul {
	margin-bottom:2em;
	border-bottom:1px solid #ccc;
}
.asset-selector li {
	font-size:0.8em;
	position:relative;
	border-top:1px solid #ccc;
	padding:0.4em 7em 0.4em 2em;
}
.asset-selector input {
	position:absolute;
	top:0.5em; left:0;
}
.asset-selector label {
	display:block;
	word-break:break-all;
}
.asset-selector .button {
	position:absolute;
	top:0.2em; right:0;
	width:5em;
	padding:0;
	line-height:1.8em;
	height:1.8em;
	text-transform:lowercase;
}
.asset-selector span.selected {
	color:#fff;
	background:var(--marge);
}
.asset-preview {
	width:22em;
	position:fixed;
	top:6.8em; right:2em;
	min-height:5em;
}
.asset-loading {
	background:url(/Images/loader.png) center 2em no-repeat;
	background-size:32px 32px;
}
.asset-preview img {
	display:block;
	max-height:22em;
	max-width:22em;
	margin:auto;
}

/*
—————————————————
Dropzones
—————————————————
*/
.dropzone {
	display:block;
	min-height:5.5em;
	background:#f5f5f6;
	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% - 1.9em); left:0;
	width:100%;
	text-align:center;
	color:#aaa;
	font-weight:500;
}
.dropzone span:before {
	content:'\f382';
	display:block;
	font-family:fa-solid;
	font-size:1.6em;
}
.dropzone span.loading-files:before {
	content:'\f013';
	animation:loading 2s linear infinite;
}
@keyframes loading {
	0% { transform:rotate(0deg) }
	to { transform:rotate(1turn) }
}

/*
—————————————————
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 {
	padding:0 1.6em;
	margin:0;
}
.button-remove:before {
	content:'\f1f8';
	font-family:fa-solid;
}


/*
—————————————————————
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-admin {
	width:calc(100% + 1.2em);
	margin:3em -1.2em 2em 0;
}
.pins-admin ul {
	min-height:1200px;
}
.pins-admin li {
	float:left;
	width:calc(25% - 1.2em);
	margin:0 1.2em 2em 0;
	position:relative;
}
.pins-admin li:nth-child(4n+1) {
	clear:left;
}
.pins-sorting li:nth-child(4n+1) {
	clear:none;
}
.pins-admin li.clear {
	clear:left !important;
}
.pins-admin li.ui-sortable-placeholder {
	visibility:visible !important;
	background:#bbb;
	border-radius:16px;
}
.pins-admin .shim {
	display:block;
	position:relative;
}
.pins-admin .image-shim {
	height:0;
}
.pins-admin .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-admin .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-admin .image-shim-loaded:after {
	background:rgba(0,0,0,0.03);
}
.pins-admin li:hover .shim:after {
	background:rgba(0,0,0,0.2);
}
.pins-admin img,
.pins-admin video {
	display:block;
	width:100%;
	box-sizing:border-box;
	border-radius:16px;
}
.pins-admin .image-shim img {
	position:absolute;
	top:0; left:0;
	height:100%;
	opacity:0;
	transition:opacity 250ms;
}
.pins-admin .image-shim img.loaded {
	opacity:1;
}
.editable-pins-admin li {
	cursor:move;
}
.pins-admin 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-admin strong {
	display:block;
	line-height:1.2;
	font-size:0.875em;
	font-weight:500;
	word-wrap:break-word;
}
.pins-admin p a {
	display:none;
}
.editable-pins-admin 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-admin p a:hover {
	background:#f02e75;
}
.pins-admin p a:active {
	background:#e02b6d;
}
.pins-admin a:after {
	font-family:fa-solid;
}
.pins-admin a.zoom:after {
	content:'\f002';
}
.pins-admin a.edit:after {
	content:'\f303';
}
.pins-admin a.delete:after {
	content:'\f2ed';
}
.pins-admin a span {
	display:none;
}
.pins-admin 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-admin li:hover p,
.pins-admin li:hover a.zoom {
	opacity:1;
}
.pins-admin li:hover p {
	bottom:3em;
}
.pins-admin .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;
}






/*
—————————————————
Amendments
—————————————————
*/
#amendments {
	padding:1.2em;
	border-radius:0.6em;
	background:rgba(193 196 203 / 17%);
	margin-bottom:1.3em;
}
#amendments div {
	background:#fff;
	padding:1.6em;
	font-size:0.9333em;
	border-radius:6px;
	margin-bottom:1.2em;
	border-bottom: 3px solid #ddd;
	position:relative;
}
#amendments div:last-child,
#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:var(--maleficent);
	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:var(--barbie);
}
.attachments a:before {
	font-family:fa-solid;
	content:'\f15b';
	margin-right:0.4em;
	color:var(--barbie);
	font-size:1.1em;
}

/*
—————————————————
Company Notes
—————————————————
*/
#company-notes {
	border-radius:0.6em;
	position:relative;
	margin-bottom:1em;
	background:#f5f5f6;
    padding:1.8em;
}
#company-notes div {
	width:calc(100% + 1.2em);
	margin-right:-1.2em;
}
#company-notes a {
	float:left;
	width:calc(33% - 1.2rem);
	margin-right:1.2rem;
	background:#fff;
	padding:1.2em;
	font-size:0.8666em;
	border-radius:5px;
	position:relative;
	border-bottom:2px solid #e5e5e5;
}
#company-notes a:before {
	content:'\f08d';
    font-family:fa-solid;
    color:var(--barbie);
    position:absolute;
    top:-0.5em;
    right:0.5em;
    font-size:1.6em;
    transform:rotate(10deg);
}
#company-notes p {
	margin-bottom:0.7em;
}
#company-notes p:last-child {
	margin:0;
}
#company-notes .stamp {
	display:block;
	color:var(--marge);
	margin-bottom:1.1em;
}
#company-notes .attachments a {
	border:0;
}

/*
—————————————————
Placeholders
—————————————————
*/
.template-wrapper {
	float:left;
	width:calc(100% - 35em);
}
.placeholder-list {
	float:right;
	width:32rem;
	font-size:0.866em;
}
.placeholder-list dt,
.placeholder-list dd {
	float:left;
	border-top:1px solid #ddd;
	padding:0.3em 0;
}
.placeholder-list dt {
	clear:left;
	width:12rem;
	padding-right:1em;
	cursor:pointer;
}
.placeholder-list dt:hover {
	color:var(--barbie);
}
.placeholder-list dd {
	width:20rem;
}






/*
—————————————————
Creative
—————————————————
*/
.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;
	xfont-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-dots-horizontal:before {
	content:'\f141';
}
.context-menu ul {
	display:none;
	position:absolute;
	top:3.2em; right:0;
	min-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;
}
.section-readonly .context-menu ul {
	
}



.context-menu .log-text {
	font-size:0.8em;
	color:#888;
	width:100%;
	padding:0.7em 1em 0.4em 1em;
	margin-top:0.7em;
	border-top:1px solid #ddd;
}
.context-menu .log-text p {
	margin:0;
}


.context-menu-active ul {
	display:block;
}
.context-menu-active ul ul {
	display:none;
}
.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-light;
	width:1em;
	text-align:center;
	margin-right:0.8em;
}
.context-menu a.blank:before {
	content:'';
}
.context-menu a.edit:before {
	content:'\f044';
}
.context-menu a.add:before {
	content:'\f067';
}
.context-menu a.effort:before {
	content:'\f44b';
}
.context-menu a.tick:before {
	content:'\f00c';
}
.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.cloud:before {
	content:'\f0c2';
}
.context-menu a.previous:before {
	content:'\f1da';
}
.context-menu a.save:before {
	content:'\f0c7';
}
.context-menu a.print:before {
	content:'\f03a';
}
.context-menu a.clock:before {
	content:'\f017';
}
.context-menu a.person:before {
	content:'\f007';
}
.context-menu a.copy:before {
	content:'\f0c5';
}
.context-menu a.sort:before {
	content:'\e099';
}
.context-menu a.up:before {
	content:'\f062';
}
.context-menu a.down:before {
	content:'\f063';
}
.context-menu a.move:before {
	content:'\f061';
}
.context-menu a.squares:before {
	content:'\f009';
}
.context-menu a.highlighter:before {
	content:'\f591';
}
.context-menu a.upload:before {
	content:'\f382';
}
.context-menu a.import:before {
	content:'\f56f';
}
.context-menu .parent a.icon:after {
	content:'\f105';
	font-family:fa-light;
	width:2em;
	text-align:center;
	position:absolute;
	top:0.2em; right:0;
}
.context-menu .section-top a.icon:after {
	top:0.6em;
}
.context-menu .parent {
	position:relative;
}
.context-menu .parent ul {
	top:-0.4em;
    left:calc(100% - 0.2em);
	right:auto;
}
.context-menu .parent:hover ul {
	display:block;
}








.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,
.button-preview,
.button-send {
	padding-left:0.8em;
}
.button-email:before,
.button-preview:before,
.button-send:before {
	content:'\f1d8';
	font-family:fa-solid;
	font-weight:normal;
	margin-right:0.4em;
	display:inline-block;
	width:1em;
}
.button-preview:before {
	content:'\f06e';
}
.button-send {
	display:block;
	width:auto;
	color:#777;
	background:#fff !important;
	margin-bottom:2em;
	padding:0.4em;
	height:auto;
	border-radius:0.5em;
	box-shadow:0 0.15em 0.4em rgb(0 0 0 / 5%);
}
.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;
}



.button-menu {
	float:left;
	position:relative;
}
.button-menu ul {
	display:none;
	position:absolute;
	top:3em; right:0;
	z-index:100;
	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;
}



/*
—————————————————
Briefing Form
—————————————————
*/
#form .select-list label {
	display:block;
	margin-bottom:1em;
	border-radius:0.3em;
	padding:0.3em 0.5em;
	text-align:center;
}
#form .select-list li {
	margin-bottom:0.5em;
	user-select:none;
}
#form .select-list input {
	display:none;
}
#form .select-list input + label {
	display:flex;
	position:relative;
	color:inherit;
	background:#fff;
	border:2px solid #fff;
	cursor:pointer;
	box-shadow:0 0 1em rgba(0,0,0,0.03);
	font-size:1rem;
	font-weight:normal;
	align-items:center;
	justify-content:center;
	margin:0;
}
#form .select-list input + label:hover {
	border-color:#d5e6f3;
}
#form .select-list input:checked + label {
	color:#fff;
	background:#4987c3;
	border-color:#4987c3;
}




#form #objectives {
	margin-bottom:2em;
}
#form #objectives li {
	float:left;
	width:calc(33.333% - 1em);
	margin-right:1em;
	margin-bottom:1em;
}
#form #objectives input + label {
	height:6em;
	padding-left:5em;
	text-align:left;
	justify-content:left;
}
#form #objectives label:before {
	content:'';
	font-family:fa-light;
	font-size:2em;
	position:absolute;
	top:1em; left:0.7em;
	line-height:1;
	color:#cddbec;
	color:rgba(73 135 195 / 40%);
	width:1.2em;
	text-align:center;
}
#form #objectives li.sales label:before   { content:'\f07a' }
#form #objectives li.leads label:before   { content:'\e0e5' }
#form #objectives li.traffic label:before { content:'\f245' }
#form #objectives li.brand label:before   { content:'\f02b' }
#form #objectives li.reach label:before   { content:'\f0a1' }
#form #objectives li.app label:before     { content:'\f3ce' }

#form #objectives input:checked + label:before {
	content:'\f00c';
	color:rgba(255,255,255,0.7);
}




#demographics  {
	width:calc(100% + 2em);
	margin-right:-2em;
	margin-bottom:2em;
}
#demographics div {
	float:left;
	width:calc(25% - 2em);
	margin-right:2em;
}


#brief-builder  {
	width:calc(100% + 2em);
	margin-right:-2em;
	margin-bottom:2em;
}
#brief-builder div {
	float:left;
	width:calc(33.33% - 2em);
	margin-right:2em;
}
#form #brief-builder label {
	display:flex;
	height:3em;
	align-items:center;
	justify-content:center;
}



#form .yes-no,
#form .radio {
	margin:0.5em 0 2.2em 0 !important;
	padding-left:1em;
	border-left:0.3em solid #d8e5f2;
}
#form .yes-no br {
	display:none;
}
#form .yes-no input {
	position:relative;
	left:1em;
	opacity:0;
}
#form .yes-no label:first-child,
#form .radio label:first-child {
	display:block;
	padding:0;
	background:none;
	margin-bottom:0.7em;
	font-weight:normal;
	color:inherit;
	max-width:55em;
}
#form .radio span label {
	display:inline;
	background:none;
}
#form .yes-no span label {
	display:inline-block;
	background:#fff;
	border-bottom: 1px solid #d2d2d2;
    box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 4%);
	color:#777;
	font-size:1rem !important;
	line-height:2em;
	border-radius:1em;
	padding:0 1em;
	min-width:5em;
	text-align:center;
	cursor:pointer;
	position:relative;
	left:-1em;
	user-select:none;
	box-sizing:border-box;
}
#form .yes-no span label:hover {
	background:#fff;
}
#form .yes-no span label:active {
	border-color:#bbb;
	box-shadow:0 0 0.7em #e5e5e5;
}
#form .yes-no span :checked+label {
	color:#fff;
	background:#4987c3;
	border:0;
	box-shadow:0 0 0.7em #e5e5e5;
}


.selection-lozenges {
	margin-top:2em;
}
.selection-lozenges li {
	display:inline-block;
	line-height:2em;
	border-radius:1em;
	margin:0 0.5em 0.7em 0;
	font-weight:500;
	padding:0 2.2em 0 1em;
	position:relative;
	user-select:none;
	color:#fff;
	background:#4987c3;
}
.selection-lozenges li strong {
	font-weight:500;
}
.selection-lozenges li .remove {
	position:absolute;
	top:0.5em; right:0.5em;
	width:1em; height:1em;
	cursor:pointer;
}
.selection-lozenges li .remove:after {
	content:'\f057';
	display:block;
	font-family:fa-solid;
	width:1em;
	height:1em;
	line-height:1em;
	text-align:center;
}


.starters li {
	display:inline-block;
	line-height:2em;
	border-radius:1em;
	margin:0 0.3em 0.7em 0;
	font-weight:500;
	padding:0 1em;
	position:relative;
	user-select:none;
	color:#fff;
	background:#4987c3;
	cursor:pointer;
	font-size:0.866em;

	color:#4987c3;
	background:#d5e6f3;
}





#brief-steps ul  {
	max-width:50em;
	margin:auto;
	border-radius:0.7em;
	overflow:hidden;
	height:2.6em;
	background:#eaebed;
	margin-bottom:2em;
	padding:0.3em;
}
#brief-steps li {
	float:left;
	width:calc(25% - 0.225em);
	margin-right:0.3em;
	line-height:2em;
	text-align:center;
	cursor:pointer;
	border-radius:0.5em;
	transition:background-color 100ms;
}
#brief-steps li:last-child {
	margin:0;
}
#brief-steps li:hover {
	background:rgba(255,255,255,0.8);
}
#brief-steps li.selected {
	color:#fff;
	background:var(--barbie);
}

/*
—————————————————
Project Actions
—————————————————
*/
#project-actions {
	position:absolute;
	top:2.5em; right:2em;
}
#project-actions .button {
	float:left;
	margin-left:1em;
}



/*
—————————————————
Status Bar
—————————————————
*/
.status-message {
	margin:0 0 1.8em 0;
	text-align:center;
}
.status-message p {
	display:inline-block;	
	padding:0.5em 1.2em 0.5em 0.8em;
	line-height:2;
	border-bottom:3px solid #dadbdd;
	border-radius:3em;
	margin:0;
	background:#fff;
}
.status-message p:before {
	float:left;
	content:'\f0a4';
	color:var(--barbie);
	font-family:fa-solid;
	font-size:1.75em;
	line-height:2rem;
	margin-right:0.5em;
}
.accepted-message p:before {
	content:'\f00c';
	color:var(--maleficent);
}
.status-message .button {
	margin:0 -0.6em 0 0.8em!important;
}




/*
—————————————————
Overlays
—————————————————
*/
html.overlay {
	font-size:15px;
	background:#f5f5f6;
}
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:2em;
	overflow:hidden;
}
.overlay #form {
	padding:0;
	margin:0;
	background:none;
	max-width:100%;
}
.overlay p.form-buttons {
	margin:2.5em 0 0 0;
	max-width:100%;
}
.overlay .button {
	backface-visibility:hidden;
	font-size:1em;
}
.overlay .button-small {
	font-size:0.866em;
}
.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 #form .checkboxes label span.last-invited {
	font-weight:500;
	font-size:0.8em;
	display:inline-block;
	color:#fff;
	background:var(--barbie);
	padding:0.05em 0.4em;
	border-radius:1em;
	margin-left:0.4em;
}
.overlay h2.confirm {
	display:block;
	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;
	font-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 {
	display:block;
	margin:auto;
	width:6em;
	height:6em;
	margin-bottom:3em;
}


/*
—————————————————
Brief Summary
—————————————————
*/

.summary-page {
	padding:2.5em;
	border-radius:0.6em;
	background:rgba(193 196 203 / 17%);
	margin-bottom:1.3em;
}
.brief-summary .brief-section {
	background:#fff;
	border-radius:0.5em;
	padding:1.2em 1.2em 1.2em 15em;
	margin-bottom:0.8em;
	position:relative;
	min-height:5em;
	overflow:hidden;
}
.brief-summary h3 {
	position:absolute;
	top:0; left:0;
	color:#fff;
	background:var(--marge);
	font-size:1.1em;
	padding:0.1em 0.8em;
	border-radius:0 0 0.6rem 0;
}
.brief-summary h4 {
	font-weight:500;
	font-size:1.05em;
	margin-top:1.6em;
	margin-bottom:0.5rem;
}
.brief-summary h3 + h4 {
	margin-top:0;
}
.brief-summary .not-added {
	display:block;
	color:#bbb;
	margin-top:-0.4em;
}
.brief-summary p {
	margin-bottom:0.5em;
	max-width:760px;
}
.brief-summary ul.bullet {
	padding-left:1.2em;
	margin-bottom:1em;
}
.brief-summary ul.bullet li {
	margin:0;
}
.brief-summary .brief-section p:last-child,
.brief-summary .brief-section ul.bullet:last-child {
	margin:0 !important;
}

.file-list li {
	font-size:0.8em;
}
.file-list a {
	color:inherit;
}
.file-list a:hover {
	color:var(--barbie);
}
.file-list span.filename {
	display:block;
	padding:0.4em 0;
	line-height:1;
	width:calc(100% - 6em);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.file-list span.filename:before {
	content:'\f15b';
	font-family:fa-light;
	float:left;
	width:1.2em;
	text-align:center;
	margin-right:0.3em;
	color:#94b8d3;
}
.creative-briefs-wrapper .button {
	display:none;
}


/*
—————————————————
Brief Readonly Page
—————————————————
*/
.editable-content-container {
	display:none;
	position:absolute;
	top:4.5em; left:0;
	width:100%;
	height:calc(100% - 4.5em);
	overflow-y:scroll;
	padding:3em;
	border-top:1px solid #ccc;
}
@media only screen and (max-width:1600px) {
	.editable-content-container {
		top:4em;
		height:calc(100% - 4em);
	}
}



/*
—————————————————
Brief Editor
—————————————————
*/
.brief-editor-wrapper {
	background:#f1f1f4;
}
.brief-editor-wrapper h1 span {
	font-weight:normal;
}
.brief-editor-wrapper .section-readonly .section-content {
	border-radius:0 0.6em 0.6em 0.6em;
}


.page-dirty {
	display:none;
	color:#fff;
	background:var(--leela);
	margin-bottom:2em;
	padding:0.4em 1.2em;
	border-radius:00.5em;
}
.page-dirty a {
	display:inline-block;
	background:rgba(255,255,255,0.6);
	color:var(--leela);
	font-size:0.8em;
	font-weight:500;
	margin-left:1em;
	padding:0 0.6em;
	border-radius:1em;
}
#editor-panel {
	position:relative;
	transition:background-color 150ms;
	z-index:1;
}
#editor-panel .button-small {
	height:2em;
	line-height:2em;
	font-size:1em;
}
#editor-panel .button + .trigger {
	font-size:1em;
}
#editor-panel .button-gray {
	background:#e9e9ea;
}
#editor-panel .button-gray:active {
	background:#e2e2e4;
}
#info-panel {
	position:absolute;
	top:1em; left:1em;
	width:36em;
	height:calc(100vh - 2em);
	padding:1em;
	border-radius:1em;
	background:#f1f1f4;
	z-index:3;
}
#editor-panel + #info-panel {
	position:fixed;
	left:auto; top:0; right:0;
	overflow:hidden;
	background:#dadce4;
	height:100%;
	padding:1.6em;
	border-radius:0;

	background:none;
	padding:0;
	top:15.3em;
    right:13em;
	height:auto;
}
#editor-panel + #info-panel #task-content {
	border-radius:0.5em;
	height:auto;
	overflow:hidden;
	border-left:3px solid var(--barbie);
}


.brief-editable dt:hover,
.brief-editable .subsection-markup:hover {
	background:#f4f4f7;
}
.brief-editable dt:focus,
.brief-editable .subsection-markup:focus {
	background:#fffddd;
}
.brief-editable dd p:first-child,
.brief-editable dd ul:first-child {
	margin-top:0 !important;
}
.brief-editable dd p:last-child,
.brief-editable dd ul:last-child {
	margin-bottom:0 !important;
}
.comments-selector {
	position:absolute;
	top:0; right:2em;
	cursor:pointer;
}
.brief-editable dd .subsection-markup {
	background:#fff;
	padding:0.2em 0.3em !important;
	border:0 !important;
	border-radius:0 !important;
	box-shadow:none !important;
	outline:0 !important;
}
.brief-editable dd.editing {
	position:relative;
}
.brief-editable dd.editing .subsection-markup {
	pointer-events:none;
	border:1px solid orange !important;
	background:#fefbf5;
	position:relative;
}
.brief-editable span.editing-detail {
	display:none;
}
.brief-editable dd.editing span.editing-detail {
	display:block;
	background:orange;
	color:#fff;
	position:absolute;
	top:0; right:0;
	font-size:0.8em;
	font-weight:500;
	padding:0.1em 0.3em;
}


.brief-editable dd .subsection-markup h2:first-child,
.brief-editable dd .subsection-markup h3:first-child,
.brief-editable dd .subsection-markup h4:first-child,
.brief-editable dd .subsection-markup p:first-child {
	margin-top:0 !important;
}
.brief-editable dd .subsection-markup h2,
.brief-editable dd .subsection-markup h3,
.brief-editable dd .subsection-markup h4 {
	font-weight:500;
}
.brief-editable dd .subsection-markup h2 + h3 {
	padding-top:0;
}
.brief-editable dd .subsection-markup p,
.brief-editable dd .subsection-markup h4,
.brief-editable dd .subsection-markup blockquote {
	margin-bottom:1em;
}
.brief-editable dd .subsection-markup {
	counter-reset:termscounter;
}
.brief-editable dd .subsection-markup a {
	color:#f32d75;
}
.brief-editable dd .subsection-markup ol {
	padding-left:1.8em;
	margin:0 0 1.2em 0;
}
.brief-editable dd .subsection-markup ol li {
	padding-left:0.5em;
	margin-bottom:0.4em;
	list-style:none;
}
.brief-editable dd .subsection-markup ol li:before {
	content:counter(termscounter) '. ';
	counter-increment:termscounter;
	display:inline-block;
	width:1.8em;
	margin-left:-1.8em;
}
.brief-editable dd .subsection-markup ol li ol {
	counter-increment:none;
	margin:0.4em 0 1.2em 1.3em;
}
.brief-editable dd .subsection-markup ol li ol li {
	list-style:lower-alpha outside;
}
.brief-editable dd .subsection-markup ol li ol li:before {
	counter-increment:none;
	content:'';
}
.brief-editable dd .subsection-markup ul {
	padding-left:2.3em;
	margin:0 0 1.2em 0;
}
.brief-editable dd .subsection-markup ul li {
	list-style:disc;
	margin-bottom:0.4em;
}









/*
—————————————————
Brief Editable
—————————————————

.brief-editable {
	padding:2.5em;
	border-radius:0.6em;
	background:rgba(193 196 203 / 17%);
	margin-bottom:1.3em;
	margin-right:30em;
	position:relative;
}
.editable-brief-comments {
	position:fixed;
	top:10em; right:3em;
	width:28em;
	height:calc(100% - 13em);
	background:#dadce4;
	border-radius:0.6em;
	padding:1em;
}
.brief-editable dd {
	outline:0;
}
.brief-editable dd:hover {
	background:#f4f4f7;
}
.brief-editable dd:focus {
	background:#fffddd;
}
.comments-selector {
	position:absolute;
	top:0; right:0;
	cursor:pointer;
}
.round-tasks {
	display:none;
}
.round-tasks-active {
	display:block;
}
*/

/*
—————————————————
CK Editor
—————————————————
*/
.ck-editor__editable_inline,
.ck-editor__editable_inline.ck-focused {
	background:#fff;
	padding:1.3em !important;
	border:1px solid #fff !important;
	border-bottom-color:#ddd !important;
	border-radius:0 5px 5px 5px !important;
	box-shadow:0 0.1em 0.2em rgb(0 0 0 / 4%) !important;
}
.ck-editor__editable_inline.ck-focused {
	outline:0;
	border-color:#6cbbe8 !important;
}
#form .ck-editor__editable_inline h2:first-child,
#form .ck-editor__editable_inline h3:first-child,
#form .ck-editor__editable_inline h4:first-child,
#form .ck-editor__editable_inline p:first-child {
	margin-top:0 !important;
}
#form .ck-editor__editable_inline h2,
#form .ck-editor__editable_inline h3,
#form .ck-editor__editable_inline h4 {
	font-weight:500;
}
#form .ck-editor__editable_inline h2 + h3 {
	padding-top:0;
}
#form .ck-editor__editable_inline p,
#form .ck-editor__editable_inline h4,
#form .ck-editor__editable_inline blockquote {
	margin-bottom:1em;
}
#form .ck-editor__editable_inline {
	counter-reset:termscounter;
}
#form .ck-editor__editable_inline a {
	color:#f32d75;
}
#form .ck-editor__editable_inline ol {
	padding-left:1.8em;
	margin:0 0 1.2em 0;
}
#form .ck-editor__editable_inline ol li {
	padding-left:0.5em;
	margin-bottom:0.4em;
	list-style:none;
}
#form .ck-editor__editable_inline ol li:before {
	content:counter(termscounter) '. ';
	counter-increment:termscounter;
	display:inline-block;
	width:1.8em;
	margin-left:-1.8em;
}
#form .ck-editor__editable_inline ol li ol {
	counter-increment:none;
	margin:0.4em 0 1.2em 1.3em;
}
#form .ck-editor__editable_inline ol li ol li {
	list-style:lower-alpha outside;
}
#form .ck-editor__editable_inline ol li ol li:before {
	counter-increment:none;
	content:'';
}
#form .ck-editor__editable_inline ul {
	padding-left:2.3em;
	margin:0 0 1.2em 0;
}
#form .ck-editor__editable_inline ul li {
	list-style:disc;
	margin-bottom:0.4em;
}


/*
—————————————————
Intake Form
—————————————————
*/
.connect-logos {
	width:100%;
	height:7em;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-bottom:3em;
	position:relative;
}
html.intake {
	xfont-size:16px;
	overflow-y:scroll;
}
.connect-logos:after {
	content:'';
	position:absolute;
	top:1.5em; left:50%;
	height:4em;
	border-left:1px solid #000;
}
.connect-logos img {
	width:11em;
	margin:0 2.5em;
}
.connect-logos .logo-ols {
	height:6.47em;
}
.connect-logos .logo-pp {
	height:2.84em;
}
.intake-form {
	padding-bottom:5em;
}
.intake-intro {
	margin:auto;
	font-size:1.2em;
	max-width:37em;
	text-align:center;
	margin-bottom:2.5em;
	line-height:1.6;
}
.intake-form h2 {
	display:block;
	text-align:center;
	letter-spacing:-0.02em;
	font-size:1.7em;
	font-weight:normal;
}
.adjacent-fields {
	margin-bottom:2.5em;
}
.adjacent-fields p {
	float:left;
	padding:0 0.6em;
	position:relative;
}
.adjacent-fields p:first-child {
	padding-left:0;
}
.adjacent-fields p:last-child {
	padding-right:0;
}
.adjacent-fields label {
	display:block;
	font-size:0.85em;
	text-align:center;
	margin-bottom:0.3em;
}
.adjacent-fields input.text {
	display:block;
	width:100%;
	height:2.6em;
	background:#f0f0f0;
	border-radius:1.3em;
	border:0;
	padding:0.6em 1em;
	line-height:1.4;
	outline:0;
	border:2px solid transparent;
	transition:border-color 200ms, background-color 200ms;
	text-align:center;
}
.adjacent-fields input.text::placeholder {
	color:#999;
}
.adjacent-fields input.text:focus {
	border-color:#90d4f0;
	background:#fff;
}
.adjacent-fields input.error,
.adjacent-fields input.error:focus {
	border-color:var(--barbie);
	background:#fff;
}
#package-error {
	color:var(--barbie);
	opacity:0;
	transition:opacity 200ms;
}
#package-error.package-error-visible {
	opacity:1;
}

#verified {
	float:none;
	text-align:center;
	display:none;
}
#verified:before {
	content:'\f00c';
	font-family:fa-solid;
	color:var(--maleficent);
	margin-right:0.3em;
}


.package-wrapper {
	margin-bottom:3em;
}
.choose-package {
	text-align:center;
}
.choose-package li {
	display:inline-block;
	vertical-align:top;
	width:15%;
	padding:0 0.5em;
	margin-bottom:1em;
}
.choose-package li:nth-child(5):before {
	content:'\a';
}
.choose-package li input {
	display:none;
}
.choose-package label {
	display:block;
	transition:opacity 150ms;
}
.has-selection label {
	opacity:0.5;
}
.choose-package input:checked + label {
	opacity:1;
}
.choose-package li .product-icon-wrapper {
	display:block;
	width:0;
	height:0;
	padding:50%;
	background-size:100%;
	cursor:pointer;
	position:relative;
}
.choose-package li .product-icon {
	pointer-events:none;
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
}
.choose-package li .product-icon img {
	display:block;
	margin:auto;
	height:100%;
	transition:transform 150ms;
}

.choose-package li:nth-child(1) .product-icon-wrapper { background-image:url(/Images/Blobs/1.png) }
.choose-package li:nth-child(2) .product-icon-wrapper { background-image:url(/Images/Blobs/2.png) }
.choose-package li:nth-child(3) .product-icon-wrapper { background-image:url(/Images/Blobs/3.png) }
.choose-package li:nth-child(4) .product-icon-wrapper { background-image:url(/Images/Blobs/4.png) }
.choose-package li:nth-child(5) .product-icon-wrapper { background-image:url(/Images/Blobs/5.png) }
.choose-package li:nth-child(6) .product-icon-wrapper { background-image:url(/Images/Blobs/6.png) }
.choose-package li:nth-child(7) .product-icon-wrapper { background-image:url(/Images/Blobs/7.png) }
.choose-package li:nth-child(8) .product-icon-wrapper { background-image:url(/Images/Blobs/8.png) }

.choose-package + .choose-package li:nth-child(1) .product-icon-wrapper { background-image:url(/Images/Blobs/5.png) }
.choose-package + .choose-package li:nth-child(2) .product-icon-wrapper { background-image:url(/Images/Blobs/6.png) }
.choose-package + .choose-package li:nth-child(3) .product-icon-wrapper { background-image:url(/Images/Blobs/7.png) }
.choose-package + .choose-package li:nth-child(4) .product-icon-wrapper { background-image:url(/Images/Blobs/8.png) }



.choose-package li:hover img {
	transform:scale(1.1);
}
.choose-package li span {
	display:block;
	font-size:0.9em;
	line-height:1.2;
	text-align:center;
}



#product-detail {
	margin-bottom:4em;
}

.connect-package-detail {
	display:none;
	background:#fff;
	border-radius:1em;
	box-shadow:0 0 0.6em rgba(0,0,0,0.15);
	padding:2em;
}
.connect-package-detail ul {
	margin-bottom:1em;
}
.connect-package-detail h2 {
	text-align:left;
}


.package-checkboxes {
	margin-top:1.5em;
}
.package-checkboxes br,
.package-checkboxes input {
	display:none;
}
.package-checkboxes label {
	display:block;
	padding:0.5em 0 0.5em 2em;
	cursor:pointer;
	position:relative;
}
.package-checkboxes label:before {
	content:'';
	position:absolute;
	top:0.4em; left:0;
	font-family:fa-solid;
	background:#ddd;
	width:1.6em;
	height:1.6em;
	line-height:1.6em;
	cursor:pointer;
	text-align:center;
	border-radius:5px;
}
.package-checkboxes label:hover:before {
	background:#d7d7d7;
}
.package-checkboxes input[type="radio"]:checked + label:before {
	content:'\f00c';
	color:#fff;
	background:var(--marge);
}
.package-checkboxes .button {
	width:7em;
	margin-top:2em;
}






.timeline-wrapper {
	height:6em;
	margin-bottom:2em;
}
.timeline-content-obscured {
	position:relative;
}
.timeline-content-obscured .timeline-wrapper {
	filter:blur(3px);
	opacity:0.3;
}
#feed .timeline-content-obscured .timeline-wrapper {
	filter:none;
	opacity:1;
}
.timeline-phases {
	width:100%;
	height:1.6rem;
}
.timeline-phases .phase {
	float:left;
	height:1.6rem;
	text-align:center;
	color:#fff;
	font-size:0.9em;
	line-height:1.6rem;
	position:relative;
}
.timeline-phases .client-phase {
	background:#7E84AD;
}
.timeline-phases .client-phase:before {
	content:'Feedback';
	position:absolute;
	top:-1.4em; left:calc(50% - 3em);
	width:6em;
	text-align:center;
	font-size:0.8em;
	xfont-weight:500;
	text-transform:lowercase;
	color:var(--ursula);
	line-height:1.05;
}
.timeline-phases .client-phase:first-child,
.timeline-phases .studio-phase:first-child {
	border-radius:2em 0 0 2em;
}
.timeline-phases .client-phase:first-child:before {
	xtop:-2.65em;
	content:'Brief & Assets';
	width:10em;
	left:calc(50% - 5em);
}
.timeline-phases .studio-phase {
	background:var(--elsa);
}
.timeline-phases .studio-phase:before {
	xcontent:'Studio';
	position:absolute;
	top:-1.6em; left:calc(50% - 3em);
	width:6em;
	text-align:center;
	font-size:0.77em;
	font-weight:500;
	text-transform:lowercase;
	color:#f32d75;
	color:#aaa;
	line-height:1.05;
}
.timeline-phases .studio-phase:last-child {
	border-top-right-radius:2em;
	border-bottom-right-radius:2em;
}
.timeline-message-wrapper {
	text-align:center;
	margin-top:2em;
}
#feed .timeline-message-wrapper {
	display:none;
}
.timeline-message {
	display:inline-block;
	text-align:center;
	color:var(--leela);
	background-color:rgba(var(--leelaRGB), 0.12);
	font-size:0.9em;
	padding:0.5em 2em;
	border-radius:5em;
	margin:0;
}
.timeline-message-prominent {
	color:#fff;
	background-color:var(--leela);
	position:relative;
	top:-8em;
}
.timeline-days {
	width:100%;
	height:1.2rem;
	xopacity:0;
	transition:opacity 200ms;
}
.timeline-wrapper:hover .timeline-days {
	opacity:1;
}
.timeline-days div {
	float:left;
	height:1.2rem;
	box-sizing:border-box;
	border-right:1px solid #dadada;
	text-align:center;
	color:#c0c0c0;
	font-size:0.8em;
	line-height:1.2rem;
	position:relative;
	cursor:default;
}
.timeline-days div.weekend {
	color:#b5b5b5;
	background:#e8e8e8;
	border:0;
}
.timeline-days div.weekend + div.weekend {
	border-right:1px solid #dadada;
}
.timeline-days div.holiday {
	background:#d8d8d8;
}
.timeline-days div.today {
	color:#fff;
	background:var(--barbie);
}
.timeline-days div.today:before {
	content:'TODAY';
	font-weight:500;
	font-size:0.6rem;
}
.timeline-days div .date-label {
	position:absolute;
	top:2em; left:0;
	white-space:nowrap;
	color:#333;
	background:#fff;
	padding:0.3em 0.6em;
	border-radius:0.3em;
	box-shadow:0 0 0.5em #00000055;
	text-align:left;
	display:none;
}
.timeline-days div .date-label strong {
	display:block;
	font-weight:500;
}
.timeline-days div:hover {
	color:#777;
	background-color:#ffd;
}
.timeline-days div:hover .date-label {
	display:block;
}
.phase-start-date,
.phase-end-date {
	position:absolute;
	top:1.6rem; 
	padding-top:2em;
	color:#444;
	line-height:1.1;
	width:8em;
}
.phase-start-date {
	left:-0.5px;
	text-align:left;
	padding-left:0.5em;
	border-left:1px solid #dadada;
}
.phase-end-date {
	right:0;
	text-align:right;
	padding-right:0.5em;
	border-right:1px solid #dadada;
}
.phase-start-date strong,
.phase-end-date strong {
	font-size:1.1em;
	font-weight:500;
}



.create-button {
	text-align:center;
	font-size:1.3em;
	display:none;
}

#intake-team .team-column {
	width:50%;
	margin:0;
}





.dashboard-box {
	background:#fff;
	padding:2em;
	border-radius:1em;
	box-shadow:0 0 0.4em rgba(0,0,0,0.2);
	xmin-height:20em;
	overflow:hidden;
	margin-bottom:2em;
}
.dashboard-box h2 {
	display:block;
	background:#f0f0f0;
	text-align:center;
	margin:-2rem -2rem 2rem -2rem;
	padding:0.3em;
}
.dashboard-box h2.highlighted {
	color:#fff;
	background:var(--barbie);
}
#content.dashboard {
	background:url(/Images/blob-tl.svg) top left no-repeat, url(/Images/blob-tr.svg) top right no-repeat, url(/Images/blob-br.svg) bottom right no-repeat, url(/Images/blob-bl.svg) bottom left no-repeat;
	background-size:25%,25%,25%,25%; 
}
.content-wrapper .sow-details dl {
	float:left;
	font-size:1.1rem;
	margin-bottom:1em;
}
.content-wrapper .sow-details dt {
	width:6em;
	font-weight:500;
	padding:0;
	margin-bottom:0.2rem;
}
.content-wrapper .sow-details dd {
	width:auto;
	font-weight:normal;
	padding:0;
	border:0;
	margin-bottom:0.2rem;
}
.content-wrapper .sow-details input.date {
	border:0;
	background:#f0f0f0;
	border-radius:2em;
	font-size:0.8em;
	padding:0.3em 0.5em;
}
.other-packages {
	
}

/*
float: left;
    clear: both;
    width: 12rem;
    padding-right: 1.4rem;
    font-weight: 500;


	    float: left;
    width: calc(100% - 12rem);
    padding: 0 0 1.8em 1em;
    border-left: 1px solid #ccc;

	*/


.adjacent-boxes {
	display:table;
	width:100%;
	height:100%;
}
.adjacent-boxes .dashboard-box {
	height:100%;
	margin:0;
}
.dashboard-box-team {
	display:table-cell;
	width:66%;
	height:100%;
	padding-right:1em;
}
.dashboard-box-steps {
	display:table-cell;
	width:calc(34% - 1em);
	height:100%;
}





.package-graphic {
	float:left;
	transition:opacity 150ms;
	width:10em;
	height:10em;
	background-image:url(/Images/Blobs/1.png);
	background-size:100%;
	position:relative;
	margin-top:-1em;
}
.package-graphic .product-icon {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
}
.package-graphic .product-icon img {
	display:block;
	margin:auto;
	height:100%;
}
.package-graphic + .sow-details {
	float:right;
	width:calc(100% - 11.5em);
}
.terms-note {
	display:block;
	margin-top:1.2em;
	text-align:center;
	font-size:0.8em;
}
.terms-note a {
	color:var(--barbie);
}



.dashboard-box-team h4 {
	font-weight:500;
	margin-bottom:0.7em;
}
.team-person {
	background:rgba(193 196 203 / 23%);
	padding:0.8em 0.5em 0 4em;
	height:3.8em;
	border-radius:1.9em;
	line-height:1.1;
	position:relative;
	margin-bottom:1.5em;
}
.team-person .avatar {
	position:absolute;
	top:0.5rem; left:0.5rem;
	margin:0;
	color:#fff;
}
.team-person strong {
	display:block;
	font-weight:500;
}
.team-person .email {
	font-size:0.8em;
}
.team-avatars {
	font-size:0.75em;
	margin-bottom:2em;
}
.team-avatars li {
	float:left;
	margin:0 0.4em 0.4em 0;
}

#fine-print {
	text-align:center;
	margin-top:1em;
	color:#999;
}
#fine-print li {
	display:inline-block;
	text-transform:lowercase;
}
#fine-print li:after {
	display:inline-block;
	width:1.5em;
	content:'\2022';
}
#fine-print li:last-child:after {
	display:none;
}



/*
—————————————————
Import Creative
—————————————————
*/
.import-creative {
	border-bottom:1px solid #d7d7d7;
	margin:-0.4em 0 2.3em 0;
}
.import-creative li {
	border-top:1px solid #d7d7d7;
	padding-top:0.4em;
	height:2.8em;
}
.import-creative li:hover label {
	color:var(--barbie) !important;
}
.radio-buttons li {
	padding-top:0.7em;
}
.import-creative li span {
	float:left;
	padding-top:0.7em;
	line-height:1;
}
.import-creative li span span {
	float:none;
	padding:0;
}
#form .import-creative select {
	float:right;
	width:15em;
	font-size:0.9em;
	padding:0.4em 0.5em;
}
.import-creative .figma-preview {
	display:none;
	max-width:12em;
	max-height:12em;
	position:absolute;
	top:2.6em;
	left:1.4em;
	z-index:2;
	background:#fff;
	padding:0.5em;
	border-radius:0.4em;
	box-shadow:0 0 1em rgba(0,0,0,0.2);
}
.import-creative li:hover .figma-preview {
	display:block;
}



/*
—————————————————
Calculator
—————————————————
*/
#calculator-budget {
	float:left;
	width:calc(78% - 2.5em);
}
#calculator-counter {
	float:right;
	width:22%;
}

#calculator .column-headers {
	color:#fff;
	background:var(--barbie);
	height:2.8em;
	padding:0.4em 0;
	border-radius:0.4em 0.4em 0 0;
}
#calculator-counter .column-headers {
	color:#666;
	background:#ccc;
}
#calculator .column-headers div {
	line-height:2;
}
#calculator .description {
	float:left;
	width:24%;
	padding:0 1em;
}
#calculator .price {
	float:left;
	width:10%;
	padding:0 2em 0 0;
	text-align:right;
	color:#c2c2c2;
}
#calculator .column-headers .price {
	color:#fff;
}
#calculator .quantity {
	float:left;
	width:10%;
	padding:0 0.5em;
	text-align:right;
}
#calculator  .column-headers .quantity {
	padding-right:1em;
}
#calculator .column-headers .quantity-year {
	padding-right:0.5em;
}
#calculator .column-headers .quantity-credits,
#calculator .quantity-credits {
	width:16%;
	padding-right:2em;
}
#calculator .quantity span {
	color:#c2c2c2;
	margin-right:0.2em;
	opacity:0;
	transition:opacity 300ms;
}
#calculator .quantity span:after {
	content:' /';
}
#calculator.show-previous .quantity span {
	opacity:1;
}
#calculator .quantity input {
	display:block;
	background:#f2f2f2;
	border-radius:0.3em;
	width:2.8em;
	height:1.6em;
	float:right;
	text-align:right;
	border:0;
	outline:0;
	padding:0 0.5em;
}
#calculator .quantity input:focus {
	background:#ffffc2;
}
#calculator .quantity input::-webkit-outer-spin-button, 
#calculator .quantity input::-webkit-inner-spin-button {
	-webkit-appearance:none;
	margin:0;
}
#calculator .quantity input[type=number] {
	-moz-appearance:textfield;
}
#calculator .quantity strong {
	font-weight:normal;
}
#calculator .completed,
#calculator .remaining {
	float:left;
	width:50%;
	padding:0 1em;
	text-align:right;
}
#calculator .negative {
	color:var(--barbie);
}
#calculator .table-body {
	background:#fff;
	border-radius:0 0 0.4em 0.4em;
	padding:0.2em 0 1.5em 0;
	margin-bottom:1em;
}
#calculator-counter .table-body {
	background:#e3e3e3;
}
#calculator h3 {
	padding:0 0 0.3em 1rem;
	margin:1em 0 0 0;
	color:var(--barbie);
	border-bottom:1px solid #ddd;
}
#calculator .unit-row {
	border-bottom:1px solid #ddd;
	padding:0.3em 0;
	line-height:1.6;
}
#calculator-counter h3,
#calculator-counter .unit-row {
	border-color:#c5c5c5;
}
#calculator .total-row {
	color:#fff;
	background:var(--marge);
	font-size:1.2em;
	font-weight:500;
	border-radius:0.4rem;
	padding:0.8rem 0;
	line-height:1;
	margin-bottom:1em;
}
#calculator .total-row div {
	xfloat:right;
}
#calculator .budget-row {
	height:4em;
}
#calculator .budget-bar {
	height:2em;
	background:#e3e3e3;
	position:relative;
	overflow:hidden;
	border-radius:0.4em;
}
#calculator .budget-used {
	position:absolute;
	top:0; left:0;
	width:0;
	height:2em;
	transition:width 400ms ease-in-out;
	xborder-radius:0.4em;
	background: repeating-linear-gradient(
	  135deg,
	  #8cc696,
	  #8cc696 10px,
	  #7eb688 10px,
	  #7eb688 20px
	);
}
#calculator .budget-label {
	color:#666;
	float:left;
	font-size:1.05em;
}
#calculator .budget-label-remaining {
	float:right;
}
#calculator .over-budget .budget-label-remaining {
	color:var(--barbie);
}
#calculator .over-budget .budget-used {
	background: repeating-linear-gradient(
	  135deg,
	  #f04184,
	  #f04184 10px,
	  #dd3575 10px,
	  #dd3575 20px
	);
}




/*
—————————————————
Timer
—————————————————
*/
.work-timer-clock:after {
	display:inline-block;
	vertical-align:middle;
	font-size:1.2rem;
	xwidth:1em;
	height:1em;
	line-height:1em;
	xtext-align:center;
	content:'\e353';
	font-family:fa-light;
	margin-left:0.5em;
	animation:rotating 4s linear infinite;
	transform-origin:center;
}
@keyframes rotating {
	from { transform:rotate(0deg) }
	to   { transform:rotate(360deg) }
}


.timer-widget {
	height:3em;
	position:relative;
	margin-bottom:1em;
	z-index:1;
}
.timer-widget a {
	display:block;
	font-size:0.9em;
	width:100%;
	height:100%;
	color:#fff;
	background:#ffffff22;
	xtransition:background-color 200ms;
}
.start-timer {
	display:inline-block;
	font-weight:500;
	height:1.5em;
	line-height:1.5em;
	position:relative;
	padding-left:2.3em;
	color:#ffffff66;
	margin-left:2.3rem;
	margin-top:0.9em;
}
.start-timer:before {
	content:'';
	position:absolute;
	top:2px; left:0;
	width:1.1em;
	height:1.1em;
	background:var(--barbie);
	outline:2px solid #fff;
	outline-offset:1px;
	border-radius:50%;
}
.timer-info {
	display:none;
	padding:0.45em 1em;
	line-height:1.2;
}
.timer-info strong {
	display:block;
	font-weight:500;
	font-size:1rem;
}
.timer-info span.project-id {
	float:left;
	font-size:0.9em;
}
.timer-info span.current-time {
	float:right;
	font-size:0.9em;
}
.timer-widget-running a {
	color:#fff;
	background:#4fae5f;
}
.timer-widget-running .start-timer {
	display:none;
}
.timer-widget-running .timer-info {
	display:block;
}
.timer-mismatch a {
	background:#f60;
}


.timer-widget-detail {
	width:20em;
	min-height:8em;
	background:#fff;
	position:absolute;
	top:0.7em; left:calc(100% + 0.7em);
	display:none;
	padding:0.8em 1em 1em 1em;
	text-align:left;
	border-radius:0.4em;
	box-shadow:0 0.5em 1em rgba(0,0,0,0.3);
}
.timer-widget-running:hover .timer-widget-detail {
	display:block;
}
.timer-widget-detail h4 span {
	font-size:0.85em;
	font-weight:500;
	color:#72ba7e;
	color:var(--barbie);
}
.timer-widget-detail h4 span.work-type {
	color:var(--elsa);
}
.timer-widget-detail h5 {
	font-size:0.85em;
	color:#aaa;
	margin-bottom:0.6em;
	word-break:break-word;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.timer-widget-detail span.current-time:before {
	display:inline-block;
	font-size:0.9em;
	width:1em;
	height:1em;
	line-height:1em;
	content:'\e353';
	font-family:fa-light;
	margin-right:0.3em;
	animation:rotating 4s linear infinite;
	transform-origin:center;
}
.total-today {
	background:#f6f6f6;
	padding:0 0.7em;
	height:2em;
	line-height:2em;
	border-radius:1em;
	margin:1.2em 0 0 0;
	font-size:0.9em;
}
.total-today span {
	float:right;
}



.timer-current {
	height:8em;
	background:#ddd;
	border-radius:0.5em;
	margin-bottom:2em;
	padding:0.6em 0.8em;
	position:relative;
}
.timer-current input {
	position:absolute;
	bottom:1em; right:1em;
}
#form p.timer-field {
	margin-bottom:0.7em;
}
#form .timer-field label {
	float:left;
	width:5rem;
	height:2.5rem;
	line-height:2.5rem;
	padding:0 0.7em;
	border-radius:5px 0 0 5px;
}
#form .timer-field select,
#form .timer-field textarea {
	float:right;
	width:calc(100% - 5em);
	height:2.5em;
	border-radius:0 5px 5px 0;
}


.work-sessions-today {
	margin-bottom:2em;
}
.work-sessions-today li {
	background:#fff;
	border-radius:0.4em;
	margin-bottom:0.6em;
	position:relative;
	border-bottom:1px solid #d2d2d2;
	box-shadow:0 0.1em 0.2em rgba(0, 0, 0, 0.04);
	padding:0.5em 0.8em;
}
.work-sessions-today a.project-link {
	display:block;
	width:calc(100% - 13em);
}
.work-sessions-today input,
.work-sessions-today a.delete {
	position:absolute;
	top:0.8em; right:3.5em;
	border:0;
	width:6em;
	height:2em;
	line-height:2em;
	background:#ddd;
	border-radius:1em;
	font-size:0.8em;
	cursor:pointer;
	text-align:center;
}
.work-sessions-today a.delete {
	width:2em;
	right:0.8em;
	background:#eee;
}
.work-sessions-today input.stop {
	background:var(--marge);
	color:#fff;
}
.work-sessions-today .time {
	position:absolute;
	top:0.6em; right:9em;
}
.work-sessions-today .timer-running:before {
	display:inline-block;
	font-size:0.9em;
	width:1em;
	height:1em;
	line-height:1em;
	content:'\e353';
	font-family:fa-light;
	margin-right:0.3em;
	animation:rotating 4s linear infinite;
	transform-origin:center;
}
.work-sessions-today h5 {
	font-size:0.85em;
	color:#888;
	word-break:break-word;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	height:2.5em;
	line-height:1.2;
}


.allocated-members {
	margin-top:1em;
}
.allocated-members li {
	margin-top:0.15em;
}
.allocated-members a.remove {
	display:inline-block;
	width:1.2em;
}
.allocated-members a.remove:after {
	color:red;
	font-family:fa-solid;
	content:'\f00d';
}



/* New Brief Builder */

.brief-options {
	margin-top:4em;
}
.brief-options li {
	text-align:center;
	margin-bottom:1.3em;
}
.brief-options a {
	display:block;
	margin:auto;
	font-size:1.2em;
	width:24em;
	line-height:2.5em;
	background:red;
	border-radius:1.25em;
	color:#4987c3;
    background:#d5e6f3;
}



/* Labels */

.label-manager {
	margin-top:0.5em;
}



/* Asset Search */
.asset-tiles {
	width:calc(100% + 1em);
	margin-right:-1em;
}
.asset-tiles li {
	font-size:0.9em;
	float:left;
	clear:none;
	width:calc(25% - 1em);
	margin:0 1em 1em 0;
	height:25.5em;
	vertical-align:top;
	background:#fff;
	border-radius:0.3em;
	border:0;
	border-bottom:1px solid #ddd;
	position:relative;
}
@media only screen and (min-width:1600px) {
	.asset-tiles li {
		width:calc(20% - 1em);
	}	
}
.asset-tiles a {
	display:block;
	width:100%;
	height:100%;
	padding:1.2em 1em 0 1em;
}
.asset-tiles div {
	border-top:1px solid #ddd;
	position:absolute;
	bottom:0; left:0;
	width:100%;
	height:6.2em;
	color:#999;
	pointer-events:none;
	padding:0.5em 0.7em;
	line-height:1.3;
}
.asset-tiles span.details {
	display:block;
	height:1.3em;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-size:0.9em;
}
.asset-tiles li .thumb-wrapper {
	display:block;
	width:14em;
	height:14em;
	display:flex;
	align-items:end;
	justify-content:center;
	margin:0 auto 1em auto;
}
.asset-tiles li .thumb-wrapper img {
	display:block;
	max-width:100%;
	max-height:100%;
	xbox-shadow:0 0 1em rgba(0,0,0,0.08);
	background:#f9f9f9;
}
.asset-tiles li:hover .thumb-wrapper img {
	background:#f2f2f2;
}
.asset-tiles li .thumb-wrapper img.thumb-loading {
	background:url(/Images/spinner.gif) center no-repeat;
	background-size:100%;
	min-width:5em;
	min-height:5em;
	box-shadow:none;
}
.asset-tiles h3 + ul {
	border:0;
}
.asset-tiles span.filename {
	display:block;
	width:100%;
	padding:0;
	text-align:center;
	line-height:1.2;
	word-break:break-word;
	white-space:normal;
	height:3.6em;
}



/* Offer Tile Brief */

#titleWrapper.other-title p:first-child {
	float:left;
	width:11em;
}
#titleWrapper.other-title p:first-child select {
	width:100% !important;
}
#titleWrapper p:last-child {
	display:none;
}
#titleWrapper.other-title p:last-child {
	display:block;
	float:right;
	width:calc(100% - 12em);
}

.color-sample {
	float:left;
	margin-right:0.8em;
	width:4.3em;
	height:4.3em;
	border-radius:5px;
	position:relative;
	border:5px solid #fff;
	box-shadow:0 0.1em 0.2em rgba(0, 0, 0, 0.04);
}
.color-sample:after {
	content:'';
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	background:linear-gradient(to top left, #ffffff88, transparent);
}
.image-upload-note {
	font-size:0.9em;
	color:#888;
}
.product-images {
	margin-bottom:1.6em;
}
.product-images li {
	float:left;
	width:9em;
	height:9em;
	margin:0 1em 2em 0;
	padding:0.5em;
	background:#fff;
	border-bottom:1px solid #d2d2d2;
	border-radius:5px;
	box-shadow:0 0.1em 0.2em rgba(0, 0, 0, 0.04);
	position:relative;
}
.product-images .has-hero li:first-child:after {
	content:'hero';
	position:absolute;
	bottom:-0.6em;
	left:calc(50% - 2em);
	pointer-events:none;
	width:4em;
	color:#fff;
	background:var(--marge);
	height:1.6em;
	line-height:1.6em;
	text-align:center;
	font-size:0.9em;
	font-weight:500;
	border-radius:5px;
}
.product-images div {
	display:flex;
	align-items:center;
	justify-content:center;
	width:8em;
	height:8em;
	cursor:move;
}
.product-images .extension {
	position:absolute;
	top:calc(50% - 1rem); left:0;
	width:100%;
	text-transform:uppercase;
	pointer-events:none;
	text-align:center;
	font-size:1.2em;
	color:#999;
	background:#ddd;
	font-weight:500;
	height:2rem;
	line-height:2rem;
	display:none;
}
.product-images .cannot-render-thumb .extension {
	display:block;
}
.product-images img {
	max-width:8em;
	max-height:8em;
	user-select:none;
}
.product-images .remove {
	position:absolute;
	width:1.5em;
	height:1.5em;
	line-height:1.5em;
	text-align:center;
	border-radius:0.75em;
	top:-0.4em; right:-0.4em;
	z-index:1;
	cursor:pointer;
	color:#4987c3;
	background:#d5e6f3;
}
.product-images .remove:after {
	content:'\f00d';
	font-family:fa-light;
}
#treatmentWrapper .checkboxes {
	display:none;
}
#treatmentWrapper.design-new .checkboxes {
	display:block;
}



.offer-tile-readonly {
	background:#fff;
	padding:1.4em 1.6em;
	margin-bottom:1.2em;
	border-radius:0.6em;
	border-bottom:1px solid #d2d2d2;
	box-shadow:0 0.1em 0.2em rgba(0, 0, 0, 0.04);
	position:relative;
}
.offer-tile-readonly .button {
	position:absolute;
	top:1em; right:1em;
}
#form .offer-tile-readonly h3 {
	padding-right:8em;
	font-weight:normal;
}
#form .offer-tile-readonly h3 b,
.offer-tile-readonly h3 b {
	font-weight:bold;
	color:var(--barbie);
}
#form .offer-tile-readonly p {
	margin:0;
}
#form .offer-tile-readonly p + p {
	margin-top:0.5em;
}
.product-images-readonly li {
	float:left;
	width:9em;
	height:9em;
	margin:0 1em 2em 0;
	padding:0.5em;
	background:#fff;
	border:1px solid #d2d2d2;
	border-radius:5px;
	box-shadow:0 0.1em 0.2em rgba(0, 0, 0, 0.04);
	position:relative;
}
.product-images-readonly .extension {
	position:absolute;
	top:calc(50% - 1rem); left:0;
	width:100%;
	text-transform:uppercase;
	pointer-events:none;
	text-align:center;
	font-size:1.2em;
	color:#999;
	background:#ddd;
	font-weight:500;
	height:2rem;
	line-height:2rem;
	display:none;
}
.product-images-readonly .cannot-render-thumb .extension {
	display:block;
}
.product-images-readonly .has-hero li:first-child:after {
	content:'hero';
	position:absolute;
	bottom:-0.6em;
	left:calc(50% - 2em);
	pointer-events:none;
	width:4em;
	color:#fff;
	background:var(--marge);
	height:1.6em;
	line-height:1.6em;
	text-align:center;
	font-size:0.9em;
	font-weight:500;
	border-radius:5px;
}
.product-images-readonly a {
	display:flex;
	align-items:center;
	justify-content:center;
	width:8em;
	height:8em;
}
.product-images-readonly img {
	max-width:8em;
	max-height:8em;
	user-select:none;
}
















@media only screen and (max-width:1600px) {
	html {
		font-size:14px;
	}
	#sidebar {
		width:5em;
		background-size:2.4em 3.2em;
		background-position:center 1.3em;
		padding-top:6em;
	}
	.timer-info {
		padding:1em 0;
	}
	.timer-info strong {
		display:none;
	}
	.timer-info span.project-id {
		font-weight:500;
		font-size:1em;
		display:none;
	}
	.timer-info span.current-time {
		float:none;
		display:block;
		text-align:center;
		font-size:1.05em;
	}
	#main-menu a span {
		display:none;
	}
	#main-menu li.spaced {
		margin-bottom:2em;
	}
	#main-menu li a {
		position:relative;
		padding:0.3em;
		line-height:1.3;
	}
	#main-menu li a:before {
		float:none;
		display:block;
		text-align:center;
		width:auto;
		margin:0;
		line-height:inherit;
	}
	#main-menu li a span:not(.count) {
		position:absolute;
		top:0.2em; left:4em;
		background:#222;
		padding:0.4em 0.6em;
		line-height:1;
		border-radius:0.3em;
	}
	#main-menu li a:hover span:not(.count) {
		display:block;
	}
	#secondary-sidebar,
	#secondary-sidebar.has-topbar {
		left:5em;
		padding:1.5em;
		width:14.5em;
	}
	.logo-wrapper {
		width:14.5em;
	}
	#secondary-sidebar + #content {
		margin-left:19.5em;
	}
	#topbar {
		left:5em;
		width:calc(100% - 5em);
	}
	#content.has-topbar {
		left:19.5em;
		width:calc(100% - 19.5em);
	}
	#content {
		padding:2em 2.5em;
		margin-left:5em;
	}
	#sidebar #profile {
		background:none;
		padding:0;
	}
	#sidebar #profile .text {
		display:none;
	}
	#sidebar .avatar {
		float:none;
		display:block;
		margin:auto;
	}

}




@media only screen and (max-width:1400px) {
	html {
		font-size:0.9vw;
	}
}


@media only screen and (max-width:1300px) {
	h1 {
		font-size:1.8em;
	}
	h2 {
		font-size:1.55em;
	}
	#project-list {
		padding:0.5em 0;
		height:calc(100vh - 24em);
	}
	.logo-wrapper {
		height:100%;
	}
	.logo-wrapper img {
		max-height:4.6em;
	}
	#project-sidebar {
		top:6em;
		left:14em;
		width:13em;
		height:calc(100vh - 6em);
		padding:1.6em;
	}
	#project-content {
		top:6em;
		left:27em;
		width:calc(100% - 27em);
		height:calc(100vh - 6em);
	}
	.content-wrapper {
		max-width:100%;
	}
	.sidebar-closed #project-content {
		left:13em;
		width:calc(100% - 13em);
	}
}




@media only screen and (max-width:1279px) {
	.team-wrapper {
		max-width:100%;
	}
}



.image-selector {
	margin-bottom:3em;
}
.image-selector li {
	float:left;
	width:9em;
	height:9em;
	margin:0 0.6em 0.6em 0;
	border-radius:5px;
	box-shadow:0 0.1em 0.2em rgba(0, 0, 0, 0.04);
	position:relative;
	overflow:hidden;
	background:#bbb;
	cursor:pointer;
}
.image-selector li:hover {
	opacity:0.85;
}
.image-selector li.selected {
	opacity:1;
}
.image-selector li.selected:after {
	content:'\f00c';
	font-family:fa-solid;
	text-align:center;
	color:#fff;
	background:var(--barbie);
	width:3em;
	height:3em;
	line-height:3em;
	position:absolute;
	top:calc(3em - 2px); left:calc(3em - 2px);
	border-radius:50%;
	border:2px solid #fff;
}
.image-selector div {
	display:flex;
	align-items:center;
	justify-content:center;
	width:9em;
	height:9em;
}
.image-selector .extension {
	position:absolute;
	top:calc(50% - 1rem); left:0;
	width:100%;
	text-transform:uppercase;
	pointer-events:none;
	text-align:center;
	font-size:1.2em;
	color:#999;
	background:#ddd;
	font-weight:500;
	height:2rem;
	line-height:2rem;
	display:none;
}
.image-selector .cannot-render-thumb .extension {
	display:block;
}
.image-selector img {
	max-width:9em;
	max-height:9em;
	user-select:none;
}











.report-grid {
	width:100%;
	line-height:1.3;
	background:#fff;
	border-radius:0.3em;
	overflow:hidden;
	table-layout:fixed;
	margin-bottom:3em;
	line-height:1;
	border-bottom:2px solid #ccc;
	border-collapse:unset;
}
.report-grid-wrapper {
	margin-bottom:3.2em;
}
.report-grid a {
	color:inherit;
	text-decoration:none;
}
.report-grid td.month-label {
	vertical-align:middle;
	border-right:1px solid #ddd;
}
.report-grid td.month-label-split {
	border-bottom:3px solid #ddd;
}
.report-grid td.month-amount {
	border-bottom:3px solid #ddd;
	background:#f6f6f6;
}
.report-grid td.month-total {
	border-bottom-color:var(--belle);
	background:#f0e0a455;
}
.report-grid .current-month td.month-label {
	border-color:transparent;
	color:#fff;
	font-weight:500;
    background:var(--maleficent);
}
.report-grid .current-month td {
    background:#9bc7a333;
}
.report-grid-billing .current-month td {
    background:#9bc7a355;
}
.report-grid .current-month td.month-amount {
	border-color:transparent;
    background:#9bc7a388;
}
.report-grid .current-month td.month-total {
	color:#fff;
    background:var(--maleficent);
	font-weight:500;
}
.report-grid td.right a,
.report-grid td.right span.invoiced-pending {
	display:inline-block;
	padding:0.2rem 0.4rem;
	margin:-0.2rem -0.4rem;
	border-radius:0.3em;
}
.report-grid td.right a:hover {
	background:rgba(0,0,0,0.10);
}
.report-grid td.right a:active {
	background:rgba(0,0,0,0.15);
}
.report-grid td.right span.invoiced-pending {
	background:var(--maleficent);
	color:#fff;
	font-weight:500;
}
.report-grid td.unbilled {
	text-align:left;
}
.report-grid td.unbilled span {
	display:inline-block;
	color:#77aa80;
	font-weight:500;
	position:relative;
	left:-1.5em;
}
.report-grid th {
	font-size:0.9333em;
	font-weight:500;
	padding:0.6rem 0.7rem;
	color:#fff;
	background:var(--barbie);
	line-height:1;
	min-height:3em;
}
.report-grid-projects {
	margin-bottom:0;
}
.report-grid-projects th {
	background:var(--marge);
}
.report-grid th.total-header {
	width:10em;
	background:var(--belle);
	color:#444;
}
.report-grid td.grand-total {
	background:var(--belle);
	color:#444;
	border-color:transparent;
}
.report-grid th.extras-header {
	background:var(--marge);
}
.report-grid td.total-cell,
.report-grid td.extras-cell {
	border-left:1px solid #ddd;
}
.report-grid th a {
	display:inline-block;
	line-height:1;
}
.report-grid a.hover-link:hover {
	text-decoration:underline;
}
.report-grid th a:after {
	font-family:fa-solid;
	margin-left:0.3em;
}
.report-grid th a.asc:after {
	content:'\f0d8';
}
.report-grid th a.desc:after {
	content:'\f0d7';
}
.report-grid td.group-header,
.report-grid td.section-header {
	padding:2em 0 0 0;
	position:relative;
	border-bottom:2px solid #e2e2e2;
	margin-bottom:-1px;
}
.report-grid .group-details {
	padding:0.5em 0;
	position:relative;
}
.report-grid td h3 {
	font-size:1.1em;
	margin:0.3em 0 0 0;
}
.report-grid td.group-header h3,
.report-grid td.section-header h3 {
	color:var(--marge);
	display:inline;
}
.report-grid td.group-header a:hover {
	text-decoration:underline;
}
.report-grid td.group-header h3 a:hover {
	text-decoration:none;
}
.report-grid td.section-header {
	padding:2em 0 0 0;
}
.report-grid td.section-header h3 {
	padding:0.5em 0;
	display:inline-block;
	margin:0 0.4em 0 0;
}
.report-grid span.nested {
	float:left;
	width:2em;
	height:1.2em;
	margin:-0.6em 0.4em 0 0.5em;
	overflow:hidden;
	position:relative;
}
.report-grid span.nested:before {
	content:'';
	width:100%;
	height:150%;
	border:2px solid #f02e75;
	border-radius:5px;
	position:absolute;
	bottom:0; left:25%;
}
.report-grid-tight span.nested {
	margin-top:-0.4em;
}
.report-grid td {
	padding:0.6em 0.7em;
	border-bottom:0.05em solid #e2e2e2;
	transition:background-color 150ms linear;
	vertical-align:top;
}
.report-grid-billing td {
	padding:0.7em 0.7em;
}
.report-grid-projects td {
	vertical-align:middle;
}

.report-grid th:first-child,
.report-grid td:first-child {
	width:13rem;
	white-space:nowrap;
}

.report-grid th + th,
.report-grid td + td {
	width:auto;
}

.report-grid tr.total-row {
	font-weight:bold;
	background:#f6f6f6;
	border-bottom:3px solid #d9d9d9;
}

.report-grid tr.subtotal-row {
	font-weight:bold;
	background:#f6f6f6;
}
.report-grid tr.subtotal-row td {
	padding-bottom:1em;
	border-bottom:0;
}

.report-grid th.right,
.report-grid td.right {
	text-align:right;
	padding-right:1.5rem;
}

.report-grid-projects th.right,
.report-grid-projects td.right {
	padding-right:3rem;
}


.report-grid .center {
	text-align:center;
}
.report-grid .checked,
.report-grid .unchecked {
	font-family:fa-solid;
}
.report-grid .checked:before {
	content:'\f00c';
	color:var(--maleficent);
}
.report-grid .unchecked:before {
	content:'\f00d';
	color:#ddd;
}
.report-grid tr.unallocated strong {
	color:#00649d;
}
.report-grid tr.highlighted strong {
	color:var(--barbie);
}
.report-grid tr.clickable:hover td {
	background:#fafafa;
	cursor:pointer;
}
.report-grid tr.clickable:active td {
	background:#eee;
}
.report-grid tr.inactive-row td {
	color:#ccc;
}
.report-grid tr.nested td:first-child:before {
	content:'';
	float:left;
	width:1.6em;
	height:1.1em;
	margin:-0.6em 0.3em 0 1.2em;
	overflow:hidden;
	position:relative;
	border-left:2px solid var(--barbie);
	border-bottom:2px solid var(--barbie);
	border-radius:0 0 0 0.4em;
}


.report-grid th.header-green,
.report-grid td.green {
	color:#fff;
    background:var(--maleficent);
	border-color:transparent;
}
.report-grid td.pale-green {
    background:#9bc7a355;
	border-bottom-color:#9bc7a388;
}
.report-grid td.pale-yellow {
	border-bottom-color:var(--belle);
	background:#f0e0a455;
}



.report-grid span.percentage {
	display:inline-block;
	color:#bbb;
	font-weight:500;
	font-size:0.9em;
	padding:0.15em 0.25em;
	margin-top:0.2em;
	border-radius:0.2em;
}
.report-grid span.percentage-under {
	color:#fff;
	background:#4cab5d;
}
.report-grid span.percentage-over {
	color:#fff;
	background:var(--barbie);
}