#bg-tasks {
    visibility: hidden;
    transform: translateY(10px);
    transition: transform 0.1s cubic-bezier(0.26, 0.82, 0.3, 0.84);
    height: 0;
}

#bg-tasks.open {
    position: fixed;
    background: #fff;
    width: 600px;
    top: 67px;
    z-index: 601;
    right: 9px;
    transform: translateY(0px);
    border-radius: 10px;
    visibility: visible;
    box-shadow: rgba(100,100,111,0.2) -7px 7px 10px 0px;
    height: auto;
}

.chat-full-view.scroll-fix #bg-tasks.open {
    right:26px
}
#bg-tasks .header {
    display:flex;
    justify-content:space-between;
    height: 45px;
    padding: 10px;
    border-bottom:1px solid #f0f1f3;
    align-items:center
}
#bg-tasks .footer {
    height: 45px;
    padding: 10px;
    border-top:1px solid #f0f1f3;
    display:flex;
    justify-content: space-between;
}
#task-logs-table-container {
    display:none;
    padding: 0;
    width: 95%;
    max-width: 1400px;
}
#task-logs-table-container .log-header {
    height:45px;
    display:flex;
    align-items:center;
    padding:0 45px 0 10px;
    font-weight:500;
    font-size:16px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow: ellipsis;
}
#task-logs-table {

}
#bg-tasks .footer div {
    display:flex
}
#bg-tasks .footer .count-info {
    font-size:12px;
    color:#999
}
#bg-tasks .footer span.fa {
    background:#e0e1e4;
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:3px;
    margin: 0 5px;
    cursor:pointer;
}
#bg-tasks .header span.fa-times {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    width: 24px;
    height: 24px;
    background: #e0e1e4;
    border-radius: 15px;
    color: #4c4c4c;
}
#bg-tasks .header h5 {
    margin:0
}
#bg-tasks .header span.fa-times:hover {
    background:#d95bca;
    color:#fff;
}
#bg-tasks .task {
    padding:10px;
    border-bottom:1px solid #f0f1f3;
    min-height:50px;
    display:flex;
    align-items:center
}
#bg-tasks .task .task-name {
    display:flex;
    justify-content:space-between
}
#bg-tasks .task .task-name .task-name-container {
    display:flex;
    flex: 1;
}
#bg-tasks .task .task-name .control, #bg-tasks .task .task-name .stop {
    display:flex;
    align-items:center;
}
#bg-tasks .task .task-name .delete {
    cursor:pointer;
    padding:3px;
    display:flex;
    margin-left:5px;
    align-items:center;
}
#bg-tasks .task .task-name .delete:hover {
    color:#d95bca;
}
#bg-tasks .task .task-name .control .actions, #bg-tasks .task .task-name .stop {
    margin-left:10px
}
#bg-tasks .task .task-name .control .actions .action,
#bg-tasks .task .task-name .control .actions a {
    padding:3px;
    display:flex;
    align-items:center;
}
#bg-tasks .task .task-name .stop {
    background: #f0f1f3;
    padding:3px 8px 3px 3px;
    font-size:12px;
    border-radius:3px;
    line-height: 100%;
    cursor:pointer;

}
#bg-tasks .task .task-name .stop:hover {
    color:#d95bca;
}
#bg-tasks .task .task-name .stop i.fa {
    display:flex;
    line-height:100%;
    justify-content:center;
    align-items:center
}
#bg-tasks .task .task-name .control .log {
    display:flex;
    align-items:center;
    background: #f0f1f3;
    padding: 3px 8px 3px 3px;
    border-radius:3px;
    cursor:pointer;
    font-size: 12px;
}
#bg-tasks .task .task-name .control .log:hover {
    opacity:0.7
}
#bg-tasks .task .task-name .control .log span.fa {
    margin-right:5px
}
#bg-tasks .task .task-name .name {
    margin-bottom:5px
}
#bg-tasks .task .task-icon {
    flex-basis: 24px;
    height: 24px;
    margin-right: 5px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    font-size: 10px;
    font-weight: bold;
    border-radius: 3px;
    min-width: 24px;
    }

#bg-tasks .task .task-data {
    flex: 1;
}
#bg-tasks .task .info {
    font-size:12px;
    display:flex;
    justify-content:space-between;
    color:#999;
    margin-top: 5px;
}
#bg-tasks .task:last-child {
    border-bottom:none;
}
#bg-tasks .controls {
    height:40px;
    padding:0;
    display:flex;
    border-bottom:1px solid #f0f1f3;
}
#bg-tasks .controls a {
    font-size:13px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#777;
    font-weight:500;
    flex:1;
    cursor:pointer;
    border-right:1px solid #f0f1f3;
}
#bg-tasks .controls a:hover {
    opacity:0.8
}
#bg-tasks .controls a .fa {
    margin-right:5px
}
#bg-tasks .controls a:last-child {
    border-right:none;
}
#bg-tasks .controls a:nth-of-type(2),#bg-tasks .task .task-icon.run {
    color:#8847d1
}

#bg-tasks .controls a:nth-of-type(3),#bg-tasks .task .task-icon.error {
    color:#d95bca
}
#bg-tasks .controls a:nth-of-type(4),#bg-tasks .task .task-icon.completed {
    color:#676bec
}
#bg-tasks .controls a:nth-of-type(2).active,
#bg-tasks .controls a:nth-of-type(1).active {
    color:#8847d1;
    box-shadow: inset 0px -2px 0px 0px #bd82ff;
}
#bg-tasks .controls a:nth-of-type(3).active {
    color:#d95bca;
    box-shadow: inset 0px -2px 0px 0px #ff9af3;
}
#bg-tasks .controls a:nth-of-type(4).active {
    color:#676bec;
    box-shadow: inset 0px -2px 0px 0px #a4a7fb;
}
#bg-tasks .progress,
#observableProcess .progress{
    height: 20px;
    width:100%;
    border-radius: 10px;
    background:#edddff;
    position:relative;
    overflow:hidden;
    padding:0 10px;
    margin-top: 5px;
}
#bg-tasks .progress .progress-info,
#observableProcess .progress .progress-info{
    font-size:12px;
    font-weight:bold;
    line-height:100%;
    height: 20px;
    align-items:center;
    display:flex;
    justify-content:center;
    color:#4b1686;
    position:relative;
}
#bg-tasks .progress .bar,
#observableProcess .progress .bar {
    position:absolute;
    left:0;
    top:0;
    height: 20px;
    background:#bd82ff;
}
#bg-tasks .task-list {
    overflow: auto;
    height: calc(100vh - 210px);
}
#bg-tasks .loading-tasks {
    height:100%;
    width:100%;
    background-image: url('https://media.animotech.io/resourses/icons/notifications/chat-preloader.svg');
    background-repeat: no-repeat;
    background-position:50%;
}
#bg-tasks .no-results {
    height:100%;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#bbb;
    font-style:italic
}
#observableProcess.fancybox-content {
  padding:20px
}