.left   { text-align:left; }
.right  { text-align: right; }
.center { text-align: center; }
.top    { vertical-align: top; }
.bottom {vertical-align: bottom; }
.middle { vertical-align: middle; }

.red    { color:red; }
.green  { color:green; }
.blue   { color:blue; }
.yellow { color:yellow; }
.black  { color:black; }

.b, .bold, .strong { font-weight:bold; }
.i, .em            { font-style: italic; }
.u, .underline     { text-decoration: underline; }
.nowrap            { white-space :nowrap; }


.wrapper { display: inline-block; vertical-align:top;}
.padded  { padding: 20px; }
.clear   { clear: both; }
.hidden { display:none; }
.preformatted { font-family: monospace; white-space: pre;}

table.settings { margin: 10px; }
table.settings td, table.settings td a { font-size: 18px; }
table.settings tr td { text-align:left; white-space:normal;}
table.settings tr td:first-child { text-align:right; vertical-align:top; padding-right:10px; white-space:nowrap;}
table.settings tr td:first-child label:after { content: ":"; }

div.settings {
  display:grid !important;
  grid-template-columns: max-content auto;
  grid-gap: 5px;
  margin: 10px;
}
div.settings > *:nth-child(odd)  { justify-self:right }
div.settings > *:nth-child(even) { justify-self:left }
div.settings > label:nth-child(odd),
div.settings > *:nth-child(odd) label      { display:flex; align-items: center; text-align:right;}
div.settings > label:nth-child(odd):after,
div.settings > *:nth-child(odd) label:after { content: ":"; }
div.settings > label.left { justify-self: left; }
div.settings > label.right { justify-self: right; }
div.settings > label.center { justify-self: center; }
div.settings > label.left:after,
div.settings > label.right:after,
div.settings > label.center:after { content: ""; }
/* div.settings * { vertical-align: middle; } DGR Fixing vertical alignment */

/* div.oldsettings */
div.oldsettings { display: block; margin: 5px; text-align:left;}
div.oldsettings > * { display: block; text-align: left; margin:0px 5px; max-width: 100%; }
div.oldsettings > *:nth-child(odd)  { margin-top:7px; }
div.oldsettings > label:nth-child(odd):after,
div.oldsettings > *:nth-child(odd) label:after { content: ":"; }
div.oldsettings * { vertical-align: middle; }

@media (min-width: 700px) {
  div.oldsettings {
    display:grid !important;
    grid-template-columns: max-content auto;
    grid-gap:5px;
    margin:10px;
  }
  div.oldsettings > *:nth-child(odd)  { display: inline-block; justify-self:right; margin:0; }
  div.oldsettings > *:nth-child(even) { display: inline-block; justify-self:left; margin:0; }
  div.oldsettings > label:nth-child(odd),
  div.oldsettings > *:nth-child(odd) label { display:flex; align-items: center; text-align:right;}
}

div.buttons {
  display: block;
  text-align: center;
  vertical-align: middle;
  margin: 10px
}
table tr spaced td,
table tr pad-top td { padding-top: 20px;}
table tr pad-bottom td { padding-bottom: 20px;}



dl.faq dd                 { display:block; color: #000000; font-size: 18px; text-decoration:none; margin:10px; padding:0px; }
dl.faq dd:before          { content: "⊕ "; }
dl.faq dd.selected:before { content: "⊖ "; }
dl.faq dd:hover           { cursor: pointer; color: #3497d8; }
dl.faq dt                 { display:none;  }
dl.faq dt.selected        { display:block; margin:20px; padding:0px;
                            font-size: 18px; font-weight:normal; color: #3497d8; text-decoration:none;
                            -webkit-transition: .25s; /* Safari */
                            transition: .25s;
                          }

div.error { text-align:center; color:red; font-weight: bold; }

.float-right { display:inline-block; float:right; }
.float-left { display:inline-block; float:left; }

img.zoom, .zoom img {
  transition: all .25s ease-in-out;
  text-decoration:none;
  border:none;
}
img.zoom:hover, .zoom:hover img {
  transform: scale(1.2);
  text-decoration:none;
  border:none;
}
i.zoom {
  transition: all .25s ease-in-out;
  padding:.2em;
}
i.zoom:hover {
  font-size: 1.2em;
  padding: 0;
}