
.tl-detail {
    padding:3rem 0
   }
   #tl {
    margin-bottom:1rem
   }
   [class*=tl-fase-] p {
    margin:0;
    font-size:1.1rem;
    color:#fff;
    text-transform:uppercase;
    text-align:center
   }
   [class*=tl-fase-] {
    padding:1.6rem 0
   }
   .tl-fase-0 {
    background-color:#f93c2e !important;
   }
   
   .tl-fase-1 {
       background-color: FF5722 !important;
   }
   
   .tl-fase-2,
   .tl-fase-3,
   .tl-fase-4 {
    background-color:#FFC107 !important;
   }
   
   .tl-fase-5 {
    background-color:#4CAF50 !important;
   }
   
   /* .tl-list {
    border:1px solid #e5e5e5
   } */
   .tl-item {
    border-left:1px solid #e5e5e5;
    position:relative;
    padding:2rem 1.5rem .5rem 2.5rem;
    font-size:.9rem;
    margin-left:3rem;
    min-height:5rem
   }
   .tl-item:last-child {
    padding-bottom:4rem
   }
   .tl-item .tl-date {
    margin-bottom:.5rem
   }
   .tl-item .tl-date span {
    color:#888;
    font-size:85%;
    padding-left:.4rem
   }
   .tl-item .tl-content {
    padding:.5rem .8rem;
    background-color:#f4f4f4;
    border-radius:.5rem
   }
   .tl-item .tl-content span {
    display:block;
    color:#888;
    font-size:85%
   }
   .tl-item .tl-icon {
    line-height:1.2rem;
    position:absolute;
    left:-0.6rem;
    top: 3rem;
    width:1.2rem;
    height:1.2rem;
    text-align:center;
    border-radius:50%;
    font-size:1.1rem;
    background-color:#fff;
    color:#fff
   }
   .tl-item .tl-icon.status-fase-0 {
       background-color:#f93c2e;
       color:#f93c2e;
       border-color: #f93c2e;
   }
   .tl-item .tl-icon.status-fase-1 {
       background-color:#FF5722;
       color:#FF5722;
       border-color: #FF5722;
   }
   .tl-item .tl-icon.status-fase-2,
   .tl-item .tl-icon.status-fase-3,
   .tl-item .tl-icon.status-fase-4 {
       background-color:#FFC107;
       color:#FFC107;
       border-color: #FFC107;
   }
   
   .tl-item .tl-icon.status-fase-5 {
       background-color:#4CAF50;
       color:#4CAF50;
       border-color: #4CAF50;
   }
   
   .tl-item .tl-icon[class^=status-] {
    border-width: 1px;
    font-size:.6rem
   }
   @media(min-width:992px) {
    .tl-item {
     margin-left:13.5rem
    }
    .tl-item .tl-date {
     position:absolute;
     left:-13.5rem;
     width:10rem;
     text-align:right
    }
    .tl-item .tl-date span {
     display:block
    }
    .tl-item .tl-content {
     padding:0;
     background-color:transparent
    }
   }