﻿/*$app-mediumgrey: #48535C;
$app-darkgrey: #3E4851;*/
.dashboard {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 1rem; }
  .dashboard .flexi {
    margin: 0 -0.5rem !important;
    display: flex;
    flex-wrap: wrap; }
    .dashboard .flexi > div {
      max-width: calc(50% - 2rem);
      margin: 0.5rem 0.5rem;
      padding: 0.5em; }
    .dashboard .flexi > div.full {
      max-width: 100%;
      width: 100%; }
  .dashboard .dashboard-count {
    font-family: 'Lato', sans-serif;
    text-align: center;
    cursor: pointer;
    opacity: 0.5; }
    .dashboard .dashboard-count a, .dashboard .dashboard-count a:active, .dashboard .dashboard-count a:visited, .dashboard .dashboard-count a:hover {
      text-decoration: none; }
    .dashboard .dashboard-count .number {
      font-weight: 300;
      font-size: 2em; }
    .dashboard .dashboard-count .description {
      font-weight: 400; }
    .dashboard .dashboard-count.active {
      opacity: 1; }
  .dashboard .dashboard-count.red {
    background-color: #F05050; }
    .dashboard .dashboard-count.red .number {
      color: #ffffff; }
    .dashboard .dashboard-count.red .description {
      color: #ffffff; }
  .dashboard .dashboard-count.white {
    background-color: #ffffff; }
    .dashboard .dashboard-count.white .number {
      color: #50CAE8; }
    .dashboard .dashboard-count.white .description {
      color: #000000; }
  .dashboard .dashboard-count.blue {
    background-color: #50CAE8; }
    .dashboard .dashboard-count.blue .number {
      color: #ffffff; }
    .dashboard .dashboard-count.blue .description {
      color: #ffffff; }
  .dashboard .dashboard-count.amber {
    background-color: #ffd800; }
    .dashboard .dashboard-count.amber .number {
      color: #1C2B36; }
    .dashboard .dashboard-count.amber .description {
      color: #1C2B36; }
  .dashboard .dashboard-count.green {
    background-color: #b6ff00; }
    .dashboard .dashboard-count.green .number {
      color: #1C2B36; }
    .dashboard .dashboard-count.green .description {
      color: #1C2B36; }
  .dashboard .chart-with-legend {
    display: flex; }
    .dashboard .chart-with-legend .chart-box {
      width: 60%; }
    .dashboard .chart-with-legend .legend {
      width: 40%;
      margin: -0.5rem -0.5rem -0.5rem 1rem;
      padding: 1rem;
      background-color: #E5E8ED; }
  .dashboard .flexi > .calendar {
    width: 100%; }
    .dashboard .flexi > .calendar calendar {
      width: 100%; }

