/*-------------------------*\ 
# 📅 TIMELINE  CSS
\*-------------------------*/
:root {
  --timelinecolor: grey;
  --timelinestopbackground: transparent;
  --circlesize: 4px;
  --timelineactivecirclesize: 6px;
  --timelinehorizontallinelength: 20px;
  --timelineanimatedcolor: #000;
  --timelineanimatedwidth: 2px;
  --textblockanimationhorizontaldistance: 5px;
  --timelinetransition: 0.1s;
  --timelinewidth: 1px;
}
/*
section[data-section-id="64943ded50f75d7cf495b9b7"]{
  //main color for timeline
  --timelinecolor: black;
  //timeline stop background. Transparent works if it doesn't overlap with timeline. 
  --timelinestopbackground: black; 
    --timelineanimatedcolor: white;

}
*/
@media screen and (max-width: 768px) {
  section:has(.timeline-vertical) *[style*="right"] {
    text-align: left !important;
  }
}
section:has(.timeline-vertical) .sqs-block-code .sqs-block-content {
  position: static !important;
}
section:has(.timeline-vertical) pre,
section:has(.timeline-vertical) pre code {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.1em;
  margin-bottom: 4px !important;
}
section:has(.timeline-vertical) h3,
section:has(.timeline-vertical) h4 {
  margin-top: 0 !important;
  margin-bottom: 4px !important;
}
section:has(.timeline-vertical) h4 + p,
section:has(.timeline-vertical) h3 + p {
  margin-top: 0 !important;
}
section:has(.timeline-vertical) .sqs-block-horizontalrule hr {
  margin: 0 !important;
}
@media screen and (max-width: 768px) {
  .vertical-timeline-section *[style*="right"] {
    text-align: left !important;
  }
}
.vertical-timeline-section .sqs-block-code .sqs-block-content {
  position: static !important;
}
.vertical-timeline-section pre,
.vertical-timeline-section pre code {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.1em;
  margin-bottom: 4px !important;
}
.vertical-timeline-section h3,
.vertical-timeline-section h4 {
  margin-top: 0 !important;
  margin-bottom: 4px !important;
}
.vertical-timeline-section h4 + p,
.vertical-timeline-section h3 + p {
  margin-top: 0 !important;
}
.vertical-timeline-section .sqs-block-horizontalrule hr {
  margin: 0 !important;
}
.timeline-vertical {
  position: relative;
  height: 100%;
  background: var(--timelinecolor);
  width: var(--timelinewidth);
  margin: auto;
}
.timeline-vertical.left-edge {
  margin: 0 auto 0 0;
}
.timeline-vertical.right-edge {
  margin: 0 0 0 auto;
}
/*.code-block:has(.horizontal-left, .horizontal-right){
  //make sure the code block has a height so we can drag it vertically
  height: 100%;
  > *, .horizontal-left, .horizontal-right{
    height: 100%;
  }
}*/
.sqs-block-content.has-timeline-vertical {
  height: 100%;
}
.sqs-block-content:has(.timeline-vertical),
.sqs-block-content.has-timeline-vertical,
.sqs-block.has-timeline-vertical,
.sqs-block-content:has(.timeline-vertical) > div {
  height: 100%;
}
.sqs-block-focused .sqs-block-content:has(.timeline-vertical, .horizontal-left, .horizontal-right) {
  height: 0px !important;
}
/*
  //.html-block:has(h4 span[style="text-decoration:line-through"]),
  //.html-block.has-text-decoration-line-through {
    @media screen and (max-width: 767px) {
      * {
        text-align: left !important;
      }
    }
  }
  */
/*
  // TIMELINE STOP - RIGHT SIDE
  .html-block:has(h4 span[style="text-decoration:line-through"]),
  .html-block.has-text-decoration-line-through {
    box-sizing: border-box;
    position: relative;
    padding-left: ~"calc( var(--timelinehorizontallinelength) + var(--boxpadding) ) ";
    &.sqs-background-enabled{
      //add + 6% to the padding if using background
      padding-left: ~"calc( var(--timelinehorizontallinelength) + var(--boxpadding) + 6% ) " !important;
    }

    h3 span, h4 span {
      text-decoration: none !important;
    }
    //instead of all thet code lets use the LESS option to include the code from the other class .horizontal.to-right
    .horizontal-right;

    //animations
  }

  

  //same but for right-aligned text. so if has .html-block:has(h4 span[style="text-decoration:line-through"]) em, then make padding-right:20px !important; and after element to the other side 
  .html-block:has(h4 span[style="text-decoration:line-through"] em),
  .html-block.has-text-decoration-line-through-em {
    padding-right: ~"calc( var(--timelinehorizontallinelength) + var(--boxpadding) )" !important;
    padding-left: 0px !important;
    //same thing here, dry LESS versio by including the code from the other class .horizontal-left
    .horizontal-left;
    h4 span em {
      font-style: normal !important; //remove italics as we just use it for right align
    }
    @media screen and (max-width: 767px) {
      padding-left: ~"calc( var(--timelinehorizontallinelength) + var(--boxpadding) )" !important;
      padding-right: 0px !important;
      * {
        text-align: left !important;
      }
      &:after {
        right: unset !important;
        //left: ~"calc(0px - (var(--circlesize) / 2) - 1px)" !important; 
        left: var(--timelinehorizontallinelength) !important;
      }
      &:before{
        right: unset !important;
        //left: ~"calc(0px - (var(--circlesize) / 2) - 1px)" !important; 
        left:0 !important;
      }
    }
  }
  */
@media screen and (max-width: 767px) {
  .timeline-vertical {
    margin-right: auto !important;
    margin-left: 0 !important;
  }
}
/*
    .timelines-align-horizontal-lines{
      .sqs-block-horizontalrule hr {
        margin: 0 !important;
      } 
      
      .horizontalrule-block{
        justify-content: flex-end !important;
      }
    }
    */
.horizontal-right,
.horizontal-left {
  width: 100%;
}
.horizontal-right:before,
.horizontal-left:before {
  content: "";
  position: absolute;
  transform: translateY(calc(0% - var(--timelinewidth) / 2 ));
  height: var(--timelinewidth);
  width: calc(var(--timelinehorizontallinelength) - var(--circlesize) / 2);
  background-color: var(--timelinecolor);
}
body:not(.sqs-edit-mode.sqs-edit-mode-active) .horizontal-right:before,
body:not(.sqs-edit-mode.sqs-edit-mode-active) .horizontal-left:before {
  transition: all 0.1s ease-in-out;
}
.horizontal-right:after,
.horizontal-left:after {
  content: "";
  position: absolute;
  transform: translateY(calc( ( 0% - 0.5 * var(--circlesize)) - (1.0 * var(--timelinewidth) )));
  height: var(--circlesize);
  width: var(--circlesize);
  border: var(--timelinewidth) solid var(--timelinecolor);
  background: var(--timelinestopbackground) !important;
  border-radius: 50%;
}
body:not(.sqs-edit-mode.sqs-edit-mode-active) .horizontal-right:after,
body:not(.sqs-edit-mode.sqs-edit-mode-active) .horizontal-left:after {
  transition: all 0.1s ease-in-out;
}
.horizontal-right:before {
  left: calc( ( -0.5 * var(--timelinewidth)) );
}
.horizontal-right:after {
  left: calc(var(--timelinehorizontallinelength) - (var(--circlesize) / 2) - var(--timelinewidth));
}
.horizontal-left:before {
  right: calc( ( -0.5 * var(--timelinewidth)) ) !important;
  left: unset !important;
}
.horizontal-left:after {
  right: calc(var(--timelinehorizontallinelength) - (var(--circlesize) / 2) - var(--timelinewidth));
  left: unset !important;
}
@media screen and (max-width: 767px) {
  .horizontal-left:before,
  .horizontal-right:before {
    left: calc( ( -0.0 * var(--timelinewidth)) ) !important;
    right: unset !important;
  }
  .horizontal-left:after,
  .horizontal-right:after {
    left: calc(var(--timelinehorizontallinelength) - (var(--circlesize) / 2) - var(--timelinewidth) + 0.5px) !important;
    right: unset !important;
  }
}
.vertical-line-animated {
  background: var(--timelineanimatedcolor);
  will-change: height;
  z-index: 10000001999999999;
  display: block;
  width: var(--timelineanimatedwidth);
  position: relative;
  transform: translatex(calc(0.5px - var(--timelineanimatedwidth) * 0.5));
}
html.timeline-text-animations-enabled body:not(.sqs-edit-mode.sqs-edit-mode-active) .vertical-timeline-section .html-block:not(.code-block),
html.timeline-text-animations-enabled body:not(.sqs-edit-mode.sqs-edit-mode-active) section:has(.timeline-vertical) .html-block:not(.code-block) {
  transition: 0.3s all ease;
}
html.timeline-text-animations-enabled body:not(.sqs-edit-mode.sqs-edit-mode-active) .vertical-timeline-section .timeline-stop-activated.right-of-timeline.html-block:not(.code-block),
html.timeline-text-animations-enabled body:not(.sqs-edit-mode.sqs-edit-mode-active) section:has(.timeline-vertical) .timeline-stop-activated.right-of-timeline.html-block:not(.code-block) {
  transform: translate(var(--textblockanimationhorizontaldistance), 0px);
}
html.timeline-text-animations-enabled body:not(.sqs-edit-mode.sqs-edit-mode-active) .vertical-timeline-section .timeline-stop-activated.left-of-timeline.html-block:not(.code-block),
html.timeline-text-animations-enabled body:not(.sqs-edit-mode.sqs-edit-mode-active) section:has(.timeline-vertical) .timeline-stop-activated.left-of-timeline.html-block:not(.code-block) {
  transform: translate(calc(-1 * var(--textblockanimationhorizontaldistance)), 0px);
}
body:not(.sqs-edit-mode.sqs-edit-mode-active) .timeline-stop-activated {
  --circlesize: var(--timelineactivecirclesize);
  --timelinewidth: var(--timelineanimatedwidth);
}
body:not(.sqs-edit-mode.sqs-edit-mode-active) .timeline-stop-activated .horizontal-right:after,
body:not(.sqs-edit-mode.sqs-edit-mode-active) .timeline-stop-activated .horizontal-left:after {
  border: var(--timelinewidth) solid var(--timelineanimatedcolor) !important;
}
body:not(.sqs-edit-mode.sqs-edit-mode-active) .timeline-stop-activated .horizontal-right:before,
body:not(.sqs-edit-mode.sqs-edit-mode-active) .timeline-stop-activated .horizontal-left:before {
  background: var(--timelineanimatedcolor) !important;
  height: var(--timelinewidth);
}
body:not(.sqs-edit-mode.sqs-edit-mode-active) hr {
  transition: height var(--timelinetransition) ease;
}
body:not(.sqs-edit-mode.sqs-edit-mode-active) hr.timeline-stop-activated {
  height: var(--timelineanimatedwidth) !important;
}
/*-------------------------*\ 
# 📅 TIMELINE  CSS
\*-------------------------*/