/* --------------- */
/* tool tip styles */
/* --------------- */

.ecg_tooltip {
  position: absolute;
  width: 20vw;
  min-width: 150px;
  /* white-space: pre-wrap; */
  /*white-space: pre-line;*/
  white-space: normal;
  text-align: center;
/*  font-family: "tech";*/
  font-family: "Cascadia";
  
  background-color: #f9f9f9;
  color: #333;
  border: 1px solid #d3d3d3;
  padding: 5px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2vh;
}

/* arrow on top */
.ecg_tooltip .ecg_tooltip_arrow-top {
  position: absolute;
  bottom: 100%;
  left: 50%;
  --ecg_tooltip-arrow-size: 2vh;
  margin-left: calc(-1 * var(--ecg_tooltip-arrow-size));
  border-width: var(--ecg_tooltip-arrow-size);
  border-style: solid;
  border-color: transparent transparent #f9f9f9 transparent;
}

/* arrow on right */
.ecg_tooltip .ecg_tooltip_arrow-right {
  position: absolute;
  top: 50%;
  left: 100%;
  --ecg_tooltip-arrow-size: 2vh;
  margin-top: calc(-1 * var(--ecg_tooltip-arrow-size));
  border-width: var(--ecg_tooltip-arrow-size);
  border-style: solid;
  border-color: transparent transparent transparent #f9f9f9;
}

/* arrow on bottom */
.ecg_tooltip .ecg_tooltip_arrow-bottom {
  position: absolute;
  top: 100%;
  left: 50%;
  --ecg_tooltip-arrow-size: 2vh;
  margin-left: calc(-1 * var(--ecg_tooltip-arrow-size));
  border-width: var(--ecg_tooltip-arrow-size);
  border-style: solid;
  border-color: #f9f9f9 transparent transparent transparent;
}

.ecg_tooltip .ecg_tooltip_arrow-bottomleft {
  position: absolute;
  top: 100%;
  right: 100%;
  --ecg_tooltip-arrow-size: 2vh;
  margin-top: calc(-1 * var(--ecg_tooltip-arrow-size));
  border-width: var(--ecg_tooltip-arrow-size);
  border-style: solid;
  border-color: transparent #f9f9f9 transparent transparent;
}
.ecg_tooltip .ecg_tooltip_arrow-topleft {
  position: absolute;
  bottom: 100%;
  right: 100%;
  --ecg_tooltip-arrow-size: 2vh;
  margin-top: calc(-1 * var(--ecg_tooltip-arrow-size));
  border-width: var(--ecg_tooltip-arrow-size);
  border-style: solid;
  border-color: transparent #f9f9f9 transparent transparent;
}

.ecg_tooltip .ecg_tooltip_arrow-bottomright {
  position: absolute;
  top: 100%;
  left: 100%;
  --ecg_tooltip-arrow-size: 2vh;
  margin-top: calc(-1 * var(--ecg_tooltip-arrow-size));
  border-width: var(--ecg_tooltip-arrow-size);
  border-style: solid;
  border-color: transparent #f9f9f9 transparent transparent;
}
.ecg_tooltip .ecg_tooltip_arrow-topright {
  position: absolute;
  bottom: 100%;
  left: 100%;
  --ecg_tooltip-arrow-size: 2vh;
  margin-top: calc(-1 * var(--ecg_tooltip-arrow-size));
  border-width: var(--ecg_tooltip-arrow-size);
  border-style: solid;
  border-color: transparent #f9f9f9 transparent transparent;
}


/* arrow on left */
.ecg_tooltip .ecg_tooltip_arrow-left {
  position: absolute;
  top: 50%;
  right: 100%;
  --ecg_tooltip-arrow-size: 2vh;
  margin-top: calc(-1 * var(--ecg_tooltip-arrow-size));
  border-width: var(--ecg_tooltip-arrow-size);
  border-style: solid;
  border-color: transparent #f9f9f9 transparent transparent;
}

.ecg_tooltip img {
  width: 100%;
}

.ecg_tooltip {
  top: 10%;
  left: 2%;
  /* min-height: 15vh; */
}

/* #content_container {
  position: absolute;
  top: 10%;
  left: 0;
} */

/* measure div */
.measure-cont {
  position: absolute;
  top: 60%;
  left: 100px;
  width: 15vw;
  width: 100px;
  height: 50px;
  border: 1px solid #d9cdcd;
}

.vertical-line {
  /* width: 2vh; */
  width: 10px;
  height: 100%;
  background-color: #d9cdcd;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.courter-line {
  width: 2vh;
  width: 5px;
  height: 100%;
  background-color: #d9cdcd;
  position: absolute;
  left: 25%;
  transform: translateX(-50%);
}

.measure-cont.measure-cont-right {
  position: absolute;
  top: 60%;
  left: 80%;
}