@charset "UTF-8";

	:root
	{
		--timeline-bgcolor: green;
		--timeline-icon-size: 48px;
		--timeline-icon-padding: 10px;
		--timeline-icon-offset: 0;
		--timeline-icon-border: 2px solid black;
		--timeline-spacer-size: 40px;
		--timeline-item-bgcolor: gray;
		--timeline-item-color: white;
		--timeline-timeline-width: 4px;
		--timeline-timeline-bgcolor: var(--fontcolor);
		--timeline-outer-padding: 14px;
		--timeline-outer-border: 0;
		--timeline-outer-radius: 10px;
		--timeline-outer-shadow: inherit;		
	}

	div.timeline-inner
	{
		display: grid !important;
	}
	
	div.timeline-content
	{
		position: relative;
		container-type: inline-size;
	}
	div.timeline-timeline
	{
		position: absolute;
		height: 100%;
		width: 4px;
		left: calc(50% - (var(--timeline-timeline-width)));
		background-color: var(--timeline-timeline-bgcolor);
	}
	div.timeline-item
	{
		position: relative;
		width : 100%;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	div.timeline-outer
	{
		position: relative;
		width: calc(50% - var(--timeline-icon-size) - var(--timeline-spacer-size) - var(--timeline-timeline-width));
		display: inline-block;
		padding: var(--timeline-outer-padding);
		background-color: var(--timeline-item-bgcolor);
		color: var(--timeline-item-color);
		box-sizing: border-box;
		border: var(--timeline-outer-border);
		border-radius: var(--timeline-outer-radius);
		box-shadow: var(--timeline-outer-shadow);
	}
	div.timeline-item.leftitem .timeline-outer
	{
		left: 0;
	}
	div.timeline-item.rightitem .timeline-outer 
	{
		left: calc(50% + var(--timeline-spacer-size) + var(--timeline-timeline-width) + var(--timeline-icon-size) - (var(--timeline-icon-padding) / 2));
	}
	div.timeline-inner-icon
	{
		position: absolute;
  	top: var(--timeline-icon-offset);
		background-color: var(--timeline-timeline-bgcolor);
  	width: var(--timeline-icon-size);
  	height: var(--timeline-icon-size);
  	border-radius: 50%;
  	border: var(--timeline-icon-border);
  	padding: var(--timeline-icon-padding);  	
  	box-sizing: border-box;
	}
	div.timeline-item.rightitem .timeline-inner-icon 
	{
		left: calc(0px - var(--timeline-outer-padding) - var(--timeline-spacer-size) - var(--timeline-icon-size) - var(--timeline-icon-padding) - var(--timeline-timeline-width));		
	}
	div.timeline-item.leftitem .timeline-inner-icon 
	{
		right: calc(0px - var(--timeline-outer-padding) - var(--timeline-spacer-size) - var(--timeline-icon-size) - var(--timeline-icon-padding) - var(--timeline-timeline-width));
	}	
	div.timeline-inner-icon img 
	{
	  width: var(--timeline-icon-size);
	  height: var(--timeline-icon-size);
	  box-sizing: border-box;
	}	
	.timeline-inner::before 
	{
		position: absolute;
		color: var(--timeline-item-bgcolor);
		top: var(--timeline-icon-offset);
		scale: 2;
	}	
	div.timeline-item.rightitem .timeline-inner::before
	{
		content: "◀";
		left: -15px;
	}
	div.timeline-item.leftitem .timeline-inner::before
	{
		content: "▶";
		right: -15px;
	}
	
	.timeline-inner-text .itemhead 
	{
		font-size: 120%;
		font-weight: bold;
		margin: 0;
	}	
	.timeline-inner-text .itemcontent 
	{
		margin: 2px;
	}
	.timeline-root.leftonly .timeline-outer 
	{
		width: calc(100% - var(--timeline-icon-size) - var(--timeline-spacer-size) - (var(--timeline-icon-padding) * 2) - (var(--timeline-outer-padding) * 2));
	}	

	.timeline-root.leftonly .timeline-timeline 
	{
		left: calc(100% - var(--timeline-icon-size));
	}
	
	@media (max-width: 1000px)
	{
		article.colbased article.timeline-root
		{
			width: 100% !important;
		}
	}
	@media (max-width: 800px)
	{
		div.timeline-content
		{
			font-size: smaller;
			--timeline-spacer-size: 10px;
		}
	}
	
	@container (max-width: 600px) 
	{
		div.timeline-timeline
		{
			left: calc(50% - (var(--timeline-timeline-width))) !important;
		}
		div.timeline-content
		{
			font-size: smaller;
			--timeline-spacer-size: 10px;
		}
		div.timeline-item
		{
			padding-top: calc(var(--timeline-icon-size) * 1.5);
		}	
		.timeline-root.leftonly .timeline-outer,
		div.timeline-item .timeline-outer
		{
			width: 100%;
			left: 0 !important;
		}
		div.timeline-item .timeline-inner::before
		{
			content: "" !important;
		}
		div.timeline-item .timeline-inner-icon
		{
			left: calc(50% - (var(--timeline-icon-size) / 2) - 2px) !important;
			top: calc(0px - (var(--timeline-icon-size) * 1.2));
		}
	}