html, body {
	background: var(--base-cont-top-elevated);
}

.headerMain {
	border-bottom: 0.5px solid var(--base-line-secondary);
}

.onboarding_wrapper {
	max-width: 800px;
	margin: 0 auto;

	h2,h3,h4,h5,p { margin: 0; }
}

.onboarding__block {
	h2 {
		color: var(--base-txt-max);
		font: var(--font-ui-32-title-large-med);
	}

	h3 {
		color: var(--base-txt-accent);
		font: var(--font-ui-22-title-1-semi);
	}

	p {
		color: var(--base-txt-primary);
		font: var(--font-ui-13-small-reg);
	}

	.onb_tag {
		background: var(--base-hlt-g-hover);
		color: var(--base-txt-secondary);
		padding: 2px 8px;
		border-radius: 12px;
		font: var(--font-ui-13-small-reg);
	}

	.onb_tag2 {
		background: var(--base-hlt-g-selected);
		color: var(--base-txt-secondary);
		padding: 0 6px;
		border-radius: 12px;
		font: var(--font-ui-12-mini-med);
	}

	.import_icons a {
		border-radius: 12px;
		background: var(--base-cont-trans-low);
		width: calc((100% - 24px) / 4);
		height: 72px;
		display: flex;
		align-items: center;
		justify-content: center;

		&:hover { box-shadow: var(--shadow-brd-enable); }
	}

	.onboarding__accordion {
		padding: 4px 8px 16px;
		background: var(--base-cont-trans-low);
		border-radius: 20px;
		display: flex;
		flex-direction: column;
		position: relative;

		.onboarding__accordionItem {
			.flex_row.onboarding__accordionItemHeader {
				padding: 20px;
				gap: 12px;

				color: var(--base-txt-secondary);
				font: var(--font-ui-16-title-3-reg);

				transition: all 0.3s ease-out;

				ws-icon {
					width: 24px;
					height: 24px;
					--icon-size: 24px;
					--icon-color: var(--base-txt-tertiary);

					&:last-child {
						--icon-color: var(--colors-teal-600);
						display: none;
					}
				}
			}

			&.onboarding__accordionItem-open {
				.flex_row.onboarding__accordionItemHeader {
					color: var(--base-txt-primary);

					cursor: auto;

					ws-icon {
						--icon-color: var(--base-txt-secondary);
					}
				}
				.onboarding__accordionItemBody {
					height: auto;
					display: flex;
					flex-direction: column;
					padding: 12px 32px;
					box-shadow: var(--shadow-cont-minor-outline);
				}
			}

			&.onboarding__accordionItem-done {
				.flex_row.onboarding__accordionItemHeader {
					ws-icon:last-child {
						display: inline;
					}
				}
			}

			.onboarding__accordionItemBody {
				padding: 0 32px;
				background: var(--base-cont-top-elevated);
				box-shadow: none;
				border-radius: 16px;
				height: 0;
				box-sizing: border-box;
				overflow: hidden;
				transition: all 0.3s ease-out;

				.onboarding__accordionItemInner {
					display: flex;
					gap: 32px;
					flex-wrap: wrap;

					.onboarding__accordionItemInnerWrapper {
						flex: 1 1 0; min-width:0;

						.onboarding__accordionItemInnerTitle {
							display: flex;
							gap: 12px;
							padding: 16px 12px;

							> ws-icon {
								padding: 2px;
								use:nth-child(1) { display: none; }
								use:nth-child(2) { display: none; }
								use:nth-child(3) { display: inline; }
								--icon-color: var(--base-txt-tertiary);

								&+.flex_content {
									.flex_content:not(.in) {
										display: none;
										color: var(--base-txt-secondary);
										font: var(--font-txt-13-small-reg);
									}
									.in {
										padding: 2px 0;
										color: var(--base-txt-secondary);
										font: var(--font-ui-16-title-3-reg);
									}
								}
							}
						}
						.onboarding__accordionItemInnerContent {
							display: none;
						}
					}

					&.onboarding__accordionItemInner-done {
						.onboarding__accordionItemInnerWrapper {
							.onboarding__accordionItemInnerTitle {
								> ws-icon {
									use:nth-child(1) { display: inline; }
									use:nth-child(2) { display: none; }
									use:nth-child(3) { display: none; }
									&+.flex_content {
										.in {
											color: var(--base-txt-secondary);
										}
									}
								}
							}
						}

						.onboarding__accordionItemInnerImage + .onboarding__accordionItemInnerWrapper { display: none; }
					}

					&.onboarding__accordionItemInner-continue {
						padding: 16px 0;
						&:not(:first-of-type) { border-top: 1px solid var(--base-line-ghost); }
						&:not(:last-of-type) { border-bottom: 1px solid var(--base-line-ghost); }

						.onboarding__accordionItemInnerWrapper {
							.onboarding__accordionItemInnerTitle {
								> ws-icon {
									background: var(--base-hlt-easy);
									border-radius: 12px;
									use:nth-child(1) { display: none; }
									use:nth-child(2) { display: inline; }
									use:nth-child(3) { display: none; }
									--icon-color: var(--base-hlt-invert);

									&+.flex_content {
										.flex_content {
											display: block;
										}
										.in {
											padding: 2px 0 4px 0;
											color: var(--base-txt-primary);
										}
									}
								}
							}
							.onboarding__accordionItemInnerContent {
								display: block;
								padding: 12px 0 0 48px;
							}
							.onboarding__accordionItemInnerImage {
								display: block;
							}
						}

						.onboarding__accordionItemInnerImage {
							display: block;
							img { width: 200px; height: auto; }
						}
					}

					.onboarding__accordionItemInnerImage {
						flex:0 0 auto;
						display: none;
						&+ .onboarding__accordionItemInnerWrapper {
							flex:0 0 100%;
							.onboarding__accordionItemInnerContent { padding-top: 0; max-height: 0; overflow: hidden; }
						}
					}

					&#createtask:not(.onboarding__accordionItemInner-done) {
						.onboarding__accordionItemInnerContent {
							position: relative;

							ws-btn {
								position: absolute;
								left: 48px;
							}

							&.has_one_task2 {
								position: initial;
								display: flex;
								gap: 12px;

								ws-btn {
									position: initial;
								}
							}
						}
					}
				}
			}
		}
		.onboarding__accordionItem-final {
			display: none;
		}
		&.onboarding__accordion-done {
			background: radial-gradient(218.07% 140.72% at 99% 0%, #E3F2FC 0%, #FAF7EB 25%, #EAE7F9 50%, #F7EDDE 75%, #E8F1F7 100%);
			box-shadow: 0 0 0 1px var(--base-line-secondary);

			.onboarding__accordionItem {
				opacity: 0;
				cursor: auto;
				pointer-events: none;
			}
			.onboarding__accordionItem-final {
				display: flex;
				flex-direction: column;
				position: absolute;
				top: 0; left: 0; right: 0; bottom: 0;
				align-items: center;
				justify-content: space-between;

				.onboarding__accordionItemHeader {
					width: 100%;
					box-sizing: border-box;
					padding: 12px 20px;
					gap: 12px;

					.in {
						font: var(--font-ui-18-title-2-semi);
						color: var(--base-txt-accent);
					}

					.flex_content {
						padding-top: 2px;
						font: var(--font-ui-13-small-reg);
						color: var(--base-txt-secondary);
					}
				}

				.onboarding__accordionItemInnerWrapper {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					flex: 1 0 0;

					picture {
						display: flex; justify-content: center;
						img { width: auto; height: 112px; flex: 1 0 0; }
					}

					.in {
						font: var(--font-ui-18-title-2-semi);
						color: var(--base-txt-accent);
					}
					p {
						font: var(--font-ui-15-large-reg);
						color: var(--base-txt-secondary);
						padding-bottom: 16px;
					}
				}
			}
		}
	}

	&.onboarding__block-demo {
		padding: 64px 0 40px;
		&:not(.onboarding__block-demoEx) { border-bottom: 1px solid var(--base-line-tertiary); }
	}

	&.onboarding__block-quickstart {
		padding: 40px 0;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	&.onboarding__block-tutorialbanner {
		display: flex;
		padding: 4px;
		gap: 32px;
		border-radius: 20px;
		background: var(--base-cont-top);
		box-shadow: var(--shadow-cont-minor-outline);
		margin: 40px 0;

		.onboarding__blockInner {
			display: flex;
			&:first-child { flex-direction: column; padding: 24px 0 24px 24px; }
			img { width: 100%; height: 100%; object-fit: contain; cursor: pointer; }
			div.sales__button { flex: 1 0 0; align-content: end; padding-top: 20px; }
		}
	}

	&.onboarding__block-salesbanner {
		display: flex;
		padding: 28px;
		gap: 32px;
		border-radius: 20px;
		background: radial-gradient(330.86% 100% at 50% -0.06%, rgba(255, 255, 255, 0.20) 0%, rgba(151, 208, 37, 0.20) 100%);
		box-shadow: 0 0 0 1px var(--colors-green-alpha-600-a40), 0 -20px 40px 12px var(--colors-lime-alpha-viv300-a10) inset, 0 2px 8px -2px var(--shadow-color-fx-400);

		.onboarding__blockInner {
			max-width: 50%;
			display: flex;
			flex-direction: column;
			gap: 4px;

			div.sales__button { flex: 1 0 0; align-content: end; padding-top: 20px; }

			.sales__row {
				display: flex;
				padding-left: 8px;
				height: 64px;

				img {
					width: 32px;
					height: 32px;
					border-radius: 4px;
					background: var(--base-cont-top);
					box-shadow: var(--shadow-cont-major-outline);
					padding: 2px;
					margin-right: -8px;

					&:nth-child(1) { transform: rotate(-4deg); }
					&:nth-child(2) { transform: rotate(-4deg); }
					&:nth-child(3) { transform: rotate(6deg); }
					&:nth-child(4) { transform: rotate(-2deg); }
					&:nth-child(5) { transform: rotate(8deg); }
					&:nth-child(6) { transform: rotate(-10deg); }
				}
			}

			.sales__takes {
				display: flex;
				flex-direction: column;
				gap: 4px;

				div {
					display: flex; gap: 8px; align-items: center;
					ws-icon {
						--icon-color: var(--colors-green-desat-920);
					}
					span {
						font: var(--font-txt-13-small-reg);
						color: var(--colors-green-desat-920);
					}
				}
			}
		}
	}

	&.onboarding__block-quickactions,
	&.onboarding__block-morefeatures {
		.onboarding__blockInner:last-child {
			display: flex;
			gap: 16px;
			padding: 10px 0 40px 0;

			.onboarding__blockInner-piece {
				padding: 16px 20px;
				border-radius: 16px;
				background: var(--base-cont-top);
				box-shadow: var(--shadow-cont-minor-outline);
				width: 33.33%;

				img { width: 64px; height: 64px; }

				>.flex_content {
					padding: 8px 0 20px 0;
					gap: 2px;
					min-height: 82px;
					box-sizing: border-box;

					.in {
						font: var(--font-ui-16-title-3-semi);
						color: var(--base-txt-accent);

						+.flex_content {
							font: var(--font-txt-13-small-reg);
							color: var(--base-txt-secondary);
						}
					}
				}
			}
		}
	}
	&.onboarding__block-morefeatures {
		.onboarding__blockInner:last-child {
			.onboarding__blockInner-piece {
				position: relative;
				width: 50%;
				background: radial-gradient(118.04% 100% at 50% 0%, rgba(109, 187, 247, 0.10) 0%, rgba(178, 185, 228, 0.10) 49.52%, rgba(214, 223, 237, 0.00) 100%), radial-gradient(684.62% 141.42% at 0% 0%, rgba(109, 187, 247, 0.10) 0%, rgba(178, 185, 228, 0.10) 49.52%, rgba(214, 223, 237, 0.00) 100%), var(--base-cont-top);
				box-shadow: 0 2px 8px -2px var(--shadow-color-fx-300), 0 0 0 1px var(--base-line-tertiary), 0 0 12px 12px var(--colors-alpha-light-80) inset;
				&:first-child {
					img { width: 100px; height: 64px; }
				}

				>.flex_content {
					padding: 24px 0 4px 0;
				}

				ws-btn {
					position: absolute;
					top: 20px; right: 20px;
				}
			}
		}
	}
	&.onboarding__block-showWhenDone {
		display: none;
	}
}

.onboarding_done .onboarding__block-showWhenDone {
	display: block;
}

.onboarding__eop {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 32px 0 12px 0;

	&:before, &:after {
		content: '';
		display: block;
		height: 1px;
		background: var(--base-line-tertiary);
		flex: 1 0 0;
	}

	.onboarding__eop-inner {
		background: var(--base-hlt-g-hover);
		color: var(--base-txt-primary);
		font: var(--font-ui-13-small-reg);
		border-radius: 16px;
		padding: 4px 6px;

		ws-icon {
			--icon-color: var(--base-txt-tertiary);
		}
	}
}

.onboarding__eop__text {
	width: 100%;
	text-align: center;
	font: var(--font-ui-13-small-med);
	color: var(--base-txt-tertiary);
	padding: 72px 0 12px 0;
}

body[data-color="color"] {
	.onboarding__block {
		&.onboarding__block-salesbanner {
			background: radial-gradient(68.75% 100% at 50% -0.06%, rgba(120, 184, 247, 0.10) 50.3%, rgba(105, 37, 208, 0.20) 100%);
			box-shadow: 0 0 0 1px var(--colors-interblue-500), 0 2px 8px -2px var(--shadow-color-fx-400), 0 -20px 40px 12px var(--colors-teal-alpha-750-a20) inset;

			.onboarding__blockInner {
				.sales__takes {
					div {
						ws-icon {
							--icon-color: var(--base-txt-accent);
						}
						span {
							color: var(--base-txt-accent);
						}
					}
				}
			}
		}
		.onboarding__accordion-done {
			background: radial-gradient(218.07% 140.72% at 99% 0%, rgba(51, 105, 255, 0.15) 0%, rgba(152, 145, 255, 0.15) 25%, rgba(39, 250, 250, 0.15) 50%, rgba(102, 119, 204, 0.15) 75%, rgba(93, 155, 255, 0.15) 100%);
		}

		&.onboarding__block-morefeatures {
			.onboarding__blockInner:last-child {
				.onboarding__blockInner-piece {
					box-shadow: 0 0 0 1px var(--base-line-tertiary), 0 2px 8px -2px var(--shadow-color-fx-300), 0 0 12px 12px var(--colors-alpha-light-00) inset;
				}
			}
		}
	}
}

#showImport ws-icon svg, .onboarding__accordionItemInnerContent:has(.import_icons) {
	transition: all 0.3s ease-in-out;
}

.flip-horizontal {
	transform: scaleX(-1);
	will-change: transform, opacity;
}

.ws-pointer {
	width: 32px;
	height: 32px;
	--icon-size: 32px;
}

.poke-left {
	transform-origin: 65% 50%;
	animation: ws-poke-left 500ms ease-in-out 10;
}

.ws-pointer.fade-out {
	opacity: 0;
	transition: opacity 200ms ease;
}

@keyframes ws-poke-left {
	0%   { transform: scaleX(-1) translateX(0)    rotate(0deg); }
	30%  { transform: scaleX(-1) translateX(-14px) rotate(-8deg); }
	60%  { transform: scaleX(-1) translateX(0)    rotate(0deg); }
	100% { transform: scaleX(-1) translateX(0)    rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
	.poke-left { animation: none; }
	.ws-pointer.fade-out { transition: none; }
}

body.mobile {
	.onboarding__block {
		h2 {
			font: var(--font-ui-22-title-1-med);
		}

		h3 {
			font: var(--font-ui-18-title-2-semi);
		}
		&.onboarding__block-demo {
			padding: 20px 20px 32px 20px;
			h2, p { text-align: center; }

			>.flex_row {
				flex-direction: column;
				gap: 8px;
			}
			&.onboarding__block-demoEx {
				padding-bottom: 32px;
			}
		}

		.import_icons a {
			width: calc((100% - 8px) / 2);
		}

		.onboarding__accordion {
			.onboarding__accordionItem {
				&.onboarding__accordionItem-open {
					.onboarding__accordionItemBody {
						padding: 12px 8px;
					}
				}
				.onboarding__accordionItemBody {
					.onboarding__accordionItemInner {
						gap: 8px;

						&#createtask:not(.onboarding__accordionItemInner-done) {
							.onboarding__accordionItemInnerContent {
								height: 48px;
							}
						}

						.onboarding__accordionItemInnerImage {
							display: none;

							+.onboarding__accordionItemInnerWrapper {
								.onboarding__accordionItemInnerContent {
									padding: 0;
								}
							}
						}

						.onboarding__accordionItemInnerWrapper {
							.onboarding__accordionItemInnerContent {
								.flex_row { flex-wrap: wrap; }
							}
						}
					}
				}
			}
			&.onboarding__accordion-done {
				.onboarding__accordionItem-final {
					.onboarding__accordionItemHeader {
						.in {
							flex-grow: 1;
							+.flex_content { display: none; }
						}
					}
					.onboarding__accordionItemInnerWrapper {
						p { padding: 8px 16px 16px 16px; text-align: center; }
					}
				}
			}
		}
		&.onboarding__block-quickactions, &.onboarding__block-morefeatures {
			.onboarding__blockInner:last-child {
				flex-wrap: wrap;

				.onboarding__blockInner-piece {
					width: 100%;
					>.flex_content {
						min-height: unset;
					}
				}
			}
		}
		&.onboarding__block-salesbanner {
			flex-direction: column;
			.onboarding__blockInner {
				max-width: 100%;
			}
		}
		&.onboarding__block-tutorialbanner {
			margin: 0 0 40px;
			.onboarding__blockInner {
				&:first-child {
					padding: 24px;

					picture { padding-top: 20px; }
				}
				&:last-child { display: none; }
			}
		}
		&.onboarding__block-quickstart {

			h3 {
				font: var(--font-ui-32-title-large-semi);
			}

			padding: 32px 0;

			.onboarding__blockInner:first-child {
				padding: 0 12px 12px 12px;

				.flex_row {
					flex-direction: column-reverse;
					align-items: flex-start;
					gap: 8px;
					padding-bottom: 8px;
				}
			}
		}
	}

	.onboarding__block-salesbanner + .onboarding__block-tutorialbanner {
		margin-top: 32px;
	}

	#onboardingMobileHand { display: none; }
}

.primaryMenu__content .primaryMenu__item-onboarding { display: none; }

#onb_avatar_upload { display: none; }