.nav-sidemenu[data-v-9869cd7c] {
  appearance: none;
  background: transparent;
}
.buns[data-v-9869cd7c] {
  border-style: solid;
  border-width: 2px;
  border-right-width: 0px;
  border-left-width: 0px;
  font-size: 1.125rem;
  color: #000;
  width: 1em;
  padding: 0.25em 0;
}
.beef[data-v-9869cd7c] {
  margin: 0px;
  border-color: currentColor;
  border-top-width: 2px;
}
[type="digit"][data-v-abef5497] {
  display: inline-block;
  vertical-align: baseline;
  text-align: center;
  width: 1.25em;
  padding: 0;
  -webkit-touch-callout: none !important;
  margin: 0 0.125em;
}
[type="digit"][data-v-abef5497]:focus {
  caret-color: transparent !important;
  background-color: #fafafa;
  border-color: currentColor;
}
[type="digit"][data-v-abef5497]:focus::placeholder {
  color: inherit;
  opacity: 0.375;
}
/* when placeholder is the inserted mspace, make sure it's wide for safari */
input[type="digit"][placeholder="\2003"][data-v-abef5497]::placeholder,
input[type="digit"][placeholder="\2014"][data-v-abef5497]::placeholder,
input[type="digit"][placeholder="\00B7"][data-v-abef5497]::placeholder {
  font-family: monospace;
}
.digit-string[data-v-af6ac7f9] {
  white-space: nowrap;
  display: inline-block;
  border-style: var(--input-border-style);
  border-radius: var(--input-border-radius);
  border-width: var(--input-border-width);
  border-color: var(--input-border-color);
  padding: 0px var(--input-padding-inline, 8px) 0px var(--input-padding-inline, 8px);
}
.digit-string[data-v-af6ac7f9]:focus-within {
  border-color: var(--clr-main);
  border-color: var(--input-border-color-highlight);
}
.digit-string > *[data-v-af6ac7f9] {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  display: inline-flex;
}
.digit-string[data-v-af6ac7f9] > :not(.digit) {
  color: var(--input-delimiter-color);
}
.digit-string > .digit[data-v-af6ac7f9] {
  border: solid 2px transparent;
  background: transparent;
  border-radius: 0;
  line-height: calc(2em - var(--input-padding-inline) + 1px);
  width: var(--input-character-width, 1.125em);
}
.digit-string > .digit[data-v-af6ac7f9]:focus {
  color: var(--clr-main);
  border-color: transparent;
  background: transparent;
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  animation: blink-uline-af6ac7f9 1s step-start infinite;
}
/* blink when focused & empty (:focus:placeholder-shown) */
.digit-string[data-v-af6ac7f9] > ::placeholder {
  color: rgba(0, 0, 0, 0.2);
}
.digit-string[data-v-af6ac7f9] > :focus:placeholder-shown::placeholder {
  opacity: 1;
  color: rgba(0, 0, 0, 0.1);
  text-decoration-color: var(--clr-main);
  animation: blink-uline-af6ac7f9 1s step-start infinite;
}
.blink-uline[data-v-af6ac7f9] {
  animation: blink-uline-af6ac7f9 1s step-start infinite;
}
@keyframes blink-uline-af6ac7f9 {
0% {
    text-decoration-color: var(--clr-main);
    text-decoration-line: underline;
}
40% {
    text-decoration-color: var(--clr-main);
    text-decoration-line: underline;
}
50% {
    text-decoration-color: transparent;
    text-decoration-line: none;
}
100% {
    text-decoration-color: transparent;
    text-decoration-line: none;
}
}
/* keep the bottoms away from the characters */
.delimiter-foreslash[data-v-af6ac7f9] {
  padding-left: 0.125em;
}
.delimiter-backslash[data-v-af6ac7f9] {
  padding-right: 0.125em;
}
.inputedit[data-v-3dbd5a5e] {
  border-style: solid;
  border-width: 1px;
  border-radius: var(--content-border-radius);
  min-width: 4ch;
  overflow: hidden;
  align-items: center;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  --adjustment: 1;
}
.inputedit[data-v-3dbd5a5e]:not(:focus-within, :hover) {
  border-color: var(--clr-clr, transparent);
}
.inputedit[data-v-3dbd5a5e]:hover,
.inputedit[data-v-3dbd5a5e]:focus-within {
  border-color: var(--clr-main);
}
.inputedit[data-type^="$"][data-v-3dbd5a5e]:before,
.inputedit[data-type^="dollars"][data-v-3dbd5a5e]:before,
.inputedit[data-type^="currency"][data-v-3dbd5a5e]:before {
  content: '$';
  padding-left: 0.25em;
}
.inputedit[data-type^="%"][data-v-3dbd5a5e]:after,
.inputedit[data-type^="percent"][data-v-3dbd5a5e]:after {
  content: '%';
  padding-right: 0.25em;
}
.inputedit[data-type][data-v-3dbd5a5e]:has(:placeholder-shown):before,
.inputedit[data-type][data-v-3dbd5a5e]:has(:placeholder-shown):after {
  content: none;
}
.inputedit input[data-v-3dbd5a5e] {
  display: inline-block;
  margin: 0px;
  border-style: solid;
  border-width: 0px;
  padding: 0px;
  padding-right: 4px;
  border-radius: 0px;
  background-color: var(--clr-clr, transparent);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: content-box;
  animation: 3s infinite trigger-3dbd5a5e;
  transform: translateZ(0px);
  transition: transform 1ms linear;
  color: inherit;
  text-align: inherit;
  font-weight: inherit;
  width: calc((var(--char-width, 0) + 0.25) * var(--adjustment, 1) * 1ch);
}
.inputedit input[data-v-3dbd5a5e]:focus {
  background-color: #fff;
  width: calc((var(--char-width, 0) + 0.25) * var(--adjustment, 1) * 1ch);
}
.inputedit input[data-v-3dbd5a5e]:placeholder-shown {
  min-width: 5ch;
}
.inputedit input[data-v-3dbd5a5e]:not(:placeholder-shown) {
  min-width: 1ch;
}
.inputedit[data-v-3dbd5a5e]:focus-within ::placeholder {
  visibility: hidden;
}
.inputedit:not([data-type^="string"]) input[data-v-3dbd5a5e]:not(:placeholder-shown) {
  font-family: 'monospace', monospace;
}
.inputedit textarea[data-v-3dbd5a5e] {
  border-color: var(--clr-clr, transparent);
  width: 100%;
  max-width: 100%;
  max-height: 4.8em;
  margin: 0;
  padding: 4px 8px 4px 4px;
  animation: 3s infinite trigger-3dbd5a5e;
  transform: translateZ(0px);
  transition: transform 1ms linear;
  color: inherit;
  text-align: inherit;
  font-weight: inherit;
}
@keyframes trigger-3dbd5a5e {
from {
    transform: translateZ(10px);
}
to {
    transform: translateZ(0px);
}
}
[data-v-3dbd5a5e]::placeholder {
  font-size: 0.875em;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: -0.025em;
}
textarea[data-v-3dbd5a5e]::placeholder {
  text-align: right;
}
.inputedit[data-v-3dbd5a5e]:not([data-error]) :not(:invalid)::placeholder {
  color: #0003;
}

.slidebox > mark { order: 2;
}
.slidebox > :last-child { order: 3;
}
.slidebox { align-items: center;
}
.slidebox >:not(mark) { padding-left: 4px; padding-right: 4px;
}
.feedback[data-v-7dcdaf4e],
.combobox[data-v-7dcdaf4e] {
  position: absolute;
  width: 100%;
  margin: 0px;
  margin-top: -8px;
  padding: 0px;
  padding-top: 8px;
  background-color: #fff;
  box-shadow: 0px 0px 8px rgb(0 0 0 / var(--sdwa, 0.1));
  --sdwa: 0.2;
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
  border-top-width: 0px;
  overflow: hidden;
  overflow-y: auto;
  border-radius: 0px  0px 12px 12px;
  z-index: 1;
  max-height: 23em;
  width: auto;
  min-width: 100%;
}
.combobox[data-v-7dcdaf4e] > :focus,
.combobox[data-v-7dcdaf4e] > :hover {
  color: var(--clr-main);
}
.combobox > *[data-v-7dcdaf4e] {
  padding: 4px  8px;
  margin: 0px;
  display: block;
  width: -webkit-fill-available;
  width: -moz-available;
  width: fill-available;
  width: fill;
  width: available;
  width: stretch;
  color: var(--clr-blk, #000);
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.inl-lbl > input ~ span.affix[data-v-7dcdaf4e],
.inl-lbl > select ~ span.affix[data-v-7dcdaf4e] {
  transform: scale(0.75) translate(0px, -0.875em);
  width: 125%;
}
input ~ .combobox[data-v-7dcdaf4e] {
  visibility: hidden;
  transition: visibility 0.25s linear;
}
input:focus ~ .combobox[data-v-7dcdaf4e],
label:focus-within input ~ .combobox[data-v-7dcdaf4e] {
  visibility: visible;
}

.control[data-v-da6b5ae9] {
        position: sticky;
        top: 0;
        color:white;
        float: right;
        background: #555;
        padding: 2px 6px 2px 8px;
        border-radius: 0.75em;
        border-radius: 6px;
        margin-left:0.5em;
        font-weight: 500;
}

output.jsonview {
      font-family:monospace;
      line-height:1.125rem;
      font-size: 0.875rem;
      padding:8px;
      display: block;
      color: grey;
      min-width: 100%;
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;
}
output.jsonview[disabled] {
      filter: grayscale(1) brightness(0.9);
}
output.jsonview > section {
      margin:-1px -8px 0;
      padding:4px 8px;
      border-top: solid 1px currentColor;
      border-bottom: solid 1px currentColor;
}
output.jsonview dt {
      color:#c6c;
      display:inline;
      margin: 0 2px 0 0 ;
      position:relative;
}
output.jsonview dt[data-trigger]:hover {
      color:#d9d;
      background:#222;
      cursor:pointer;
}
output.jsonview dt[data-trigger]:before {
      content:'+';
      position:absolute;
      left:-1.625em;
      right:-3em;
      height:1.25em;
      color:#ccc;
      padding-left: 0.5em;
      top:-0.0625em;
}
output.jsonview dt[data-trigger]:hover:before {
      color:#fff;
}
output.jsonview dt[data-trigger][open]:before {
      content:'-';
}
output.jsonview dd {
      display:inline;
      margin: 0 0 0 2px;
}
output.jsonview dd[data-float]   {color: lime;}
output.jsonview dd[data-string]  {color: thistle;}
output.jsonview dd[data-boolean] {color: orange;}
output.jsonview dd[data-null]    {color: #999;}
output.jsonview dl {
      margin: 0;
      display: inline;
}
output.jsonview > dl {
      color:#ccc;
      overflow:hidden;

      max-width: 100%;
      position: relative;
      display: inline-block;
      text-overflow: ellipsis;
}
output.jsonview dt:not([open]) + dl:after {content:none;}
output.jsonview dt:not([open]) + dl:before {
      content:'{\2026}';
      margin-left:2px;
      width:2em;
      display:inline-block;
      font-weight:bold;
      color:white;

      margin-top: -0.25em;
      vertical-align: 0.25em;
}
output.jsonview dt:not([open]) + dl[data-array]:before {
      content:'[\2026]';
}
output.jsonview dt:not([open]) + dl {
      width:2em;
      height:1rem;
      display:inline-block;
      vertical-align: middle;
      overflow:hidden;
}
output.jsonview dl[data-array] > :first-child {
      counter-reset: arrayitem;
}
output.jsonview dl[data-array] > :not(dl):not(:first-child) {
      counter-increment: arrayitem;
}
output.jsonview dl[data-array] > :first-child:before,
    /*output.jsonview dl[data-array] > *:not(dt) + dd:before,*/
    output.jsonview dl[data-array] > *:not(dl) + dd:before,
    output.jsonview dl[data-array] > dt:before {
      content: counter(arrayitem)'' !important;
      color:#777;
      margin-right: 6px;
}

    /* hide objects in arrays (to save memory on large arrays) */
output.jsonview dl[data-array] > dl {
      display:none;
}
output.jsonview dl[data-array] > [data-show][open] + dl {
      display:inline;
}
output.jsonview dl[data-array] > dt:not(data-show):after {
      content: '\2026';
      color: #fff;
}
output.jsonview dl[data-array] > [data-trigger=array ]:not(data-show):not([open]):after,
    output.jsonview dl[data-array] > [data-trigger=object]:not(data-show):not([open]):after {
      content: '{\2026}';
}

    /* numbering adjustments for large arrays */
output.jsonview dl[data-array] > dt:not([open]):after {
      margin-left: 0.25em;
}
output.jsonview dl[data-array] > dt:nth-of-type(n+101):after {
      margin-left: 0.875em;
}
output.jsonview dl[data-array] > dt:nth-of-type(n+1001):after {
      margin-left: 1.375em;
}
output.jsonview > dl > :last-child,
    output.jsonview > dl > :first-child {
      color:grey;
}
output.jsonview > dl > :first-child:after {
      content: '>>';
      display: inline-block;
      background: #222;
      padding: 0 4px 1px;
      line-height: 1;
      border-radius: 3px;
      color: DimGray;
}
output.jsonview > dl > :last-child:after {
      content: '<<';
      display: inline-block;
      background: #222;
      padding: 0 4px 1px;
      line-height: 1;
      border-radius: 3px;
      color: DimGray;
}
output.jsonview > dl:not([open]) {
      height:1.125rem;
}
output.jsonview > dl:not([open]) > * {
      display: none;
}
output.jsonview > dl:not([open]):before {
      content: ' + {\2026}';
      display: inline;
      color:white
}
output.jsonview hr {
      border: none 0px currentColor;
      border-bottom: solid 1px;
      margin: 4px -8px;
      padding: 0 8px;
}
output.jsonview dd,
    output.jsonview [data-copy],
    output.jsonview [data-clear] {
      position:relative;
}
output.jsonview dd:hover:after,
    output.jsonview [data-copy]:hover:after {
      content: 'dbl click to copy';
      position: absolute;
      color: #666;
      font-family: sans-serif;
      font-style: italic;
      font-size: 10px;
      left: 100%;
      top: 0;
      margin-left: 12px;
      line-height: 1.75em;
}
output.jsonview [data-clear]:hover:after {
      content: 'clear'attr(data-clear);
      position: absolute;
      font-family: sans-serif;
      font-style: normal;
      font-weight:600;
      text-transform:uppercase;
      font-size: 10px;
      right:0;
      top: 0;
      margin-right: 12px;
      line-height: 1.5em;
      padding: 2px 8px 1px;
      color: #fff;
      border-radius: 3px;
      background: dodgerblue;
}
output.jsonview section[data-clear]:hover:after {
      top:8px;
}
output.jsonview [data-fail],
    output.jsonview [data-done],
    output.jsonview [data-info] {
      color:grey;
}
output.jsonview [data-text] {
      color:#999;
}
output.jsonview [data-head] {
      color:#fff;
}
output.jsonview [data-cmnd],
    output.jsonview [data-cmnd-inln] {
      color:greenyellow;
}
output.jsonview [data-route],
    output.jsonview [data-login],
    output.jsonview [data-envar],
    output.jsonview [data-syntx],
    output.jsonview [data-clear] {
      color:white;
      background: #222;
      display:block;
      padding: 0 8px !important;
      margin: 4px -8px 4px;
}
output.jsonview [data-route=fail]{color:Tomato;}
output.jsonview [data-route=done]{color:Lime;}
output.jsonview [data-route]:first-child,
    output.jsonview [data-login]:first-child {
      margin-top:0;
}
output.jsonview [data-route] + [data-route],
    output.jsonview [data-route] + [data-login],
    output.jsonview [data-login] + [data-login],
    output.jsonview [data-login] + [data-route] {
      margin-top:8px;
}
[data-done][data-copy],
    output.jsonview > section > *,
    output.jsonview > *  {
      position: relative;
      overflow: hidden;
      display: inline-block;
      text-overflow: ellipsis;
      white-space: pre;
      width: 100%;
      max-width: 100%;
}
output.jsonview [data-login="0"]:before {
      content:'\1f512';
}
output.jsonview [data-login="1"]:before {
      content:'\1f511';
}
output.jsonview [data-route]:before {
      content:'\1f680';
}
output.jsonview [data-envar]:before {
      content:'\1F4BE';
}
output.jsonview [data-envar] {
      color:Gold;
}
output.jsonview [data-syntx]:before {
      content:'\1F4D8';
}
output.jsonview [data-fail]:before,
    output.jsonview [data-done]:before,
    output.jsonview [data-info]:before,
    output.jsonview [data-route]:before,
    output.jsonview [data-login]:before,
    output.jsonview [data-envar]:before,
    output.jsonview [data-syntx]:before {
      width: 1.875em;
      display:inline-block;
}
output.jsonview [data-fail]:before,
    output.jsonview [data-done]:before,
    output.jsonview [data-info]:before {content:'';}
output.jsonview [data-text],
    output.jsonview [data-head],
    output.jsonview [data-cmnd] {
      white-space: break-spaces;
      padding-left:1.875em;
      box-sizing: border-box;
      display:block;
      padding-top:0.5em;
      padding-bottom:0.5em;
}
output.jsonview [data-text]:before,
    output.jsonview [data-head]:before,
    output.jsonview [data-cmnd]:before {content:none;}
output.jsonview [data-resp_log] {
      cursor:pointer;
}
@media (max-width:599px){
output.jsonview {
        width: fit-content;
}
}
[data-growler] {
        position:relative;
}
[data-growler]:after {
      position:absolute;
      content:attr(data-growler);
      background:rgba(0,0,0,0.7);
      top:0;right:0;
      padding:10px;
      font-weight: 400;
      font-size:14px;
      line-height:1;
      white-space:pre-line;
      word-wrap:break-word;
      text-align: center;
      color:white;
      opacity:0;
      pointer-events:none;
      transform:translateY(-100%);
      border-radius:8px;
      margin:4px;
}
[data-growler]:not([data-growler=""]):after {
      animation: growl 1.0s forwards linear 1;
}
@keyframes growl {
0%   { transform:translateY(-100%);opacity:0;
}
0%   { transform:translateY( -90%);opacity:0;
}
4%   { transform:translateY(   0%);opacity:1;
}
80%  { transform:translateY(   0%);opacity:1;
}
100% { transform:translateY( -90%);opacity:0;
}
100% { transform:translateY(-100%);opacity:0;
}
}
[data-growler-type=success]:after {
      background-color:LimeGreen;
      color:#333;
}
main > aside {
  color: var(--sidemenu-color);
  background: var(--sidemenu-background);
  overflow: hidden;
  width: 80px;
}
/**F6F7F9 */
main > aside ~ section {
  --sidemenu-width: 80px;
}
main > aside:hover {
  color: var(--sidemenu-color);
  width: 280px;
  transition: width 0.25s 0.25s ease-out;
}
main > aside.minmenu {
  width: 0px;
  background-color: #fff;
  overflow: visible;
}
main > aside.minmenu .menuitem > :nth-child(n+2) {
  display: none;
}
main > aside.minmenu .menuitem > :nth-child(1) {
  width: 80px;
  max-width: none;
}
main > aside nav label,
main > aside nav :link,
main > aside nav :visited,
main > aside nav button {
  color: var(--clr-grey);
}
main > aside nav :hover,
main > aside nav :focus,
main > aside nav > :focus-within button,
main > aside nav :hover > button {
  color: var(--clr-main);
}
main > aside nav a:hover,
main > aside nav button:hover,
main > aside nav :focus {
  background-color: var(--add-main);
}
main > aside nav .router-link-active,
main > aside nav .router-link-active-parent {
  color: var(--clr-main);
  background-color: var(--add-grey);
}
main > aside nav .router-link-active,
main > aside nav .router-link-active-parent {
  background-color: var(--tnt-grey-2);
}
main > aside:hover nav label {
  transition: all 0.25s linear 0.25s;
  background-color: #fff;
  border-radius: 12px;
}
nav [disabled][data-v-5ed879b5] {
  color: var(--disabled);
  opacity: 0.5;
}
.menuitem.admin-only[data-v-5ed879b5] {
  outline: solid var(--clr-sea) 1px;
}
.admin-only[data-v-5ed879b5] {
  background-color: #00996611;
}
.admin-only.limited-release[data-v-5ed879b5] {
  background-color: #cc990033;
}
.menuitem.admin-only.limited-release[data-v-5ed879b5] {
  outline-color: var(--clr-gld);
}
.hover-trigger > button[data-v-5ed879b5] {
  position: relative;
  z-index: 2;
}
.hover-trigger > ul[data-v-5ed879b5] {
  visibility: hidden;
  opacity: 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-height: 0px;
}
main > aside:hover .hover-trigger > ul[data-v-5ed879b5] {
  transition: visibility 0s linear 0.25s, opacity 0.275s linear 0s;
}
main > aside:hover .router-link-active-parent + ul[data-v-5ed879b5],
main > aside .hover-trigger:hover > ul[data-v-5ed879b5] {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0.25s, opacity 0.375s linear 0.25s;
}
.hover-trigger > ul > *[data-v-5ed879b5] {
  position: relative;
  margin-top: -3em;
}
main > aside:hover .hover-trigger > ul > *[data-v-5ed879b5] {
  transition: margin 0.125s linear 0.25s;
}
main > aside:hover .router-link-active-parent + ul > *[data-v-5ed879b5],
.hover-trigger:hover > ul > *[data-v-5ed879b5] {
  margin-top: 0;
  transition: margin 0.125s linear 0.25s;
}
.splittop[data-v-c2e7cc12] {
  bottom: 50%;
  visibility: visible;
}
.splitbottom[data-v-c2e7cc12] {
  top: 50%;
  visibility: visible;
}
table td[data-v-c2e7cc12] {
  font-family: 'monospace', monospace;
}
.vertical-th th {
  writing-mode: sideways-rl;
  max-height: 10em;
}
.wmsrl {
  writing-mode: sideways-rl;
}
.queryeditor {
  --code-bg-color: var(--clr-333);
  --code-color: var(--clr-wht);
  --code-line-color: var(--clr-444);
  background-color: var(--code-bg-color);
  color: var(--code-color);
}
.queryeditor textarea {
  height: 100%;
  resize: none;
  color: rgba(0, 0, 0, 0);
  background: transparent;
  caret-color: skyblue;
  overflow: hidden;
}
.queryeditor textarea:focus,
.queryeditor textarea:active {
  height: 100%;
  color: rgba(0, 0, 0, 0);
}
.queryeditor textarea,
.queryeditor code {
  font-family: 'monospace', monospace;
  white-space: pre-wrap;
  line-height: 1.4em;
}
.queryeditor code {
  overflow: hidden;
  background-color: var(--code-bg-color);
  background-image: repeating-linear-gradient(transparent 0px, transparent calc(1.4em - 2px), var(--code-line-color) 1.4em);
}
.queryeditor code cite {
  color: darkseagreen;
}
.queryeditor code u {
  text-decoration: none;
  color: var(--clr-sky);
}
.queryeditor code q {
  color: var(--clr-org);
}
.queryeditor code q:before,
.queryeditor code q:after {
  content: none;
  display: none;
}
.queryeditor code b {
  color: var(--clr-lime);
  font-weight: inherit;
}
.queryeditor code i {
  color: var(--clr-ppl);
  font-style: normal;
  font-weight: inherit;
}
.queryresult thead {
  top: -1px;
  position: sticky;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
}
.queryresult th {
  padding: 4px;
  font-weight: 600;
  border: solid 1px #999;
  background: #fff;
  border-top: none 0px;
}
.queryresult td {
  padding: 4px;
  border: solid 1px #ddd;
}
.queryresult tr:hover td {
  background-color: #f9f9f9;
}
.queryresult tr td:hover {
  font-weight: 700;
  background-color: #f3f3f3;
}
.queryresult .selected-row > * {
  background-color: var(--tnt-main-2);
  border-color: #ccc;
}
.queryresult .selected-row:hover > * {
  background-color: var(--tnt-main);
}
.queryresult .selected-row > *::selection {
  background-color: var(--drk-main-2);
}
.textfrmt {
  text-align: center;
  line-height: 2;
  display: inline-block;
  vertical-align: baseline;
  padding: 0px;
  width: 1.5em;
}
.textsize:not(:first-child) {
  width: 1.5em;
}
.textsize:first-child {
  width: 1.5em;
  margin-left: 0.125em;
}
.textsize:last-child {
  width: 2em;
}
.textfrmt > * {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  font-family: georgia, serif;
  font-weight: 700;
}
.textfrmt[disabled] {
  background-color: var(--clr-clr, transparent);
  color: #000;
  pointer-events: none;
}
.textfrmt:not([disabled]) {
  background-color: var(--clr-clr, transparent);
  color: #999;
}
.textfrmt:not([disabled]):focus,
.textfrmt:not([disabled]):hover {
  background-color: var(--tnt-main);
  color: var(--clr-main);
}
.textaxis:last-child {
  text-shadow: 0px 0.25px currentColor;
}
.envlabel[data-v-1d9a5337] {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 4px 8px;
  color: white;
  background: green;
  margin: 0;
  line-height: 1;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  z-index: 10000;
  pointer-events: none;
  font-weight: 600;
  font-size: 0.75rem;
}

  /* scroll shadow */
  /* [data-scrolled="1"].flex-sdw,
  [data-scrolled="1"]>.flex-sdw {box-shadow: inset 0px 0px 6px rgb(0 0 0 / 0.15);} */
.admin-only {
        background:
            #00996611 
            repeating-linear-gradient(
                45deg,
                transparent,
                transparent 6px,
                #00000006 6px,
                #00000006 12px,
                transparent 12px
            );
            background-attachment: fixed;
}
.admin-only .inputedit {
        background: #fff;
}
.admin-only-gnd {
        background-image: repeating-linear-gradient(0deg, #f1f8f5, #f1f8f5)
}
.scrollable-x-only,
    .scrollable-y-only {
        visibility: hidden;
}
.scrollable-x ~ .scrollable-x-only,
    .scrollable-y ~ .scrollable-y-only {
        visibility: visible;
}
main > section > dialog  { order: 1;
}
main > section > header  { order: 2;
}
main > section > form,
    main > section > article { order: 4;
}
main > section > footer  { order: 6;
}
main > section:before,
    main > section:after {
        content:'';
        padding: 8px;
        visibility: hidden;
        position:relative;
        z-index: 9;
        flex-grow: 0;
        flex-shrink: 1;
}
main > section:before {
        box-shadow:0  4px 8px 0 #0001;
        margin: -16px;
        margin-bottom: 0px;
        order:3
}
main > section:after {
        box-shadow:0  -4px 8px 0 #0002;
        margin: -16px;
        margin-top: -0px;
        order:5;
}
main > section[data-scrolled="1"]:before,
    main > section[data-scrolled="1"]:after {
        visibility: visible;
}

:root {
    --content-border-radius:8px;
    --content-width:1120px;
    --content-padding:16px;
    --content-default-shadow: 0 0 4px 4px rgb(0 0 0 / 0.1);

    --input-border-radius: 8px;
    --input-border-width: 1px;
    --input-border-style: solid;
    --input-padding-inline: 8px;
    --input-button-radius: 1.25em;
    --input-border-color: var(--clr-999);
    --input-border-color-focus: var(--clr-main);
    --input-placeholder-color: rgb(0 0 0 / 0.25);
    --input-character-width: 0.9375em;
    --input-placeholder-size: 0.9375em;
    --input-border-color-highlight: var(--clr-main);
    --input-delimiter-color: var(--clr-ccc);

    /* --clr-main: var(--clr-ppl); */
    --tnt-main: var(--tnt-ppl);
    --drk-main: var(--drk-ppl);

    --app-background: #fff;

    --sidemenu-focus: var(--clr-main);
    --sidemenu-color: var(--clr-grey);
    --sidemenu-background: #F6F7F9;
    --sidemenu-background: var(--tnt-grey);
    --sidemenu-overlap:24px;

    --layout-left-margin: 48px;
    --sidemenu-width: 300px;
    --header-height: 60px;



    --clr-main-h: 255;
    --clr-main-s: 100%;
    --clr-main-l: 65%;
    --clr-main-a: 1.0;
    --clr-main-ds: 0%;
    --clr-main-dl: 0%;
    --clr-main-da: 0.0;
    --clr-main: hsl(var(--clr-main-h) var(--clr-main-s) var(--clr-main-l) / var(--clr-main-a));
    --hsl-main: var(--clr-main-h) var(--clr-main-s) var(--clr-main-l);

    --add-main: var(--add-main-1);
    --add-main-0: hsl(var(--clr-main-h) var(--clr-main-s) var(--clr-main-l) / 0.0);
    --add-main-1: hsl(var(--clr-main-h) var(--clr-main-s) var(--clr-main-l) / 0.1);
    --add-main-2: hsl(var(--clr-main-h) var(--clr-main-s) var(--clr-main-l) / 0.2);
    --tnt-main: var(--tnt-main-1);
    --tnt-main-1: hsl(var(--clr-main-h) var(--clr-main-s) calc((100% - var(--clr-main-l)) * 0.9 + var(--clr-main-l)));
    --tnt-main-2: hsl(var(--clr-main-h) var(--clr-main-s) calc((100% - var(--clr-main-l)) * 0.8 + var(--clr-main-l)));
    --tnt-main-3: hsl(var(--clr-main-h) var(--clr-main-s) calc((100% - var(--clr-main-l)) * 0.6 + var(--clr-main-l)));
    --drk-main: var(--drk-main-1);
    --drk-main-1: hsl(var(--clr-main-h) var(--clr-main-s) calc(var(--clr-main-l) + 10%));
    --drk-main-2: hsl(var(--clr-main-h) var(--clr-main-s) calc(var(--clr-main-l) + 20%));

    --clr-grey-h: 215;
    --clr-grey-s: 16%;
    --clr-grey-l: 47%;
    --clr-grey-a: 1.0;
    --clr-grey-ds: 0%;
    --clr-grey-dl: 0%;
    --clr-grey-da: 0.0;
    --clr-grey: hsl(var(--clr-grey-h) var(--clr-grey-s) var(--clr-grey-l) / var(--clr-grey-a));
    --hsl-grey: var(--clr-grey-h) var(--clr-grey-s) var(--clr-grey-l);

    --add-grey: var(--add-grey-1);
    --add-grey-1: hsl(var(--clr-grey-h) var(--clr-grey-s) var(--clr-grey-l) / 0.1);
    --add-grey-2: hsl(var(--clr-grey-h) var(--clr-grey-s) var(--clr-grey-l) / 0.2);
    --tnt-grey: var(--tnt-grey-1);
    --tnt-grey-1: hsl(var(--clr-grey-h) var(--clr-grey-s) calc((100% - var(--clr-grey-l)) * 0.9375 + var(--clr-grey-l)));
    --tnt-grey-2: hsl(var(--clr-grey-h) var(--clr-grey-s) calc((100% - var(--clr-grey-l)) * 0.8750 + var(--clr-grey-l)));
    --drk-grey: var(--drk-grey-1);
    --drk-grey-1: hsl(var(--clr-grey-h) var(--clr-grey-s) calc(var(--clr-grey-l) + 10%));
    --drk-grey-2: hsl(var(--clr-grey-h) var(--clr-grey-s) calc(var(--clr-grey-l) + 20%));

 }

.clr-main { color: var(--clr-main);}

.bdr-main { border-color: var(--clr-main);}

.gnd-main { background-color: var(--clr-main);}

.tnt-main { background-color: var(--tnt-main);}

.add-main { background-color: var(--add-main);}

.clr-grey { color: var(--clr-grey);}

.bdr-grey { border-color: var(--clr-grey);}

.gnd-grey { background-color: var(--clr-grey);}

.tnt-grey { background-color: var(--tnt-grey);}

.add-grey { background-color: var(--add-grey);}

@media(max-width:1120px){
    :root {
        --layout-left-margin: 24px;
    }
}

/*======================*

   Syntax or semantic styles
   base styling for built in elements and combinations
   Applied based on tag name or attibute.
   
 *======================*/

/* basic elements */

html { font-size:16px; }

html[data-text-size="large"] { font-size:20px; }

*, :before, :after {
    box-sizing:border-box;
}

:focus {
    outline:none;
}

a,.link {
    cursor:pointer;
    color: var(--clr-main);
    text-decoration:none;
    font-weight:500;
    outline:none;
    position:relative;
    -webkit-font-smoothing: subpixel-antialiased;
}

:link,:visited {
    color: var(--clr-main);
    -webkit-font-smoothing: subpixel-antialiased;
}

[tabindex] {outline:none;}

a:active,
a:focus,
[type="button"]:focus,
[type="submit"]:focus {
    outline:none;
}

a:active {-color: var(--clr-main);}

a:focus, a:hover { text-decoration:underline; }

[href=""]:not(:empty):not(.arrow-left):before,
[href=""].arrow-left:not(:empty):after {
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:2;
}

a *,.btn- *,button *,
[href=""] * {pointer-events:none;}

button {
    appearance: none;
    border-style: solid;
    border-width: 0;
    background-color: transparent;
    text-align: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    padding: 0;
}

h1,h2,h3,h4,h5,h6 {
    margin:0;
    font-weight:500;
    line-height:1.125;
}

h1 {font-size: 2.500rem;font-weight:600;margin:1.500rem 0 1.000rem;}

h2 {font-size: 2.000rem;font-weight:600;margin:1.500rem 0 1.000rem;}

h3 {font-size: 1.250rem;margin:0.500rem 0;}

h4 {font-size: 1.000rem;margin:0.500rem 0;}

h5 {font-size: 0.875rem;}

h6 {font-size: 0.750rem;}

p,.p,
ul,ol {
    margin:0 0 1.0em;
    font-size:1.000rem;
    line-height:1.250;
}

@media(max-width:480px){
    h1,h2,h3,h4,h5,h6 { line-height:1.2; }
    h1 {font-size: 2.000rem;}
    h2 {font-size: 1.750rem;}
    h3 {font-size: 1.250rem;}
    h4 {font-size: 1.000rem;}
    h5 {font-size: 0.875rem;}
    h6 {font-size: 0.750rem;}
    p,.p,ul,ol { line-height:1.125; }
}

hr,.hr {
    border:none 0px;
    border-top:solid 1px #ddd;
    margin:0;
}

img {max-width:100%;}

ul {
    padding:0;
    list-style-type: none;
}

ol {
    padding:0 0 0 1em;
}

ol li,
ul li {
    margin:0;
}

.bullet,
.dash {
    padding-left:0;
}

.bullet >li,
.dash   >li {
    padding-left:1em;
}

.bullet >li:before,
.dash   >li:before {
    width:1em;
    display:inline-block;
    margin-left:-1em;
}

.bullet >li:before {
    content:'\2022';
    font-size:2em;
    line-height:0.5;
    width: 0.5em;
    margin-left: -0.5em;
    margin-bottom: 0.125em;
    vertical-align: middle;
}

.dash   >li:before { content:'-'; }

table {
    border:none 0px;
    border-collapse: separate;
    border-spacing: 0;
    font-size:1.000rem;
}

table.table-fixed {table-layout:fixed;}

tr {
    border-top:solid 1px #ddd;
}

thead tr {
    border-top:none 0px;
}

td {
    border:none 0px;
    padding:2px 2px 2px 2px;
    vertical-align: middle;
    text-align:left;
}

th {
    border:none 0px;
    font-weight:500;
    text-align:left;
}

th, td, tbody, thead {
    z-index: 1;
}

th, td{
    position: relative;
}

thead, thead th:first-child {
    z-index: 3;
}

tbody, th:first-child, td:first-child {
    z-index: 2;
}

thead th {
    z-index: 2;
}

details { display:block; }

details summary {
    display:block;
    outline:none;
    cursor:pointer;
    padding-left:1em;
}

details:not([open]) > :not(summary) {display:none;}

summary:before {
    content:'\ff0b';
    width:1em;
    margin-left: -1.5em;
    position: absolute;
    text-align:left;
    color:var(--clr-main);
    font-weight: 900;
}

details[open] summary:before { content:'\ff0d';}

details.summary-only summary:before { content:none;}

summary::-webkit-details-marker { display:none; }

.hide,[hidden] {display:none;}

.hidden {visibility:hidden;}

[v-hide] {visibility:hidden;}

/* structural elements */

body {
    margin:0;
    overflow:hidden;
    position:fixed;
    left:0;right:0;top:0;bottom:0;
    font-family: primary, sans-serif; /* , custom-extended */
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: left;
    color: #2c3e50;
}

main {
    flex-direction:row;
    flex-grow:1;
    flex-shrink:0;
    display:flex;
    overflow:hidden;
}

main > section {
    flex-direction:column;
    flex-grow:1;
    flex-shrink:1;
    width: 100%;
    display:flex;
    z-index: 1;
    overflow: hidden;
}

main > section > * {
    z-index:3;
}

main > section > header:last-of-type,
main > section > footer:last-of-type {
    z-index: 2;
}

main > section > form,
main > section > article {
    flex-direction:column;
    flex-grow:1;
    z-index: 1;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: var(--app-background, white);
}

main > section > article > form {
    flex-grow:1;
    flex-shrink:0;
}

header,
footer {
    flex-grow:0;
    flex-shrink:1;
}

section > header,
section > footer {
    display:flex;
    flex-direction:row;
    overflow: hidden;
}

section > header {
    min-height:var(--header-height);
}

section > header.center > nav,
section > header.center > nav,
section > footer.center > nav,
section > footer.center > nav {
    flex-basis: 0%;
}

section > header > nav,
section > footer > nav {
    display: flex;
    flex-direction:row;
    overflow: hidden;
    flex-grow: 1;
    flex-shrink: 1;
    align-items: stretch;
}

section > header > nav:last-child:not(:first-child),
section > footer > nav:last-child:not(:first-child) {
    justify-content: flex-end;
}

section > header > nav > *,
section > footer > nav > * {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-decoration:none;
    max-width:100%;
}

section > header > nav > :focus,
section > footer > nav > :focus,
section > header > nav > :hover,
section > footer > nav > :hover {
    text-decoration:none;
}

section > header > nav > * > *,
section > footer > nav > * > * {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

section > header > nav > *,
section > footer > nav > * {
    padding-left:var(--content-padding);
    padding-right:var(--content-padding);
}

section > header > nav > :last-child:not(:first-child),
section > footer > nav > :last-child:not(:first-child) {
    padding-right:var(--content-padding);
}

/* right sidebar content */

main > aside:not(:first-child) {
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    overflow-y: auto;
    border-style: solid;
    border-width: 0px;
    border-color: #ddd;
    border-left-width: 1px;
    z-index: 1;
    width: 400px;
    max-width: 100%;
    min-width: 0;
    background: white;
    --sdwa: .3;
    box-shadow: 0 0 16px rgb(0 0 0 / var(--sdwa,.1));
}

/*==================*
  Modal Dialog
 *==================*/

dialog {
    z-index: 1000;
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    margin:0px;
    border:none;
    width: auto;
    height: auto;
    padding:16px;
    background: transparent;
    overflow:hidden;
    visibility:hidden;
    transition:visibility 0ms linear 400ms, padding-top 250ms ease-out,  opacity 0.5s ease; 

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;

    opacity: 0;
}

dialog[open] {
    opacity: 1;
    visibility:visible;
    transition:visibility 0ms linear 0ms, padding-top 250ms ease-out, opacity 0.5s ease;
}

dialog:before {
    content:'';
    position:fixed;
    z-index: 1;
    top:0;left:0;right:0;bottom:0;
    background:rgb(42 44 76 / 0.0);
    backdrop-filter: none;
    transition:background 400ms ease-in 0ms, backdrop-filter 0ms ease-in 0ms;
}

dialog[open]:before {
    background:rgb(42 44 76 / 0.6);
    backdrop-filter: blur(1.5px);/* contrast(0.5);*/
}

dialog > * {
    width: 100%;
    background:white;
    border-radius:18px;
    padding:0;
    z-index: 1;
    max-width:520px;
    max-height:720px;
    transform:translateY(100vh);
    transition:transform 100ms ease-out 0ms;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

dialog[open] > * {
    transform:translateY(0vh);
    transition:transform 100ms ease-out 200ms;
}

@media(max-height:640px) {
    .dialog-input {
        overflow: hidden;
        overflow-y: auto;
    }
    .dialog-input > * {
        flex-shrink:0;
    }
}

.dialog-alert > *,
.dialog-input > * {
    width:360px;
    max-width: 100%;
    padding:0;
    margin-top: env(safe-area-inset-top);
}

.dialog-alert,
.dialog-input {
    padding: 8px;
}

.dialog-input {
    justify-content: start;
}

.dialog-input > * {
    transform:translateY(-100vh);
}

.dialog-input h2 {font-size: 1.625rem;}

.dialog-sheet > * {
    width:640px;
    max-width: 100%;
    padding:0;
    max-height:none;
    margin-top:24px;
    margin-bottom:0;
    border-bottom-left-radius:  0px;
    border-bottom-right-radius: 0px;
    flex-grow: 1;
}

@media (max-width:520px) {
    dialog[open] {
        padding:16px;
    }
}

@media (min-width:521px) {
    dialog > * {
        max-width:500px;
        margin:30px auto 30px;
    }
}

@media (max-width:360px) {
    dialog[open] {
        padding:0px;
    }
}

dialog.dialog-sheet {
    justify-content: flex-end;
    padding:0;
    margin-top:env(safe-area-inset-top);
}

.close-corner {
    position:absolute;
    top:0;
    left:0;
    right:auto;
    padding:0;
    width:2.0em;
    height:2.0em;
    z-index: 100;
    padding:0;
    font-size:24px;
    line-height:2.0;
    font-weight:300;
    text-align:center;
    border-radius:18px 0;
    color:rgb(0 0 0 / 0.5);
    appearance: none;
    border-width: 0;
    background: transparent;
}

.close-corner.close-right {
    left:auto;
    right:0;
    border-radius:0 18px;
}

.close-corner.close-left {
    left:0;
    right:auto;
    border-radius:18px 0;
}

.close-corner:empty {
    text-decoration:none;
}

.close-corner:empty:focus {
    text-decoration:none;
}

.close-corner:empty:active {
    background-color:rgb(0 0 0 / 0.05);
}

.close-corner + header.center {
    padding-left: 24px;
    padding-right: 24px;
}

.close-corner + header.right {
    padding-left: 24px;
}

.close-corner.close-right + header.left {
    padding-right: 24px;
}

.close-corner:empty:after,
.close:empty:after {
    content:'\2715';
    color:inherit;
}

form,
fieldset {
    border:none 0px;
    min-inline-size: unset;
    padding: 0;
}

input,
select,
textarea,
label, .label {
  margin-bottom:0.5rem;
}

textarea {
  resize:vertical;
  display:block;
  width:100%;
  max-width:100%;
  line-height:1.25;
  font-size:inherit;
  padding:0.5em;
  border:none 0px;
  border:solid 1px #ccc;
  margin-left:auto;
  margin-right:auto;
  font-weight:400;
  font-family:inherit;
  border-radius:0;
  height:4.75em;
  transition:height 250ms ease-out 500ms;
}

textarea:focus {
  height:13.5em;
  transition:height 250ms ease-out;
}

input,
select {
  display:block;
  width:auto;
  max-width:100%;
  padding:0 1em;
  border:none 0px;
  background-color: transparent;
  font-size:inherit;
  line-height:2;
  color:inherit;
  border-bottom-style:solid;
  border-bottom-width:1px;
  border-color:#ccc;
  margin-left:auto;
  margin-right:auto;
  font-family:inherit;
  font-weight:500;
  border-radius:0;
  padding-left:16px;
  padding-right:16px;/* osX lock icon appears on password + space for icons */
}

input:not([type=checkbox]):not([type=radio]):not([type=range]) {
  -webkit-appearance:none;
          appearance:none;
}

select {
  border-radius:0;
  -webkit-appearance:none;
          appearance:none;
  text-align:left;
  padding-left: 8px;
  background-repeat:no-repeat;
  background-position:right center;
  background-size:auto 1em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' width='16' height='10'><polyline points='4 3.5 7 6 10 3.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /></svg>");
  padding-right:1.6em;
}

select.center {
  text-align-last:center;
  padding-left:1.6em;
}

select.right {
  text-align-last: right;
}

select[multiple] {
    background-image: none;
}

:focus {
  outline:none;
}

textarea:focus,
select:not([class^="btn-"],[class*=" btn-"]):focus,
input:not([type="button"],[type="submit"],[class^="btn-"],[class*=" btn-"]):focus {
  border-color:currentColor;
}

::placeholder {font-family:inherit;font-size:inherit;text-align:inherit;color:#ccc;}

:focus::placeholder {opacity:0;}

.small-placehoder::placeholder {
  font-size:0.75em;
  color:#999;
  font-weight:500;
}

input:not(:empty):invalid {border-color:red;color:red;}

[data-error] a,[data-error]:focus a,
[data-error],[data-error]:focus {border-color:red;color:red;}

[data-valid] { color:#00bb33; }

input[data-error]:not([type=digit]) {border-color:red;color:red;}

input[data-error]::placeholder {color:red;}

textarea[data-error],textarea[data-error]:focus {border-color:red;color:red;}

/*
textarea[data-error]::placeholder {color:red;}*/

@media (min-width:0) {
  input {text-align:left;}
  input::placeholder {text-align:inherit;}
}

/*====================*
   single digit input
 *====================*/

[type="digit"] {
  display:inline-block;
  vertical-align:baseline;
  text-align:center;
  width:1.5em;
  padding:0;
  -webkit-touch-callout: none !important;
}

[type="digit"]:focus {
  caret-color:transparent !important; 
}

[type="digit"]:focus {
  background-color:#fafafa;
  border-color:currentColor;
}

[type="digit"]:focus::placeholder {color:inherit;opacity:0.375;}

/*==============================*
   single digit input grouping
 *==============================*/

.digit-group {
  display: inline-block;
  border: solid 1px #ccc;
  padding: 0px 8px 0px 4px;
  /* margin-bottom: 8px; */
  margin-bottom: 0.5rem;
  white-space: nowrap;
  border-radius: var(--input-border-radius);
  font-size: 1.2em;
}

.digit-group[data-focus] {
  border-color: var(--clr-main);;
}

.digit-group > * {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  /* font-size: 1.5rem; */
}

.digit-group > input {
  width: 0.9375em;
  border: solid 2px transparent;
  background: transparent;
  border-radius: 0;
  line-height: calc(2em - 4px);
}

.digit-group > input[type="digit"]:focus {
  color: var(--clr-main);
  border-color: transparent;
  background: transparent;
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  animation: blink-uline 1s step-start infinite;
}

/* when no input value (:placeholder-shown) and focused, blink */

.digit-group > :placeholder {
  color: rgb(0 0 0 / 0.2);
}

.digit-group > :focus:placeholder-shown::placeholder {
  opacity:1;
  color: rgb(0 0 0 / 0.2);
  text-decoration-color: var(--clr-main);
  animation: blink-uline 1s step-start infinite;
}

/* when placeholder is the inserted mspace, make sure it's wide for safari */

.digit-group > input[type="digit"][placeholder="\2003"]::placeholder,
.digit-group > input[type="digit"][placeholder="\2014"]::placeholder,
.digit-group > input[type="digit"][placeholder="\00B7"]::placeholder {
  font-family: monospace;
}

.blink-uline {
  animation: blink-uline 1s step-start infinite;
}

@keyframes blink-uline { 
  0%   { text-decoration-color: var(--clr-main);text-decoration-line: underline; }
  40%  { text-decoration-color: var(--clr-main);text-decoration-line: underline; }
  50%  { text-decoration-color: transparent; text-decoration-line: none; }
  100% { text-decoration-color: transparent; text-decoration-line: none; }
}

/*====================*
   inline-editor
   Set of forms for editing a list of properties in-place
 *====================*/

.inline-editor-background {
  transition: background linear 0.2s 0.1s;
}

.touchscreen .inline-editor-background.focus-within {
  background:#999;
}

.touchscreen .inline-editor-background.focus-within {
  transform: translateZ(0);
}

.inline-editor form.focus-within {
  position: relative;
  z-index: 1;
}

.inline-editor form {
  width: auto;
}

.touchscreen .focus-within .inline-editor > * {
  mix-blend-mode: multiply;
  opacity: 0.5;
}

.touchscreen .inline-editor form.focus-within {

  position: fixed;
  top: 0;
  bottom: auto;
  padding-bottom:8px;

  width: var(--content-width);
  max-width: 100%;
  box-sizing: border-box;

  border-radius: var(--content-border-radius);
  /* assumes central/layout-left parent classes */
  margin-left:  calc(0px - var(--content-padding) -  var(--layout-left-margin));
  margin-right: calc(0px - var(--content-padding));
  padding-left: var(--content-padding);
  padding-right: var(--content-padding);

  background:white;
  mix-blend-mode: normal;
  box-shadow: 0px 0px 8px rgb(0 0 0 / 0.2);
  opacity: 1.0;
}

.touchscreen .inline-editor form.focus-within ~ * {
  margin-top: 5em;
}

.touchscreen .inline-editor form.focus-within,
.touchscreen .inline-editor form.focus-within ~ * ~ * {
  margin-top: 0;
}

.touchscreen .inline-editor.focus-within form * {
  pointer-events: none;
}

.touchscreen .inline-editor form.focus-within  * {
  pointer-events: unset;
}

/*====================*
   checks and switches
 *====================*/

label {
  display:inline-block;
  font-size:1.0em;
  width:auto;
  max-width:100%;
  position:relative;
  -webkit-tap-highlight-color:transparent;
}

label input ~ mark {
  display:inline-block;
  position:relative;
  box-sizing:border-box;
  background: rgb(0 0 0 / 0.125);
  border-color:transparent;
  border-width:2px;
  border-style:solid;
  vertical-align:top;
  color: inherit;
  flex-grow:0;
  flex-shrink:0;
}

label input ~ :not(mark,button) {
  flex-grow:1;
  flex-shrink:1;
}

label input   ~ mark:after { box-sizing:border-box; }

label :focus  ~ * { outline:none; }

label :focus  ~ :not(mark, button, [class^="btn-"], [class*=" btn-"], [class*=" clr-"]),
label :checked ~ :not(mark, button, [class^="btn-"], [class*=" btn-"], [class*=" clr-"]) { color:var(--clr-main); }

input:checked       ~ .checked-hide { display:none; }

input:not(:checked) ~ .checked-show { display:none; }

.radiobox,
.checkbox,
.slidebox {
  position:relative;
  cursor:pointer;
  display:inline-flex;
  flex-direction:row;
  overflow:visible;
}

.radiobox input,
.checkbox input,
.slidebox input {
  position:absolute;
  opacity:0;
}

.slidebox mark {
  font-style:normal;
  border-radius: 0.15em;
  line-height: 0.3em;
  margin:0.3em 0;
  font-size: 2.4em;
  width: 0.8em;
  text-align: left;
  border-width:0;
}

.slidebox mark:after {
  content: '';
  white-space: nowrap;
  float: left;
  height: 1em;
  font-size: 0.5em;
  width: 1em;
  margin: -0.2em;
  background: white;
  border-radius: 50%;
  border-style:solid;
  border-color:transparent;
  border-width:2px;
  transition:margin-left 100ms ease-in;
  box-shadow:1px 1px 8px rgb(0 0 0 / 0.5);
}

.slidebox [disabled] ~ mark {
  opacity:0.25;
}

.slidebox :checked   ~ mark {
  text-align: right;
  background:currentColor;
}

.slidebox :checked   ~ mark:after {
  margin-left:0.8em;
}

.slidebox input:focus ~ mark:after {
  border-color:currentColor;
}

.radiobox mark,
.checkbox mark {
  border-radius:50%;
  width:2em;
  height:2em;
  line-height:2;
  overflow:visible;
}

.radiobox [disabled]   ~ mark,
.checkbox [disabled]   ~ mark {
  color:#ccc;
}

.radiobox [data-error] ~ mark,
.checkbox [data-error] ~ mark {
  border-color: var(--clr-main);
}

.radiobox :focus  ~ mark,
.radiobox :active ~ mark, 
.checkbox :focus  ~ mark,
.checkbox :active ~ mark {
  border-color:currentColor;
  background:rgb(0 0 0 / 0.2);
}

.checkbox mark:after {
  content:'';
  display:none;
  position:absolute;
  left:1.5em;
  top:1.5em;
  border-radius:0;
  width:0.75em;
  height:1.5em;
  line-height:2em;
  margin:-1.375em;
  border-style:solid;
  border-width: 0px 3px 3px 0px;
  border-color:currentColor;
  border-top-color:transparent;
  border-left-color:transparent;
  color:inherit;
  transform:scale(1.25) translateX(80%) translateY(-30%) rotate(45deg);
}

.checkbox :checked ~ mark:after {
  display:block;
}

.radiobox mark {
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.radiobox mark:after {
  content:'';
  display:none;
  border-radius:50%;
  width:1.0em;
  height:1.0em;
  line-height:1.0em;
  background-color:currentColor;
}

.radiobox :checked ~ mark:after,
.radiobox .checked ~ mark:after {
  display:block;
}

/*====================*
   input + icon/button
 *====================*/

label input {
  display:inline-block;
}

label input + [type="button"],
label input + [type="submit"] {
  line-height:2;
  font-weight:500;
  min-width:0;
  width: 1.5em;
  font-style:normal;
  display:inline-block;
  margin:0 0 0 -1.5em;
  padding: 0 0 0;
  cursor:pointer;
  vertical-align:middle;
  text-align:center;
  pointer-events:none;
  color:var(--thm-clr);
}

label input + [type="button"]:not(:focus),
label input + [type="submit"]:not(:focus) {
  color:#ccc;
}

label input + [type="button"],
label input + [type="submit"] {
  border:none 0px;
  cursor:pointer;
  min-width:0;
  pointer-events:auto;
}

label input:focus + i,
label input       + [type="button"]:focus {
  outline:none;
  box-shadow:none;
}

label input + [type="button"]:before {
  content:none;
}

input:not([data-error]) + [data-clear] {
  pointer-events: all;
}

label input:not(:placeholder-shown) + [data-clear]:empty:after{
  content:'\2715';
}

input + [data-show-password]:empty {
  letter-spacing: -0.825em;
  text-indent: -0.625em;
}

input + [data-show-password]:empty:after {
  font-size: 1.5em;
  line-height: 0.6666667;
  line-height:1.0em;
}

input + [data-show-password]:empty:after {
  display: inline-flex;
  content:'\2A7A';
}

input:focus:not([data-error]) + [data-show-password]:empty:after {
  color:var(--clr-main);
}

input:not([data-error]) + [data-show-password] {
  margin-right:-0.2rem;
  padding-top:0;
  pointer-events: all;
}

input[data-error] + [data-show-password]:empty:after {
  font-size:1.375em;
  color:red;
}

input[type="text"]      + [data-show-password]:empty:after {
  content: '\2A7A\2216';
  letter-spacing: -0.825em;
  text-indent: -0.5em;
}

/*====================*
   buttons
 *====================*/

/* button, */

/* [type="button"], */

[type="submit"],
[class^="btn-"],
[class*=" btn-"] {
  position:relative;
  display:inline-block;
  -webkit-appearance:none;
          appearance:none;
  overflow:hidden;
  padding:0.625em 1.2em;
  border:solid 2px transparent;
  border-radius:1.25em;
  font-size:inherit; 
  font-family:inherit; 
  font-weight:600;
  line-height: 1.25;
  text-decoration:none;
  text-shadow:none;
  color: white;
  background-color: var(--clr-main);
}

/* button:not(:empty):before, */

/* [type="button"]:not(:empty):before, */

[type="submit"]:not(:empty):before,
[class^="btn-"]:not(:empty):before,
[class*=" btn-"]:not(:empty):before {
  content:'';
  background-color:rgb(255 255 255 / 0.2);
  opacity:0;
  position:absolute;
  top:50%;left:50%;
  border-radius:50%;
  padding-bottom:200%;
  width:200%;
  margin:0;
  transform-origin:50% 50%;
  transform: translate(-50%,-50%) scale(0.1);
  transition:transform 300ms ease-in,opacity 50ms linear,box-shadow 200ms linear;
}

select[class^="btn-"],
select[class*=" btn-"] {
  background-size:auto 1em,auto;
  padding-right:1.6em;
}

/* button:focus, */

/* [type="button"]:focus, */

[type="submit"]:focus,
[class^="btn-"]:focus,
[class*=" btn-"]:focus,
[class^="btn-"][data-focus],
[class*=" btn-"][data-focus] {
  box-shadow:2px 2px 2px 1px rgb(0 0 0 / 0.15);
  /*background-image: linear-gradient(to top,rgb(0 0 0 / 0.05),rgb(0 0 0 / 0.05));*/
  outline: none;
  text-decoration:none;
}

/*
select[class^="btn-"]:focus,
select[class*=" btn-"]:focus {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' width='16' height='10'><polyline points='4 3.5 7 6 10 3.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /></svg>"),linear-gradient(to top,rgb(0 0 0 / 0.05),rgb(0 0 0 / 0.05));
}
*/

/* button:active:before, */

/* [type="button"]:active:before, */

[type="submit"]:active:before,
[class^="btn-"]:active:before,
[class*=" btn-"]:active:before {
  transform: translate(-50%,-50%) scale(2.1);
  opacity:1;
}

/* button:hover, */

/* [type="button"]:hover, */

[type="submit"]:hover,
[class^="btn-"]:hover,
[class*=" btn-"]:hover {
  text-decoration:none;
}

/*====================*
   disabled
 *====================*/

input[disabled],
select[disabled] {
  color:var(--clr-disabled);
}

label[disabled] {
  color:var(--clr-disabled);
}

[disabled] {
  pointer-events:none;
}

/* button[disabled], */

/* [type="button"][disabled], */

[type="submit"][disabled],
[class^="btn-"][disabled],
[class*=" btn-"][disabled] {
  background-color:var(--clr-disabled);
  color:var(--clr-disabled-rev);
}

.btn-oline[disabled] {
  background-color:transparent;
  color:var(--clr-disabled);
}

.btn-thm[disabled] {color:var(--clr-disabled);background-color:var(--clr-disabled);}

.btn-txt[disabled] {color:var(--clr-disabled);background-color:transparent;}

.btn-bdr[disabled] {color:var(--clr-disabled);border-color:var(--clr-disabled);background-color:transparent;}

.btn-rev[disabled] {color:var(--clr-disabled);background-color:transparent;border-color:var(--clr-disabled);background-color:transparent;}

/*
   ==================
    general interactive element overrides
   ==================
*/

.selected {
  color:var(--clr-main);
}

[type="submit"],
[class^="btn-"],
[class*=" btn-"] {
  border-width: var(--input-border-width);
  border-radius: var(--input-button-radius,var(--input-border-radius));
}

input,
select,
textarea,
[type=digit] {
  border-color: var(--input-border-color);
  border-style: solid;
  border-width: var(--input-border-width);
  border-radius: var(--input-border-radius);
}

.checkbox mark,
.radiobox mark,
.slidebox mark {
  border-color:#ddd;
  border-style: solid;
}

textarea:focus,
select:not([class^="btn-"],[class*=" btn-"]):focus,
input:not([type="button"]):focus,
.bdr-focus[data-focus],
.bdr-focus:focus {
  border-color: var(--clr-main);
  color: var(--clr-main);
  /* background-color: var(--tnt-main); */
}

input,
select {
  background-color: white;
}

input {
  padding-left: var(--input-padding-inline);
  padding-right: var(--input-padding-inline);
}

[type="digit"],
mark.bdr-focus:before,
:not(mark).bdr-focus {
  background-color: #fff;
}

/* 
   =========================
    .inl-lbl
        an animated inline label that hovers over input or select box
   =========================
*/

.inl-lbl {
    font-size: 1.25rem;
}

.inl-lbl > input ~ span,
.inl-lbl > select ~ span {
    color:rgb(0 0 0 / 0.375);
    padding:0.8em;
    font-size:0.9em;
    line-height: 1;
    pointer-events:none;
    margin-bottom:0.25em;
}

.inl-lbl > input,
.inl-lbl > select {
    font-size:1em;
    margin:0;
}

.inl-lbl > input {
    padding:0.8em 0.8em 0;
    /* padding: 1em 0.8em 0.25em;
    line-height: 1.5;*/
}

.inl-lbl > select {
  padding-top:0.8em;
  padding-right:2em; 
  padding-left:0.8em; 
  padding-bottom:0;
}

.inl-lbl > select[value]:not([value=""]) {
  background-position: right calc(100% - 0.375em);
}

.inl-lbl > input ~ span,
.inl-lbl > select ~ span {
    position: absolute;
    bottom: 0;
    left: 0;
    transform-origin: 0.8em 0;
    transition: transform 200ms ease-out;
    transform: scale(1) translate(0,0);
}

.inl-lbl > input ~ span.focus,
.inl-lbl > input:focus ~ span,
.inl-lbl > input[value]:not([value=""]):not(:focus) ~ span,
.inl-lbl > input[value]:not([value=""]):not(:focus) ~ span,
.inl-lbl > select ~ span.focus,
.inl-lbl > select:focus ~ span,
.inl-lbl > select[value]:not([value=""]):not(:focus) ~ span,
.inl-lbl > select[data-value]:not([data-value=""]):not(:focus) ~ span {
    transform: scale(0.75) translate(0px,-0.625em);
    color:#aaa;
    font-weight:500;
}

.inl-lbl > input::placeholder {color:transparent;}

/* 
   =========================
    :amplify svg
        amplify inline svg icon internals using visility or current color.
        applied when the related choice is focused, hovered, checked, or selected
   =========================
*/

.amp-show { visibility: hidden; }

.amp-hide { visibility: visible; }

.selected svg                  .amp-show,
:checked ~ svg                 .amp-show,
.router-link-active svg        .amp-show,
.router-link-active-parent svg .amp-show,
.amp-focus:hover svg           .amp-show,
.amp-focus:focus svg           .amp-show { visibility: visible; }

.selected svg                  .amp-hide,
:checked ~ svg                 .amp-hide,
.router-link-active svg        .amp-hide,
.router-link-active-parent svg .amp-hide,
.amp-focus:hover svg           .amp-hide,
.amp-focus:focus svg           .amp-hide { visibility: hidden; }

.selected svg                  .amp-fill,
:checked ~ svg                 .amp-fill,
.router-link-active svg        .amp-fill,
.router-link-active-parent svg .amp-fill,
.amp-focus:hover svg           .amp-fill,
.amp-focus:focus svg           .amp-fill { fill: currentColor; }

.selected svg                  .amp-stroke,
:checked ~ svg                 .amp-stroke,
.router-link-active svg        .amp-stroke,
.router-link-active-parent svg .amp-stroke,
.amp-focus:hover svg           .amp-stroke,
.amp-focus:focus svg           .amp-stroke { stroke: currentColor; }

/* 
   =========================
    .list-horiz-scroll
        a horizontal scrolling list that can snap
        and overflow the parent container
   =========================
*/

.list-horiz-scroll {
    list-style-type:none;
    display: flex;
    justify-content: left;
    align-items: stretch;
    scroll-behavior:smooth;
    overscroll-behavior-x: none;
    overscroll-behavior-y: auto;
    overflow:hidden;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    --item-gap: 16px;
    scroll-padding: var(--item-gap);
  }

.list-horiz-scroll::-webkit-scrollbar {height: 0px;display: none;}

.list-horiz-scroll::-webkit-scrollbar-thumb {background-color: transparent;}

.list-horiz-scroll {-ms-overflow-style: none;}

/* -ms-autohiding-scrollbar */

.list-horiz-scroll:after {
    content:'';
    display:block;
    height:16px;
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
    order:1000;
  }

.list-horiz-scroll.padded:after      {flex-basis:16px;}

.list-horiz-scroll.padded-less:after {flex-basis:12px;}

.list-horiz-scroll.padded-thin:after {flex-basis: 8px;}

.list-horiz-scroll.padded-more:after {flex-basis: 4px;}

.list-horiz-scroll.padded-none:after {flex-basis: 0px;}

.list-horiz-scroll > * {
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
    min-height:100%;
    position:relative;
    scroll-snap-align: start;
    order:1;
  }

.list-horiz-scroll.even-space > * {
    margin-left:var(--item-gap);
  }

.list-horiz-scroll > :first-child {
    margin-left:0;
  }

.list-horiz-scroll > .first {
    order:0;
    margin-left:0;
  }

.list-horiz-scroll.tease-three > * {
    flex-basis: 40%;
  }

.list-horiz-scroll.tease-none > * {
    flex-basis: 100%;
    max-width:480px;
  }

.list-horiz-scroll.tease-one > * {
    flex-basis: 88%;
    max-width:300px;
  }

.list-horiz-scroll.tease-one:after {
    flex-basis: 12%;
    margin-left: var(--item-gap0);
  }

/* .list-horiz-scroll > a:nth-child(n),
  .list-horiz-scroll > li:nth-child(n) {
    border: none;
    border: solid 1px #ddd;
  } */

.edge.list-horiz-scroll { 
    /* padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    scroll-padding: 0 calc(50vw - (var(--content-width) / 2)); */
    
    
    /* border-right: solid 2px red !important; */
    /* border-left:  solid 2px red !important; */
  }

.edge.list-horiz-scroll > * {
    scroll-margin-left: var(--content-padding);
  }

.edge.list-horiz-scroll > :first-child {
    margin-left:0;
  }

/* @media(min-width: 1121px) { */

.edge.list-horiz-scroll { 
        --edge-content-right: calc(var(--sidemenu-width) + var(--layout-left-margin) - var(--sidemenu-overlap) + var(--content-padding) + 100%);
        --edge-content-left:  calc(var(--content-padding) + var(--layout-left-margin));
        
        margin-right:         calc(var(--edge-content-right) - 100vw);
        padding-right:        calc(100vw - var(--edge-content-right));
        scroll-padding-right: calc(100vw - var(--edge-content-right));
        
        margin-left:          calc(0px - var(--edge-content-left));
        padding-left:         calc(0px + var(--edge-content-left));
        scroll-padding-left:  calc(0px + var(--edge-content-left));
      }

/* } */

:root {
  --math-pi: 3.14159265;
  --circumference: calc(var(--math-pi) * 100%);
}

.chart-donut {
  --stroke: 5%;
}

.chart-donut circle {
  --offset: 0;
}

.chart-donut circle.chart-ground {
  --value: 100;
}

.chart-donut circle {
  --value-circumference: calc(var(--value) / 100 * var(--circumference));
  stroke-width: calc(2 * var(--stroke));
  stroke-dasharray: var(--value-circumference) var(--circumference);
  stroke-dashoffset: calc(-1 * var(--offset) / 100 * var(--circumference));
  /* stroke-dashoffset: calc(-1 * var(--circumference) - var(--value-circumference)); */
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
  transition: stroke-dasharray 0.5s ease-out;
  z-index: 1;
}

.chart-donut-hash {
  stroke: #ccc;
  stroke-width: 1;
  transform: scaleY(calc(3 * var(--stroke)));
}

.chart-donut circle:not(.chart-ground):hover {
  filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.2));
  stroke-width: calc(2.5 * var(--stroke));
}

.chart-donut {
  --chart-rotate: -90deg;
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  width: 200px;
  box-sizing: content-box;
  overflow: visible;
  transform-origin: 50% 50%;
}

.popup {
  position: absolute;
  right: auto;
  bottom: auto;
  left: 0;
  padding: 8px;
  background-color: #fff;
  box-shadow: 0px 0px 8px rgb(0 0 0 / var(--sdwa, 0.1));
  opacity: 0;
  transition: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

li:hover .popup {
  opacity: 1;
  transition: opacity 0.25s linear;
}

.card,
[class^="card-"],
[class*=" card-"] {
  border-radius: var(--content-border-radius);
  border-style: solid;
  border-width: 0px;
  box-shadow: 0px 0px 8px rgb(0 0 0 / var(--sdwa, 0.1));
  color: #000;
  background-color: var(--clr-wht, #fff);
  text-decoration: none;
  padding: 12px;
  overflow: visible;
  position: relative;
}

.card:active,
.card:focus,
.card:hover {
  text-decoration: none;
}

.charicon {
  font-size: 1.5em;
  font-weight: 600;
  text-align: center;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  display: flex;
  max-width: 100%;
  overflow: hidden;
  padding: 4px;
  display: inline-flex;
  flex-direction: row;
  flex-grow: 0;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--clr-wht, #fff);
  background-color: var(--clr-main);
  width: 1.125em;
  line-height: 1.125em;
  box-sizing: content-box;
}

.charicon:before,
.charicon[href]:before {
  content: '';
  display: block;
  padding-bottom: 100%;
  width: 0;
}

[class^="charicon-"],
[class*=" charicon-"] {
  color: var(--clr-wht, #fff);
  display: inline-block;
  vertical-align: middle;
  display: inline-flex;
  flex-direction: row;
  flex-grow: 0;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 0%;
  padding: 8px;
  background-color: var(--clr-clr, transparent);
}

[class^="charicon-"]:after,
[class*=" charicon-"]:after {
  position: absolute;
  text-align: center;
}

.charicon-empty {
  background-color: var(--clr-main);
  background-color: rgb(0 0 0 / var(--gnda, 0.1));
  --gnda: 0.05;
}

.charicon-alert {
  background-color: var(--clr-main);
}

.charicon-alert:after {
  content: '!';
}

.charicon-check {
  background-color: var(--clr-main);
}

.charicon-check:after {
  content: '\2713';
}

.pill {
  padding: 0px  8px;
  line-height: 1.75;
  font-size: 0.75rem;
  display: inline-block;
  border-radius: 16px;
  text-align: center;
}

.pill-ccc {
  padding: 0px  8px;
  line-height: 1.75;
  font-size: 0.75rem;
  display: inline-block;
  border-radius: 16px;
  text-align: center;
  color: #000;
  background-color: #ccc;
}

.pill-main {
  padding: 0px  8px;
  line-height: 1.75;
  font-size: 0.75rem;
  display: inline-block;
  border-radius: 16px;
  text-align: center;
  color: var(--clr-wht, #fff);
  background-color: var(--clr-main);
}

.tabnav {
  display: block;
  width: -webkit-fill-available;
  width: -moz-available;
  width: fill-available;
  width: fill;
  width: available;
  width: stretch;
  width: 100%;
  border-style: solid;
  border-width: 0px;
  border-bottom-width: 2px;
  border-color: #eee;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  container-name: tabnav;
  container-type: inline-size;
}

.tabnav .min-content {
  min-width: min-content;
}

.tabnav > * {
  border-style: solid;
  border-width: 0px;
  border-bottom-width: 3px;
  border-color: var(--clr-clr, transparent);
  border-radius: 0px;
  color: #999;
  font-weight: 500;
  padding: 8px  0px;
  margin-right: var(--tabnav-margin-right, 32px);
  padding-inline: var(--tabnav-padding-inline, 0px);
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: -2px;
  transition: color 0.25s linear, border-color 0.25s linear;
}

.tabnav > * > span {
  min-width: min-content;
}

.tabnav > a {
  text-decoration: none;
}

.tabnav > span {
  flex-grow: 1;
  flex-shrink: 1;
  /*overflow:hidden;*/
}

.tabnav .active {
  border-color: var(--clr-main);
  color: var(--clr-main);
  pointer-events: none;
}

.tabnav [disabled] {
  pointer-events: none;
  cursor: not-allowed;
  color: #ccc;
}

.tabnav > a:focus,
.tabnav > button:focus,
.tabnav > a:hover:not([disabled]),
.tabnav > button:hover:not([disabled]) {
  color: var(--clr-main);
  box-shadow: none;
  border-bottom-width: 3px;
  border-color: currentColor;
}

.tabnav:hover > .active {
  border-color: var(--clr-clr, transparent);
}

@container tabnav (max-width: 800px) {
  a,
  button {
    --tabnav-margin-right: 16px;
    --tabnav-padding-inline: 0px;
  }
}

@container tabnav (max-width: 600px) {
  a,
  button {
    --tabnav-margin-right: 8px;
    --tabnav-padding-inline: 0px;
    min-width: calc(100% / var(--count, 1));
  }
}

:where([data-tooltip]) {
  position: relative;
  cursor: help;
}

[data-tooltip]:after {
  content: attr(data-tooltip);
  position: absolute;
  display: block;
  visibility: hidden;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  top: calc(100% + 4px);
  right: 0%;
  left: auto;
  text-align: left;
  width: var(--tooltip-width, 250px);
  white-space: pre-wrap;
  line-height: 1.1;
  background-color: var(--clr-wht, #fff);
  z-index: 1;
  padding: 8px 12px;
  background-color: var(--clr-blk, #000);
  color: var(--clr-wht, #fff);
  border-radius: var(--content-border-radius);
  font-size: 0.75rem;
}

[data-tooltip]:hover:after {
  visibility: visible;
  transition: visibility linear 0s 0.5s;
}

.tooltip {
  position: absolute;
  display: block;
  visibility: hidden;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  bottom: calc(100% + 4px);
  right: 0%;
  left: auto;
  text-align: left;
  width: var(--tooltip-width, 260px);
  white-space: pre-wrap;
  background-color: var(--clr-wht, #fff);
  z-index: 1;
  padding: 8px 12px;
  padding-right: 4px;
  background-color: var(--clr-blk, #000);
  background: var(--tnt-gld);
  border-style: solid;
  border-width: 2px;
  border-color: var(--clr-gld, #ffbf00);
  color: var(--clr-blk, #000);
  border-radius: var(--content-border-radius);
  font-size: 0.75rem;
  padding-left: 8px;
}

.hovertip:hover .tooltip {
  visibility: visible;
  transition: visibility linear 0s 0.5s;
}

.hovertip {
  z-index: auto;
}

.tooltip-left:after {
  left: 0%;
  right: auto;
}

.tooltip-top:after {
  top: auto;
  bottom: calc(100% + 4px);
}

@font-face {
  font-family: 'primary';
  src: url('/assets/Geist-Variable.ttf') format("truetype-variations");
  font-weight: 100 900;
}

@font-face {
  font-family: 'monospace';
  src: url('/assets/ChivoMono-Variable.ttf') format("truetype-variations");
  font-weight: 500;
  font-style: normal;
}

@media (max-width: 640px) {
  .mobile-hide {
    display: none !important;
  }
}

@media (min-width: 641px) {
  .mobile-only {
    display: none !important;
  }
}

/*==================*

   global layout helpers
   
 *==================*/

.central,
.content-central {
  width: var(--content-width);
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-left: calc(var(--content-padding) + var(--layout-left-margin, 0px));
  padding-right: var(--content-padding);
}

.content-padding {
  padding-left: calc(var(--content-padding) + var(--layout-left-margin, 0px));
  padding-right: var(--content-padding);
}

.content-margin {
  padding-left: calc(var(--content-padding) + var(--layout-left-margin, 0px));
  margin-right: var(--content-padding);
}

.content-unpad,
.content-unmgn {
  margin-left: calc(0px - var(--content-padding));
  margin-right: calc(0px - var(--content-padding));
}
    
    /*==================*
        svg-based loader
    *==================*/
    
    
    .ldr {
        position:relative;
        min-height:180px;
    }
    .ldr-shw,
    .ldr-show,
    .ldr-shw :not(html),
    .ldr-show :not(html) {
        pointer-events: none;
    }
    .ldr:before {
        content:'';
        z-index:10000;
        position:absolute;
        bottom:0;
        right:0;
        left:0;
        top:0;
        opacity:0.5;
        background-color:inherit;
        transition:opacity 200ms linear 200ms,visibility 0ms linear 400ms;
        -webkit-backdrop-filter: none;
                backdrop-filter: none;

        
        
    }
    .ldr-clr {
        transition:opacity 200ms linear 200ms;
    }
    .ldr-clr:before {
        background:rgb(255 255 255 / 0.0);
    }
    
    .ldr:before,
    .ldr-wht:before,
    .ldr-red-blu:before {background-position:center;background-repeat:no-repeat;background-size:48px;}
    .ldr-fix:before {
        background-position-y: 60vh;
        background-attachment: fixed;
    }

    .ldr:before         {background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg' version='1.1' style='overflow:visible;width:100%;height:100%;'><circle r='22' cy='24' cx='24' fill='none' stroke='black'            stroke-linecap='round' stroke-width='4' stroke-dashoffset='0' stroke-dasharray='138.25' transform='rotate(-450 24 24)'><animate attributeName='stroke-dashoffset'  values='276.5;0' dur='3s' repeatCount='indefinite' /><animateTransform attributeName='transform' type='rotate' to='-90 24 24' from='-450 24 24' begin='0s' dur='2s' repeatCount='indefinite' /></circle></svg>");}
    .ldr-wht:before     {background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg' version='1.1' style='overflow:visible;width:100%;height:100%;'><circle r='22' cy='24' cx='24' fill='none' stroke='white'            stroke-linecap='round' stroke-width='4' stroke-dashoffset='0' stroke-dasharray='138.25' transform='rotate(-450 24 24)'><animate attributeName='stroke-dashoffset'  values='276.5;0' dur='3s' repeatCount='indefinite' /><animateTransform attributeName='transform' type='rotate' to='-90 24 24' from='-450 24 24' begin='0s' dur='2s' repeatCount='indefinite' /></circle></svg>");}
    .ldr-red-blu:before {background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg' version='1.1' style='overflow:visible;width:100%;height:100%;'><circle r='22' cy='24' cx='24' fill='none' stroke='url(%23gradient)' stroke-linecap='round' stroke-width='4' stroke-dashoffset='0' stroke-dasharray='138.25' transform='rotate(-450 24 24)'><animate attributeName='stroke-dashoffset'  values='276.5;0' dur='3s' repeatCount='indefinite' /><animateTransform attributeName='transform' type='rotate' to='-90 24 24' from='-450 24 24' begin='0s' dur='2s' repeatCount='indefinite' /></circle><defs><linearGradient id='gradient' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' stop-color='red'/><stop offset='100%' stop-color='blue'/></linearGradient></defs></svg>");}
    
    .ldr:before {
        visibility:hidden;
        opacity:0;
        display:block;
        transition:opacity 400ms linear,visibility 0ms linear 400ms;
    }
    
    .ldr-show:before,
    .ldr-shw:before {
        visibility:visible;
        opacity:0.75;
        transition:opacity 300ms ease-in, visibility 0ms linear 0ms;
        -webkit-backdrop-filter: blur(2px);
                backdrop-filter: blur(2px);
    }
    .ldr-clr.ldr-show,
    .ldr-clr.ldr-shw {
        opacity:0.5;
        transition:opacity 400ms linear;
    }
    
    
    .ldr-inl {
        position:relative;
        display:inline-block;
        margin:0;
        font-size:24px;
    }
    .ldr-inl:before {
        display:block;
        height:1em;
        width:1em;
        font-size:1em;
        z-index: 1000;
    }
    .ani-hue .ldr-inl { animation:none; }
    .ani-hue:not(.ldr) {
        animation: ldr-hue 1500ms linear infinite;
    }
    .ani-hue.ldr:before {
        animation: ldr-hue 1500ms linear infinite;
    }
    .ani-hue.ldr:before             {content:url("data:image/svg+xml;utf8,<svg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg' version='1.1' style='overflow:visible;width:100%;height:100%;'><circle r='22' cy='24' cx='24' fill='none' stroke='dodgerBlue' stroke-linecap='round' stroke-width='4' stroke-dashoffset='0' stroke-dasharray='138.25' transform='rotate(-450 24 24)'><animate attributeName='stroke-dashoffset' values='138.25;-138.25' dur='3s' repeatCount='indefinite' /><animateTransform attributeName='transform' type='rotate' to='-90 24 24' from='-450 24 24' begin='0s' dur='2s' repeatCount='indefinite' /></circle></svg>");}
    
    /* the radius is adjusted for stroke increase, but none was done to transforms...? */
    .ldr-inl:before         {content:url("data:image/svg+xml;utf8,<svg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg' version='1.1' style='overflow:visible;width:100%;height:100%;'><circle r='20' cy='24' cx='24' fill='none' stroke='dodgerBlue' stroke-linecap='round' stroke-width='6' stroke-dashoffset='0' stroke-dasharray='138.25' transform='rotate(-450 24 24)'><animate attributeName='stroke-dashoffset' values='138.25;-138.25' dur='3s' repeatCount='indefinite' /><animateTransform attributeName='transform' type='rotate' to='-90 24 24' from='-450 24 24' begin='0s' dur='2s' repeatCount='indefinite' /></circle></svg>");}
    .ldr-inl.clr-blk:before,
    .ldr-inl.clr-000:before {content:url("data:image/svg+xml;utf8,<svg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg' version='1.1' style='overflow:visible;width:100%;height:100%;'><circle r='20' cy='24' cx='24' fill='none' stroke='black'      stroke-linecap='round' stroke-width='6' stroke-dashoffset='0' stroke-dasharray='138.25' transform='rotate(-450 24 24)'><animate attributeName='stroke-dashoffset' values='138.25;-138.25' dur='3s' repeatCount='indefinite' /><animateTransform attributeName='transform' type='rotate' to='-90 24 24' from='-450 24 24' begin='0s' dur='2s' repeatCount='indefinite' /></circle></svg>");}
    .ldr-inl.clr-blu:before {content:url("data:image/svg+xml;utf8,<svg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg' version='1.1' style='overflow:visible;width:100%;height:100%;'><circle r='20' cy='24' cx='24' fill='none' stroke='dodgerBlue' stroke-linecap='round' stroke-width='6' stroke-dashoffset='0' stroke-dasharray='138.25' transform='rotate(-450 24 24)'><animate attributeName='stroke-dashoffset' values='138.25;-138.25' dur='3s' repeatCount='indefinite' /><animateTransform attributeName='transform' type='rotate' to='-90 24 24' from='-450 24 24' begin='0s' dur='2s' repeatCount='indefinite' /></circle></svg>");}
    
    @keyframes ldr-hue {
        0%   { filter: hue-rotate(0deg); }
        100% { filter: hue-rotate(359deg); }
    }
    
    
    
    /*==================*
        Arrows / Angles
    *==================*/
    
    
    .angle-left,
    .angle-right,
    .arrow-left,
    .arrow-right,
    .arrow-corner {
        pointer-events:all;
    }

    .angle-left:before,
    .angle-right:after,
    .arrow-left:before,
    .arrow-right:after,
    .arrow-corner:after {
        /* font-size:1.25em; */
        font-size:1em;
        line-height:0.8em;
        display: inline-block;
        vertical-align: baseline;
        transition:margin 100ms linear 0s;
    }
    .arrow-corner:after {
        transform: rotate(-45deg);
        vertical-align: top;
    }
    .angle-right:after {
        content: '\203A';
        margin: -0.2em -0.2em 0 0.2em;
    }
    .angle-left:before {
        content: '\2039';
        margin: -0.2em 0.2em 0 -0.2em;
    }
    .arrow-right:after,
    .arrow-corner:after {
        content: '\2192';
        margin: 0 -0.2em 0 0.2em;
    }
    .arrow-left:before {
        content: '\2190';
        margin: 0 0.2em 0 -0.2em;
    }
    .angle-right:hover:after,
    .arrow-right:hover:after,
    .arrow-corner:hover:after,
    .angle-right:focus:after,
    .arrow-right:focus:after,
    .arrow-corner:focus:after,
    a:hover .angle-right:after,
    a:hover .arrow-right:after,
    a:hover .arrow-corner:after,
    a:focus .angle-right:after,
    a:focus .arrow-right:after,
    a:focus .arrow-corner:after {
        margin-right:-0.3em;
        margin-left:  0.3em;
    }
    .angle-left:hover:before,
    .arrow-left:hover:before,
    .angle-left:focus:before,
    .arrow-left:focus:before,
    a:hover .angle-left:before,
    a:hover .arrow-left:before,
    a:focus .angle-left:before,
    a:focus .arrow-left:before {
        margin-right: 0.3em;
        margin-left: -0.3em;
    }
    .angle-right-nbsp:after {
        display:inline;
        content: '\00a0\203A';
    }
    .arrow-right-nbsp:after {
        display:inline;
        content: '\00a0\2192';
    }
    
    details[open] summary.arrow-right:after {
        content: '\2193';
    }
    details summary.arrow-right:before {
        content:none; 
    }
    details summary.arrow-right:hover:after {
        margin: -0.3em -0.2em 0.1em 0.2em;
    }
    
    .arrow-none:after,
    .arrow-none:before {
        content:none;
    }
    
    [disabled] {
        pointer-events:none;
    }
    
    .ang-hov.angle-left:not(:hover):before,
    .ang-hov.angle-right:not(:hover):after,
    .arr-hov.arrow-left:not(:hover):before,
    .arr-hov.arrow-right:not(:hover):after,
    .arr-hov.arrow-corner:not(:hover):after {
        opacity:0;
    }
    
    
    
    /*==================*
        Text Helpers
    *==================*/
    
    
    .nowrap   {white-space:nowrap;}
    .ellipsis {text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
    .wrap     {white-space:normal;}
    .pre      {white-space:pre-wrap;}
    .center   {text-align:center;}
    .left     {text-align:left;}
    .right    {text-align:right;}
    .align-inherit {text-align:inherit;}
    .hnt-center::placeholder {text-align:center;}
    .hnt-left::placeholder   {text-align:left;}
    .hnt-right::placeholder  {text-align:right;}
    
    .bld9, .black   {font-weight:900;}
    .bld8, .xbold   {font-weight:800;}
    .bld7, .bold,b  {font-weight:700;}
    .bld6, .heavy, .semi, .semibold
                        {font-weight:600;}
    .bld5, .medium  {font-weight:500;}
    .bld4, .regular {font-weight:400;}
    .bld3, .light   {font-weight:300;}
    .bld2, .xlight  {font-weight:300;}
    .bld1, .thin    {font-weight:100;}
    
    .icon      {font-style:normal;}
    .italic    {font-style:italic;}
    .normal    {font-style:normal;}
    
    .default  ,.default->*   {font-size:1.000rem;}
    .small    ,.small->*     {font-size:0.875rem;}
    .xsmall   ,.xsmall->*    {font-size:0.750rem;}
    .xxsmall  ,.xxsmall->*   {font-size:0.625rem;}
    .xxxsmall ,.xxxsmall->*  {font-size:0.500rem;}
    .xxxxsmall,.xxxxsmall->* {font-size:0.375rem;}
    
    small,
    .smaller     {font-size:0.875em;}
    .xsmaller    {font-size:0.750em;}
    .xxsmaller   {font-size:0.625em;}
    .xxxsmaller  {font-size:0.500em;}
    .xxxxsmaller {font-size:0.375em;}
    
    .big      ,.big->*,
    .large    ,.large->*     {font-size:1.125rem;}
    .xlarge   ,.xlarge->*    {font-size:1.500rem;}
    .xxlarge  ,.xxlarge->*   {font-size:1.750rem;}
    .xxxlarge ,.xxxlarge->*  {font-size:2.250rem;}
    .xxxxlarge,.xxxxlarge->* {font-size:3.000rem;}
    
    big,.bigger,
    .larger     {font-size:1.125em;}
    .xlarger    {font-size:1.500em;}
    .xxlarger   {font-size:1.750em;}
    .xxxlarger  {font-size:2.250em;}
    .xxxxlarger {font-size:3.000em;}

    .hnt-default::placeholder  {font-size:1.000rem;}
    .hnt-small::placeholder    {font-size:0.875rem;}
    .hnt-xsmall::placeholder   {font-size:0.750rem;}
    .hnt-xxsmall::placeholder  {font-size:0.625rem;}
    .hnt-xxxsmall::placeholder {font-size:0.500rem;}
    
    .nolead    {line-height:1;}
    .nomargin  {margin:0;}
    .muted     {opacity:0.5;}
    
    .nodecor,
    .nodecor:hover,
    .nodecor:focus    {text-decoration:none;}
    .underline,.uline {text-decoration:underline;}
    .strike {text-decoration:line-through;}
    
    .nocase           {text-transform:none;}
    .uprcase,.upper   {text-transform:uppercase;}
    .lowcase,.lower   {text-transform:lowercase;}
    .capcase          {text-transform:capitalize;}
    
    .breakall {word-break: break-all;}
    
    .mono {font-family: 'monospace', monospace;}
    
    .noevents   {pointer-events:none;}

    .allevents   {pointer-events:all;}
    
    
    /*==================*
        Shadow
    *==================*/
    
    
    .hov-sdw       {transition:all 100ms linear;}
    .hov-sdw:hover {box-shadow: 0px 0px 16px rgb(0 0 0 / var(--sdwa,0.1));}
    
    .sdw0, .sdw-off {box-shadow:none;}
    .sdw1 {box-shadow: 0px 0px  4px rgb(0 0 0 / var(--sdwa,0.1));}
    .sdw2 {box-shadow: 0px 0px  8px rgb(0 0 0 / var(--sdwa,0.1));}
    .sdw3 {box-shadow: 0px 0px 12px rgb(0 0 0 / var(--sdwa,0.1));}
    .sdw4 {box-shadow: 0px 0px 16px rgb(0 0 0 / var(--sdwa,0.1));}
    .sdw5 {box-shadow: 0px 0px 20px rgb(0 0 0 / var(--sdwa,0.1));}
    .sdw6 {box-shadow: 0px 0px 24px rgb(0 0 0 / var(--sdwa,0.1));}
    .sdw7 {box-shadow: 0px 0px 28px rgb(0 0 0 / var(--sdwa,0.1));}
    .sdw8 {box-shadow: 0px 0px 32px rgb(0 0 0 / var(--sdwa,0.1));}
    
    .sdw-a00 {--sdwa:0.00;}
    .sdw-a05 {--sdwa:0.05;}
    .sdw-a10 {--sdwa:0.10;}
    .sdw-a15 {--sdwa:0.15;}
    .sdw-a20 {--sdwa:0.20;}
    .sdw-a25 {--sdwa:0.25;}
    .sdw-a30 {--sdwa:0.30;}
    .sdw-a40 {--sdwa:0.40;}
    .sdw-a50 {--sdwa:0.50;}
    .sdw-a60 {--sdwa:0.60;}
    .sdw-a70 {--sdwa:0.70;}
    .sdw-a80 {--sdwa:0.80;}
    .sdw-a90 {--sdwa:0.90;}
    .sdw-a95 {--sdwa:0.95;}
    
    /* scroll shadow */
    [data-scrolled="1"].flex-sdw,
    [data-scrolled="1"]>.flex-sdw {box-shadow: inset 0px 0px 6px rgb(0 0 0 / 0.15);}
    
    
    
    /*==================*
        Opacity
    *==================*/
    
    
    .clr00 {opacity:0.0;}
    .clr01 {opacity:0.1;}
    .clr02 {opacity:0.2;}
    .clr03 {opacity:0.3;}
    .clr04 {opacity:0.4;}
    .clr05 {opacity:0.5;}
    .clr06 {opacity:0.6;}
    .clr07 {opacity:0.7;}
    .clr08 {opacity:0.8;}
    .clr09 {opacity:0.9;}
    .clr10 {opacity:1.0;}
    
    .dim09 {filter:brightness(0.9)}
    .dim08 {filter:brightness(0.8)}
    .dim07 {filter:brightness(0.7)}
    .dim06 {filter:brightness(0.6)}
    .dim05 {filter:brightness(0.5)}
    
    .desat {filter:saturate(0)}

    .hidden {visibility:hidden;}
    .visible {visibility:visible;}
    
    
    
    /*==================*
        Leading
    *==================*/
    
    .leadhalf {line-height:0.5000;}
    .leadthin {line-height:0.7500;}
    .leadless {line-height:0.8750;}
    .lead0,
    .leadnone {line-height:1.0000;}
    .leadhair {line-height:1.0625;}
    .lead1    {line-height:1.1250;}
    .lead2    {line-height:1.2500;}
    .lead3    {line-height:1.3750;}
    .lead4    {line-height:1.5000;}
    .lead5    {line-height:1.6250;}
    .lead6    {line-height:1.7500;}
    .lead7    {line-height:1.8750;}
    .lead8,
    .leadA    {line-height:2.0000;}
    .leadB    {line-height:2.2500;}
    .leadC    {line-height:2.5000;}
    .leadD    {line-height:2.7500;}
    .leadE    {line-height:3.0000;}
    
    
    
    /*==================*
        Colors
    *==================*/
    
    /* btn- classes have styling side effect, so they preceed other color classes to allow overrides */
    /* base colors can be overridden with variables in aother css file */

    .btn-000 {color:#fff;background-color:#000;}
    .btn-111 {color:#fff;background-color:#111;}
    .btn-222 {color:#fff;background-color:#222;}
    .btn-333 {color:#fff;background-color:#333;}
    .btn-444 {color:#fff;background-color:#444;}
    .btn-555 {color:#fff;background-color:#555;}
    .btn-666 {color:#fff;background-color:#666;}
    .btn-777 {color:#fff;background-color:#777;}
    .btn-888 {color:#fff;background-color:#888;}
    .btn-999 {color:#000;background-color:#999;}
    .btn-aaa {color:#000;background-color:#aaa;}
    .btn-bbb {color:#000;background-color:#bbb;}
    .btn-ccc {color:#000;background-color:#ccc;}
    .btn-ddd {color:#000;background-color:#ddd;}
    .btn-eee {color:#000;background-color:#eee;}
    .btn-f0f {color:#000;background-color:#f0f0f0;}
    .btn-f3f {color:#000;background-color:#f3f3f3;}
    .btn-f6f {color:#000;background-color:#f6f6f6;}
    .btn-f9f {color:#000;background-color:#f9f9f9;}
    .btn-fff {color:#000;background-color:#fff;}
    
    .btn-wht {background-color:var(--clr-wht,#fff);}
    .btn-blk {color:#fff;background-color:var(--clr-blk,#000);}
    .btn-gry {color:#fff;background-color:var(--clr-gry,#999);}
    .btn-red {color:#fff;background-color:var(--clr-red,#ff4477);}
    .btn-org {color:#fff;background-color:var(--clr-org,Orange);}
    .btn-gld {color:#fff;background-color:var(--clr-gld,#ffbf00);}
    .btn-ylw {color:#fff;background-color:var(--clr-ylw,Gold);}
    .btn-ppl {color:#fff;background-color:var(--clr-ppl,#9966ff);}
    .btn-blu {color:#fff;background-color:var(--clr-blu,RoyalBlue);}
    .btn-sky {color:#fff;background-color:var(--clr-sky,DeepskyBlue);}
    .btn-grn {color:#fff;background-color:var(--clr-grn,#00bb33);}
    .btn-nvy {color:#fff;background-color:var(--clr-nvy,#153569);}
    .btn-sea {color:#fff;background-color:var(--clr-sea,MediumSeaGreen);}
    .btn-clr {background-color:var(--clr-clr,transparent);}
    
    .btn-rev {background-color: transparent;border-color:currentColor;}
    .btn-000.btn-rev {background-color:#fff;border-color:currentColor;color:#000;}
    .btn-111.btn-rev {background-color:#fff;border-color:currentColor;color:#111;}
    .btn-222.btn-rev {background-color:#fff;border-color:currentColor;color:#222;}
    .btn-333.btn-rev {background-color:#fff;border-color:currentColor;color:#333;}
    .btn-444.btn-rev {background-color:#fff;border-color:currentColor;color:#444;}
    .btn-555.btn-rev {background-color:#fff;border-color:currentColor;color:#555;}
    .btn-666.btn-rev {background-color:#fff;border-color:currentColor;color:#666;}
    .btn-777.btn-rev {background-color:#fff;border-color:currentColor;color:#777;}
    .btn-888.btn-rev {background-color:#fff;border-color:currentColor;color:#888;}
    .btn-999.btn-rev {background-color:#000;border-color:currentColor;color:#999;}
    .btn-aaa.btn-rev {background-color:#000;border-color:currentColor;color:#aaa;}
    .btn-bbb.btn-rev {background-color:#000;border-color:currentColor;color:#bbb;}
    .btn-ccc.btn-rev {background-color:#000;border-color:currentColor;color:#ccc;}
    .btn-ddd.btn-rev {background-color:#000;border-color:currentColor;color:#ddd;}
    .btn-eee.btn-rev {background-color:#000;border-color:currentColor;color:#eee;}
    .btn-f0f.btn-rev {background-color:#000;border-color:currentColor;color:#f0f0f0;}
    .btn-f3f.btn-rev {background-color:#000;border-color:currentColor;color:#f3f3f3;}
    .btn-f6f.btn-rev {background-color:#000;border-color:currentColor;color:#f6f6f6;}
    .btn-f9f.btn-rev {background-color:#000;border-color:currentColor;color:#f9f9f9;}
    .btn-fff.btn-rev {background-color:#000;border-color:currentColor;color:#fff;}
    
    .btn-wht.btn-rev {background-color:#000;border-color:currentColor;color:var(--clr-wht,#fff);}
    .btn-blk.btn-rev {background-color:#fff;border-color:currentColor;color:var(--clr-blk,#000);}
    .btn-gry.btn-rev {background-color:#fff;border-color:currentColor;color:var(--clr-gry,#999);}
    .btn-red.btn-rev {background-color:#fff;border-color:currentColor;color:var(--clr-red,#ff4477);}
    .btn-org.btn-rev {background-color:#fff;border-color:currentColor;color:var(--clr-org,Orange);}
    .btn-gld.btn-rev {background-color:#fff;border-color:currentColor;color:var(--clr-gld,#ffbf00);}
    .btn-ylw.btn-rev {background-color:#fff;border-color:currentColor;color:var(--clr-ylw,Gold);}
    .btn-ppl.btn-rev {background-color:#fff;border-color:currentColor;color:var(--clr-ppl,#9966ff);}
    .btn-blu.btn-rev {background-color:#fff;border-color:currentColor;color:var(--clr-blu,RoyalBlue);}
    .btn-sky.btn-rev {background-color:#fff;border-color:currentColor;color:var(--clr-sky,DeepskyBlue);}
    .btn-grn.btn-rev {background-color:#fff;border-color:currentColor;color:var(--clr-grn,#00bb33);}
    .btn-nvy.btn-rev {background-color:#fff;border-color:currentColor;color:var(--clr-nvy,#153569);}
    .btn-sea.btn-rev {background-color:#fff;border-color:currentColor;color:var(--clr-sea,MediumSeaGreen);}
    
    /* main color variables set in styles.css */
    
    .clr-link, .clr-lnk,
    .clr-main { color: var(--clr-main) }
    .clr-tint { color: var(--tnt-main) }
    .clr-dark { color: var(--drk-main) }
    .gnd-link, .gnd-lnk,
    .gnd-main { background-color: var(--clr-main) }
    .gnd-tint,
    .tnt-main { background-color: var(--tnt-main) }
    .drk-main,
    .gnd-dark { background-color: var(--drk-main) }
    .bdr-link, .bdr-lnk,
    .bdr-main { border-color: var(--clr-main) }
    .bdr-tint { border-color: var(--tnt-main) }
    .bdr-dark { border-color: var(--drk-main) }

    .btn-main {background-color:var(--clr-main);color:#fff;}
    .btn-main-rev {background-color:#fff;border-color:currentColor;color:var(--clr-main);}
    

        .clr-main { color: var(--clr-main);}
        .bdr-main { border-color: var(--clr-main);}
        .gnd-main { background-color: var(--clr-main);}
        .tnt-main { background-color: var(--tnt-main);}
        .add-main { background-color: var(--add-main);}
        .clr-grey { color: var(--clr-grey);}
        .bdr-grey { border-color: var(--clr-grey);}
        .gnd-grey { background-color: var(--clr-grey);}
        .tnt-grey { background-color: var(--tnt-grey);}
        .add-grey { background-color: var(--add-grey);}

    
    .clr-000 {color:#000;}
    .clr-111 {color:#111;}
    .clr-222 {color:#222;}
    .clr-333 {color:#333;}
    .clr-444 {color:#444;}
    .clr-555 {color:#555;}
    .clr-666 {color:#666;}
    .clr-777 {color:#777;}
    .clr-888 {color:#888;}
    .clr-999 {color:#999;}
    .clr-aaa {color:#aaa;}
    .clr-bbb {color:#bbb;}
    .clr-ccc {color:#ccc;}
    .clr-ddd {color:#ddd;}
    .clr-eee {color:#eee;}
    .clr-f0f {color:#f0f0f0;}
    .clr-f3f {color:#f3f3f3;}
    .clr-f6f {color:#f6f6f6;}
    .clr-f9f {color:#f9f9f9;}
    .clr-fff {color:#fff;}
    
    .clr-wht {color:var(--clr-wht,#fff);}
    .clr-blk {color:var(--clr-blk,#000);}
    .clr-gry {color:var(--clr-gry,#999);}
    .clr-red {color:var(--clr-red,#ff4477);}
    .clr-org {color:var(--clr-org,Orange);}
    .clr-gld {color:var(--clr-gld,#ffbf00);}
    .clr-ylw {color:var(--clr-ylw,Gold);}
    .clr-ppl {color:var(--clr-ppl,#9966ff);}
    .clr-blu {color:var(--clr-blu,RoyalBlue);}
    .clr-sky {color:var(--clr-sky,DeepskyBlue);}
    .clr-grn {color:var(--clr-grn,#00bb33);}
    .clr-nvy {color:var(--clr-nvy,#153569);}
    .clr-sea {color:var(--clr-sea,MediumSeaGreen);}
    .clr-clr {color:var(--clr-clr,transparent);}
    
    .gnd-000 {background-color:#000;}
    .gnd-111 {background-color:#111;}
    .gnd-222 {background-color:#222;}
    .gnd-333 {background-color:#333;}
    .gnd-444 {background-color:#444;}
    .gnd-555 {background-color:#555;}
    .gnd-666 {background-color:#666;}
    .gnd-777 {background-color:#777;}
    .gnd-888 {background-color:#888;}
    .gnd-999 {background-color:#999;}
    .gnd-aaa {background-color:#aaa;}
    .gnd-bbb {background-color:#bbb;}
    .gnd-ccc {background-color:#ccc;}
    .gnd-ddd {background-color:#ddd;}
    .gnd-eee {background-color:#eee;}
    .gnd-f0f {background-color:#f0f0f0;}
    .gnd-f3f {background-color:#f3f3f3;}
    .gnd-f6f {background-color:#f6f6f6;}
    .gnd-f9f {background-color:#f9f9f9;}
    .gnd-fff {background-color:#fff;}
    
    .gnd-wht {background-color:var(--clr-wht,#fff);}
    .gnd-blk {background-color:var(--clr-blk,#000);}
    .gnd-gry {background-color:var(--clr-gry,#999);}
    .gnd-red {background-color:var(--clr-red,#ff4477);}
    .gnd-org {background-color:var(--clr-org,Orange);}
    .gnd-gld {background-color:var(--clr-gld,#ffbf00);}
    .gnd-ylw {background-color:var(--clr-ylw,Gold);}
    .gnd-ppl {background-color:var(--clr-ppl,#9966ff);}
    .gnd-blu {background-color:var(--clr-blu,RoyalBlue);}
    .gnd-sky {background-color:var(--clr-sky,DeepskyBlue);}
    .gnd-grn {background-color:var(--clr-grn,#00bb33);}
    .gnd-nvy {background-color:var(--clr-nvy,#153569);}
    .gnd-sea {background-color:var(--clr-sea,MediumSeaGreen);}
    .gnd-clr {background-color:var(--clr-clr,transparent);}
    
    .gnd-cur {background-color:currentColor;}
    
    .tnt-wht {background-color:var(--tnt-wht,#fff);}
    .tnt-blk {background-color:var(--tnt-blk,#eee);}
    .tnt-gry {background-color:var(--tnt-gry,#f3f3f3);}
    .tnt-red {background-color:var(--tnt-red,#ffeeee);}
    .tnt-org {background-color:var(--tnt-org,papayawhip);}
    .tnt-gld {background-color:var(--tnt-gld,cornsilk);}
    .tnt-ylw {background-color:var(--tnt-ylw,#fff8d2);}
    .tnt-ppl {background-color:var(--tnt-ppl,#eeddff);}
    .tnt-blu {background-color:var(--tnt-blu,#dcefff);}
    .tnt-sky {background-color:var(--tnt-sky,#e1f8ff);}
    .tnt-nvy {background-color:var(--tnt-nvy,#cee0ff);}
    .tnt-grn {background-color:var(--tnt-grn,#ddf6dd);}
    .tnt-sea {background-color:var(--tnt-sea,#ddf6ee);}
    
    .bdr-000 {border-color:#000;}
    .bdr-111 {border-color:#111;}
    .bdr-222 {border-color:#222;}
    .bdr-333 {border-color:#333;}
    .bdr-444 {border-color:#444;}
    .bdr-555 {border-color:#555;}
    .bdr-666 {border-color:#666;}
    .bdr-777 {border-color:#777;}
    .bdr-888 {border-color:#888;}
    .bdr-999 {border-color:#999;}
    .bdr-aaa {border-color:#aaa;}
    .bdr-bbb {border-color:#bbb;}
    .bdr-ccc {border-color:#ccc;}
    .bdr-ddd {border-color:#ddd;}
    .bdr-eee {border-color:#eee;}
    .bdr-f0f {border-color:#f0f0f0;}
    .bdr-f3f {border-color:#f3f3f3;}
    .bdr-f6f {border-color:#f6f6f6;}
    .bdr-f9f {border-color:#f9f9f9;}
    .bdr-fff {border-color:#fff;}

    .bdr-a00 {border-color:rgb(0 0 0 / 0.00);}
    .bdr-a05 {border-color:rgb(0 0 0 / 0.05);}
    .bdr-a10 {border-color:rgb(0 0 0 / 0.10);}
    .bdr-a15 {border-color:rgb(0 0 0 / 0.15);}
    .bdr-a20 {border-color:rgb(0 0 0 / 0.20);}
    .bdr-a25 {border-color:rgb(0 0 0 / 0.25);}
    .bdr-a30 {border-color:rgb(0 0 0 / 0.30);}
    .bdr-a35 {border-color:rgb(0 0 0 / 0.35);}
    .bdr-a40 {border-color:rgb(0 0 0 / 0.40);}
    .bdr-a45 {border-color:rgb(0 0 0 / 0.45);}
    .bdr-a50 {border-color:rgb(0 0 0 / 0.50);}
    .bdr-a55 {border-color:rgb(0 0 0 / 0.55);}
    .bdr-a60 {border-color:rgb(0 0 0 / 0.60);}
    .bdr-a65 {border-color:rgb(0 0 0 / 0.65);}
    .bdr-a70 {border-color:rgb(0 0 0 / 0.70);}
    .bdr-a75 {border-color:rgb(0 0 0 / 0.75);}
    .bdr-a80 {border-color:rgb(0 0 0 / 0.80);}
    .bdr-a85 {border-color:rgb(0 0 0 / 0.85);}
    .bdr-a90 {border-color:rgb(0 0 0 / 0.90);}
    .bdr-a95 {border-color:rgb(0 0 0 / 0.95);}
    
    .bdr-wht {border-color:var(--clr-wht,#fff);}
    .bdr-blk {border-color:var(--clr-blk,#000);}
    .bdr-gry {border-color:var(--clr-gry,#999);}
    .bdr-red {border-color:var(--clr-red,#ff4477);}
    .bdr-org {border-color:var(--clr-org,Orange);}
    .bdr-gld {border-color:var(--clr-gld,#ffbf00);}
    .bdr-ylw {border-color:var(--clr-ylw,Gold);}
    .bdr-ppl {border-color:var(--clr-ppl,#9966ff);}
    .bdr-blu {border-color:var(--clr-blu,RoyalBlue);}
    .bdr-sky {border-color:var(--clr-sky,DeepskyBlue);}
    .bdr-grn {border-color:var(--clr-grn,#00bb33);}
    .bdr-nvy {border-color:var(--clr-nvy,#153569);}
    .bdr-sea {border-color:var(--clr-sea,MediumSeaGreen);}
    .bdr-clr {border-color:var(--clr-clr,transparent);}
    .bdr-clip {background-clip:padding-box;}
    
    .hnt-fff::placeholder {color:#fff;}
    .hnt-eee::placeholder {color:#eee;}
    .hnt-ddd::placeholder {color:#ddd;}
    .hnt-ccc::placeholder {color:#ccc;}
    .hnt-bbb::placeholder {color:#bbb;}
    .hnt-aaa::placeholder {color:#aaa;}
    .hnt-999::placeholder {color:#999;}
    .hnt-666::placeholder {color:#666;}
    .hnt-333::placeholder {color:#333;}
    .hnt-000::placeholder {color:#000;}
    
    .gnd-img {
        background-repeat: no-repeat;
        background-position: left;
        background-size: contain;
    }
    .gnd-cvr {
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
    .gnd-lft {background-position: left;}
    .gnd-rgt {background-position: right;}
    .gnd-top {background-position: top;}
    .gnd-bot {background-position: bottom;}
    .gnd-ctr {background-position: center;}
    
    
    .gnd-tnt {background-color:rgb(255 255 255 / var(--gnda,0.2));}
    .gnd-tnt-add {background-image: linear-gradient(to top,rgb(255 255 255 / var(--gnda,0.2)),rgb(255 255 255 / var(--gnda,0.2)));}
    .gnd-tnt-fde {background-image: linear-gradient(var(--gnd-fde),rgb(255 255 255 / var(--gnda,1.0)) 0%,rgb(255 255 255 / 0.0) 100%);}
    
    .gnd-shd {background-color:rgb(0 0 0 / var(--gnda,0.1));}
    .gnd-shd-add {background-image: linear-gradient(to top,rgb(0 0 0 / var(--gnda,1.0)),rgb(0 0 0 / var(--gnda,1.0)));}
    .gnd-shd-fde {background-image: linear-gradient(var(--gnd-fde),rgb(0 0 0 / var(--gnda,1.0)) 0%,rgb(0 0 0 / 0.0) 100%);}
    
    .gnd-fde-top {--gnd-fde:  0deg;}
    .gnd-fde-bot {--gnd-fde:180deg;}
    .gnd-fde-lft {--gnd-fde: 90deg;}
    .gnd-fde-rgt {--gnd-fde:270deg;}
    
    .gnd-a00 {--gnda:0.00;}
    .gnd-a05 {--gnda:0.05;}
    .gnd-a10 {--gnda:0.10;}
    .gnd-a15 {--gnda:0.15;}
    .gnd-a20 {--gnda:0.20;}
    .gnd-a25 {--gnda:0.25;}
    .gnd-a30 {--gnda:0.30;}
    .gnd-a40 {--gnda:0.40;}
    .gnd-a50 {--gnda:0.50;}
    .gnd-a60 {--gnda:0.60;}
    .gnd-a70 {--gnda:0.70;}
    .gnd-a80 {--gnda:0.80;}
    .gnd-a90 {--gnda:0.90;}
    .gnd-a95 {--gnda:0.95;}
    
    /* experimental strategy to main/theme colors */
    
    .thm-wht {--thm-key:#000;--thm-rev:#fff;--thm-clr:var(--clr-wht);--thm-tnt:var(--tnt-wht);}
    .thm-blk {--thm-key:#000;--thm-rev:#fff;--thm-clr:var(--clr-blk);--thm-tnt:var(--tnt-blk);}
    .thm-gry {--thm-key:#000;--thm-rev:#fff;--thm-clr:var(--clr-gry);--thm-tnt:var(--tnt-gry);}
    .thm-red {--thm-key:#000;--thm-rev:#fff;--thm-clr:var(--clr-red);--thm-tnt:var(--tnt-red);}
    .thm-org {--thm-key:#000;--thm-rev:#fff;--thm-clr:var(--clr-org);--thm-tnt:var(--tnt-org);}
    .thm-gld {--thm-key:#000;--thm-rev:#fff;--thm-clr:var(--clr-gld);--thm-tnt:var(--tnt-gld);}
    .thm-ylw {--thm-key:#000;--thm-rev:#fff;--thm-clr:var(--clr-ylw);--thm-tnt:var(--tnt-ylw);}
    .thm-ppl {--thm-key:#000;--thm-rev:#fff;--thm-clr:var(--clr-ppl);--thm-tnt:var(--tnt-ppl);}
    .thm-blu {--thm-key:#000;--thm-rev:#fff;--thm-clr:var(--clr-blu);--thm-tnt:var(--tnt-blu);}
    .thm-sky {--thm-key:#000;--thm-rev:#fff;--thm-clr:var(--clr-sky);--thm-tnt:var(--tnt-sky);}
    .thm-grn {--thm-key:#000;--thm-rev:#fff;--thm-clr:var(--clr-grn);--thm-tnt:var(--tnt-grn);}
    .thm-nvy {--thm-key:#000;--thm-rev:#fff;--thm-clr:var(--clr-nvy);--thm-tnt:var(--tnt-nvy);}
    .thm-sea {--thm-key:#000;--thm-rev:#fff;--thm-clr:var(--clr-sea);--thm-tnt:var(--tnt-sea);}
    
    .clr-thm {color:var(--thm-clr);}
    .clr-rev {color:var(--thm-rev);}
    .gnd-thm {background-color:var(--thm-clr);}
    .bdr-thm {border-color:var(--thm-clr);}
    .tnt-thm {background-color:var(--thm-tnt);}
    /* not sure about these */
    .clr-tnt {color:var(--thm-tnt);}
    .btn-thm {color:var(--thm-rev);background-color:var(--thm-clr);}
    .btn-txt {color:var(--thm-clr);background-color:transparent;}
    .btn-bdr {color:var(--thm-clr);background-color:transparent;border-color:var(--thm-clr);}
    
    .gnd-app {background-color:var(--app-background);}


    /* atomic svg color application */

    .fll-cur { fill: currentColor; }
    .stk-cur { stroke: currentColor; }

    
    
    /*==================*
        Borders
    *==================*/
    
    
    .bdr {
        border-style: solid;
        border-width: var(--input-border-width);
    }

    .bdr-cur {border-color:currentColor;}
    
    .bdr-tnt {border-color:rgb(255 255 255 / 0.2);}
    .bdr-shd {border-color:rgb(0 0 0 / 0.1);}
    .bdr-shd-tnt,.bdr-dn {border-color:rgb(0 0 0 / 0.2) rgb(255 255 255 / 0.4) rgb(255 255 255 / 0.4) rgb(0 0 0 / 0.2);}
    .bdr-tnt-shd,.bdr-up {border-color:rgb(255 255 255 / 0.4) rgb(0 0 0 / 0.2) rgb(0 0 0 / 0.2) rgb(255 255 255 / 0.4);}

    
    
    .bdr-row > * {border-right:solid 1px;}
    .bdr-row > :last-child {border-right:none;}
    .bdr-col > * {border-bottom:solid 1px;}
    .bdr-col > :last-child {border-bottom:none;}
    .bdr-eee->* {border-color:#eee;}
    .bdr-ddd->* {border-color:#ddd;}
    .bdr-ccc->* {border-color:#ccc;}
    .bdr-999->* {border-color:#999;}
    .bdr-666->* {border-color:#666;}
    .bdr-333->* {border-color:#333;}
    .bdr-000->* {border-color:#000;}
    
    .bdr0 {border-style:solid;border-width:0px;}
    .bdr1 {border-style:solid;border-width:1px;}
    .bdr2 {border-style:solid;border-width:2px;}
    .bdr3 {border-style:solid;border-width:3px;}
    .bdr4 {border-style:solid;border-width:4px;}
    .bdr5 {border-style:solid;border-width:5px;}
    .bdr6 {border-style:solid;border-width:6px;}
    
    .bdr-none   {border-style:none;}
    .bdr-solid  {border-style:solid;}
    .bdr-dash   {border-style:dashed;}
    .bdr-dotted {border-style:dotted;}
    .bdr-double {border-style:double;}
    
    .bdr0___ {border-top-width:0px;}
    .bdr_0__ {border-right-width:0px;}
    .bdr__0_ {border-bottom-width:0px;}
    .bdr___0 {border-left-width:0px;}
    .bdr1___ {border-top-width:1px;}
    .bdr_1__ {border-right-width:1px;}
    .bdr__1_ {border-bottom-width:1px;}
    .bdr___1 {border-left-width:1px;}
    .bdr2___ {border-top-width:2px;}
    .bdr_2__ {border-right-width:2px;}
    .bdr__2_ {border-bottom-width:2px;}
    .bdr___2 {border-left-width:2px;}
    .bdr3___ {border-top-width:3px;}
    .bdr_3__ {border-right-width:3px;}
    .bdr__3_ {border-bottom-width:3px;}
    .bdr___3 {border-left-width:3px;}
    .bdr4___ {border-top-width:4px;}
    .bdr_4__ {border-right-width:4px;}
    .bdr__4_ {border-bottom-width:4px;}
    .bdr___4 {border-left-width:5px;} 
    .bdr5___ {border-top-width:5px;}
    .bdr_5__ {border-right-width:5px;}
    .bdr__5_ {border-bottom-width:5px;}
    .bdr___5 {border-left-width:5px;} 
    .bdr6___ {border-top-width:6px;}
    .bdr_6__ {border-right-width:6px;}
    .bdr__6_ {border-bottom-width:6px;}
    .bdr___6 {border-left-width:6px;} 
    
    .bdr-tbl { border-collapse: collapse;}
    select.clr-fff {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' width='16' height='10'><polyline points='4 3.5 7 6 10 3.5' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /></svg>");
    }
    
    
    /*==================*
        Padding
    *==================*/
    
    
    .pad8->* {padding:32px;}
    .pad6->* {padding:24px;}
    .pad5->* {padding:20px;}
    .pad->*,
    .pad4->* {padding:16px;}
    .pad3->* {padding:12px;}
    .pad2->* {padding: 8px;}
    .pad1->* {padding: 4px;}
    .pad0->* {padding: 0px;}
    
    .pad80->* {padding: 32px  0px;}
    .pad68->* {padding: 24px 32px;}
    .pad58->* {padding: 20px 32px;}
    .pad48->* {padding: 16px 32px;}
    .pad38->* {padding: 12px 32px;}
    .pad28->* {padding:  8px 32px;}
    .pad18->* {padding:  4px 32px;}
    .pad08->* {padding:  0px 32px;}
    .pad_8->* {padding-left: 32px;padding-right: 32px;}
    .pad8_->* {padding-top: 32px;padding-bottom: 32px;}
    
    .pad86->* {padding: 32px 24px;}
    .pad60->* {padding: 24px  0px;}
    .pad56->* {padding: 20px 24px;}
    .pad46->* {padding: 16px 24px;}
    .pad36->* {padding: 12px 24px;}
    .pad26->* {padding:  8px 24px;}
    .pad16->* {padding:  4px 24px;}
    .pad06->* {padding:  0px 24px;}
    .pad_6->* {padding-left: 24px;padding-right: 24px;}
    .pad6_->* {padding-top: 24px;padding-bottom: 24px;}
    
    .pad85->* {padding: 32px 20px;}
    .pad65->* {padding: 24px 20px;}
    .pad50->* {padding: 20px  0px;}
    .pad45->* {padding: 16px 20px;}
    .pad35->* {padding: 12px 20px;}
    .pad25->* {padding:  8px 20px;}
    .pad15->* {padding:  4px 20px;}
    .pad05->* {padding:  0px 20px;}
    .pad_5->* {padding-left: 20px;padding-right: 20px;}
    .pad5_->* {padding-top: 20px;padding-bottom: 20px;}
    
    .pad84->* {padding: 32px 16px;}
    .pad64->* {padding: 24px 16px;}
    .pad54->* {padding: 20px 16px;}
    .pad40->* {padding: 16px  0px;}
    .pad34->* {padding: 12px 16px;}
    .pad24->* {padding:  8px 16px;}
    .pad14->* {padding:  4px 16px;}
    .pad04->* {padding:  0px 16px;}
    .pad_4->* {padding-left: 16px;padding-right: 16px;}
    .pad4_->* {padding-top: 16px;padding-bottom: 16px;}
    
    .pad83->* {padding: 32px 12px;}
    .pad63->* {padding: 24px 12px;}
    .pad53->* {padding: 20px 12px;}
    .pad43->* {padding: 16px 12px;}
    .pad30->* {padding: 12px  0px;}
    .pad23->* {padding:  8px 12px;}
    .pad13->* {padding:  4px 12px;}
    .pad03->* {padding:  0px 12px;}
    .pad_3->* {padding-left: 12px;padding-right: 12px;}
    .pad3_->* {padding-top: 12px;padding-bottom: 12px;}
    
    .pad82->* {padding: 32px  8px;}
    .pad62->* {padding: 24px  8px;}
    .pad52->* {padding: 20px  8px;}
    .pad42->* {padding: 16px  8px;}
    .pad32->* {padding: 12px  8px;}
    .pad20->* {padding:  8px  0px;}
    .pad12->* {padding:  4px  8px;}
    .pad02->* {padding:  0px  8px;}
    .pad_2->* {padding-left:  8px;padding-right:  8px;}
    .pad2_->* {padding-top:  8px;padding-bottom:  8px;}
    
    .pad81->* {padding: 32px  4px;}
    .pad61->* {padding: 24px  4px;}
    .pad51->* {padding: 20px  4px;}
    .pad41->* {padding: 16px  4px;}
    .pad31->* {padding: 12px  4px;}
    .pad21->* {padding:  8px  4px;}
    .pad10->* {padding:  4px  0px;}
    .pad01->* {padding:  0px  4px;}
    .pad_1->* {padding-left:  4px;padding-right:  4px;}
    .pad1_->* {padding-top:  4px;padding-bottom:  4px;}
    
    .pad_0->* {padding-left:  0px;padding-right:  0px;}
    .pad0_->* {padding-top:  0px;padding-bottom:  0px;}
    
    .pad8___->* {padding-top:32px;}
    .pad_8__->* {padding-right:32px;}
    .pad__8_->* {padding-bottom:32px;}
    .pad___8->* {padding-left:32px;}
    .pad6___->* {padding-top:24px;}
    .pad_6__->* {padding-right:24px;}
    .pad__6_->* {padding-bottom:24px;}
    .pad___6->* {padding-left:24px;}
    .pad5___->* {padding-top:20px;}
    .pad_5__->* {padding-right:20px;}
    .pad__5_->* {padding-bottom:20px;}
    .pad___5->* {padding-left:20px;}
    .pad4___->* {padding-top:16px;}
    .pad_4__->* {padding-right:16px;}
    .pad__4_->* {padding-bottom:16px;}
    .pad___4->* {padding-left:16px;}
    .pad3___->* {padding-top:12px;}
    .pad_3__->* {padding-right:12px;}
    .pad__3_->* {padding-bottom:12px;}
    .pad___3->* {padding-left:12px;}
    .pad2___->* {padding-top:8px;}
    .pad_2__->* {padding-right:8px;}
    .pad__2_->* {padding-bottom:8px;}
    .pad___2->* {padding-left:8px;}
    .pad1___->* {padding-top:4px;}
    .pad_1__->* {padding-right:4px;}
    .pad__1_->* {padding-bottom:4px;}
    .pad___1->* {padding-left:4px;}
    .pad0___->* {padding-top:0;}
    .pad_0__->* {padding-right:0;}
    .pad__0_->* {padding-bottom:0;}
    .pad___0->* {padding-left:0;}
    
    
    .pad8 {padding:32px;}
    .pad6 {padding:24px;}
    .pad5 {padding:20px;}
    .pad  ,
    .pad4 {padding:16px;}
    .pad3 {padding:12px;}
    .pad2 {padding: 8px;}
    .pad1 {padding: 4px;}
    .pad0 {padding: 0px;}
    
    .pad80 {padding: 32px  0px;}
    .pad68 {padding: 24px 32px;}
    .pad58 {padding: 20px 32px;}
    .pad48 {padding: 16px 32px;}
    .pad38 {padding: 12px 32px;}
    .pad28 {padding:  8px 32px;}
    .pad18 {padding:  4px 32px;}
    .pad08 {padding:  0px 32px;}
    .pad_8 {padding-left: 32px;padding-right: 32px;}
    .pad8_ {padding-top: 32px;padding-bottom: 32px;}
    
    .pad86 {padding: 32px 24px;}
    .pad60 {padding: 24px  0px;}
    .pad56 {padding: 20px 24px;}
    .pad46 {padding: 16px 24px;}
    .pad36 {padding: 12px 24px;}
    .pad26 {padding:  8px 24px;}
    .pad16 {padding:  4px 24px;}
    .pad06 {padding:  0px 24px;}
    .pad_6 {padding-left: 24px;padding-right: 24px;}
    .pad6_ {padding-top: 24px;padding-bottom: 24px;}
    
    .pad85 {padding: 32px 20px;}
    .pad65 {padding: 24px 20px;}
    .pad50 {padding: 20px  0px;}
    .pad45 {padding: 16px 20px;}
    .pad35 {padding: 12px 20px;}
    .pad25 {padding:  8px 20px;}
    .pad15 {padding:  4px 20px;}
    .pad05 {padding:  0px 20px;}
    .pad_5 {padding-left: 20px;padding-right: 20px;}
    .pad5_ {padding-top: 20px;padding-bottom: 20px;}
    
    .pad84 {padding: 32px 16px;}
    .pad64 {padding: 24px 16px;}
    .pad54 {padding: 20px 16px;}
    .pad40 {padding: 16px  0px;}
    .pad34 {padding: 12px 16px;}
    .pad24 {padding:  8px 16px;}
    .pad14 {padding:  4px 16px;}
    .pad04 {padding:  0px 16px;}
    .pad_4 {padding-left: 16px;padding-right: 16px;}
    .pad4_ {padding-top: 16px;padding-bottom: 16px;}
    
    .pad83 {padding: 32px 12px;}
    .pad63 {padding: 24px 12px;}
    .pad53 {padding: 20px 12px;}
    .pad43 {padding: 16px 12px;}
    .pad30 {padding: 12px  0px;}
    .pad23 {padding:  8px 12px;}
    .pad13 {padding:  4px 12px;}
    .pad03 {padding:  0px 12px;}
    .pad_3 {padding-left: 12px;padding-right: 12px;}
    .pad3_ {padding-top: 12px;padding-bottom: 12px;}
    
    .pad82 {padding: 32px  8px;}
    .pad62 {padding: 24px  8px;}
    .pad52 {padding: 20px  8px;}
    .pad42 {padding: 16px  8px;}
    .pad32 {padding: 12px  8px;}
    .pad20 {padding:  8px  0px;}
    .pad12 {padding:  4px  8px;}
    .pad02 {padding:  0px  8px;}
    .pad_2 {padding-left:  8px;padding-right:  8px;}
    .pad2_ {padding-top:  8px;padding-bottom:  8px;}
    
    .pad81 {padding: 32px  4px;}
    .pad61 {padding: 24px  4px;}
    .pad51 {padding: 20px  4px;}
    .pad41 {padding: 16px  4px;}
    .pad31 {padding: 12px  4px;}
    .pad21 {padding:  8px  4px;}
    .pad10 {padding:  4px  0px;}
    .pad01 {padding:  0px  4px;}
    .pad_1 {padding-left:  4px;padding-right:  4px;}
    .pad1_ {padding-top:  4px;padding-bottom:  4px;}
    
    .pad_0 {padding-left:  0px;padding-right:  0px;}
    .pad0_ {padding-top:  0px;padding-bottom:  0px;}
    
    .pad8___ {padding-top:32px;}
    .pad_8__ {padding-right:32px;}
    .pad__8_ {padding-bottom:32px;}
    .pad___8 {padding-left:32px;}
    .pad6___ {padding-top:24px;}
    .pad_6__ {padding-right:24px;}
    .pad__6_ {padding-bottom:24px;}
    .pad___6 {padding-left:24px;}
    .pad5___ {padding-top:20px;}
    .pad_5__ {padding-right:20px;}
    .pad__5_ {padding-bottom:20px;}
    .pad___5 {padding-left:20px;}
    .pad4___ {padding-top:16px;}
    .pad_4__ {padding-right:16px;}
    .pad__4_ {padding-bottom:16px;}
    .pad___4 {padding-left:16px;}
    .pad3___ {padding-top:12px;}
    .pad_3__ {padding-right:12px;}
    .pad__3_ {padding-bottom:12px;}
    .pad___3 {padding-left:12px;}
    .pad2___ {padding-top:8px;}
    .pad_2__ {padding-right:8px;}
    .pad__2_ {padding-bottom:8px;}
    .pad___2 {padding-left:8px;}
    .pad1___ {padding-top:4px;}
    .pad_1__ {padding-right:4px;}
    .pad__1_ {padding-bottom:4px;}
    .pad___1 {padding-left:4px;}
    .pad0___ {padding-top:0;}
    .pad_0__ {padding-right:0;}
    .pad__0_ {padding-bottom:0;}
    .pad___0 {padding-left:0;}
    
    
    /*==================*
        Rounding
    *==================*/
    
    .rnd { border-radius: var(--content-border-radius); }
    
    .rnd8->* {border-radius:32px;}
    .rnd6->* {border-radius:24px;}
    .rnd5->* {border-radius:20px;}
    .rnd->*,
    .rnd4->* {border-radius:16px;}
    .rnd3->* {border-radius:12px;}
    .rnd2->* {border-radius: 8px;}
    .rnd1->* {border-radius: 4px;}
    .rnd0->* {border-radius: 0px;}
    
    .rnd80->* {border-radius: 32px 32px  0px  0px;}
    .rnd68->* {border-radius: 24px 24px 32px 32px;}
    .rnd58->* {border-radius: 20px 20px 32px 32px;}
    .rnd48->* {border-radius: 16px 16px 32px 32px;}
    .rnd38->* {border-radius: 12px 12px 32px 32px;}
    .rnd28->* {border-radius:  8px  8px 32px 32px;}
    .rnd18->* {border-radius:  4px  4px 32px 32px;}
    .rnd08->* {border-radius:  0px  0px 32px 32px;}
    .rnd_8->* {border-bottom-left-radius: 32px;border-bottom-right-radius: 32px;}
    .rnd8_->* {border-top-left-radius:    32px;border-top-right-radius:    32px;}
    
    .rnd86->* {border-radius: 32px 32px 24px 24px;}
    .rnd60->* {border-radius: 24px 24px  0px  0px;}
    .rnd56->* {border-radius: 20px 20px 24px 24px;}
    .rnd46->* {border-radius: 16px 16px 24px 24px;}
    .rnd36->* {border-radius: 12px 12px 24px 24px;}
    .rnd26->* {border-radius:  8px  8px 24px 24px;}
    .rnd16->* {border-radius:  4px  4px 24px 24px;}
    .rnd06->* {border-radius:  0px  0px 24px 24px;}
    .rnd_6->* {border-bottom-left-radius: 24px;border-bottom-right-radius: 24px;}
    .rnd6_->* {border-top-left-radius:    24px;border-top-right-radius:    24px;}
    
    .rnd85->* {border-radius: 32px 32px 20px 20px;}
    .rnd65->* {border-radius: 24px 24px 20px 20px;}
    .rnd50->* {border-radius: 20px 20px  0px  0px;}
    .rnd45->* {border-radius: 16px 16px 20px 20px;}
    .rnd35->* {border-radius: 12px 12px 20px 20px;}
    .rnd25->* {border-radius:  8px  8px 20px 20px;}
    .rnd15->* {border-radius:  4px  4px 20px 20px;}
    .rnd05->* {border-radius:  0px  0px 20px 20px;}
    .rnd_5->* {border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}
    .rnd5_->* {border-top-left-radius:    20px;border-top-right-radius:    20px;}
    
    .rnd84->* {border-radius: 32px 32px 16px 16px;}
    .rnd64->* {border-radius: 24px 24px 16px 16px;}
    .rnd54->* {border-radius: 20px 20px 16px 16px;}
    .rnd40->* {border-radius: 16px 16px  0px  0px;}
    .rnd34->* {border-radius: 12px 12px 16px 16px;}
    .rnd24->* {border-radius:  8px  8px 16px 16px;}
    .rnd14->* {border-radius:  4px  4px 16px 16px;}
    .rnd04->* {border-radius:  0px  0px 16px 16px;}
    .rnd_4->* {border-bottom-left-radius: 16px;border-bottom-right-radius: 16px;}
    .rnd4_->* {border-top-left-radius:    16px;border-top-right-radius:    16px;}
    
    .rnd83->* {border-radius: 32px 32px 12px 12px;}
    .rnd63->* {border-radius: 24px 24px 12px 12px;}
    .rnd53->* {border-radius: 20px 20px 12px 12px;}
    .rnd43->* {border-radius: 16px 16px 12px 12px;}
    .rnd30->* {border-radius: 12px 12px  0px  0px;}
    .rnd23->* {border-radius:  8px  8px 12px 12px;}
    .rnd13->* {border-radius:  4px  4px 12px 12px;}
    .rnd03->* {border-radius:  0px  0px 12px 12px;}
    .rnd_3->* {border-bottom-left-radius: 12px;border-bottom-right-radius: 12px;}
    .rnd3_->* {border-top-left-radius:    12px;border-top-right-radius:    12px;}
    
    .rnd82->* {border-radius: 32px 32px  8px  8px;}
    .rnd62->* {border-radius: 24px 24px  8px  8px;}
    .rnd52->* {border-radius: 20px 20px  8px  8px;}
    .rnd42->* {border-radius: 16px 16px  8px  8px;}
    .rnd32->* {border-radius: 12px 12px  8px  8px;}
    .rnd20->* {border-radius:  8px  8px  0px  0px;}
    .rnd12->* {border-radius:  4px  4px  8px  8px;}
    .rnd02->* {border-radius:  0px  0px  8px  8px;}
    .rnd_2->* {border-bottom-left-radius:  8px;border-bottom-right-radius:  8px;}
    .rnd2_->* {border-top-left-radius:     8px;border-top-right-radius:     8px;}
    
    .rnd81->* {border-radius: 32px 32px  4px  4px;}
    .rnd61->* {border-radius: 24px 24px  4px  4px;}
    .rnd51->* {border-radius: 20px 20px  4px  4px;}
    .rnd41->* {border-radius: 16px 16px  4px  4px;}
    .rnd31->* {border-radius: 12px 12px  4px  4px;}
    .rnd21->* {border-radius:  8px  8px  4px  4px;}
    .rnd10->* {border-radius:  4px  4px  0px  0px;}
    .rnd01->* {border-radius:  0px  0px  4px  4px;}
    .rnd_1->* {border-bottom-left-radius:  4px;border-bottom-right-radius:  4px;}
    .rnd1_->* {border-top-left-radius:     4px;border-top-right-radius:     4px;}
    
    .rnd_0->* {border-bottom-left-radius:  0px;border-bottom-right-radius:  0px;}
    .rnd0_->* {border-top-left-radius:     0px;border-top-right-radius:     0px;}
    
    .rnd8 {border-radius:32px;}
    .rnd6 {border-radius:24px;}
    .rnd5 {border-radius:20px;}
    .rnd4 {border-radius:16px;}
    .rnd3 {border-radius:12px;}
    .rnd2 {border-radius: 8px;}
    .rnd1 {border-radius: 4px;}
    .rnd0 {border-radius: 0px;}
    
    .rnd80 {border-radius: 32px 32px  0px  0px;}
    .rnd68 {border-radius: 24px 24px 32px 32px;}
    .rnd58 {border-radius: 20px 20px 32px 32px;}
    .rnd48 {border-radius: 16px 16px 32px 32px;}
    .rnd38 {border-radius: 12px 12px 32px 32px;}
    .rnd28 {border-radius:  8px  8px 32px 32px;}
    .rnd18 {border-radius:  4px  4px 32px 32px;}
    .rnd08 {border-radius:  0px  0px 32px 32px;}
    .rnd_8 {border-bottom-left-radius: 32px;border-bottom-right-radius: 32px;}
    .rnd8_ {border-top-left-radius:    32px;border-top-right-radius:    32px;}
    
    .rnd86 {border-radius: 32px 32px 24px 24px;}
    .rnd60 {border-radius: 24px 24px  0px  0px;}
    .rnd56 {border-radius: 20px 20px 24px 24px;}
    .rnd46 {border-radius: 16px 16px 24px 24px;}
    .rnd36 {border-radius: 12px 12px 24px 24px;}
    .rnd26 {border-radius:  8px  8px 24px 24px;}
    .rnd16 {border-radius:  4px  4px 24px 24px;}
    .rnd06 {border-radius:  0px  0px 24px 24px;}
    .rnd_6 {border-bottom-left-radius: 24px;border-bottom-right-radius: 24px;}
    .rnd6_ {border-top-left-radius:    24px;border-top-right-radius:    24px;}
    
    .rnd85 {border-radius: 32px 32px 20px 20px;}
    .rnd65 {border-radius: 24px 24px 20px 20px;}
    .rnd50 {border-radius: 20px 20px  0px  0px;}
    .rnd45 {border-radius: 16px 16px 20px 20px;}
    .rnd35 {border-radius: 12px 12px 20px 20px;}
    .rnd25 {border-radius:  8px  8px 20px 20px;}
    .rnd15 {border-radius:  4px  4px 20px 20px;}
    .rnd05 {border-radius:  0px  0px 20px 20px;}
    .rnd_5 {border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}
    .rnd5_ {border-top-left-radius:    20px;border-top-right-radius:    20px;}
    
    .rnd84 {border-radius: 32px 32px 16px 16px;}
    .rnd64 {border-radius: 24px 24px 16px 16px;}
    .rnd54 {border-radius: 20px 20px 16px 16px;}
    .rnd40 {border-radius: 16px 16px  0px  0px;}
    .rnd34 {border-radius: 12px 12px 16px 16px;}
    .rnd24 {border-radius:  8px  8px 16px 16px;}
    .rnd14 {border-radius:  4px  4px 16px 16px;}
    .rnd04 {border-radius:  0px  0px 16px 16px;}
    .rnd_4 {border-bottom-left-radius: 16px;border-bottom-right-radius: 16px;}
    .rnd4_ {border-top-left-radius:    16px;border-top-right-radius:    16px;}
    
    .rnd83 {border-radius: 32px 32px 12px 12px;}
    .rnd63 {border-radius: 24px 24px 12px 12px;}
    .rnd53 {border-radius: 20px 20px 12px 12px;}
    .rnd43 {border-radius: 16px 16px 12px 12px;}
    .rnd30 {border-radius: 12px 12px  0px  0px;}
    .rnd23 {border-radius:  8px  8px 12px 12px;}
    .rnd13 {border-radius:  4px  4px 12px 12px;}
    .rnd03 {border-radius:  0px  0px 12px 12px;}
    .rnd_3 {border-bottom-left-radius: 12px;border-bottom-right-radius: 12px;}
    .rnd3_ {border-top-left-radius:    12px;border-top-right-radius:    12px;}
    
    .rnd82 {border-radius: 32px 32px  8px  8px;}
    .rnd62 {border-radius: 24px 24px  8px  8px;}
    .rnd52 {border-radius: 20px 20px  8px  8px;}
    .rnd42 {border-radius: 16px 16px  8px  8px;}
    .rnd32 {border-radius: 12px 12px  8px  8px;}
    .rnd20 {border-radius:  8px  8px  0px  0px;}
    .rnd12 {border-radius:  4px  4px  8px  8px;}
    .rnd02 {border-radius:  0px  0px  8px  8px;}
    .rnd_2 {border-bottom-left-radius:  8px;border-bottom-right-radius:  8px;}
    .rnd2_ {border-top-left-radius:     8px;border-top-right-radius:     8px;}
    
    .rnd81 {border-radius: 32px 32px  4px  4px;}
    .rnd61 {border-radius: 24px 24px  4px  4px;}
    .rnd51 {border-radius: 20px 20px  4px  4px;}
    .rnd41 {border-radius: 16px 16px  4px  4px;}
    .rnd31 {border-radius: 12px 12px  4px  4px;}
    .rnd21 {border-radius:  8px  8px  4px  4px;}
    .rnd10 {border-radius:  4px  4px  0px  0px;}
    .rnd01 {border-radius:  0px  0px  4px  4px;}
    .rnd_1 {border-bottom-left-radius:  4px;border-bottom-right-radius:  4px;}
    .rnd1_ {border-top-left-radius:     4px;border-top-right-radius:     4px;}
    
    .rnd0_ {border-top-left-radius:     0px;border-top-right-radius:     0px;}
    .rnd_0 {border-bottom-left-radius:  0px;border-bottom-right-radius:  0px;}
    
    
    .rnd0___ {border-top-left-radius:     0px;}
    .rnd_0__ {border-top-right-radius:    0px;}
    .rnd__0_ {border-bottom-right-radius: 0px;}
    .rnd___0 {border-bottom-left-radius:  0px;}
    
    
    
    /*==================*
        Margin
    *==================*/
    
    
    .mgn8->* {margin:32px;}
    .mgn6->* {margin:24px;}
    .mgn5->* {margin:20px;}
    .mgn ,.mgn->*,
    .mgn4->* {margin:16px;}
    .mgn3->* {margin:12px;}
    .mgn2->* {margin: 8px;}
    .mgn1->* {margin: 4px;}
    .mgn0->* {margin: 0px;}
    
    .mgn80->* {margin: 32px  0px;}
    .mgn68->* {margin: 24px 32px;}
    .mgn58->* {margin: 20px 32px;}
    .mgn48->* {margin: 16px 32px;}
    .mgn38->* {margin: 12px 32px;}
    .mgn28->* {margin:  8px 32px;}
    .mgn18->* {margin:  4px 32px;}
    .mgn08->* {margin:  0px 32px;}
    .mgn08->* {margin:  0px 32px;}
    .mgn_8->* {margin-left: 32px;margin-right: 32px;}
    .mgn8_->* {margin-top: 32px;margin-bottom: 32px;}
    
    .mgn86->* {margin: 32px 24px;}
    .mgn60->* {margin: 24px  0px;}
    .mgn56->* {margin: 20px 24px;}
    .mgn46->* {margin: 16px 24px;}
    .mgn36->* {margin: 12px 24px;}
    .mgn26->* {margin:  8px 24px;}
    .mgn16->* {margin:  4px 24px;}
    .mgn06->* {margin:  0px 24px;}
    .mgn_6->* {margin-left: 24px;margin-right: 24px;}
    .mgn6_->* {margin-top: 24px;margin-bottom: 24px;}
    
    .mgn85->* {margin: 32px 20px;}
    .mgn65->* {margin: 24px 20px;}
    .mgn50->* {margin: 20px  0px;}
    .mgn45->* {margin: 16px 20px;}
    .mgn35->* {margin: 12px 20px;}
    .mgn25->* {margin:  8px 20px;}
    .mgn15->* {margin:  4px 20px;}
    .mgn05->* {margin:  0px 20px;}
    .mgn_5->* {margin-left: 20px;margin-right: 20px;}
    .mgn5_->* {margin-top: 20px;margin-bottom: 20px;}
    
    .mgn84->* {margin: 32px 16px;}
    .mgn64->* {margin: 24px 16px;}
    .mgn54->* {margin: 20px 16px;}
    .mgn40->* {margin: 16px  0px;}
    .mgn34->* {margin: 12px 16px;}
    .mgn24->* {margin:  8px 16px;}
    .mgn14->* {margin:  4px 16px;}
    .mgn04->* {margin:  0px 16px;}
    .mgn_4->* {margin-left: 16px;margin-right: 16px;}
    .mgn4_->* {margin-top: 16px;margin-bottom: 16px;}
    
    .mgn83->* {margin: 32px 12px;}
    .mgn63->* {margin: 24px 12px;}
    .mgn53->* {margin: 20px 12px;}
    .mgn43->* {margin: 16px 12px;}
    .mgn30->* {margin: 12px  0px;}
    .mgn23->* {margin:  8px 12px;}
    .mgn13->* {margin:  4px 12px;}
    .mgn03->* {margin:  0px 12px;}
    .mgn_3->* {margin-left: 12px;margin-right: 12px;}
    .mgn3_->* {margin-top: 12px;margin-bottom: 12px;}
    
    .mgn82->* {margin: 32px  8px;}
    .mgn62->* {margin: 24px  8px;}
    .mgn52->* {margin: 20px  8px;}
    .mgn42->* {margin: 16px  8px;}
    .mgn32->* {margin: 12px  8px;}
    .mgn20->* {margin:  8px  0px;}
    .mgn12->* {margin:  4px  8px;}
    .mgn02->* {margin:  0px  8px;}
    .mgn_2->* {margin-left:  8px;margin-right:  8px;}
    .mgn2_->* {margin-top:  8px;margin-bottom:  8px;}
    
    .mgn81->* {margin: 32px  4px;}
    .mgn61->* {margin: 24px  4px;}
    .mgn51->* {margin: 20px  4px;}
    .mgn41->* {margin: 16px  4px;}
    .mgn31->* {margin: 12px  4px;}
    .mgn21->* {margin:  8px  4px;}
    .mgn10->* {margin:  4px  0px;}
    .mgn01->* {margin:  0px  4px;}
    .mgn_1->* {margin-left:  4px;margin-right:  4px;}
    .mgn1_->* {margin-top:  4px;margin-bottom:  4px;}
    
    .mgn_0->* {margin-left:  0px;margin-right:  0px;}
    .mgn0_->* {margin-top:  0px;margin-bottom:  0px;}
    
    .mgn8___->* {margin-top:32px;}
    .mgn_8__->* {margin-right:32px;}
    .mgn__8_->* {margin-bottom:32px;}
    .mgn___8->* {margin-left:32px;}
    .mgn6___->* {margin-top:24px;}
    .mgn_6__->* {margin-right:24px;}
    .mgn__6_->* {margin-bottom:24px;}
    .mgn___6->* {margin-left:24px;}
    .mgn5___->* {margin-top:20px;}
    .mgn_5__->* {margin-right:20px;}
    .mgn__5_->* {margin-bottom:20px;}
    .mgn___5->* {margin-left:20px;}
    .mgn4___->* {margin-top:16px;}
    .mgn_4__->* {margin-right:16px;}
    .mgn__4_->* {margin-bottom:16px;}
    .mgn___4->* {margin-left:16px;}
    .mgn3___->* {margin-top:12px;}
    .mgn_3__->* {margin-right:12px;}
    .mgn__3_->* {margin-bottom:12px;}
    .mgn___3->* {margin-left:12px;}
    .mgn2___->* {margin-top:8px;}
    .mgn_2__->* {margin-right:8px;}
    .mgn__2_->* {margin-bottom:8px;}
    .mgn___2->* {margin-left:8px;}
    .mgn1___->* {margin-top:4px;}
    .mgn_1__->* {margin-right:4px;}
    .mgn__1_->* {margin-bottom:4px;}
    .mgn___1->* {margin-left:4px;}
    .mgn0___->* {margin-top:0;}
    .mgn_0__->* {margin-right:0;}
    .mgn__0_->* {margin-bottom:0;}
    .mgn___0->* {margin-left:0;}
    
    .mgna_->*   {margin-left:auto;}
    .mgn_a->*   {margin-right:auto;}
    .mgna->*,
    .mgnaa->*,
    .mgn-auto->* {margin-left:auto;margin-right:auto;}
    
    
    
    .mgn8 {margin:32px;}
    .mgn6 {margin:24px;}
    .mgn5 {margin:20px;}
    .mgn ,
    .mgn4 {margin:16px;}
    .mgn3 {margin:12px;}
    .mgn2 {margin: 8px;}
    .mgn1 {margin: 4px;}
    .mgn0 {margin: 0px;}
    
    .mgn-8 {margin:-32px;}
    .mgn-6 {margin:-24px;}
    .mgn-5 {margin:-20px;}
    .mgn-4 {margin:-16px;}
    .mgn-3 {margin:-12px;}
    .mgn-2 {margin: -8px;}
    .mgn-1 {margin: -4px;}
    .mgn-0 {margin: -0px;}
    
    
    
    
    .mgn80 {margin: 32px  0px;}
    .mgn68 {margin: 24px 32px;}
    .mgn58 {margin: 20px 32px;}
    .mgn48 {margin: 16px 32px;}
    .mgn38 {margin: 12px 32px;}
    .mgn28 {margin:  8px 32px;}
    .mgn18 {margin:  4px 32px;}
    .mgn08 {margin:  0px 32px;}
    .mgn08 {margin:  0px 32px;}
    .mgn_8 {margin-left: 32px;margin-right: 32px;}
    .mgn8_ {margin-top: 32px;margin-bottom: 32px;}
    
    .mgn86 {margin: 32px 24px;}
    .mgn60 {margin: 24px  0px;}
    .mgn56 {margin: 20px 24px;}
    .mgn46 {margin: 16px 24px;}
    .mgn36 {margin: 12px 24px;}
    .mgn26 {margin:  8px 24px;}
    .mgn16 {margin:  4px 24px;}
    .mgn06 {margin:  0px 24px;}
    .mgn_6 {margin-left: 24px;margin-right: 24px;}
    .mgn6_ {margin-top: 24px;margin-bottom: 24px;}
    
    .mgn85 {margin: 32px 20px;}
    .mgn65 {margin: 24px 20px;}
    .mgn50 {margin: 20px  0px;}
    .mgn45 {margin: 16px 20px;}
    .mgn35 {margin: 12px 20px;}
    .mgn25 {margin:  8px 20px;}
    .mgn15 {margin:  4px 20px;}
    .mgn05 {margin:  0px 20px;}
    .mgn_5 {margin-left: 20px;margin-right: 20px;}
    .mgn5_ {margin-top: 20px;margin-bottom: 20px;}
    
    .mgn84 {margin: 32px 16px;}
    .mgn64 {margin: 24px 16px;}
    .mgn54 {margin: 20px 16px;}
    .mgn40 {margin: 16px  0px;}
    .mgn34 {margin: 12px 16px;}
    .mgn24 {margin:  8px 16px;}
    .mgn14 {margin:  4px 16px;}
    .mgn04 {margin:  0px 16px;}
    .mgn_4 {margin-left: 16px;margin-right: 16px;}
    .mgn4_ {margin-top: 16px;margin-bottom: 16px;}
    
    .mgn83 {margin: 32px 12px;}
    .mgn63 {margin: 24px 12px;}
    .mgn53 {margin: 20px 12px;}
    .mgn43 {margin: 16px 12px;}
    .mgn30 {margin: 12px  0px;}
    .mgn23 {margin:  8px 12px;}
    .mgn13 {margin:  4px 12px;}
    .mgn03 {margin:  0px 12px;}
    .mgn_3 {margin-left: 12px;margin-right: 12px;}
    .mgn3_ {margin-top: 12px;margin-bottom: 12px;}
    
    .mgn82 {margin: 32px  8px;}
    .mgn62 {margin: 24px  8px;}
    .mgn52 {margin: 20px  8px;}
    .mgn42 {margin: 16px  8px;}
    .mgn32 {margin: 12px  8px;}
    .mgn20 {margin:  8px  0px;}
    .mgn12 {margin:  4px  8px;}
    .mgn02 {margin:  0px  8px;}
    .mgn_2 {margin-left:  8px;margin-right:  8px;}
    .mgn2_ {margin-top:  8px;margin-bottom:  8px;}
    
    .mgn81 {margin: 32px  4px;}
    .mgn61 {margin: 24px  4px;}
    .mgn51 {margin: 20px  4px;}
    .mgn41 {margin: 16px  4px;}
    .mgn31 {margin: 12px  4px;}
    .mgn21 {margin:  8px  4px;}
    .mgn10 {margin:  4px  0px;}
    .mgn01 {margin:  0px  4px;}
    .mgn_1 {margin-left:  4px;margin-right:  4px;}
    .mgn1_ {margin-top:  4px;margin-bottom:  4px;}
    
    .mgn_0 {margin-left:  0px;margin-right:  0px;}
    .mgn0_ {margin-top:  0px;margin-bottom:  0px;}
    
    .mgn_-8 {margin-left:-32px;margin-right:-32px;}
    .mgn_-6 {margin-left:-24px;margin-right:-24px;}
    .mgn_-5 {margin-left:-20px;margin-right:-20px;}
    .mgn_-4 {margin-left:-16px;margin-right:-16px;}
    .mgn_-3 {margin-left:-12px;margin-right:-12px;}
    .mgn_-2 {margin-left: -8px;margin-right: -8px;}
    .mgn_-1 {margin-left: -4px;margin-right: -4px;}
    .mgn_-0 {margin-left: -0px;margin-right: -0px;}
    
    .mgn-8_ {margin-top:-32px;margin-bottom:-32px;}
    .mgn-6_ {margin-top:-24px;margin-bottom:-24px;}
    .mgn-5_ {margin-top:-20px;margin-bottom:-20px;}
    .mgn-4_ {margin-top:-16px;margin-bottom:-16px;}
    .mgn-3_ {margin-top:-12px;margin-bottom:-12px;}
    .mgn-2_ {margin-top: -8px;margin-bottom: -8px;}
    .mgn-1_ {margin-top: -4px;margin-bottom: -4px;}
    .mgn-0_ {margin-top: -0px;margin-bottom: -0px;}
    
    
    
    
    .mgn8___ {margin-top:32px;}
    .mgn_8__ {margin-right:32px;}
    .mgn__8_ {margin-bottom:32px;}
    .mgn___8 {margin-left:32px;}
    .mgn6___ {margin-top:24px;}
    .mgn_6__ {margin-right:24px;}
    .mgn__6_ {margin-bottom:24px;}
    .mgn___6 {margin-left:24px;}
    .mgn5___ {margin-top:20px;}
    .mgn_5__ {margin-right:20px;}
    .mgn__5_ {margin-bottom:20px;}
    .mgn___5 {margin-left:20px;}
    .mgn4___ {margin-top:16px;}
    .mgn_4__ {margin-right:16px;}
    .mgn__4_ {margin-bottom:16px;}
    .mgn___4 {margin-left:16px;}
    .mgn3___ {margin-top:12px;}
    .mgn_3__ {margin-right:12px;}
    .mgn__3_ {margin-bottom:12px;}
    .mgn___3 {margin-left:12px;}
    .mgn2___ {margin-top:8px;}
    .mgn_2__ {margin-right:8px;}
    .mgn__2_ {margin-bottom:8px;}
    .mgn___2 {margin-left:8px;}
    .mgn1___ {margin-top:4px;}
    .mgn_1__ {margin-right:4px;}
    .mgn__1_ {margin-bottom:4px;}
    .mgn___1 {margin-left:4px;}
    .mgn0___ {margin-top:0;}
    .mgn_0__ {margin-right:0;}
    .mgn__0_ {margin-bottom:0;}
    .mgn___0 {margin-left:0;}
    
    
    .mgna_,.mgn___a   {margin-left:auto;}
    .mgn_a,.mgn_a__   {margin-right:auto;}
    .mgna,
    .mgnaa,
    .mgn-auto {margin-left:auto;margin-right:auto;}
    
    
    .mgn-8___ {margin-top:-32px;}
    .mgn_-8__ {margin-right:-32px;}
    .mgn__-8_ {margin-bottom:-32px;}
    .mgn___-8 {margin-left:-32px;}
    .mgn-6___ {margin-top:-24px;}
    .mgn_-6__ {margin-right:-24px;}
    .mgn__-6_ {margin-bottom:-24px;}
    .mgn___-6 {margin-left:-24px;}
    .mgn-5___ {margin-top:-20px;}
    .mgn_-5__ {margin-right:-20px;}
    .mgn__-5_ {margin-bottom:-20px;}
    .mgn___-5 {margin-left:-20px;}
    .mgn-4___ {margin-top:-16px;}
    .mgn_-4__ {margin-right:-16px;}
    .mgn__-4_ {margin-bottom:-16px;}
    .mgn___-4 {margin-left:-16px;}
    .mgn-3___ {margin-top:-12px;}
    .mgn_-3__ {margin-right:-12px;}
    .mgn__-3_ {margin-bottom:-12px;}
    .mgn___-3 {margin-left:-12px;}
    .mgn-2___ {margin-top:-8px;}
    .mgn_-2__ {margin-right:-8px;}
    .mgn__-2_ {margin-bottom:-8px;}
    .mgn___-2 {margin-left:-8px;}
    .mgn-1___ {margin-top:-4px;}
    .mgn_-1__ {margin-right:-4px;}
    .mgn__-1_ {margin-bottom:-4px;}
    .mgn___-1 {margin-left:-4px;}
    .mgn-0___ {margin-top:-0;}
    .mgn_-0__ {margin-right:-0;}
    .mgn__-0_ {margin-bottom:-0;}
    .mgn___-0 {margin-left:-0;}
    
    
    
    /*==================*
        Block Align
    *==================*/
    
    
    .blk,
    .block   {display:block;width:-webkit-fill-available;width:-moz-available;width:fill-available;width:fill;width:available;width:stretch;}
    .inl-blk {display:inline-block;}
    .inl-top {display:inline-block;vertical-align:top;}
    .inl-mid {display:inline-block;vertical-align:middle;}
    .inl-bot {display:inline-block;vertical-align:bottom;}
    .inl-bse {display:inline-block;vertical-align:baseline;}
    .flt-clr {overflow:hidden;display:block;float:none;clear:both;}
    .flt-fix:after  {content:'';display:block;float:none;clear:both;}
    .flt-lft {float: left;}
    .flt-rgt {float:right;}
    .flt-ctr,
    .aln-ctr->*,
    .aln-ctr {margin-left:auto;margin-right:auto;}
    .aln-lft->*,
    .aln-lft {margin-right:auto;margin-left:0;}
    .aln-rgt->*,
    .aln-rgt {margin-left:auto;margin-right:0;}
    .aln-top->*,
    .aln-top {vertical-align:top;}
    .aln-mid->*,
    .aln-mid {vertical-align:middle;}
    .aln-bot->*,
    .aln-bot {vertical-align:bottom;}
    
    
    
    /*==================*
        Block Position
    *==================*/
    
    
    .pos-sta         {position:static;}
    .pos-rel         {position:relative;}
    .pos-abs         {position:absolute;}
    .pos-abs-0000,
    .pos-abs-f       {position:absolute;top:0;   right:0;   bottom:0;   left:0;}
    .pos-abs-00a0,
    .pos-abs-t       {position:absolute;top:0;   right:0;   bottom:auto;left:0;}
    .pos-abs-a000,
    .pos-abs-b       {position:absolute;top:auto;right:0;   bottom:0;   left:0;}
    .pos-abs-0a00,
    .pos-abs-l       {position:absolute;top:0;   right:auto;bottom:0;   left:0;}
    .pos-abs-000a,
    .pos-abs-r       {position:absolute;top:0;   right:0;   bottom:0;   left:auto;}

    .pos-abs-5aa0,
    .pos-abs-mid-l   {position:absolute;top:50%; right:auto;bottom:auto;left:0;}
    .pos-abs-50aa,
    .pos-abs-mid-r   {position:absolute;top:50%; right:0;   bottom:auto;left:auto;}

    .pos-abs-00aa,
    .pos-abs-tr      {position:absolute;top:0;   right:0;   bottom:auto;left:auto;}
    .pos-abs-a00a,
    .pos-abs-br      {position:absolute;top:auto;right:0;   bottom:0;   left:auto;}
    .pos-abs-0aa0,
    .pos-abs-tl      {position:absolute;top:0;   right:auto;bottom:auto;left:0;}
    .pos-abs-aa00,
    .pos-abs-bl      {position:absolute;top:auto;right:auto;bottom:0;   left:0;}
    .pos-fix         {position:fixed;} /* position makes this a modifier on pos-abs props */
    
    
    .z1 {z-index:1;}
    .z2 {z-index:2;}
    .z3 {z-index:3;}
    .z4 {z-index:4;}
    .z5 {z-index:5;}
    .z6 {z-index:6;}
    .z7 {z-index:7;}
    .z8 {z-index:8;}
    .z9 {z-index:9;}
    .z10 {z-index:10;}
    .z11 {z-index:11;}
    .z12 {z-index:12;}
    .z13 {z-index:13;}
    .z14 {z-index:14;}
    .z15 {z-index:15;}
    .z16 {z-index:16;}
    .z17 {z-index:17;}
    .z18 {z-index:18;}
    .z19 {z-index:19;}
    .z100 {z-index:100;}
    .z101 {z-index:101;}
    .z102 {z-index:102;}
    .z103 {z-index:103;}
    .z104 {z-index:104;}
    .z105 {z-index:105;}
    .z106 {z-index:106;}
    .z107 {z-index:107;}
    .z108 {z-index:108;}
    .z109 {z-index:109;}

    
    /*==================*
        Flex Layout
    *==================*/
    
    
    /* Flexbox. Decent Reference: https://cssreference.io/flexbox/ */
    
    .flex            {display:flex;}
    .flex-ctr,
    .flex-center     {display:flex;align-items: center;justify-content:center;}
    .flex-col,
    .flex-column     {display:flex;flex-direction: column;}
    .flex-row        {display:flex;flex-direction: row;}
    .flex-wrap       {flex-wrap: wrap;}
    .flex-inl        {display:inline-flex;max-width: 100%;} /* latter prop keeps elements from overrunning parent */
    
    /* justify-content is direction-axis (justify-content applies to flex while justify-items is for css grid only) */
    .just-start      {justify-content:flex-start;} /* default */
    .just-end        {justify-content:flex-end;}
    .just-center     {justify-content:center;}
    .just-between    {justify-content:space-between;}
    .just-around     {justify-content:space-around;}
    .just-evenly     {justify-content:space-evenly;}
    .just-stretch    {justify-content:stretch;}
    
    /* align-items is cross-axis for single line flex (align-content applies only to multi-line/wrapped) */
    .algn-start      {align-items:flex-start;}
    .algn-end        {align-items:flex-end;}
    .algn-center     {align-items:center;}
    .algn-baseline   {align-items:baseline;}
    .algn-stretch    {align-items:stretch;} /* default */
    
    /* align-self is cross-axis per-child override (justify-self does not apply to flex) */
    .self-auto       {align-self:auto;} /* default */
    .self-start      {align-self:flex-start;}
    .self-end        {align-self:flex-end;}
    .self-center     {align-self:center;}
    .self-baseline   {align-self:baseline;}
    .self-stretch    {align-self:stretch;}
    
    /* children are fixed size based on content (overriding flex-shrink:1 default) ...hmm hidden is annoying */
    .flex-col > *,   
    .flex-column > * {flex-grow:0;flex-shrink:0;/*overflow:hidden;*/}
    .flex-row > *    {flex-grow:0;flex-shrink:1;/*overflow:hidden;*/}
    .flex-fix        {flex-grow:0;flex-shrink:0;/*overflow:hidden;*/}
    .flex-grw,
    .flex-grow       {flex-grow:1;flex-shrink:1;/*overflow:hidden;*/}
    /* .flex-col > .flex-grw,
    .flex-col > .flex-grow {overflow-y:auto;}
    .flex-row > .flex-grw,
    .flex-row > .flex-grow {overflow-x:auto;}
    .flex-grw.ohide,
    .flex-grow.ohide       {overflow-x:hidden;overflow-y:hidden;} */
    
    .flex-col > .flex-grow.ui-loading {
        overflow-y:hidden;
    }
    /* equal colum width */
    .flex-equal > * {
        flex-basis: 100%;
    }
    
    
    
    /*==================*
        Block Overflow
    *==================*/
    
    
    .ohide   {overflow:hidden;}
    .oshow   {overflow:visible;}
    .oroll   {overflow:scroll;}
    .oauto   {overflow:auto;}
    .ohide-x {overflow-x:hidden;}
    .oclip   {overflow:clip;} 
    .oshow-x {overflow-x:visible;}
    .oroll-x {overflow-x:scroll;}
    .oauto-x {overflow-x:auto;}
    .ohide-y {overflow-y:hidden;}
    .oclip-y {overflow:clip;} /* same as ohide without creating a block formatting context */
    .oshow-y {overflow-y:visible;}
    .oroll-y {overflow-y:scroll;}
    .oauto-y {overflow-y:auto;}
    
    
    
    /*==================*
        Block Width
    *==================*/
    
    
    .full         {width:100%;}
    .half         {width:50%;}
    .third        {width:33.333333%;}
    .two-third    {width:66.666666%;}
    .fourth       {width:25%;}
    .three-fourth {width:75%;}
    .fifth        {width:20%;}
    .two-fifth    {width:40%;}
    .three-fifth  {width:60%;}
    .four-fifth   {width:80%;}
    
    
    .w100 {width:100%;}
    .w50  {width:50%;}
    .w33  {width:33.333333333333%;}
    .w66  {width:66.666666666666%;}
    .w25  {width:25%;}
    .w75  {width:75%;}
    .w20  {width:20%;}
    .w40  {width:40%;}
    .w60  {width:60%;}
    .w80  {width:80%;}
    .w0,
    .w00  {width:0%;}
    .wa,
    .wauto{width:auto;}

    .h100 {height:100%;}
    .h50  {height:50%;}
    .h33  {height:33.333333333333%;}
    .h66  {height:66.666666666666%;}
    .h25  {height:25%;}
    .h75  {height:75%;}
    .h20  {height:20%;}
    .h40  {height:40%;}
    .h60  {height:60%;}
    .h80  {height:80%;}
    .h0,
    .h00  {height:0%;}
    
    
    
    
    /*==================*
        Max Width
    *==================*/
    
    
    .max01->* {width:  16px;max-width:100%;min-width:0;}
    .max02->* {width:  32px;max-width:100%;min-width:0;}
    .max03->* {width:  48px;max-width:100%;min-width:0;}
    .max04->* {width:  64px;max-width:100%;min-width:0;}
    .max1->*  {width:  80px;max-width:100%;min-width:0;}
    .max2->*  {width: 160px;max-width:100%;min-width:0;}
    .max3->*  {width: 240px;max-width:100%;min-width:0;}
    .max4->*  {width: 320px;max-width:100%;min-width:0;}
    .max5->*  {width: 400px;max-width:100%;min-width:0;}
    .max6->*  {width: 480px;max-width:100%;min-width:0;}
    .max7->*  {width: 560px;max-width:100%;min-width:0;}
    .max8->*  {width: 640px;max-width:100%;min-width:0;}
    .max9->*  {width: 720px;max-width:100%;min-width:0;}
    .maxA->*  {width: 800px;max-width:100%;min-width:0;}
    .maxB->*  {width: 880px;max-width:100%;min-width:0;}
    .maxC->*  {width: 960px;max-width:100%;min-width:0;}
    .maxD->*  {width:1040px;max-width:100%;min-width:0;}
    .maxE->*  {width:1120px;max-width:100%;min-width:0;}
    .maxF->*  {width:1200px;max-width:100%;min-width:0;}
    .maxF1->* {width:1280px;max-width:100%;min-width:0;}
    .maxF2->* {width:1360px;max-width:100%;min-width:0;}
    .maxF3->* {width:1440px;max-width:100%;min-width:0;}
    .maxF4->* {width:1520px;max-width:100%;min-width:0;}
    .maxF5->* {width:1600px;max-width:100%;min-width:0;}
    
    
    .max   {max-width:100%;min-width:0;}
    .max0,
    .max00 {width:   0px;max-width:100%;min-width:0;}
    .max01 {width:  16px;max-width:100%;min-width:0;}
    .max02 {width:  32px;max-width:100%;min-width:0;}
    .max03 {width:  48px;max-width:100%;min-width:0;}
    .max04 {width:  64px;max-width:100%;min-width:0;}
    
    .max1,
    .max05 {width:  80px;max-width:100%;min-width:0;}
    .max06 {width:  96px;max-width:100%;min-width:0;}
    .max07 {width: 112px;max-width:100%;min-width:0;}
    .max08 {width: 128px;max-width:100%;min-width:0;}
    .max09 {width: 144px;max-width:100%;min-width:0;}
    
    .max2,
    .max0A {width: 160px;max-width:100%;min-width:0;}
    .max0B {width: 176px;max-width:100%;min-width:0;}
    .max0C {width: 192px;max-width:100%;min-width:0;}
    .max0D {width: 208px;max-width:100%;min-width:0;}
    .max0E {width: 224px;max-width:100%;min-width:0;}
    
    .max0F,
    .max3,
    .max30 {width: 240px;max-width:100%;min-width:0;}
    .max31 {width: 256px;max-width:100%;min-width:0;}
    .max32 {width: 272px;max-width:100%;min-width:0;}
    .max33 {width: 288px;max-width:100%;min-width:0;}
    .max34 {width: 304px;max-width:100%;min-width:0;}
    
    .max4  {width: 320px;max-width:100%;min-width:0;}
    .max5  {width: 400px;max-width:100%;min-width:0;}
    .max6  {width: 480px;max-width:100%;min-width:0;}
    .max7  {width: 560px;max-width:100%;min-width:0;}
    .max8  {width: 640px;max-width:100%;min-width:0;}
    .max9  {width: 720px;max-width:100%;min-width:0;}
    .maxA  {width: 800px;max-width:100%;min-width:0;}
    .maxB  {width: 880px;max-width:100%;min-width:0;}
    .maxC  {width: 960px;max-width:100%;min-width:0;}
    .maxD  {width:1040px;max-width:100%;min-width:0;}
    .maxE  {width:1120px;max-width:100%;min-width:0;}
    .maxF  {width:1200px;max-width:100%;min-width:0;}
    .maxF1 {width:1280px;max-width:100%;min-width:0;}
    .maxF2 {width:1360px;max-width:100%;min-width:0;}
    .maxF3 {width:1440px;max-width:100%;min-width:0;}
    .maxF4 {width:1520px;max-width:100%;min-width:0;}
    .maxF5 {width:1600px;max-width:100%;min-width:0;}
    
    
    
    
    
    /*==================*
        Fixed aspect box
    *==================*/
    
    
    .circle,
    .divine,.golden,
    .divine-l,.golden-l
    .divine-p .golden-p {
        display: inline-flex;
        flex-direction: row;
        flex-grow: 0;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
    }
    .circle:before, .circle[href]:before,
    .square:before, .square[href]:before,
    .golden:before, .golden[href]:before,
    .divine:before, .divine[href]:before,
    .golden-l:before, .golden-l[href]:before,
    .divine-l:before, .divine-l[href]:before,
    .golden-p:before, .golden-p[href]:before,
    .divine-p:before, .divine-p[href]:before {
        content: '';
        display: block;
        padding-bottom: 61.80339887498948%;
        width: 0;
        flex-grow: 0;
        flex-shrink: 0;
    }
    
    .circle:before, .circle[href]:before,
    .square:before, .square[href]:before {
        padding-bottom: 100%;
    } 
    .divine:before, .golden[href]:before,
    .golden-l:before, .golden-l[href]:before,
    .divine-l:before, .divine-l[href]:before {
        padding-bottom: 61.80339887498948%;
    }
    .golden-p:before, .golden-p[href]:before,
    .divine-p:before, .divine-p[href]:before {
        padding-bottom: 161.80339887498948482%;
    }
    .circle:empty:before,
    .square:empty:before,
    .golden:empty:before,.golden-l:empty:before,.golden-p:empty:before,
    .divine:empty:before,.divine-l:empty:before,.divine-p:empty:before {
        float: none;
    }
    .circle {
        border-radius:50%;
    }
    
    /* scroll sticky elements */

    .pos-stc-lft,
    .pos-stc-lft->* {
        position: sticky;
        left: 0;
        z-index: 3;
    }
    .pos-stc-top,
    .pos-stc-top->* {
        position:sticky;
        top: 0;
        z-index: 4;
    }
    .pos-stc-top->:first-child {
        z-index: 5;
    }
    .pos-stc-bot,
    .pos-stc-bot->* {
        position:sticky;
        bottom: 0;
    }
    .pos-stc-tbl th {
        position:sticky;
    }
    .pos-stc-tbl th:first-child {
        left: 0;
    }
    .pos-stc-tbl tr:first-child th {
        top: 0;
    }
    
    /* feature colors */

    .thm-saving { --thm-clr: var(--clr-saving);--thm-rev: var(--clr-wht);--thm-tnt: var(--tnt-saving); }
    .thm-advice { --thm-clr: var(--clr-advice);--thm-rev: var(--clr-wht);--thm-tnt: var(--tnt-advice); }
    .thm-payout { --thm-clr: var(--clr-payout);--thm-rev: var(--clr-wht);--thm-tnt: var(--tnt-payout); }
    .thm-appeal { --thm-clr: var(--clr-appeal);--thm-rev: var(--clr-wht);--thm-tnt: var(--tnt-appeal); }


    .clr-saving { color: var(--clr-saving); }
    .bdr-saving { border-color: var(--clr-saving); }
    .gnd-saving { background-color: var(--clr-saving); }
    .btn-saving { background-color: var(--clr-saving); }
    .tnt-saving { background-color: var(--tnt-saving); }

    .clr-advice { color: var(--clr-advice); }
    .bdr-advice { border-color: var(--clr-advice); }
    .gnd-advice { background-color: var(--clr-advice); }
    .btn-advice { background-color: var(--clr-advice); }
    .tnt-advice { background-color: var(--tnt-advice); }

    .clr-payout { color: var(--clr-payout); }
    .bdr-payout { border-color: var(--clr-payout); }
    .gnd-payout { background-color: var(--clr-payout); }
    .btn-payout { background-color: var(--clr-payout); }
    .tnt-payout { background-color: var(--tnt-payout); }

    .clr-appeal { color: var(--clr-appeal); }
    .bdr-appeal { border-color: var(--clr-appeal); }
    .gnd-appeal { background-color: var(--clr-appeal); }
    .btn-appeal { background-color: var(--clr-appeal); }
    .tnt-appeal { background-color: var(--tnt-appeal); }


    .clr-call { color: var(--clr-call); }
    .bdr-call { border-color: var(--clr-call); }
    .gnd-call { background-color: var(--clr-call); }
    .btn-call { background-color: var(--clr-call); }
    .tnt-call { background-color: var(--tnt-call); }






    
    /*==================*
        reassert passive
        color controls
    *==================*/
    
    
    .btn-oline, .btn-outline {
        border-color:currentColor;
        background-color: transparent;
    }
    
    .btn[disabled],
    button[disabled],
    [type="button"][disabled],
    [type="submit"][disabled] {
        background-color:#ccc;
        color: #999;
        pointer-events:none;
    }
    .btn-clr[disabled] {
        background-color: transparent;
    }
    
    
    

/*====================*
   colors
 *====================*/
  
 :root {
    --clr-wht:#fff;
    --tnt-wht:#222;
    --clr-blk:#000;
    --tnt-blk:#eee;
    --clr-gry:#999;
    --tnt-gry:#f3f3f3;
    --clr-red:#ff4477;
    --tnt-red:#ffeeee;
    --clr-org:#ffa500;
    --tnt-org:#ffefd5;
    --clr-gld:#ffbf00;
    --tnt-gld:#fff8dc;
    --clr-ylw:Gold;
    --tnt-ylw:#fff8d2;
    --clr-ppl:#9966ff;
    --tnt-ppl:#eeddff;
    --clr-blu:RoyalBlue;
    --tnt-blu:#dcefff;
    --clr-sky:DeepskyBlue;
    --tnt-sky:#e1f8ff;
    --clr-grn:#00bb33;
    --tnt-grn:#ddf6dd;
    --clr-nvy:#153569;
    --tnt-nvy:#cee0ff;
    --clr-sea:#3cb371;
    --tnt-sea:#ddf6ee;
    --clr-clr:transparent;
    --clr-disabled:#999;
    --clr-disabled-rev:#ccc;

    /*
    --tnt-red:#ff447722;
    --tnt-org:#ffa50022;
    --tnt-gld:#ffbf0022;
    */

    --clr-000:#000;
    --clr-111:#111;
    --clr-222:#222;
    --clr-333:#333;
    --clr-444:#444;
    --clr-555:#555;
    --clr-666:#666;
    --clr-777:#777;
    --clr-888:#888;
    --clr-999:#999;
    --clr-aaa:#aaa;
    --clr-bbb:#bbb;
    --clr-ccc:#ccc;
    --clr-ddd:#ddd;
    --clr-eee:#eee;
    --clr-f0f:#f0f0f0;
    --clr-f3f:#f3f3f3;
    --clr-f6f:#f6f6f6;
    --clr-f9f:#f9f9f9;
    --clr-fff:#fff;
  }