html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-flow: column;
}

.task {
    background: white;
    border-radius: 16px;
    border: 2px solid black;
}

.task__header {
    border-bottom: 1px solid black;
    background: #99CC33;
    overflow: hidden;
    border-top-right-radius: 16px;
    border-top-left-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.task__title {
    display: flex;
    text-overflow: clip;
}

.description {
    margin-left: 0.5cm;
    margin-right: 0.5cm;
}

.task__description {
    overflow-wrap: break-word;
}

.working-team {
    background: #00B8DE;
    overflow: hidden;
    border-top: 1px solid black;
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
}

.user-image {
    display: flex;
    list-style-type: none;

    margin: 2%;
    padding-left: 1%;

}

.user-buble {
    border: 1px solid black;
    padding: 4px;
    margin-right: 10px;
    font-size: 10pt;
    border-radius: 50%;
    background-color: #99CC33;
}

.categories-container {
    display: flex;
    height: calc(100vh - 2cm);
    overflow-x: auto;
    padding-left: 1%;
    padding-bottom: 0.5%;

}

.category {
    background-color: #333333;
    border-radius: 20px;
    margin: 0.5%;
    padding: 1%;
    width: 8cm;
    height: auto;
    flex-shrink: 0;
    display: flex;
    flex-flow: column;

}

.container-title-description-category {
    margin-right: 1.3cm;
    overflow: hidden;
}

.category-title {
    color: white;
    font-weight: bold;

}

.category-content {
    overflow-y: auto;
    max-height: 85%;

}

.task-add {
    color: white;
    flex: 0 1 40px;
    margin-top: 2%;
}

.add-container {
    margin: 0.5%;
    padding: 1%;
    width: 23%;
    flex-shrink: 0;


}

.category-add {
    width: 100%;

}


.description {
    font-size: small;
    font-weight: normal;
}

.description-title {
    font-size: small;
    font-weight: normal;
    color: white;
}

.head-category {
    position: relative
}

.progress-container {
    margin: 1%;
}

.expire_container {
    margin: 1%;
}

.late {
    color: red
}

.time_ok {
    color: green;
}

.task_done {
    font-size: 10pt;
}

.etiquette {
    margin-top: 1%;
    margin-bottom: 1%;

}

.subtask_input {
    margin-right: 0.5cm;
}

.collaborator {
    background-color: #99CC33;
    margin: 1%;
    padding: 2%;
    color: black;
    border-radius: 10px;
    display: inline-block;

}

.me {
    background-color: #d99216
}

.comment h6 {
    word-wrap: break-word;
}