@charset "UTF-8";
:root {
  --primo: #f0ae00;
  --secundo: #0077b8;
  --white: #fff;
  --tone: #fff8ee;
  --light: #ffeedd;
  --dark: #222222;
  --medium: #22222240;
  --black: #000;
  --error: #ff7031;
  --success: #008b43;
  --text: "Trebuchet MS", sans-serif;
  --title: monospace;
  --base-font-size: 16px;
  --base-line-height: 1;
  --gutter: 2 * $base-font-size;
  --half-gutter: $gutter/2;
  --dur: 0.1s;
  --trans: $dur ease-in-out;
}

body.silver {
  --primo: OrangeRed;
  --secundo: CadetBlue;
  --white: #fff;
  --tone: #f8f8f8;
  --light: #f0f0f0;
  --dark: #222222;
  --medium: #22222240;
  --black: #000;
  --error: DarkSalmon;
  --success: DarkKhaki;
  --text: "Trebuchet MS", sans-serif;
  --title: monospace;
}

body.gold {
  --primo: #f0ae00;
  --secundo: #0077b8;
  --white: #fff;
  --tone: #fff8ee;
  --light: #ffeedd;
  --dark: #222222;
  --medium: #22222240;
  --black: #000;
  --error: #ff7031;
  --success: #008b43;
  --text: Sora, sans-serif;
  --title: monospace;
}

body.monochrome {
  --primo: #999;
  --secundo: #333;
  --white: #fff;
  --tone: #eee;
  --light: #ddd;
  --dark: #222222;
  --medium: #22222240;
  --black: #000;
  --error: FireBrick;
  --success: ForestGreen;
  --text: "Espresso Mono", Menlo, monospace;
  --title: monospace;
}

body.darkmode {
  --primo: Gold;
  --secundo: DarkOrange;
  --white: #333;
  --tone: #222;
  --light: #111;
  --dark: LightYellow;
  --medium: #ffd70040;
  --black: #ddd;
  --error: PeachPuff;
  --success: PowderBlue;
  --text: "Galvji", sans-serif;
  --title: monospace;
}

body.mystery {
  --primo: Olive;
  --secundo: #732402;
  --white: #fff;
  --tone: rgb(251, 250, 248);
  --light: rgb(244, 243, 241);
  --dark: #222;
  --medium: #22222240;
  --black: #000;
  --error: OrangeRed;
  --success: YellowGreen;
  --text: Kefa, sans-serif;
  --title: monospace;
}

body.paper {
  --primo: rgb(181, 212, 232);
  --secundo: white;
  --white: hsl(49, 74%, 18%);
  --tone: hsl(49, 64%, 24%);
  --light: hsl(49, 54%, 32%);
  --dark: #fff;
  --medium: #22222240;
  --black: #ddd;
  --error: rgb(249, 183, 193);
  --success: rgb(215, 245, 155);
  --text: Kefa, sans-serif;
  --title: monospace;
}

@font-face {
  font-family: "Kefa";
  src: url("/fonts/Kefa-Regular.eot");
  src: local("Kefa-Regular"), url("/fonts/Kefa-Regular.eot?#iefix") format("embedded-opentype"), url("/fonts/Kefa-Regular.woff2") format("woff2"), url("/fonts/Kefa-Regular.woff") format("woff"), url("/fonts/Kefa-Regular.ttf") format("truetype"), url("/fonts/Kefa-Regular.svg#Kefa-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Galvji";
  src: url("/fonts/Galvji.eot");
  src: local("Galvji"), url("/fonts/Galvji.eot?#iefix") format("embedded-opentype"), url("/fonts/Galvji.woff2") format("woff2"), url("/fonts/Galvji.woff") format("woff"), url("/fonts/Galvji.ttf") format("truetype"), url("/fonts/Galvji.svg#Galvji") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Galvji";
  src: url("/fonts/Galvji-Oblique.eot");
  src: local("Galvji Oblique"), local("Galvji-Oblique"), url("/fonts/Galvji-Oblique.eot?#iefix") format("embedded-opentype"), url("/fonts/Galvji-Oblique.woff2") format("woff2"), url("/fonts/Galvji-Oblique.woff") format("woff"), url("/fonts/Galvji-Oblique.ttf") format("truetype"), url("/fonts/Galvji-Oblique.svg#Galvji-Oblique") format("svg");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Galvji";
  src: url("/fonts/Galvji-BoldOblique.eot");
  src: local("Galvji-BoldOblique"), url("/fonts/Galvji-BoldOblique.eot?#iefix") format("embedded-opentype"), url("/fonts/Galvji-BoldOblique.woff2") format("woff2"), url("/fonts/Galvji-BoldOblique.woff") format("woff"), url("/fonts/Galvji-BoldOblique.ttf") format("truetype"), url("/fonts/Galvji-BoldOblique.svg#Galvji-BoldOblique") format("svg");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Galvji";
  src: url("/fonts/Galvji-Bold.eot");
  src: local("Galvji-Bold"), url("/fonts/Galvji-Bold.eot?#iefix") format("embedded-opentype"), url("/fonts/Galvji-Bold.woff2") format("woff2"), url("/fonts/Galvji-Bold.woff") format("woff"), url("/fonts/Galvji-Bold.ttf") format("truetype"), url("/fonts/Galvji-Bold.svg#Galvji-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("/fonts/Sora-Bold.eot");
  src: local("Sora Bold"), local("Sora-Bold"), url("/fonts/Sora-Bold.eot?#iefix") format("embedded-opentype"), url("/fonts/Sora-Bold.woff2") format("woff2"), url("/fonts/Sora-Bold.woff") format("woff"), url("/fonts/Sora-Bold.ttf") format("truetype"), url("/fonts/Sora-Bold.svg#Sora-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("/fonts/Sora-Regular.eot");
  src: local("Sora Regular"), local("Sora-Regular"), url("/fonts/Sora-Regular.eot?#iefix") format("embedded-opentype"), url("/fonts/Sora-Regular.woff2") format("woff2"), url("/fonts/Sora-Regular.woff") format("woff"), url("/fonts/Sora-Regular.ttf") format("truetype"), url("/fonts/Sora-Regular.svg#Sora-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "dejavu";
  src: url("/fonts/DejaVuSerif-webfont.eot");
  src: url("/fonts/DejaVuSerif-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/DejaVuSerif-webfont.woff") format("woff"), url("/fonts/DejaVuSerif-webfont.ttf") format("truetype"), url("/fonts/DejaVuSerif-webfont.svg#dejavu_serifbook") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "dejavu";
  src: url("/fonts/DejaVuSerif-Italic-webfont.eot");
  src: url("/fonts/DejaVuSerif-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/DejaVuSerif-Italic-webfont.woff") format("woff"), url("/fonts/DejaVuSerif-Italic-webfont.ttf") format("truetype"), url("/fonts/DejaVuSerif-Italic-webfont.svg#dejavu_serifitalic") format("svg");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "dejavu";
  src: url("/fonts/DejaVuSerif-Bold-webfont.eot");
  src: url("/fonts/DejaVuSerif-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/DejaVuSerif-Bold-webfont.woff") format("woff"), url("/fonts/DejaVuSerif-Bold-webfont.ttf") format("truetype"), url("/fonts/DejaVuSerif-Bold-webfont.svg#dejavu_serifbold") format("svg");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "dejavu";
  src: url("/fonts/DejaVuSerif-BoldItalic-webfont.eot");
  src: url("/fonts/DejaVuSerif-BoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/DejaVuSerif-BoldItalic-webfont.woff") format("woff"), url("/fonts/DejaVuSerif-BoldItalic-webfont.ttf") format("truetype"), url("/fonts/DejaVuSerif-BoldItalic-webfont.svg#dejavu_serifbold_italic") format("svg");
  font-weight: bold;
  font-style: italic;
}
*,
*:before,
*:after {
  position: relative;
  margin: 0;
  padding: 0;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
}

html {
  height: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  min-height: 100%;
  overflow-x: hidden;
  color: var(--dark);
  background: var(--light);
  font-family: var(--text);
}

::-moz-selection {
  background: var(--secundo);
  color: var(--tone);
}

::selection {
  background: var(--secundo);
  color: var(--tone);
}

.primo {
  color: var(--primo);
}

.secundo {
  color: var(--secundo);
}

.light {
  color: var(--light);
}

.dark {
  color: var(--dark);
}

.medium {
  color: var(--medium);
}

.error {
  color: var(--error);
}

.success {
  color: var(--success);
}

details summary {
  position: relative;
  padding: 0.5em 1em;
  display: inline-block;
  background-color: var(--light);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
details summary:before {
  content: "";
  width: 1rem;
  height: 1rem;
  margin-right: 0.5em;
  display: inline-block;
  color: var(--white);
  border-radius: 1rem;
  background-image: url(/images/actions.png);
  background-repeat: no-repeat;
  background-size: 1rem 7rem;
  background-color: var(--success);
  background-position: center -4rem;
  vertical-align: middle;
}
details[open] summary:before {
  background-color: var(--error);
  background-position: center -6rem;
}

#login {
  max-width: 256px;
  margin: 8rem auto;
}
#login h2 {
  margin-bottom: 2rem;
}
#login p.error {
  margin-bottom: 2rem;
  padding: 0.25rem 0.5rem;
  background: var(--error);
  color: var(--white);
  border-radius: 4px;
}
#login .bigbutton {
  margin-top: 2rem;
}

body.loading {
  /*opacity: .8;*/
  pointer-events: none;
  -moz-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
  /*&:after {
  	content: "";
  	position: fixed;
  	top: 0; left: 0; right: 0; bottom: 0;
  	z-index: 20;

  	display: block;

  	background: rgba($white,.05);
  }*/
}

#head,
#nav,
#aside,
#footer {
  position: fixed;
  z-index: 20;
  overflow: auto;
}

#head {
  top: 0;
  left: 0;
  right: 0;
  padding: 1.5rem 2rem;
  background: var(--light);
}

#nav {
  top: 7rem;
  left: 2rem;
  bottom: 2rem;
  width: 16rem;
  overflow: auto;
  -moz-transition: left 0.1s ease-in-out;
  transition: left 0.1s ease-in-out;
}
#nav-checker:not(:checked) + #nav {
  left: -20em;
}

#content {
  padding: 7rem 2rem 2rem 20rem;
  -moz-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
@media only screen and (min-width: 64em) {
  body.aside #content {
    padding-right: 24rem;
  }
}
#nav-checker:not(:checked) ~ #content {
  padding-left: 2rem;
}

#aside {
  top: 7rem;
  right: -22rem;
  bottom: 2rem;
  width: 20rem;
  -moz-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
body.aside #aside {
  right: 2rem;
}

#footer {
  position: fixed;
  top: 2rem;
  right: 2rem;
}
@media only screen and (max-width: 63.9375em) {
  #footer {
    top: auto;
    bottom: 2rem;
  }
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
  margin-bottom: 1em;
}

button,
input[type=submit] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
}

a {
  color: inherit;
  -moz-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
a:hover, a:focus {
  color: var(--secundo);
}
a:active {
  color: var(--primo);
}

.action {
  cursor: pointer;
}
.action.add, .action.invoice {
  background-color: var(--success);
  background-position: center 0;
}
.action.delete {
  background-color: var(--error);
  background-position: center -1rem;
}
.action.to {
  background-color: var(--primo);
  background-position: center -2rem;
}
.action.edit {
  background-color: var(--secundo);
  background-position: center -3rem;
}
.action.undo {
  background-color: var(--white);
  background-position: center -5rem;
}
.action.inactive {
  background-color: var(--medium);
}
.action.download {
  background-color: var(--primo);
  background-position: center -4rem;
}

.bigbutton {
  width: auto;
  padding: 0.5rem 0.75rem;
  color: var(--white);
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.75rem;
  text-transform: uppercase;
  -moz-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
.bigbutton:hover, .bigbutton:focus {
  color: var(--dark);
}

.button {
  width: 1rem;
  height: 1rem;
  color: var(--white);
  border-radius: 1rem;
  background-image: url(/images/actions.png);
  background-repeat: no-repeat;
  background-size: 1rem 7rem;
  font-size: 0;
  line-height: 1rem;
  vertical-align: 0.5rem;
}
.button.expenses {
  background-color: var(--error);
  background-position: center -4rem;
}
.button.invoices {
  background-color: var(--success);
  background-position: center -6rem;
}

form {
  overflow: hidden;
}

input[type=checkbox] {
  width: 0;
  height: 0;
  opacity: 0;
}
input[type=checkbox]:not(:disabled) + label {
  cursor: pointer;
}
input[type=checkbox] + label {
  -moz-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
input[type=checkbox] + label:before, input[type=checkbox] + label:after {
  content: "";
  position: absolute;
  -moz-transition: inherit;
  transition: inherit;
}
input[type=checkbox] + label:before {
  top: 0.25rem;
  left: 0;
  width: 1rem;
  height: 1rem;
  background: var(--white);
  border: 2px solid var(--dark);
  border-radius: 2px;
}
input[type=checkbox] + label:after {
  top: 0.5rem;
  left: 0.25rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--success);
  -moz-transform: scale(0);
       transform: scale(0);
}
input[type=checkbox]:checked + label:after {
  -moz-transform: scale(1);
       transform: scale(1);
}
input[type=submit] {
  /*float: right;*/
}

.input {
  display: -moz-box;
  display: flex;
  -moz-box-orient: vertical;
  -moz-box-direction: reverse;
       flex-direction: column-reverse;
  font-size: 0.75rem;
}
.input + .input {
  margin-top: 1rem;
}
.input label {
  margin-bottom: 0.5rem;
}
.input input,
.input select,
.input textarea {
  padding: 0.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: var(--secundo);
  background: var(--white);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: 0;
  font-size: inherit;
  font-family: var(--text);
}
.input input::-webkit-input-placeholder,
.input select::-webkit-input-placeholder,
.input textarea::-webkit-input-placeholder {
  color: var(--medium) !important;
}
.input input:-moz-placeholder,
.input select:-moz-placeholder,
.input textarea:-moz-placeholder {
  opacity: 1;
  color: var(--medium) !important;
}
.input input::-moz-placeholder,
.input select::-moz-placeholder,
.input textarea::-moz-placeholder {
  opacity: 1;
  color: var(--medium) !important;
}
.input input:-moz-placeholder, .input select:-moz-placeholder, .input textarea:-moz-placeholder {
  color: var(--medium);
}
.input input:placeholder-shown,
.input select:placeholder-shown,
.input textarea:placeholder-shown {
  color: var(--medium);
}
.input input:focus,
.input select:focus,
.input textarea:focus {
  background-color: var(--light);
}
.input input[required] + label:after,
.input select[required] + label:after,
.input textarea[required] + label:after {
  content: " *";
  font-weight: bold;
  color: var(--error);
}
.input input.invalid + label,
.input select.invalid + label,
.input textarea.invalid + label {
  color: var(--error);
}
.input textarea {
  min-height: 5rem;
  resize: vertical;
}
.input select {
  padding-right: 1rem;
  background-image: url(/images/select.png);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}
.input .input-date.required + label:after,
.input .input-address.required + label:after {
  content: " *";
  font-weight: bold;
  color: var(--error);
}
.input .input-date {
  display: -moz-box;
  display: flex;
}
.input .input-date select {
  -moz-box-flex: 1;
       flex: 1 0 auto;
}
.input .input-date select + select {
  margin-left: 0.25rem;
}
.input .input-address {
  display: -moz-box;
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.25rem;
}
.input .input-address input,
.input .input-address select {
  margin-left: 0.25rem;
  width: 100%;
}
.input .input-address input.street,
.input .input-address select.street {
  -moz-box-flex: 1;
       flex: 1 0 60%;
}
.input .input-address input.street-nr-box,
.input .input-address select.street-nr-box {
  -moz-box-flex: 1;
       flex: 1 0 100%;
}
.input .input-address input.nr,
.input .input-address select.nr {
  -moz-box-flex: 0;
       flex: 0 0 15%;
}
.input .input-address input.box,
.input .input-address select.box {
  -moz-box-flex: 0;
       flex: 0 0 15%;
}
.input .input-address input.code,
.input .input-address select.code {
  margin-top: 0.25rem;
  -moz-box-flex: 0;
       flex: 0 0 30%;
}
.input .input-address input.city,
.input .input-address select.city {
  margin-top: 0.25rem;
  -moz-box-flex: 1;
       flex: 1 0 50%;
}
.input.time:after {
  content: "min.";
  position: absolute;
  top: 1.875rem;
  right: 1rem;
  color: var(--secundo);
}
.input.time input {
  padding-right: 2.5rem;
  text-align: right;
}
.input.price:after {
  content: "€";
  position: absolute;
  top: 1.875rem;
  left: 0.5rem;
  color: var(--secundo);
}
.input.price input {
  padding-left: 1.5rem;
}
.input.percent:after {
  content: "%";
  position: absolute;
  top: 1.875rem;
  right: 0.5rem;
  color: var(--secundo);
}
.input.percent input {
  padding-right: 1.5rem;
  text-align: right;
}

input[type=submit] {
  background-color: var(--primo);
  border-radius: 4px;
  cursor: pointer;
}

fieldset {
  margin-bottom: 2rem;
  border: 0;
}
fieldset legend {
  margin-bottom: 1rem;
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
}

#head ul {
  display: -moz-box;
  display: flex;
  -moz-box-pack: center;
       justify-content: center;
}
@media only screen and (max-width: 39.9375em) {
  #head ul {
    padding-left: 4em;
  }
}
#head ul li {
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}
@media only screen and (max-width: 39.9375em) {
  #head ul li {
    -moz-box-flex: 1;
         flex: 1 0 1em;
    overflow: hidden;
    font-size: 0.4em;
  }
  #head ul li.active {
    color: var(--primo);
  }
  #head ul li::first-line {
    font-size: 1.8rem;
  }
}
#head ul li:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  margin-left: 0;
  width: 0;
  height: 4px;
  display: block;
  background: var(--medium);
  -moz-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
#head ul li:hover:after, #head ul li.active:after {
  margin-left: -16px;
  width: 32px;
}
#head ul li.active:after {
  background: var(--primo);
}
#head ul li + li {
  margin-left: 32px;
}
#head label {
  position: absolute;
  top: 2em;
}

#nav {
  padding-top: 0.5rem;
}
#nav ol li {
  width: 100%;
  height: 3rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  -moz-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nav ol li:nth-child(odd) {
  background: var(--tone);
}
#nav ol li span.name {
  font-weight: bold;
}
#nav ol li span.right {
  float: right;
  font-size: 0.75rem;
  line-height: 1.5;
}
#nav ol li small {
  display: block;
  color: var(--primo);
  font-size: 0.75rem;
  text-transform: uppercase;
  -moz-transition: inherit;
  transition: inherit;
}
#nav ol li:hover {
  background: var(--medium);
}
#nav ol li:hover small {
  color: var(--white);
}
#nav ol li.active {
  background: var(--primo);
}
#nav ol li.active small {
  color: var(--white);
}

header {
  margin-bottom: 3rem;
}
header small,
header time,
header address {
  display: block;
}
header small {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}
header small code {
  padding: 0.25em 0.5em;
  display: inline-block;
  color: inherit;
  background-color: var(--tone);
  border-radius: 0.25em;
  font-size: 0.625em;
  font-weight: bold;
  vertical-align: top;
}
header small code.success {
  color: var(--tone);
  background-color: var(--success);
}
header small code.error {
  color: var(--tone);
  background-color: var(--error);
}
header time,
header address {
  margin: 0.25rem 0;
  font-style: normal;
}

section + section {
  margin-top: 2rem;
}

.panel {
  padding: 0.5rem 0.75rem;
  color: var(--white);
  background: var(--primo);
  border-radius: 4px;
}
.panel__tone {
  color: inherit;
  background-color: var(--tone);
}
.panel__tone table tbody tr:nth-child(odd) td,
.panel__tone table tfoot tr:nth-child(odd) td {
  background-color: var(--white) !important;
}
.panel__tone *:last-child {
  margin-bottom: 0 !important;
}

table {
  width: 100%;
}
table thead tr th {
  padding: 0 0.75rem;
  padding-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: bold;
  text-align: left;
  text-transform: uppercase;
}
table thead tr th.check, table thead tr th.bool, table thead tr th.edit, table thead tr th.delete {
  width: 2rem;
}
table thead tr th.ratio {
  width: 4rem;
}
table thead tr th.date, table thead tr th.price {
  width: 6rem;
}
table thead tr th.phone, table thead tr th.datetime, table thead tr th.time {
  width: 8rem;
}
table thead tr th.price {
  text-align: right;
}
table tbody tr:nth-child(odd),
table tbody tr:nth-child(odd) td,
table tfoot tr:nth-child(odd),
table tfoot tr:nth-child(odd) td {
  background: var(--tone);
}
table tbody tr td,
table tfoot tr td {
  min-height: 2rem;
  padding: 0.5rem 0.75rem;
  line-height: 1rem;
}
table tbody tr td.check, table tbody tr td.edit, table tbody tr td.delete,
table tfoot tr td.check,
table tfoot tr td.edit,
table tfoot tr td.delete {
  padding: 0.75rem;
  line-height: 0.5rem;
}
table tbody tr td.price,
table tfoot tr td.price {
  text-align: right;
}
table tbody tr td.bool,
table tfoot tr td.bool {
  text-align: center;
}
table tbody tr td.total,
table tfoot tr td.total {
  font-weight: bold;
}
table tfoot {
  padding-top: 1rem;
}
table tfoot tr:nth-child(odd) td {
  border-top: 2px solid var(--primo);
  padding-top: 0.5rem;
  background: transparent;
}
@media only screen and (max-width: 63.9375em) {
  table {
    border-collapse: collapse;
  }
  table thead {
    border-bottom: 2px solid var(--primo);
  }
  table tr {
    display: -moz-box;
    display: flex;
    flex-wrap: wrap;
  }
  table tr td,
  table tr th {
    -moz-box-flex: 1;
         flex: 1 0 2em;
  }
  table tr td.time,
  table tr th.time {
    display: none;
  }
  table tr td.bool, table tr td.check, table tr td.delete, table tr td.edit,
  table tr th.bool,
  table tr th.check,
  table tr th.delete,
  table tr th.edit {
    -moz-box-flex: 0;
         flex: 0 0 2em;
    -moz-box-ordinal-group: -1;
         order: -2;
  }
  table tr td.check,
  table tr th.check {
    -moz-box-ordinal-group: -2;
         order: -3;
  }
  table tr td.name,
  table tr th.name {
    -moz-box-flex: 1;
         flex: 1 1 100%;
    margin-bottom: -0.5em;
    -moz-box-ordinal-group: 0;
         order: -1;
    font-weight: bold;
  }
  table tr td[colspan="3"],
  table tr th[colspan="3"] {
    -moz-box-flex: 2;
         flex-grow: 2;
  }
  table tr td[colspan="4"],
  table tr th[colspan="4"] {
    -moz-box-flex: 3;
         flex-grow: 3;
  }
  table tr td[colspan="5"],
  table tr th[colspan="5"] {
    -moz-box-flex: 4;
         flex-grow: 4;
  }
  table tr td[colspan="6"],
  table tr th[colspan="6"] {
    -moz-box-flex: 5;
         flex-grow: 5;
  }
}

#aside {
  padding: 0 1rem;
  background: var(--tone);
  border-bottom: 1rem solid var(--tone);
  border-top: 1rem solid var(--tone);
}
#aside button.close {
  position: absolute;
  top: 0;
  right: 1rem;
  width: 1rem;
  height: 1rem;
  color: var(--error);
  background: none;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}
#aside button.close:hover {
  color: var(--secundo);
}
#aside h3 {
  padding-right: 2rem;
}

@-moz-keyframes notification {
  0% {
    top: -5rem;
  }
  2.5% {
    top: 0;
  }
  75% {
    opacity: 1;
  }
  97.5% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}

@keyframes notification {
  0% {
    top: -5rem;
  }
  2.5% {
    top: 0;
  }
  75% {
    opacity: 1;
  }
  97.5% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes loading {
  0% {
    -moz-transform: rotate(0);
         transform: rotate(0);
  }
  100% {
    -moz-transform: rotate(360deg);
         transform: rotate(360deg);
  }
}
@keyframes loading {
  0% {
    -moz-transform: rotate(0);
         transform: rotate(0);
  }
  100% {
    -moz-transform: rotate(360deg);
         transform: rotate(360deg);
  }
}
#footer .notification {
  max-width: 20rem;
  padding: 0.5rem 0.75rem;
  color: var(--white);
  background: var(--primo);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 1rem;
  -moz-animation-name: notification;
       animation-name: notification;
  -moz-animation-duration: 15s;
       animation-duration: 15s;
  -moz-animation-fill-mode: forwards;
       animation-fill-mode: forwards;
  -moz-animation-iteration-count: 1;
       animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in-out;
       animation-timing-function: ease-in-out;
}
#footer .notification.error {
  background: var(--error);
}
#footer .notification.success {
  background: var(--success);
}
#footer .notification.loading {
  opacity: 1;
  color: var(--light);
  background: var(--light);
  -moz-animation: none;
       animation: none;
}
#footer .notification.loading:after {
  content: "";
  width: 1rem;
  height: 1rem;
  margin-left: 1rem;
  display: inline-block;
  vertical-align: baseline;
  -moz-animation: loading 0.5s linear 0s infinite;
       animation: loading 0.5s linear 0s infinite;
  border-radius: 1rem;
  /*background: $secundo; /* Old browsers *!/
  background: -moz-linear-gradient(left,  $error 0%, $light 100%); /* FF3.6+ *!/
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,$error), color-stop(100%,$light)); /* Chrome,Safari4+ *!/
  background: -webkit-linear-gradient(left,  $error 0%,$light 100%); /* Chrome10+,Safari5.1+ *!/
  background: -o-linear-gradient(left,  $error 0%,$light 100%); /* Opera 11.10+ *!/
  background: -ms-linear-gradient(left,  $error 0%,$light 100%); /* IE10+ *!/
  background: linear-gradient(to right,  $error 0%,$light 100%); /* W3C *!/
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0077B8', endColorstr='#FFFFF',GradientType=1 ); /* IE6-9 *!/*/
  background: var(--secundo); /* Old browsers */
  background: -moz-linear-gradient(left, var(--primo) 0%, var(--light) 100%); /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */
  background: linear-gradient(to right, var(--primo) 0%, var(--light) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#0077B8", endColorstr="#FFFFF",GradientType=1 ); /* IE6-9 */
  /*				background: $secundo; /* Old browsers *!/
  background: -moz-linear-gradient(left,  $secundo 0%, $light 100%); /* FF3.6+ *!/
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,$secundo), color-stop(100%,$light)); /* Chrome,Safari4+ *!/
  background: -webkit-linear-gradient(left,  $secundo 0%,$light 100%); /* Chrome10+,Safari5.1+ *!/
  background: -o-linear-gradient(left,  $secundo 0%,$light 100%); /* Opera 11.10+ *!/
  background: -ms-linear-gradient(left,  $secundo 0%,$light 100%); /* IE10+ *!/
  background: linear-gradient(to right,  $secundo 0%,$light 100%); /* W3C *!/
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0077B8', endColorstr='#FFFFF',GradientType=1 ); /* IE6-9 *!/*/
}
#footer .notification a {
  color: inherit;
}
#footer .button {
  vertical-align: top;
}