.xtic {
	--xtic-ink: #202124;
	--xtic-muted: #5f6368;
	--xtic-line: #d9dee7;
	--xtic-panel: #ffffff;
	--xtic-soft: #f6f8fb;
	--xtic-blue: #1d5fd1;
	--xtic-gold: #d99a24;
	--xtic-green: #0b7a20;
	--xtic-red: #b3261e;
	margin: 28px 0;
	color: var(--xtic-ink);
	font-family: inherit;
	position: relative;
}
.xtic * {
	box-sizing: border-box;
}
.xtic__intro {
	border: 1px solid var(--xtic-line);
	border-radius: 8px 8px 0 0;
	padding: 22px 24px;
	background: var(--xtic-soft);
}
.xtic__eyebrow {
	margin: 0 0 6px;
	color: var(--xtic-blue);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
}
.xtic__intro h2,
.xtic__chart h3 {
	margin: 0;
	letter-spacing: 0;
}
.xtic__intro h2 {
	font-size: 28px;
	line-height: 1.22;
}
.xtic__intro p:last-child {
	margin: 10px 0 0;
	color: var(--xtic-muted);
}
.xtic__method-note {
	padding-top: 10px;
	border-top: 1px solid var(--xtic-line);
	font-size: 13px;
	line-height: 1.45;
}
.xtic__summary {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-right: 1px solid var(--xtic-line);
	border-left: 1px solid var(--xtic-line);
	background: var(--xtic-panel);
}
.xtic__metric {
	min-height: 92px;
	padding: 18px;
	border-right: 1px solid var(--xtic-line);
	border-bottom: 1px solid var(--xtic-line);
}
.xtic__metric:last-child {
	border-right: 0;
}
.xtic__metric span {
	display: block;
	color: var(--xtic-muted);
	font-size: 13px;
	line-height: 1.35;
}
.xtic__metric strong {
	display: block;
	margin-top: 8px;
	font-size: 24px;
	line-height: 1.15;
}
.xtic__metric small {
	display: block;
	margin-top: 8px;
	color: var(--xtic-muted);
	font-size: 12px;
	line-height: 1.3;
}
.xtic__metric small b {
	color: var(--xtic-ink);
	font-weight: 700;
}
.xtic__visuals {
	border-right: 1px solid var(--xtic-line);
	border-left: 1px solid var(--xtic-line);
	background: var(--xtic-panel);
}
.xtic__chart {
	padding: 24px;
	border-bottom: 1px solid var(--xtic-line);
}
.xtic__chart-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
}
.xtic__chart h3 {
	font-size: 22px;
	line-height: 1.25;
}
.xtic__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	color: var(--xtic-muted);
	font-size: 13px;
}
.xtic__legend span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.xtic__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}
.xtic__dot--value {
	background: var(--xtic-blue);
}
.xtic__dot--real {
	background: #00897b;
}
.xtic__dot--invested {
	background: var(--xtic-gold);
}
.xtic__dot--monthly {
	background: var(--xtic-green);
}
.xtic__dot--monthly-real {
	background: #00a6a6;
}
.xtic__svg {
	display: block;
	width: 100%;
	height: auto;
	min-height: 250px;
	overflow: visible;
}
.xtic__controls {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 24px;
	padding: 24px;
	border: 1px solid var(--xtic-line);
	border-top: 0;
	background: var(--xtic-panel);
}
.xtic__field {
	min-width: 0;
}
.xtic__field label {
	display: block;
	margin-bottom: 8px;
	font-weight: 700;
}
.xtic__input-row {
	display: flex;
	align-items: center;
	gap: 8px;
}
.xtic__input-row input {
	width: 140px;
	max-width: 100%;
	min-height: 44px;
	border: 1px solid var(--xtic-line);
	border-radius: 8px;
	padding: 8px 10px;
	font: inherit;
	background: #fff;
}
.xtic__input-row span {
	color: var(--xtic-muted);
	white-space: nowrap;
}
.xtic__field input[type='range'] {
	width: 100%;
	margin-top: 10px;
	accent-color: var(--xtic-blue);
}
.xtic__details {
	border: 1px solid var(--xtic-line);
	border-top: 0;
	border-radius: 0 0 8px 8px;
	background: var(--xtic-panel);
}
.xtic__details summary {
	cursor: pointer;
	padding: 16px 24px;
	font-weight: 700;
}
.xtic__table-wrap {
	overflow-x: auto;
	padding: 0 24px 24px;
}
.xtic__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.xtic__table th,
.xtic__table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--xtic-line);
	text-align: right;
	white-space: nowrap;
}
.xtic__table th:first-child,
.xtic__table td:first-child {
	text-align: left;
}
.xtic text {
	fill: var(--xtic-muted);
	font: 12px/1.2 Arial, sans-serif;
}
.xtic .xtic-grid {
	stroke: #c5ccd8;
	stroke-width: 1;
}
.xtic .xtic-axis {
	stroke: #8d96a6;
	stroke-width: 1.2;
}
.xtic .xtic-area {
	fill: rgba(29, 95, 209, 0.13);
}
.xtic .xtic-line-value {
	fill: none;
	stroke: var(--xtic-blue);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.xtic .xtic-line-invested {
	fill: none;
	stroke: var(--xtic-gold);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.xtic .xtic-line-real {
	fill: none;
	stroke: #00897b;
	stroke-width: 3;
	stroke-dasharray: 8 6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.xtic .xtic-point {
	fill: #fff;
	stroke-width: 2.5;
	cursor: pointer;
	outline: none;
	pointer-events: all;
}
.xtic .xtic-hitpoint {
	fill: transparent;
	stroke: transparent;
	cursor: pointer;
	outline: none;
	pointer-events: all;
}
.xtic .xtic-point:focus,
.xtic .xtic-point:hover {
	stroke-width: 4;
}
.xtic .xtic-bar-positive {
	fill: var(--xtic-green);
	cursor: pointer;
	outline: none;
}
.xtic .xtic-bar-negative {
	fill: var(--xtic-red);
	cursor: pointer;
	outline: none;
}
.xtic .xtic-bar-real-positive {
	fill: #00a6a6;
	cursor: pointer;
	outline: none;
}
.xtic .xtic-bar-real-negative {
	fill: #8a1c7c;
	cursor: pointer;
	outline: none;
}
.xtic .xtic-bar-positive:focus,
.xtic .xtic-bar-positive:hover,
.xtic .xtic-bar-negative:focus,
.xtic .xtic-bar-negative:hover,
.xtic .xtic-bar-real-positive:focus,
.xtic .xtic-bar-real-positive:hover,
.xtic .xtic-bar-real-negative:focus,
.xtic .xtic-bar-real-negative:hover {
	filter: brightness(0.9);
}
.xtic__tooltip {
	position: absolute;
	z-index: 5;
	width: max-content;
	min-width: 180px;
	max-width: min(260px, calc(100% - 24px));
	padding: 8px 10px;
	border-radius: 8px;
	background: rgba(32, 33, 36, 0.94);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
	color: #fff;
	font-size: 13px;
	line-height: 1.35;
	pointer-events: none;
	transform: translateY(calc(-100% - 12px));
	transition: opacity 120ms ease;
	opacity: 0;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}
.xtic__tooltip.is-visible {
	opacity: 1;
}
.xtic__tooltip strong {
	display: block;
	margin-bottom: 2px;
	color: #fff;
	font-size: 13px;
}
.xtic__tooltip span {
	display: block;
	color: rgba(255, 255, 255, 0.82);
}
@media (max-width: 760px) {
	.xtic__summary,
	.xtic__controls {
		grid-template-columns: 1fr;
	}
	.xtic__metric {
		border-right: 0;
	}
	.xtic__chart-head {
		display: block;
	}
	.xtic__legend {
		margin-top: 10px;
	}
	.xtic__intro,
	.xtic__chart,
	.xtic__controls {
		padding: 18px;
	}
	.xtic__intro h2 {
		font-size: 23px;
	}
	.xtic__chart h3 {
		font-size: 20px;
	}
	.xtic__svg {
		min-height: 220px;
	}
}
/*# sourceURL=xt-investment-calculator-inline-css */