:root {
  --colour:#2D829E;
}
* {
  box-sizing:border-box;
  font-family:arial;
  padding:8px;
  margin:0;
  text-decoration:none;
  color:inherit;
  border-collapse:collapse;
  text-align:left;
  user-select:none;
  position:relative;
}
html,body {
  height:100%;
  width:100%;
  font-size:10pt;
  line-height:133%;
  padding:0;
}
html {
  overflow-y:scroll;
}
header {
  background:var(--colour);
  color:white;
}
script {
  display:none !important;
}
header>nav {
  text-align:right;
  margin-top:-12px;
}
header>nav>a {
  display:inline-block;
  width:50px;
  text-align:center;
}
header h1 {
  font-size:110%;
  display:inline-block;
  width:auto;
  vertical-align:top;
  margin-right:12px;
}
body.middle>div {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
body.middle>div>form {
  width:400px;
}
body>div>* + * {
  margin-top:16px;
}
b {
  padding:0;
  margin:0;
}
.table {
  display:table;
}
.table>span {
  display:table-row;
  content-visibility:auto;
  contain-intrinsic-size:0px;
  scroll-margin-top:45vh;
}
.table>span>a>i {
  padding:0;
  visibility:hidden;
}
.table>span:hover>a>i {
  visibility:visible;
}
@keyframes fadeTarget {
  from { background:yellow; }
  to { background:none; }
}
.table>span:target { 
  animation: fadeTarget 1.5s ease-in-out 0s forwards
}
.table>span:nth-child(1) {
  font-weight:bold;
  position:sticky; 
  top:0; 
  background:white; 
  z-index:2;
  box-shadow:0 1px 0 0 #000;
}
.table>span:not(:nth-child(1)):hover {
  background:lightgrey !important;
}
.table>span>a {
  display:table-cell;
  padding:12px;
  padding-right:30px;
}
.button {
  display:inline-block;
  border:1px solid black;
  border-radius:4px;
  padding:8px;
  margin:4px;
}
.table .button {
  padding:4px;
}
form {
  width:100%;
  max-width:600px;
}
form>* {
  display:block;
  width:100%;
}
input[type=checkbox] {
  display:inline;
  margin-right:8px;
  width:auto;
}
a>label {
  display:block;
  padding:0;
}
a>label,
a>label>input,
a>label>select,
a>label>textarea {
  width:calc(100% - 16px);
}
a>label>input,
a>label>select,
a>label>textarea {
  margin:8px;
}
form>label {
  padding-left:0;
  padding-bottom:0;
}
form>textarea {
  line-height:166%;
}
form>table {
  padding:0;
}
form>label>input[type=radio],
form>label>input[type=checkbox]{
  float:left;
  margin-right:4px;
}
form.inline {
  max-width:100%;
}
form.inline>* {
  display:inline-block;
  width:49%;
}
form.inline>label {
  display:none;
}
#loading,#idle {
  display:none;
  background:rgba(0,0,0,0.4);
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  line-height:100%;
  text-align:center;
  font-size:160%;
}
body>nav>*,
body>nav>a {
  display:inline-block;
  width:32%;
  text-align:center;
}
body>nav>form {
  padding:0;
  width:auto;
}
body>nav>form>input[type=submit] {
  display:none;
}
body>nav>a[href^='/crud.update'],
body>nav>a[href^='/crud.delete'] { 
  color:green; 
}
@media (min-width:800px) {
  header>nav {
    width:auto;
    float:right;
  }
  body.menu>nav {
    text-align:center;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width:100%;
  }
  body>nav>a {
    width:auto;
  }
  body:not(.menu)>nav>a>br {
    display:none;
  }
  form.inline>* {
    width:140px; 
  }
}