:root {
    /* Colours */
    --c-colour-dark: #5B2A86;
    --c-colour-light: #DCF763;
    --c-shades-dark: #848C8E;
    --c-shades-medium: #BFB7B6;
    --c-shades-light: #F1F2EE;

    /* Sizes */
    --s-bar-base-height: 70px;
    --s-padding-primary: 5px;
    --s-da-icon-height: 50px;
    --s-chore-icon-height: 35px;
    --s-chore-who-icon-height: var(--s-chore-who-icon-height);

    /* Calculated */
    --s-padding-secondary: calc(var(--s-padding-primary) * 3);
    --s-bar-calculated-height: calc(var(--s-bar-base-height) - var(--s-padding-primary));
    --s-icon-calculated-y: calc((var(--s-bar-base-height) - var(--s-da-icon-height)) / 2);

    /* Defaults */
    background-color: var(--c-shades-light);
    font-family: sans-serif;
}

nav {
    position: fixed;
    background-color: var(--c-shades-dark);
    color: White;
    min-height: var(--s-bar-base-height);
    overflow: hidden;
    top: 0;
    width: 100%;
}

.da-icon {
    position: absolute;
    top: var(--s-icon-calculated-y);
    left: calc(3 * var(--s-padding-primary));
    background-image: url("/static/image/da.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    min-width: var(--s-da-icon-height);
    min-height: var(--s-da-icon-height);
}

.da-report-icon {
    position: absolute;
    top: calc(2.5*var(--s-icon-calculated-y));
    left: calc(20 * var(--s-padding-primary));
    min-width: var(--s-da-icon-height);
    min-height: var(--s-da-icon-height);
    font-size: 25px;
}

.da-nav-container {
    min-height: var(--s-bar-base-height);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.da-nav-week {
    margin-right: calc(3 * var(--s-padding-primary));
}

.da-nav-week-link {
  text-decoration: none;
}

.main {
    margin-top: var(--s-bar-base-height);
}

.da-bar-container {
    box-sizing: border-box;
    min-height: var(--s-bar-base-height);
    padding: var(--s-padding-primary) var(--s-padding-primary) 0 var(--s-padding-primary);
}

.da-bar {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--c-shades-medium);
    min-height: var(--s-bar-calculated-height);
}

.da-chore-status {
  font-size: calc(var(--s-chore-icon-height) * 0.6);
}

.da-chore-description {
  display: inline-block;
  margin-left: var(--s-padding-secondary);
}

.da-chore-who-icon {
  display: inline-block;
  font-size: calc(var(--s-chore-icon-height) * 0.75);
  margin-left: var(--s-padding-secondary);
  min-width: var(--s-chore-icon-height);
}

.da-chore-btn-poke {
    display: inline-block;
    float: right;
    margin-right: var(--s-padding-secondary);
    font-size: var(--s-chore-icon-height);
    color: var(--c-colour-dark);
    border: 1px dotted var(--c-colour-dark);
    border-radius: calc(var(--s-padding-primary) * 2);
    padding: var(--s-padding-primary);
    min-width: calc(var(--s-chore-icon-height) * 1.2);
    text-align: center;
}

.da-chore-btn-done {
    display: inline-block;
    float: right;
    margin-right: var(--s-padding-secondary);
    font-size: var(--s-chore-icon-height);
    color: var(--c-colour-dark);
    border: 1px dotted var(--c-colour-dark);
    border-radius: calc(var(--s-padding-primary) * 2);
    padding: var(--s-padding-primary);
    min-width: calc(var(--s-chore-icon-height) * 1.2);
    text-align: center;
}

.da-chore-allocation {
  display: flex;
  align-items: center;
}

.da-chore-poke-completed {
    color: var(--c-shades-dark);
}

.da-chore-poke-notifying {
    animation-duration: 2s;
    animation-name: da-an-throb;
    animation-iteration-count: infinite;
}

.da-response-container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: 1fr 8fr;
  height: 100vh;
}

.da-response-display {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.da-response-display-line {
  display: block;
  text-align: center;
  min-height: var(--s-bar-calculated-height);
}

.da-response-button {
  display: inline-block;
  margin: 0px;
  padding: 15px;
  border: 1px dotted black;
  border-radius: 5px;
  min-width: 50vw;
  text-decoration: none;
}

.da-good {
  background-color: #007700;
  color: white;
}

.da-bad {
  background-color: #AA0000;
  color: white;
}

.da-chore-status-ok {
  color: green;
  margin: 0px;
  padding: 0px;
}

.da-chore-status-fail {
  color: red;
  margin: 0px;
  padding: 0px;
}

table.da-report {
  background-color: var(--c-colour-dark);
  width: 350px;
  text-align: center;
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
}

table.da-report td, table.da-report th {
  padding: 5px 2px;
}

table.da-report-key td {
  padding: 5px 5px;
}

td.da-footnote {
  font-size: 10pt;
}

table.da-report tbody td {
  font-size: 13px;
  font-weight: bold;
  color: white;
}

table.da-report tr:nth-child(even) {
  background: var(--c-shades-dark);
}

table.da-report thead {
  background: var(--c-colour-dark);
  border-bottom: 4px solid var(--c-colour-dark);
}

table.da-report thead th {
  font-size: 19px;
  font-weight: bold;
  color: white;
  text-align: center;
  border-left: 2px solid var(--c-colour-light);
}

table.da-report thead th:first-child {
  border-left: none;
}

table.da-report tfoot td {
  font-size: 15px;
}

table.da-report tfoot .links {
  text-align: right;
}

table.da-report tfoot .links a {
  display: inline-block;
  background: var(--c-colour-light);
  color: white;
  padding: 2px 8px;
  border-radius: 5px;
}

a:active {
    color: red;
}

@keyframes da-an-throb {
    from {
        opacity: 1.0;
    }

    50% {
        opacity: 0.0;
    }

    to {
        opacity: 1.0;
    }
}