/* The actual timeline (the vertical ruler) */
.history-pipeline .main-timeline {
  position: relative;
}

/* The actual timeline (the vertical ruler) */
.history-pipeline .main-timeline::before {
  content: '';
  /*background: linear-gradient(180deg, rgba(34,74,129,1) 0%,  rgba(34,74,129,1) 70%, rgba(255,255,255,1) 100%);*/
  background-image: url(/wp-content/themes/ipsen-main/dist/images/start.png);
  position: absolute;
  width: 20px;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -8px;
}
.history-pipeline .main-timeline::after {
  content: '';
  background-image: url(/wp-content/themes/ipsen-main/dist/images/start.png);
  position: absolute;
  width: 20px;
  height: 101%;
  background-size: 100%;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -8px;
  background-repeat: no-repeat;
  background-position-y: bottom;
}

/* Container around content */
.history-pipeline .timeline,
.history-pipeline .custom-year-right,
.history-pipeline .custom-year-left{
  position: relative;
  background-color: inherit;
  width: 50%;
}
.history-pipeline .timeline{
  margin-bottom:40px;
}
/* Place the container to the left */
.history-pipeline .left-2 {
  padding: 0px 40px 20px 0px;
  left: 8px;
}

/* Place the container to the right */
.history-pipeline .right-2 {
  padding: 0px 0px 20px 40px;
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.history-pipeline .left-2::before {
  content: " ";
  position: absolute;
  top: 18px;
  z-index: 1;
  right: 30px;
  border: medium solid #C4C9CB;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #C4C9CB;
}
.history-pipeline .left-2::after {
  content: " ";
  position: absolute;
  top: 18px;
  z-index: 1;
  right: 30px;
  border: medium solid #fff;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #fff;
}

/* Add arrows to the right container (pointing left) */
.history-pipeline .right-2::before {
  content: " ";
  position: absolute;
  top: 18px;
  z-index: 1;
  left: 30px;
  border: medium solid #C4C9CB;
  border-width: 10px 10px 10px 0;
  border-color: transparent #C4C9CB transparent transparent;
}
.history-pipeline .right-2::after {
  content: " ";
  position: absolute;
  top: 18px;
  z-index: 1;
  left: 30px;
  border: medium solid #fff;
  border-width: 10px 10px 10px 0;
  border-color: transparent #fff transparent transparent;
}
/* Fix the circle for containers on the right side */
.history-pipeline .right-2::after {
  left: -14px;
}

.history-pipeline .card-history {
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #EDEBE4;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0px 4px 8px 0px #EDEBE4;
}
.history-pipeline .card-body{
  padding:  0 !important;
}
.history-pipeline .main-timeline h3{
  margin-bottom:0;
  font-size: 20px;
  line-height: 24px;
  font-family: 'Rethinksans-bold';
  font-weight: 700;
}
.history-pipeline .custom-year-right {
      width: fit-content !important;
      padding: 20px 24px;
      background: #000E56;
      border-radius: 8px;
      margin-left: 25px;
      margin-bottom: 20px;
      color: #fff;
      position: relative;
  }
  .history-pipeline .custom-year-left {
      width: fit-content !important;
      padding: 20px 24px;
      background: #000E56;
      border-radius: 8px;
      margin-left: 25px;
      margin-bottom: 20px;
      color: #fff;
      position: relative;
  }
  .history-pipeline .custom-year-right::before {
      content: " ";
      position: absolute;
      top: 22px;
      z-index: 1;
      right: auto;
      left: -12px;
      border: medium solid #000E56;
      border-width: 10px 12px 10px 0;
      border-color: transparent #000E56 transparent transparent;
  }
  .history-pipeline .custom-year-left::before {
      content: " ";
      position: absolute;
      top: 22px;
      z-index: 1;
      right: auto;
      left: -12px;
      border: medium solid #000E56;
      border-width: 10px 12px 10px 0;
      border-color: transparent #000E56 transparent transparent;
  }
  .history-pipeline .timeline-filter {
      margin: 20px 0 50px;
      font-family: 'RethinkSans-Regular';
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      line-height: 20px;
      position: relative;
      color: #000E56;
  }
  #period:focus-visible{
    outline: 1.5px solid #000E56;
  }

  .history-pipeline .timeline-filter select {
      width: 80%;
      font-family: 'RethinkSans-Regular';
      font-weight: 400;
      font-size: 16px;
      line-height: 20px;
      color: #000E56;
      padding: 15px;
      border: 1px solid #000E56;
      border-radius: 8px;
      max-width: 250px;
      cursor: pointer;
      margin-left:15px;
      background-color: #fff;
  }
  .history-pipeline .timeline-filter::after {
    content:"";
    background: url(/wp-content/themes/ipsen-main/dist/images/Downwards_Arrow_New.png);
    width: 10px;
    height: 10px;
    top: 40%;
    position: absolute;
    display: inline-block;
    z-index: 100;
    right: unset;
    cursor: pointer;
    background-size: 100%;
    background-repeat: no-repeat;
    left: 290px;
    bottom: 1.5em;
  }
  /* China Site History page Unique css added */
  .china-history-page .history-pipeline .timeline-filter::after{
    left: 275px;
  }

  .siteId-10 .history-pipeline .timeline-filter:lang(el)::after {
    left: 370px;
  }

  .history-pipeline .timeline-filter:hover::after {
    content: "";
    background: url(/wp-content/themes/ipsen-main/dist/images/Downwards_Arrow_New.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 10px;
    height: 10px;
  }
  .history-pipeline .timeline-filter.open::after{
    content:"";
    background: url(/wp-content/themes/ipsen-main/dist/images/Downwards_Arrow_New.png);
    transform:rotate(180deg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 10px;
    height: 10px;
  }
  .history-pipeline .loader,
  .history-pipeline .loader-more {
      font-family:'RethinkSans-Regular';
      color: #000E56;
      font-size:16px;
      line-height:20px;
  }
  .history-pipeline .loader-img {
    animation: spin 2s linear infinite;
  }
  .history-pipeline .card-history img{
    border-radius:8px;
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 991px) {
  /* Place the timelime to the left */
  .history-pipeline .main-timeline::before,
  .history-pipeline .main-timeline::after{
    left: 5px;
  }

  /* Full-width containers */
  .history-pipeline .timeline,
  .history-pipeline .custom-year-right,
  .history-pipeline .custom-year-left{
    width: 100%;
    padding-left: 25px;
    padding-right: 25px;
    left: 8px;
  }

  /* Make sure that all arrows are pointing leftwards */
  .history-pipeline .timeline::before {
    left: 14px;
    border: medium solid white;
    border-width: 10px 11px 10px 0;
    border-color: transparent #C4C9CB transparent transparent;
  }
  .history-pipeline .timeline::after {
    left: 14px;
    border: medium solid white;
    border-width: 10px 12px 10px 0;
    border-color: transparent white transparent transparent;
    right: auto;
  }

  /* Make sure all circles are at the same spot */
  .history-pipeline .left-2::after,
  .history-pipeline .right-2::after {
    left: 15px;
  }

  .history-pipeline .left-2::before {
    right: auto;
  }

  /* Make all right containers behave like the left ones */
  
  /* Make sure all circles are at the same spot */
  .history-pipeline .custom-year-left::after,
  .history-pipeline .custom-year-right::after {
    left: 18px;
  }

  .history-pipeline .custom-year-left::before {
    right: auto;
  }

}

@media screen and (min-width: 768px) {
  .history-pipeline .card-history{
    display:flex;
    flex-flow: row;
    gap: 30px;
    align-items: start;
  }
  .history-pipeline .card-history img,
  .history-pipeline .card-history .card-body{
    width: 50%;
    object-fit: contain;
  }


}
@media screen and (min-width: 991px) {
  .history-pipeline .custom-year-right{
    left:50%;
    position:absolute;
  }
  .history-pipeline .custom-year-left{
    right: calc( 50% + 20px);
    position:absolute;
  }
  .history-pipeline .custom-year-left::before{
    transform: rotate(180deg);
    left: auto;
    right: -11px;
  }
  .history-pipeline .custom-year-right::before {
    left: -11px;
  }
  .history-pipeline .left-2{
    padding-right: 17px;
    left: 0;
  }
  .history-pipeline .right-2{
    padding-left: 25px;
  }
  .history-pipeline .left-2::before{
    right: 8px;
    top: 22px;
  }
  .history-pipeline .left-2::after{
    right: 9px;
    top: 22px;
  }
  .history-pipeline .right-2::before{
    left: 16px;
    top: 22px;
  }
  .history-pipeline .right-2::after {
    left: 17px;
    top: 22px;
}
}

@media only screen and (min-width: 360px) and (max-width: 767px){
    .siteId-10 .history-pipeline .timeline-filter::after {  
      left: 240px !important; 
  }
  }

  .history-pipeline .history-title {
    margin-bottom:45px;
  }

  .far.fa-clock, h5{
    margin-bottom:0px;
  }