.kk-timeline {

	/* css vars that can be set by drop options*/
	--kk-timeline-max-width: 100%;
	--kk-timeline-dot-size: 3em;
	--kk-timeline-dot-color: var(--primary, #ccc);
	--kk-timeline-icon-size: 1.4em;
	--kk-timeline-icon-color: #fff;
	--kk-timeline-line-color: var(--gray-light, #f1f1f1);
	--kk-timeline-line-width: 8px;
	--kk-timeline-alignment: center;

	/* other css vars*/
	--kk-timeline-date-opacity: 0.7;
	--kk-timeline-default-spacing: 1em;

	display: flex;
	flex-direction: column;
	align-items: var(--kk-timeline-alignment);
	isolation: isolate;
}

.kk-timeline .kk-timeline-intro {
	text-align: center;
}

.kk-timeline .kk-timeline-wrapper {
	width: min(100%, var(--kk-timeline-max-width));
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--kk-timeline-default-spacing) 0;
}

/* default grid styles */

.kk-timeline .kk-timeline-entry {
	width: 100%;
	display: grid;
	grid-template-columns: [entry-start] 1fr [marker] auto [entry-end] 1fr;
	gap: calc(0.5 * var(--kk-timeline-dot-size));
	padding: 1.5em 0;
	position: relative;
}

.kk-timeline .kk-timeline-date {
	text-align: right;
	opacity: var(--kk-timeline-date-opacity);
}

.kk-timeline .kk-timeline-marker {
	grid-area: marker;
	display: flex;
	align-content: center;
	justify-content: center;
}

.kk-timeline .kk-timeline-content[data-pos="left"],
.kk-timeline .kk-timeline-date[data-pos="left"] {
	grid-area: entry-start;
	text-align: right;
}

.kk-timeline .kk-timeline-content[data-pos="right"],
.kk-timeline .kk-timeline-date[data-pos="right"] {
	grid-area: entry-end;
	text-align: left;
}


.kk-timeline .kk-timeline-title-inner {
	margin: 0 0 0.75em 0;
}

/* dot & timeline */

.kk-timeline .kk-timeline-dot {
	border-radius: 50%;
	width: var(--kk-timeline-dot-size);
	height: var(--kk-timeline-dot-size);
	background: var(--kk-timeline-dot-color);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: calc(-0.25 * var(--kk-timeline-dot-size));
	overflow: hidden;
}

.kk-timeline .kk-timeline-dot:before {
	content: '';
	position: absolute;
	background: var(--kk-timeline-line-color);
	
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: var(--kk-timeline-line-width);
	z-index: -1;
}

.kk-timeline .kk-timeline-entry.kk-timeline-entry-first .kk-timeline-dot:before {
	background: linear-gradient(to bottom, transparent, var(--kk-timeline-line-color) 2em);
}

.kk-timeline .kk-timeline-entry.kk-timeline-entry-last .kk-timeline-dot:before {
	background: linear-gradient(to top, transparent, var(--kk-timeline-line-color) 2em);
}

/* other styles */

.kk-timeline .kk-timeline-dot .kk-icon {
	top: 0;
	font-size: var(--kk-timeline-icon-size);
	color: var(--kk-timeline-icon-color);
}

.kk-timeline .kk-timeline-btn-wrapper {
	margin-top: var(--kk-timeline-default-spacing);
}


/*************************************/
/*          MIN Breakpoint           */
/*************************************/

/* entry, date, content */

.kk-timeline.kk-timeline[data-bp="min"] .kk-timeline-entry.kk-timeline-entry {
	grid-template-columns: 100%;
	grid-template-areas:
		"marker"
		"entry-start"
		"entry-end";
	gap: 0.5em;
}

.kk-timeline.kk-timeline[data-bp="min"] .kk-timeline-entry .kk-timeline-date,
.kk-timeline.kk-timeline[data-bp="min"] .kk-timeline-entry .kk-timeline-content {
	text-align: center;
}

.kk-timeline.kk-timeline[data-bp="min"] .kk-timeline-entry .kk-timeline-date {
	grid-area: entry-start;
}

.kk-timeline.kk-timeline[data-bp="min"] .kk-timeline-entry .kk-timeline-content {
	grid-area: entry-end;
}

/* dot & timeline */

.kk-timeline.kk-timeline[data-bp="min"] .kk-timeline-entry .kk-timeline-dot {
	margin-top: 0;
}

.kk-timeline.kk-timeline[data-bp="min"] .kk-timeline-entry .kk-timeline-dot:before {
	background: linear-gradient(to bottom,
			transparent,
			var(--kk-timeline-line-color) 1em,
			var(--kk-timeline-line-color) calc(var(--kk-timeline-dot-size) + 2em),
			transparent calc(var(--kk-timeline-dot-size) + 3em));
}

/* other styles */

.kk-timeline.kk-timeline[data-bp="min"] .kk-timeline-marker {
	padding-bottom: 1.5em;
}