.viewprojectcalendarwrapper {
    width: 100%;
}
.viewprojectcalendarwrapper * {
    font-size: 16px;
}

.viewtimelinecalendaroutercontainer * {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.viewtimelinecalendaroutercontainer {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.viewtimelinecalendarcontainer {
    position: relative;
    width: 100%;
}
    .viewtimelinecalendarcontainer .viewtimelinecalendaritem {
        position: absolute;
        display: block;
        white-space: nowrap;
    }
    .viewtimelinecalendarcontainer .maintimeline {
        position: absolute;
        left: 4px;
        background-color: #e1e3e8;
        height: 2px;
    }
.viewprojectcalendarwrapper .timelinearrow {
    position: absolute;
}
    .viewprojectcalendarwrapper .timelinearrow.left {
        left: 0;
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 8px solid #e1e3e8;
    }
    .viewprojectcalendarwrapper .timelinearrow.right {
        right: 0;
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-left: 8px solid #e1e3e8;
    }

.viewtimelinecalendaritem .viewtimelinecalendaritemcontainer {
    position: relative;
}
.viewtimelinecalendaritem .viewtimelinecalendaritemcontainercontent {
    position: relative;
    padding-left: 20px;
    padding-bottom: 8px;
}
    .viewtimelinecalendaritem .viewtimelinecalendaritemcontainercontent:hover, .viewtimelinecalendaritem .viewtimelinecalendaritemcontainercontent:hover * {
        opacity: 0.7;
        cursor: pointer;
    }

.viewtimelinecalendaritem .connector {
    position: absolute;
    left: 6px;
    width: 2px;
    height: 10px;
    background-color: #e1e3e8;
}
    .viewtimelinecalendaritem .connector.top {
        bottom: -15px;
        height: 18px;
    }
    .viewtimelinecalendaritem .connector.bottom {
        top: -12px;
        height: 24px;
    }
    .viewtimelinecalendaritem .connector.interconnector.top {
        bottom: -10px;
        height: 15px;
    }

    .viewtimelinecalendaritem .connector.interconnector.bottom {
        top: -4px;
        height: 15px;
    }

.viewtimelinecalendarcontainer .viewtimelinecalendaritem .icon {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 15px;
    left: 0;
}
.viewtimelinecalendarcontainer .viewtimelinecalendaritem .itemcaption {
    line-height: 12px;
}
.viewtimelinecalendarcontainer .viewtimelinecalendaritem .itemtimecontainer {
    font-size: 13px;
}

.datetimecontent {
    color: #aab1be;
    font-size: 11px;
    padding-left: 13px;
}
.viewtimelinecalendarscrollcontainer {
    width: 100%;
    height: 20px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
    .viewtimelinecalendarscrollcontainer * {
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .viewtimelinecalendarscrollcontainer .innerscrollline {
        margin: 9px 0px;
        width: 100%;
        background-color: #e1e3e8;
        height: 4px;
    }

    .viewtimelinecalendarscrollcontainer .innerscrollactor {
        position: absolute;
        top: 5px;
        left: 81px;
        cursor: e-resize;
        height: 12px;
        width: 40px;
        background-color: #aab1be;
        border-radius: 3px;
    }