body {

padding: 0;
margin: 0;
width: 100%;

}

body > header nav {

width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 24px;
display: flex;
flex-wrap: wrap;
align-items: center;
min-height: 88px;

}

header nav .menubutton {

margin-left: auto;

}

header .logo {

margin-right: 8px;

}

header .logo svg {

width: 24px;
height: 24px;
fill: none;
stroke: rgba(var(--color-blue-500), 1);
stroke-width: 1;
vertical-align: middle;

}

header .is-link {

text-transform: none;
text-decoration: none;
font-size: 1rem;
letter-spacing: 0;
font-weight: 400;
padding: 0 16px;
margin: 0;
min-height: 24px;
color: rgba(var(--color-grey-700), 1);

}

header .is-hover {

background: rgba(var(--color-grey-50), 1);

}

main {

width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;

}

main h2 {

word-break: break-word;
display: flex;
gap: var(--space);

}

section {

margin-bottom: var(--space-4x);

}

.tooltip-date {

color: rgba(var(--color-grey-100), 1);

}

.card h3 {

display: flex;

}

.card h3 small {

color: rgba(var(--color-red-500), 1);

}

.card h3 small.is-success {

color: rgba(var(--color-green-500), 1);

}

.card h3 a {

margin-left: auto;
font-weight: 400;
font-size: 1rem;

}

.card table {

margin: 0 -24px -24px;
width: calc(100% + 48px);

}

td a {

word-break: break-word;

}

td.number {

text-align: right;
font-variant-numeric: tabular-nums;

}

div.is-empty {

display: flex;
  align-items: center;
justify-content: center;
height: calc(100% - 72px);
width: 100%;
color: rgba(var(--color-grey-300), 1);

}

body > footer {

max-width: 1280px;
margin: 48px auto 0;
padding: 24px;

}

body > footer ul {

margin: 0;
list-style-type: none;
padding: 0;

}

body > footer .card {

margin: 0;
background: rgba(var(--color-grey-50), 1);

}

body > footer .card p {

padding: 0 0 2px;
color: rgba(var(--color-grey-400), 1);

}

@media (max-width: 480px) {

header nav .menubutton {
  margin-top: 24px;
}

[role="dialog"] {
  min-width: 280px;
}

}

details form {

padding: var(--space-3x) ;
padding-top: 0;

}