header {
    background: #3e3e3e;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.33);
}

.title {
    color: #eeeeee;
    background: #3e3e3e;
}

body{
    background: #212121;
}

.wrapper {
    background: #424242;
}

.task.active {
    background: rgb(37, 37, 37);
    color: #ebebeb;
}

.task {
    color: #a5a5a5;
}

.task:hover {
    background: rgb(37, 37, 37);
    color: #ebebeb;
}


button.tab {
    color: #696969;
    background: rgb(33, 33, 33);
}

button.tab.active, button.tab:active {
    background: #454545;
    color: #c7c7c7;
}
#task-logs{
    color: #dcdcdc;
}
.ansi-red-fg {
    color: rgb(230, 78, 78);
}
#task-logs::-webkit-scrollbar-thumb {
    background: #c1c1c1;
}
#task-logs::-webkit-scrollbar-thumb:hover {
    background: #9e9e9e; 
}
#task-logs{
    background: #060606;
}
.ansi-bright-black-fg {
    color: #909090;
}
.main-button.toggle {
    background: #333333;
    color: #929292;
}
.main-button.toggle.active {
    background: #2e7b58;
    color: #b5e0cd;
}

.run{
    background: #2f9a6a;
}
.stop{background: #8c4343;}

.task.new-task .form input, .task.new-task .form textarea {
    background: #333;
    color: #dcdcdc;
}
.task.new-task .form button {
    background: #2e7b58;
    color: #b5e0cd;
}

.task.updated{
    animation-name: dark-highlight;
}

@keyframes dark-highlight{
    50%{
        background: rgb(79, 80, 63);
    }
}