/* ================================================= */
/* Admin Timeline */
/* ================================================= */


.timeline-container {
    overflow-x: scroll;
    height: 600px;
}
.timeline-container ul,
.timeline-container li {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

.timeline-container .timeline 
{    
    position: relative;
    margin: 300px auto 0 auto;
    height: 3px;
    background: none repeat scroll 0 0 #EEEEEE;
    border: 2px solid #DEDEDE;
    box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.timeline li.timeline-handelsedate {
    position: absolute;
    margin-left: 20px; /* Förskjut alla punkter lite */
}

    .timeline li.timeline-handelsedate > a {
        text-decoration: none;
        position: absolute;
        top: -4px;
        left: -7px; /* 9/2 (width) + 2*1 (border) roundedup */
        height: 9px;
        width: 9px;
        border: 1px solid #FFFFFF;
        /*box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);*/
        outline: none;
        z-index: 10;
    }
    .timeline li.timeline-handelsedate > a.hover,
    .timeline li.timeline-handelsedate > a:hover {
        /*border: 1px solid #666666; */
        /*box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);*/
    }
    .timeline li.timeline-handelsedate > a.timeline-handelsedatetyp-main { background-color: #FFFFFF; border-color: #00AA00; } /* #00EE00 */
    .timeline li.timeline-handelsedate > a.timeline-handelsedatetyp-sub  
    {
        background-color: #FFFFFF; /* #5EA4FF */
        border-color: #FF8400;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    .timeline li.timeline-handelsedate > a.timeline-handelsedatetyp-allmain { background-color: #00AA00; border-color: #FFFFFF; } /* #008800 */
    .timeline li.timeline-handelsedate > a.timeline-handelsedatetyp-allsub  
    {
        background-color: #FF8400; /* #0000EE */
        border-color: #FFFFFF;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    .timeline li.timeline-handelsedate a.timeline-handelsedatetyp-mixed {
        /*background-color: #00E1FF; 
        border-color: #FFFFFF;*/
        border-right: 6px solid rgba(0, 0, 0, 0);
        border-bottom: 10px solid #00E1FF;
        border-left: 6px solid rgba(0, 0, 0, 0);
        top: -5px;
        width: 0px;
        height: 0px;
    } 
    
     /*#diamond {width: 0; height: 0; border: 50px solid transparent; border-bottom-color: red; position: relative; top: -50px; } 
     #diamond:after { content: ''; position: absolute; left: -50px; top: 50px; width: 0; height: 0; border: 50px solid transparent; border-top-color: red; }*/

    .timeline li.timeline-handelsedate .timeline-pop-date 
    {
        position: absolute;
        font-size: 10px;
        text-align: center;
        bottom: 10px;
        left: -17px;
        width: 30px;
        display: none;
    }
    
    .timeline li.timeline-handelsedate .timeline-handelsedate-content {
        display: none;
        position: absolute;
        bottom: 40px;
        left: -2px; /* border*2 */
        border: 1px solid #AAAAAA;
        background-color: #FFFFFF;
        box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);
        z-index: 10;
    }
    .timeline li.timeline-handelsedate .timeline-handelsedate-content:after {
        border-right: 10px solid transparent;
        border-top: 10px solid #AAAAAA;
        bottom: -10px;
        content: "";
        display: inline-block;
        height: 0;
        left: -1px;
        position: absolute;
        width: 0;
    }
    
        .timeline .timeline-handelsedate-content ul.timeline-handelserfordate {
            width: 300px;
        }
        
            .timeline ul.timeline-handelserfordate li.timeline-handelse {
                display: block;
                border-bottom: 1px dashed #AAAAAA;
            }
            .timeline ul.timeline-handelserfordate li.timeline-handelse:last-child {
                border-bottom: none;
            }
                .timeline li.timeline-handelse .timeline-handelse-opencontainer {
                    position: relative;
                    display: block;
                }
                .timeline li.timeline-handelse a.timeline-handelse-open {
                    display: none;
                    position: absolute;
                    right: -19px;
                    top: -1px;
                    border-width: 1px 1px 1px 0;
                    border-style: solid;
                    border-color: #AAAAAA;
                    border-radius: 0 3px 3px 0;
                    background-color: #FFFFFF;
                }
                .timeline li.timeline-handelse.selected a.timeline-handelse-open, .timeline li.timeline-handelse:hover a.timeline-handelse-open { display:block; }
                .timeline li.timeline-handelse.selected a.timeline-handelse-open, .timeline li.timeline-handelse a.timeline-handelse-open:hover { background-color: #EEEEEE; }
                .timeline li.timeline-handelse a.timeline-handelse-open:hover { text-decoration: none; }
                    .timeline li.timeline-handelse a.timeline-handelse-open i { margin: 0; }
                
                .timeline li.timeline-handelse > a.timeline-handelse-select {
                    display: block;
                    padding: 5px;
                    text-decoration: none;
                    outline: none;
                    /*position: relative;*/
                }
                .timeline li.timeline-handelse.selected > a, .timeline li.timeline-handelse > a:hover { background-color: #EEEEEE; }
                .timeline li.timeline-handelse > a.timeline-handelsetyp-main {  }
                .timeline li.timeline-handelse > a.timeline-handelsetyp-sub {  }
                
                    .timeline li.timeline-handelse > a h4 {
                        display: block;
                        line-height: 16px;
                        margin: 0 0 4px 0;
                        padding: 0;
                    }
                    .timeline li.timeline-handelse > a .timeline-handelse-date { font-size: 12px; line-height: 12px; color: #AAAAAA; display: inline-block; float: left; }
                    .timeline li.timeline-handelse > a .timeline-handelse-related { font-size: 11px; line-height: 11px; color: #CCCCCC; display: inline-block; padding-right: 8px; }
                    .timeline li.timeline-handelse > a .timeline-handelse-daydiff { font-size: 11px; line-height: 11px; color: #CCCCCC; display: inline-block;  padding-right: 8px; }
                    .timeline li.timeline-handelse > a .timeline-handelse-kommunikationer-counts { font-size: 11px; line-height: 11px; color: #CCCCCC; display: inline-block; float: right; }
                    .timeline li.timeline-handelse > a .timeline-handelse-kommunikationer-counts i { margin-right: 2px; }
                    .timeline li.timeline-handelse > a .timeline-handelse-kommunikationer-counts span { padding-left: 10px;}
                
                .timeline #parent-arrow {
                    position: absolute;
                    /*height calculated with js*/
                    bottom: 23px;
                    z-index: 9;
                    border-top: 1px dotted #AAAAAA;
                }
                    .timeline #parent-arrow.right-arrow {
                        border-right: 1px dotted #AAAAAA;
                        left: -2px;
                    }
                    .timeline #parent-arrow.left-arrow {
                        border-left: 1px dotted #AAAAAA;
                        /*left calculated with js*/
                    }
            
                .timeline li.timeline-handelse ul.timeline-kommunikationer {
                    display: none;
                    position: absolute;
                    left: 0px;
                    bottom: -85px;
                }
    
                    .timeline ul.timeline-kommunikationer li.timeline-kommunikation {
                        width: 300px;
                        position: absolute;
                        padding: 5px;
                        border: 1px solid #AAAAAA;
                        box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2)
                    }
                    .timeline ul.timeline-kommunikationer li.timeline-kommunikation:after {
                        border-right: 10px solid transparent;
                        border-bottom: 10px solid #AAAAAA;
                        top: -10px;
                        content: "";
                        display: inline-block;
                        height: 0;
                        left: -1px;
                        position: absolute;
                        width: 0;
                    }
                    .timeline ul.timeline-kommunikationer li.timeline-kommunikation.timeline-handelsekommunikationtyp-arbetsuppgift {  }
                    .timeline ul.timeline-kommunikationer li.timeline-kommunikation.timeline-handelsekommunikationtyp-elevmeddelande {  }
                    .timeline ul.timeline-kommunikationer li.timeline-kommunikation.timeline-handelsekommunikationtyp-anvandarmeddelande {  }
                    
                        .timeline li.timeline-kommunikation h4 { 
                            display: block;
                            font-size: 14px;
                            line-height: 16px;
                            margin: 0 0 4px 0;
                            padding: 0;
                        }
                        .timeline li.timeline-kommunikation .timeline-kommunikation-date { font-size: 11px; line-height: 11px; color: #CCCCCC; display: inline-block; float: left; padding-right: 16px; }
                        .timeline li.timeline-kommunikation .timeline-kommunikation-mottagare { font-size: 11px; line-height: 11px; color: #CCCCCC; display: inline-block; float: left; padding-right: 8px; }
                            .timeline li.timeline-kommunikation h4 i {
                                width: inherit;
                                font-size: 14px;
                            }
ul.timeline-calender {
    margin-top: 6px;
    position: relative;
}            
    ul.timeline-calender li {
        font-size: 10px;
        position: absolute;
        text-align: center;
        width: 200px;
        margin-left: -80px; /* 200/2 - 20 */
    } 
    ul.timeline-calender li.today {
        text-decoration: underline;
    }  
    ul.timeline-calender li:before {
        content: "";
        display: block;
        left: 100px; /* 200/2 */
        position: absolute;
        width: 1px;
        background: #000000;
        opacity: 0.2;
        top: -19px;
        height: 19px;
    }    
    ul.timeline-calender li.month:before {
        background: #000000;
        /*top: -21px;
        height: 22px;*/
        top: -25px;
        height: 30px;
        opacity: 0.8;
    }    
    ul.timeline-calender li.weekend:before {
        background: #FF0000;
        opacity: 0.8;
    }  
    ul.timeline-calender li.today:before {
        background: #00FF00;
        top: -25px;
        height: 30px;
        opacity: 0.8;
    }  

.timeline-explanation {
    list-style-type: none;
    margin: 0;
}
    .timeline-explanation li.timeline-handelsedate {
        float: left;
        position: static;
        width: 200px;
    }      
        .timeline-explanation li.timeline-handelsedate > a {
            display: block;
            position: relative;
            color: #000000;
        }   
        .timeline-explanation li.timeline-handelsedate > a:hover {
            color: #000000;
        }   
            .timeline-explanation li.timeline-handelsedate > a > span {
                position: absolute;
                left: 16px;
                top: -1px;
                font-size: 10px;
                line-height: 10px;
                display: inline-block;
                width: 200px;
            }