body
{
    font-family: "Arial", sans-serif;
    width:90%;
    margin: 0 auto;
}
.header-text
{
    text-align:center;
    font-weight: bold;
    margin:0;
}

h1.header-text
{
  margin: 20px 0;
  font-size: 28px;
}

table
{
    border-collapse: collapse;
    border: 1px solid black;
    width: 100%;
    margin: 30px auto;
}
td, th
{
    border: 1px solid black;
    padding: 5px;
}

.activity-name-row
{
  background:black;
  color:white;
}

.activity-headers-row
{
  background:lightgrey;
  font-weight:bold;
}

.report-info
{
  margin:5px 0;
  font-size: 16px;
}

.criterion-field
{
  text-align:left;
}

.score-field, .total, .percentage
{
  text-align:center;
}

.header
{
  margin: 30px 0;
}

.content
{
  font-size: 12px;
}

.logo
{
  position:absolute;
  right:0;
  top: 30px;
  width: 100px;
}

#graph
{
  max-width: 45%;
  page-break-after: always;


}

.blue
  {
    width: 200px;
  }

@media (max-width: 1644px) {
  #graph
  {
    max-width: 100%;
    page-break-after: always;
  }

  .blue
  {
    width: 100px;
  }
}