.widget-timeline{
.timeline {
    list-style: none;
    padding: 8px 0 8px;
    position: relative;
    &:before {
      top: 20px;
      bottom: 0;
      position: absolute;
      content: " ";
      width: 2px;
      left: 25px;
      margin-right: -1.5px;
      background: #f5f5f5;

      @at-root [direction="rtl"] #{&} {
        left: auto;
        right: 25px;
        margin-right: auto;
        margin-left: -1.5px;
      }
    }
    > li {
      margin-bottom: 3px;
      position: relative;
      &:before {
        content: " ";
        display: table;
      }
      &:after {
        content: " ";
        display: table;
        clear: both;
      }
      > {
        .timeline-panel {
          width: calc(100% - 35px);
          float: right;
          border-radius: 2px;
          padding: 5px 20px;
          position: relative;

          @at-root [direction="rtl"] #{&} {
            float: left;
          }

        }
        .timeline-badge {
            border-radius: 50%;
            height: 15px;
            left: 19px;
            position: absolute;
            top: 10px;
            width: 15px;

            @at-root [direction="rtl"] #{&} {
              left: auto;
              right: 19px;
            }
        }
      }
    }
  }
  
  .timeline-body > p {
    font-size: 12px;
  }
  
  .timeline-badge {
    &.primary {
      background-color: $primary !important;
    }
    &.success {
      background-color: $success !important;
    }
    &.warning {
      background-color: $warning !important;
    }
    &.danger {
      background-color: $danger !important;
    }
    &.info {
      background-color: $info !important;
    }
    &.dark {
      background-color: $dark !important;
    }
  }
}