body, div, article, aside, footer, header, nav, section, form, fieldset, h1, h2, h3, h4, figure, figcaption {
  margin: 0;
  padding: 0;
  border: none;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

input, textarea, select {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

article, aside, footer, header, nav, section, figure, figcaption {
  display: block;
}

ul, p {
  margin: 0;
}

html, body {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

#message {
  display: none;
  border: 1px solid transparent;
  margin-top: 1em;
  padding: 1em 2em;
  text-align: left;
}

#message[d-status] {
  display: block;
}

#message[d-status=info] {
  border-color: #3366CC;
  background: #3366CC22;
}

#message[d-status=warning] {
  border-color: #FF9900;
  background: #FF990022;
}

#message[d-status=alert] {
  border-color: #DC3912;
  background: #DC391222;
}

#message[d-status=success] {
  border-color: #109618;
  background: #10961822;
}

#pending {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  padding: 5%;
  top: 0;
  left: 0;
  background: #00000055;
  text-align: center;
  z-index: 10;
}

#pending[d-active] {
  display: block;
}

#pending::after {
  content: "";
  display: inline-block;
  width: 2.8em;
  height: 2.8em;
  border: 0.4em solid;
  border-color: #888 #888 #888 transparent;
  border-radius: 50%;
  margin: 0;
  line-height: 10em;
  -webkit-animation: spin 1s infinite;
     -moz-animation: spin 1s infinite;
          animation: spin 1s infinite;
}

@-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
   @-moz-keyframes spin { 100% {    -moz-transform: rotate(-360deg); } }
        @keyframes spin { 100% {         transform: rotate(-360deg); } }

body > header {
  text-align: center;
}

body > header > nav ul {
  padding: 0;
}

body > header > nav li {
  display: inline-block;
}

button {
  border: 0;
  border-radius: 5px;
  padding: 0.5em 1em;
}

section {
  margin-top: 1em;
}

table {
  border-collapse: collapse;
  border: none;
  width: 100%;
}

thead {
  font-weight: bold;
  border-bottom: 2px #333 solid;
}

tr:not(:first-child) {
  border-top: 1px #AAA solid;
}

tr:hover {
  background: #DDD;
}

th, td {
  padding: 0.5em;
  text-align: center;
}

h1 {
  font-size: 1.5em;
}

h2 {
   font-size: 1.2em;
}

.modal {
  display: none;
  position: fixed;
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 2em 5%;
  top: 0;
  left: 0;
  background: #00000055;
  text-align: center;
  z-index: 2;
}

.modal > *:first-child {
  display: block;
  position: relative;
  width: 100%;
  max-height: 90vh;
  border-radius: 0.5em;
  padding: 1em 2em;
  margin: 0 auto;
  background: #FFF;
  overflow-y: scroll;
}

.modal[d-active] {
  display: block;
}

.close {
  position: absolute;
  padding: 0;
  right: 1.2em;
  top: 0.5em;
  width: 1.2em;
  height: 1.2em;
  opacity: 0.3;
}

.close:hover {
  opacity: 1;
}

.close::before, .close::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  height: 141%;
  width: 2px;
  background-color: #999;
}

.close::before {
  transform: rotate(45deg);
}

.close::after {
  transform: rotate(-45deg);
}

fieldset {
  padding: 0.5em;
}

fieldset:not(:first-of-type) {
  border-top: 1px #CCC solid;
}

fieldset.f-grid {
  display: grid;
  grid-template-columns: minmax(10%, 8em) 1fr;
  align-items: center;
}

fieldset.f-grid textarea {
  min-height: 20em;
}

fieldset.f-button-set {
  padding-top: 1em;
  text-align: center;
}

fieldset > div.f-checkbox-set {
  text-align: left;
}

label {
  text-align: right;
  padding-right: 0.5em;
}

label.required::before {
  content: '*';
  padding-right: 4px;
  color: #F00;
}

label.for-check {
  display: inline-block;
  text-align: left;
}

label.for-check:not(:last-child) {
  margin-right: 1em;
}

label.for-check > input[type=checkbox] {
  margin-right: 0.5em;
}

button {
  background: #3366CC;
  color: #FFF;
  cursor: pointer;
}

button.secondary {
  background-color: #555;
}

section[d-success] {
  text-align: center;
}

section[d-success] > section {
  margin-bottom: 1em;
}

section[d-success]::before {
  content: '';
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490.05 490.05"><path d="M418.275 418.275c95.7-95.7 95.7-250.8 0-346.5s-250.8-95.7-346.5 0-95.7 250.8 0 346.5 250.9 95.7 346.5 0zm-261.1-210.7 55.1 55.1 120.7-120.6 42.7 42.7-120.6 120.6-42.8 42.7-42.7-42.7-55.1-55.1 42.7-42.7z" fill="%23109618"/></svg>');
  display: block;
  width: 10em;
  height: 10em;
  margin: 0 auto 2em auto;
}

*[d-sort]::after {
  content: '';
  position: absolute;
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
}

*[d-sort=none]::after {
  background-image: url('data:image/svg+xml,<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M31.98 53.492 15.246 36.757l2.1-2.1L31.989 49.3l14.705-14.705 2.092 2.092L31.98 53.492zm.044-42.987L48.759 27.24l-2.101 2.1-14.643-14.643-14.704 14.705-2.092-2.092 16.805-16.805z" fill="%23ddd" fill-rule="nonzero"/><g transform="rotate(30 891.034 -1100.689) scale(.73707)"/><g transform="rotate(30 955.054 -861.759) scale(.73707)"/><g transform="translate(-1087.99 -382.646)"/></svg>');
}

*[d-sort=down]::after {
  background-image: url('data:image/svg+xml,<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M31.98 53.492 15.246 36.757l2.1-2.1L31.989 49.3l14.705-14.705 2.092 2.092L31.98 53.492z" fill-rule="nonzero"/><path d="M32.024 10.505 48.759 27.24l-2.101 2.1-14.643-14.643-14.704 14.705-2.092-2.092 16.805-16.805z" fill="%23ddd" fill-rule="nonzero"/><g transform="rotate(30 803.608 -949.263) scale(.73707)"/><g transform="rotate(30 867.628 -710.333) scale(.73707)"/><g transform="translate(-1023.99 -318.646)"/></svg>');
}

*[d-sort=both]::after {
  background-image: url('data:image/svg+xml,<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M31.98 53.492 15.246 36.757l2.1-2.1L31.989 49.3l14.705-14.705 2.092 2.092L31.98 53.492zm.044-42.987L48.759 27.24l-2.101 2.1-14.643-14.643-14.704 14.705-2.092-2.092 16.805-16.805z" fill-rule="nonzero"/><g transform="rotate(30 891.034 -1100.689) scale(.73707)"/><g transform="rotate(30 955.054 -861.759) scale(.73707)"/><g transform="translate(-1087.99 -382.646)"/></svg>');
}

*[d-sort=up]::after {
  background-image: url('data:image/svg+xml,<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M31.98 53.492 15.246 36.757l2.1-2.1L31.989 49.3l14.705-14.705 2.092 2.092L31.98 53.492z" fill="%23ddd" fill-rule="nonzero"/><path d="M32.024 10.505 48.759 27.24l-2.101 2.1-14.643-14.643-14.704 14.705-2.092-2.092 16.805-16.805z" fill-rule="nonzero"/><g transform="rotate(30 803.608 -949.263) scale(.73707)"/><g transform="rotate(30 867.628 -710.333) scale(.73707)"/><g transform="translate(-1023.99 -318.646)"/></svg>');
}