body {
	margin: 0;
	font-family: arial, sans-serif;
	background-color: #fcfcfc;
}
.content {
	background-color: #fff;
	width: 75%;
	max-width: 1200px;
	margin: 4em auto 2em;
	padding: 3em;
	box-shadow: 0 1px 1px rgb(0 0 0 / 11%), 0 2px 2px rgb(0 0 0 / 11%), 0 4px 4px rgb(0 0 0 / 11%), 0 6px 8px rgb(0 0 0 / 11%), 0 8px 16px rgb(0 0 0 / 11%);
}
#header {
	margin: 4em auto;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	flex-wrap: wrap;
    width: calc(75% + 6em);
    max-width: calc(1200px + 6em);
}
#header img {
	height: 100%;
}
#logo-csb {
	height: 65px;
}
#logo-brainmill {
	height: 45px;
}
#breadcrumbs {
    display: block;
    position: fixed;
    position: sticky;
    width: 100%;
    z-index: 9999;
    padding: .75em 1em .5em;
    background-color: transparent;
    background-image: linear-gradient(40deg,#016975,#24d2be);
    border-bottom-left-radius: .25em;
    border-bottom-right-radius: .25em;
    cursor: default;
    color: #fff;
    top: 0;
    box-sizing: border-box;
}
#breadcrumbs>.breadcrumb {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
    border-radius: .25rem;
    margin: 0;
}
#breadcrumbs>.breadcrumb>.breadcrumb-item {
    margin-right: .5rem;
    padding: 0;
}
#breadcrumbs>.breadcrumb>.breadcrumb-item a {
    border: none;
    color: inherit;
    text-decoration: none;
}
#breadcrumbs>.breadcrumb>.breadcrumb-item:not(.active):after {
    content: "/";
    margin-left: .5rem;
    color: #ccc;
}
#breadcrumbs>.breadcrumb>.breadcrumb-item.active {
    color: #ccc;
}

table {
	border-collapse: collapse;
	width: 100%;
	box-shadow: 0 1px 2px rgba(0,0,0,0.07),
		0 2px 4px rgba(0,0,0,0.07),
                0 4px 8px rgba(0,0,0,0.07),
                0 8px 16px rgba(0,0,0,0.07),
                0 16px 32px rgba(0,0,0,0.07),
		0 32px 64px rgba(0,0,0,0.07);
}
td, th {
	text-align: left;
	padding: 8px;
}
tr:nth-child(even) {
  background-color: #dddddd;
}

tr.completed > td:last-child {
	background-color: #61ff90b0;
}
tr.inProgress > td:last-child {
	background-color: #ff6161b0;
}
tr.notStarted > td:last-child {
	background-color: #e7ff61b0;
}

@media screen and (max-width: 500px) {
	.content {
		width: calc(100% - 6em);
		margin: 0;
	}
	td, th {
		padding: 4px;
	}
}