.card.card-timeline{

.card-body {
  padding-left: 0;
  padding-right: 0;
}
  .timeline {
      list-style: none;
      padding: 20px 0 20px;
      position: relative;

      &:before {
          top: 0;
          bottom: 0;
          position: absolute;
          content: " ";
          width: 3px;
          background-color: $black;
          left: 50%;
          margin-left: -1.5px;
      }

      .timeline-footer {
        .btn{
          margin: 0;

          &.dropdown-toggle {
            i {
              top: -1px;
              left: 10px;
            }

            &:after {
              margin-left: 20px !important;
            }
          }
        }
      }

      h6{
          color: rgba($white,0.8);
          font-weight: 400;
          margin: 10px 0px 0px;
      }

      &.timeline-simple {

          &:before {
              left: 5%;
          }

          > li > .timeline-panel {
              width: 86%;
          }

          > li > .timeline-badge {
              left: 5%;
          }
      }

      > li {
          margin-bottom: 20px;
          position: relative;

          &:before,
          &:after {
              content: " ";
              display: table;
          }

          &:after {
              clear: both;
          }

      }

      > li > .timeline-panel {
          background: $card-black-background;
          width: 45%;
          float: left;
          padding: 20px;
          border-radius: $border-radius-sm;
          box-shadow: 0 1px 20px 0px rgba(0, 0, 0, 0.1);
          color: $black;
          margin-bottom: 20px;
          position: relative;

          &:before {
              position: absolute;
              top: 26px;
              right: -15px;
              display: inline-block;
              border-top: 15px solid transparent;
              border-left: 15px solid $black;
              border-right: 0 solid $black;
              border-bottom: 15px solid transparent;
              content: " ";
          }

          &:after {
              position: absolute;
              top: 27px;
              right: -14px;
              display: inline-block;
              border-top: 14px solid transparent;
              border-left: 14px solid $card-black-background;
              border-right: 0 solid $card-black-background;
              border-bottom: 14px solid transparent;
              content: " ";
          }

          &.timeline-panel-white{
            background: $white;
            .timeline-body p{
              color: $black-states;
            }

            &:after, &:before{
              border-right-color: $white;
              border-left-color: $white;
            }
          }
      }

      > li > .timeline-badge {
          color: $white;
          width: 50px;
          height: 50px;
          line-height: 51px;
          font-size: 1.4em;
          text-align: center;
          position: absolute;
          top: 16px;
          left: 50%;
          margin-left: -25px;
          background-color: $dark-gray;
          z-index: 100;
          border-top-right-radius: 50%;
          border-top-left-radius: 50%;
          border-bottom-right-radius: 50%;
          border-bottom-left-radius: 50%;

          [class^="ti-"],
          [class*=" ti-"]{
              line-height: inherit;
          }

          .tim-icons{
            width: 25px;
            height: 21px;
            text-align: center;
          }
      }

      > li.timeline-inverted > .timeline-panel {
          float: right;

          &:before {
              border-left-width: 0;
              border-right-width: 15px;
              left: -15px;
              right: auto;
          }

          &:after {
              border-left-width: 0;
              border-right-width: 14px;
              left: -14px;
              right: auto;
          }

      }

  }
  .timeline-heading{
      margin-bottom: 15px;
  }
  .timeline-badge.primary {
    background-color: $info !important;
  }
  .timeline-badge.info {
    background-color: $info !important;
  }

  .timeline-badge.success {
    background-color: darken($success,10%) !important;
  }

  .timeline-badge.warning {
    background-color: $warning !important;
  }

  .timeline-badge.danger {
    background-color: $danger !important;
  }

  .timeline-title {
    margin-top: 0;
    color: inherit;
  }

  .timeline-body > p,
  .timeline-body > ul {
    margin-bottom: 0;
    color: $white;
  }

  .timeline-body > p + p {
    margin-top: 5px;
  }

}

@include media-breakpoint-down(sm){

.card.card-timeline {
  .timeline {
      &:before {
        left: 5%;
      }

      > li > .timeline-badge {
          left: 5%;
      }

      > li > .timeline-panel{
          float: right;
          width: 83% !important;

          &:before{
              border-left-width: 0;
              border-right-width: 15px;
              left: -15px;
              right: auto;
          }

          &:after{
              border-left-width: 0;
              border-right-width: 14px;
              left: -14px;
              right: auto;
          }
      }
  }
}

}