.container {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.time-container{
    width: 100%;
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}

.buttons-form {
    display: flex;
    justify-content: start;
    align-items: stretch;
    gap: 12px;
    margin: 12px 0;
    flex-wrap: nowrap;
}

.buttons-item {
    display: flex;
    justify-content: center;
    align-items: center;
}
.time-view, 
.date-view,
.itemCounter {
    color: #A6AEBF;
}
.time-view {
    font-size: 4rem;
    font-weight: 700;
}

.date-view {
    font-size: 1.3rem;
    font-weight: 300;
}



#textItem {
    color: #495664;
    font-size: 1.4rem;
    font-weight: 500;
}

.buttons-item {
    display: flex;
    gap: 6px;
}

.item-info {
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 8px;

     & p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        display: block; 
    }
}

.itemCounter {
    margin: 24px 0 12px;
    font-size: 1.4rem;
}

.completed {
    box-shadow: inset 100px 0px 0px -94px #50D890;
    background-color: #E4EFE7 !important;
    transition: all 1s ease;
    
    & p {
        color: #A6AEBF;
        text-decoration:line-through;
    }
}