
.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 130px;
  }
  
  .timeline::after {
    content: '';
    position: absolute;
    width: 2px;
    background-color: var(--color-primary);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
  }
  
  .timeline::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 11px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='14' viewBox='0 0 20 14' fill='none'%3E%3Cpath d='M1 12.9999L10 1.99988L19 12.9999' stroke='%23002185' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    top: 0;
    left: 50%;
    transform: translate(-11px, -2px);
  }
  
  .history-block .timeline .container {
    margin: 0;    
    width: 50%;
    position: relative;
    padding: 10px 40px;
  }
  

  .tl-container {
    padding: 0px 100px 20px 100px;
    position: relative;
    
    width: 50%;
  }
  
  .left {
    left: 0;
  }
  
  .right {
    left: 50%;
  }
  
  .left::before {
    content: " ";
    height: 2px;
    position: absolute;
    top: 16px;
    width: 100px;
    z-index: 1;
    right: 1px;
    background-color: var(--color-primary);
  }
  
  .right::before {
    content: "";
    height: 2px;
    position: absolute;
    top: 16px;
    width: 100px;
    z-index: 1;
    left: -1px;
    background-color: var(--color-primary);
  }
  
  .right .target_svg{
    position: absolute;
    top: 0px;
    left: 99px;
  }
  
  .left .target_svg{
    position: absolute;
    top: 0px;
    right: 100px;
  }
  
  
  .right::after {
    left: -16px;
  }
  
  .left .content {
    padding: 0px 60px 60px 0px;
    position: relative;
  }
  
  .right .content {
    padding: 0px 0px 60px 60px;
    position: relative;
  }

  .history-block .download_files_section {
    background-color: white !important;
  }

  .history-block .download_files_section:hover {
    background-color: rgb(194, 198, 202) !important;
    cursor: pointer !important;
  }
  
  @media screen and (max-width: 992px) {
    .timeline::after {
      left: 10px;
    }
  
    .tl-container{
      padding: 0px 0px 0px 30px;
      width: 100%;
    }
  
    .left .content {
      padding: 0px 0px 60px 60px;
      position: relative;
    }
  
    .right::before{
      left: 7px;
      width: 40px;
    }
  
    .right .target_svg, .left .target_svg{
      left: 35px;
    }
  
    .left::before {
      right: auto;
      left: 7px;
      width: 40px;
    }
  
    .timeline::before{
      left: 10px;
    }
  
  
    .container::before {
      left: 60px;
      border: medium solid white;
      border-width: 10px 10px 10px 0;
      border-color: transparent white transparent transparent;
    }
  
    .left::after, .right::after {
      left: 15px;
    }
  
    .right {
      left: 0%;
    }
  }