.tasks {
    display: none;
    justify-content: center;
    top: 0;
    gap: 40px;

}



/* --------------add------------ */
.tasks__add {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 25px;
    justify-content: center;
    align-items: center;
    background-color: #FFCCCC;
    border-radius: 8px;
    height: 100%;
}


.tasks__add-description,
.tasks__add-name {
    padding: 18px 14px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 6px;
    border: 3px solid black;
}

.tasks__add-btn {
    padding: 18px 14px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 6px;
  
    background-color: white;
    /* opacity: 1; */

    &:hover {
        opacity: 0.7;
        cursor: pointer
    }

    &:active {
        opacity: 0.9;
    }
}


/* --------------actual------------ */

.tasks__actual {
    background-color: #FFCCCC;
    display: flex;
    flex-direction: column;
    padding: 25px;
    border-radius: 8px;
    height: 100%;
    gap: 15px;

}

.tasks__actual-wr {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    border: 3px solid black;
    padding:  10px 14px;
}

.tasks__actual-del {
    padding: 2px;
    font-weight: 700;
    border-radius: 6px;
    background-color: #FFCCCC;

    &:hover {
        opacity: 0.7;
        cursor: pointer
    }

    &:active {
        opacity: 0.9;
    }
}