@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap');

:root {
  --background-color: #000;
  --main-color: #7083a4;
  --alternate-color: #fff;
  --stroke-width: 6;
  --popup-top: 250px;
  --popup-background: var(--background-color);
  --tooltip-top: 200px;
  --font-fam: "Poppins";
  --popup-font-size: 15px;
  --popup-date-size: 18px;
}

body {
  background-color: var(--background-color);
  font: 18px "Poppins" !important;
  font-weight: 300;
  text-rendering: optimizeLegibility;
  margin-left: 20px;
}

text {
  fill: var(--main-color);
}

.timeline-line {
  stroke: var(--main-color) !important;
  stroke-width: var(--stroke-width) !important;
}

ellipse {
  stroke: var(--main-color) !important;
  fill: var(--background-color) !important;
}

ellipse:hover {
  stroke: var(--main-color) !important;
  fill: var(--main-color) !important;
}

ellipse.selected {
  stroke: var(--alternate-color) !important;
  fill: var(--alternate-color) !important;
}

.sepa {
  stroke: var(--main-color) !important;
  fill: var(--main-color) !important;
  z-index: -1;
}

#container {
	

  min-width: 400px;
  max-width: 600px;
  margin: 0px auto;
}

ellipse.sepa {
  rx: 1;
  ry: 22;
  cy: 80;
  /* z-index: -1; */
}

.popup {
  font-family: var(--font-fam)!important;
  font-size: var(--popup-font-size);
  top: var(--popup-top) !important;
  left: 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 20px !important;
}

.popup-date {
  font-size: var(--popup-date-size);
  font-weight: 900;
  padding: 7px 0 0px 0px;
}

.popup-titre {
  font-weight: 400;
  padding: 0px;
}

.popup-desc {
  font-weight: 400;
  padding: 7px 0 7px 0px;
}

.popup a {
  color: var(--main-color);
  text-decoration: none;
  transition: color .3s ease-out;
}

.popup a:hover {
  color: var(--alternate-color);
  text-decoration: underline;
  transition: color .3s ease-in;
}

#closebout {
  position: absolute;
  font-weight: 900;
  right: 9px;
  top: 4px;
  cursor: pointer;
}

.tooltip {
  top: var(--tooltip-top) !important;
  border-color: var(--main-color) !important;
  color: var(--main-color) !important;
}

.tooltip::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-bottom: 8px solid var(--main-color);
  left: 42%;
  top: -9px;
}