div.timeline-frame {
    -moz-box-sizing: border-box;
    /*border: 1px solid #999;*/
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

div.timeline-content {
    overflow: hidden;
    position: relative;
}

div.timeline-axis {
    -moz-box-sizing: border-box;
    border-color: #bebebe;
    border-top-style: solid;
    border-width: 1px;
    box-sizing: border-box;
}

div.timeline-axis-grid {
    -moz-box-sizing: border-box;
    border-left-style: solid;
    border-width: 1px;
    box-sizing: border-box;
}

div.timeline-axis-grid-minor {
 /*   border-color: #000;*/
    border-color: #fff;
}

div.timeline-axis-grid-major {
    border-color: #bfbfbf;
}

div.timeline-axis-text {
    color: #8c8278;
    padding: 3px;
    white-space: nowrap;
    font-size: 12px;
    font-family: 'Roboto';
}

div.timeline-event {

    color: #8c8278;
    display: inline-block;
}

div.timeline-event-selected {
    background-color: #fff785;
    border-color: #ffc200;
    border-color: var(--main-bg-color);
    z-index: 999;
}

/* TODO: use another color or pattern? */
div.timeline-event-cluster {
    background: url('img/cluster_bg.png') var(--main-bg-color);
    color: #ffffff;
}

div.timeline-event-cluster div.timeline-event-dot {
    border-color: #d5ddf6;
}

div.timeline-event-box {
    /*-moz-border-radius: 5px;*/ /* For Firefox 3.6 and older */
    /*border-radius: 5px;
    border-style: solid;
    border-width: 1px;*/
    text-align: center;
   /* -moz-box-sizing: border-box;*/
    background-color: #eae0d5;
    border-color: #eae0d5;
    /*box-sizing: border-box;*/
    border-bottom: 1px solid #eae0d5;
}

div.timeline-event-dot {
    -moz-border-radius: 3px; /* For Firefox 3.6 and older */
    border-radius: 3px;
    border-style: solid;
    border-width: 3px;
    -moz-box-sizing: border-box;
    background-color: var(--main-bg-color); /* #ccc;  */
    border-color: var(--main-bg-color);
    box-sizing: border-box;
}

.selectdot {
    border-color: #78030A !important;
    background-color: #78030A !important;
}

.selectline {
    border-color: #78030A;
    background-color: #78030A;
}
div.timeline-event-range {
    -moz-border-radius: 2px; /* For Firefox 3.6 and older */
    border-radius: 2px;
    border-style: solid;
    border-width: 1px;
}

div.timeline-event-range-drag-left {
    cursor: w-resize;
    z-index: 1000;
}

div.timeline-event-range-drag-right {
    cursor: e-resize;
    z-index: 1000;
}

div.timeline-event-line {
    -moz-box-sizing: border-box;
    border-left-style: solid;
    border-left-width: 1px;
    box-sizing: border-box;
}

div.timeline-event-content {
    margin: 1px 5px 1px 5px;
    overflow: hidden;
    white-space: nowrap;
    font-weight: normal;
    font-size: 12px;
    font-family: 'Roboto';
}

    div.timeline-event-content a {
        text-decoration: none !important;
        color: #000 !important;
        cursor: pointer;
    }
        div.timeline-event-content a:hover {
            text-decoration: underline !important;
            color: #78030A !important;
            cursor: pointer;
        }
div.timeline-event-content a.item_ev_select {
    color: #78030A !important;
    cursor: pointer;
}

        div.timeline-groups-axis {
            -moz-box-sizing: border-box;
            border-color: #bebebe;
            border-width: 1px;
            box-sizing: border-box;
        }

div.timeline-groups-axis-onleft {
    border-style: none solid none none;
}

div.timeline-groups-axis-onright {
    border-style: none none none solid;
}

div.timeline-groups-text {
    color: #ccc;
    padding-left: 10px;
    padding-right: 10px;
}

div.timeline-currenttime {
    -moz-box-sizing: border-box;
    background-color: #ff7f6e;
    box-sizing: border-box;
    width: 2px;
}

div.timeline-customtime {
    -moz-box-sizing: border-box;
    background-color: #6e94ff;
    box-sizing: border-box;
    cursor: move;
    width: 2px;
}

div.timeline-navigation {
    -moz-border-radius: 2px; /* For Firefox 3.6 and older */
    -moz-box-sizing: border-box;
    background-color: #ffffff;
    border: 1px solid #bebebe;
    box-sizing: border-box;
    color: #808080;
    font-family: arial;
    font-size: 20px;
    /*font-weight: bold;*/
}

div.timeline-navigation-new,
div.timeline-navigation-delete,
div.timeline-navigation-zoom-in,
div.timeline-navigation-zoom-out,
div.timeline-navigation-move-left,
div.timeline-navigation-move-right {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    float: left;
    height: 32px;
    padding: 2px;
    text-decoration: none;
    width: 32px;
}

div.timeline-navigation-new {
    background: url('img/16/new.png') no-repeat center;
}

/* separator between new and navigation buttons */
div.timeline-navigation-new-line {
    border-right: 1px solid #bebebe;
}

div.timeline-navigation-delete {
    background: url('img/16/delete.png') no-repeat center;
}

div.timeline-navigation-zoom-in {
    background: url('img/16/zoomin.png') no-repeat center;
}

div.timeline-navigation-zoom-out {
    background: url('img/16/zoomout.png') no-repeat center;
}

div.timeline-navigation-move-left {
    background: url('img/16/moveleft.png') no-repeat center;
    /*background-color: #333;*/
    background-color: var(--main-bg-color);
    border-right: 1px solid #ccc;
}

div.timeline-navigation-move-right {
    background: url('img/16/moveright.png') no-repeat center;
    /* background-color: #333;*/
    background-color: var(--main-bg-color);
}

.timeline-axis-text-major
{
    display: none;
}

div.timeline-navigation-start {
    /*background: url('img/16/new.png') no-repeat center;*/
    position: relative;
    width: 20px;
    height: 5px;
    bottom: 22px;
}

#timelinestart {
    /*    background-image: url('img/timeline.svg');
    background-color: #8C8278;*/
    /*background-image: url('img/timeline2.svg');*/
    background-color: #eae0d5;
    content: url('img/timeline3.svg');
}

@media screen and (max-width: 768px) {
    div.timeline-navigation-new, div.timeline-navigation-delete, div.timeline-navigation-zoom-in, div.timeline-navigation-zoom-out, div.timeline-navigation-move-left, div.timeline-navigation-move-right {
        height: 26px;
        width: 26px;
        padding: 0px;
    }
}