:root {
  --app-height: 100vh;
}

body {
  height: calc(var(--app-height) - 2em);
  padding: 1em;
  margin: 0;
  max-width: 600px;
}

.wrapper {
  display: grid;
  min-height: 100%;
  grid-template-rows: auto min-content 1fr min-content;
}

.header {
  width: 100%;
  text-align: center;
  height: 5.5em;
  position: sticky;
  position: -webkit-sticky;
  background-color: white; 
  z-index: 100;
  top: 0;
}
  
.img-header { 
  display: inline-block;
  float: left;
  height: 6em;
} 
  
.img-header img {
  height: 5em;
}  
  
a,a:visited {
    color: blue;
} 

.nav-header {
  background-color: white;
  height: 1.5rem;
  margin-top: 1em;
  a {
    font-size: 1.2rem; 
  }
  padding-bottom: .5em;
  border-bottom: 1px solid grey;
} 
  
.messages {
  width: 100%;
  background-color: #eeeeee;
} 
  
.message {
  padding-left: 1em;
}

.content-container {
  width: 100%;
  max-width: 600px;
  padding-bottom: 1em;
}
  
.footer { 
  border-top: 1px solid grey;
  text-align: center;
  padding-top: 1em;
  padding-bottom: .5em;
  width: 100%;
}   

input, textarea, select, button {
  font-family: unset;
}

button {
  margin-top: 1em;
  font-size: 1em;
}

form label {
  width: 100%;
  margin-bottom: .25em;
  margin-right: 1em;
  display: inline-block;
  text-align: left;
}
form textarea {
  font-size: 1em;
  border: 1px solid black;
  padding: .5em;
  width: 100%;
}
form label[for=id_captcha] {
  display: none;
}
form input {
  font-size: 1em;
  border: 1px solid black;
  padding: .5em;
  width: 90%;
  max-width: 30rem;
}
form .helptext {
  padding-top: .5em;
  display: block;
  font-size: smaller;
  color: #404040;
  text-align: left;
}
form input[type=checkbox] + .helptext {
  display: inline-block;
}
form label + input[type=checkbox] {
  float: left;
}
form input[type=radio] + label {
  display: inline-block;
  padding-left: .5em;
  width: calc(100% - 5em);
}
form .errorlist {
  list-style: none;
  color: red;
  padding-bottom: .5em;
  padding-inline-start: 0em;
  font-size: unset;
}
form p {
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
form p + p {
  margin-top: 1em;
}
form ul {
  font-size: smaller;
  margin-block-start: .5em;
  margin-block-end: 0em;
}
form .g-recaptcha:not(button) {
  padding-bottom: 0em;
}
form input[type=checkbox], select, input[type=radio] {
  zoom: 1.5;
  display: inline-block;
  text-align: left;
}
form select {
  width: unset;
  display: block;
}

blockquote {
  background: lightgrey;
  padding: 1em;
  margin: 1em;
}

.table-container {
  width: 100%;
} 
.table-container table {
    margin: 0 auto;
    border-collapse: collapse;
    font-size: 1rem;
    text-align: left;
    min-width: 35em;
    table-layout:auto;
    width:95%;
}
@media screen and (max-width: 40rem) {
  .table-container table {
    font-size: .9rem;
    min-width: 80vw;
  }
}
.table-container th {
  background-color: #222222; 
  color: #ffffff;
  border-bottom: 1px solid black;
} 
.table-container th,
.table-container td {
  padding: .25em .5em;
  text-align: center;
} 
.table-container tr:first-of-type th:first-child {
} 
.table-container tr:first-of-type th:last-child {
} 
.table-container tr:last-of-type th:first-child {
  border-bottom: none;
} 
.table-container tr:last-of-type:has(th) {
  border-bottom: none !important;
}   

.table-container tbody tr:first-of-type td:last-child {
  border-top: 1px solid #dddddd;
} 
.table-container tbody tr:last-of-type td:last-child {
  border-bottom: 1px solid #dddddd;
}

.table-container tbody tr {
  border-bottom: 1px solid #dddddd;
}
.table-container tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}
.table-container tbody tr:last-of-type {
  border-bottom: 2px solid #222222;
}
.table-container .smol-button {
  display: inline-block;
  color: white;
  border: none;
  padding: .15em;
  background-color: grey;
  text-decoration: none;
  margin: .2em;
}

.profile-help-text {
  text-align: center;
}

#qrPrice {
  display: inline;
  padding-left: 1em;
}

.qrpreview {
  max-width: 300px;
}

.block-paragraph .text-right {
  text-align: right;
}

.block-paragraph .text-center {
  text-align: center;
}