:root{
    --MarkBtnSize:40px;
}
.TaskLine{
    position: relative;
}
.TaskText{
    width: calc(94% - var(--MarkBtnSize)*2) ;
    vertical-align: top;
}
.TaskText,.quickMarks{
    display: inline-block;
}
.TaskSubMenu{
    position: absolute;
    left: 0;
    top: 0;
}
.toggleSubMenuBtn{
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 30px;
    background-color: transparent;
    background-image: url("/images/dot3.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    border: none;
    margin-left: 3px;
}
.DoneTask{
    text-decoration: line-through;
}
.DeletedTask{
    color: #928686;
}
.HeadLine{
    font-weight: bold;
    font-size: 110%;
}
.MarkDone{
    display: inline-block;
}
.MarkDelete{
    display: inline-block;
}

.threeDotsContent, .ProfileSubMenu, .ProfileSubMenuList{
    position: absolute;
    left: 0;
    z-index: 444;
    width: 130px;
    background-color: white;/* #eeeeee; */
}
.threeDotsContent{
    top: 20px;
}
.ProfileSubMenu{
    top: 40px;
}
.ProfileSubMenuList{
    bottom: 40px;
}
.ProfileSubMenu     button,
.ProfileSubMenuList button,
.threeDotsContent   button{
    background-color: transparent;
    padding: 10px 5px;
    padding-right: 45px;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    height: 40px;
    width: 100%;
    border: none;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    margin-bottom: 3px;

}
.threeDotsContent  button:last-child{
}

.MarkDone button{
    height:  var(--MarkBtnSize);
    width: var(--MarkBtnSize);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    border: none;
    background-color: transparent;
}
.showBtn{display: inline-block;}
.hideBtn{display: none;}
.NowDone{
    background-image: url("/images/done_btn.png");
}
.NowHalfDone{
    background-image: url("/images/half_btn.png");
}
.NowNotDone{
    background-image: url("/images/empty_btn.png");
}
.markDeleted{
    background-image: url("/images/rm_btn.png");
}
.TotalDelete{
    background-image: url("/images/total_rm.png");
}
.BackToLife{
    background-image: url("/images/BackToLife.png");
}
.markHeadLine{
    background-image: url("/images/HeadLine_btn.png");
}
.markRegular{
    background-image: url("/images/normal_btn.png");
}
.copy_btn{
    background-image: url("/images/copy2clipboard.png");
}
.edit_SideBtn{
    background-image: url("/images/edit_btn.png");
}
.MoveTomorrow{
    background-image: url("/images/tomorrow_btn.png");
}
.ordr_SideBtn{
    background-image: url("/images/OrderChange.png");
}
#addTask,.editTask input[type='text']{
    background: none;
    border-radius: 5px;
    font-size: 120%;
    width: 80%;
}
.addNewTask{
    width: 100%;
    text-align: center;
    margin-top: 10px;
}
.addNewTask button{
    width:  32px;
    height: 28px;
    background-color: transparent;
    background-image: url("/images/plus.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    border: 2px solid transparent;
    padding: 5px;
}
.editTask{
    position: absolute;
    top:15px;
    border: none;
    border-radius: 10px;
    width: 80%;
}
.mainBtnEditTask{
    width:  32px;
    height: 28px;
    background-color: transparent;
    background-image: url("/images/simple_v.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    border: 2px solid transparent;
    padding: 5px;
}
.CloseFormBtn{
    height:  30px;
    width: 30px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    border: none;
    background-color: transparent;
    background-image: url("/images/close.png");
    cursor: pointer;
}