.taskItem {
    background: #ffffff0f;
    display: flex;
    padding: 10px 15px;
    align-items: center;
    color: #f2f2f2;
    margin-bottom: 5px;
    margin-top: 5px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-left: 3px solid #52c2ff;
    transition: all .5s;
    position: relative;
    font-size: 14px;
}

.taskItem img {
    margin-bottom: -6px;
    margin-right: 10px;
}

.taskItem.red {
    border-left: 3px solid #ff5252;
}

.taskItem.green {
    border-left: 3px solid #68E76D;
}

.taskItem.blue {
    border-left: 3px solid #52c2ff;
}

.taskItem.purple {
    border-left: 3px solid #c852ff;
}

.taskItem.orange {
    border-left: 3px solid #ffba52;
}

.taskItem.yellow {
    border-left: 3px solid #fffe52;
}

.taskItem{
    border-left: 3px solid #0000005c !important;
}




.taskItem.isParentTask.red {
    background: #ff52525c;
}

.taskItem.isParentTask.green {
    background: #68E76D5c;
}

.taskItem.isParentTask.blue {
    background: #52c2ff5c;
}

.taskItem.isParentTask.purple {
    background: #c852ff5c;
}

.taskItem.isParentTask.orange {
    background: #ffba525c;
}

.taskItem.isParentTask.yellow {
    background: #fffe525c;
}

.taskItem.isParentTask.red.notOwnedTask {
    background: #ff525212;
}

.taskItem.isParentTask.green.notOwnedTask {
    background: #68E76D12;
}

.taskItem.isParentTask.blue.notOwnedTask {
    background: #52c2ff12;
}

.taskItem.isParentTask.purple.notOwnedTask {
    background: #c852ff12;
}

.taskItem.isParentTask.orange.notOwnedTask {
    background: #ffba5212;
}

.taskItem.isParentTask.yellow {
    background: #fffe5212;
}

.taskItem.complete {
    opacity: 0.25;
}


.completeCheck {
    border: 2px solid #767676;
    height: 18px;
    width: 18px;
    min-width: 18px;
    min-height: 18px;
    border-radius: 20px;
    margin-right: 12px;
    position: relative;
}

.complete .completeCheck:before {
    content: '';
    position: absolute;
    top: 10px;
    left: 3px;
    right: 0;
    width: 6px;
    height: 2px;
    background: #767676;
    transform: rotate(45deg);
}

.complete .completeCheck:after {
    content: '';
    position: absolute;
    top: 8.25px;
    left: 5.5px;
    right: 0;
    width: 11px;
    height: 2px;
    background: #767676;
    transform: rotate(-45deg);
}

.red .completeCheck:before,.red .completeCheck:after{
    background: #ff5252;
}

.green .completeCheck:before,.green .completeCheck:after{
    background: #68E76D;
}

.blue .completeCheck:before,.blue .completeCheck:after{
    background: #52c2ff;
}

.purple .completeCheck:before,.purple .completeCheck:after{
    background: #c852ff;
}

.orange .completeCheck:before,.orange .completeCheck:after {
    background: #ffba52;
}

.yellow .completeCheck:before,.yellow .completeCheck:after {
    background: #fffe52;
}

.red .completeCheck {
    border: 2px solid #ff5252;
}
.green .completeCheck {
    border: 2px solid #68E76D;
}
.blue .completeCheck {
    border: 2px solid #52c2ff;
}
.purple .completeCheck {
    border: 2px solid #c852ff;
}

.orange .completeCheck {
    border: 2px solid #ffba52;
}

.yellow .completeCheck {
    border: 2px solid #fffe52;
}


.taskShareDetails {
    position: absolute;
    font-size: 9px;
    bottom: 0px;
    color: #807f7f;
}

.redText {
    color: #ff5252;
}
.greenText {
    color: #68E76D;
}
.blueText {
    color: #52c2ff;
}
.purpleText {
    color: #c852ff;
}
.orangeText {
    color: #ffba52;
}
.yellowText {
    color: #fffe52;
}


.taskItem.notOwnedTask {
    border-left: 3px solid #0000005c;
    background: #00000040;
}

.clickableTask {
    cursor: pointer;
    margin-right: 15px;
}

.taskItem .dt {
    font-size: 12px;
    position: absolute;
    right: 10px;
    top: -5px;
    bottom: 0;
    height: 26px;
    margin: auto;
    text-align: center;
}

.dt .miniMonth {
    font-size: 9px;
    margin-bottom: -4px;
}


.parentTaskRing {
    height: calc(100% - 8px);
    width: calc(100% - 8px);
    /* border: inherit; */
    border-radius: 100px;
    margin-left: 2px;
    margin-top: 2px;
    display: none;
}

.taskItem.isParentTask .parentTaskRing {
    display: block;
}

.taskItem.isChildTask:before {
    content: '';
    position: absolute;
    left: 4px;
    top: 0;
    bottom: 0;
    width: 1px;
    border: inherit;
    border-width: 1px;
}

.taskItem.isParentTask+.taskGroup {
    margin-left: 10px;
    height: 0px;
    overflow: hidden;
    display: none;
}

.taskItem.isParentTask.open+.taskGroup {
    height: auto;
    display: block;
}

.parentTaskRing:before {
    content: '';
    left: 2px;
    top: 9px;
    width: 6px;
    transform: rotate(35deg);
    border: 1px solid #ffffff6e;
    position: absolute;
    display: block;
}

.parentTaskRing:after {
    content: '';
    left: 8px;
    top: 9px;
    width: 6px;
    transform: rotate(-35deg);
    border: 1px solid #ffffff6e;
    position: absolute;
    display: block;
}

.parentSubTaskCount {
    position: absolute;
    font-size: 9px;
    background: #ffffffcf;
    height: 15px;
    width: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    left: -9px;
    top: -9px;
    color: black;
}

.parentTaskName {
    position: absolute;
    right: 10px;
    font-size: 8px;
    text-align: right;
    bottom: 0px;
    color: #ffffff6b;
}

.taskItem.isParentTask+.taskGroup.open {
    display: block;
    height: auto;
}