// >>-- 41 Timeline css --<<
.app-timeline-box {

  position: relative;
  padding: 12px;

  .timeline-section {
    position: relative;
    display: flex;
    border-left: 2px dotted rgb(var(--dark), 0.1);
    padding-bottom: 2rem;

    &:last-child {
      border-left: 0;
      padding-bottom: 0;
    }

    .timeline-icon {
      position: absolute;
      top: 0px;
      left: -17px;
      background-color: rgba(var(--white),1);
    }

    .timeline-content {
      width: 100%;
      padding: 10px;
      border-radius: var(--app-border-radius);
      margin-left: 30px;
    }

  }
}

.app-side-timeline {
  position: relative;
  .side-timeline-section {
    display: flex;
    position: relative;
    padding-bottom: 2rem;
    width: 50%;
    
    &:last-child {
      border-left: 0;
    }

    .timeline-content {
      width: 100%;
      padding: 10px;
      border-radius: 10px;
      p {
        color: rgb(var(--dark), 0.75);
        font-weight: 500;
        line-break: anywhere;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }

    .side-timeline-icon {
      position: absolute;
      background-color: rgba(var(--white),1);
    }

    &.right-side {
      border-left: 2px dotted rgb(var(--dark), 0.1);
      margin-left: auto;

      .side-timeline-icon {
        left: -13px;
      }

      .timeline-content {
        margin-left: 30px;
      }
    }

    &.left-side {
      border-right: 2px dotted rgb(var(--dark), 0.1);

      .side-timeline-icon {
        right: -13px;
      }

      .timeline-content {
        margin-right: 30px;
      }
    }
  }
}

// -----------timeline-3-start----------

.timeline-horizontal {
  .main-timeline-section {
    position: relative;
    width: 100%;
    height: 340px;

    .conference-timeline-content {
      div:nth-child(3) {
        z-index: 1111;  
        background: rgba(var(--white),1);
        position: absolute;
        right: 0px;
        bottom: 151px;
        height: 39px;
        width: 46px;
      }

      .draggable {
        height: 340px;
      }

      .fa-arrow-left {
        left: 1px;
        // @extend %arrow;
      }

      .fa-arrow-right {
        right: 1px;
        // @extend %arrow;
      }
    }

    .conference-center-line {
      margin-left: 45px;
      position: absolute;
      width: 94%;
      height: 1px;
      top: 50%;
      transform: translateY(-50%);
      border: 1px solid rgb(var(--secondary), 0.5);
    }

    .timeline-article {
      position: relative;
      min-height: 300px;

      .content-box {
        position: absolute;
        left: 40px;
        box-shadow: none;

        &.content-box-bottom {
          bottom: -30px;
        }

        &.content-box-top {
          top: 30px;
        }
      }

      .meta-date {
        position: absolute;
        top: 50%;
        left: 237px;
        border-radius: 50%;
        background: rgba(var(--white),1);
      }
    }
  }

  .slick-prev:before {
    content: "←";
  }

  .timeline-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    width: auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0px;
  }

  .slick-prev,
  .slick-next {
    top: 168px;
  }

  .slick-prev:before,
  .slick-next:before {
    font-family: "slick";
    font-size: 32px;
  }

  .slick-prev:before,
  .slick-next:before {
    color: rgb(var(--primary), 1);
  }

  .slick-prev {
    z-index: 10;
    left: 6px;
  }

  .slick-next {
    top: 167px;
    right: 12px;
  }
}

%arrow {
  position: absolute;
  top: 50%;
  font-size: 18px;
  transform: translateY(-50%);
  background-color: rgb(var(--primary), 0.1);
  color: rgb(var(--primary), 1);
  padding: 10px;
  border-radius: 10px;
  z-index: 11;
}

.timeline-horizontal {
  .main-timeline-section {
    position: relative;
    width: 100%;
    height: 340px;

    .conference-timeline-content {
      div:nth-child(3) {
        z-index: 1111;
        background: rgba(var(--white),1);
        position: absolute;
        right: 0px;
        bottom: 151px;
        height: 39px;
        width: 46px;
      }

      .draggable {
        height: 340px;
      }

      .fa-arrow-left {
        left: 1px;
        @extend %arrow;
      }

      .fa-arrow-right {
        right: 1px;
        @extend %arrow;
      }
    }

    .conference-center-line {
      margin-left: 45px;
      position: absolute;
      width: 94%;
      height: 1px;
      top: 50%;
      transform: translateY(-50%);
      border: 1px solid rgb(var(--secondary), 0.5);
    }

    .timeline-article {
      position: relative;
      min-height: 300px;

      .content-box {
        position: absolute;
        left: 40px;
        box-shadow: none;

        &.content-box-bottom {
          bottom: -30px;
        }

        &.content-box-top {
          top: 30px;
        }
      }

      .meta-date {
        position: absolute;
        top: 50%;
        left: 237px;
        border-radius: 50%;
        background: rgba(var(--white),1);
      }
    }
  }

  .slick-prev:before {
    content: "←";
  }

  .timeline-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    width: auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0px;
  }

  .slick-prev,
  .slick-next {
    top: 168px;
  }

  .slick-prev:before,
  .slick-next:before {
    font-family: "slick";
    font-size: 32px;
  }

  .slick-prev:before,
  .slick-next:before {
    color: rgb(var(--primary), 1);
  }

  .slick-prev {
    z-index: 10;
    left: 6px;
  }

  .slick-next {
    top: 167px;
    right: 12px;
  }
}

// -----------timeline-3-end------------

// >>-- 41 Timeline css end --<<