.project-list .project {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #dbdbdb;
    padding: 10px 0;
    margin-left: -5px;
    margin-right: -5px;
}

.project-list .project:hover {
    background-color: lightgray;
}

.project-list .header {
    border-bottom: 2px solid #989898;
    font-weight: 600;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #dbdbdb;
    padding: 10px 0;
    margin-left: -5px;
    margin-right: -5px;
}

.project-list .header > * {
    padding-right: 5px;
    padding-left: 5px;
}

.project-list .project > * {
    padding-right: 5px;
    padding-left: 5px;
}

.project-list .project-code {
    flex: 0 0 15%;
    text-align: center;
}

.project-list .project-name {
    flex: 0 0 25%;
}

.project-list .project-client {
    flex: 0 0 20%;
}

.project-list .project-manager {
    flex: 0 0 20%;
}

.project-list .project-status {
    flex: 0 0 20%;
}

@media (max-width:767.98px) {
    .project-list .project-code {
        flex: 0 0 10%;
    }

    .project-list .project-manager {
        flex: 0 0 25%;
    }

}