/* timeline */

.timeline {
    background: linear-gradient(var(--bg-variant-color), var(--bg-color));  
    margin: 0;
    padding: 30px 20px;
    list-style: none;   
}  
.timeline-item {    
    background: var(--bg-color);  
    display: block;
    margin: 0 auto 20px auto;
    padding: 0;
    border-radius: 6px;
    border: var(--border-color) 1px solid;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.02), 0 3px 1px -2px rgba(0,0,0,0.05), 0 2px 5px 0 rgba(0,0,0,0.05);  
    position: relative;
}        
.timeline-item .h {     
    display: block;
    margin: 14px 30px 26px 78px;
    padding: 0;
}                   
.timeline-item .h img, 
.timeline-item .h i.mdi {     
    display: block;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 100%;
    position: absolute;
    top: 15px;     
    left: 15px;
}         
.timeline-item .h i.mdi {    
    background: var(--txt-color);
    color: var(--bg-color);
    text-align: center; 
    line-height: 48px;
    font-size: 36px;
}      
.timeline-item .h i.mdi-rss {    
    background: #FF8000;
    color: #FFF;
}     
.timeline-item .h i.mdi-twitter {    
    background: #1DA1F2;
    color: #FFF;
}                              
.timeline-item .h i.mdi-x,
.timeline-item .h i.mdi-twitter {    
    background: #000;
    color: #FFF;
}                         
.timeline-item .h .u,                
.timeline-item .h .d {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}                                    
.timeline-item .h .d {          
    font-size: 14px; 
    color: var(--fade-color);  
}                                   
.timeline-item .h .u a {    
    font-weight: 500;
    color: var(--primary-bg-color); 
    text-decoration: none; 
}                                   
.timeline-item .h .u a:hover {   
    color: var(--primary-variant-bg-color);     
    text-decoration: underline; 
}    
.timeline-item .h .u a[data-uid="2549"],       
.timeline-item .h .u a[data-uid="2549"]:hover { 
    color: #AD60B0;
}       
.timeline-item .h .si {
    background: var(--primary-bg-color);
    color: var(--primary-txt-color);
    font-size: 16px;
    position: absolute;
    left: 50px;
    top: 40px;
    display: block;
    width: 22px;
    height: 22px;
    line-height: 21px;
    text-align: center;
    z-index: 10;
    border-radius: 100%;
}               
.timeline-item .h .si img,
.timeline-item .h .si i.mdi {  
    background: transparent;
    color: inherit;
    display: block;
    width: 100%;
    height: 100%;     
    border: none;
    border-radius: 100%;
}                     
.timeline-item .h .si i.mdi {  
    font-size: inherit;
    line-height: inherit;
    top: 0 !important;     
    left: 0 !important;
}                     
.timeline-item .h .button {  
    position: absolute;
    top: 10px;     
    right: 10px; 
}             
.timeline-item .h .button i.mdi {  
    background: transparent;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    top: 0 !important;     
    left: 0 !important;  
    width: 100%;
    height: 100%;      
}             
.timeline-item a.c {    
    text-decoration: none;
}     
.timeline-item picture,
.timeline-item picture img {   
    display: block;
    margin: 0;
    padding: 0;  
}    
.timeline-item,
.timeline-item picture,
.timeline-item picture img {   
    width: 600px;
}                      
.timeline-item picture img {   
    height: 300px;           
    object-fit: cover;
}        
.timeline-item picture {
    margin-bottom: 10px;
}                   
.timeline-item strong { 
    color: var(--txt-color);   
    font-size: 20px;
    font-weight: 400;
    line-height: 25px;
    margin: 0 20px 12px 20px;
    display: block;
    display: -webkit-box !important;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}              
.timeline-item a.c:hover strong { 
    color: var(--hover-color);  
}                                         
.timeline-item em { 
    color: var(--fade-color);   
    font-size: 14px; 
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin: -7px 20px 12px 20px;
    display: block;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}                                       
.timeline-item em p { 
    margin-top: 10px;
    margin-bottom: 10px;
}                                  
.timeline-item em p:first-child { 
    padding-top: 0;
    margin-top: 0;
}            
.timeline-item .f {     
    display: block;   
    border-top: var(--border-color) 1px solid;
    padding: 17px 20px;
    margin: 0;
    min-height: 36px;
}          
.timeline-item .f .button-primary {     
    float: right;
}   
.timeline-item .links {     
    display: flex;
    margin: 0 20px 20px 20px;
    padding: 0;
    list-style: none;
    flex-direction: column;
    gap: 10px;

} 
.timeline-item .links li {   
    margin: 0;
    padding: 0;
} 
.timeline-item .links li a {   
    display: flex;
    text-decoration: none;
    border-radius: 6px;
    border: var(--border-color) 1px solid;
    overflow:  hidden;  
    align-items: center;
} 
.timeline-item .links li a:hover {   
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.02), 0 3px 1px -2px rgba(0,0,0,0.05), 0 2px 5px 0 rgba(0,0,0,0.05);
} 
.timeline-item .links li a span span {
    display: -webkit-box;  
    line-clamp: 5;  
    -webkit-line-clamp: 5;  
    -webkit-box-orient:  vertical;  
    overflow:  hidden;  
    text-overflow: ellipsis;
    margin: 20px;
}
.timeline-item .links li a em {
    font-size: 12px;
    line-height: 18px;
}
.timeline-item .links li a strong {
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    margin: 0 0 8px 0;
}
.timeline-item .links li a i,
.timeline-item .links li a img {
    display: block;
    min-width: 150px;
    width: 150px;
    align-self: stretch;
    object-fit: cover;
}
.timeline-item .links li a i {
    background-color: var(--fade-color);
    text-align: center;
    font-size: 80px;
    height: 150px;
    line-height: 150px;
}
       
.timeline-item.timeline-item-intranet_post picture {
    margin-bottom: 15px;
}          
.timeline-item.timeline-item-intranet_post picture img {   
    height: auto;    
}     
.timeline-item.timeline-item-intranet_post strong {  
    display: block !important;
    font-size: 25px;
    font-weight: 400;
    line-height: 30px;
    margin-bottom: 20px;
    line-clamp: initial;
    -webkit-line-clamp: initial;
    overflow: unset;
}   
.timeline-item.timeline-item-intranet_post em {  
    color: var(--txt-color);   
    font-size: 16px; 
    line-height: 22px;
    display: inline;
    line-clamp: initial;
    -webkit-line-clamp: initial;
    overflow: unset;
    margin: 0;
}    
.timeline-item.timeline-item-intranet_post div.th {  
    overflow: hidden;
    margin: 0 20px;
    height: 0;
}   
.timeline-item.timeline-item-intranet_post div.t {  
    display: -webkit-box;
    line-clamp: 5;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: -7px 20px 20px 20px;
}   
.timeline-item.timeline-item-intranet_post div.t strong {
    display: inline !important;
    font-size: inherit;
    font-weight: 700;
    line-height: unset;
    margin: 0;
}
.timeline-item.timeline-item-intranet_post.expand div.t {  
    display: block;
    line-clamp: initial;
    -webkit-line-clamp: initial;
    overflow: unset;
}   
.timeline-item.timeline-item-intranet_post.expand div.t img {  
    max-width: 100%;
    min-width: 200px;
    display: block;
    height: auto;
    margin: 20px 0;
    border-radius: 6px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.02), 0 3px 1px -2px rgba(0,0,0,0.05), 0 2px 5px 0 rgba(0,0,0,0.05);
}   
.timeline-item.timeline-item-intranet_post div.m {  
    display: none;
    text-align: right;
    margin: -10px 20px 20px 20px;
}   
.timeline-item.timeline-item-intranet_post.cut div.m {  
    display: block;    
}  
.timeline-item.timeline-item-intranet_post.cut div.m span {  
    color: var(--primary-variant-bg-color);
    text-decoration: underline;
    text-transform: lowercase;
}   
.timeline-item.timeline-item-intranet_post.cut div.m span:hover {  
    color: var(--primary-bg-color);
}  
.timeline-item.timeline-item-intranet_post.cut strong,
.timeline-item.timeline-item-intranet_post.cut em, 
.timeline-item.timeline-item-intranet_post.cut div.m span {  
    cursor: pointer;
}   

.timeline-arrows-bar {     
    padding-top: 0;
    border: none;
    text-align: center;
}                                  

.workspace-timelines {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    align-content: center;
}
.workspace-timelines .category-column {
    width: 400px;
    box-sizing: border-box;
    transition: width 0.2s ease-in-out;
}
.workspace-timelines.thin-view .category-column {
    width: 300px;
    box-sizing: border-box;
}
.workspace-timelines .category-column ul {
    box-sizing: border-box;
}
.workspace-timelines .timeline {
    padding: 10px 0 10px 10px;
}         
.workspace-timelines .timeline-item {
    margin-bottom: 10px;
}                        
.workspace-timelines .timeline-item,
.workspace-timelines .timeline-item picture,
.workspace-timelines .timeline-item picture img {
    width: 100%;
}               
.workspace-timelines .timeline-item picture,
.workspace-timelines .timeline-item picture img {
    height: auto;
}                      
.workspace-timelines.no-leads .timeline-item em,
.workspace-timelines.no-images .timeline-item picture img {
    display: none;
} 
.workspace-timelines .timeline-item .f {
    display:none !important;
} 
.workspace-timelines .timeline,
.workspace-timelines .timeline-arrows-bar {
    background: transparent;
}
.workspace-timelines .timeline-item em,
.workspace-timelines .timeline-item strong {  
    margin-left: 20px;  
    margin-right: 20px;
}     
.workspace-timelines .timeline-item em {  
    line-clamp: 15;
    -webkit-line-clamp: 15;
    transition: all 0.2s linear;
}
.workspace-timelines .timeline-item strong {  
    line-clamp: 5;
    -webkit-line-clamp: 5;
}                
.workspace-timelines .timeline-item em:hover {  
    color: var(--txt-color);
}     
.workspace-timelines .timeline-item .h {
    margin: 15px 20px 15px 78px;
}
.workspace-timelines .timeline-item .h img,
.workspace-timelines .timeline-item .h i.mdi {
    top: 10px;
    object-fit: scale-down;
}
.workspace-timelines .timeline-arrows-bar {
    padding-top: 15px;
}

.workspace-timelines .scroll-column {
    overflow-x: hidden;
    overflow-y: scroll;
    flex:1;
    flex-shrink: 0;
    background: var(--bg-variant-color);
    scrollbar-color: var(--nav-scrollbar-thumb-color) var(--nav-scrollbar-color);
    scrollbar-width: thin;
}
.workspace-timelines .category-name {
    text-decoration: none;
}
.workspace-timelines .category-column,
.workspace-timelines .category-placeholder {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: center;
    padding: 0;
}               
.workspace-timelines .category-column.ui-sortable-helper {
    opacity: 0.90;          
    border: var(--border-color) 1px solid;
    box-shadow: 0 -5px 12px 0 rgba(0,0,0,0.14), 0 -3px 1px -2px rgba(0,0,0,0.12);
}     
.workspace-timelines .category-placeholder {       
    background-color: var(--bg-variant-color-50a);
}                                           
.workspace-timelines .category-header {     
    background-color: var(--bg-color);
    line-height: 41px;
    position: relative;
    padding: 5px 21px;
    font-size: 20px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.02), 0 3px 1px -2px rgba(0, 0, 0, 0.05), 0 2px 5px 0 rgba(0, 0, 0, 0.05);
    overflow: hidden;
    box-sizing: border-box;
    z-index: 20;    
    cursor: move;
}    
.workspace-timelines .category-header::after {
    color: inherit;
    display: block;
    content: "\1392";
    right: 5px;
    width: 30px;
    height: 30px;
    line-height: 27px;
    text-align: center;
    transition: all 0.2s ease-in-out;
    padding: 0;
    display: block;
    font-weight: 400;
    font-size: 22px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.2s linear;    
    z-index: 10;
}   
.workspace-timelines .category-header:hover::after {
    transform: translateY(-50%) rotate(90deg);
}                     
.workspace-timelines .category-header strong {    
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 95%;
    display: block;
}                     
.workspace-timelines .category-header strong:hover {    
    color: var(--hover-color);
}
.workspace-timelines .category-header .buttons {   
    background: var(--bg-color);
    display: block;   
    position: absolute;              
    top: 4px;
    right: 30px;
    width: 0;
    bottom: 0;
    z-index: 2;
    opacity: 0;
}
.workspace-timelines .category-header:hover .buttons {
    width: 145px;
    opacity: 1;
    box-shadow: -25px 0 30px var(--bg-color);
}
.workspace-timelines .category-header .buttons .button {
    display: none;
}
.workspace-timelines .category-header:hover .buttons .button {
    display: inline-block;
}

.workspace-timelines.thin-view .category-column {
    width: 300px;
    box-sizing: border-box;
}
.workspace-timelines.thin-view .timeline-item .h {
    margin: 10px 20px 10px 60px;
}
.workspace-timelines.thin-view .timeline-item .h img, 
.workspace-timelines.thin-view .timeline-item .h i.mdi {
    top: 12px;
    width: 32px;
    height: 32px;
}

@media (max-width: 640px) {    
    .timeline {
        padding: 20px 20px;
    }  
    .timeline-item, 
    .timeline-item picture, 
    .timeline-item picture img {
        width: 100%;
    }
}      
@media (max-width: 480px) {      
    .timeline {
        padding: 10px;
    }    
    .timeline-item {
        margin-bottom: 10px;
    }                  
    .timeline-item .h {
        margin-right: 20px;
    }
    .timeline-item .f {
        padding-left: 15px;
        padding-right: 15px;
    } 
    .timeline-item em,
    .timeline-item strong {
        margin-left: 20px;
        margin-right: 20px;
    }
    .timeline-item picture, 
    .timeline-item picture img {
        height: 250px;
    }               
    .timeline-arrows-bar {     
        padding: 20px 0 20px 20px;
        border: none;
        text-align: right;
    }   
}                  
@media (max-width: 380px) {
    .timeline-item .h {
        margin: 8px 20px 6px 68px;
        font-size: 14px;
        line-height: 18px;
    }                   
    .timeline-item .h .u a {
        font-size: 16px;
        display: block;
    }
    .timeline-item .h img {
        top: 10px;
        left: 10px;
    }               
    .timeline-item strong {
        color: var(--hover-color);
        font-size: 16px;
        line-height: 26px;
        line-height: 20px;
    }   
    .timeline-item em {
        font-size: 12px;
        line-height: 18px;
        line-clamp: 2;
        -webkit-line-clamp: 2;
    }      
    .timeline-item picture, 
    .timeline-item picture img {
        height: 200px;
    }
}