html {
  font-size: 62.5%; 
}
body {
  line-height: 1.6;
  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 margin: 0 auto;
 line-height:1.5;
 font-size:16px;
 padding: 1em 1em;
 color: #444;
 max-width: 100rem;
}
body#body-admin {
  width:95%;
}

@media (min-width: 1000px) {
  .extra-wide { margin:0 -150px; }
}

.indent-1 { padding-left: 30px }
.indent-2 { padding-left: 60px }
.indent-3 { padding-left: 90px }

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  }
h2 { font-size: 3.6rem; line-height: 1.25; }
h3 { font-size: 3.0rem; line-height: 1.3;  }
h4 { font-size: 2.4rem; line-height: 1.35; }
h5 { font-size: 1.8rem; line-height: 1.5;  }
h6 { font-size: 1.5rem; line-height: 1.6;  }

.maxlh { line-height: 2em }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

h4 a {text-decoration: none; color: #444}

p {
  margin-top: 0; }

.bk-silver { background:#eee }
.bk-alert { background:#ffa; }
.bk-alert-red { background:#faa; }

.dash-nav span:after { content: ""; flex: 1 1; border-bottom: 2px solid #000; margin: auto; }

a { color: #0000cc; }

.hide {display:none}

button {border:none; color:white; padding:0.5rem 1rem; border-radius:2px; vertical-align:middle}
.btn-lg {border:none; color:white; padding:1rem 2rem; border-radius:2px; vertical-align:middle; font-size:2rem; text-decoration:none}
.btn-full {width:95%}
.btn-md {border:none; color:white; padding:0.5rem 1rem; border-radius:2px; vertical-align:middle; font-size:1.5rem; text-decoration:none}
.btn-compact {padding:0.25rem 0.5rem; text-decoration:none}
.green {background:#21a256}
.blue {background:#5352ed}
.red {background:#ff4757}
.orange {background:#ffa502}
.lime {background:#bfff00; color:#444}
.silver {background:#ddd; color:#444}
.trans {background:transparent; color:#444}
.gray {background:#aaa}

button:disabled {background:#ddd; color:#444; font-style:italic}

.text-light {color:#aaa}
.va-top {vertical-align:top}

audio {height:30px; min-width:150px; width:100%;}

hr {border:0; border-bottom:1px solid #ccc; margin:2rem 0; padding:0}

.border-bottom {border-bottom:1px solid #ccc}
.border-left {border-left:1px solid #ccc}

h3 a {color:#444}
h5 a {color:#444}
h5 small {font-size:0.7em; margin-right:0.1em}
h2 small {font-size:0.5em;}

ul {margin-bottom: 3rem }

label {font-weight:bold}
input[type=text] {border:1px solid #ccc; border-radius:2px; padding:0.6rem; margin:0; vertical-align:bottom; display:inline-block; width: 100%}
input[type=number] {border:1px solid #ccc; border-radius:2px; padding:0.6rem; margin:0; vertical-align:bottom; display:inline-block; width: 100%}
input[type=tel] {border:1px solid #ccc; border-radius:2px; padding:0.6rem; margin:0; vertical-align:bottom; display:inline-block; width: 100%}
textarea {display:block; width:100%; padding: 0.6rem}
textarea:read-only {background:#ddd}
input[type=search] {border:1px solid #ccc; padding:0.4rem; margin:0; vertical-align:bottom;}
button.btn-rsquare {border-radius:0px 2px 2px 0px}
input:read-only {background:#eee}

blockquote { background: #f9f9f9; border-left: 10px solid #eee; margin: 1em 0.5em; padding: 0.5em 0.75em; font-size:1.3em }
blockquote p { display: inline; }

.sticky { position: sticky; top:0; }

.mcenter { margin: 0 auto; }
.narrow-content {width:75rem}
@media (max-width:950px) {
    .narrow-content {width:auto}
}
@media (max-width:700px) {
    .narrow-content {width:auto}
}

.gridheader {
     display:grid;
     grid-template-columns: 50rem 1fr;
     grid-column-gap: 2rem;
     grid-row-gap: 2rem;
     align-items:end;
     border-bottom: 1px solid #ddd;
}

.gridheader h4 {display:inline-block}

.gridheader a { text-decoration: none }

@media (max-width:700px) {
    .gridheader { grid-template-columns: 1fr; text-align:center }
    .gridheader h4 {text-align:center; display:block}
}



.gridleftright {
     display:grid;
     grid-column-gap: 2rem;
     grid-row-gap: 2rem;
}

.gvcenter { align-items:center }

img {max-width:100%; height:auto}

.g1-4 { grid-template-columns: 1fr 4fr; }
.g1-3 { grid-template-columns: 1fr 3fr; }
.g1-2 { grid-template-columns: 1fr 2fr; }
.g1-1 { grid-template-columns: 1fr 1fr; }
.g2-1 { grid-template-columns: 2fr 1fr; }
.g3-1 { grid-template-columns: 3fr 1fr; }
.g4-1 { grid-template-columns: 4fr 1fr; }
.g0-3-1 { grid-template-columns: 3rem 3fr 1fr; }
.g0-1-1 { grid-template-columns: 3rem 1fr 1fr; }
.g0-3-2-1 { grid-template-columns: 3rem 3fr 2fr 1fr;  }
.g1-1-1 { grid-template-columns: 1fr 1fr 1fr; }
.g1-2-1 { grid-template-columns: 1fr 2fr 1fr; }
.g2-1-1 { grid-template-columns: 2fr 1fr 1fr; }
.g3-1-1 { grid-template-columns: 3fr 1fr 1fr; }

.ib {display:inline-block}

@media (max-width:700px) {
    .gridleftright:not(.griduniform) {grid-template-columns: 1fr;}
    .gridleftright .text-right {text-align:center}
}
.showonmobile {display:none}
@media (max-width:700px) {
    .hideonmobile {display:none}
    .showonmobile {display:block}
}

@media (min-width:700px) {
    .hideondesktop {display:none}
}

@media (min-width:700px) and (max-width:950px) {
    .hideontab {display:none}
}

.text-big {font-size:1.1em}
.pull-right {float:right}
.text-center {text-align:center}
.text-bold {font-weight:bold}
.text-right {text-align:right}
.text-right-all {text-align:right}
.font-mono {font-family:monospace}
.text-small {font-size:0.9em}

h3 small {font-size:0.7em}


.mbhalf {margin-bottom:0.5rem}
.mb1 {margin-bottom:1rem}
.mb2 {margin-bottom:2rem}
.mb3 {margin-bottom:3rem}
.mb5 {margin-bottom:5rem}
.mthalf {margin-top:0.5rem}
.mt1 {margin-top:1rem}
.mt2 {margin-top:2rem}
.mt5 {margin-top:5rem}
.pt1 {padding-top:1rem}
.pb1 {padding-bottom:1rem}
.pb2 {padding-bottom:2rem}
.pxhalf {padding:0 0.5rem}
.px1 {padding:0 1rem}
.px2 {padding:0 2rem}
.pyhalf {padding:0.5rem 0}
.py1 {padding:1rem 0}
.py2 {padding:2rem 0}
.p1 {padding:1rem}
.phalf {padding:0.5rem}
.mxhalf {margin:0 0.5rem}
.mx1 {margin:0 1rem}
.mx2 {margin:0 2rem}
.strike {text-decoration:line-through}
.bg-white {background:white}

.odd-even:nth-child(odd) {background:white}
.odd-even:nth-child(even) {background:#eee}

thead {font-weight:bold; background:#ddd;}
thead a {color:#444}

.div-table {
    overflow-x:auto;
}

table {
  width:100%;
  min-width:400px;
  border-collapse: collapse;
  border-spacing: 0;
}

th {padding:0.4rem 1rem; text-align:left}

td {
  padding: 0.2rem 1rem;
  text-align: left;
  margin: 0;
}

table.tdpad td form span::after { content:"..." }

table.tdhide td {display:none}

table.tdfirst td:first-child {display:block}
table.tdsecond td:nth-child(2) {display:block}
table.tdthird td:nth-child(3) {display:block}
table.tdthirdlast td:nth-last-child(3) {display:block}
table.tdsecondlast td:nth-last-child(2) {display:block}
table.tdlast td:last-child {display:block}

.td50 { width:50%; }
.td60 { width:60%; }
.td70 { width:70%; }

td p {margin:0}

.mb1 {margin-bottom:1rem}
.mb2 {margin-bottom:2rem}
.mb3 {margin-bottom:3rem}

tr:nth-child(even) {
  background-color:#f2f2f2
}

tr:target {background:#ffc}

.color-oppose { background:red; color:white; padding:0.2rem 0.5rem}
.color-support { background:#0c0; color:white; padding:0.2rem 0.5rem }
.color-neutral { background:#daa520; color:white; padding:0.2rem 0.5rem }

.label { font-size:0.9em; display: block; color:white; padding:0.2rem 0.5rem }
.label-red { background:red; }
.label-green { background:#0c0; }
.label-blue { background:#44c; }
.label-yellow { background:#daa520; }


@media (max-width:700px) {
    .label { display: inline-block }
}

@media (min-width: 950px) {
   .div-td { max-width:90rem; }
   .div-td-half { max-width:45rem }
   .div-td-quarter { max-width:22rem }
}

.nomargin {margin:0}
.mbhalf {margin-bottom:0.5rem}
.mb1 {margin-bottom:1rem}
.mb2 {margin-bottom:2rem}
.mb3 {margin-bottom:3rem}
.mb5 {margin-bottom:5rem}
.mthalf {margin-top:0.5rem}
.mt1 {margin-top:1rem}
.mt2 {margin-top:2rem}
.mt5 {margin-top:5rem}
.pt1 {padding-top:1rem}
.pb1 {padding-bottom:1rem}
.pb2 {padding-bottom:2rem}
.pxhalf {padding:0 0.5rem}
.px1 {padding:0 1rem}
.px2 {padding:0 2rem}
.mxhalf {margin:0 0.5rem}
.mx1 {margin:0 1rem}
.mx2 {margin:0 2rem}

form {}
form.nocss {width:100%}

table form {width:auto}
@media (max-width:700px) {
    form {width:95%}
}

.text-black {color:#444}
.text-semilight {color:#888}
.text-semilight a {color:#888}
.text-lignt {color:#aaa}

#mainpic { width:100%; height:60rem; object-fit:cover }
a.active {text-decoration:none; color:#444; font-weight:bold}
.htmx-request {opacity:0.33}

.action {cursor:pointer}
.action:hover {text-decoration:underline; color:black}