:root {

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

  --elsa:#9ac6dd;
  --ursula:#7e84ad;
  --peppa:#f79cbf;

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

}

/*
—————————————————
Global
193-196-203
—————————————————
*/
html {
	color:#666;
	font:15px/1.4 cera-pro, sans-serif;
}
* {
	box-sizing:border-box;
}
p {
	margin-bottom:1em;
}
p.center {
	text-align:center;
}
strong {
	font-weight:bold;
}
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.6em;
	font-weight:500;
	line-height:1.2;
	margin-bottom:1em;
	text-transform:lowercase;
}
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;
}
h3 {
	font-size:1.2em;
	margin-bottom:1em;
	font-weight:500;
}
h3 small {
	font-size:0.9rem;
	font-weight:normal;
	margin-left:0.2em;
}
h4 {
	text-transform:lowercase;
	font-weight:500;
	font-size:1.2em;
	margin-bottom:0.5em;
}


/*
——————————————————
File Status
——————————————————
*/
.file-status {
	display:inline-block;
	width:13em;
	text-align:center;
}
.file-status span {
	display:block;
	line-height:2.2em;
	text-align:center;
	font-weight:500;
	background:#eee;
	border-radius:1.1em;
	font-size:0.9em;
}
.file-status span.up-to-date {
	color:#4db881;
	background:#61c39122;
}
.file-status span.not-found {
	color:var(--barbie);
	background:#e6347822;
}
.file-status span.new-version {
	color:#0f81c2;
	background:#0f81c222;
}   
.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;
}

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

.syncing span:before {
	display:none;
}






/*
——————————————————
Fancybox Overrides
——————————————————
*/
.fancybox__content {
	border-radius:1em;
	padding:1.2em;
}
.fancybox__iframe {
	border-radius:0.5em;
}

.fancybox-fullscreen .fancybox__backdrop {
	background:#fff;
}
.fancybox-fullscreen .fancybox__content,
.fancybox-fullscreen .fancybox__container:not(.is-compact) .fancybox__slide.has-close-btn {
	padding:0;
}
.fancybox-fullscreen .fancybox__content {
	height:100% !important;
}
.fancybox-fullscreen .fancybox__container:not(.is-compact) .has-iframe .fancybox__content {
	width:100%;
	height:100%;
}
.fancybox-fullscreen .fancybox__content > .is-close-btn {
	position:fixed;
	top:2em; right:2em;
	width:4rem;
	height:4rem;
	color:#d0d0d0;
	text-decoration:none;
	border:0;
	background:#fff;
	border-radius:50%;
	overflow:hidden;
	padding:0;
	cursor:pointer;
	opacity:1;
	z-index:10001;
}
.fancybox-fullscreen .is-close-btn:hover {
	color:#bbb;
}
.fancybox-fullscreen .is-close-btn:active {
	color:#aaa;
}
.fancybox-fullscreen .is-close-btn:before {
	content:'\f057';
	display:block;
	width:100%;
	text-align:center;
	font-size:4rem;
	font-family:fa-light;
	line-height:1;
	transition:color 150ms;
}









.fancybox-fullscreen .is-close-btn svg {
	display:none;
}



/*
.fancybox-content {
	border-radius:8px !important;
	overflow:hidden !important;
}
.fancybox-bg {
	background:#fff !important;
}
.fancybox-is-open .fancybox-bg {
	opacity:1 !important;
}
.fancybox-slide {
	padding:0 !important;
}

*/


a {
	color:inherit;
	text-decoration:none;
}
.not-added {
	color:#c1c4cb;
}





#sidebar {
	position:fixed;
	top:0; left:0;
	width:4.2em;
	height:100%;
	background:#29292f;
	z-index:10;
	transition:width 200ms ease-in-out;
}
#sidebar.open {
	width:17.5em;
}
#ols {
	height:5.0666em;
	margin-bottom:2em;
}
#ols img {
	position:absolute;
	top:0.8em;
	right:0.8em;
	width:2.6em;
	height:3.4666em;
	margin:auto;
	cursor:pointer;
	transition:opacity 200ms;
}
#ols img.logo {
	left:0.8em; right:auto;
}


#sidebar.closed #ols img.menu-closed,
#sidebar.closed #ols img.menu-open,
#sidebar.closed:hover #ols img.logo,
#sidebar.open #ols img.menu-closed {
	opacity:0;
}
#sidebar.closed:hover #ols img.menu-closed,
#sidebar.open #ols img.logo,
#sidebar.open #ols img.menu-open {
	opacity:1;
}




#nav {
	overflow:hidden;
}
#nav ul {
	width:17.5em;
	color:#888;
}

#nav ul span {
	float:left;
	display:none;
	width:13.3em;
	line-height:3em;
	white-space:nowrap;
	font-weight:500;
	color:#ddd;
	text-transform:lowercase;
}
#sidebar.open ul span {
	display:block;
}
#nav ul a {
	display:block;
	height:3em;
	transition:color 150ms, background-color 150ms;
}
#nav ul a:before {
	float:left;
	font:1.7em/3rem fa-light;
	width:4.2rem;
	height:3rem;
	text-align:center;
}
#nav ul a.projects:before {
	content:'\f07b';
}
#nav ul a.completed:before {
	content:'\f467';
}
#nav ul a.new:before {
	content:'\f055';
}
#nav ul span strong {
	color:var(--barbie);
	margin-left:0.3em;
}
#nav ul a:hover {
	color:#ccc;
	background:rgba(255,255,255,0.07);
}






#profile {
	position:absolute;
	bottom:0.7em; left:0.7em;
}
#profile .avatar {
	cursor:pointer;
}
#profile-menu {
	display:none;
	position:absolute;
	bottom:3.6em; left:2.2em;
	width:14em;
	background:#fff;
	border:1px solid #eee;
	border-radius:0.5em;
	box-shadow:0 0 1em rgba(0,0,0,0.1);
	overflow:hidden;
	padding:0.4em;
}
#profile.open #profile-menu{
	display:block;
}
#profile a {
	display:block;
	padding:0.6em 0.9em;
	border-radius:0.4em;
	text-transform:lowercase;
}
#profile a:hover {
	background:#f5f5f7;
}
#profile a:active {
	background:#e5e5e799;
}
#profile li:last-child a {
	border:0;
}



.close-button {
	position:fixed;
	top:1em; right:1em;
	width:4em;
	height:4em;
	color:#d0d0d0;
	text-decoration:none;
	border:0;
	background:#fff;
	border-radius:50%;
	overflow:hidden;
	padding:0;
	cursor:pointer;
	z-index:10001;
}
.close-button:hover {
	color:#bbb;
}
.close-button:active {
	color:#aaa;
}
.close-button:before {
	content:'\f00d';
	display:block;
	width:100%;
	text-align:center;
	font-size:3em;
	font-family:fa-light;
	line-height:4rem;
	transition:color 150ms;
}
body.hide-scrollbar .close-button {
	display:none;
}
.back-button {
	position:absolute;
	top:0; left:0;
	text-transform:lowercase;
	color:#fff;
	color:#666;
	background:var(--marge);
	background:#e1e1e8;
	border-radius:0 0 0.6em 0;
	font-weight:500;
	width:10em;
	height:2.2em;
	line-height:2.2em;
	text-align:center;
	z-index:2;
}
.back-button:before {
	font-family:fa-solid;
	content:'\f104';
	display:inline-block;
	width:1.2em;
	text-align:left;
	font-size:0.9em;
}



.brand-logo {
	margin:0 auto 1em auto;
	max-height:3em;
	max-width:9em;
}
.project-title {
	font-size:1.15em;
	font-weight:normal;
	line-height:1.2;
	margin:0 0 2em 0;
	text-align:right;
	text-transform:none;
	color:#666;
}
.project-title strong {
	display:block;
	font-weight:500;
	font-size:1.3rem;
	margin-bottom:0.2em;
}
.project-title span {
	word-wrap:break-word;
}
#menu {
	position:fixed;
	top:3em; left:4.2em;
	padding:0 1em 0 2em;
	width:15.8em;
	border-right:1px solid #ddd;
	text-align:right;
	transition:left 200ms ease-in-out;
}
#sidebar.open + #menu {
	xleft:17.5em;
}
#menu li {
	margin-bottom:0.8em;
}
#menu a {
	display:block;
	padding:0 1em;
	margin-right:-1em;
	line-height:1.05;
	text-transform:lowercase;
}
#menu a:hover {
	color:var(--barbie);
}
#menu li.active a {
	color:var(--barbie);
	font-weight:500;
	padding-right:0.6em;
	border-right:0.4em solid var(--barbie);
}
#menu li ul {
	display:inline-block;
	border-top:1px solid #ddd;
	border-bottom:1px solid #ddd;
	font-size:0.85em;
	padding:0.3em 0;
	margin-top:0.8em;
}
#menu li li {
	margin:0;
}
#menu li li a,
#menu li.active li a {
	padding:0.2rem 1em;
	color:inherit;
	font-weight:normal;
	border:0;
}
#menu li li.active a {
	color:var(--barbie);
	font-weight:500;
}


.avatar {
	display:block;
	width:2.8em;
	height:2.8em;
	line-height:2.8em;
	border-radius:50%;
	color:#fff;
	font-weight:500;
	xbackground:linear-gradient(to bottom right, var(--elsa), var(--ursula));
	text-align:center;
	overflow:hidden;
	cursor:default;
}
.avatar img {
	display:block;
	width:100%;
	height:100%;
}






#content-wrapper {
	margin-left:20em;
	padding:3em;
	transition:margin-left 200ms ease-in-out;
}
#sidebar.open + #menu + #content-wrapper {
	xmargin-left:33.3em;
}
#content-fullwidth {
	padding:4em 4em 4em 8.2em;
	max-width:1700px;
	margin:auto;
}
#content {
	margin:auto;
	max-width:1300px;
	position:relative;
}
#feed {
	padding-left:3.5em;
	max-width:1200px;
	margin:auto;
}
.post {
	display:block;
	padding:1em;
	margin-bottom:1.2em;
	border-radius:1em;
	background:rgba(193 196 210 / 17%);
	transition:background-color 100ms;
	position:relative;
}
.post-clickable:hover {
	cursor:pointer;
	background:rgba(193 196 210 / 24%);
}
.post h3 {
	text-transform:lowercase;
	font-size:1.6em;
	position:relative;
	margin-bottom:0.3em;
	padding:0 0.1em;
}
.post h3:before {
	content:'';
	width:2rem;
	height:2rem;
	border:2px dashed #d0d0d0;
	border-radius:50%;
	position:absolute;
	top:0; left:-4rem;
	box-sizing:border-box;
	pointer-events:none;
}
.post-approved {
	position:absolute;
	top:1.7rem; right:1.6rem;
	font-size:0.85em;
	color:#999;
}
.post-approved:before {
	content:'\f00c';
	font-family:fa-solid;
	margin-right:0.4em;
	color:#bbb;
}
.post-completed h3:before {
	opacity:1;
	content:'\f00c';
	font-family:fa-solid;
	font-size:1.2rem;
	text-align:center;
	line-height:2rem;
	border:0;
	color:#fff;
	background:var(--marge);
}








.post-content {
	background:#fff;
	padding:1.5em;
	border-radius:0.6em;
	position:relative;
	box-shadow:0 0 0.5em rgb(0 0 0 / 3%);
}


.post-content dl {
	float:left;
}
.post-content dt {
	float:left;
	clear:left;
	width:6em;
	text-transform:lowercase;
	padding:0.25em 0;
	font-weight:500;
	color:#96aecb;
	xcolor:var(--ursula);
}
.post-content dd {
	float:left;
	width:22em;
	padding:0.25em 0;
}
.post-content input.date {
	background:#f0f0f0;
	border:0;
	border-radius:2em;
	padding:0.2em 0.5em;
	outline:0;
	color:inherit;
}
.brief-readonly {
	background:#fafafa;
	border:1px solid #ddd;
	padding:1em;
	border-radius:0.3em 0.3em 0 0;
	margin:0.5em 0.5em 0 0.5em;
}
.brief-readonly-truncated {
	max-height:12em;
	overflow:hidden;
	position:relative;
}
.brief-readonly-truncated:after {
	content:'';
	background:linear-gradient(to bottom, transparent, #fafafa);
	height:5em;
	width:calc(100% - 2px);
	position:absolute;
	bottom:0; left:1px;
}
.view-full-brief {
	display:block;
	background:#ddd;
	text-align:center;
	padding:0.3em;
	margin:0 0.5em 0.5em 0.5em;
	border-radius:0 0 0.3em 0.3em;
	cursor:pointer;
	color:#666;
}
.view-full-brief:after {
	content:'View less';
}
.brief-readonly-truncated + .view-full-brief:after {
	content:'View more';
}
.post .brief-readonly h3 {
	text-transform:none;
	padding:0;
}
.post .brief-readonly h3:before {
	display:none;
}
.post .brief-readonly h2 {
	font-size:1.4em;
	margin-bottom:0.6em;
}
.post .brief-readonly h3 {
	font-size:1.2em;
	margin-bottom:0.7em;
}
.post .brief-readonly h4 {
	font-size:1.1em;
	margin-bottom:0.9em;
}
.post .brief-readonly p {
	margin-bottom:1em;
}
.post .brief-readonly ul {
	padding-left:2.3em;
	margin-bottom:1em;
}
.post .brief-readonly ul li {
	list-style:disc;
	margin-bottom:0.4em;
}




.board-thumb {
	float:left;
	display:flex;
	align-items:center;
	justify-content:center;
	margin:-0.3em 3em -0.6em -0.3em;
	width:5em;
	height:7.5em;
}
.board-thumb img {
	display:block;
	max-width:5em;
	max-height:7.5em;
	margin:auto;
	border-top:0.3em solid #fff;
	border-left:0.3em solid #fff;
	box-shadow:-0.4em -0.4em rgba(193 196 210 / 34%);
	transition:box-shadow 150ms;
}
.board-thumb img.clear {
	display:none;
}
.board-thumb img:hover {
	box-shadow:-0.4em -0.4em rgba(193 196 210 / 55%);
}
.board-message-wrapper {
	text-align:center;
	margin:0 auto 2.4em auto;
	position:relative;
}
.board-message {
	max-width:40em;
	position:relative;
	padding-left:4.6em;
	display:inline-block;
	text-align:left;
}
.board-message .avatar {
	position:absolute;
	top:0; left:0;
	font-size:1.3em;
}
.board-message .text {
	display:inline-block;
	padding:0.9em 1.2em;
	background:#fff;
	border-radius:0.5em;
	position:relative;
	border:1px solid #e2e2e2;
	box-shadow:0 0.1em 0.3em #eee;
}
.board-message .multiple-messages {
	display:block;
	width:35em;
	margin-bottom:0.8em;
}
.board-message .multiple-messages:after {
	content:'';
	position:absolute;
	bottom:-1em; left:50%;
	width:2px;
	height:1em;
	background:#e2e2e2;
}
.board-message .multiple-messages:last-child {
	margin-bottom:0;
}
.board-message .multiple-messages:last-child:after {
	content:none;
}
.board-message .avatar + .text:before {
	content:'';
	width:0; height:0;
	border-style:solid;
	border-width:0.6em 0.6em 0.6em 0;
	border-color:transparent #e2e2e2 transparent transparent;
	position:absolute;
	top:1em; left:-0.6em;
}
.board-message .text strong {
	color:var(--barbie);
	background:#e634780e;
	padding:0 0.3em;
	font-weight:500;
	border-radius:0.3em;
	white-space:nowrap;
}




.package-description {
	font-size:0.85em;
	width:calc(100% - 45em);
	float:right;
	margin-top:3.5em;
	border-left:1px solid var(--elsa);
	padding-left:1em;
	color:#999;
}
.post-completed .package-description {
	margin-top:0.5em;
}




.package-graphic {
	float:left;
	transition:opacity 150ms;
	width:8em;
	height:8em;
	background-image:url(/Images/Blobs/1.png);
	background-image:url(/Images/Blobs/6.png);
	background-size:100%;
	position:relative;
	margin:0 1em 0 -0.5em;
}
.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%;
	transform:scale(0.90);
}
.package-graphic + .sow-details {
	float:right;
	width:calc(100% - 11.5em);
}


.post h4 {
	font-size:1.1em;
	font-weight:500;
	text-transform:lowercase;
	margin-bottom:1.2em;
}
.post .short-brief h4 {
	margin-top:1.2em;
	margin-bottom:0.6em;
}

.post .textarea-wrapper {
	display:block;
	position:relative;
	min-height:4em;
	margin-bottom:0.7em;
	width:calc(100% - 18em);
}
.post .textarea-wrapper textarea {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	padding:0.8em 0.9em;
	min-height:4em;
	border:none;
	border-bottom:1px solid #d2d2d2;
	border-radius: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;
	outline:none;
	background:#f6f6f7;
}
.post textarea {
	resize:vertical;
}
.post textarea:focus {
	outline:0;
	border-bottom-color:#cfcfcf;
	box-shadow:0 0.1em 0 rgba(0,0,0,0.09);
}
.post .textarea-wrapper:after {
	content:attr(data-content) ' ';
	visibility:hidden;
	white-space:pre-wrap;
	display:block;
	padding:0.8em 0.6em;
	border-bottom:1px solid #fff;
	line-height:1.3;
}








.button {
	display:inline-block;
	min-width:9em;
	background:var(--barbie);
	color:#fff;
	font-weight:500;
	height:2.4em;
	line-height:2.4em;
	border-radius:1.2em;
	border:0;
	outline:0;
	cursor:pointer;
	text-align:center;
	text-transform:lowercase;
	padding:0 1em;
	transition:box-shadow 100ms;
	user-select:none;
}
.button:hover {
	box-shadow:0 0 0 100vmax inset rgb(0,0,0,0.05);
}
.button:active {
	box-shadow:0 0 0 100vmax inset rgb(0,0,0,0.10);
}
.button-small { /* use for verify button on intake form? */
	height:2em;
	line-height:2em;
	min-width:7em;
}
.button-right {
	float:right;
}
.button-secondary {
	color:#ff317c !important;
	background:#fff !important;
	border:2px solid #ff317c;
	line-height:100%;
}
.button-blue {
	background:var(--marge);
}
.button-blue:hover {
	background:#00649d;
}
.button-blue:active {
	background:#005d93;
}
.button-white,
.button-white:hover,
.button-white:active {
	background:#fff;
	color:#999;
	box-shadow:none;
}
.button-gray {
	color:#666;
	background:#e1e1e1;
}
.button-gray:hover {
	background:#d9d9d9;
}
.button-gray:active {
	background:#d4d4d4;
}
#artwork-tools .button-clear {
	background:none;
	color:#999;
}
#artwork-tools .button-clear:hover {
	background:#fafafa;
}
#artwork-tools .button-clear:active {
	background:#f6f6f6;
}

.button-mobile:before {
	content:'\f3ce';
	content:'\e196';
	font-family:fa-light;
	margin:0 0.4em;
}
.toggle-thumbs {
	margin-left:0.4em;
}
.toggle-thumbs:after {
	content:'\f078';
	font-family:fa-solid;
	font-size:0.8em;
	display:inline-block;
	width:0.7em;
	text-align:center;
	margin-left:1em;
	transition:transform linear 200ms;
}
.thumbs-visible .toggle-thumbs:after {
	transform:rotate(180deg);
}






.approve-sow {
	position:absolute;
	top:-1.3em; right:1.5em;
	text-align:center;
	width:14rem;
}
.approve-sow .button {
	display:block;
	text-transform:none;
	width:14rem;
	margin-bottom:0.5em;
}

.has-trigger {
	width:15.5rem;
}
.has-trigger .button {
	float:left;
	border-radius:1.2em 0 0 1.2em;
	width:12.9rem;
}
.button +.trigger {
	float:right;
	width:2.6rem;
	height:2.4em;
	line-height:2.4em;
	border-radius:0 1.2em 1.2em 0;
	color:#fff;
	background:var(--barbie);
	cursor:pointer;
	border-left:1px solid rgb(0,0,0,0.22);
	text-align:center;
	padding-right:0.3em;
	box-shadow:0 0 0 100vmax inset rgb(0,0,0,0.07);
}
.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);
}
.trigger-menu {
	position:absolute;

}

.terms-note a {
	color:var(--barbie);
}



#feed-sidebar {
	width:15em;
	position:absolute;
	top:13em; right:0;
	background:#ddd;
	height:20em;
}







.timeline-wrapper {
	height:8.5em;
	padding-top:3em;
}
.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 .zero-days:after {
	content:'';
	background:var(--ursula);
	width:2em;
	height:100%;
	position:absolute;
	top:0; left:calc(50% - 1em);
	z-index:1;
}
.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;
}
.timeline-days div.weekend {
	color:#b5b5b5;
	background:#e8e8e8;
	border:0;
}
.timeline-days div.weekend + div.weekend {
	border-right:1px solid #dadada;
}
.timeline-days div.today {
	color:#fff;
	background:var(--barbie);
}
.timeline-days div.today:before {
	content:'TODAY';
	font-weight:500;
	font-size:0.6rem;
}
.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;
	background:#fff;
}



#feed .post .timeline-wrapper {
	padding-top:5em;
	font-size:0.95em;
}
#feed .phase-start-date,
#feed .phase-end-date {
	top:auto;
	bottom:1.6rem;
	padding-top:0;
	padding-bottom:2em;
}






.team-person {
	background:rgba(193 196 210 / 21%);
	padding:0.8em 0.5em 0 4em;
	height:3.8em;
	border-radius:1.9em;
	line-height:1.1;
	position:relative;
	margin-bottom:1em;
}
.team-person:last-child {
	margin-bottom:0;
}
.team-person .avatar {
	position:absolute;
	top:0.5em; left:0.5em;
	margin:0;
	color:#fff;
}
.commenter .avatar,
.pink .avatar {
	background:linear-gradient(to bottom right, var(--peppa), var(--ursula));
}
.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;
}


.commenter {
	float:left;
	font-size:0.67em;
	padding-top:1.2em;
	width:calc(33.33% - 0.8em);
	margin-bottom:0.7em;
	margin-right:0.8em;
}
.commenter strong {
	font-size:1.3em;
}
.commenter .email {
	display:none;
}
.commenter .avatar span {
	display:block;
	transform:scale(1.1);
}









/*
—————————————————
Tabs
—————————————————
*/
.tabs {
	border-bottom:1px solid #ddd;
	height:2em;
	margin:2em 0 3.2em 0;
	text-transform:lowercase;
}
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 {
	font-size:0.8em;
	color:#bbb;
	margin-left:0.5em;
	font-weight:500;
}
.tabs li.active a {
	border-bottom-color:#ff317c;
}
.tabs li.active a span {
	color:#f02e75;
}
.tabs a:hover {
	border-bottom-color:#ddd;
}
.tabs a:active {
	border-bottom-color:#ccc;
}


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





/*
—————————————————
Board Tiles
—————————————————
*/
#board-tiles {
	width:calc(100% + 2.5em);
	margin-right:-2.5em;
	margin-bottom:-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 {
	border-radius:6px;
	max-width:100%;
	max-height:100%;
}
#board-tiles .text {
	position:absolute;
	top:2rem; left:50%;
	width:calc(50% - 1.6rem);
}
#board-tiles h3 {
	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:#61c391;
}
#board-tiles .progress-score {
	font-size:0.8666rem;
	margin-top:0.3em;
}


/*
—————————————————
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:#ff317c;
	background:#fff;
}
.steps li.current {
	background:#ff317c;
}
.steps li.complete:after {
	content:'\f00c';
	font-family:fa-solid;
	font-weight:normal;
	color:#ff317c;
	position:absolute;
	width:2.2em;
	line-height:2.2em;
	text-align:center;
	top:0; left:calc(50% - 1.1em); 
	z-index:5;
}
.steps li.current:after {
	color:#fff;
}
.steps li.active div {
	background:#ff317c;
}



/*
—————————————————
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 select, .grid td select {
	display:inline-block;
	padding:0.3em 0.5em;
	line-height:1.2;
	border-radius:1.2em;
	border:0;
	width:auto;
	height:2.4em;
	box-sizing:border-box;
	max-width:25em;
	margin-right:0.3em;
	outline:0;
}
.toolbar select {
	padding-right:1.2em;
}
.toolbar select.filtered {
	color:#006aa7;
	background:#f0f6fa;
	border-color:#006aa7;
	box-shadow:2px 2px #006aa7;
}
.toolbar input.text {
	width:13em;
	padding:0.4em 0.7em;
}
.toolbar input.button {
	width:7em;
	margin-left:0em;
}
.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;
}















.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:#ff317c;
	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:#61c391;
}
.status .button {
	margin:0 -0.6em 0 0.8em!important;
}





.round-heading {
	cursor:pointer;
	user-select:none;
	display:inline-block;
}
.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:4.5em; left:1.8em;
	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;
}
ul.trigger-menu {
	top:2em;
	left:auto;
	right:1.6em;
	width:15.4em;
}
.round-heading.active + ul.rounds,
.trigger-menu-active + ul.trigger-menu {
	display:block;
}
ul.rounds a,
ul.rounds span {
	display:block;
	padding:0.2em 1em;
	text-transform:lowercase;
	cursor:pointer;
}
ul.rounds a:hover,
ul.rounds span:hover {
	background:rgba(193 196 210 / 17%);
}
ul.rounds a:active,
ul.rounds span:active {
	background:rgba(193 196 210 / 23%);
}

.round-intro {
	max-width:50em;
	margin:0.5em auto;
	position:relative;
	padding-left:3.2em;
}
.round-intro .avatar {
	position:absolute;
	top:0.2em; left:0;
	font-size:0.9em;
}
.round-intro .text {
	border-left:1px solid var(--elsa);
	padding-left:1em;
}




#pins {
	
}
.pin-slider {
	padding:1em 0;
	position:relative;
}
.pins {
	overflow:hidden;
	height:26.6em;
	overflow:hidden;
}
.pins ul {
	width:10000px;
	height:26.6em;
	transition:margin-left ease-in-out 600ms;
}
.pins li {
	float:left;
	padding:0.8em;
	position:relative;
}
.pins ul.small {
	width:auto;
	text-align:center;
}
.pins ul.small li {
	float:none;
	display:inline-block;
}
li.comments:after,
li.approved:after {
	content:'\f075';
	font-family:fa-solid;
	font-size:0.9em;
	color:#fff;
	background:var(--elsa);
	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;
}
li.approved:after {
	content:'\f00c';
	background:#61c391;
}
.pins img,
.pins video {
	display:block;
	width:auto;
	height:25em;
	box-sizing:border-box;
	border-radius:16px;
	outline:0;
}
.pins a {
	display:block;
	position:relative;
	text-decoration:none;
}
.pin-data {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.85);
	border-radius:16px;
	transition:opacity 200ms;
	opacity:0;
	padding:4em 1em 0.7em 1em;
	text-align:center;
	color:#fff;
	font-weight:500;
}
a:hover .pin-data {
	opacity:1;
}
.pin-data h4 {
	margin-bottom:0.2em;
	color:#61c391;
}
.pin-data h4:before {
	content:'\f00c';
	font-family:fa-solid;
	font-size:0.9em;
	margin-right:0.3em;
}
.pin-data h4.comment {
	color:var(--elsa);
	border:0;
	padding:0;
}
.pin-data h4.comment:before {
	content:'\f075';
}
.pin-data p {
	font-size:0.9em;
	padding:0 1.5em;
}
.pin-data span {
	display:block;
}
a:hover .pin-data:after {
	content:'view creative';
	position:absolute;
	bottom:2.4em; left:3em;
	width:calc(100% - 6em);
	background:rgba(255,255,255,0.2);
	line-height:2em;
	border-radius:2em;
}
.slide-arrow {
	position:absolute;
	top:calc(50% - 2em);
	width:4em;
	height:4em;
	color:#d0d0d0;
	text-decoration:none;
	border:0;
	background:#fff;
	border-radius:50%;
	overflow:hidden;
	padding:0;
	cursor:pointer;
}
.slide-arrow:hover {
	color:#bbb;
}
.slide-arrow:active {
	color:#aaa;
}
.slide-arrow:before {
	display:block;
	width:100%;
	text-align:center;
	font-size:4em;
	font-family:fa-light;
	line-height:4rem;
	transition:color 150ms;
	line-height:1;
}
.slide-prev {
	left:-5.4em;
}
.slide-next {
	right:-5.4em;
}
.slide-prev:before {
	content:'\f0a8';
}
.slide-next:before {
	content:'\f0a9';
}


/*
—————————————————
Uncommented
—————————————————
*/
.uncommented {
	padding:2em;
	text-align:center;
}
.uncommented h3 {
	margin-bottom:0.7em;
}
.uncommented p {
	margin-bottom:2em;
}
.uncommented li {
	float:left;
	height:10em;
	margin-right:1em;
}
.uncommented li:last-child {
	margin:0;
}

.uncommented a {
	display:block;
}

.uncommented img, .uncommented video {
	display:block;
	height:10em;
	border-radius:0.5em;
}


/*
—————————————————
Board Preview
—————————————————
*/
#board {
	margin-top:2em;
}
#board ul {
	text-align:center;
	font-size:0;
}
#board li {
	display:inline-block;
	width:25%;
	font-size:1rem;
	margin-bottom:3em;
	position:relative;
	padding:0.8em;
	vertical-align:top;
}
#board .three-up li {
	width:26% !important;
}
#board .five-up li {
	width:20%;
}
#board a {
	display:block;
	width:0;
	padding:75% 50%;
	position:relative;
	text-decoration:none;
}
#board img,
#board video {
	display:block;
	box-sizing:border-box;
	border-radius:16px;
	outline:0;
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
}
#board span.caption {
	display:flex;
	align-items:center;
	height:3em;
	padding:0.7em 0.2em 0 3.3em;
	color:#222;
	position:relative;
	font-size:0.9em;
	line-height:1.2;
	font-family:'Segoe UI', cera-pro;
	text-align:left;
}
#board span.caption:before {
	content:'';
	width:2.2em;
	height:2.2em;
	background:#dadada;
	border-radius:50%;
	position:absolute;
	top:0.7em; left:0.5em;
}
#board span.placeholder:after {
	content:'';
	background:#dadada;
	position:absolute;
	top:1.3em; left:3.3em;
	width:calc(100% - 4.5em);
	height:1em;
}
#board .square li {
	width:50%;
}
#board .square a {
	padding:50%;
}
#board .square li:nth-child(2n + 1) {
	clear:left;
}












.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:#61c391;
}


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




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

.overlay {
}

.carousel {
	position:relative;
	margin:auto
}
.carousel-drawing .carousel-nav,
.carousel-drawing .carousel-dots {
	display:none;
}

.carousel-inner {
	width: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,.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.snap ul {
	transition:none;
}

.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 .3em
}

.carousel-dot-active {
    background: #aaa
}
























/*
—————————————————
Briefing Form
—————————————————
*/

.fancybox-content {
	border-radius:1.2em !important;
}

.brief-step {
	max-width:1300px;
	padding:1.8em;
}
.brief-links {
	height:4em;
	margin:0 auto 1em auto;
	text-transform:lowercase;
	line-height:1.05;
	max-width:60em;
}
.post-content .brief-links {
	margin-top:1em;
}
.post-completed .brief-links {
	margin:0 auto;
}
.brief-links li {
	float:left;
	width:25%;
	text-align:center;
}
.brief-links a {
	display:block;
	height:4em;
	position:relative;
}
.brief-links a:before {
	content:'';
	display:block;
	margin:0 auto 0.3em auto;
	width:1.4rem;
	height:1.4rem;
	border:1px dashed #ccc;
	border-radius:50%;
	box-sizing:border-box;
}
.brief-links li.completed a:before {
	content:'\f00c';
	font-family:fa-solid;
	font-size:0.85rem;
	text-align:center;
	line-height:1.4rem;
	border:0;
	color:#fff;
	background:var(--marge);
}
.brief-links li.active a {
	color:var(--barbie);
}
.brief-links li.active.completed a:before {
	background:var(--barbie);
}
.brief-links a:after {
	content:'\f105';
	font-family:fa-light;
	position:absolute;
	top:0.2em; right:0;
	color:#eee;
	font-size:3em;
	line-height:1;
}
.brief-links li:last-child a:after {
	display:none;
}
.brief-links span {
	display:block;
	font-size:0.9em;
	color:#aaa;
}
.brief-links strong {
	font-size:1.1em;
	font-weight:500;
}


/*
—————————————————
Assets
—————————————————
*/
.asset-summary {
	text-align:center;
}
.asset-summary li {
	display:inline-block;
	vertical-align:top;
	width:15em;
	text-transform:lowercase;
	margin-bottom:-1em;
}
.asset-summary strong {
	display:block;
	font-size:1.1em;
    font-weight:500;
}
.asset-summary strong:before {
	content:'\f07b';
	display:block;
	font-family:fa-solid;
	font-size:2.2em;
	width:3em;
	text-align:center;
	color:#e9e9e9;
	margin:auto;
}
.asset-summary .has-files strong:before {
	color:var(--marge);
}
.asset-summary span {
	display:block;
	color:#aaa;
	position:relative;
    top:-4.55em;
	font-size:0.8em;
	font-weight:500;
}
.asset-summary .has-files span {
	top:-3.8em;
	font-size:1em;
	color:#fff;
}

/*
—————————————————
Alerts
—————————————————
*/
.confirm-message, .error-message {
	padding:0.5rem 2rem 0.5rem 1rem;
	color:#fff;
	background:#61c391;
	box-sizing:border-box;
	font-weight:500;
	position:relative;
	border-radius:0.6em;
	margin-bottom:1em;
}
.error-message {
	background:var(--leela);
}
#form .confirm-message, #form .error-message {
	margin:-3em -3em 2em -3em;
	border-radius:0.6em 0.6em 0 0;
}
.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';
}


/*
—————————————————
Form Elements
—————————————————
*/
#form {
	padding:3em;
	border-radius:1em;
	background:rgba(193 196 203 / 17%);
	width:100%;
	margin-bottom:1em;
	position:relative;
}


#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, #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;
}
#form.briefing-form p:last-child {
	margin-bottom:0;
}
xh3.step-heading {
	margin-bottom:1.8em;
}
xh3.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;
}
.upload-folder h2 {
	font-size:1.2em;
}
.upload-folder h2 + p {
	font-size:0.866em;
	margin:-1.2em 0 1.6em 0;
}


.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 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 {
	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.channel-status {
	width:11em;
}
#form .input-grid input.channel-status + select {
	width:calc(100% - 11.4em);
	margin-right:0;
}

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



#form .configurator {
	padding:1.4em;
	background:#e4e4e4;
	border-radius:8px;
}
#form .configurator h3 {
	margin-top:1.4em;
	padding-top:0;
	border-bottom:1px solid #bbb;
    padding-bottom:0.4em;
	margin-bottom:0.4em;
}
#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 .select-list label {
	display:block;
	margin-bottom:0.8em;
	border-radius:0.3em;
	padding:0.3em 0.5em;
	text-align:center;
}
#form .select-list li {
	margin-bottom:0.3em;
	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;
	padding:0.2em 0.5em;
	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:#ff317c;
}








/*
—————————————————
Upload Assets
—————————————————
*/
#uploads-wrapper {
	display:table;
	border-spacing:2em;
	width:calc(100% + 6em);
	margin:-1.6em -4em -2em -2em;
	table-layout:fixed;
}
.upload-folder {
	display:table-cell;
	background:#fff;
	box-shadow: 0 5px 10px #eaeaea;
	border-radius:0.6em;
	padding:1.5em;
	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:#ff317c;
	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:#61c391;
}
.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;
}



/*
—————————————————
SOW & Brief
—————————————————
*/
.section-readonly {
	margin-bottom:2.4em;
}
.section-readonly h3 {
	display:inline-block;
	font-size:1.1em;
	color:#fff;
	background:#095d9d;
	padding:0.4em 1.4rem !important;
	border-radius:0.5rem 0.5rem 0 0;
	margin:0;
}
.section-readonly dl {
	background:#fff;
	padding:1.4em;
	border-radius:0 0 0.5rem 0.5rem;
	border-bottom:3px solid #dadbdd;
}
.section-readonly dt {
	float:left;
	clear:both;
	width:12rem;
	padding-right:1.4rem;
	font-weight:500;
}
.section-readonly dd {
	float:left;
	width:calc(100% - 12rem);
	padding:0 0 1.8em 1em;
	border-left:1px solid #ccc;
}

.section-readonly dd:last-child {
	padding-bottom:0.5em;
}








/*
—————————————————
Projects
—————————————————
*/
#boards {
	width:calc(100% + 2em);
	margin-right:-2em;
}
#boards li {
	float:left;
	width:calc(16.666% - 2em);
	margin:0 2em 3em 0;
	position:relative;
}
#boards li:nth-child(6n + 1) {
	clear:left;
}
#boards a {
	display:block;
	text-decoration:none;
	color:inherit;
	text-align:center;
}
#boards span.cover {
	display:block;
	padding:75% 50%;
	background-repeat:no-repeat;
	background-position:top center;
	background-size:cover;
	margin-bottom:0.6em;
	position:relative;
	border-radius:8px;
}
#boards span.cover-logo {
	background-size:128px auto;
	background-position:center;
}
#boards span.cover:after {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	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.1);
}
#boards strong {
	display:block;
	font-weight:normal;
	overflow-wrap:break-word;
}
#boards span.viewed {
	display:block;
	color:#aaa;
	font-size:0.875em;
}







/*
—————————————————
Terms
—————————————————
*/

.terms-box {
	padding:1.5em;
	background:rgba(255,255,255,0.8);
	border-radius:5px;
	border:1px solid #ddd;
	counter-reset:termscounter;
}
.terms-box h2 {
	text-transform:none;
}
.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 {
	padding-left:2.3em;
}
.terms-box ul li, ul.bullet 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;
}









/*
—————————————————
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 h3 {
	text-transform:lowercase;
	margin-top:2em;
	font-size:1.3rem;
}
.team-column p {
	margin:-1em 0 2em 0;
}
.team-column .error {
	clear:left;
	display:block;
	color:#ff317c;
	font-weight:500;
	font-size:0.9em;
	padding-top:0.5em;
}
.team {
	margin-bottom:3em;
}
.team li {
	position:relative;
	margin-bottom:1em;
}
.team .team-person {
	margin-bottom:0;
}
.team li .context-menu {
	top:1.2em;
	right:0.8em;
	z-index:auto;
}
.team .text strong {
	display:block;
	padding-top:0.1em;
	font-weight:500;
}
.team .text span {
	display:block;
	color:#818284;
	font-size:0.9em;
}
.team .avatar {
    margin:0 0.6rem 0 0;
}


/*
—————————————————
Context Menu
—————————————————
*/
.context-menu {
	position:absolute;
	z-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:#ff317c;
}
.context-menu-active .context-menu-actions {
	display:block;
}




/*
—————————————————
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:calc(50% - 3.2em);
	height:4em;
	border-left:1px solid #000;
}
.connect-logos img {
	width:11em;
	margin:0 2.5em;
}
.connect-logos .logo-ols {
	width:5.5em;
	height:5.5em;
}
.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;
}
.adjacent-fields p .button {
	height:2em;
	line-height:2em;
}
#package-error {
	color:var(--barbie);
	opacity:0;
	transition:opacity 200ms;
}
#package-error.package-error-visible {
	opacity:1;
}
.create-button {
	text-align:center;
	font-size:1.3em;
	display:none;
}
#verified {
	float:none;
	text-align:center;
	display:none;
}
#verified:before {
	content:'\f00c';
	font-family:fa-solid;
	color:#61c391;
	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;
}
.intake-form #product-detail h2 {
	text-transform:none;
}
#product-detail .back {
	position:relative;
	top:-1.8em; left:-2em;
	color:#fff;
	background:var(--barbie);
	padding:0.3em 1.3em;
	border-radius:2em;
	font-size:0.9em;
	cursor:pointer;
	text-transform:lowercase;
	font-weight:500;
}
#product-detail .back:before {
	content:'\f104';
	font-family:fa-solid;
	margin-right:0.4em;
}


.connect-package-detail {
	display:none;
	background:#fff;
	border-radius:1em;
	box-shadow:0 0 0.6em rgba(0,0,0,0.15);
	padding:2.5em;
}
.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;
}


/*
——————————————————
New package layout
——————————————————
*/
.product-list {
	width:calc(100% + 1.2em);
	margin-right:-1.2em;
}
.product-list li {
	width:calc(33.333% - 1.2em);
	float:left;
	margin-right:1.2em;
	margin-bottom:1.2em;
}
.product-list-center-aligned {
	width:auto;
	margin-right:0;
	text-align:center;
}
.product-list-center-aligned li {
	display:inline-block;
	float:none;
	margin:0 0.5em 1em 0.5em;
	text-align:left;
}
.product-list h3 {
	color:#224e73;
	font-size:1.4em;
	line-height:1;
}
.product-list li input {
	display:none;
}
.product-list li label {
	display:block;
	background:rgba(193 196 210 / 23%);
	padding:1.6em;
	border-radius:1em;
	cursor:pointer;
}
.product-list li label:hover {
	background:#224e73;
}
.product-list li label:hover h3 {
	color:#fff;
}
.product-icons {
	height:4.8em;
}
.product-icons div {
	float:left;
	width:2.7em;
	height:4.8em;
	background:var(--elsa);
	margin-right:0.4em;
	border-radius:0.4em;
	position:relative;
}
.product-icons div.max,
.product-icons div.spotlight {
	width:5.8em;
}
.product-icons div.video:after,
.product-icons div.spotlight:after,
.product-icons div.idea:after {
	content:'\f144';
	font-family:fa-solid;
	font-size:1.3em;
	width:1em;
	height:1em;
	line-height:1em;
	text-align:center;
	position:absolute;
	top:calc(50% - 0.5em);
	left:calc(50% - 0.5em);
	color:#1b405d;
}
.product-icons div.idea:before {
	content:'';
	position:absolute;
	bottom:0.7em; left:0.3em;
	width:calc(100% - 0.6em);
	background:#1b405d;
	height:0.2em;
	border-radius:0.1em;
}
.product-icons div.spotlight {
	height:3.6em;
}
.product-icons div.spotlight .tiles {
	position:absolute;
	top:3.75em; left:0;
	width:100%;
	height:1.05em;
	padding:0.15em 0 0.15em 0.15em;
	background:var(--elsa);
	border-radius:0.2em;
}
.product-icons div.spotlight .tiles span {
	float:left;
	width:calc(25% - 0.15em);
	height:100%;
	margin-right:0.15em;
	background:#f1f1f4;
	border-radius:0.1em;
}
.product-list li label:hover div.spotlight .tiles span {
	background:#224e73;
}

.product-icons div .extra {
	font-size:1.3em;
	font-weight:500;
	color:#1b405d;
	width:2em;
	height:1em;
	line-height:1em;
	text-align:center;
	position:absolute;
	top:calc(50% - 0.5em);
	left:calc(50% - 1em);
}
.product-icons div.iteration {
	background:#adb2ce;
}

.product-list input:checked + label {
	opacity:1;
}


.xconnect-package-detail {
	background:#1b405d;
	color:#fff;
	position:relative;
}
.xconnect-package-detail h2 {
	color:#d3f4ee;
	font-size:1.4em;
	font-weight:500;
}
.xback {
	position:absolute;
	top:-1em;
	left:-1em;
	color:#1b405d;
	cursor:pointer;
	background:#d3f4ee;
	padding:0.3em 0.7em;
	border-radius:2em;
}



/*
—————————————————
Client Search
—————————————————
*/
.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;
}








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




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






















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

#artwork-sidebar {
	height:100vh;
	background:#29292f;
	padding:1.6em;
	overflow-y:auto;
	display:none;
}
#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:#ff317c;
}
#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 {
	width:100%;
	height:100vh;
	xgrid-template-columns:16em calc(70% - 8em) calc(30% - 8em);
}
#artwork-grid.info-panel-expanded {
	xgrid-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:#61c391;
	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 {
	float:right;
	position:relative;
	width:calc(100% - 38em);
	height:100vh;
	padding:4.5em 12em 3em 12em;
	transition:background-color 150ms;
	z-index:1;
}
.client-view #artwork-panel {
	float:left;
}
.thumbs-visible #artwork-panel {
	padding-top:13.5em;
}
.thumbs-visible #thumbs-slider {
	display:block;
}
#artwork-panel .latest {
	text-align:center;
	margin:-1em 0 1em 0;
}
#artwork-tools {
	position:absolute;
	width:30em;
	top:1em; left:calc(50% - 15em);
	text-align:center;
}
#compare {
	position:absolute;
	background:#29292fdd;
	top:0; left:0;
	width:100%;
	height:100%;
	display:none;
	z-index:4;
}
#compare.narrow {
	width:calc(100% - 38em);
	left:38em;
	z-index:1;
}
#artwork-panel + #compare {
	background:#fff;
}
#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;
}
#toggle-compare-narrow {
	position:absolute;
	top:1em; left:1em;
	cursor:pointer;
	width:1.5em;
	line-height:1.2em;
	text-align:center;
	font-size:1.6em;
	opacity:0.7;
}
#toggle-compare-narrow:hover {
	opacity:1;
}
#toggle-compare-narrow:after {
	content:'\f340';
	font-family:fa-light;
}
#compare.narrow #toggle-compare-narrow:after {
	content:'\f344';
}
#compare p {
	height:4em;
	text-align:center;
	margin:auto;
	color:#fff;
}
#artwork-panel + #compare #close-compare,
#artwork-panel + #compare p {
	color:#333;
}
#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;
	max-width:36em;
	margin-left:auto;
	margin-right:auto;
}
.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 {
	position:absolute;
	top:1em; left:1em;
	width:36em;
	height:calc(100vh - 2em);
	padding:1em;
	border-radius:1em;
	background:#f1f1f4;
	z-index:3;
}
.client-view #info-panel {
	left:auto; right:1em;
	overflow:hidden;
}
#info-panel.approved:after {
	content:'\f00c';
	background:#61c391;
	position:absolute;
	top:-0.6em;
	right:-0.6em;
	font-family:fa-solid;
	font-size:0.9em;
	color:#fff;
	width:2.3em;
	height:2.3em;
	line-height:2.3em;
	border-radius:50%;
	text-align:center;
}


.artwork-wrapper {
	width:100%;
	height:100%;
	max-width:100%;
	max-height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
}
.artwork-dimensions {
	max-width:100%;
	max-height:100%;
	position:absolute;
	margin:auto;
	left:0;
	right:0;
	top:0;
	bottom:0;
}

.artwork-wrapper .presentation {
	width:0;
	height:0;
	padding:calc(28.125% + 18px) 50%;
	position:relative;
}
.artwork-wrapper .presentation iframe {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
}

.artwork-dimensions:after {
	xcontent:''; /* Probably not needed */
}
.drawing-tools {
	position:absolute;
	top:0; left:-3em;
	border-radius:0.3em;
	width:2em;
	overflow:hidden;
	display:none;
}
.drawing-tools span {
	display:block;
	width:2em;
	height:2em;
	line-height:2em;
	text-align:center;
	color:#666;
	background:rgba(193 196 210 / 35%);
	cursor:pointer;
	user-select:none;
}
.drawing-tools span:hover {
	background:rgba(193 196 210 / 50%);
}
.drawing-tools span:after {
	font-family:fa-light;
}
.drawing-tools span:after {
	font-family:fa-light;
}
.drawing-undo:after {
	content:'\f2ea';
}
.drawing-redo:after {
	content:'\f01e';
}
.drawing-clear:after {
	content:'\f00d';
}




#artwork-panel .status + .artwork-wrapper {
	max-height:calc(100% - 5em);
}
.artwork-wrapper img.single,
.artwork-wrapper video {
	display:block;
	width:100%;
	height:100%;
	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-wrapper img {
	cursor:pointer;
	user-select:none;
}
.snipping {
	cursor:crosshair;
}
.snipping img,
.snipping video {
	pointer-events:none;
}
#snip-container {
	position:absolute;
	border:2px dashed red;
	pointer-events:none;
	display:none;
}


.artwork-text {
	display:none;
}
.artwork-text-wrapper {
	height:100%;
	max-width:100%;
	display:flex;
	position:relative;
	transition:100ms background-color;
	background:#fff;
}

.artwork-text-wrapper img:hover {
	xbackground:rgba(0,0,0,0.5);
	xmix-blend-mode:multiply;
}
.artwork-text-wrapper img {
	xmix-blend-mode:multiply;
}


.artwork-with-text .artwork-text {
	display:block;
}
.artwork-with-text .artwork-text-wrapper {
	display:block;
	height:auto;
	max-height:100%;
	width:22vw;
	xwidth:40vw;
	overflow-y:overlay;
	box-shadow:0 0 0.7em rgba(0,0,0,0.08);
	background:#fff;
	border-radius:1em 1em 0 0;
}


#sketchpad {
	pointer-events:none;
}
#sketchpad.editable {
	pointer-events:all;
}

.artwork-text-wrapper::-webkit-scrollbar {
	display:block;
	width:10px;
	display:none;
}
.artwork-text-wrapper::-webkit-scrollbar-button {
	display:none;
}
.artwork-text-wrapper::-webkit-scrollbar-track {
	background-color:#00000000;
}
.artwork-text-wrapper::-webkit-scrollbar-track-piece {
	background-color:#00000000;
}
.artwork-text-wrapper::-webkit-scrollbar-thumb {
	background-color:#00000000;
	border:1px solid #ffffff40;
	border-radius:24px;
}
.artwork-text-wrapper:hover::-webkit-scrollbar-thumb {
	background-color:#00000025;
}




.artwork-with-text img.single,
.artwork-with-text video,
.artwork-with-text .carousel-inner {
	border-radius:0;
	box-shadow:none;
}
.artwork-with-text .carousel-inner {
	margin-bottom:2em;
}
.artwork-text {
	padding:1.6em;
	font-family:-apple-system, BlinkMacSystemFont, Arial, 'Segoe UI';
	font-size:0.9em;
	color:#222;
}
.artwork-text h3 {
	font-size:1.6em;
	font-weight:600;
	margin-bottom:0.4em;
	outline:0;
	padding:0.2rem;
	line-height:1.1;
}
.artwork-text .artwork-description {
	outline:0;
	padding:0.2rem 0.4rem;
}
.artwork-text h3:focus,
.artwork-text .artwork-description:focus {
	background:#fffddd;
}
.artwork-text h3:empty:after,
.artwork-text .artwork-description:empty:after {
	content:attr(placeholder);
	pointer-events:none;
	color:#aaa;
}
.dummy-avatar {
	height:2em;
	position:relative;
	float:left;
	width:50%;
	margin-top:1.7em;
}
.dummy-avatar:before {
	content:'';
	position:absolute;
	top:0; left:0;
	width:2.4em;
	height:2.4em;
	border-radius:50%;
	background:#e9e9e9;
}
.dummy-avatar div {
	position:absolute;
	top:0.4em; left:3.2em;
}
.dummy-avatar div:before {
	content:'';
	position:absolute;
	top:0; left:0;
	width:7em;
	height:0.6em;
	background:#e9e9e9;
}
.dummy-avatar div:after {
	content:'';
	position:absolute;
	top:1em; left:0;
	width:4em;
	height:0.6em;
	background:#e9e9e9;
}
.dummy-lozenges {
	height:2.4em;
	position:relative;
	float:right;
	margin-top:1.7em;
}
.dummy-lozenges:before {
	content:'';
	float:left;
	width:6em;
	height:2.4em;
	background:#eee;
	border-radius:1.2em;
	margin-right:0.5em;
}
.dummy-lozenges:after {
	content:'';
	float:left;
	width:6em;
	height:2.4em;
	background:#ccc;
	border-radius:1.2em;
}



#artwork-nav a {
	position:absolute;
	top:calc(50% - 2em);
	width:4em;
	height:4em;
	color:#d0d0d0;
	text-decoration:none;
	outline: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';
}



/*
—————————————————
Tag Icons
—————————————————
*/
.tag-icons {
	text-align:center;
	display:inline-block;
	margin-left:0.3em;
}
.tag-icon {
	font-size:0.7em;
	font-weight:500;
	line-height:1.4em;
	color:#fff;
	text-align:center;
	min-width:4em;
	padding:0 0.6em;
	border-radius:2em;
	display:inline-block;
}
.tag1 {
	color:var(--barbie);
	background:#e6347822;
}
.tag2 {
	color:#4db881;
	background:#61c39122;
}




#thumbs-slider {
	position:absolute;
	top:4em; left:0;
	height:8em;
	width:100%;
	padding:1em;
	text-align:center;
	display:none;
}
#thumbs-slider ul {
	max-width:930px;
	margin:auto;
}
#thumbs-slider li {
	display:inline-block;
	vertical-align:top;
	margin:0 0.3em;
	position:relative;
}
#thumbs-slider img {
	height:6em;
	filter:grayscale(1);
	opacity:0.7;
	border-radius:0.25em;
	transition:all 150ms;
}
#thumbs-slider a:hover img,
#thumbs-slider li.active img {
	filter:none;
	opacity:1;
}
#thumbs-slider li.approved:after {
	font-size:0.7em;
	top:-0.6em; right:-0.6em;
}
#thumbs-slider .squares li {
	width:6em;
}
#thumbs-slider .squares .image {
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	background:#f1f1f4;
	border-radius:0.3em;
	overflow:hidden;
	aspect-ratio:1;
}
#thumbs-slider .squares img {
	max-width:calc(100% - 0.6em);
	max-height:calc(100% - 0.6em);
	border-radius:0;
	height:auto;
}



.creative-approval,
.creative-approved {
	height:4em;
	padding:0.8em;
	background:rgba(193 196 210 / 35%);
	text-align:center;
	margin:-1em -1em 1em -1em;
	border-radius:0.6em 0.6em 0 0;
}

.creative-approved {
	color:#fff;
	background:#61c391;
	font-weight:500;
}
.creative-approved p {
	line-height:2rem;
	vertical-align:top;
}
.creative-approved p:before {
	content:'\f00c';
	font-family:fa-solid;
	font-size:1.2em;
	line-height:2rem;
	margin-right:0.2em;
	position:relative;
	top:0.1em;
}
.creative-approved .button-undo {
	margin-left:1em;
	background:#fff;
	border:0;
	display:inline-block;
	width:4em;
	font-size:0.9em;
	border-radius:0.8em;
	height:1.6em;
	cursor:pointer;
}


#info-header {
	padding:0.5em 0.5em 1.5em 0.5em;
	position:relative;
}
#info-header h1 {
	font-size:1.1em;
	font-weight:500;
	text-align:center;
	word-wrap:break-word;
}
#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 {
	display:none;
	position:absolute;
	top:0; 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-content {
	background:#fff;
	border-radius:0.6em;
	box-shadow:0 0 0.5em rgb(0 0 0 / 3%);
	padding:1em;
	overflow-y:auto;
	height:calc(100vh - 24em);
}

.info-content-empty {
	display:none;
}




.thread-switcher {
	height:2.3em;
	width:20em;
	margin:auto;
}
.thread-switcher li {
	float:left;
	width:48%;
	margin:0 1%;
}
.thread-switcher span {
	display:block;
	line-height:2em;
	padding-top:0.3em;
	text-align:center;
	text-transform:lowercase;
	font-weight:500;
	border-radius:0.5em 0.5em 0 0;
	cursor:pointer;
	user-select:none;
}
.thread-switcher span:hover {
	background:rgba(193 196 210 / 35%);
}
.thread-switcher.client-mode li:first-child span {
	color:#fff;
	background:var(--marge);
}
.thread-switcher.studio-mode li:last-child span {
	color:#fff;
	background:var(--barbie);
}

.client-mode .client-thread,
.studio-mode .studio-thread {
	display:block;
}
.client-mode .studio-thread,
.studio-mode .client-thread {
	display:none;
}


#comments-panel h3 {
	font-size:1.7em;
	text-transform:lowercase;
	text-align:center;
	margin:0.4em 0 1em 0
}





#comments-panel {
	position:relative;
	padding-bottom:0;
	font-size:0.9375em;
}




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

#comments-panel {
	position:relative;
}



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



.compose-comment {
	background:#fff;
	border-radius:0.6em;
	box-shadow:0 0 0.5em rgb(0 0 0 / 3%);
	min-height:7em;
	position:relative;
	padding-bottom:3em;
	padding-left:3.8em;
}
.compose-comment:before {
	content:'';
	position:absolute;
	top:0.3em; left:3.5em;
	width:0.3em;
	height:calc(100% - 0.6em);
	background:#f1f1f4;
}
.add-comment {
	display:none; /* TEMP */
}
#info-panel .compose-comment .avatar {
	font-size:0.9rem;
	position:absolute;
	top:0.8em; left:0.8em
}
.comment-editor {
	line-height:1.3;
	padding:1em;
	outline:0;
}
.comment-editor:empty:before {
	content:attr(placeholder);
	pointer-events:none;
	display:block;
}
.comment-actions {
	position:absolute;
	bottom:0.4em; left:4.5em;
	height:1.8em;
}
.comment-actions .icon {
	float:left;
	margin-right:0.3em;
	width:1.8rem;
	height:1.8rem;
	line-height:1.8rem;
	border-radius:50%;
	cursor:pointer;
	transition:background-color 150ms;
	text-align:center;
	position:relative;
}
.comment-actions .icon .tooltip {
	pointer-events:none;
	opacity:0;
	transition:opacity 150ms;
	position:absolute;
	bottom:2.8em; left:0.9rem;
	color:#fff;
	background:#000;
	font-size:0.8em;
	font-weight:500;
	padding:0.7em 0.8em;
	line-height:1.2;
	border-radius:0.5em;
	width:16em;
	margin-left:-8em;
}
.comment-actions .icon:hover {
	background:rgba(193 196 210 / 35%);
}
.comment-actions .icon:hover .tooltip {
	opacity:1;
}
.comment-actions .icon-active {
	color:#fff !important;
	background:var(--marge) !important;
}
.comment-actions .icon:before {
	font-family:fa-light;
	font-size:0.95em;
}
.comment-actions .attach:before {
	content:'\f0c6';
}
.comment-actions .draw:before {
	content:'\e23f';
}
.comment-actions .crop:before {
	content:'\e269';
}
.comment-actions .clock:before {
	content:'\f017';
}
.comment-actions .timestamp,
.comment-actions .carousel-panel-wrapper {
	float:left;
	line-height:1;
	border-radius:0.2em;
	margin:0.3em 0 0 0.3em;
	font-size:0.9em;
	overflow:hidden;
}
.comment-actions .timestamp,
.comment-actions .carousel-panel,
.comment-actions .carousel-panel-all {
	float:left;
	padding:0.15em 0.4em;
	color:#4db881;
	background:#61c39122;
}
.comment-actions .carousel-panel-remove {
	float:left;
	color:#fff;
	background:#61c391dd;
	cursor:pointer;
	width:1.3em;
	padding:0.15em 0;
	text-align:center;
}
.comment-actions .carousel-panel-remove:after {
	font-family:fa-light;
	content:'\f00d';
	display:inline-block;
	font-size:0.8em;
}
.comment-actions .carousel-panel-all {
	color:#aaa;
	background:#f1f1f8;
	cursor:pointer;
	display:none;
}
.all-panels .carousel-panel-all {
	display:block;
}
.all-panels .carousel-panel,
.all-panels .carousel-panel-remove {
	display:none;
}
.comment-actions .timestamp {
	display:none;
}
.comment-actions .timestamp:after {
	content:' seconds';
}
.comment-actions .carousel-panel:before {
	content:'Panel ';
}


.post-button-wrapper {
	position:absolute;
	bottom:0; right:0;
	width:7em;
	height:2em;
}
.post-button {
	float:left;
	width:5em;
	height:2em;
	line-height:2em;
	text-align:center;
	color:#fff;
	background:var(--marge);
	border-radius:0.6em 0 0 0;
	text-transform:lowercase;
	font-weight:500;
	cursor:pointer;
	user-select:none;
}
.post-button-wrapper .trigger {
	float:right;
	width:2em;
	height:2em;
	line-height:2em;
	border-radius:0 0 0.6em 0;
	color:#fff;
	background:var(--marge);
	cursor:pointer;
	border-left:1px solid rgb(0,0,0,0.22);
	text-align:center;
	padding-right:0.3em;
	box-shadow:0 0 0 100vmax inset rgb(0,0,0,0.07);
}
.post-button-wrapper .trigger:after {
	content:'\f078';
	font-family:fa-solid;
	font-size:0.8em;
	transition:transform linear 200ms;
	display:inline-block;
}
.post-button-wrapper-active .trigger:after {
	transform:rotate(180deg);
}
.post-button-wrapper .trigger-menu {
	display:none;
	top:2.5em; right:0;
}
.post-button-wrapper-active .trigger-menu  {
	display:block;
}




.compose-drawer {
	background:#e1e1e8;
	border-radius:0 0 0.6em 0.6em;
	padding:0.5em 0.8em;
	margin:0 8.5em 1.2em 1em;
}

.compose-drawer .button {
	display:none;
}





























#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 {
	xfont-size:0.9em;
	xline-height:2.2rem;
}


/*
—————————————————
Context Menu
—————————————————
*/
.context-menu {
	position:absolute;
	z-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:#ff317c;
}
.context-menu-active .context-menu-actions {
	display:block;
}

/*
—————————————————
Comments
—————————————————
*/
#info-panel .comments h4 {
	text-align:center;
	position:relative;
	height:1.6em;
	margin:1.7em 0 1.2em 0;
}
#info-panel .comments h4:first-child {
	margin-top:0.5em;
}
#info-panel .comments h4:before {
	content:'';
	border-top:1px solid #ddd;
	position:absolute;
	top:0.9em; left:0;
	width:100%;
}
#info-panel .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;
}
#info-panel .comments li.comment-item {
	min-height:3em;
	position:relative;
	margin-bottom:1em;
	padding-left:2.7em;
}
#info-panel .comments li ul {
	margin-top:0.6em;
	margin-left:-0.5em;
}

#info-panel .comments .avatar {
	position:absolute;
	top:0; left:-0.2em;
	margin-right:0.6em;
}
.comment {
	padding:0.6em 0.8em 0.4em 0.8em;
	border-left:0.3em solid #eee;
	cursor:pointer;
}
.comment-active {
	background:#f7f7fb;
}
.comment:hover,
.comment-active {
	border-color:var(--barbie);
}
.comment-body {
	position:relative;
}
.comment-timestamp {
	display:inline-block;
	color:#4db881;
	background:#61c39122;
	padding:0.15em 0.3em;
	line-height:1;
	border-radius:0.2em;
}
.comment-sketch {
	display:inline-block;
	width:1.5em;
	text-align:center;
}
.comment-sketch:before {
	content:'\e23f';
	font-family:fa-light;
	xfont-size:0.95em;
}

.comment-carousel-panel {
	display:block;
	color:#fff;
	width:4em;
	height:1.35em;
	line-height:1.35em;
	text-align:center;
	font-weight:500;
	font-size:0.9em;
	border-radius:0.3em;
	margin-bottom:0.2em;
}
.comment-carousel-panel:before {
	content:"Panel ";
}


.approval .comment-text {
	padding:0.5em 0.7em;
	border-radius:0.6em;
}
.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:#61c391;
}
.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:#61c391;
}
.comments li.reply-comment .comment-text p:first-child:before {
	display:none !important;
}


.comments .userdata {
	margin-bottom:0.5em;
}
.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';
}
.comments li.studio-contact .userdata strong:after {
	content:'Studio Contact';
}


.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:#ff317c;
}
.comments .menu-dots-active + .menu-actions {
	display:block;
}





.comment-images {
	float:left;
}
.comment .comment-images {
	margin:0 !important;
}
.comment .comment-images .delete {
	display:none;
}
.comment-images-visible {
	display:inline-block;
}
.comment-images ul {
	float:left;
}
.comment-images li {
	display:inline-block;
	margin:0.2em 0.6em 0.2em 0;
	position:relative;
	vertical-align:top;
}
.comment-images li.sketch-capture {
	display:none;
}
.comment-images a {
	display:block;
	overflow:hidden;
	border-radius:0.3em;
	background:#000;
}
.comment-images img {
	display:block;
	width:3em;
	height:3em;
	object-fit:cover;
}
.comment-images a:hover img {
	opacity:0.97;
}
.comment-images .delete,
.comment-attachments .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;
}
.comment-images .delete:after,
.comment-attachments .delete:after {
	display:block;
	font-family:fa-light;
	content:'\f00d';
	font-size:0.8em;
	line-height:1.5;
	text-align:center;
}


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





.comment-metadata {
	color:#aaa;
	margin-top:0.5em;
}
.comment-metadata div {
	display:inline-block;
}
.comment-metadata .action,
.comment-metadata .likes {
	display:inline-block;
	font-size:0.8125em;
	margin-right:0.9em;
	user-select:none;
	opacity:0;
	transition:opacity 150ms;
}
.comment:hover .comment-metadata .action {
	opacity:1;
}
.comments .like,
.comments .reply {
	cursor:pointer;
}
.xcomments .liked,
.comments .like:hover,
.comments .reply:hover {
	color:#ff317c;
}
.comments .reply-wrapper,
.comments .edit-wrapper {
	position:relative;
	display:none;
}
.comments .reply-wrapper {
	margin:0.5em 0;
}
.comments .reply-wrapper-active {
	display:block;
}
.comments .reply-active {
	pointer-events:none;
	color:#ff317c;
}
.comments .reply-wrapper .button,
.comments .edit-wrapper .button {
	xposition:absolute;
	xbottom:0.5em;
	xright:0.5em;
	xmargin-right:0;
	xz-index:2;
	xfont-size:0.8666em;
}


.comments .button-save,
.comments .reply-wrapper .button {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 2em;
	height: 2em;
	line-height: 2em;
	text-align: center;
	color: #fff;
	background: var(--marge);
	min-width: 0;
	width: 5.5em;
	border-radius: 0.6em 0 0.6em 0;
	text-transform: lowercase;
	font-weight: 500;
	cursor: pointer;
	user-select: none;
}

.comments .button-cancel {
	position:absolute;
	bottom:0.6em; left:0.9em;
	text-transform:lowercase;
	color:#aaa;
	font-size:0.8125em;
}






.comments .reply-wrapper textarea,
.comments .edit-wrapper textarea {
	display:block;
	width:100%;
	height:100%;
	border:1px solid #ddd;
	background:#fbfbfb;
	border-radius:0.5em;
	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;
	opacity:1;
}
.comments .likes:before {
	content:'\f164';
	font-family:fa-solid;
	color:#ff317c;
	margin-right:0.2em;
}
.comments .likes-wrapper {
	float:left;
	margin:-0.1em 1em 0 0 ;
}
.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 {
	display:none;
	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:rgba(193 196 210 / 35%);
	overflow:hidden;
	position:absolute;
	bottom:0; left:0;
	width:100%;
	text-decoration:none;
}
#activity h3 strong {
}
#activity h3 span {
	font-weight:300;
}
#activity h3:before {
	content:'\f4a6';
	content:'\f06e';
	font-family:fa-light;
	display:inline-block;
	margin-right:0.6em;
	position:relative;
	top:0.15em;
}


#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:#ff317c;
}
#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:#ff317c;
	font-size:1.1em;
}
*/

/*
—————————————————
Feedback List
—————————————————
*/
.feedback-list {
	max-width:60em;
	margin:auto;
}
.feedback-list li {
	background:#f5f5f5;
	padding:1.2em;
	margin-bottom:1em;
	border-radius:0.5em;
	position:relative;
}
.feedback-list li:last-child {
	margin:0;
}
.feedback-list p {
	margin-bottom:0.5em;
}
.feedback-list .checkbox {
	position:absolute;
	top:0; left:-3em;
	width:1.8em;
	height:1.8em;
	cursor:pointer;
	color:#fff;
	background:#fff;
	border-radius:0.3em;
	border:2px solid #ccc;
	text-align:center;
	line-height:1.8em;
}
.feedback-list li.checked .checkbox {
	border:none;
	background:#61c391;
}
.feedback-list li.checked .checkbox:after {
	content:'\f00c';
	font-family:fa-solid;
}

/*
—————————————————
Edit Tasks
—————————————————
*/

#task-content {
	background:#fff;
	border-radius:0 0 0.6em 0.6em;
	box-shadow:0 0 0.5em rgb(0 0 0 / 3%);
	padding:1.5em;
	overflow-y:auto;
	height:calc(100vh - 12.8em);
}


.tasklist {
	font-size:14px;
	line-height:1.3;
}
.tasklist .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;
}
.tasklist .top-level-task:first-child {
	border-top:0;
}
.tasklist .task-metadata-resolved + .task-content {
	color:#ccc;
}
.tasklist .task-heading {
	padding:2em 0 0.3em 0;
	background:#fff;
	border-top:0;
	border-bottom:3px solid #ddd;
}
.tasklist .task-heading .task-content {
	font-size:1.2em;
	line-height:1.3rem;
	font-weight:500;
}
.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-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.45em; 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:#61c391;
}
.tasklist .task-metadata-resolved .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-metadata-resolved .roundel img,
.tasklist .task-metadata-resolved .roundel span {
	display:none;
}



/*
.tasklist .task-actions li {
	position:absolute;
	padding:0.2em 0;
	background:rgba(193 196 210 / 23%);
	border-radius:2em;
	text-align:center;
	font-size:0.9em;
	cursor:pointer;
	user-select:none;
}
.tasklist .task-actions li:hover {
	background:rgba(193 196 210 / 31%);
}
.tasklist .task-actions li.button-resolve {
	top:1em; left:1em;
	width:calc(100% - 2em);
	color:#fff;
	background:var(--barbie);
}
.tasklist .task-actions li.button-resolve:after {
	content:'Resolve';
}
.tasklist .task-metadata-resolved li.button-resolve:after {
	content:'Unresolve';
}


.tasklist .task-actions li.button-accept {
	width:4.8em; top:1em; left:1em;
	color:#fff;
	background:var(--barbie);
}
.tasklist .task-actions li.button-ignore {
	width:4.8em; top:1em; left:calc(50% - 2.4em);
}
.tasklist .task-actions li.button-clear {
	width:4.8em; top:1em; right:1em;
}


.tasklist .task-actions li.button-delete {
	width:4.8em; bottom:1em; left:1em;
}
.tasklist .task-actions li.button-duplicate {
	width:4.8em; bottom:1em; left:calc(50% - 2.4em);
}
.tasklist .task-actions li.button-reply {
	width:4.8em; bottom:1em; right:1em;
}

*/

.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 .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-ignore:before    { content:'\f00d' }
.task-actions li.button-clear:before     { content:' ' }
.task-actions li.button-delete:before    { content:'\f2ed' }
.task-actions li.button-duplicate:before { content:'\f0c5' }
.task-actions li.button-reply:before     { content:'\f3e5' }

.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-content {
	padding:0.4em 0.5em;
	margin:-0.4em -0.5em;
	border-radius:0.3em;
	outline:0;
}
.tasklist .task-heading .task-content {
	margin-bottom:-0.4em;
}
.tasklist .task-heading + .top-level-task {
	padding-top:1em;
	border-top:0;
}
.tasklist .task-heading + .top-level-task .task-metadata {
	top:0.65em;
}
.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 {
	display:none;
	margin-top:0.6em;
}
.tasklist .task-images-visible {
	display:block;
}
.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;
}
.tasklist .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;
}
.tasklist .task-images .delete:after {
	display:block;
	font-family:fa-light;
	content:'\f00d';
	font-size:0.8em;
	line-height:1.5;
	text-align:center;
}

#task-tools {
	height:1.9em;
	text-align:center;
	font-size:0.95em;
}
#task-tools .button {
	height:1.9em;
	line-height:1.9em;
	color:inherit;
	background:#fff;
	font-weight:normal;
	margin:0 0.1em;
	user-select:none;
	text-transform:none;
	min-width:7em;
}
#task-tools .button:hover {
	box-shadow:0 0.2em 0.5em rgba(0,0,0,0.05);
}
#task-tools .button-active {
	color:#fff;
	background:var(--marge);
}


.tasklist.sorting-visible .top-level-task {
	background:#f1f1f4;
	border:0;
	margin-bottom:0.4em;
	border-radius:0.5em;
	user-select:none;
	cursor:move;
	min-height:0;
}
.tasklist.sorting-visible .top-level-task * {
	pointer-events:none;
}


.tasklist.sorting-visible .task-heading + .top-level-task .task-metadata {
	top:0.45em;
}
.tasklist.sorting-visible .task-heading + .top-level-task {
	padding-top:0.8em;
}

.tasklist.sorting-visible .top-level-task {
	padding-left:3.3em;
}
.tasklist.sorting-visible .task-heading {
	background:#dadce4;
	padding:0.8em;
}
.tasklist.sorting-visible .task-metadata {
	left:0.5em;
}
.tasklist.sorting-visible .task-content {
	padding:0;
	margin:0;
}
.tasklist.sorting-visible .replies {
	margin-bottom:-0.8em;
	padding-right:0.8em;
}
.tasklist.sorting-visible .reply {
	border-top-color:#ccc;
}
.tasklist.sorting-visible .reply .task-metadata {
	left:0;
}
.tasklist.sorting-visible .new-task-wrapper {
	display:none;
}




.tasklist .placeholder {
	border-radius:0.5em;
	background:rgba(193 196 210 / 8%);
	padding:calc(0.8em - 2px);
	margin-bottom:0.4em;
	border:2px dashed rgba(193 196 210 / 70%);
}



#comments {
	position:absolute;
	top:3em; left:9em;
	z-index:2;
	width:28em;
	height:calc(100vh - 6em);
	padding:1.5em;
	background:#dadce4;
	border-radius:0 1em 1em 0;
	transition:left 300ms ease-in-out;
}
#close-comments {
	position:absolute;
	top:0.5em; right:0.5em;
	color:#fff;
	width:2em;
	height:2em;
	cursor:pointer;
	text-align:center;
	line-height:2;
}
#close-comments:after {
	content:'\f00d';
	font-family:fa-solid;
}


#comments.visible {
	left:37em;
}
#comments-content {
	background:#fff;
	border-radius:0 0.6em 0.6em 0.6em;
	box-shadow:0 0 0.5em rgb(0 0 0 / 3%);
	padding:1.5em;
	overflow-y:auto;
	height:calc(100% - 1.7em);
}
#comments-content div {
	font-size:14px;
}
#comment-tabs, #task-tabs {
	height:1.7em;
}
#comment-tabs li, #task-tabs li {
	float:left;
	margin-right:0.4em;
	border-radius:0.4em 0.4em 0 0;
	width:3.4em;
	height:1.7em;
	line-height:1.7em;
	background:linear-gradient(to bottom, #f1f1f4 60%, #dadce4);
	text-align:center;
	cursor:pointer;
	user-select:none;
}
#task-tabs li:first-child {
	width:4em;
}
#task-tabs {
	background:#dadce4;
	padding:1em 1em 0 1em;
	margin-top:1em;
	border-radius:0.6em 0.6em 0 0;
	height:2.7em;

}
#comment-tabs li.active,
#task-tabs li.active {
	background:#fff;
}
#comment-tabs li.first-approved,
#task-tabs li.first-approved {
	color:#fff;
	background:#61c391;
}
#comment-tabs li.active.first-approved,
#task-tabs li.active.first-approved {
	color:#61c391;
	background:#fff;
	font-weight:500;
}


.round-tasks {
	display:none;
}
.round-tasks-active {
	display:block;
}



.round-comments {
	display:none;
}
.round-comments-active {
	display:block;
}
.round-comments .comment-wrapper {
	margin-bottom:1.2em;
}
.round-comments .comment-user {
	display:block;
	font-weight:500;
	font-size:0.95em;
	margin-bottom:0.2em;
}
.round-comments .comment-bubble {
	background:#f1f1f4;
	padding:0.6em 0.8em;
	border-radius:0.8em;
	word-wrap:break-word;
}
.round-comments .comment-approval .comment-bubble {
	color:#fff;
	background:#61c391;
}
.round-comments .comment-approval  p:first-child:before {
	font-family:fa-solid;
	content:'\f00c';
	margin-right:0.3em;
	font-size:1.3em;
	line-height:1;
	color:#61c391;
}
.round-comments .comment-bubble p {
	margin-bottom:0.6em;
	line-height:1.3;
}
.round-comments .comment-bubble p:last-child {
	margin-bottom:0;
}
.designer-view .comments .metadata .like,
.designer-view .comments .metadata .reply,
.designer-view .comments .comment-context-menu {
	display:none;
}


@media only screen and (max-width:1500px) {
	html {
		font-size:14px;
	}
	#menu {
		width:13.8em;
	}
	#content-wrapper {
		margin-left:18em;
	}
}


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


@media only screen and (max-width:1430px) {
	.product-icons {
		font-size:0.95vw;
	}
}