bitque/jirs-client/js/css/project.css

#projectPage {
    padding: 25px 32px 50px calc(var(--appNavBarLeftWidth) + var(--secondarySideBarWidth) + 40px);
}

#projectPage > .breadcrumbsContainer {
    color: var(--textMedium);
    font-size: 15px;
}

#projectPage > .breadcrumbsContainer > .breadcrumbsDivider {
    position: relative;
    top: 2px;
    margin: 0 10px;
    font-size: 18px;
}

#projectPage > #projectBoardHeader {
    margin-top: 6px;
    display: flex;
    justify-content: space-between;
}

#projectPage > #projectBoardHeader > #boardName {
    font-size: 24px;
    font-family: var(--font-medium);
    font-weight: normal;
}

#projectPage > #projectBoardFilters {
    display: flex;
    align-items: center;
    margin-top: 24px;
}

#projectPage > #projectBoardFilters > #searchInput {
    margin-right: 18px;
    width: 160px;
}

#projectPage > #projectBoardFilters > #avatars {
    display: flex;
    flex-direction: row-reverse;
    margin: 0 12px 0 2px;
}

#projectPage > #projectBoardFilters > #avatars > .avatarIsActiveBorder {
    display: inline-flex;
    margin-left: -2px;
    border-radius: 50%;
    transition: transform 0.1s;
    cursor: pointer;
    user-select: none;
}

#projectPage > #projectBoardFilters > #avatars > .avatarIsActiveBorder.isActive {
    box-shadow: 0 0 0 4px var(--primary);
}

#projectPage > #projectBoardFilters > #avatars > .avatarIsActiveBorder:hover {
     transform: translateY(-5px);
 }

#projectPage > #projectBoardFilters > #avatars > .avatarIsActiveBorder > .styledAvatar {
    box-shadow: 0 0 0 2px #fff;
}

@media (max-width: 1100px) {
    #projectPage {
        padding: 25px 20px 50px calc(var(--appNavBarLeftWidth) + var(--secondarySideBarWidth) + 20px);
    }
}

@media (max-width: 999px) {
    #projectPage {
        padding-left: calc(var(--appNavBarLeftWidth) + var(--secondarySideBarWidth) + 20px - var(--secondarySideBarWidth));
    }
}