/*
—————————————————
Global
—————————————————
*/
html {
	color:#000;
	font:15px/1.4 'Libre Franklin', sans-serif;
}
@media only screen and (max-width:1500px) {
	html {
		font-size:14px;
	}
}
@media only screen and (max-width:1300px) {
	html {
		font-size:13px;
	}
}
html.overlay {
	font-size:16px;
	background:#fcfcfc;
}
.overlay body {
	min-width:0;
	min-height:320px;
	padding:2.5em 2.5em 3em 2.5em;
	background:none;
}
h1 {
	font:2.2em/1.1 'Libre Franklin', sans-serif;
	text-align:center;
	margin-bottom:0.6em;
}
h1 small {
	font-size:1.3rem;
}
h2 {
	font-size:1.5em;
	font-weight:500;
	margin-bottom:0.6em;
	letter-spacing:-0.01em;
}
h3 {
	font-size:1.1em;
	font-weight:bold;
	margin-bottom:1em;
}
h3.board-heading {
	background:#eee;
	padding:0.5em;
	text-align:center;
	font-weight:normal;
	margin-bottom:2em;
}
p {
	margin-bottom:1em;
}
strong {
	font-weight:bold;
}
em {
	font-style:italic;
}
* {
	xbox-sizing:border-box;
}

/*
—————————————————
Top Section
—————————————————
*/
#topsection {
	padding:1.5em 0 0.5em 0;
	position:relative;
}
#topsection.tinted {
	background:linear-gradient(to bottom, #fff 115px, #eee calc(100% - 2em), #e9e9e9);
}
#topsection.no-logo #logo-wrapper {
	display:none;
}
#topsection #logo-ols-mark {
	position:absolute;
	top:2em; left:2em;	
}
#logo-ols-mark img {
	width:4.667em;
	height:4.667em;
}
#board-description {
	margin:0.5em auto;
	max-width:800px;
	min-height:100px;
	display:flex;
	align-items:center;
	justify-content:center;
}
#board-description #logo-wrapper {
	display:inline-block;
	max-height:100px;
	margin-right:1.8em;
}
#board-description img {
	display:block;
	margin:auto;
	max-width:180px;
	max-height:100px;
}
#board-description h1 {
	display:inline-block;
	max-width:20em;
	font-size:2em;
	margin:0;
}
#board-description h1.has-logo {
	text-align:left;	
}
#board-description #description {
	text-align:center;
}
#board-description #description a {
	color:#ff317c;
	text-decoration:none;
}

/*
—————————————————
Thumbs
—————————————————
*/
#thumbs {
	background:#fff;
	padding:4em;
	position:relative;
	z-index:1;
}
#thumbs.stacked {
	background:linear-gradient(to bottom, #fff 0%, #f5f5f5 20%, #f5f5f5 100%);
}
#thumbs-wrapper {
	max-width:1200px;
	margin:auto;
}
#thumbs.stacked #thumbs-wrapper {
	max-width:calc(100% - 8em);
}


/*
—————————————————
Steps
—————————————————
*/
.steps {
	margin-top:-3rem;
	min-height:3rem;
	width:100%;
	text-align:center;
	font-size:0;
}
.steps li {
	font-size:0.9375rem;
	display:inline-block;
	margin:0 0.2em;
	vertical-align:top;
	position:relative;
}
.steps li:before {
	content:'';
	position:absolute;
	top:0.9em; right:50%;
	width:9em;
	height:0.4em;
	background:#ccc;	
	z-index:1;
}
.steps li.active:before {
	background:#095d9d;	
}
.steps a {
	display:block;
	padding:2.8em 0.7em 3em 0.7em;
	position:relative;
	width:9em;
	text-decoration:none;
	box-sizing:border-box;
	line-height:1.2;
	color:inherit;
	user-select:none;
}
.steps a:before {
	content:'';
	width:2.2em;
	height:2.2em;
	border-radius:50%;
	position:absolute;
	top:0; left:calc(50% - 1.1em); 
	background:#ccc;	
	z-index:4;
	transition:background 200ms;
}
.steps li.active a:before {
	background:#095d9d;
}
.steps li.current a:before,
.steps li:hover a:before {
	background:#ff317c !important;
}

.steps li.complete a:after {
	content:'\f00c';
	font-family:fa-solid;
	font-weight:normal;
	color:#fff;
	position:absolute;
	width:2.2em;
	line-height:2.2em;
	text-align:center;
	top:0; left:calc(50% - 1.1em); 
	z-index:5;
}
.steps li:first-child:before {
	display:none;
}
.steps li:after {
	content:'';
	position:absolute;
	top:0.9em; left:calc(50% - 9em);
	width:18em;
	height:0.4em;
	background:linear-gradient(to right, rgba(0,0,0,0), #ff317c, rgba(0,0,0,0));
	z-index:3;
	transition:opacity 200ms;
	opacity:0;
}
.steps li:first-child:after {
	width:9em;
	left:50%;
	background:linear-gradient(to right, #ff317c, rgba(0,0,0,0));
}
.steps li:last-child:after {
	width:9em;
	background:linear-gradient(to right, rgba(0,0,0,0), #ff317c);
}
.steps li.current:after,
.steps li:hover:after {
	opacity:1;
}



/*
—————————————————
Rounds (OLD)
—————————————————
*/
.rounds {
	position:absolute;
	top:-2.4em;
	height:2.4em;
	left:0;
	width:100%;
	text-align:center;
}
.rounds li {
	display:inline-block;
	margin:0 0.2em;
}
.rounds a {
	display:block;
	height:2.4em;
	line-height:calc(2.4em - 3px);
	padding:0 1.5em;
	border-radius:5px 5px 0 0;
	color:#777;
	background:linear-gradient(to bottom, #f9f9f9 85%, #ededed);
	text-decoration:none;
	border-top:3px solid #ff317c40;
	box-sizing:border-box;
	transition:all 100ms;
}
.rounds a:hover {
	color:#777;
	background:linear-gradient(to bottom, #fcfcfc 85%, #ededed);
	border-color:#ff317c50;
}
.rounds a:active {
	color:#666;
	background:linear-gradient(to bottom, #fff 85%, #ededed);
}
.rounds a.admin {
	border-top-color:#006aa72e;
}
.rounds a.admin:hover {
	border-color:#006aa739;
}
.rounds li.active a {
	color:#444;
	background:#fff;
	border-color:#ff307b;
}
.rounds li.active a.admin {
	border-color:#006aa7;
}
.rounds li.in-design a {
	xcolor:#fff;
	xbackground:#61c391;
}
.rounds a .count {
	display:inline-block;
	color:#fff;
	background:#ff317c;
	min-width:1.8em;
	height:1.8em;
	line-height:1.8em;
	border-radius:50%;
	font-size:0.7em;
	font-weight:500;
	text-align:center;
	margin-left:0.5em;
	position:relative;
	top:-0.1em;
}



.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:2px solid #ddd;
	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;
}
.pins ul {
	width:calc(100% + 2em);
	margin-right:-2em;
}
.pins li {
	float:left;
	width:calc(25% - 2em);
	margin:0 2em 2.5em 0;
}
.pins li:nth-child(4n+1) {
	clear:left;
}
.pins a {
	display:block;
	position:relative;
	text-decoration:none;
}
.pins a:after {
	content:'';
	position:absolute;
	top:0; left:0;
	width:100%;
	height:calc(100% - 2em);
	border-radius:16px;
	background:rgba(0,0,0,0.03);
}
.pins a:hover:after {
	background:rgba(0,0,0,0.09);
}
.pins img,
.pins video {
	display:block;
	width:100%;
	box-sizing:border-box;
	border-radius:16px;
	outline:0;
}
.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 .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;
}


input.complete-review {
	display:block;
	width:100%;
	line-height:2em;
	color:#fff;
	background:#ff317c;
	font-weight:500;
	border-radius:1em;
	border:0;
	cursor:pointer;
	outline:none;
	padding:0 2em;
	margin-top:1em;
}
input.complete-review:hover {
	background:#b34489;
}
input.complete-review:active {
	background:#9c4687;
}

/*
—————————————————
Artwork
—————————————————
*/
#artwork-panel {
	position:fixed;
	top:0; left:0;
	width:68%;
	height:100%;
	box-sizing:border-box;
	padding:6em 12em 8em 12em;
	border-right:1px solid #ddd;
	background:#fbfbfb;
}
.latest, .not-latest {
	width:100%;
	position:absolute;
	top:0; left:calc(50% - 10em); left:0;
	text-align:center;
	color:#095d9d;
	background:#e1effa;
	font-weight:500;
	padding:0.5em;
	box-sizing:border-box;
}
.latest a {
	color:inherit;
	font-weight:bold;
}
.not-latest {
	color:#ff317c;
	background:#f9e5ef;
}
#artwork-nav .counter {
	position:absolute;
	bottom:2em; left:calc(50% - 5rem);
	width:10rem;
	font-size:1.6em;
	line-height:2rem;
	text-align:center;
	display:none;
}
#artwork-nav a {
	position:absolute;
	top:calc(50% - 2em);
	width:4em;
	height:4em;
	color:#d0d0d0;
	text-decoration:none;
}
#artwork-nav a:hover {
	color:#bbb;
}
#artwork-nav a:active {
	color:#aaa;
}
#artwork-nav a span {
	display:none;
}
#artwork-nav a:before {
	display:block;
	width:100%;
	text-align:center;
	font-size:3em;
	font-family:fa-solid;
	line-height:4rem;
	transition:color 150ms;
}
#artwork-nav a.arrow-prev {
	left:5em;
}
#artwork-nav a.arrow-prev:before {
	content:'\f0a8';
}
#artwork-nav a.arrow-next {
	right:5em;
}
#artwork-nav a.arrow-next:before {
	content:'\f0a9';
}
#dots {
	position:absolute;
	bottom:2em; left:0;
	width:100%;
	height:2em;
	text-align:center;
}
#dots li {
	display:inline-block;
	width:2em;
	margin:0 0.4em;
}
#dots a {
	display:block;
	width:2em;
	height:2em;
	color:#fff;
	background:#ccc;
	border-radius:50%;
	text-align:center;
}
#dots a:hover {
	color:#fff;
	background:#c5c5c5;
}
#dots a:active {
	background:#bbb;
}
#dots li.active a {
	background:#ff317c;
}
#dots li.commented a:after {
	content:'\f075';
	font-family:fa-solid;
	line-height:2em;
}
#dots li.approved a:after {
	content:'\f00c';
	font-family:fa-solid;
	line-height:2em;
}
#artwork-panel .status-wrapper {
	position:absolute;
	top:1em; left:0;
	width:100%;
	z-index:2;
}
#artwork-panel .status-wrapper-reveal {
	top:0;
	opacity:0;
	transition:all 400ms;
	transition-delay:1.5s;
}
#artwork-panel .status-wrapper-revealed {
	top:1em;
	opacity:1;
}
#artwork-panel .status {
	margin:0 0 1.5em 0;
}
#artwork-panel .status p {
	background:#fff;
}
#artwork-panel .status p.black {
	color:#fff;
	background:#333339;
	border-color:#333339;
}
#artwork-panel .status p.tick:before {
	color:#61c391;
	content:'\f00c';
}
#artwork-panel .status-unchanged p {
	padding:0.3em 1.4em 0.3em 1em;
	border:0;
	color:inherit;
	background:#eee;
}
#artwork-panel .status-unchanged p:before {
	display:none;
}
#artwork-wrapper {
	width:100%;
	height:100%;
	max-width:100%;
	max-height:100%;
	display:flex;
	align-items:center;
}
#artwork-panel .status + #artwork-wrapper {
	max-height:calc(100% - 4.1em);
}
#artwork-wrapper img.single {
	cursor:pointer;
}
#artwork-wrapper img.single,
#artwork-wrapper video {
	display:block;
	max-width:100%;
	max-height:100%;
	margin:auto;
	box-shadow:0 0 12px rgba(0,0,0,0.08);
	border-radius:16px;
	outline:0;
}
.square-edges #artwork-wrapper img.single,
.square-edges #artwork-wrapper video,
.stacked #artwork-panel img.single,
.stacked #artwork-panel video {
	border-radius:0;
}

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


/*
=================
Sidebar
=================
*/
#info-panel {
	float:right;
	width:32%;
	box-sizing:border-box;
	position:relative;
}
#info-panel #close {
	position:absolute;
	top:0; right:0;
	width:2.4em;
	height:2.4em;
	padding:1em;
}
#info-panel #close svg {
	width:100%;
	height:100%;
	fill:#aaa;
}
#info-panel #close svg:hover {
	fill:#999;
}
#info-panel #close svg:active {
	fill:#888;
}
#pin-details {
	padding:2em 2.5em 2em 2.5em;
}
.scrollable {
	padding:1em 2.5em;
	overflow-y:scroll;
	box-sizing:border-box;
}
#info-panel h2 {
	padding-right:3em;
	line-height:1.2;
}
#info-panel .buttons {
	margin-top:1.5em;
	text-align:center;
}
#info-panel .buttons:after {
	content:'OR';
	display:block;
	font-weight:500;
	color:#aaa;
	margin-top:0.5em;
}
#info-panel .buttons span {
	xwidth:8.2em;
	xmargin-right:0.4em;
}
#info-panel .buttons span:before {
	font-family:fa-solid;
	margin-right:0.4em;
}
#info-panel .buttons .happy:before {
	content:'\f164';
}
#info-panel .buttons .leave-comment:before {
	content:'\f075';
}
#info-panel #description p:last-child {
	margin-bottom:0;
}
.deliverable-rounds {
	position:fixed;
	top:6em; right:calc(32% + 2em);
	font-size:0.8667em;
	transform:rotate(-90deg);
	transform-origin:100% 0;
	white-space:nowrap;
}
.deliverable-rounds li {
	display:inline-block;
	margin-right:0.5em;
}
.deliverable-rounds a {
	display:block;
	line-height:2em;
	padding:0 1em;
	border-radius:5px 5px 0 0;
	color:#888;
	background:#ddd;
	text-decoration:none;
	text-align:center;
	border-bottom:0;
	font-weight:500;
}
.deliverable-rounds a:hover {
	background:#d9d9d9;
}
.deliverable-rounds a:active {
	background:#d2d2d2;
}
.deliverable-rounds li.active a {
	color:#fff;
	background:#095d9d;
}
.comments li {
	padding-left:4em;
	min-height:3em;
	position:relative;
	font-size:0.933em;
}
.comments li.own {
	padding:0 4em 0 0;
}
.comments .avatar,
.comments img {
	position:absolute;
	top:0; left:0;
	width:3em;
	height:3em;
	border-radius:50%;
	cursor:pointer;
}
.comments li.own .avatar,
.comments li.own img {
	left:auto; right:0;
}
#info-panel .avatar {
	line-height:3em;
	color:#fff;
	background:#695390;
	text-align:center;
	user-select:none;
}
.comments p {
	background:#f2f2f3;
	border-radius:0.8em;
	padding:0.75em 0.8em;
	position:relative;
	margin:0;
}
.comments p:after {
	content:'';
	position:absolute;
	top:0.9em; left:-0.5em;
	width:0; height:0; 
	border-top:0.6em solid transparent;
	border-bottom:0.6em solid transparent;
	border-right:0.6em solid #f2f2f3;
}
.comments li.own p:after {
	left:auto; right:-0.5em;
	border-right:0;
	border-left:0.6em solid #f2f2f3;
}
.comments li.approval p {
	color:#fff;
	background:#61c391;
	padding-left:2.7em;
}
.comments li.approval p:after {
	border-left-color:#61c391;
	border-right-color:#61c391;
}
.comments li.approval p:before {
	position:absolute;
	top:calc(50% - 0.55em); left:0.6em;
	font-family:fa-solid;
	content:'\f164';
	margin-right:0.5em;
	font-size:1.3em;
	line-height:1;
}
.comments .metadata {
	padding:2px 0.9em 0 0.9em;
	color:#aaa;
	height:1.7em;
}
.comments .userdata {
	float:left;
	font-size:0.875em;
	display:none;
}
.show-metadata .userdata {
	display:block;
}
.comments .userdata:before {
	content:'\2014\00a0';
}
.comments .remove {
	cursor:pointer;
	float:right;
	font-size:0.8125em;
	margin-bottom:-0.5em;
}
.add-comment {
	margin-top:0.6em;
}
.add-comment textarea {
	display:block;
	width:100%;
	border:1px solid #ddd;
	background:#fbfbfb;
	border-radius:5px;
	padding:0.5em;
	box-sizing:border-box;
	font-size:0.933em;
	margin-bottom:0.4em;
	outline:0;
}
.add-comment textarea:focus {
	border-color:#ccc;
	background:#fff;
}
.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 {
	float:right;
	font-size:0.875em;
}
.add-comment .button-upload {
	float:left;
}
.comments-locked {
	margin:1em auto 0 auto;
	width:15em;
	background:#eee;
	border-radius:16px;
	padding:1em;
	color:#777;
	font-weight:500;
	font-size:0.933em;
	padding-left:3.7em;
	position:relative;
}
.comments-locked:before {
	font-family:fa-solid;
	content:'\f023';
	color:#ccc;
	font-size:1.8em;
	position:absolute;
	top:1rem; left:1rem;
}
#info-panel .collaborators {
	position:fixed;
	bottom:0; right:0;
	padding:1.2em 2.5em 1.2em calc(2.5em + 0.6em);
	border-top:1px solid #ddd;
	width:32%;
	box-sizing:border-box;
	background:#fff;
}
#info-panel .collaborators span.initials {
	border-color:#fff;
}
#auth {
	padding:1.75em;
	margin:2em 0;
	background:#f0f0f0;
	border-radius:8px;
}
#auth h3 {
	position:relative;
	margin-bottom:0.2em;
}
#auth h3.sent:before {
	content:'\f023';
	color:#ff317c;
	font-family:fa-solid;
	font-size:1.75rem;
	position:absolute;
	top:0; left:0;
	line-height:1;
}
#auth h3 span {
	font-weight:normal;
	font-size:1rem;
}
#auth h3.sent {
	padding-left:2.6rem;
}
#auth h3.sent:before {
	content:'\f1d8';
}
#auth p:last-child {
	margin:0;
}


@media only screen and (max-width:1400px) {
	#artwork-panel {
		width:60%;
	}
	#info-panel {
		width:40%;
	}
	#info-panel .collaborators {
		width:40%;
	}
	.deliverables .fancybox-infobar {
		left:calc(30% - 5em) !important;
	}
	.deliverable-rounds {
		right:calc(40% + 2em);
    }
}


/*
—————————————————
Buttons
—————————————————
*/
.button {
	display:inline-block;
	color:#fff;
	background:#ff317c;
	font-weight:500;
	padding:0 1em;
	text-align:center;
	text-decoration:none;
	border:0;
	cursor:pointer;
	outline:none;
	line-height:2em;
	border-radius:1em;
	user-select:none;
}
.button:hover {
	background:#f32d75;
}
.button:active {
	background:#ea286f;
}
.button-blue, .button-upload {
	background:#006aa7;
}
.button-upload:after {
	content:'...';
}
.button-blue:hover, .button-upload:hover {
	background:#095d9d;
}
.button-blue:active, .button-upload:active {
	background:#07528c;
}
.button-gray {
	color:#666;
	background:#e1e1e1;
}
.button-gray:hover {
	background:#d9d9d9;
}
.button-gray:active {
	background:#d4d4d4;
}
.button-upload:before {
	content:'\f0c6';
	font-family:fa-solid;
	font-weight:normal;
	margin-right:0.4em;
}
.button-download:before {
	content:'\f019';
	font-family:fa-solid;
	margin-right:0.4em;
}
.modal-center * {
	text-align:center;
}
.modal a {
	color:#ff317c;
}
.modal-buttons {
	text-align:center;
	margin:2em 0 -1em 0;
}
.modal-buttons .button {
	width:7em;
	margin:0 0.3em;
}
.modal ul {
	padding-left:1.3em;
	margin:0 0 1.2em 1.3em;
}
.modal ul:last-child {
	margin-bottom:0;
}
.modal ul li {
	list-style-type:none;
	margin-bottom:0.4em;
}
.modal ul li:before {
	display:inline-block;
	font-family:Arial,sans-serif;
	content:'\25cf';
	color:#ff317c;
	font-size:0.9em;
	width:1.3em;
	margin-left:-1.3em;
	position:relative;
	top:-0.1em;
}

/*
—————————————————
Sharing
—————————————————
*/
#sharing {
	position:absolute;
	top:7em; right:3em;
	z-index:2;
}
#sharing .button {
	margin-left:0.4em;
}
#sharing #button-share:before,
#sharing #button-collaborators:before {
	content:'\f064';
	font-family:fa-solid;
	margin-right:0.4em;
}
#sharing #button-collaborators:before {
	content:'\f500';
}
#collaborators {
	position:fixed;
	top:6em; right:2.4em;
	background:#fff;
	min-width:19em;
	border-radius:10px;
	padding:1.7em 5em 1.7em 2.4em;
	box-sizing:border-box;
	box-shadow:0 0 1em rgba(0,0,0,0.1);
	z-index:2;
	display:none;
}
#collaborators p {
	margin:0;
}
#collaborators span.label {
	float:left;
	margin-left:0.3em;
	line-height:calc(2.07rem + 6px);
	font-size:0.8125em;
}
.badges:nth-child(2) {
	margin-top:1.2em;
}
.badges .label {
	display:block;
}
.collaborators {
	float:left;
}
.collaborators li {
	float:left;
	font-size:0.9em;
	margin-right:0.2em;
}
.collaborators span.initials {
	display:block;
	width:2.3em;
	height:2.3em;
	line-height:2.3em;
	text-align:center;
	color:#fff;
	background:#095d9d;
	border-radius:50%;
	cursor:default;
	border:3px solid #fff;
	margin-left:-0.8em;
}
.collaborators span.approver {
	background:#ff307b;
}
.collaborators span.unviewed {
	background:#ccc;
}
#invite-form {
	position:fixed;
	top:6em; right:2.4em;
	width:30em;
	background:#fff;
	border-radius:10px;
	padding:2em;
	box-sizing:border-box;
	box-shadow:0 0 1em rgba(0,0,0,0.1);
	z-index:2;
	display:none;
}
#invite-form h3 {
	text-transform:uppercase;
}
#invite-form p:last-child {
	margin:0;
}
#invite-form label, #invite-form span.error {
	font-size:0.8em;
	font-weight:500;
}
#invite-form input.text,
#invite-form select {
	display:block;
	border:1px solid #d2d2d2;
	border-radius:6px;
	padding:0.4em 0.6em;
	width:100%;
	box-sizing:border-box;
	outline:none;
	font-size:0.9em;
	box-shadow:0 0 5px #f5f5f5;
}
#invite-form input.error {
	border-color:#ff307b
}
.small-fields p {
	float:left;
	width:48%;
}
.small-fields p:last-child {
	float:right;
}
#invite-form input.button {
	display:inline-block;
	color:#fff;
	border:0;
	border-radius:1em;
	height:2em;
	padding:0 2em;
	width:8em;
	text-align:center;
	cursor:pointer;
	outline:none;
}
.close-share {
	position:absolute;
	top:0; right:0;
	padding:0.8em;
	cursor:pointer;
	opacity:0.2;
}
.close-share svg {
	width:2.2em;
	height:2.2em;
}
.close-share:hover {
	opacity:0.4;
}

/*
—————————————————
Form
—————————————————
*/
.form {
	margin-top:3em;
	padding-bottom:1em;
}
.form label, span.error {
	font-size:0.8em;
	font-weight:500;
}
.form input.text, .form select {
	display:block;
	border:1px solid #d2d2d2;
	border-radius:6px;
	padding:0.4em 0.6em;
	width:100%;
	box-sizing:border-box;
	outline:none;
	font-size:0.9em;
	box-shadow:0 0 5px #f5f5f5;
}
.form select {
	width:auto;
}
.form input.text:focus,
.form select:focus {
	box-shadow:0 2px 2px #f5f5f5;
}
.form  p {
	position:relative;
}
.form span.error {
	display:none;
	color:#ff317c;
	position:absolute;
	top:4px; right:0;
}
.form p.error span.error {
	display:block;
}
.form p.error input.text {
	border-color:#ff317c;
}
.form .error-message {
	margin-bottom:2em;
	padding:0.5em 1em;
	color:#fff;
	background:#ff317c;
	box-sizing:border-box;
	font-weight:500;
	position:relative;
	border-radius:6px;
}
.form .button {
	border:0;
	min-width:6.5em;
}
.form .checkbox label {
	padding-left:0.5em;
}
.form label a {
	color:inherit;
}
.floated-fields {
	width:103%;
	margin-right:-3%;
}
.floated-fields p {
	float:left;
	width:47%;
	margin-right:3%;
}
.link-right {
	float:right;
	margin-top:1.8em;
	font-size:0.9em;
	color:#b34489;
}
#modal {
	display:none;
	position:fixed;
	top:calc(50% - 10em); left:calc(50% - 20em);
	width:40em;
	height:20em;
	border:0;
	z-index:5;
	background:#fff;
	padding:2em;
	box-sizing:border-box;
}
#modal-steps li {
	display:none;
}
#modal-steps li.active {
	display:block;
}
#modal .text {
	float:left;
	width:calc(100% - 18em);
}
#modal p a {
	color:#ff317c;
}
#modal .text-center {
	float:none;
	width:auto;
	text-align:center;
}
#modal .text-center p {
	margin-bottom:2em;
}
#modal img {
	float:right;
	width:16em;
	height:10em;
	background:#eee;
}
#modal .dots {
	position:absolute;
	bottom:2em; left:25%;
	z-index:1;
	width:50%;
	text-align:center;
	pointer-events:none;
	line-height:1;
}
#modal .dots li {
	display:inline-block;
	background:#ccc;
	width:1.5em;
	height:1.5em;
	border-radius:50%;
	margin:0 0.3em;
	cursor:pointer;
	pointer-events:auto;
}
#modal .dots li.active {
	background:#006aa7;
}
#dimmer {
	display:none;
	position:fixed;
	top:0; left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.6);
	z-index:4;
}


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


/*
—————————————————
Dashboard
—————————————————
*/
#logo-ols {
	display:block;
	margin:auto;
	width:300px;
	height:58px;
	margin-bottom:3em;
}
.tabs {
	text-align:center;
	border-bottom:1px solid #ddd;
	margin-bottom:3em;
}
.tabs li {
	display:inline-block;
	margin:0 0.3em -1px 0;
}
.tabs a {
	display:block;
	line-height:2em;
	width:10em;
	border-radius:5px 5px 0 0;
	color:#888;
	background:#ddd;
	text-decoration:none;
	border:1px solid #ddd;
	border-bottom:0;
}
.tabs a:hover {
	background:#d9d9d9;
}
.tabs a:active {
	background:#d2d2d2;
}
.tabs li.active a {
	color:#666;
	background:#fff;
}
#dashboard {
	margin:auto;
	max-width:1200px;
	padding:3em;
}
#boards {
	width:calc(100% + 2em);
	margin-right:-2em;
}
#boards li {
	float:left;
	width:calc(25% - 2em);
	margin:0 2em 2em 0;
	position:relative;
}
#boards a {
	display:block;
	text-decoration:none;
	color:inherit;
	text-align:center;
}
#boards span.cover {
	display:block;
	padding:50%;
	background-repeat:no-repeat;
	background-position:top center;
	background-size:cover;
	margin-bottom:0.6em;
	position:relative;
	border-radius:8px;
}
#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;
}
#boards span.viewed {
	display:block;
	color:#aaa;
	font-size:0.875em;
}


/*
—————————————————
Form Elements
—————————————————
*/
#form {
	max-width:500px;
	margin:0 auto 1em auto;
	padding:2em;
	position:relative;
	background:#f2f2f2;
	border-radius:8px;
	box-sizing:border-box;
}
#form.large-form {
	max-width:1080px;
	margin-top:1.8em;
}
#form.large-form:first-child {
	margin-top:0.7em;
}
#briefEditable {
	max-width:760px;
	margin:auto;
	padding:0 1em;
}
#briefEditable p {
	margin-bottom:2.5em;
}

#form * {
	box-sizing:border-box;
}
#form .form-section {
	margin-bottom:4.5em;
}
#form .form-section:last-child {
	margin-bottom:0;
}
#form .form-section h2 {
	display:inline-block;
	margin-bottom:1.8em;
	border-bottom:0.4em solid #ff317c;
	padding-bottom:0.2em;
}
#form h3 {
	padding-top:0.7em;
}
#form dd h3:first-child {
	padding-top:0;
}
#form p {
	margin-bottom:1.3em;
}
#form label {
	display:inline-block;
	padding:0.15em 0.6em calc(0.15em - 1px) 0.6em;
	color:#444;
	background:#ddd;
	border-radius:5px 5px 0 0;
	font-size:0.8666em;
	font-weight:500;
	transition:background-color 150ms linear;
	vertical-align:bottom;
	z-index:1;
}
#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 .checkboxes label {
	float:none;
	background:none;
	padding:0 0 0 0.5em;
	position:relative;
	top:-0.1em;
	font-size:0.875rem;
}

#form input.text,
#form textarea,
#form select,
#form .selector {
	display:block;
	width:100%;
	border:0;
	border-radius:0 5px 5px 5px;
	border-bottom:1px solid #ddd;
	padding:0.6em;
	outline:none;
}

#form.large-form input.text,
#form.large-form textarea,
#form.large-form select,
#form.large-form .selector {
	border-radius:5px;
}

#form input.text:focus,
#form textarea:focus,
#form select:focus {
	border-bottom-color:#ccc;
	box-shadow:0 2px 2px #f5f5f5;
}
#form .selector label {
	background:none !important;
	padding:0;
	font-size:0.875em;
	font-weight:normal;
}
#form .selector input {
	margin-right:0.3em;
}
#form p.error label {
	background:#ff317c;
	color:#fff;
}
#form p.error input.text:focus,
#form p.error textarea:focus,
#form p.error select:focus {
	border-color:#ff317c;
}
.floated-fields {
	width:102%;
	margin-right:-2%;
}
.floated-fields p {
	float:left;
	margin-right:2%;
}
.floated-fields input.text,
.floated-fields textarea,
.floated-fields select {
	width:100%;
}
#form p.form-buttons {
	padding-top:1em;
	margin:0;
}
.form-buttons .button {
	min-width:7em;
	margin-right:0.6em;
}
#form .textarea-wrapper {
	display:block;
	position:relative;
	min-height:4em;
}
#form .textarea-wrapper textarea {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	padding:0.7em 0.8em;
	line-height:1.3;
}
#form .textarea-wrapper:after {
	content:attr(data-content) ' ';
	visibility:hidden;
	white-space:pre-wrap;
	display:block;
	padding:0.7em 0.8em;
	border:1px solid #fff;
	line-height:1.3;
}
#form .date-selectors {
	display:block;
	margin-top:0.5em;
}
#form .date-selectors span {
	display:inline-block;
	width:7em;
	margin-bottom:1em;
}
#form .date-selectors input.text {
	display:inline-block;
	width:auto;
}



#form.large-form label {
	background:none;
	padding:0;
	margin-bottom:0.5em;
	font-size:1em;
}
#form.large-form .checkboxes label {
	margin-bottom:0;
	margin-left:0.5em;
}
#form.large-form .checkboxes span {
	display:block;
	margin-top:1em;
}


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

.link-right {
	float:right;
	color:#ff317c;
}
#hubspot-messages-iframe-container {
	display:none!important;
}
dt {
	float:left;
	clear:both;
	width:12rem;
	padding-right:2rem;
	font-weight:bold;
}
dd {
	float:left;
	width:calc(100% - 12rem);
	padding:0 0 1.8em 1em;
	border-left:1px solid #ccc;
}
#brief-header {
	display:table;
	width:calc(100% + 4.5em);
	border-spacing:1.5em;
    border-collapse:separate;
    margin:0 -1.5em 1.5em -1.5em;
}
.board-summary {
	display:table-cell;
	width:50%;
	margin:0;
	padding:1.5em;
	background:#fff;
	border-radius:5px;
	border-bottom:3px solid #ddd;
	overflow:hidden;
}
#brief-header .fullwidth {
	width:100%;
}
.topline-brief {
	display:table-cell;
	width:50%;
	padding:1.5em;
	background:#fff;
	border-radius:5px;
	border-bottom:3px solid #ddd;
	overflow:hidden;
}
#brief-header dt {
	font-weight:bold;
	font-style:normal;
	width:10.5rem;
	font-size:1rem;
	padding-right:1.5em;
}
#brief-header dd {
	padding-bottom:0;
	width:calc(100% - 10.5rem);
	padding-bottom:0.3em;
}
#brief-header h3 {
	padding:0.4rem 1.5rem;
	margin:-1.5rem -1.5rem 1em -1.5rem;
	font-size:1.2em;
	font-weight:500;
	color:#fff;
	background:#095d9d;
}
#brief-header p {
	margin-bottom:0.7em;
}
#brief-header p:last-child {
	margin:0;
}
.brief-specs {
	margin-bottom:4em;
}
.brief-specs dd,
.brief-specs dd:last-child {
	padding-bottom:0;
}
.sow-details {
}
.overview dd {
	min-height:4.5em;
}
.overview dd:last-child {
	min-height:0;
}
dd:last-child {
	padding-bottom:2.4em;
}
.timeline {
	border-top:1px solid #ccc;
	margin-bottom:1em;
	max-width:40em;
}
.timeline li {
	padding:0.4em 0;
	border-bottom:1px solid #ccc;
}
.timeline span {
	display:inline-block;
}
.timeline .who {
	width:20%;
	font-weight:bold;
}
.timeline .what {
	width:60%;
}
.timeline .days {
	width:20%;
	font-weight:bold;
	text-align:right;
}
.timeline li:nth-child(odd) .who,
.timeline li:nth-child(odd) .days {
	color:#ff317c;
}
.terms-box {
	font-size:0.9em;
	padding:1.5em;
	background:rgba(255,255,255,0.8);
	border-radius:5px;
	border:1px solid #ddd;
	counter-reset:termscounter;
}
.terms-box a, dd a {
	color:#f32d75;
}
.terms-box ol {
	padding-left:1.8em;
	margin:0 0 1.2em 0;
}
.terms-box ol li {
	padding-left:0.5em;
	margin-bottom:0.4em;
	list-style:none;
}
.terms-box ol li:before {
	content:counter(termscounter) '. ';
	counter-increment:termscounter;
	display:inline-block;
	width:1.8em;
	margin-left:-1.8em;
}
.terms-box ol li ol {
	counter-increment:none;
	margin:0.4em 0 1.2em 1.3em;
}
.terms-box ol li ol li {
	list-style:lower-alpha outside;
}
.terms-box ol li ol li:before {
	counter-increment:none;
	content:'';
}
.terms-box ul, ul.bullet {
	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;
}
.sow-intro {
	display:block;
	margin:0 auto 1.2em auto;
	max-width:32em
}
.sow-intro a {
	color:#f32d75;
}
.approve-buttons {
	text-align:center;
}
.approve-buttons .button {
	font-size:1.12em;
	width:12em;
	margin:0 0.3em;
	border:2px solid transparent;
	border-radius:2em;
}
.approve-buttons .white-button {
	background:#fff;
	color:#f32d75;
	border-color:#f32d75;
	font-weight:500;
}
.approved-text {
	text-align:center;
}
.approved-text:before {
	font-family:fa-solid;
	content:'\f00c';
	color:#61c391;
	display:inline-block;
	margin-right:0.3em;
}
.request-change textarea {
	width:100%;
	height:8em;
	border:1px solid #ddd;
	border-radius:5px;
	border-bottom-color:#ccc;
	box-shadow:0 0 5px #f5f5f5;
	font-size:1em;
	outline:none;
	background:#fff !important;
	padding:0.4em 0.6em;
	margin-top:2em;
	box-sizing:border-box;
}
.brief-approved #form.large-form * {
	user-select:none;
}
.brief-approved #form.large-form {
	pointer-events:none;
}



/*
—————————————————
Form Tabs
—————————————————
*/
.form-tabs {
	height:2.2em;
	max-width:1080px;
	margin:auto;
	margin-bottom:-1.8em;
}
.status + .form-tabs {
	margin-top:-2.2em;
}
.form-tabs + #form {
	border-radius:0 8px 8px 8px;
}
.form-tabs li {
	float:left;
	margin-right:0.5em;
}
.form-tabs a {
	display:block;
	line-height:2.2;
	padding:0 1em;
	background:linear-gradient(to bottom, #e2e2e2 85%, #d5d5d5);
	text-decoration:none;
	border-radius:5px 5px 0 0;
	color:inherit;
}
.form-tabs li.active a {
	background:#f2f2f2;
}



/*
—————————————————
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 .button-upload {
	margin-bottom:1em;
}
#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;
}

/*
—————————————————
Alerts
—————————————————
*/
.confirm-message, .error-message, .locked-message, .completed-message {
	padding:0.5rem 2rem 0.5rem 1rem;
	color:#fff;
	background:#61c391;
	box-sizing:border-box;
	font-weight:500;
	font-size:0.9375em;
	position:relative;
	border-radius:8px;
	margin-bottom:2em;
}
.large-form .confirm-message, .large-form .error-message {
	margin:-2rem -2rem 1.8rem -2rem;
	border-radius:8px 8px 0 0;
}
.locked-message, .completed-message {
	background:#f2f2f2;
	color:#999;
	text-align:center;
}
.locked-message:before, .completed-message:before {
	font-family:fa-solid;
	content:'\f023';
	margin-right:0.5em;
}
.completed-message:before {
	font-family:fa-solid;
	content:'\f00c';
	margin-right:0.5em;
}
.error-message {
	background:#695390;
}
.confirm-message:before {
	font-family:fa-solid;
	content:'\f00c';
	margin-right:0.5em;
}
.confirm-message .close,
.error-message .close {
	font-family:fa-solid;
	position:absolute;
	top:0; right:0;
	padding:0.5em 1em;
	cursor:pointer;
}
.confirm-message .close:before,
.error-message .close:before {
	font-family:fa-solid;
	content:'\f00d';
}
.recaptcha {
	margin-bottom:1.2em;
}
.start-over {
	text-align:center;
	background:#eee;
	padding:1em;
}
.start-over a {
	font-size:0.875em;
	color:#095d9d;
	text-decoration:underline;
}


/*
—————————————————
Options
—————————————————
*/
.option-cost-zero {
	display:none;
}
.options {
	margin-bottom:1em;
}
.options li {
	font-size:0.9375rem;
	display:inline-block;
	white-space:nowrap;
	margin:0 0.4em 0.5em 0;
	background:#fff;
	height:2.6em;
	line-height:1.4em;
	border-radius:1.3em;
	box-shadow:0 1px 2px #d5d5d5;
	padding:0.6em 1em;
	vertical-align:top;
}
.options li:before {
	content:'\f00c';
	font-family:fa-solid;
	color:#ff317c;
	display:inline-block;
	text-align:center;
	box-sizing:border-box;
	margin-right:0.5em;
}
.editable-options li {
	cursor:pointer;
	user-select:none;
	padding-left:0.6em;
}
.editable-options li:before {
	font-size:0.8em;
	width:1.75em;
	height:1.75em;
	line-height:1.75em;
	border:1px solid #ccc;
	border-radius:50%;
	cursor:pointer;
	margin-right:0.7em;
	user-select:none;
	color:#fff;
}
.editable-options li.selected:before {
	border-color:#ff317c;
	color:#fff;
	background:#ff317c;
}

/*
—————————————————
Creative Connect
—————————————————
*/
.connect-logos {
	text-align:center;
	margin:3em 0 2em 0;
}
.connect-logos img {
	width:70px;
	height:70px;
	margin:0 2em;
}
.connect-form {
	max-width:50em;
	margin:auto;
	padding-bottom:5em;
	padding-left:3em;
	padding-right:3em;
}
.connect-form h2 {
	font-weight:bold;
	font-size:2em;
	margin-top:1em;
}
.connect-form h2:first-child {
	margin-top:0;
}
.connect-form input.text,
.connect-form select {
	width:100%;
	background:#eee;
	border:1px solid #eee;
	border-radius:5px;
	padding:0.7em 1em;
	outline:0;
	box-sizing:border-box;
	appearance:none;
	-webkit-appearance:none;
}
.connect-form .select-wrapper {
	display:block;
	position:relative;
}
.connect-form .select-wrapper:after {
	content:'\f078';
	font-family:fa-solid;
	position:absolute;
	color:#aaa;
	top:0.7em; right:0.8em;
	pointer-events:none;
}
.connect-form .error input.text,
.connect-form .error select {
	border-color:#ff317c;
	background:#fff;
}
.connect-form p {
	margin-top:1.2em;
}
.connect-form .error-message {
	margin:2.5em 0 1.2em 0;
}
.choose-package {
	border-bottom:2px solid #ddd;
	margin-bottom:3em;
}
.choose-other {
	padding:2em;
	background:#eee;
	margin-top:-3em;
	margin-bottom:3em;
	display:none;
}
.choose-other .choose-package {
	margin-bottom:0;
}
.choose-package li {
	border-top:1px solid #ddd;
	padding:0.7em 4em 0.7em 0.4em;
	position:relative;
}
.choose-other li {
	border-top-color:#ccc;
}
.choose-package a {
	color:inherit;
	outline:0;
}
.choose-package div {
	position:absolute;
	top:0.4em; right:0.7em;
}
.choose-package input {
	display:none;
}
.choose-package label {
	font-size:0;
	line-height:0;
}
.choose-package label:after {
	font:1rem/2 fa-solid;
	content:'';
	display:inline-block;
	background:#ddd;
	width:2em;
	height:2em;
	cursor:pointer;
	text-align:center;
	border-radius:5px;
}
.choose-package span[disabled=disabled] label:after {
	cursor:default;
}
.choose-package label:hover:after {
	background:#d7d7d7;
}
.choose-package input[type="checkbox"]:checked+label:after {
	content:'\f00c';
	color:#fff;
	background:#006aa7;
}
.submit-connect {
	border-top:2px solid #ddd;
	margin-top:3em;
	padding-top:2em;
}
.submit-connect-no-products {
	border-top:0;
	padding-top:1em;
}
.submit-connect span {
	float:left;
	margin-top:0.5em;
}
.submit-connect .button {
	float:right;
	font-size:1.12em;
	width:9em;
	margin:0 0.3em;
	border:2px solid #ff317c;
	border-radius:2em;
	-webkit-appearance:none;
}
.connect-package-detail {
	width:40em;
	max-width:100%;
}
.connect-form-success {
	background:#eee;
	border-radius:10px;
	padding:2em;
	margin-top:2.5em;
}
.connect-form-success h3 {
	font-size:1.4em;
	margin-bottom:0.7em;
}
.connect-form-success p:last-child {
	margin:0;
}
#date-warning {
	display:none;
	color:#ff317c;
	background:#ff317c1c;
	padding:1em;
	border-radius:8px;
	margin-bottom:1.5em;
}
#date-warning p {
	margin:0;
}


.privacy {
	font-size:16px;
}
.privacy h2 {
	font-size:1.7em;
	font-weight:600;
	margin-top:1.8em;
	margin-bottom:1.2rem;
}
.privacy h3 {
	font-size:1.4em;
	font-weight:600;
	margin-top:1.2em;
	margin-bottom:1rem;
}
.privacy h4 {
	font-size:1.2em;
	font-weight:600;
	margin-top:1.2em;
	margin-bottom:1rem;
}
.privacy p, .privacy ul {
	margin-bottom:1em;
}
.privacy ul {
	padding-left:2.3em;
}
.privacy ul li {
	list-style:disc;
	margin-bottom:0.4em;
}
.privacy a {
	color:#e43377;
}
@media only screen and (max-width:600px) {
	body {
		min-width:320px;
	}
	.connect-form {
		padding-left:2em;
		padding-right:2em;
	}
	.floated-fields {
		width:auto;
		margin-right:0;
	}
	.connect-form p {
		float:none;
		width:auto !important;
		padding:0;
		margin:0 0 1.5em 0;
	}
	.connect-form h2 {
		font-size:1.8em;
		text-align:center;
	}
	.submit-connect span {
		float:none;
		display:block;
		margin-bottom:2.2em;
	}
	.submit-connect .button {
		float:none;
	}
	p.form-intro {
		margin-bottom:2em;
	}
}




/*
—————————————————
Billing
—————————————————
*/
.billing-summary-wrapper {
	width:18em;
	float:right;
	padding:1.2em 1.5em 1.5em 1.5em;
	background:#fff;
	border-radius:7px;
	overflow:hidden;
	line-height:2;
}
.unbilled {
	margin-bottom:4em;
}
.billing-item {
	display:block;
}
.billing-item .item-name {
	float:left;
}
.billing-item .item-cost {
	float:right;
}
.billing-item .column {
	float:left;
	box-sizing:border-box;
}
.billing-item .column-description {
	width:58%;
	padding-right:4em;
}
.billing-item .column-quantity,
.billing-item .column-price,
.billing-item .column-amount {
	width:14%;
	text-align:right;
}
.billing-total {
	border-top:1px solid #aaa;
	border-bottom:2px solid #aaa;
	padding:0.2em 0;
	margin-top:0.3em;
	font-weight:bold;
}
.billing-summary .billing-total {
	margin-bottom:0.5em;
}
.button-billing {
	display:block;
	margin:1em -1.5em -1.5em -1.5em;
	padding:0.3em;
	color:#fff;
	background:#61c391;
	text-align:center;
	text-decoration:none;
	font-weight:500;
}
.button-billing:after {
	font-family:fa-solid;
	font-weight:normal;
	font-size:0.8em;
	content:'\f054';
	margin-left:0.6em;
}
.add-ons-wrapper {
	border-top:1px solid #ccc;
	margin-bottom:1em;
	max-width:40em;
}
.add-on {
	border-bottom:1px solid #ccc;
	padding:0.4em 0;
}
.add-on-description {
	float:left;
	width:calc(100% - 10em);
}
.add-on-cost {
	float:right;
	width:10em;
	text-align:right;
}



.billing-history {
	width:100%;
}
.billing-history h3 {
	margin:2em 0 0.5em 0;
}


.total-cost {
	font-size:1.1em;
	font-weight:500;
	padding:0.4rem 1rem;
	color:#fff;
	background:#095d9d;
	border:0;
	display:block;
	border-radius:5px;
	margin:2.4rem 0 1em 0;
	text-align:right;
}
.total-cost-label {
	float:left;
}



.invoice {
	background:#fff;
	padding:1em 1em 3.5em 11.5em;
	border-radius:7px;
	margin-bottom:1em;
	position:relative;
	box-shadow:0 0 0.7em rgba(0,0,0,0.05);
}
.invoice-date {
	position:absolute;
	top:1em; left:1em;
}
.invoice-amount {
	position:absolute;
	top:1em; right:1em;
}
.invoice ul {
	font-size:0.875em;
	padding:0.2em 0;
	background:#fafafa;
	border-radius:5px;
	margin-top:0.5em;
	max-width:51em;
	line-height:2;
	border:1px solid #d2d2d2;
}
.invoice li {
	border-top:1px solid #d2d2d2;
	padding:0 0.7em;
}
.invoice li:first-child {
	border:0;
}
.invoice a.link {
	color:#ff317c;
	font-weight:500;
}
.invoice-item-description {
	float:left;
}
.invoice-item-amount {
	float:right;
	text-align:right;
}
.invoice-payment {
	display:block;
	font-size:0.875em;
	margin:0.7em 0 -2.3em 0;
}
.invoice-payment:before {
	content:'\f00c';
	color:#61c391;
	margin-right:0.3em;
	font-family:fa-solid;
}
.invoice-payment-waiting:before {
	content:'\f017';
	color:#aaa;
}
.invoice h3 {
	display:inline;
}
.invoice .button {
	font-size:0.875em;
	position:absolute;
	bottom:1em; right:1em;
}


/*
—————————————————
Quote
—————————————————
*/
.quote-tabs {
	height:3em;
	margin-right:5em;
}
.quote-tabs li {
	float:left;
	padding-right:0.5em;
	box-sizing:border-box;
}
.quote-tabs li {
	max-width:12em;
}
.quote-tabs a {
	display:flex;
	align-items:center;
	justify-content:center;
	height:3em;
	padding:0 1.2em;
	line-height:1.15;
	text-decoration:none;
	text-align:center;
	color:#888;
	background:#ddd;
	border-radius:5px 5px 0 0;
	box-sizing:border-box;
}
.quote-tabs a:hover {
	background:#d9d9d9;
}
.quote-tabs a:active {
	background:#d2d2d2;
}
.quote-tabs li.active a {
	color:#666;
	background:#fff;
}


.quote-page {
	background:#eee;
	padding:1em 2em 2em 2em;
	font-size:14px;
}
.quote {
	width:920px;
	margin:1em auto 0 auto;
}
.quote-box {
	background:#fff;
	padding:3em;
	box-shadow:0 0 1.5em #ddd;
}
.quote h2 {
	font-weight:normal;
	font-size:1.6em;
}
.quote .customer-details h2 {
	font-weight:bold;
}
.quote h2 span {
	font-weight:normal;
}
.quote dl {
	width:100%;
}
.quote dt {
	width:8em;
	padding-right:0;
}
.quote dd {
	width:calc(100% - 9em - 1px);
	padding-left:1em;
	padding-bottom:0.6em;
}
.quote dd:last-child {
	padding-bottom:0;
}
.quote .address {
	line-height:1.6;
	text-align:center;
	margin:-1em 0 3em 0;
}
.quote .address strong {
	font-size:14px;
}
.quote .address span {
	color:#ff317c;
	margin:0 0.3em;
}
.quote-header {
	display:table;
    width:calc(100% + 3em);
    border-spacing:1.5em;
    border-collapse:separate;
    margin:0 -1.5em 1.5em -1.5em;
}
.customer-details,
.quote-details {
	width:50%;
	padding:1.2em 1.5em;
	display:table-cell;
	vertical-align:top;
	border:1px solid #ccc;
	border-radius:7px;
	border-bottom-width:4px;
	position:relative;
}
.quote-footer {
	text-align:center;
	border:1px solid #ccc;
	border-bottom-width:4px;
	border-radius:7px;
	padding:0.7em 1.5em;
	margin-top:7em;
	line-height:1.6;
}
.costs {
	margin-top:2em;
}
.quote .billing-item {
	border-bottom:1px solid #ccc;
	padding-top:0.4em;
	padding-bottom:0.4em;
}
.quote .billing-headers {
	font-weight:bold;
}
.quote .billing-totals .billing-item {
	border-bottom:0;
}
.quote .billing-totals .billing-total {
	border-bottom:2px solid #999;
}
.quote .billing-totals {
	padding:3em 0 0 450px;
	xborder-top:1px solid #ccc;
	xmargin-top:1em;
}
.customer-details {
	padding-right:120px;
}
.customer-details img {
	position:absolute;
	top:1.2em; right:1.2em;
	max-width:90px;
	max-height:80px;
}


@media print {
	.quote-page {
		background:none;
		padding:0;
		font-size:15px;
	}
	.quote-tabs {
		display:none;
	}
	.quote-box {
		padding:0;
		box-shadow:none;
	}
	.approve-buttons {
		display:none;
	}
}








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



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



.estimate-approvals {
	text-align:center;
	color:#006aa7;
	background:#f0f6fa;
	padding:0.5em;
	margin:-27px -27px 50px -27px;
	border-radius:5px;
}
.estimate-acceptance {
	color:#4eb17e;
	background:#eaf7f1;
}
.estimate-approvals + .estimate-approvals {
	margin-top:-42px;
}



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

.quote-list {
	margin-top:2em;
	margin-bottom:-1.6em;
}
.quote-list a {
	float:left;
	width:15em;
	height:7.4em;
	color:inherit;
	background:#fff;
	border-radius:6px;
	margin:0 1.6rem 1.6em 0;
	text-align:center;
	padding:0.7em;
	box-shadow:0 5px 10px #eaeaea;
	position:relative;
	text-decoration:none;
	box-sizing:border-box;
}
.quote-list a:after {
	font-family:fa-light;
	content:'\f105';
	position:absolute;
	top:calc(50% - 0.5em); left:100%;
	width:1.6rem;
	font-size:2.4rem;
	line-height:1;
	color:#ddd;
	box-sizing:border-box;
}
.quote-list a:last-child:after {
	content:'';
}
.quote-list a.invoice:after {
	content:'';
}
.quote-list .heading {
	display:block;
}
.quote-list .job-number {
	display:block;
	font-size:0.875rem;
	margin-bottom:0.3em;
}
.quote-list .status-bar {
	position:absolute;
	bottom:0; left:0;
	border-radius:0 0 6px 6px;
	padding:0.15em;
	width:100%;
	font-weight:500;
	box-sizing:border-box;
	line-height:1.6rem;
}
.quote-list .accepted {
	color:#fff;
	background:#61c391;
}
.quote-list .sent,
.quote-list .latest-version {
	color:#fff;
	background:#006aa7;
}
.quote-list .unpaid {
	color:#fff;
	background:#ff317c;
}
.quote-list .status-bar:before {
	font-family:fa-solid;
	font-weight:normal;
	margin-right:0.3em;
}
.quote-list .status-bar:after {
	font-family:fa-solid;
	font-weight:normal;
	margin-left:0.3em;
}
.quote-list .accepted:before {
	content:'\f00c';
}
.quote-list .sent:before {
	content:'\f017';
}
.quote-list .unpaid:after {
	xcontent:'\f054';
}


@media only screen and (max-width:600px) {
	.tabs {
		border:0;
	}
	.tabs li {
		display:block;
		margin:0 0 0.7em 0;
	}
	.tabs a {
		width:auto;
		font-size:1.2em;
		border:0;
		border-radius:0.3em;
		background:#f0f0f0;
		padding:0.7em;
		line-height:1;
	}
	.tabs li.active a {
		color:#fff;
		background:#e63478;
	}
}