body {
	  margin: 0;
	  padding: 10px;
	  font-family: Arial, sans-serif;
	}


.edittimeline,
.edittimeline::before,
.edittimeline::after,
.edittimeline *,
.edittimeline *::before,
.edittimeline *::after {
  all: revert;
}

/* Inherited properties (color, font, line-height) still come from
   ancestors outside the wrapper. Pin them on the root. */

 .edittimeline {
  display: block;
  color: CanvasText;
  background-color: Canvas;
  font-family: system-ui, sans-serif;
  font-size: medium;
  font-weight: normal;
  line-height: normal;
  text-align: start;
  letter-spacing: normal;
}


	#timeline, #vis, .vis-timeline {
	  width: 100%;
	  max-width: 100%;
	  min-height: 200px; /* Adjust height as needed */
	  box-sizing: border-box;
	}	

	@media (pointer: coarse) {
	  .vis-item.vis-range .vis-item-content::before,
	  .vis-item.vis-range .vis-item-content::after {
	    content: '';
	    position: absolute;
	    width: 24px; /* Larger touch target */
	    height: 24px;
	    /* background: rgba(0, 0, 255, 0.3); */ /* Semi-transparent for visibility */
	    border-radius: 50%;
	    z-index: 10; /* Ensure handles are tappable */
	  }
	  .vis-item.vis-range .vis-item-content::before {
	    left: -12px; /* Start handle */
	  }
	  .vis-item.vis-range .vis-item-content::after {
	    right: -12px; /* End handle */
	  }
	}
		
	.vis-item.vis-background.epi { background-color: rgba(255, 0, 0, 0.2); }   
	.vis-item.vis-background.pcla { background-color: rgba(0, 0, 0, 0.2); }  
	.vis-item.vis-background.pclb { background-color: rgba(50, 50, 0, 0.2); }  
	.vis-item.vis-background.ca { background-color: rgba(100, 100, 150, 0.2); }  
	.vis-item .vis-item-overflow { overflow: visible; }
	
#actionbuttons { display: flex; gap: 20px; }
  	
.vis-item.vis-range.dashed::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1000px; /* top: 100%; */
  width: 2px;
  height: 4000px;     /* clipped by the panel at the axis */
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--dash, currentColor) 0 4px,
    transparent 4px 8px
  );
} 	
	.c0 { background-color: #ffffff; border-color: #ffffff; --dash: #ffffff; }
	.c1 { background-color: red; border-color: red; --dash: red; }
	.c2 { background-color: orange; border-color: orange; --dash: orange; }
	.c3 { background-color: yellow; border-color: yellow; --dash: yellow; }
	.c4 { background-color: #88ff88; border-color: #88ff88; --dash: #88ff88; }
	.c5 { background-color: #8888ff; border-color: #8888ff; --dash: #8888ff; }
	.c6 { background-color: #a977ce; border-color: #a977ce; --dash: #a977ce; }
	.c7 { background-color: violet; border-color: violet; --dash: violet; }
	.i1 { opacity: 0.37; }
	.i2 { opacity: 0.44; }
	.i3 { opacity: 0.51; }
	.i4 { opacity: 0.58; }
	.i5 { opacity: 0.65; }
	.i6 { opacity: 0.72; }
	.i7 { opacity: 0.79; }
	.i8 { opacity: 0.86; }
	.i9 { opacity: 0.93; }
	.i10 { opacity: 1; }
	.opt { padding: 3px; }
	
	.prg { padding-top: 3px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; }
#	[class^="prg-"] { padding-top: 3px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; background-size: 100% 100%; }
#	[class^="prg-"]::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: 100% 100%;  background-repeat: no-repeat; opacity: 0.5; z-index: 1; }

	.na {  }
	.norm { background-image: url('./norm.png'); background-size: 100% 100%; }
	.programme { background-image: url('./compass.png'); background-size: 100% 100%; }
	.ca { background-image: url('./ca.png'); background-size: 100% 100%; }
	.healing { background-image: url('./healing.png'); background-size: 100% 100%; }
	.pcla { background-image: url('./pcla.png'); background-size: 100% 100%; }
	.epi { background-image: url('./epi.png'); background-size: 100% 100%; }
	.pclb { background-image: url('./pclb.png'); background-size: 100% 100%; }
	
	select {
/*		margin: 10px 0; */
/*		width: 100%; */
/*		padding: 8px; */
		box-sizing: border-box;
	}
		@media screen and (max-width: 600px) {
/*		select { width: 100%; } */
	}

	/* Remove previous .custom-file-label styles */
	.custom-file-label {
	  display: none; /* Remove if not used elsewhere */
	}
/*
	button {
	  margin: 10px 5px;
	  padding: 8px 16px;
	  background-color: #ffffff;
	  border: 1px solid #cccccc;
	  border-radius: 4px;
	  font-family: Arial, sans-serif;
	  font-size: 16px;
	  color: #333333;
	  cursor: pointer;
	  text-align: center;
	}
*/
	button:hover {
	  background-color: #f0f0f0;
	}
	@media screen and (max-width: 600px) {
	  button {
	    margin: 5px 0;
	    padding: 6px 12px;
	    width: 100%;
	  }
	}

	#loadsave { display: flex; justify-content: space-between; }

@keyframes vis-flash {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(252, 81, 133, 0);
  }
  50% {
    box-shadow: 0 0 0 4px #FC5185;
  }
}

.vis-selected { box-shadow: 0px 0px 0px 4px #FC5185; transition: box-shadow 0.3s linear; background-color: inherit; }

.vis-selected { animation: vis-flash 1s ease-in-out infinite; }